/* AI Makeover — client portal
   App-layout only. The visual language (shell chrome, cards, pills, forms, modal)
   lives in the copied design-system/ (tokens.css + components.css + components.js).
   This file holds just the structural layout the canonical system defers to the app:
   the reset, the app frame, the responsive shell show/hide, the toast, and the
   loading/empty state. Canonical tokens only — never a raw hex. Later phases ADD
   their view-specific layout here (docs, discovery, canvas). */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-800);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh; min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
::selection { background: var(--surface-2); color: var(--black); }

/* ---------------- App frame ---------------- */
.app { min-height: 100vh; min-height: 100dvh; }

/* ---------------- Responsive shell ----------------
   components.css ships .sidebar / .topbar / .bottomnav as display:none and defers
   the show/hide to here (the app layout). */
@media (min-width: 720px) {
  .sidebar { display: flex; }
  .main { margin-left: var(--sidebar-w); }
}
@media (max-width: 719px) {
  .topbar { display: flex; }
  .bottomnav { display: flex; }
  .view { padding: var(--sp-7) var(--sp-6) calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-8)); }
}

/* ---------------- Toast ---------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + var(--sp-4));
  background: var(--ink-900); color: var(--white);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full);
  box-shadow: var(--shadow-lg); z-index: 50;
  opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-show { opacity: 1; }
@media (min-width: 720px) { .toast { bottom: var(--sp-8); } }

/* ---------------- Loading / empty state ---------------- */
.empty {
  padding: var(--sp-9);
  text-align: center;
  color: var(--ink-400);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}
.empty small { color: var(--ink-300); }

/* ---------------- Auth / claim (gated standalone screen) ----------------
   The invite landing (founder + team claim) hides the app shell and centers a single
   card, so it reads as a focused sign-in rather than the gated app behind a form.
   app.js adds body.is-claim while a claim view is up; a successful claim does a full
   nav to /#/home (fresh load, the class is gone, the shell returns). Tokens only. */
body.is-claim .sidebar,
body.is-claim .topbar,
body.is-claim .bottomnav { display: none !important; }
body.is-claim .main { margin-left: 0; }
body.is-claim .view { padding: 0; }

.auth {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-6); padding: var(--sp-8) var(--sp-6);
}
.auth__brand { display: flex; align-items: center; gap: var(--sp-3); }
.auth__mark {
  width: 34px; height: 34px; border-radius: var(--r-md);
  background: var(--ink-900); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em;
}
.auth__brandname { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-900); }
.auth__card {
  width: 100%; max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: var(--sp-7);
}
.auth__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--ink-900); }
.auth__sub {
  margin-top: var(--sp-2); margin-bottom: var(--sp-6);
  color: var(--ink-600); font-size: var(--text-sm); line-height: var(--leading-body);
}
.auth__card .field + .field { margin-top: var(--sp-4); }
.auth__card .select-menu,
.auth__card .select-menu__trigger { width: 100%; }
.auth__actions { margin-top: var(--sp-6); }
.auth__actions .btn-primary { width: 100%; justify-content: center; }

/* ---------------- Contract signing modal ----------------
   Layout for the founder's signing surface (signing-modal.js): the PDF preview, the legal-detail +
   signature sections, and a sticky action bar so Sign is always reachable in the scrolling modal.
   Feature-scoped, token-only — the consent rows, fields, and buttons stay canonical OpsUI atoms. */
.sign-preview-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.sign-open-link { display: none; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); color: var(--ink-600); }
.sign-open-link.is-shown { display: inline-flex; }
.sign-preview {
  height: min(46vh, 360px);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--surface-2);
  margin-bottom: var(--sp-5);
}
.sign-preview iframe { width: 100%; height: 100%; border: 0; }
.sign-preview .empty { padding: var(--sp-6); }
.sign-retry { margin-top: var(--sp-3); }
.sign-section { margin-bottom: var(--sp-5); }
.sign-hint { font-size: var(--text-sm); color: var(--ink-600); margin: 0 0 var(--sp-3); line-height: var(--leading-body); }
.sign-canvas {
  width: 100%; height: 120px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); touch-action: none; cursor: crosshair;
}
.sign-type-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.sign-type-row__input { flex: 1 1 180px; min-width: 0; }
.sign-actions {
  position: sticky; bottom: 0;
  display: flex; gap: var(--sp-3); justify-content: flex-end; align-items: center;
  margin: var(--sp-5) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6));
  padding: var(--sp-4) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--border);
}
.sign-actions .btn-primary { flex: 1 1 auto; justify-content: center; }

