/*
  Desktop Phase 1, additions to the approved mockup CSS (tokens.css and app.css are copied from
  tradiedrive/_design/desktop-phase1 and are not edited here). Only things the mockups do not draw live in this
  file: sign in, the expired login card, the offline banner, the account menu, locked cards.
  Same tokens, same 8px grid, same one orange. No colour is introduced.
*/
html, body, #root { min-height: 100vh; }
#root { display: block; }
a.nav, a.logo, .linkreset { text-decoration: none; }
button.nav { cursor: pointer; }

/* A card centred on the page: sign in, the expired login, a blocked account, a stopped screen. */
.centre-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s4); background: var(--bg); }
.centre-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.centre-card.wide { max-width: 640px; }
.centre-card .mk { width: 64px; height: 64px; }
.centre-card h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: var(--w-semibold); }
.centre-card p { color: var(--text-2); }
.centre-card .row { display: flex; gap: var(--s1); }
.centre-card.mid { align-items: center; text-align: center; }
.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--text-2); }
.text-input { height: var(--control); border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); padding: 0 var(--s2); font: inherit; color: var(--text); width: 100%; }
.text-input::placeholder { color: var(--text-3); }
.text-input.code { letter-spacing: 0.4em; text-align: center; font-weight: var(--w-bold); font-size: var(--fs-md); }
.error-text { color: var(--red); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.link-btn { background: none; border: 0; padding: 0; color: var(--text-2); font: inherit; font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; text-align: center; }
.ring-lg { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.ring-lg.err { background: var(--red-bg); color: var(--red); }
.ring-lg.quiet { background: var(--surface-hover); color: var(--text-2); }

/* The page area inside the shell */
.page.pad0 { padding: 0; max-width: none; }
.state-card { max-width: 640px; margin: var(--s6) auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s6) var(--s4); }
.state-card h2 { font-size: var(--fs-md); line-height: var(--lh-md); }
.state-card p { color: var(--text-2); max-width: 360px; }
.state-card .btn { margin-top: var(--s1); }
.card.cardlink { cursor: pointer; display: block; color: inherit; text-decoration: none; }
.card.cardlink:hover { background: var(--surface-muted); }
.card.cardlink:focus-visible { box-shadow: var(--focus); }
.rowlink { color: inherit; text-decoration: none; cursor: pointer; }
.rowlink:hover { background: var(--surface-muted); }
.rowlink:focus-visible { box-shadow: var(--focus); }
.rangechip { cursor: pointer; }
.card .muted { color: var(--text-2); }
.card .lockline { display: flex; gap: var(--s1); align-items: center; color: var(--text-2); margin-top: var(--s2); }

/* Offline and refresh banners, drawn like the app's quiet notes: a thin bar under the top bar. */
.banner { display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s4); background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid #FEDF89; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--w-medium); }
.banner.sticky { position: sticky; top: var(--topbar); z-index: 29; }

/* Account menu: the business avatar at the foot of the rail opens it. */
.biz { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.acct-menu { position: fixed; left: calc(var(--rail) + var(--s1)); bottom: var(--s2); width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--s2); z-index: 60; display: flex; flex-direction: column; gap: var(--s1); }
.acct-menu .who { font-weight: var(--w-semibold); }
.acct-menu .em { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.acct-menu .sep { height: 1px; background: var(--border); margin: var(--s1) 0; }

/* The bell's list */
.bell-wrap { position: relative; }
.bell-menu { position: absolute; right: 0; top: calc(100% + var(--s1)); width: 360px; max-height: 480px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); z-index: 60; }
.bell-menu .head { padding: var(--s2); border-bottom: 1px solid var(--border); }
.bell-menu .item { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); padding: var(--s2); cursor: pointer; font: inherit; color: inherit; }
.bell-menu .item:hover { background: var(--surface-muted); }
.bell-menu .item:last-child { border-bottom: 0; }
.bell-menu .item .a { font-weight: var(--w-semibold); }
.bell-menu .item .b { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.bell-menu .item .t { color: var(--text-3); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.bell-menu .empty { padding: var(--s3) var(--s2); color: var(--text-2); }
.iconbtn .dot[hidden] { display: none; }

/* A range menu on the systems card */
.range-wrap { position: relative; }
.range-menu { position: absolute; right: 0; top: calc(100% + var(--s1)); min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-3); z-index: 20; padding: var(--s1); }
.range-menu button { display: flex; justify-content: space-between; gap: var(--s2); width: 100%; background: none; border: 0; text-align: left; padding: var(--s1) var(--s2); border-radius: var(--r-sm); font: inherit; cursor: pointer; }
.range-menu button:hover { background: var(--surface-hover); }
.range-menu button[aria-checked="true"] { font-weight: var(--w-semibold); }
.range-menu .sp { color: var(--text-3); font-size: var(--fs-sm); }

/* How this works: a drawer-like panel */
.desk-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.32); z-index: 50; }
.desk-panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--sh-3); z-index: 51; display: flex; flex-direction: column; }
.desk-panel .ph { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); height: var(--topbar); border-bottom: 1px solid var(--border); }
.desk-panel .ph h2 { font-size: var(--fs-md); line-height: var(--lh-md); }
.desk-panel .pb { padding: var(--s3); overflow: auto; display: flex; flex-direction: column; gap: var(--s2); }
.desk-panel .pb h3 { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--w-semibold); }
.desk-panel .pb p { color: var(--text-2); }


