/* web/app/app.css — layout only for the sign-in shell and the minimal desktop. Every colour, size and
   duration comes from design.css tokens; nothing here invents one. */

.app { position: relative; min-height: 100vh; min-height: 100dvh; }
.app > .signin, .app > .desktop { position: relative; z-index: 1; }

/* ---- sign in: glass over the live desktop, centred, one column ---- */
.signin { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.signin-card { inline-size: 100%; max-inline-size: 400px; border: 1px solid var(--hair-strong); border-radius: var(--r-card); padding: 20px; display: flex; flex-direction: column; gap: var(--gap-section); animation: window-enter var(--dur-window-enter) var(--ease-window-enter) backwards; }
.signin-head { display: flex; align-items: center; gap: 8px; block-size: var(--row-28); }
.signin-head .lang { margin-inline-start: auto; }
.screen { display: flex; flex-direction: column; gap: var(--gap-grid-lg); }
.screen h1 { font-weight: 500; }
.lang { display: inline-flex; gap: 4px; }
/* drawn at 24 px; design.css derives its 44 px coarse-pointer hit area from --chip-h */
.lang .chip { --chip-h: 24px; padding-inline: 8px; font-size: var(--fs-meta); }
.center-text { text-align: center; }
.signin-alt:empty, .signin-card .line[data-state="none"] { display: none; }

/* method and profile choices are the same shape: an identity circle, a name, a caption */
.choice { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 56px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--card); text-align: start; transition: border-color var(--dur-hover) var(--ease-hover); }
.choice:hover { border-color: var(--hair-strong); }
.choice-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.choice-name { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choice-sub { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.choice .glyph { inline-size: 32px; block-size: 32px; border-radius: var(--r-circle); border: 1px solid var(--hair); background: var(--input); display: grid; place-items: center; flex: none; }
.choice .glyph svg { inline-size: 16px; block-size: 16px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---- desktop ---- */
.desktop { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.menubar .identity .wordmark { font-size: 10px; }
.desktop-area { position: relative; flex: 1; padding: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-section); align-content: start; }
.desktop-area .window { max-inline-size: 560px; }
@media (min-width: 1100px) {
  .desktop-area { display: block; }
  .desktop-area .window { position: absolute; inline-size: 520px; }
  #win-package { inset-block-start: 40px; inset-inline-start: 48px; }
  #win-security { inset-block-start: 96px; inset-inline-start: 616px; }
}
@media (max-width: 480px) {
  .desktop-area { padding: 12px 16px; }
  .menubar .status-line span:last-child { display: none; }
}
.window.is-dragging { transition: none; }
.window.is-zoomed { max-inline-size: none; }
@media (min-width: 1100px) { .desktop-area .window.is-zoomed { inline-size: calc(100% - 96px); inset-inline-start: 48px !important; } }
/* biometric success dissolves the sign-in (design §6): 1.05 scale, 12 px blur */
.signin-card.is-dissolving { animation: dissolve var(--dur-env) var(--ease-env) forwards; }
@keyframes dissolve { to { opacity: 0; transform: scale(1.05); filter: blur(12px); } }
/* the profile circle's popover hangs from the menu bar at the inline end */
.profile-menu { position: absolute; inset-block-start: 36px; inset-inline-end: 10px; }
.window-body .rows { border: 1px solid var(--hair); border-radius: var(--r-card); padding-inline: 12px; background: var(--card); }
.window-body .rows:empty { display: none; }
.row-actions { display: inline-flex; align-items: center; gap: 8px; }
.row-taps { display: inline-flex; gap: 4px; }

/* ================= lane K1: the interview, the workspace ================= */

/* ---- the interview: the sign-in card's shape, one question per screen ---- */
.iv-card .screen { gap: var(--gap-grid-lg); }
.iv-progress { display: flex; align-items: center; gap: 10px; }
/* the dim-gold progress rule — this screen's one gold, and it is not text, so it carries no contrast duty */
.iv-rule { flex: 1; block-size: 2px; border-radius: var(--r-pill); background: var(--hair-strong); overflow: hidden; }
.iv-rule i { display: block; block-size: 100%; inline-size: 0; background: var(--accent); transition: inline-size var(--dur-open) var(--ease-open); }
#iv-step { font-variant-numeric: tabular-nums; }
#iv-progress-note:empty { display: none; }
#iv-title { font-weight: 500; }
#iv-options:empty { display: none; }
/* an answer is a row: a dot and the label, at the 44 px touch height, never an identity circle */
.choice-opt { min-block-size: var(--row-44); gap: 10px; }
.choice-opt .dot { flex: none; }
/* a shelf row carries the type's own line under its name (R3-20): 11 px --text-2, the row grows past the
   44 px minimum to hold it and the dot rides with the first line instead of the middle of two */
.choice-opt-sub { align-items: flex-start; }
.choice-opt-sub .dot { margin-block-start: 6px; }
.choice-opt-sub .choice-sub { white-space: normal; }
.iv-pencil { inline-size: 16px; block-size: 16px; flex: none; color: var(--text-2); }
.iv-pencil svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.iv-card .cluster { gap: var(--gap-grid); }
#iv-voice svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#iv-voice[aria-pressed="true"] { border-color: var(--amber); }

/* ---- the workspace: nine windows tile, they do not float ---- */
.ws-stale, .ws-line { padding: 6px 24px 0; }
.ws-line[data-state="none"] { display: none; }
@media (max-width: 480px) { .ws-stale, .ws-line { padding-inline: 16px; } }
.desktop-area.is-workspace { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap-section); align-content: start; align-items: start; }
@media (min-width: 1100px) {
  .desktop-area.is-workspace { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
  .desktop-area.is-workspace .window { position: static; inline-size: auto; max-inline-size: none; inset: auto; }
  .desktop-area.is-workspace .window.is-zoomed { grid-column: 1 / -1; }
}
.desktop-area.is-workspace .window { max-inline-size: none; }
.desktop-area.is-workspace .window-body { max-block-size: 520px; }
/* one window on the desktop (the quote a client meets before he has anything else) reads as a document */
.desktop-area.is-solo .window { grid-column: 1 / -1; max-inline-size: 760px; margin-inline: auto; }
.desktop-area.is-solo .window-body { max-block-size: none; }
/* a window's Waiting panels stack: two columns inside a 380 px tile elide both of them */
#win-waiting .panels { grid-template-columns: minmax(0, 1fr); }

/* A row that needs him: a 2 px rule on its inline start and its state word in full text colour. The rule is
   a hairline by default — gold is arbitrated once for the whole BOARD (workspace.js goldOwner()), and only
   that one row adds .is-gold-row, so a screen never shows the signal twice (design §2, spec §6.1). */
.row.is-needed { border-inline-start: 2px solid var(--hair-strong); padding-inline-start: 8px; }
.row.is-needed.is-gold-row { border-inline-start-color: var(--accent); }
.row-state { font-size: var(--fs-meta); white-space: nowrap; }
/* a row whose caption sits on its own line: still the fixed 44 px of design §5 */
.row-stacked { align-items: center; }
.row-col { display: flex; flex-direction: column; min-width: 0; }
.row-col .row-name { line-height: var(--lh-body); }
.row-sub-line { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair-strong); }
.row-link[aria-pressed="true"] { font-weight: 500; text-decoration-color: var(--text-2); }
.ws-compose { gap: 6px; }
.ws-compose .cluster { flex-wrap: nowrap; }
.ws-compose .input { flex: 1; min-inline-size: 0; }

/* the pipeline: chips in a row, the last one is where he approves */
.ws-flow { align-items: center; }
.ws-step { cursor: default; }
.ws-step-final { border-color: var(--text-2); }
.ws-quote-actions { padding-block-start: var(--u); }
/* the click-to-accept block (R1.4): a real checkbox at the 44 px target, its label beside it, the two
   document versions as links, and one caption that says why the buttons are closed */
.ws-accept { gap: var(--gap-grid); }
.ws-check { display: flex; align-items: flex-start; gap: 10px; min-block-size: var(--row-44); padding-block: 4px; cursor: pointer; }
/* the tick is --text, never --accent: this screen's one gold is the monthly figure, and a checkbox is not
   a demand (design §2). The state is the box itself plus the line under the pair, never colour alone. */
.ws-check-box { inline-size: 20px; block-size: 20px; margin: 12px 0 0; accent-color: var(--text); flex: none; }
.ws-check-text { display: flex; flex-direction: column; gap: 2px; padding-block-start: 10px; min-width: 0; }
.ws-check-label { font-size: var(--fs-body); line-height: var(--lh-body); }
.ws-legal-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--text-2); }
.ws-legal-link:hover { text-decoration-color: currentColor; }
.ws-accept-note:empty { display: none; }
/* the one-line legal footer under the desktop (terms · privacy · refunds · AI disclosure) */
.legal-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 24px 16px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.legal-foot a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: currentColor; }
.legal-foot a:hover { color: var(--text); }
@media (max-width: 480px) { .legal-foot { padding-inline: 16px; } }

/* two amounts on one line: USD primary, SAR beside it (R2.4) */
.amounts { display: inline-flex; align-items: baseline; gap: 8px; justify-content: flex-end; }
.amount { display: inline-flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; }
.amount .num { direction: ltr; unicode-bidi: isolate; }
.amount .unit { font-size: var(--fs-meta); color: var(--text-2); }
.amount-2 { color: var(--text-2); }
.amounts.is-gold .amount:first-child { color: var(--accent); }

/* the cancellation confirm window floats above the tiles (it out-specifies the workspace's static rule) */
.desktop-area .window.window-confirm { position: fixed; inset-block-start: 20vh; inset-inline-start: 50%; inset-inline-end: auto; transform: translateX(-50%); inline-size: min(420px, calc(100% - 32px)); max-inline-size: none; margin-inline: 0; z-index: 25; }
html[dir="rtl"] .desktop-area .window.window-confirm { transform: translateX(50%); }
.window-confirm .window-body { gap: var(--gap-grid-lg); max-block-size: none; }