/* The app shell: only what is unique to it. Everything else (tokens, rail, topbar, cards, tags, tables, hero,
   journey, timeline, palette, phone layer) comes from /shared/apex.css, which loads first. Phone rules are last. */

[hidden] { display: none !important; } /* the hidden attribute beats a component's own display */

/* ---- rail: labels hide when the rail is collapsed to icons (the toggle at the bottom, or narrower screens) ---- */
.rail a .lbl { display: block; }
.rail .slim { width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: inherit; display: grid; place-items: center; margin-bottom: 8px; }
.rail .slim:hover { background: var(--navy-2); color: var(--on-dark); }
.rail .slim svg.i { transition: transform .2s; }
.rail button.me { padding: 0; cursor: pointer; }
body.rail-slim .app { grid-template-columns: 56px 1fr; }
body.rail-slim .rail { padding-left: 4px; padding-right: 4px; }
body.rail-slim .rail a { width: 44px; padding: 10px 0; }
body.rail-slim .rail a .lbl { display: none; }
body.rail-slim .rail .slim svg.i { transform: rotate(180deg); }
/* Badges (round 2): a count is quiet structure on the navy rail; amber only when it counts what is waiting on us
   (follow-ups due, overdue cases). It is a door of its own (chrome.js): the list that reproduces the number. */
.rail a .n { background: color-mix(in srgb, var(--on-dark) 24%, transparent); color: var(--on-dark); cursor: pointer; }
.rail a .n.due { background: var(--amber-fill); }
.rail a.on .n:not(.due) { background: var(--navy); }
.rail a .n:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-dark) 45%, transparent); }
/* On the slim rail the badge sits on the icon's top-right corner, not the link's. */
body.rail-slim .rail a .n { top: 3px; right: auto; left: 25px; }
.rail .more { display: none; } /* the phone's fifth tab (below) */
/* #/more (pages/more-page.js): the work pages the rail has no room for, a card per group, never wider than it reads */
.more-page { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--sp-4); align-items: start; max-width: 1180px; }
/* A laptop's short screen keeps every rail entry and the avatar on it (ux2 today-finding: fourteen entries for the
   owner): the entries tighten under 960px of height, and a rail that still does not fit scrolls rather than hiding
   the avatar. */
@media (min-width: 761px) { .rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; } }
@media (min-width: 761px) and (max-height: 960px) { .rail a { padding-top: 6px; padding-bottom: 4px; } .rail .logo { margin-bottom: 6px; } }
/* the avatar menu: a small card that opens above the avatar */
.memenu { position: fixed; left: calc(var(--rail) - 8px); bottom: 12px; width: 240px; z-index: 30; box-shadow: var(--lift); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; } /* a short screen scrolls the menu, never cuts its top off (ux2: -293px at 1024x768) */
body.rail-slim .memenu { left: 56px; }
.memenu .body + .body { border-top: 1px solid var(--line-faint); padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.memenu .who { display: grid; gap: 2px; justify-items: start; }
.memenu .who .tag { margin-top: 4px; }
.memenu .links { display: grid; gap: 2px; }
.memenu .mi { display: flex; align-items: center; gap: var(--sp-2); padding: 7px 8px; border-radius: 6px; color: var(--ink); font: 500 var(--t-2) var(--font); background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer; }
.memenu .mi:hover, .memenu .mi:focus-visible { background: var(--soft); box-shadow: none; outline: 2px solid transparent; }
.memenu .mi:focus-visible { box-shadow: var(--sel-ring); }
.memenu .mi svg.i { color: var(--muted); }
.memenu > footer { flex-direction: column; align-items: stretch; gap: 2px; } /* Sign out, then the quieter Sign out everywhere */
.memenu footer { padding: var(--sp-3) var(--sp-4); }

/* ---- sheets: profile, preferences, keyboard shortcuts (a centred card over a scrim) ---- */
.sheet { position: fixed; inset: 0; z-index: 65; background: var(--scrim); /* the same scrim as .cmdk in the shared sheet */ display: grid; place-items: center; padding: var(--sp-4); }
.sheet > .card { width: 100%; max-width: 480px; box-shadow: var(--lift); }
.sheet .kv { gap: 10px var(--sp-4); align-items: center; }
.sheet .kv dt { white-space: nowrap; }
.sheet .keys dt { display: flex; gap: 2px; align-items: center; color: var(--ink-soft); font-size: 12px; }
.prefs { display: grid; gap: var(--sp-2); }
.pref { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 10px var(--sp-3); border: 1px solid var(--line-soft); border-radius: var(--r-sm); cursor: pointer; }
.pref:hover { background: var(--soft); }
.pref b { display: block; font-size: var(--t-2); }
.pref small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* keyboard hints stay on when the preference asks for it */
body.hints-on [data-keys] [data-key]::after { opacity: 1; }

/* ---- loading bar and offline banner ---- */
.loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--blue); z-index: 80; opacity: 0; pointer-events: none; transition: width .3s ease, opacity .2s; }
.loadbar.on { opacity: 1; width: 70%; transition: width 8s cubic-bezier(.1,.6,.3,1), opacity .2s; }
.loadbar.done { width: 100%; opacity: 0; transition: width .2s ease, opacity .25s .1s; }
.offline { margin: var(--sp-4) var(--sp-5) 0; }

