/* ═══════════════════════════════════════════════════════════════════════════
   FLARE · ORG PORTAL  —  org.css
   Loads on top of flare.css. Adds only the worker-app shell + screen specifics:
   appbar · tab nav · sign-in · flare board (2 layouts + empty) · flare detail ·
   service profile · capacity control.

   Ported from the Claude Design handoff. The mockup's :target/checkbox routing
   is replaced by class-based state the JS view router sets (.active, one board
   layout rendered at a time).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── App shell ───────────────────────────────────────────────────────────── */
.app{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); overflow:hidden; }
.app:has(.auth){ overflow:auto; }              /* signed-out screens scroll on short viewports */
.screen-scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.screen-scroll::-webkit-scrollbar{ width:10px; }
.screen-scroll::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.page{ max-width:1080px; margin:0 auto; padding:22px 20px 64px; }
.page-head{ margin-bottom:18px; }
.page-head h1{ font-size:25px; color:var(--navy); }
.page-head .sub{ color:var(--ink-2); margin-top:5px; font-size:15px; max-width:64ch; }

/* ── App bar ─────────────────────────────────────────────────────────────── */
.appbar{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); flex:none; }
.appbar-inner{ max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:14px; padding:10px 18px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:34px; width:auto; }
.brand .for{ display:inline-flex; align-items:center; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--good); background:var(--good-050); border:1px solid var(--good-line); padding:3px 9px; border-radius:var(--r-pill); }
.appbar .spacer{ flex:1; }
.client-link{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-weight:700; font-size:13.5px; color:var(--ink-2); padding:9px 11px; border-radius:var(--r-sm); min-height:40px; }
.client-link:hover{ background:var(--surface-2); color:var(--navy); }
.account{ display:inline-flex; align-items:center; gap:9px; color:var(--ink); padding:5px 11px 5px 5px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface-2); min-height:44px; }
.account:hover{ border-color:var(--line-2); }
.avatar{ width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; }
.account .meta{ display:flex; flex-direction:column; line-height:1.18; }
.account .org{ font-weight:800; font-size:13.5px; }
.account .role{ font-size:11.5px; color:var(--ink-3); }
@media (max-width:560px){                 /* keep the appbar tidy on phones */
  .appbar .for{ display:none; }
  .account .meta{ display:none; }
  .account{ padding:5px; }
}

/* ── Tab nav ─────────────────────────────────────────────────────────────── */
.tabnav{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:55px; z-index:49; flex:none; }
.tabnav-inner{ max-width:1120px; margin:0 auto; display:flex; gap:2px; padding:0 12px; overflow-x:auto; }
.tabnav-inner::-webkit-scrollbar{ display:none; }
.tab{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:13px 14px; font-weight:750; font-size:14px; color:var(--ink-3); border-bottom:3px solid transparent; min-height:48px; background:none; border-top:0; border-left:0; border-right:0; cursor:pointer; }
.tab:hover{ color:var(--ink); }
.tab svg{ width:19px; height:19px; }
.tab .badge{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--accent); color:var(--navy-900); font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.tab.active{ color:var(--navy); border-bottom-color:var(--accent); font-weight:800; }   /* router sets .active (colour + underline + weight) */

/* ── Sign-in / 2FA ───────────────────────────────────────────────────────── */
.auth{ min-height:100vh; display:grid; background:var(--bg); }
@media (min-width:900px){ .auth{ grid-template-columns:1.05fr .95fr; } }
.auth-art{ display:none; }
@media (min-width:900px){ .auth-art{ display:block; position:relative; overflow:hidden; background:var(--navy-900); } }
.auth-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
.auth-art .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,30,58,.55) 0%, rgba(15,30,58,.78) 100%); }
.auth-art .art-inner{ position:absolute; inset:0; padding:54px 48px; display:flex; flex-direction:column; justify-content:flex-end; z-index:1; }
.auth-art .art-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-lite); }
.auth-art .art-eyebrow svg{ width:16px; height:16px; }
.auth-art h2{ color:#fff; font-size:30px; line-height:1.16; max-width:18ch; margin-top:16px; }
.auth-art p{ color:#C2CEE6; font-size:16px; line-height:1.55; margin-top:14px; max-width:38ch; }
.auth-form-wrap{ display:flex; align-items:center; justify-content:center; padding:34px 22px 48px; }
.auth-card{ width:100%; max-width:404px; }
.auth-logo{ height:46px; width:auto; margin-bottom:24px; }
.auth-card h1{ font-size:25px; color:var(--navy); }
.mfa-inputs{ display:flex; gap:9px; }
.mfa-inputs input{ flex:1; min-width:0; text-align:center; font-size:24px; font-weight:800; padding:12px 0; min-height:62px; border:1.5px solid var(--line-2); border-radius:var(--r-md); font-variant-numeric:tabular-nums; background:var(--surface); color:var(--navy); }
.mfa-inputs input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px var(--good-050); }
.backlink{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px; color:var(--ink-2); padding:8px 10px 8px 6px; border-radius:var(--r-sm); min-height:44px; background:none; border:0; cursor:pointer; }
.backlink:hover{ background:rgba(22,41,76,.06); }

/* ── Board: your-status bar ──────────────────────────────────────────────── */
.statusbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--sh-1); padding:14px 16px; margin-bottom:16px; }
.statusbar .sb-on{ display:inline-flex; align-items:center; gap:9px; font-weight:750; font-size:14px; color:var(--ink); }
.statusbar .live{ width:9px; height:9px; border-radius:50%; background:var(--green); position:relative; flex:none; }
.statusbar .live::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--green); opacity:.55; animation:livepulse 1.9s ease-out infinite; }
@keyframes livepulse{ 0%{ transform:scale(.5); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }
.statusbar .sb-spacer{ flex:1; }

/* view toggle — two real board layouts (JS renders the chosen one) */
.viewtoggle{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md); padding:3px; gap:3px; }
.viewtoggle label,.viewtoggle button{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:var(--r-sm); font-weight:750; font-size:13px; color:var(--ink-2); cursor:pointer; min-height:38px; background:none; border:0; }
.viewtoggle label svg,.viewtoggle button svg{ width:16px; height:16px; }
.viewtoggle label:hover,.viewtoggle button:hover{ color:var(--ink); }
.viewtoggle .active{ background:var(--surface); color:var(--navy); box-shadow:var(--sh-1); }

