/* ─── Portal chrome: the one stylesheet for the header and tab row ────────────
 * Rendered by portal-nav.js. Lives once; every portal page links it. The
 * signed-in name is ink on every page because it is defined here and nowhere
 * else.
 *
 * The design-system tokens the chrome needs are declared HERE, not assumed
 * from the page. The design system says its variable block goes into every
 * page verbatim; two of the four portal pages had never had it, so on those
 * pages var(--font-display) and var(--cobalt) resolved to nothing and the
 * wordmark rendered in the body font with "Loop" uncoloured. Tamir: "fix the
 * logo!!!!!!! why are we not using our design guidelines". A shared component
 * that only works on pages that already did their homework is not shared.
 * Values are verbatim from Design/design-essentials/design-system.md; a page
 * that defines them itself defines identical values, so there is no conflict. */
:root{
  --cobalt-100:#E5EAFF;--cobalt-400:#4D6BFF;--cobalt:#1F46E5;--cobalt-700:#1736BE;
  --white:#FFFFFF;--paper:#FBFBF9;--n-50:#F4F4EE;--n-100:#ECECE4;--n-200:#E0E0D6;--n-400:#9A9A8F;--n-500:#6E6E63;--n-700:#3A3A30;--ink:#16160F;
  --font-display:'Fraunces',Georgia,serif;--font-body:'DM Sans',system-ui,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;
}

.sitenav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:var(--white);border-bottom:1px solid var(--n-100)}
/* The wordmark. Mode rule (design-system.md, zero tolerance): on light, Legal in
 * ink, Loop in cobalt 600, the period in INK. Every property is set explicitly
 * so that no page-level rule on a, b, or nav a can bleed into it. */
.sitenav .logo,.sitenav .logo:hover,.sitenav .logo:visited{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1;letter-spacing:-.035em;color:var(--ink);text-decoration:none;border:0;background:none}
.sitenav .logo b{color:var(--cobalt);font-weight:600;font-family:inherit;font-size:inherit}

.nav-user{display:flex;align-items:center;gap:14px;font:500 13px var(--font-body);color:var(--n-500)}
.nav-user b{color:var(--ink);font-weight:600}
.hmeta{font:500 12px var(--font-mono);color:var(--n-500)}
.linkbtn{background:none;border:none;color:var(--cobalt);font:600 13px var(--font-body);cursor:pointer;padding:0}
.linkbtn:hover{color:var(--cobalt-700)}

.gearwrap{position:relative}
.gearbtn{font:22px var(--font-body);background:none;border:none;cursor:pointer;color:var(--n-500);padding:4px 8px;border-radius:8px;line-height:1}
.gearbtn:hover,.gearbtn.on,.gearbtn[aria-expanded="true"]{color:var(--ink);background:var(--n-50)}
.gearmenu{position:absolute;right:0;top:32px;background:var(--white);border:1px solid var(--n-100);border-radius:12px;box-shadow:0 8px 24px rgba(22,22,15,.12);padding:6px;min-width:190px;z-index:50}
.gearmenu button,.gearmenu a{display:block;width:100%;text-align:left;font:500 13px var(--font-body);color:var(--n-700);background:none;border:none;border-radius:8px;padding:9px 12px;cursor:pointer;text-decoration:none;box-sizing:border-box}
.gearmenu button:hover,.gearmenu a:hover{background:var(--n-50);color:var(--ink)}
.gearmenu .glabel{font:600 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--n-400);padding:6px 12px 4px}
.gearmenu .gearselect{margin:2px 10px 8px;padding:6px 8px;border:1px solid var(--n-200);border-radius:8px;font:500 13px var(--font-body);background:var(--white);color:inherit;width:calc(100% - 20px)}

.tabrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 24px}
.tabs{display:flex;gap:4px;background:var(--n-50);border:1px solid var(--n-100);border-radius:12px;padding:4px;width:fit-content;flex-wrap:wrap;margin:0}
.tabbtn{font:600 13px var(--font-body);padding:8px 18px;border-radius:9px;border:none;cursor:pointer;background:transparent;color:var(--n-500);text-decoration:none;line-height:1.3}
.tabbtn:hover{color:var(--ink)}
.tabbtn.on{background:var(--cobalt-100);color:var(--cobalt);box-shadow:inset 0 -2px 0 var(--cobalt)}
.tabsep{width:1px;background:var(--n-100);margin:4px;align-self:stretch}