/* ---- notifications: the bell in the top bar and the inbox under it ---- */
.topbar .bell { position: relative; color: var(--ink-soft); }
.topbar .bell .n { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--amber-fill); color: var(--on-dark); font-size: 10px; font-weight: 700; border-radius: var(--r-pill); display: grid; place-items: center; line-height: 16px; }
.inbox { position: fixed; top: calc(var(--topbar) + 6px); right: var(--sp-5); width: 380px; max-width: calc(100% - 2 * var(--sp-3)); max-height: min(70vh, 560px); display: flex; flex-direction: column; z-index: 40; box-shadow: var(--lift); }
.inbox .body { overflow: auto; }
.inbox .rows { gap: 4px; }
.inbox .row { grid-template-columns: auto minmax(0, 1fr) auto; border-color: transparent; padding: 8px 10px; }
.inbox .row.unread { background: var(--blue-faint); }
/* A mixed list, so the kind is the row's identity: an icon well in the kind's tone, the unread dot on its corner. */
.inbox .row .kind, .inbox-sheet .row .kind { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); color: var(--navy-ink); }
.inbox .row .kind svg.i, .inbox-sheet .row .kind svg.i { width: 16px; height: 16px; }
.inbox .row .kind.red, .inbox-sheet .row .kind.red { background: var(--red-faint); color: var(--red); }
.inbox .row .kind.amber, .inbox-sheet .row .kind.amber { background: var(--amber-faint); color: var(--amber); }
.inbox .row .kind.blue, .inbox-sheet .row .kind.blue { background: var(--blue-faint); color: var(--blue-ink); }
.inbox .row .udot, .inbox-sheet .row .udot { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--card); }
.inbox .row small, .inbox-sheet .row small { white-space: normal; }
.inbox .row time, .inbox-sheet .row time { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* On a phone the inbox is the shared bottom sheet (sheet(), round 2 R5): the same rows, full width. */
.inbox-sheet .rows { gap: 4px; }
.inbox-sheet .row { grid-template-columns: auto minmax(0, 1fr) auto; border-color: transparent; padding: 10px; }
.inbox-sheet .row.unread { background: var(--blue-faint); }
.inbox-sheet .empty { border: 0; padding: var(--sp-5) var(--sp-3); }
.inbox .empty { border: 0; padding: var(--sp-5) var(--sp-3); }
.inbox .empty svg.i { width: 26px; height: 26px; }
/* round 3: the time, then Mark read on hover; New / Earlier group heads; Mark all read in the phone sheet's title */
.inbox .row .end, .inbox-sheet .row .end { display: flex; align-items: center; gap: 4px; }
.inbox .lgroup, .inbox-sheet .lgroup { padding: var(--sp-2) 10px 2px; }
.inbox .empty.compact, .inbox-sheet .empty.compact { margin: var(--sp-2) 0; }
.inbox-bsheet > header .btn.quiet { margin-right: 4px; }

/* ---- acting as (a platform admin inside a tenant): the amber bar under the top bar, with the time left and Stop ---- */
.acting { display: flex; align-items: center; gap: var(--sp-2); padding: 7px var(--sp-5); background: var(--amber-faint); border-bottom: 1px solid var(--amber-line); color: var(--amber); font-size: var(--t-1); font-weight: 500; }
.acting .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acting b { font-weight: 700; }
.acting .sp { flex: 1; }
.acting svg.i { flex: none; }
/* ---- the way back from a practice task (practice-return.js): a blue strip under the top bar while a task is open ---- */
.practice-return { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-5); background: var(--blue-faint); border-bottom: 1px solid var(--blue-soft); color: var(--blue-ink); font-size: var(--t-1); font-weight: 500; }
.practice-return .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-return b { font-weight: 700; }
.practice-return .sp { flex: 1; }
.practice-return svg.i { flex: none; }