@media (max-width: 1279px) { .centre-page, .boot { display: none !important; } }
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.boot .sk { width: 160px; height: 16px; }

/* ---------- Shell v2: the expanded sidebar (220px, icon and label like GoHighLevel's left nav) ----------
   The shell publishes the sidebar width as --rail on <html> (220px open, 72px collapsed); tokens.css keeps 72px as the default.
   Collapsed is the approved mockup rail exactly. Hover is a light grey, active is the orange pill behind icon and label. */
:root { --rail-open: 220px; }
.biz:hover .tip, .biz:focus-visible .tip { opacity: 1; }
.biz[aria-expanded="true"] .tip { opacity: 0; }
.rail.open { align-items: stretch; padding: var(--s2) 12px; gap: var(--s-half); }
.rail.open .logo { margin: 0 4px var(--s2); align-self: flex-start; }
.rail.open .sep { width: 100%; margin: var(--s1) 0; }
.rail.open .nav { width: 100%; height: 40px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 12px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: var(--w-medium); cursor: pointer; }
.rail.open .nav .ico { width: 20px; height: 20px; }
.rail.open .nav.active { font-weight: var(--w-semibold); }
.rail.open .nav .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.rail.open .nav .dot { position: static; flex: none; box-shadow: none; }
.rail.open .nav.active .dot { box-shadow: none; }
.rail.open .nav.collapse { color: var(--text-2); }
.rail.open .biz-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 4px; margin-top: var(--s1); border: 0; border-top: 1px solid var(--border); border-radius: 0; background: none; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.rail.open .biz-row:hover { background: var(--surface-hover); }
.rail.open .biz-row .biz { flex: none; cursor: inherit; }
.rail.open .biz-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--w-medium); }
.rail:not(.open) .nav.collapse { color: var(--text-2); }

/* ---------- Home v2: three sections that fit one screen (What your systems did, Today, In the diary) ---------- */
.page.home-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto minmax(280px, 1fr); gap: var(--s3); height: calc(100vh - var(--topbar)); }
.home-fit > .span3 { grid-column: span 3; }
.home-fit > .span2 { grid-column: span 2; }
.home-fit > .card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.home-fit .days { flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
.home-fit .dcol .dh { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* ---------- Global polish (Jack, feedback round 1, items 4, 7, 14, 15, 16) ----------
   THE BRAND FOCUS RING: 2px orange at 40 percent, drawn as a box-shadow so it takes the radius of the element it sits on.
   It replaces the navy token of the mockups everywhere: every `box-shadow: var(--focus)` on every screen now draws it, and the
   global :focus-visible rule in app.css gives it to anything that has no rule of its own. A screen may NOT set its own outline
   or ring colour: use var(--focus) (box-shadow) or the .focus-ring class, nothing else. tools/verify-global-polish.py fails any
   focused element that shows the browser's default outline or no ring. */
:root { --focus-ring: rgba(249, 115, 22, 0.4); --focus: 0 0 0 2px var(--focus-ring); }
.focus-ring:focus-visible, .focus-ring-within:focus-within { outline: none; box-shadow: var(--focus); }
/* A bordered field keeps its neutral border while focused: the ring is the signal, not a dark border. */
.input:focus-within, .box:focus-within, .text-input:focus, .note-box:focus, .ctools .input:focus-within, .pick .input:focus-within { border-color: var(--border-strong) !important; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* Scrollbars inside panes and drawers: thin and neutral everywhere (Firefox standard, then WebKit and Blink). */
* { scrollbar-width: thin; scrollbar-color: #D0D5DD transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #98A2B3; background-clip: content-box; }

/* Number badge on a sidebar item (Conversations: threads waiting on a reply) and on the bell. */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: var(--on-orange); font-size: var(--fs-sm); line-height: 1; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; flex: none; }
.rail .nav .badge { position: absolute; top: 2px; right: 2px; box-shadow: 0 0 0 2px var(--surface); }
.rail.open .nav .badge { position: static; box-shadow: none; }
.rail .nav.active .badge { background: var(--ink); color: #fff; }
.iconbtn .badge { position: absolute; top: 2px; right: 0; box-shadow: 0 0 0 2px var(--surface); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; }

/* The bell's list */
.bell-menu .toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--s1) var(--s2); border-bottom: 1px solid var(--border); }
.bell-menu .item { display: flex; gap: var(--s2); align-items: flex-start; position: relative; }
.bell-menu .item .ic { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-hover); color: var(--text-2); display: grid; place-items: center; }
.bell-menu .item .tx { flex: 1; min-width: 0; }
.bell-menu .item.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--orange); }
.bell-menu .item.unread .a { font-weight: var(--w-bold); }
.bell-menu .item .b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-menu .item .t { white-space: nowrap; }