/* ================= Onboarding home (before-state) =================
   The merged sidebar-driven, one-step-at-a-time home (home.js). Self-contained frame
   (00-overview Design Decision 1): body.is-home hides the app shell (mirror of body.is-claim)
   and the home renders the prototype's sidebar+main into #view, pixel-pinned to
   outputs/portal-welcome-mockups/prototype.html. Chrome classes are `home-`-prefixed +
   scoped under `.home`, so they never restyle a canonical component or leak into the
   embedded OpsUI surfaces (intake form, discovery, map) which keep the global tokens.
   Colors use canonical design tokens; the prototype-specific values that aren't in the shared
   ramp are centralized in the scoped `--hm-*` block below (no raw hex in the rules).
   Buttons reuse OpsUI.btn; icons use the Tabler webfont loaded in index.html. */
body.is-home .sidebar,
body.is-home .topbar,
body.is-home .bottomnav { display: none !important; }
body.is-home .main { margin-left: 0; }
/* The home is its own full-bleed frame: clear the shared .view max-width + centering (it
   otherwise caps the home at --view-max and shoves it right by the old sidebar width). */
body.is-home .view { padding: 0; max-width: none; margin: 0; }

.home {
  /* The prototype's frame values not present in the shared design tokens — scoped here so
     the home stays pixel-pinned to its prototype without touching the global ramp. */
  --hm-ink-700:#3f3b35;          /* mid-ink between --ink-800 and --ink-600 (nav/step titles) */
  --hm-green:#16785e;            /* "Done"/scope text green, darker than the --st-green fill */
  --hm-vid-1:#f3eefb; --hm-vid-2:#e9e0f8;   /* welcome-video idle gradient wash */
  --hm-ep-1:#eef2fd;  --hm-ep-2:#e3eafb;    /* episode poster gradient wash */
  --hm-blip:#ff5a5a;             /* live-playing blip dot */
  --hm-ok:#5fd0a8;               /* toast check glyph */
  --hm-done-bg:#f0f8f4; --hm-done-bd:#cfe7dd;   /* done-badge pill fill/border */
  display:grid; grid-template-columns:260px 1fr; min-height:100vh; min-height:100dvh;
  color:var(--ink-800); background:var(--bg);
}
.home-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.home-label { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:500; color:var(--ink-600); }