/* ---- top bar ---- */
.topbar .backslot:empty { display: none; }
.topbar .tools:empty { display: none; }
/* A crowded top bar (a record's links beside the bell and the ?) gives up search width first, never the viewport. */
.topbar .search { flex-shrink: 1; min-width: 150px; overflow: hidden; white-space: nowrap; }
.topbar .search .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar .crumb a { color: var(--muted); font-weight: 500; }
.topbar .crumb a:hover { color: var(--blue); }
.topbar .crumb .sep { color: var(--faint); }
.topbar .crumb:empty { display: none; }
.topbar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* ---- palette: a kind icon per row, the match in bold, the subtitle under the title, a footer of keys, and a
   faded bottom edge as the scroll cue so the last visible row never looks cut off ---- */
.cmdk li .lbl { min-width: 0; display: grid; flex: 1; }
.cmdk li .lbl small { color: var(--muted); font-weight: 500; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk li .lbl .hit { font-weight: 700; color: var(--blue-ink); }
.cmdk li > svg.i { width: 18px; height: 18px; color: var(--muted); flex: none; }
.cmdk li.on > svg.i { color: var(--blue-ink); }
.cmdk li.more { color: var(--blue); font-weight: 600; }
.cmdk li.none.err { display: flex; align-items: center; gap: var(--sp-3); color: var(--red); }
.cmdk ul { scroll-padding-bottom: 12px; mask-image: linear-gradient(180deg, var(--ink) calc(100% - 18px), transparent); -webkit-mask-image: linear-gradient(180deg, var(--ink) calc(100% - 18px), transparent); }
.cmdk .box { display: flex; flex-direction: column; max-height: calc(100vh - 14vh - var(--sp-4)); }
.cmdk .foot { border-top: 1px solid var(--line-faint); padding: 6px 18px; }
.cmdk .foot .hintbar { padding: 0; }

/* ---- Today: in home.css, loaded by pages/home.js ---- */
.facts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* two facts stay two tiles, not two slabs (record pages) */
a.fact { color: inherit; }
a.fact:hover { border-color: var(--line); background: var(--soft); }
.fact .v.text { font-size: var(--t-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact .v.text .tag { vertical-align: 2px; }

/* ---- lists ---- */
.toolbar .find { width: 260px; }
.toolbar > .input { width: auto; }
.toolbar .find .input { height: 32px; }
.toolbar .pills { flex: 0 1 auto; min-width: 0; }
.pills .cap { margin: 0 2px 0 6px; font-weight: 600; }
.toolbar select.sm { width: auto; height: 32px; font-size: var(--t-1); padding-right: 28px; }
.th-btn { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.table td b { font-weight: 600; display: block; line-height: 1.3; }
.table tbody tr:focus-visible { outline: none; }
.table tbody tr:focus-visible td { background: var(--blue-faint); }
.table td code { font-size: 12px; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
.table .changes { margin: 6px 0 0; font-size: 11.5px; white-space: pre-wrap; color: var(--ink-soft); }
.card > footer .btn + .btn { margin-left: var(--sp-2); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack > .seg { align-self: flex-start; }

/* ---- records ---- */
.hero .tags .money { font-weight: 700; }
/* the journey rail's <span> stages draw as its <a> stages do: one rule set in apex.css */
.kv dd { min-width: 0; overflow-wrap: anywhere; }
.kv.wide { grid-template-columns: max-content 1fr max-content 1fr; gap: 8px var(--sp-5); margin-top: var(--sp-2); }
.kv.wide dd.long { grid-column: 2 / -1; white-space: pre-wrap; }
.consent { display: grid; gap: 6px; }
.consent .line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--t-1); color: var(--ink-soft); padding: 6px 0; border-top: 1px solid var(--line-faint); }
a.row { color: inherit; }
.row .bar { background: var(--line-soft); }
.disclose summary svg.i { transition: transform .15s; }
.disclose[open] summary svg.i { transform: rotate(180deg); }
.ev[tabindex]:focus-visible { outline: none; background: var(--blue-faint); }

/* ---- narrower desktops: the rail collapses to icons by itself ---- */
/* ---- the palette: identity leads (avatar, plate), the list fades at its bottom edge while more is below ---- */
.cmdk li.id > .avatar, .cmdk li.id > .plate { flex: 0 0 auto; }
.cmdk li.id > .plate { min-width: 62px; justify-content: center; }
.cmdk ul { padding-bottom: var(--sp-3); }
.cmdk li.gmore { color: var(--blue-ink); font-size: var(--t-1); padding-top: 6px; padding-bottom: 6px; } /* "More customers": that kind's list, searched */
.cmdk ul.more-below { mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 40px), transparent); -webkit-mask-image: linear-gradient(to bottom, var(--ink) calc(100% - 40px), transparent); }

/* ---- the phone's More sheet: destinations grouped under small eyebrows (Work / Shop / Me) ---- */
.more-groups .eyebrow { font: 700 11px var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: var(--sp-3) 10px 2px; }
.more-groups .eyebrow:first-child { padding-top: 0; }
.more-groups .row.who { border-color: transparent; background: var(--soft); }

/* The palette while a search is on its way (R3-6): a quiet skeleton row that says so, never "Nothing matches". */
.cmdk li.none.searching { display: flex; align-items: center; gap: var(--sp-3); color: var(--muted); }
.cmdk li.none.searching .sk-ic { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.cmdk li.none.searching .sk-bar { flex: 1; height: 10px; border-radius: var(--r-pill); max-width: 180px; }

@media (max-width: 1100px) and (min-width: 761px) {
  /* a tablet keeps the rail's words under its icons, smaller (ux2: an icon-only rail on a touch screen has no hover to
     name "10" and "9"); the rail is 68px instead of the desk's 76 */
  .app { grid-template-columns: 68px 1fr; }
  .rail { padding-left: 4px; padding-right: 4px; }
  .rail a { width: 60px; padding: 7px 0 5px; }
  .rail a .lbl { display: block; max-width: 60px; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; letter-spacing: -.01em; }
  .rail a .n { right: 2px; }
  .rail .slim { display: none; }
  .memenu { left: 68px; }
  .cols { grid-template-columns: 1fr 1fr; }
  .cols > .col:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  /* a two-column page (the work | a 340px side) stacks in reading order on a tablet: the rule above, right for a
     record's three columns, put the side card on top and left the work half the width (ux2: Payments' cash by day was
     306px at 768 with Refunded cut off and its table scrolling 125px sideways) */
  .cols.two { grid-template-columns: minmax(0, 1fr); }
  .cols.two > .col:nth-child(2) { grid-column: auto; grid-row: auto; }
  /* The top bar on a tablet (ux2: at 768 a record's buttons ran 51px past the edge and the search read "Find customer,
     pl"): the title keeps what is left; with a screen's own buttons in the bar the search folds to its magnifier (Ctrl K
     still opens it), and buttons that still do not fit wrap to a second row instead of off the screen. */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar); row-gap: var(--sp-2); padding-block: 10px; }
  .topbar h1, .topbar .crumb { flex: 0 1 auto; max-width: none; }
  .topbar:has(.tools > *) .search { width: 40px; min-width: 40px; padding: 0; justify-content: center; }
  .topbar:has(.tools > *) .search .lbl, .topbar:has(.tools > *) .search kbd { display: none; }
}

/* ---- phone (after the shared phone layer, so these win) ---- */
@media (max-width: 760px) {
  .rail .slim, .memenu { display: none; }
  /* the tab bar: four destinations and More; the rest (Jobs, Cases, Reports, Sign out...) open in a bottom sheet from More */
  .rail a:nth-child(n+6) { display: none; }
  .rail .more { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; padding: 6px 4px 4px; border: 0; background: transparent; color: var(--rail-ink-soft); font: 500 10px var(--font); border-radius: 9px; }
  .rail .more:hover, .rail .more[aria-expanded="true"] { color: var(--on-dark); }
  .rail .more svg.i { width: 22px; height: 22px; }
  /* The More sheet is the shared bottom sheet now (.bsheet); its button rows (Preferences, Sign out) keep the row's shape. */
  .sheet .rows.quick .row, .bsheet .rows.quick .row { border-color: transparent; }
  .sheet button.row, .bsheet button.row { width: 100%; font: inherit; background: var(--card); text-align: left; color: inherit; }
  .sheet .row.static, .bsheet .row.static { cursor: default; } .sheet .row.static .end, .bsheet .row.static .end { color: var(--muted); }
  .sheet .row .end .n, .bsheet .row .end .n { position: static; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--amber-fill); color: var(--on-dark); font-size: 11px; font-weight: 700; }
  /* In the More sheet the cloned rail badge keeps its meaning: a quiet count, amber only when it is due (chrome.js). */
  .bsheet .row .end .n { background: var(--soft); color: var(--navy-ink); } .bsheet .row .end .n.due { background: var(--amber-fill); color: var(--on-dark); }
  .cmdk { padding: var(--sp-2) var(--sp-2) 0; align-items: flex-start; }
  .cmdk .box { max-height: calc(100vh - 2 * var(--sp-2)); border-radius: 12px; }
  .cmdk .foot { display: none; }
  .acting { padding: 7px var(--sp-4); }
  .acting .txt { white-space: normal; }
  .practice-return { padding: 6px var(--sp-4); }
  .practice-return .txt { white-space: normal; }
  .topbar .bell { order: 2; } /* the title row: back, title, bell; the back arrow stands in for the trail */
  .topbar .crumb { display: none; }
  .inbox { top: auto; bottom: calc(var(--tabbar) + var(--sp-3)); left: var(--sp-3); right: var(--sp-3); width: auto; max-height: 60vh; z-index: 52; }
  .offline { margin: var(--sp-3) var(--sp-4) 0; }
  .sheet { align-items: end; padding: 0; }
  .sheet > .card { max-width: none; border-radius: var(--r) var(--r) 0 0; padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom)); max-height: calc(100vh - var(--sp-4)); overflow: auto; } /* a tall sheet (More) scrolls inside itself */
  /* The title takes the room between the back arrow and the bell (basis 0, so the line is assigned before it is measured):
     a long title wraps inside its row rather than pushing the bell and the ? under it. */
  .topbar h1 { max-width: none; flex: 1 1 0; }
  .topbar .sp { flex: 0 0 0; min-width: 0; } /* the title is the spacer now */
  .topbar .tools { order: 5; }
  .topbar .help { order: 6; }  /* the ? sits last on the title row */
  /* With tools, the ? stays on the title row beside the bell and the tools come after it: one narrow action
     fits on the same row, wider ones wrap to a row of their own, and the ? never wraps away from the bell. */
  .topbar:has(.tools > *) .help { order: 4; }
  .topbar .tools:has(> :nth-child(2)) { flex-basis: 100%; }
  .topbar .backslot { order: -1; }
  .toolbar .find { width: 100%; }
  .toolbar .sp { display: none; }
  .toolbar .seg { width: 100%; }
  .toolbar .seg button { flex: 1; justify-content: center; }
  .kv.wide { grid-template-columns: max-content 1fr; }
  .kv.wide dd.long { grid-column: 2; }
  .facts { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: max-content 1fr; }
  /* the stacked list: the name is the heading of its row, empty cells are left out */
  .table td.name { display: block; padding-bottom: 6px; }
  .table td.name::before { display: none; }
  .table td.name b { font-size: var(--t-2); }
  .table td.name .sub { display: block; margin: 0; }
  .table td.blank { display: none; }
  .table td.num { justify-content: flex-start; }
}

/* ---- the colour scheme row in Preferences (wave 6, themes): a segmented control, not a switch, so it is not a label ---- */
.pref.static { cursor: default; } .pref.static:hover { background: transparent; }
.pref.static .seg { flex: none; }