/* Cmd or Ctrl K search: a floating palette, not a page. */
.search-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.32); z-index: 70; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.search-box { width: 560px; max-width: calc(100vw - 32px); max-height: 70vh; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); display: flex; flex-direction: column; overflow: hidden; }
.search-box .sfield { display: flex; align-items: center; gap: var(--s1); padding: 0 var(--s2); height: 56px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.search-box .sfield:focus-within { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.search-box .sfield input:focus-visible { box-shadow: none; }
.search-box .sfield input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: var(--fs-md); color: var(--text); outline: none; }
.search-box .sfield kbd { font: inherit; font-size: var(--fs-sm); color: var(--text-3); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0 6px; }
.search-box .sbody { overflow-y: auto; padding: var(--s1); }
.search-box .shead { padding: var(--s1) var(--s2) var(--s-half); }
.search-box .sres { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left; background: none; border: 0; border-radius: var(--r-sm); padding: var(--s1) var(--s2); min-height: 48px; cursor: pointer; font: inherit; color: var(--text); }
.search-box .sres:hover, .search-box .sres[aria-selected="true"] { background: var(--surface-hover); }
.search-box .sres .ic { flex: none; color: var(--text-3); }
.search-box .sres .rt { flex: 1; min-width: 0; }
.search-box .sres .a { font-weight: var(--w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-box .sres .b { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-box .sempty { padding: var(--s3) var(--s2); color: var(--text-2); text-align: center; }
.search-box .sfoot { display: flex; gap: var(--s2); padding: var(--s1) var(--s2); border-top: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-sm); }

/* The assistant slot: bottom of the sidebar, and its 380px panel anchored bottom left (not a modal, no scrim). */
.rail .assist { color: var(--text); border: 1px solid var(--border-strong); background: var(--surface); }
.rail.open .assist { height: 40px; margin-top: var(--s1); }
.rail.open .assist .lbl { flex: 1; }
.rail:not(.open) .assist { margin-top: var(--s1); }
.assist-panel { position: fixed; left: calc(var(--rail) + var(--s1)); bottom: var(--s2); width: 380px; max-height: min(560px, calc(100vh - 32px)); height: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-3); z-index: 55; display: flex; flex-direction: column; overflow: hidden; }
.assist-panel .ah { display: flex; align-items: center; justify-content: space-between; padding: var(--s1) var(--s1) var(--s1) var(--s2); height: 56px; border-bottom: 1px solid var(--border); flex: none; }
.assist-panel .ah h2 { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: var(--w-semibold); }
.assist-panel .ab { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2); display: flex; flex-direction: column; gap: var(--s1); }
.assist-panel .af { padding: var(--s1) var(--s2) var(--s2); border-top: 1px solid var(--border); display: flex; gap: var(--s1); flex: none; }
.assist-panel .af input { flex: 1; min-width: 0; }

/* ── Skip link (pressure test #6): hidden until a keyboard user tabs to it, first stop on every screen ── */
.skip-link { position: fixed; left: var(--s2); top: -64px; z-index: 1000; background: var(--surface); color: var(--text); border-radius: var(--r-sm); padding: var(--s1) var(--s2); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.18)); }
.skip-link:focus, .skip-link:focus-visible { top: var(--s2); box-shadow: var(--focus); }
.main:focus { outline: none; }

/* ── A refresh that failed while good data is on screen: a small note in the top bar, not a replaced page ── */
.stale-note { display: inline-flex; align-items: center; gap: var(--s1); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.stale-note .link-btn { margin-left: var(--s-half); }