.askbtn{font:600 13px var(--font-body);padding:9px 20px;border-radius:10px;background:var(--cobalt);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cobalt);white-space:nowrap;transition:background .15s,border-color .15s;margin-left:auto}
.askbtn:hover{background:var(--cobalt-700);border-color:var(--cobalt-700);color:#fff}
.askbtn.on{background:var(--cobalt-700);border-color:var(--cobalt-700);box-shadow:inset 0 -2px 0 rgba(255,255,255,.55)}
.askbtn .arw{font-size:14px;line-height:1}

:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}

@media (max-width:640px){
  .sitenav{padding:14px 20px}
  .tabrow{gap:8px}
  .tabs{width:100%}
  .askbtn{margin-left:0}
}

/* ─── Desktop only ────────────────────────────────────────────────────────────
 * The product is built for a desktop browser: a questionnaire table with five
 * columns and a drawer does not fold onto a phone, and a half-working page is
 * worse than a clear stop (Tamir, 2026-09-09: "not letting user proceed if in
 * mobile"). Below 768px, or on a touch device below 1024px, the page is hidden
 * by CSS alone (no flash, no JS needed) and a notice takes its place. The
 * `body::before` line is the no-JS fallback; portal-nav.js replaces it with
 * the designed notice. Lifts by itself on a window 1024px or wider. */
@media (max-width:767px), ((pointer:coarse) and (max-width:1023px)) {
  /* A page can opt out with <body data-ll-mobile-ok>: a read-only feed (the
   * Updates page) folds onto a phone fine, unlike a five-column questionnaire
   * table with a drawer. The attribute lives in the page's own static HTML,
   * so this CSS-only, no-JS path respects it too, not only portal-nav.js's
   * check (Tamir, 2026-09-13: "do we now enable mobile view, for updates"). */
  body:not([data-ll-mobile-ok]) > :not(.ll-desktop-only) { display:none !important; }
  body:not([data-ll-mobile-ok])::before { content:"LegalLoop works on a computer. Open this page on a desktop browser to continue."; display:block; padding:40px 24px; font:400 16px/24px var(--font-body); color:var(--ink); }
  body:has(.ll-desktop-only)::before, body.ll-stopped::before { display:none; }
  .ll-desktop-only { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; background:var(--paper); color:var(--ink); font-family:var(--font-body); }
  .ll-desktop-only .dtop { height:3px; background:var(--cobalt); }
  .ll-desktop-only .dhead { padding:20px 24px; border-bottom:1px solid var(--n-100); background:var(--white); line-height:1; }
  .ll-desktop-only .dhead .wordmark { font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.035em; color:var(--ink); text-decoration:none; }
  .ll-desktop-only .dhead .wordmark b { color:var(--cobalt); font-weight:600; }
  .ll-desktop-only .dhead .wordmark i { font-style:normal; color:var(--mark-dot, var(--ink)); }
  .ll-desktop-only .dbody { padding:48px 24px 40px; max-width:440px; }
  .ll-desktop-only .deyebrow { font:600 11px/16px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--n-500); margin:0 0 16px; }
  .ll-desktop-only h1 { font:600 32px/38px var(--font-display); letter-spacing:-.015em; color:var(--ink); margin:0 0 12px; text-wrap:balance; }
  .ll-desktop-only p { font:400 15px/23px var(--font-body); color:var(--n-700); margin:0 0 24px; }
  .ll-desktop-only .durl { font:500 12px/18px var(--font-mono); color:var(--n-500); overflow-wrap:anywhere; margin:0 0 16px; }
  .ll-desktop-only .dcopy { font:600 15px var(--font-body); color:#fff; background:var(--cobalt); border:0; border-radius:10px; padding:13px 24px; cursor:pointer; transition:background .15s; }
  .ll-desktop-only .dcopy:hover, .ll-desktop-only .dcopy:active { background:var(--cobalt-700); }
  .ll-desktop-only .dstatus { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ll-desktop-only .dnote { font:400 13px/19px var(--font-body); color:var(--n-500); margin:32px 0 0; }
}