/* ---- Sidebar ---- */
.home-side { background:var(--surface); border-right:1px solid var(--border); padding:20px 16px; display:flex; flex-direction:column; gap:18px; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; }
.home-brand { display:flex; align-items:center; gap:9px; padding:0 4px; }
.home-ammark { width:30px; height:30px; border-radius:8px; background:var(--ink-900); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; letter-spacing:.02em; }
.home-brandtxt { font-weight:600; font-size:14px; color:var(--ink-900); }
.home-nav { display:flex; flex-direction:column; gap:2px; }
.home-navlink { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:var(--r-md); font-size:13px; color:var(--hm-ink-700); font-weight:500; }
.home-navlink i { font-size:17px; color:var(--ink-600); }
.home-navlink.active { background:var(--accent-soft); color:var(--accent-strong); }
.home-navlink.active i { color:var(--accent-strong); }
.home-navlink.muted { color:var(--ink-600); }
.home-navgroup { padding:8px 10px 2px; }
.home-comingnav { margin-top:8px; padding-top:14px; border-top:1px solid var(--border-soft); }
.home-progwrap { padding:0 6px; }
.home-progtop { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.home-progcount { font-size:11px; font-weight:500; color:var(--hm-ink-700); letter-spacing:.04em; }
.home-progpct { font-size:11px; color:var(--ink-600); }
.home-track { height:6px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden; }
.home-fill { height:100%; background:var(--accent); border-radius:var(--r-full); transition:width .5s cubic-bezier(.2,.7,.2,1); }
.home-stepper { display:flex; flex-direction:column; }
.home-step { display:flex; gap:10px; padding:8px 8px; border-radius:var(--r-md); position:relative; width:100%; text-align:left; background:none; border:none; cursor:default; }
.home-step.clickable { cursor:pointer; }
.home-step.clickable:hover { background:var(--surface-2); }
.home-step.cur { background:var(--accent-soft); }
.home-step.cur.clickable:hover { background:var(--accent-soft); }
.home-step.viewing { box-shadow:inset 2px 0 0 var(--accent); }
.home-spine { position:relative; width:22px; flex:none; display:flex; justify-content:center; }
.home-spine::before { content:""; position:absolute; top:23px; bottom:-16px; width:2px; background:var(--border-soft); }
.home-step:last-child .home-spine::before { display:none; }
.home-ic { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; z-index:1; flex:none; }
.home-ic.done { background:var(--st-green); color:var(--white); }
.home-ic.cur { background:var(--accent); color:var(--white); box-shadow:0 0 0 4px var(--accent-soft); }
.home-ic.lock { background:var(--surface-2); color:var(--ink-600); border:1px solid var(--border); }
.home-stxt { min-width:0; padding-top:1px; }
.home-stitle { font-size:12.5px; font-weight:500; line-height:1.35; color:var(--hm-ink-700); }
.home-step.cur .home-stitle { color:var(--accent-strong); font-weight:600; }
.home-smeta { font-size:11px; color:var(--ink-600); margin-top:2px; font-weight:500; display:flex; align-items:center; gap:4px; }
.home-smeta.done { color:var(--hm-green); }
.home-sdesc { font-size:11px; color:var(--ink-600); margin-top:3px; line-height:1.45; }
.home-sfoot { margin-top:auto; display:flex; align-items:center; gap:9px; padding:10px 6px 0; border-top:1px solid var(--border-soft); }
.home-avatar { width:28px; height:28px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; }
.home-sfoot .home-nm { font-size:12.5px; font-weight:500; color:var(--ink-800); }
.home-sfoot .home-rl { font-size:11px; color:var(--ink-600); }

/* ---- Main ---- */
.home-main { padding:0; min-width:0; display:flex; flex-direction:column; }
.home-topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 40px; border-bottom:1px solid var(--border); background:rgba(247,246,243,.85); backdrop-filter:saturate(1.2) blur(6px); position:sticky; top:0; z-index:5; }
.home-segwrap { display:flex; flex-direction:column; gap:8px; min-width:0; }
.home-segline { display:flex; align-items:center; gap:10px; font-size:13px; }
.home-segline b { color:var(--accent-strong); font-weight:600; }
.home-segline .home-nm { color:var(--hm-ink-700); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-segs { display:flex; gap:6px; }
.home-segs .home-sg { height:5px; width:44px; border-radius:var(--r-full); background:var(--surface-2); }
.home-segs .home-sg.done { background:var(--st-green); }
.home-segs .home-sg.cur { background:var(--accent); }

.home-stage { padding:40px; max-width:880px; width:100%; margin:0 auto; flex:1; }
.home-hello h1 { font-size:30px; font-weight:600; color:var(--ink-900); letter-spacing:-.02em; }
.home-hello p { font-size:15px; color:var(--hm-ink-700); margin-top:7px; max-width:60ch; }
.home-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-strong); }
.home-dotnow { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.home-taskh1 { font-size:24px; font-weight:600; color:var(--ink-900); letter-spacing:-.01em; margin-top:12px; }
.home-tasksub { font-size:14.5px; color:var(--hm-ink-700); margin-top:7px; max-width:60ch; }

.home-taskcard { margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.home-vstage { position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--hm-vid-1),var(--hm-vid-2)); display:flex; align-items:center; justify-content:center; cursor:pointer; border-bottom:1px solid var(--border-soft); }
.home-vstage.is-playing { background:var(--ink-900); cursor:default; }
.home-vstage iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.home-play { width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; color:var(--ink-900); font-size:27px; box-shadow:var(--shadow-md); transition:transform .15s; }
.home-vstage:hover .home-play { transform:scale(1.05); }
.home-vcap { position:absolute; left:16px; bottom:14px; font-size:12.5px; color:var(--hm-ink-700); background:rgba(255,255,255,.9); border-radius:var(--r-full); padding:4px 11px; }
.home-vstage.is-playing .home-vcap { color:var(--white); background:rgba(255,255,255,.16); }
.home-playflag { position:absolute; top:14px; left:16px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--white); background:rgba(255,255,255,.16); border-radius:var(--r-full); padding:5px 12px; }
.home-playflag .home-liveblip { width:7px; height:7px; border-radius:50%; background:var(--hm-blip); animation:home-blip 1.2s infinite; }
@keyframes home-blip { 50% { opacity:.3; } }
.home-watchedtag { position:absolute; top:14px; left:16px; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.96); border-radius:var(--r-full); font-size:12px; font-weight:600; color:var(--hm-green); padding:5px 12px; }

/* Canonical OpsUI buttons inside the home carry Tabler glyphs; size them like the prototype (16px). */
.home .btn-primary i.ti, .home .btn-secondary i.ti { font-size:16px; }
.home-taskfoot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; flex-wrap:wrap; }
.home-hint { font-size:13px; color:var(--ink-600); }
.home-hint.good { color:var(--hm-green); font-weight:500; }