/* ── Flare card (Layout A — triage cards) ────────────────────────────────── */
.flare-grid{ display:grid; gap:14px; }
@media (min-width:780px){ .flare-grid{ grid-template-columns:1fr 1fr; } }
.flare-card{ display:flex; flex-direction:column; padding:18px; }
.flare-card .fc-top{ display:flex; align-items:flex-start; gap:13px; }
.flare-card .fc-id{ flex:1; min-width:0; }
.flare-card .fc-need{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1.2; }
.flare-card .fc-meta{ font-size:13px; color:var(--ink-3); margin-top:4px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.flare-card .fc-meta svg{ width:14px; height:14px; vertical-align:-2px; color:var(--ink-3); }
.summary{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 14px; margin-top:13px; font-size:14px; color:var(--ink-2); line-height:1.55; }
.summary .deid{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; letter-spacing:.02em; color:var(--ink-3); margin-bottom:7px; text-transform:uppercase; }
.summary .deid svg{ width:13px; height:13px; }
.flare-card .fc-actions{ display:flex; gap:9px; flex-wrap:wrap; margin-top:auto; padding-top:15px; }
.flare-card .fc-actions .btn{ flex:1; min-width:130px; }
.flare-card .fc-actions .btn-quiet{ flex:none; min-width:0; }

/* consent-gated reveal states */
.reveal{ display:flex; gap:11px; align-items:flex-start; border-radius:var(--r-md); padding:13px 14px; margin-top:13px; border:1px solid; }
.reveal svg.lead{ width:20px; height:20px; flex:none; margin-top:1px; }
.reveal-locked{ background:var(--amber-050); border-color:var(--amber-100); }
.reveal-locked svg.lead{ color:var(--amber); }
.reveal-locked .rv-t{ font-weight:800; font-size:13.5px; color:var(--amber); }
.reveal-locked .rv-s{ font-size:13px; color:var(--ink-2); margin-top:2px; line-height:1.45; }
.reveal-open{ background:var(--green-050); border-color:var(--green-100); align-items:center; }
.reveal-open svg.lead{ color:var(--green); }
.reveal-open .rv-name{ font-weight:800; font-size:15px; color:var(--ink); }
.reveal-open .rv-contact{ font-weight:750; color:var(--navy); font-size:14px; }

/* ── Flare row (Layout B — compact worklist) ─────────────────────────────── */
.flare-list{ overflow:hidden; }
.flare-row{ display:grid; grid-template-columns:auto 1.6fr 1fr auto auto; gap:16px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--line); }
.flare-row:last-child{ border-bottom:0; }
.flare-row:hover{ background:var(--surface-2); }
.flare-row .fr-need{ display:flex; align-items:center; gap:11px; min-width:0; }
.flare-row .fr-need .nm{ font-weight:800; font-size:15px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.flare-row .fr-where{ font-size:13px; color:var(--ink-2); min-width:0; }
.flare-row .fr-where .area{ font-weight:700; color:var(--ink); }
.flare-row .fr-where .ago{ color:var(--ink-3); }
.flare-row .fr-status{ display:flex; justify-content:flex-end; }
.flare-row .fr-act{ display:flex; gap:8px; justify-content:flex-end; }
.flare-listhead{ display:grid; grid-template-columns:auto 1.6fr 1fr auto auto; gap:16px; padding:10px 16px; background:var(--surface-2); border-bottom:1px solid var(--line-2); font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.flare-listhead span:last-child{ text-align:right; }
@media (max-width:720px){
  .flare-listhead{ display:none; }
  .flare-row{ grid-template-columns:1fr; gap:9px; }
  .flare-row .fr-status,.flare-row .fr-act{ justify-content:flex-start; }
}

/* ── Secure message thread (flare detail) ────────────────────────────────── */
.thread{ display:flex; flex-direction:column; gap:9px; }
.bubble{ max-width:84%; padding:11px 14px; border-radius:15px; font-size:14px; line-height:1.5; }
.bubble.them{ background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:5px; align-self:flex-start; }
.bubble.me{ background:var(--navy); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.bubble .who{ font-size:11px; font-weight:800; color:var(--ink-3); margin-bottom:3px; text-transform:uppercase; letter-spacing:.03em; }
.bubble.me .who{ color:#A9B6D4; }

/* ── Capacity control ────────────────────────────────────────────────────── */
.cap-card{ padding:18px; }
.cap-seg{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px; }
.cap-opt{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:15px 8px; border-radius:var(--r-md); border:1.5px solid var(--line-2); background:var(--surface); color:var(--ink-2); font-weight:750; font-size:14px; min-height:84px; text-align:center; cursor:pointer; transition:border-color .12s, background .12s; }
.cap-opt svg{ width:22px; height:22px; }
.cap-opt:hover{ border-color:var(--navy-300); }
.cap-opt .co-ic{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-sunk); color:var(--ink-3); }
.cap-opt.is-on[data-tone="green"]{ border-color:var(--green); background:var(--green-050); color:var(--green); }
.cap-opt.is-on[data-tone="green"] .co-ic{ background:var(--green); color:#fff; }
.cap-opt.is-on[data-tone="amber"]{ border-color:var(--amber); background:var(--amber-050); color:var(--amber); }
.cap-opt.is-on[data-tone="amber"] .co-ic{ background:var(--amber); color:#fff; }
.cap-opt.is-on[data-tone="red"]{ border-color:var(--red); background:var(--red-050); color:var(--red); }
.cap-opt.is-on[data-tone="red"] .co-ic{ background:var(--red); color:#fff; }
.cap-opt.is-on[data-tone="grey"]{ border-color:var(--navy-300); background:var(--surface-2); color:var(--ink); }
.cap-opt.is-on[data-tone="grey"] .co-ic{ background:var(--ink-3); color:#fff; }

.stepper{ display:inline-flex; align-items:center; gap:10px; }
.step-btn{ width:46px; height:46px; border-radius:var(--r-md); border:1.5px solid var(--line-2); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; color:var(--ink); cursor:pointer; }
.step-btn:hover{ border-color:var(--navy); background:var(--good-050); }
.step-btn svg{ width:22px; height:22px; }
.cap-readout{ display:flex; align-items:baseline; gap:8px; }
.cap-readout .n{ font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.cap-readout .of{ font-weight:700; color:var(--ink-2); font-size:14px; }
.fresh{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:750; padding:5px 11px; border-radius:var(--r-pill); border:1px solid transparent; white-space:nowrap; }
.fresh svg{ width:14px; height:14px; }
.fresh-ok{ background:var(--green-050); color:var(--green); border-color:var(--green-100); }
.fresh-stale{ background:var(--amber-050); color:var(--amber); border-color:var(--amber-100); }
.breather{ display:flex; align-items:center; gap:13px; margin-top:14px; padding:14px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--line); }

/* ── Service profile ─────────────────────────────────────────────────────── */
.need-pick{ display:flex; flex-wrap:wrap; gap:9px; }
.need-opt{ position:relative; }
.need-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.need-opt .chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:var(--r-pill); border:1.5px solid var(--line-2); background:var(--surface); font-weight:750; font-size:13.5px; color:var(--ink-2); min-height:42px; }
.need-opt .chip svg{ width:16px; height:16px; color:var(--ink-3); }
.need-opt input:checked ~ .chip{ border-color:var(--navy); background:var(--good-050); color:var(--good); }
.need-opt input:checked ~ .chip svg{ color:var(--good); }
.need-opt input:focus-visible ~ .chip{ outline:3px solid var(--navy-700); outline-offset:2px; }
.saved-toast{ display:inline-flex; align-items:center; gap:8px; font-weight:750; font-size:13.5px; color:var(--green); background:var(--green-050); border:1px solid var(--green-100); padding:8px 13px; border-radius:var(--r-pill); }
.saved-toast svg{ width:16px; height:16px; }

.profile-grid{ display:grid; gap:16px; }
@media (min-width:860px){ .profile-grid{ grid-template-columns:1fr 1fr; } }
.attr-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.attr-row:last-child{ border-bottom:0; }
.at-t{ font-weight:750; font-size:14.5px; }               /* also used by the capacity "breather" row */
.at-s{ font-size:13px; color:var(--ink-3); margin-top:2px; }

/* snapshot tiles (board header on desktop) */
.snap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
@media (min-width:780px){ .snap{ grid-template-columns:repeat(3,1fr); } }
.snap-tile{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:14px 15px; }
.snap-tile .n{ font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.snap-tile .l{ font-size:12.5px; color:var(--ink-2); font-weight:700; margin-top:4px; line-height:1.3; }