.home-shelfhead { display:flex; align-items:center; justify-content:space-between; margin-top:26px; margin-bottom:13px; }
.home-chanlink { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--accent-strong); cursor:pointer; }
.home-chanlink .home-yt { color:var(--pf-youtube); font-size:15px; }
.home-shelf { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.home-shelf--single { grid-template-columns:minmax(0,360px); }
.home-epcard { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .2s; position:relative; text-align:left; font:inherit; padding:0; }
.home-epcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--border-strong); }
.home-epposter { position:relative; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border-soft); background:linear-gradient(135deg,var(--hm-ep-1),var(--hm-ep-2)); }
.home-epthumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.home-epplay { width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--ink-900); font-size:18px; box-shadow:var(--shadow-sm); }
.home-eppill { position:absolute; top:10px; left:10px; background:var(--accent-soft); color:var(--accent-strong); font-family:var(--font-mono); font-size:11px; font-weight:500; padding:3px 8px; border-radius:var(--r-full); }
.home-epbody { padding:11px 13px 2px; }
.home-epdate { font-family:var(--font-mono); font-size:11px; color:var(--ink-600); letter-spacing:.02em; }
.home-eptitle { font-size:13.5px; font-weight:600; color:var(--ink-900); margin-top:4px; line-height:1.35; }
.home-epfoot { margin-top:auto; padding:11px 13px; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--hm-ink-700); }
.home-epfoot .home-yt { color:var(--pf-youtube); font-size:15px; }
.home-epfoot .home-ext { margin-left:auto; color:var(--ink-600); font-size:14px; }
.home-epcard.opened .home-epposter::after { content:"Opened"; position:absolute; inset:0; background:rgba(14,13,12,.55); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; letter-spacing:.04em; }

.home-summary { margin-top:26px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px 24px; }
.home-summary h3 { font-size:15px; font-weight:600; color:var(--ink-900); margin-bottom:14px; }
.home-srow { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--border-soft); font-size:13.5px; }
.home-srow:first-of-type { border-top:none; }
.home-srow .home-k { color:var(--ink-600); }
.home-srow .home-v { color:var(--ink-900); font-weight:500; text-align:right; }
.home-scope { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.home-scope .home-si { display:flex; gap:9px; font-size:13.5px; color:var(--ink-800); }
.home-scope .home-si i { color:var(--st-green); font-size:17px; flex:none; }

.home-embedwrap { margin-top:24px; }
.home-analysing { margin-top:24px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--r-lg); padding:30px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:13px; }
.home-analysing .home-bigic { width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-size:23px; }
.home-analysing p { font-size:13.5px; color:var(--hm-ink-700); max-width:42ch; }
.home-spin { animation:home-spin 1s linear infinite; }
@keyframes home-spin { to { transform:rotate(360deg); } }

.home-revback { margin-top:22px; }
.home-donebadge { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--hm-green); background:var(--hm-done-bg); border:1px solid var(--hm-done-bd); border-radius:var(--r-full); padding:5px 12px; }

.home-done-screen { max-width:620px; margin:0 auto; padding:64px 40px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.home-bigcheck { width:84px; height:84px; border-radius:50%; background:var(--st-green); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:46px; animation:home-pop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes home-pop { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.12); } 100% { transform:scale(1); opacity:1; } }
.home-done-screen h1 { font-size:30px; font-weight:600; color:var(--ink-900); letter-spacing:-.02em; }
.home-done-screen .home-lede { font-size:15px; color:var(--hm-ink-700); max-width:48ch; }
.home-nextlist { margin-top:10px; width:100%; display:flex; flex-direction:column; gap:10px; text-align:left; }
.home-nextitem { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-sm); }
.home-nextitem .home-ni { width:34px; height:34px; border-radius:9px; background:var(--accent-soft); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.home-nextitem .home-nt { font-size:14px; font-weight:600; color:var(--ink-900); }
.home-nextitem .home-nd { font-size:12.5px; color:var(--ink-600); }

/* The home's step-advance toast (green check + slide), distinct from App.toast. */
.home-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink-900); color:var(--white); font-size:13.5px; font-weight:500; padding:11px 18px; border-radius:var(--r-full); box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:9px; opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:50; }
.home-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.home-toast i { color:var(--hm-ok); font-size:17px; }

@media (max-width:820px) {
  .home { grid-template-columns:1fr; }
  .home-side { position:static; height:auto; flex-direction:column; }
  .home-stage, .home-topbar { padding-left:22px; padding-right:22px; }
}