/* ─── RESET & BASE ─── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    /* ── Slate · light ──────────────────────────────────────────────
       The ground is cool slate, cards are white on a hairline, and moss
       is the single accent. Clay is pending and overdue; red is only for
       money or data at risk; teal is places and the calendar. Values are
       lifted from the finalised Slate canvas, not re-derived. */
    --paper:    #F1F3F6;   /* the ground */
    --grid-line:#E7EAEF;   /* the 8px graph grid drawn on the ground */
    --gray-1:   #F1F3F6;   /* body background — same ground */
    --gray-2:   #EFF2F6;   /* card headers, table heads, quiet fills */
    /* ponytail: one name doing two jobs — it sets `color` 35 times (placeholder,
       meta, empty state) and `border-color` 22 times. #95A1B0 is the lightest
       value that does not regress the old palette's 2.23:1 for the text uses
       while staying light enough to draw a border. The style guide's ramp says
       meta text should be #5F6D7D, which would be right for the 35 and far too
       dark for the 22: split it into --gray-3 and --line if meta text matters. */
    /* Split on 2026-09-12, exactly as the note below this file's own palette
       asked for. One name was doing two jobs: meta TEXT and a hairline. Kept at
       the border value it was, --gray-3 could not be lifted without thickening
       41 borders, so 114 pieces of meta text stayed at 2.62:1 in light and
       3.17:1 in dark — 475 skill codes among them. Two names now. */
    --line:     #95A1B0;   /* the hairline --gray-3 used to draw */
    --gray-3:   #5F6D7D;   /* meta text · 5.29:1 on card (AA) */
    --gray-4:   #5A6472;   /* secondary text · 5.40:1 on the ground (AA) */
    --text:     #101828;   /* 15.96:1 on the ground (AAA) */
    --border:   #E3E7EC;   /* the hairline that separates a card */

    /* Moss. --green is the brand forest for ink and marks; --olive is the
       fill used by primary buttons; --olive-dk is the text-safe one used
       for links. Names kept from the old palette so nothing has to be
       renamed across 2,700 var() calls. */
    --green:    #26492F;   /* 9.10:1 on the ground (AAA) */
    --green-dk: #1B3522;
    --green-lt: #EAF1EC;
    --olive:    #3F6B44;   /* primary button fill */
    --olive-dk: #2F5A3A;   /* 6.92:1 on --olive-lt — the text-safe moss (AA) */
    --olive-lt: #EAF1EC;
    --accent:   #3F6B44;

    /* Clay: pending, held, statutory, overdue. Never the primary action. */
    --warn:     #A1441C;
    --warn-lt:  #FBEAE2;
    --yellow:   #A1441C;
    --yellow-dk:#8A3A17;
    --yellow-lt:#FBEAE2;
    --orange:   #A1441C;
    --orange-lt:#FBEAE2;

    /* Red is reserved. Money or data at risk, and destructive verbs. */
    --danger:   #8C2D22;
    /* Blue and violet existed only as ~40 hardcoded literals chosen against a
       white card — #1e40af reads 1.92:1 on the dark card, #3730a3 1.69:1.
       Neither had a token to resolve into, so they could not follow the theme.
       Both values computed, not eyeballed. */
    /* The pale panel a danger message sits on. There was no such token, so
       eighteen inline banners kept a hardcoded light background while their
       text was moved onto --danger — which is LIGHT in dark mode. Pale text on
       a pale panel, and the message most worth reading. */
    --danger-lt:#FBE9E7;   /* --danger reads 7.13:1 on it */
    --info-lt:  #E7F0F7;   /* --info reads 6.04:1 on it */
    --violet-lt:#EFEAF7;   /* --violet reads 7.36:1 on it */
    --info:     #1B5E8A;   /* 6.97:1 on card, 6.27:1 on the ground */
    --violet:   #5B3A8A;   /* 8.69:1 on card, 7.82:1 on the ground */

    --shadow:   0 1px 2px rgba(16,24,40,.04);
    --radius:   10px;      /* card */
    --radius-btn: 8px;     /* everything pressable — soft rectangle */
    --sidebar-w: 216px;      /* the labelled module menu */
    --sidebar-w-mini: 56px;  /* the same menu with its labels off */
    --rail-w:     64px;    /* the quick-links rail, which never collapses */
    --sidebar-bg:#1B2433;  /* bark — still the avatar ground and the stat ink */
    --rail-bg:   #172B1D;  /* the logo's forest, taken down to chrome depth */
    /* The module menu is a surface, not chrome: white in light, card-dark in
       dark. Bark is reserved for the rail, so these are separate tokens from
       --sidebar-bg and the two no longer move together. */
    --menu-bg:       #FFFFFF;
    --menu-line:     #EDF0F3;
    --menu-ink:      #3E4756;
    --menu-ink-strong:#101828;   /* the wordmark, and anything that has to carry */
    --menu-ink-2:    #5F6D7D;    /* group labels and meta */
    --menu-hover:    #F1F3F6;
    --menu-active:   #EAF1EC;
    --menu-active-ink:#26492F;
    /* Accents that sit on the rail or on a dark card have to move UP the
       scale, not match the page. */
    --on-dark:    #9BD3A6;
    --on-dark-lt: #C3E3CB;

    /* A task somebody else put on your list. Deliberately weaker than
       --yellow-lt, which is a warning colour: this is a provenance hint
       you should be able to ignore while scanning. */
    --card-borrowed:    #FDF1EA;
    --card-borrowed-bd: #F0DCCE;

    /* My Week's day rows. The row and its rail are two tints of the same
       colour rather than one flat fill: the rail is the column you read
       every row against, so it has to separate from the cards beside it
       without becoming a second border. */
    --ink-over: #8C2D22;
    --row-surface: #FFFFFF;
    --row-today: #F4F8F4;  --rail-today: #EAF1EC;  --edge-today: #CBDFD0;
    --row-over:  #FDF4F0;  --rail-over:  #FBEAE2;  --edge-over:  #F0D2C2;
    --pill-today:#DCEAE0;  --pill-over:  #F7DCCD;
    /* The 3px stripe down the left of a card: red says overdue, clay says
       somebody else put this on your plate. Softened from --danger/--warn
       for the same reason — a saturated 3px rule on every card in a busy
       day is a barcode. */
    --card-edge-over:     #C4705C;
    --card-edge-borrowed: #D9A07A;

    /* surface tokens — used by dark mode overrides */
    --surface:   #FFFFFF;
    --card-bg:   #FFFFFF;
    --band:      #F7F9FB;   /* a heading band ON a card, one step off it */
    --input-bg:  #FFFFFF;
    /* --text-1/--text-2/--surface-0/--surface-1 are referenced ~49 times
       across the app (Org Tree cards among them) but were never actually
       defined anywhere — with no fallback in most of those var() calls,
       every one of those was silently resolving to "unset". Aliasing to the
       existing tokens (rather than inventing new colors) means dark mode
       continues working automatically — custom properties re-resolve at use
       time, not definition time. */
    --text-1:    var(--text);
    --text-2:    var(--gray-4);
    --surface-0: var(--card-bg);
    --surface-1: var(--input-bg);
    --surface-2: var(--gray-2);
    --card:     var(--card-bg);
  }
  body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px;
         color: var(--text); background: var(--gray-1);
         -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
         /* The ground is a sheet of graph paper: an 8px grid, drawn once on the
            body and never inside a card or behind a table, where it would fight
            the rows. Two hairlines rather than a texture image, so it costs
            nothing and stays crisp at any zoom. */
         background-image:
           linear-gradient(to right,  var(--grid-line) 1px, transparent 1px),
           linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
         background-size: 8px 8px; }

  /* Tabular figures wherever numbers stack into a column. Proportional digits
     have different widths, so a column of hours, dates or salary figures
     visibly jitters row to row and cannot be scanned down — you have to read
     every line. This is the single biggest readability change in the app and
     it costs nothing, because Inter already ships the feature. */
  table, th, td, input, select, textarea, .badge, .stat-val, .stat-lbl,
  .tree-meta, .chip-btn, .mv-n, .seg-opt, .tab, code, pre,
  [style*="monospace"] { font-variant-numeric: tabular-nums; }

  /* Headings tighten slightly; Inter's default tracking is set for body text
     and looks loose at display sizes. */
  h1, h2, h3, h4, .card-title, .brand, .brand-name, .stat-val, .composer-title,
  .tree-t1 { letter-spacing: -0.014em; }

  /* ── Display face ─────────────────────────────────────────────────────
     Plus Jakarta Sans, and ONLY here: the wordmark and the page hero titles.
     Both are things you glance at to know where you are, never things you read
     to extract a number. Every table, badge, chip and form label stays Plex.

     Set tight (-0.024em) because a geometric sans at heading sizes reads loose
     next to Plex's narrower body text. */
  .brand, .brand-name, .mobile-topbar-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.024em;
  }
  /* Plus Jakarta Sans runs a little larger on the body than IBM Plex at the same
     px, so the wordmark keeps its nudge but no longer needs a weight down. */
  .sidebar-logo-text .brand { font-size: 16.5px; font-weight: 700; }
  .login-logo .brand-name   { font-size: 26px;   font-weight: 700; }
  @media (max-width: 768px) {
    /* 15px, not 16.5: the title has ~115px on a 375px phone once the menu, the
       place pill and the avatar have theirs, and at 16.5px "New requisition" was
       "New requisiti…" (#288). */
    .mobile-topbar-title { font-size: 15px !important; font-weight: 700 !important; }
  }
  /* The login tagline is the one line of prose that carries the brand, so it
     gets the display face too — at a size where a serif is comfortable to read. */
  .login-image-text .tagline {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-weight: 600;
  }
  a { color: var(--green); text-decoration: none; }
  button { cursor: pointer; border: none; border-radius: var(--radius-btn); font-size: 13px; font-family: inherit; }
  /* (#59) The :not() matters. This rule is written for things you type into,
     but `input` also matches radios and checkboxes, and width:100% on a radio
     stretches the control itself — measured at 80x44 inside the regularisation
     sheet, which is what pushed every label off to the right. Twenty checkboxes
     in index.html already carried an inline width to escape this; they no
     longer need to. */
  input:not([type="radio"]):not([type="checkbox"]), select, textarea {
                            font-family: inherit; font-size: 13px; border: 1px solid var(--border);
                            border-radius: var(--radius-btn); padding: 7px 10px; width: 100%;
                            background: var(--input-bg); color: var(--text); outline: none; }
  /* Sized explicitly so they stay round and stay put. The 44px tap target
     belongs to the label wrapping them, which is what the finger actually hits. */
  input[type="radio"], input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0;
                            accent-color: var(--green); margin: 0; }
  input:focus, select:focus, textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(168,115,15,0.16); }
  label { display: block; font-size: 12px; color: var(--gray-4); margin-bottom: 4px; font-weight: 600; }
  .badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius); font-size: 11px; font-weight: 700; }
  .badge-green  { background: var(--green-lt); color: var(--green-dk); }   /* 8.15:1 */
  .badge-orange { background: var(--yellow-lt); color: var(--yellow-dk); }   /* 5.89:1 */
  .badge-red    { background: var(--danger-lt); color: var(--danger); }   /* 5.71:1 */
  .badge-gray   { background: var(--gray-2); color: var(--gray-4); }
  .badge-blue   { background: #dbeafe; color: #1e40af; }
  .vg-pillar-card { border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:transform .1s ease; }
  .vg-pillar-card:hover { transform:translateY(-1px); }
  .vg-pillar-blue   { background:#dbeafe; color:#1e40af; }
  .vg-pillar-orange { background:var(--yellow-lt); color:#a04000; }
  .vg-pillar-gray   { background:var(--gray-2); color:var(--gray-4); }
  .vg-pillar-green  { background:var(--green-lt); color:var(--green); }
  .vg-pillar-purple { background:#ede9fe; color:#5b21b6; }
  .vg-pillar-pink   { background:#fce7f3; color:#9d174d; }

  /* ─── LAYOUT ─── */
  #app { display: flex; min-height: 100vh; }
  #rail    { width: var(--rail-w); background: var(--rail-bg); display: flex;
             flex-direction: column; align-items: center; gap: 6px; padding: 14px 0;
             flex-shrink: 0; position: fixed; top: 0; bottom: 0; left: 0; z-index: 11; }
  #sidebar { width: var(--sidebar-w); background: var(--menu-bg); display: flex;
             flex-direction: column; flex-shrink: 0; position: fixed; top: 0; bottom: 0;
             left: var(--rail-w); border-right: 1px solid var(--menu-line); z-index: 10; }
  /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, which
     means it refuses to shrink below its content — so a wide kanban or table
     stretched #main past the viewport instead of letting #content scroll, and
     body's overflow-x:hidden then clipped the part you could never reach. */
  #main   { margin-left: calc(var(--rail-w) + var(--sidebar-w)); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
  #topbar { background: var(--card-bg); border-bottom: 1px solid var(--menu-line); padding: 0 24px;
            height: 56px; display: flex; align-items: center; gap: 14px;
            position: sticky; top: 0; z-index: 5; overflow: visible; }
  #content { padding: 24px; flex: 1; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Same trap one level down: cards and grid/flex children inside #content. */
  #content > *, #content .card, #content .card-body { min-width: 0; }

  /* Fixed to the body, because #nav-menu scrolls and would clip it. Bark, so
     it reads as chrome rather than as content that has escaped a card. */
  .nav-tip { position: fixed; z-index: 300; transform: translateY(-50%);
             background: var(--sidebar-bg); color: #FFFFFF; font-size: 12.5px; font-weight: 600;
             padding: 6px 10px; border-radius: var(--radius-btn); white-space: nowrap;
             pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.22); }
  @media (max-width: 768px) { .nav-tip { display: none; } }

  /* ─── THE PHONE TAB BAR ───
     Desktop never sees it: there the rail and the menu are always on screen.
     999px is reserved for badges, so the tabs are plain and only the New
     button is a shape — it is the one thing here that creates rather than
     goes somewhere. */
  #tabbar { display:none; }
  @media (max-width: 768px) {
    #tabbar { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120;
              background:var(--card-bg); border-top:1px solid var(--border);
              padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
              justify-content:space-around; align-items:flex-end; }
    .tab-item { flex:1 1 0; min-width:0; background:none; border:0; cursor:pointer; font-family:inherit;
                display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 2px;
                color:var(--gray-4); }
    .tab-item .tab-ic { position:relative; display:flex; line-height:0; }
    .tab-label { font-size:11px; font-weight:600; letter-spacing:-.01em; }
    .tab-item.on { color:var(--olive-dk); }
    .tab-item.on .tab-label { font-weight:700; }
    /* A count here means "your turn", so it is moss, not red. */
    .tab-badge { position:absolute; top:-5px; right:-8px; min-width:16px; height:16px; padding:0 4px;
                 border-radius:999px; background:var(--olive); color:var(--green-lt); font-size:10px;
                 font-weight:700; line-height:16px; text-align:center;
                 border:1.5px solid var(--card-bg); font-variant-numeric:tabular-nums; }
    .tab-new .tab-plus { display:flex; align-items:center; justify-content:center;
                 width:42px; height:30px; border-radius:var(--radius-btn); background:var(--olive);
                 color:var(--green-lt); font-size:21px; line-height:1; font-weight:400; }
    .tab-new { color:var(--olive-dk); }
    .tab-new .tab-label { font-weight:700; }
    /* The strip floats over the page, so the page has to end above it. That
       clearance lives in the phone block further down, AFTER the line there
       that sets `#content { padding: 12px !important }`: an important shorthand
       beats a plain longhand whatever the order, and two importants at equal
       specificity go to the later one. Here it never applied, so the last card
       on every page sat under the tabs (#288). */
    .bottom-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
  }

  /* The shortcut thumbnail, at the size the rail draws it, so what you see in
     the editor is what lands on the rail. */
  .ql-thumb { width:40px; height:40px; border-radius:var(--radius); flex:0 0 auto; overflow:hidden;
              display:flex; align-items:center; justify-content:center;
              background:var(--gray-2); border:1px solid var(--border);
              font-size:13px; font-weight:700; color:var(--gray-4); }
  .ql-thumb img { width:100%; height:100%; object-fit:cover; }
  /* Up/down on a shortcut row. Small on purpose — they sit beside Remove and
     must not out-shout it — but still 20px tall each, which stacked is a 40px
     target for the pair. */
  .ql-move { padding:2px 8px; font-size:10px; line-height:1.6; min-height:0 !important; }
  .ql-move[disabled] { opacity:.35; cursor:default; }

  /* ─── MENU, CLOSED ─── */
  .menu-collapse { background:none; border:0; cursor:pointer; color:var(--menu-ink-2); font-size:15px;
                   line-height:1; padding:4px 6px; border-radius:var(--radius-btn); flex:0 0 auto; font-family:inherit; }
  .menu-collapse:hover { background:var(--menu-hover); color:var(--menu-ink); }
  /* Collapsing to icons is a DESKTOP affordance: there the menu is always on
     screen, so shrinking it buys back width and the icons stay in the same
     place. On a phone the menu is a drawer you summoned deliberately, and the
     collapsed state made it open as a column of unlabelled pictures — you
     asked for the menu and got a puzzle. Above 768px only. */
  @media (min-width: 769px) {
  body.menu-closed #sidebar { width: var(--sidebar-w-mini); }
  body.menu-closed #main    { margin-left: calc(var(--rail-w) + var(--sidebar-w-mini)); }
  /* Everything that is words goes; everything that is a destination stays. */
  body.menu-closed .nav-label,
  body.menu-closed .nav-group-label,
  body.menu-closed .nav-search-wrap,
  body.menu-closed .sidebar-logo-text,
  body.menu-closed #me-toggle-wrap,
  body.menu-closed .sidebar-footer { display:none; }
  body.menu-closed .nav-item { justify-content:center; padding:9px 0; margin:2px 8px; }
  body.menu-closed .nav-item .icon { margin:0; }
  body.menu-closed .sidebar-logo { justify-content:center; padding:16px 0 12px; }
  body.menu-closed .menu-collapse { transform:rotate(180deg); }
  body.menu-closed .nav-group { padding:3px 0; }
  }
  /* The rail's hamburger existed because the menu used to vanish entirely.
     It has not vanished, so the menu's own chevron is the only control. */
  body.menu-closed .rail-menu { display:none; }
  .rail-menu { display:none; width:40px; height:40px; border-radius:var(--radius); flex:0 0 auto; cursor:pointer;
               align-items:center; justify-content:center; background:rgba(255,255,255,.06);
               color:var(--gray-3); font-size:15px; border:0; font-family:inherit; }
  .rail-menu:hover { background:rgba(255,255,255,.13); }
  /* The build number, at the foot of the rail. Tiny on purpose: it is a
     reference you occasionally want, until there is an update waiting, at which
     point it is the most important thing on the rail and says so in clay. */
  .rail-ver { margin-top:auto; margin-bottom:4px; border:0; cursor:pointer; font-family:inherit;
              background:rgba(255,255,255,.06); color:var(--gray-3); font-size:10px; font-weight:700;
              letter-spacing:-.01em; line-height:1; padding:5px 0; width:34px; border-radius:999px;
              flex:0 0 auto; min-height:0; }
  .rail-ver:hover { background:rgba(255,255,255,.14); color:#fff; }
  .rail-ver.is-new { background:var(--warn); color:#1B2433; width:40px; padding:6px 0;
                     box-shadow:0 0 0 3px rgba(240,164,124,.22); }
  /* Slow, because a pulse that races reads as an error rather than an offer. */
  @media (prefers-reduced-motion: no-preference) {
    .rail-ver.is-new { animation: railVerPulse 2.4s ease-in-out infinite; }
  }
  @keyframes railVerPulse { 0%,100% { box-shadow:0 0 0 3px rgba(240,164,124,.22); }
                            50%     { box-shadow:0 0 0 6px rgba(240,164,124,.10); } }
  #rail-mobile { display: none; }   /* phone only; the rail owns these on desktop */
  /* W-1819: each app's own icon in the Apps menu; its letters when it has none */
  .app-ic { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; overflow: hidden; display: inline-flex;
            align-items: center; justify-content: center; background: var(--gray-2); font-size: 9.5px; font-weight: 700; }
  .app-ic img { width: 100%; height: 100%; object-fit: cover; }

  /* ─── ACTING AS ─── */
  /* Clay, because the style guide gives clay to "acting as admin": attention
     without alarm. Quiet when you are in your own view — a chip that is always
     clay stops saying "you have more power than usual right now". */
  .acting-chip { display:inline-flex; align-items:center; gap:9px; cursor:pointer;
                 background:var(--gray-2); border:1px solid var(--border);
                 color:var(--gray-4); border-radius:var(--radius-btn);
                 padding:5px 12px; font-size:13px; font-weight:600; font-family:inherit;
                 white-space:nowrap; transition:background .15s; }
  .acting-chip:hover { background:var(--border); }
  .acting-chip .acting-dot { width:7px; height:7px; border-radius:999px;
                 background:var(--gray-3); flex:0 0 auto; }
  .acting-chip .acting-out { font-weight:400; text-decoration:underline; }
  .acting-chip.is-acting { background:var(--yellow-lt); border-color:var(--yellow-lt);
                 color:var(--yellow); }
  .acting-chip.is-acting:hover { filter:brightness(.97); }
  .acting-chip.is-acting .acting-dot { background:var(--yellow); }
  @media (max-width: 768px) { .acting-chip .acting-out { display:none; } }

  /* ─── THE RAIL ─── */
  /* Quick links, not a fixed product list: the apps this person uses, in the
     order they set, plus a + that opens the drawer. It never collapses, so you
     always know which Den you are in. */
  .rail-app { position: relative; width: 40px; height: 40px; border-radius: var(--radius);
              display: flex; align-items: center; justify-content: center;
              cursor: pointer; flex: 0 0 auto; background: rgba(255,255,255,.06);
              color: var(--gray-3); font-weight: 700; font-size: 13px; overflow: hidden;
              transition: background .15s; }
  .rail-app:hover { background: rgba(255,255,255,.13); }
  .rail-app img   { width: 100%; height: 100%; object-fit: cover; }
  .rail-app.active::before { content:''; position: absolute; left: -12px; top: 9px;
              width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: var(--olive); }
  .rail-add { width: 40px; height: 40px; border-radius: var(--radius); flex: 0 0 auto; cursor: pointer;
              border: 1.5px dashed rgba(255,255,255,.22); color: rgba(255,255,255,.45);
              background: none; display: flex; align-items: center; justify-content: center;
              font-size: 17px; line-height: 1; transition: all .15s; }
  .rail-add:hover { border-color: rgba(255,255,255,.45); color: rgba(255,255,255,.8); }
  .rail-sep { width: 28px; height: 1px; background: rgba(255,255,255,.24); margin: 11px 0; flex: 0 0 auto; }

  /* ─── SIDEBAR ─── */
  .sidebar-logo { padding: 16px 16px 12px; display: flex; align-items: center; gap: 10px; }
  /* The mark moved to the rail, where it goes Home. Repeating it here would be
     two marks on one surface, which the style guide forbids. */
  .sidebar-logo img { display: none; }
  .sidebar-logo-text { display: flex; flex-direction: column; }
  .sidebar-logo-text .brand { color: var(--menu-ink-strong); font-weight: 700; font-size: 17px; letter-spacing: -0.022em; line-height:1.2; }
  .sidebar-logo-text .org { color: var(--menu-ink-2); font-size: 13px; font-weight: 400;
                             letter-spacing: 0; text-transform: none; margin-top: 1px; }
  .nav-group { padding: 6px 0; }
  .nav-search-hit { background: var(--menu-active); border-radius: var(--radius-btn); }
  .ad-more-item { padding: 9px 11px; border-radius: var(--radius-btn); font-size: 13px; cursor: pointer; white-space: nowrap; }
  .ad-more-item:hover { background: var(--gray-1); }
  /* Anything scrollable sideways shows a thin bar, so it looks scrollable */
  /* .table-wrap was missing from this list, and macOS draws overlay scrollbars
     that take no height and fade away — so Record Review sat there with 96px of
     its own columns past the right edge, COMP-OFF cut off mid-word, and nothing
     on screen saying it could be scrolled at all. The data was reachable; you
     just had to guess it was there. */
  .auto-hscroll::-webkit-scrollbar, #content::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
  #content [style*="overflow-x"]::-webkit-scrollbar { height: 6px; -webkit-appearance: none; }
  .auto-hscroll::-webkit-scrollbar-thumb, #content::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb,
  #content [style*="overflow-x"]::-webkit-scrollbar-thumb { background: var(--gray-3); border-radius: 3px; }
  /* Belt and braces: a scroll container that actually overflows keeps a hairline
     down its right edge, because an overlay scrollbar is invisible until touched. */
  .table-wrap { scrollbar-width: thin; }
  .scroll-hint { font-size: 12px; color: var(--gray-4); padding: 8px 16px 0; }
  /* Meeting minutes editor: show the prompt only while it's empty */
  [contenteditable][data-ph]:empty:before { content: attr(data-ph); color: var(--gray-4); opacity:.75; }
  [contenteditable][data-ph]:focus:before { content: none; }
  [contenteditable] h4 { font-size: 14px; font-weight: 700; margin: 8px 0 4px; }
  [contenteditable] ul, [contenteditable] ol { padding-left: 20px; margin: 6px 0; }
  .nav-group-label:hover { color: var(--menu-ink); }
  /* Two shapes for one number, because the menu has two widths. Open, it sits
     at the end of the row where a count belongs; collapsed, it rides the icon,
     because there is no row left to sit at the end of.
     Moss, not red: the guide gives moss to "your turn" and red to unread. */
  .nav-n   { margin-left:auto; font-size:11px; font-weight:700; line-height:1;
             background:var(--olive); color:var(--green-lt); border-radius:999px;
             padding:2px 7px; font-variant-numeric:tabular-nums; flex:0 0 auto; }
  .nav-item .icon { position:relative; }
  .nav-dot { display:none; position:absolute; top:-4px; right:-6px; min-width:15px; height:15px;
             padding:0 3px; border-radius:999px; background:var(--olive); color:var(--green-lt);
             font-size:9.5px; font-weight:700; line-height:15px; text-align:center;
             border:1.5px solid var(--menu-bg); font-variant-numeric:tabular-nums; }
  body.menu-closed .nav-n   { display:none; }
  body.menu-closed .nav-dot { display:block; }

  .nav-group-label { padding: 14px 16px 4px; font-size: 11px; font-weight: 700;
                     letter-spacing: 0.09em; color: var(--menu-ink-2); text-transform: uppercase;
                     cursor: pointer; display: flex; align-items: center;
                     justify-content: space-between; user-select: none; }
  /* The selected row is a moss tint with no border. The 3px edge marker moved
     to the rail, where it says which product you are in — using it in both
     places made two different things look like the same thing. */
  .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
              color: var(--menu-ink); font-size: 14px; cursor: pointer;
              transition: background 0.15s, color 0.15s; border-radius: 10px;
              margin: 1px 12px; }
  .nav-item:hover { background: var(--menu-hover); color: var(--menu-ink-strong); }
  .nav-item.active { background: var(--menu-active); color: var(--menu-active-ink);
                     font-weight: 600; }

  /* ── WORKSPACE: pillar tabs, then Goals · Milestones · Tasks ───────── */
  .ws-strip { display:flex; gap:18px; align-items:baseline; }
  .ws-stat { text-align:left; }
  .ws-stat-v { font-size:16px; font-weight:700; line-height:1.1; }
  .ws-stat-v.is-bad { color: var(--danger); }
  .ws-stat-l { font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-4); }

  .ws-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; margin-bottom:0; overflow-x:auto; }
  .ws-tab { text-align:left; border:1px solid var(--border); border-bottom:none; background:var(--gray-1);
            border-radius:10px 10px 0 0; padding:9px 12px 8px; cursor:pointer; min-width:150px;
            display:flex; flex-direction:column; gap:6px; color:var(--gray-4); }
  .ws-tab:hover { background:var(--card-bg,#fff); }
  .ws-tab.is-on { background:var(--card-bg,#fff); color:var(--pc); border-color:var(--pc);
                  box-shadow:inset 0 3px 0 var(--pc); }
  .ws-tab-h { display:flex; align-items:center; gap:7px; min-width:0; }
  .ws-tab-ic { display:inline-flex; font-size:15px; flex:0 0 auto; }
  .ws-tab-t { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ws-tab-b { display:flex; align-items:center; gap:7px; }
  .ws-tab-b b { font-size:10.5px; font-weight:600; flex:0 0 auto; }
  .ws-tab .ws-bar span { background:var(--pc); }

  .ws-bar { flex:1; min-width:26px; height:5px; border-radius:3px; background:var(--gray-2); overflow:hidden; display:block; }
  .ws-bar span { display:block; height:100%; background:var(--info); border-radius:3px; transition:width .2s; }
  .ws-bar.c2 span { background:#7F77DD; }

  .ws-banner { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; margin-bottom:12px;
               border:1px solid var(--pc); border-top:none; border-radius:0 0 12px 12px;
               background:var(--gray-2); }
  .ws-banner-ic { font-size:22px; display:inline-flex; flex:0 0 auto; margin-top:1px; }
  .ws-banner-t { font-size:16px; font-weight:700; color:var(--pc); }
  /* No measure cap. 64ch left the description a tall narrow block at a third
     of the bar with the rest empty; Fiyana, 2026-10-02: "it's not stretching to
     the width of the page, it's folding and wrapping." It runs the bar's width. */
  .ws-banner-d { font-size:12.5px; color:var(--gray-4); line-height:1.5; margin-top:2px; }
  .ws-banner-n { font-size:12px; text-align:right; white-space:nowrap; flex:0 0 auto; }
  .ws-banner-p { font-size:26px; font-weight:700; color:var(--pc); flex:0 0 auto; line-height:1; }

  .ws-crumb { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:10px; font-size:12.5px; }
  .ws-cr { display:inline-flex; align-items:center; gap:6px; color:var(--gray-4); }
  .ws-cr.is-on { color:var(--text); font-weight:600; cursor:pointer; }
  .ws-cr-s { color:var(--gray-3); }
  .ws-dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:var(--gray-3); }
  .ws-dot.c1 { background:var(--info); } .ws-dot.c2 { background:#7F77DD; } .ws-dot.c3 { background:#2F5A3A; }

  /* columns come from _wsGrid() inline — one definition instead of eight rules */
  .ws-wrap { display:grid; gap:10px; align-items:start; }
  .ws-col { background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:var(--radius);
            min-width:0; display:flex; flex-direction:column; max-height:calc(100vh - 260px); }
  .ws-col.is-narrow { cursor:pointer; align-items:center; padding:12px 0; max-height:none; }
  .ws-col.is-narrow:hover { background:var(--gray-1); }
  .ws-col-v { writing-mode:vertical-rl; font-size:10.5px; font-weight:800; letter-spacing:.08em;
              text-transform:uppercase; color:var(--gray-4); white-space:nowrap; }
  .ws-col-h { display:flex; align-items:center; gap:7px; padding:10px 12px; border-bottom:1px solid var(--border); flex:0 0 auto; }
  .ws-col-t { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--gray-4); }
  .ws-scope { font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:40ch; }
  .ws-n { font-size:10.5px; color:var(--gray-4); background:var(--gray-1); border-radius:var(--radius-btn); padding:1px 7px; flex:0 0 auto; }
  .ws-col-b { overflow-y:auto; padding:8px; flex:1 1 auto; }
  .ws-col-tasks .ws-col-b { padding:0; }
  .ws-hint { font-size:11.5px; color:var(--gray-4); }
  .ws-q { width:170px; font-size:12.5px; padding:6px 9px; height:auto; min-height:0; }

  .ws-card { border:1px solid transparent; border-radius:10px; padding:9px 10px; margin-bottom:5px; cursor:pointer; }
  .ws-card:hover { background:var(--gray-1); }
  .ws-card.is-on { background:var(--green-lt,#eef3e8); border-color:var(--green,#26482F); }
  .ws-card.is-sel { background:var(--green-lt,#eef3e8); }
  .ws-card-top { display:flex; align-items:flex-start; gap:7px; }
  /* Row actions stay quiet until the card is pointed at, but never fully
     invisible — a control at zero opacity is a control nobody knows exists. */
  .ws-acts { display:flex; gap:1px; margin-left:auto; flex:0 0 auto; opacity:.3; transition:opacity .12s; }
  .ws-card:hover .ws-acts, .ws-card.is-on .ws-acts { opacity:1; }
  .ws-card-t { flex:1; min-width:0; font-size:13px; font-weight:600; line-height:1.35; }
  .ws-card-t.is-done { text-decoration:line-through; color:var(--gray-4); }
  .ws-card-m { font-size:11px; color:var(--gray-4); margin-top:5px; }
  .ws-warn { color:var(--yellow-dk); margin-top:2px; }   /* was the light clay literal: 2.16:1 on the dark card */
  .ws-meter { display:flex; align-items:center; gap:7px; margin-top:7px; }
  .ws-pct, .ws-frac { font-size:11px; font-weight:600; color:var(--gray-4); flex:0 0 auto; }
  .ws-av-none { width:20px; text-align:center; color:var(--gray-3); flex:0 0 auto; }
  .ws-risk { color: var(--danger); font-size:10px; flex:0 0 auto; }
  .ws-none { text-align:center; padding:34px 16px; color:var(--gray-4); font-size:12.5px; line-height:1.6; }

  .ws-filters { display:flex; gap:5px; flex-wrap:wrap; padding:8px 12px; border-bottom:1px solid var(--border); flex:0 0 auto; }
  .ws-filters .chip-btn { font-size:11.5px; padding:4px 10px; }
  .ws-trow { display:grid; grid-template-columns:26px 22px minmax(0,1fr) 22px 128px 104px 78px 34px;
             align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); font-size:13px; }
  .ws-trow:hover { background:var(--gray-1); }
  .ws-trow.is-sel { background:var(--green-lt,#eef3e8); }
  .ws-thdr { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--gray-4); position:sticky; top:0;
             background:var(--card-bg,#fff); z-index:2; }
  .ws-thdr:hover { background:var(--card-bg,#fff); }
  .ws-own { display:flex; align-items:center; gap:6px; min-width:0; }
  .ws-own span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ws-cell { min-width:0; font-size:12px; }
  .ws-cell.is-late { color: var(--danger); font-weight:600; }
  .ws-under { display:block; font-size:10.5px; color:var(--gray-4); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ws-title { min-width:0; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  .ws-title:hover { text-decoration:underline; }
  .ws-title.is-done { text-decoration:line-through; color:var(--gray-4); }

  .ws-cb { width:15px; height:15px; margin:0; flex:0 0 auto; }
  .ws-tick { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--line); cursor:pointer; flex:0 0 auto;
             display:inline-flex; align-items:center; justify-content:center; font-size:10px; color:#fff; margin-top:1px; }
  .ws-tick.is-done { background:var(--green,#26482F); border-color:var(--green,#26482F); }
  .ws-ic { border:none; background:none; cursor:pointer; padding:2px 5px; border-radius:var(--radius-btn); color:var(--gray-4); line-height:1; font-size:13px; }
  .ws-ic:hover { background:var(--gray-2); color:var(--text); }
  .ws-addrow { display:flex; align-items:center; gap:12px; padding:8px 12px; color:var(--gray-4);
               cursor:pointer; font-size:12.5px; }
  .ws-addrow:hover { color:var(--green-dk,#26482F); background:var(--gray-1); }
  .ws-or { margin-left:auto; text-decoration:underline; text-underline-offset:2px; font-size:11.5px; }
  .ws-or:hover { color:var(--green-dk,#26482F); }

  /* Editors read as text until touched — appearance:none removes the chevron
     that turned a column of owner cells into a column of grey boxes. */
  .ws-inline { border:1px solid transparent; background:none; font-size:11.5px; padding:2px 4px; border-radius:var(--radius-btn);
               color:var(--text); height:auto; min-height:0; width:auto; max-width:96px;
               appearance:none; -webkit-appearance:none; cursor:pointer; }
  .ws-inline:hover, .ws-inline:focus { border-color:var(--green,#26482F); background:var(--card-bg,#fff); }
  .ws-inline.is-late { color: var(--danger); font-weight:600; }
  .ws-inline::-webkit-calendar-picker-indicator { opacity:0; width:0; }
  .ws-plain { font-size:11px; padding:2px 5px; border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer; color:transparent; }
  .ws-card:hover .ws-plain.is-empty { color:var(--gray-4); border-color:var(--border); }
  .ws-plain:hover { border-color:var(--green,#26482F); color:var(--green-dk,#26482F) !important; }
  .ws-mini { font-size:11px; }

  .ws-bulk { display:flex; align-items:center; gap:7px; flex-wrap:wrap; background:var(--green-dk,#26482F);
             color:var(--green-lt); padding:8px 11px; margin:8px; border-radius:var(--radius-btn); font-size:12.5px; flex:0 0 auto; }
  .ws-bulk select, .ws-bulk input { font-size:11.5px; padding:4px 6px; width:auto; height:auto; min-height:0; }
  .ws-bulk-x { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.5); color:#fff;
               border-radius:var(--radius-btn); font-size:11px; padding:3px 9px; cursor:pointer; }

  @media (max-width:1180px){
    .ws-wrap { grid-template-columns:1fr; }
    .ws-col { max-height:none; }
    .ws-trow { grid-template-columns:26px 22px minmax(0,1fr) 22px 96px 88px 66px 30px; }
  }

  /* Goals component polish (W-1467): retain the workspace layout and palette. */
  .ws-tab { padding:11px 12px 10px; gap:8px; }
  .ws-tab.is-on { box-shadow:inset 0 2px 0 var(--pc); }
  .ws-banner { padding:15px 17px; }
  .ws-banner-d { line-height:1.6; }
  .ws-col-h { min-height:44px; gap:8px; }
  .ws-card { padding:11px 10px; margin-bottom:6px; border-radius:8px; }
  .ws-card-t { line-height:1.45; }
  .ws-card-m { line-height:1.6; margin-top:6px; }
  .ws-card.is-on { border-color:color-mix(in srgb, var(--green) 55%, var(--border)); }
  /* Quiet until pointed at, never gone (wstest holds the floor above zero). The
     polish pass had lifted these to .65, which put three icons on every
     milestone and two on every task at reading weight: the screen read as
     controls with some content between them (W-1503, 2026-10-02). */
  .ws-acts { opacity:.35; align-items:center; gap:2px; }
  .ws-card:focus-within .ws-acts, .ws-trow:hover .ws-acts, .ws-trow.is-sel .ws-acts,
  .ws-trow:focus-within .ws-acts { opacity:1; }
  /* The bulk-select box is the second control on every row, beside the tick
     that marks it done. It stays quiet until a row is hovered or a selection
     has begun, when the whole column's boxes come forward together. */
  .ws-card .ws-cb, .ws-trow:not(.ws-thdr) .ws-cb { opacity:.35; transition:opacity .12s; }
  .ws-card:hover .ws-cb, .ws-trow:hover .ws-cb, .ws-cb:checked,
  .ws-col.has-sel .ws-cb { opacity:1; }
  @media (hover:none){ .ws-acts, .ws-card .ws-cb, .ws-trow .ws-cb { opacity:1; } }
  .ws-filters .chip-btn.is-zero { opacity:.5; }
  .ws-ic { min-width:24px; min-height:24px; display:inline-grid; place-items:center; }
  .ws-meter { gap:8px; margin-top:9px; }
  .ws-bar { height:4px; border-radius:4px; }
  .ws-bar span { border-radius:4px; }
  .ws-frac { font-variant-numeric:tabular-nums; }
  /* Keep controls together without squeezing labels into two lines. The scope
     wraps instead of becoming a tiny scroller with an injected scroll hint.
     !important overrides the scope's existing inline white-space declaration. */
  .ws-col-tasks > .ws-col-h { flex-wrap:wrap; }
  .ws-col-tasks .ws-scope { flex:1 1 140px; max-width:none; line-height:1.45;
                          white-space:normal !important; overflow-wrap:anywhere; }
  .ws-col-tasks .ws-q { flex:1 1 150px; min-width:110px; max-width:280px; min-height:32px; }
  .ws-col-tasks .ws-col-h .btn { min-height:32px; flex-shrink:0; white-space:nowrap; }
  .ws-filters { gap:6px; padding:10px 12px; }
  .ws-filters .chip-btn { padding:4px 9px; line-height:1.3; border-style:solid; }
  .ws-trow { min-height:53px; padding-top:11px; padding-bottom:11px; }
  .ws-thdr { min-height:31px; padding-top:7px; padding-bottom:7px; }
  .ws-title { line-height:1.5; }
  .ws-own { gap:5px; }

  /* ── MY PLAN (Goals → My plan) ──────────────────────────
     Three panes: a register on the left you mostly leave folded, the milestone
     you picked in the middle, and a board on the right carrying ONLY the
     starred few. The whole point is that the register is large and the board
     is small; anything that lets the board grow to the size of the register
     has broken it. Palette is the pillar set, same hexes the icons use. */
  .mp-bar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--card-bg,#fff);
            border:1px solid var(--border); border-radius:var(--radius); padding:9px 13px; margin-bottom:10px; }
  .mp-barline { font-size:11.5px; color:var(--gray-4); }
  .mp-pips { display:flex; align-items:center; gap:8px; margin-left:auto; }
  .mp-pip { width:16px; height:5px; border-radius:2px; background:var(--gray-2); }
  .mp-pip.is-on { background:var(--green,#26482F); }

  /* Collapsing, borrowed wholesale from the Workspace columns (.ws-col.is-narrow)
     because it is the same gesture on the same page and inventing a second one
     would be worse than the reuse. Once a focus is picked the register has done
     its job for the session; the board is what you work in, so both the rail
     and the task list fold to a spine you can click back open.
     Columns are set inline by _mpGrid() — one definition instead of four rules. */
  .mp-wrap { display:grid; gap:10px; align-items:start; }
  .mp-pane.is-narrow { cursor:pointer; align-items:center; padding:12px 0; max-height:none;
                       justify-content:flex-start; }
  .mp-pane.is-narrow:hover { background:var(--gray-1); }
  .mp-v { writing-mode:vertical-rl; font-size:10.5px; font-weight:800; letter-spacing:.08em;
          text-transform:uppercase; color:var(--gray-4); white-space:nowrap; }
  .mp-x { border:none; background:none; cursor:pointer; padding:2px 5px; border-radius:var(--radius-btn);
          color:var(--gray-4); line-height:1; font-size:13px; flex:0 0 auto; }
  .mp-x:hover { background:var(--gray-2); color:var(--text); }
  .mp-pane { background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:var(--radius);
             display:flex; flex-direction:column; min-width:0; max-height:calc(100vh - 250px); }
  .mp-scroll { overflow-y:auto; flex:1 1 auto; min-height:0; }

  .mp-filters { padding:10px 11px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:9px; flex:0 0 auto; }
  .mp-q { width:100%; font-size:12.5px; padding:6px 9px; height:auto; min-height:0; }
  .mp-chips { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
  .mp-chip { display:flex; align-items:center; gap:6px; border:1px solid var(--border); background:transparent;
             border-radius:999px; padding:3px 9px 3px 6px; cursor:pointer; font-size:11px; font-weight:600;
             color:var(--gray-4); line-height:1.5; }
  .mp-chip:hover { border-color:var(--line); }
  .mp-chip.is-on { color:var(--text); border-color:currentColor; }
  .mp-chip i { width:8px; height:8px; border-radius:2px; flex:0 0 auto; }
  .mp-chip b { font-weight:400; opacity:.6; font-variant-numeric:tabular-nums; }
  .mp-lenses { display:flex; gap:5px; }
  .mp-lens { flex:1; text-align:center; padding:5px 8px; border-radius:8px; font-size:11.5px; font-weight:600;
             cursor:pointer; background:transparent; color:var(--gray-4); border:1px solid var(--border); white-space:nowrap; }
  .mp-lens.is-on { background:var(--green,#26482F); color:var(--green-lt); border-color:var(--green,#26482F); }

  .mp-group { display:flex; align-items:center; gap:8px; }
  .mp-group > u { text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.08em;
                  text-transform:uppercase; color:var(--gray-4); white-space:nowrap; }
  .mp-group > i { font-style:normal; flex:1; min-width:0; font-size:10.5px; color:var(--gray-4);
                  text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mp-gm { padding:4px 10px; border-radius:var(--radius-btn); font-size:11px; font-weight:600; cursor:pointer;
           background:transparent; color:var(--gray-4); border:1px solid var(--border); white-space:nowrap; }
  .mp-gm.is-on { background:var(--green,#26482F); color:var(--green-lt); border-color:var(--green,#26482F); }
  /* "No tasks" is not a third scope, it is a filter you lay over the scope —
     so it sits apart from Me/All rather than looking like a sibling of them. */
  .mp-lens.is-gap { flex:0 0 auto; margin-left:4px; border-style:dashed; }
  .mp-lens.is-gap.is-on { background:var(--yellow-lt); color:var(--yellow-dk); border-color:#F0A47C; border-style:solid; }
  .mp-scopenote { font-size:10.5px; line-height:1.45; color:var(--gray-4);
                  border-top:1px solid var(--border); padding-top:8px; }

  /* The focus set is a roster, not a list of cards. It used to sit at the top
     of the rail as five full milestone cards — a third copy of what the header
     pips, the middle pane and the board were all already saying, and 250px of
     it, in exactly the space you need to browse for the next star. It lives on
     the board now, because the board IS the focus set. */
  /* This row is the switcher for everything below it, so it is styled as tabs
     and it lives on the full-width header rather than inside the board pane.
     It spent one version at 124px inside the 531px board, where five chips
     truncated to "Financial r…" — unreadable, and with the register folded they
     are the only way to move between focus items. Full width fits five at
     220px on one line. */
  .mp-fchips { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
               border-bottom:1px solid var(--border); padding-bottom:11px; }
  .mp-fchips > u { text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.09em;
                   text-transform:uppercase; color:var(--gray-4); white-space:nowrap; margin-right:2px; }
  .mp-fchip { display:flex; align-items:center; gap:7px; max-width:220px; cursor:pointer;
              background:transparent; border:1px solid var(--border); color:var(--gray-4);
              border-radius:var(--radius-btn); padding:5px 5px 5px 10px; font-size:12px; font-weight:600; }
  .mp-fchip:hover { border-color:var(--green,#26482F); color:var(--text); }
  .mp-fchip.is-on { background:var(--green,#26482F); border-color:var(--green,#26482F); color:var(--green-lt); }
  .mp-fchip i { width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
  .mp-fchip span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mp-fchip b { font-weight:400; opacity:.7; font-variant-numeric:tabular-nums; flex:0 0 auto; }
  .mp-fchip u { text-decoration:none; flex:0 0 auto; width:17px; height:17px; border-radius:999px;
                display:flex; align-items:center; justify-content:center; font-size:12px; opacity:.65; }
  .mp-fchip u:hover { background:rgba(127,127,127,.28); opacity:1; }
  .mp-step { border:1px solid var(--border); background:transparent; color:var(--gray-4);
             border-radius:8px; width:24px; height:26px; cursor:pointer; font-size:12px; flex:0 0 auto; }
  .mp-step:hover:not(:disabled) { border-color:var(--green,#26482F); color:var(--text); }
  .mp-step:disabled { opacity:.35; cursor:default; }
  .mp-froom { font-size:11px; color:var(--gray-4); }

  .mp-ms { background:var(--card-bg,#fff); border:1px solid var(--border); border-left:3px solid var(--line);
           border-radius:3px 10px 10px 3px; padding:8px 9px; cursor:pointer; display:flex; flex-direction:column; gap:6px; }
  .mp-ms:hover { border-color:var(--line); }
  .mp-ms.is-on { background:var(--gray-1); border-color:var(--line); }
  .mp-ms-t { display:flex; align-items:flex-start; gap:8px; }
  .mp-ms-t span { flex:1; min-width:0; font-size:12px; font-weight:600; line-height:1.3; }
  .mp-star { flex:0 0 auto; font-size:12px; color:var(--gray-3); cursor:pointer; line-height:1; }
  .mp-star.is-on { color:var(--green-dk,#26482F); }
  .mp-ms-m { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--gray-4); }
  .mp-goal { display:flex; align-items:center; gap:5px; min-width:0; border:1px solid var(--border);
             border-radius:var(--radius-btn); padding:1px 6px; font-size:10px; font-weight:600; color:var(--gray-4); }
  .mp-goal span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:128px; }
  .mp-goal i { width:6px; height:6px; border-radius:2px; flex:0 0 auto; }
  .mp-bar-s { flex:1; height:4px; border-radius:999px; background:var(--gray-2); overflow:hidden; min-width:20px; }
  .mp-bar-s i { display:block; height:100%; }
  .mp-num { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .mp-late { color: var(--danger); font-weight:700; }
  .mp-nodate { color:var(--yellow-dk); font-weight:700; }

  .mp-bk { margin:0 8px 6px; }
  .mp-bk-h { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--radius-btn); cursor:pointer;
             border:1px solid var(--border); font-size:11.5px; font-weight:700; }
  .mp-bk-h:hover { border-color:var(--line); }
  .mp-bk-h.is-over { background:var(--danger-lt); border-color:#F7E3DE; color: var(--danger); }
  .mp-bk-h.is-wk { background:var(--green,#26482F); border-color:var(--green,#26482F); color:var(--green-lt); }
  .mp-bk-h.is-none { background:var(--yellow-lt); border-color:#F0A47C; color:var(--yellow-dk); }
  .mp-bk-h span { flex:1; min-width:0; } .mp-bk-h b { font-variant-numeric:tabular-nums; }
  .mp-bk-hint { padding:4px 10px 2px 29px; font-size:10.5px; color:var(--gray-4); }
  .mp-bk-b { padding:6px 0 2px; display:flex; flex-direction:column; gap:5px; }
  .mp-more { padding:7px 10px; text-align:center; font-size:11px; color:var(--gray-4); cursor:pointer;
             border:1px dashed var(--border); border-radius:var(--radius-btn); }
  .mp-more:hover { color:var(--green-dk,#26482F); border-color:var(--green,#26482F); }
  .mp-foot { margin:6px 8px 10px; padding:10px 11px; background:var(--gray-1); border:1px solid var(--border);
             border-radius:var(--radius); font-size:11px; line-height:1.55; color:var(--gray-4); }

  .mp-main { display:flex; flex-direction:column; gap:10px; min-width:0; }
  .mp-sel { background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px;
            display:flex; flex-direction:column; gap:12px; }
  .mp-crumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11.5px; color:var(--gray-4); }
  .mp-crumb i { width:7px; height:7px; border-radius:2px; flex:0 0 auto; }
  .mp-crumb em { font-style:normal; max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mp-sel-t { font-size:18px; font-weight:600; line-height:1.25; }
  .mp-stats { display:flex; align-items:stretch; gap:9px; flex-wrap:wrap; }
  .mp-stat { border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; display:flex;
             flex-direction:column; gap:1px; min-width:104px; }
  .mp-stat u { text-decoration:none; font-size:9.5px; font-weight:800; letter-spacing:.08em;
               text-transform:uppercase; color:var(--gray-4); }
  .mp-stat b { font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; }
  .mp-stat i { font-style:normal; font-size:10.5px; color:var(--gray-4); }
  .mp-stat.is-btn { cursor:pointer; } .mp-stat.is-btn:hover { border-color:var(--line); }
  /* 164 of 167 milestones have no date, so dating one has to be a click, not a
     trip to the edit modal. Presets because "a week" is the honest answer far
     more often than any particular Tuesday. */
  .mp-stat.is-editing { border-color:var(--green,#26482F); min-width:250px; }
  .mp-dateset { display:flex; align-items:center; gap:5px; margin-top:5px; flex-wrap:wrap; }
  .mp-dateset input { font-size:12px; padding:3px 6px; height:auto; min-height:0; width:auto; }
  .mp-pre { border:1px solid var(--border); background:transparent; color:var(--gray-4); border-radius:var(--radius-btn);
            padding:3px 7px; font-size:10.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
  .mp-pre:hover { border-color:var(--green,#26482F); color:var(--text); }
  .mp-pre.is-clear:hover { border-color: var(--danger); color: var(--danger); }
  .mp-stat.is-focus { background:var(--green-lt,#eef3e8); border-color:var(--green,#26482F); }
  .mp-stat.is-late { background:var(--danger-lt); border-color:#F7E3DE; } .mp-stat.is-late u, .mp-stat.is-late b { color: var(--danger); }

  .mp-draft { border:1px solid var(--border); background:var(--gray-1); border-radius:var(--radius); padding:9px 11px;
              display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .mp-draft input { flex:1; min-width:180px; border:none; outline:none; background:transparent; font-size:13px; padding:0; height:auto; min-height:0; }
  .mp-tag { font-size:9.5px; font-weight:800; letter-spacing:.07em; border-radius:var(--radius-btn); padding:3px 8px;
            background:var(--gray-2); color:var(--gray-4); flex:0 0 auto; }
  .mp-day { padding:4px 9px; border-radius:var(--radius-btn); font-size:11px; font-weight:600; cursor:pointer;
            background:transparent; color:var(--gray-4); border:1px solid var(--border); white-space:nowrap; }
  .mp-day.is-on { background:var(--green,#26482F); color:var(--green-lt); border-color:var(--green,#26482F); }

  /* stretch, not start: a short task list next to a tall board reads as a
     rendering accident rather than a deliberate pair of panes. */
  .mp-split { display:grid; gap:10px; align-items:stretch; }
  .mp-under-h { display:flex; align-items:baseline; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border);
                font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--gray-4); }
  .mp-under-h span { flex:1; } .mp-under-h b { font-weight:400; letter-spacing:0; font-variant-numeric:tabular-nums; }
  .mp-grp { display:flex; align-items:center; gap:9px; padding:7px 14px; background:var(--gray-1);
            border-bottom:1px solid var(--border); font-size:10px; font-weight:800; letter-spacing:.08em;
            text-transform:uppercase; color:var(--gray-4); }
  .mp-grp i { width:3px; height:12px; border-radius:999px; flex:0 0 auto; }
  .mp-row { display:flex; align-items:center; gap:9px; padding:9px 14px; border-bottom:1px solid var(--border); font-size:12.5px; }
  .mp-row:hover { background:var(--gray-1); }
  .mp-row .mp-rt { flex:1; min-width:0; line-height:1.35; cursor:pointer; }
  .mp-row .mp-rt:hover { text-decoration:underline; }
  .mp-row.is-done .mp-rt { text-decoration:line-through; color:var(--gray-4); }
  .mp-kind { font-size:9px; font-weight:800; letter-spacing:.06em; border-radius:5px; padding:2px 6px; flex:0 0 auto; }
  .mp-kind.is-task { background:var(--gray-2); color:var(--gray-4); }
  .mp-kind.is-mtg { background:#f1ecfd; color:#5b3ea6; }
  .mp-wait { font-size:10px; font-weight:700; color:var(--yellow-dk); background:var(--yellow-lt); border:1px solid #F0A47C;
             border-radius:5px; padding:1px 6px; white-space:nowrap; flex:0 0 auto; }
  .mp-empty { padding:20px 16px; display:flex; flex-direction:column; gap:11px; }
  .mp-empty-h { font-size:13px; font-weight:600; color: var(--danger); }
  .mp-empty-b { font-size:12px; line-height:1.6; color:var(--gray-4); }
  .mp-prompt { display:flex; align-items:center; gap:9px; border:1px dashed var(--border); border-radius:var(--radius-btn);
               padding:9px 11px; font-size:12px; color:var(--gray-4); }

  .ul-row { display:flex; align-items:center; gap:9px; padding:8px 14px;
            border-bottom:1px solid var(--border); font-size:12.5px; }
  .ul-row:hover { background:var(--gray-1); }
  .ul-row.is-sel { background:var(--green-lt,#eef3e8); }
  .ul-t { flex:1; min-width:0; line-height:1.35; cursor:pointer; overflow:hidden; text-overflow:ellipsis; }
  .ul-t:hover { text-decoration:underline; }
  .ul-t.is-done { text-decoration:line-through; color:var(--gray-4); }
  .ws-bulk select:disabled { opacity:.5; }

  .mp-board-h { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--border); }
  .mp-board-h .mp-bt { flex:1; min-width:0; }
  .mp-board-h .mp-bt div:first-child { font-size:13px; font-weight:600; }
  .mp-board-h .mp-bt div:last-child { font-size:11.5px; color:var(--gray-4); }
  .mp-modes { display:flex; gap:4px; background:var(--gray-1); border-radius:10px; padding:3px; flex:0 0 auto; }
  .mp-mode { padding:5px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; color:var(--gray-4); white-space:nowrap; }
  .mp-mode.is-on { background:var(--card-bg,#fff); color:var(--text); }
  .mp-cols { display:flex; gap:10px; align-items:flex-start; padding:12px; overflow-x:auto; }
  .mp-col { flex:0 0 198px; display:flex; flex-direction:column; gap:8px; }
  .mp-col-h { border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
  .mp-col-h.is-over { background:var(--danger-lt); border-color:#F7E3DE; color: var(--danger); }
  .mp-col-h.is-today { background:var(--green,#26482F); border-color:var(--green,#26482F); color:var(--green-lt); }
  .mp-col-h.is-none { background:var(--yellow-lt); border-color:#F0A47C; color:var(--yellow-dk); }
  .mp-col-h .mp-ch { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; }
  .mp-col-h .mp-ch span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mp-col-h .mp-cs { font-size:10.5px; opacity:.7; }
  .mp-card { background:var(--card-bg,#fff); border:1px solid var(--border); border-left:3px solid var(--line);
             border-radius:4px 11px 11px 4px; padding:8px 10px; display:flex; flex-direction:column; gap:7px; cursor:grab; }
  .mp-card:hover { border-color:var(--line); }
  .mp-card-h { display:flex; align-items:center; gap:6px; }
  .mp-card-t { font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
  .mp-card-m { display:flex; align-items:center; gap:7px; font-size:10.5px; color:var(--gray-4); }
  .mp-card-m span { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mp-drop { border:1px dashed var(--border); border-radius:var(--radius); padding:9px; text-align:center;
             font-size:11px; color:var(--gray-4); }
  .mp-drop.is-over { border-color:var(--green,#26482F); color:var(--green-dk,#26482F); background:var(--green-lt,#eef3e8); }
  .mp-board-f { display:flex; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid var(--border);
                font-size:11.5px; color:var(--gray-4); flex-wrap:wrap; }
  .mp-board-f span:last-child { margin-left:auto; }

  @media (max-width:1280px){
    .mp-wrap, .mp-split { grid-template-columns:1fr !important; }
    .mp-pane { max-height:none; }
    .mp-pane.is-narrow { display:none; }
  }

  /* ── TODAY (home) ──────────────────────────────────────── */
  /* Tones come from the design system, which is the same palette the icon set
     uses. Hand-mixed near-misses (#8A3A17 next to #C4705C) is how two parts of
     one screen end up almost matching. */
  .th-wrap { --t-red:#8C2D22; --t-amber:#8A3A17; --t-violet:#5C42A8; --t-blue:#2F6FB5;
             --t-green:#26492F; --t-line:#E3E7EC; }
  .th-split { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
  .th-main-col { min-width:0; }
  .th-rail { display:flex; flex-direction:column; gap:12px; position:sticky; top:8px; }
  .th-rail-c { background:var(--card-bg,#FDFCF6); border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; }
  .th-rail-h { font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
               color:var(--gray-4); margin-bottom:9px; }
  .th-tl.is-go { cursor:pointer; }
  .th-tl.is-go:hover .th-tl-t { text-decoration:underline; }

  /* my goals */
  .th-goal { padding:7px 0; cursor:pointer; border-top:1px solid var(--t-line); }
  .th-goal:first-of-type { border-top:none; }
  .th-goal:hover .th-goal-t { color:var(--green-dk,#1E6B3C); }
  .th-goal-t { font-size:12.5px; font-weight:500; line-height:1.35; display:flex; gap:6px; align-items:flex-start; }
  .th-goal-t svg { width:14px; height:14px; flex:0 0 auto; margin-top:1px; }
  .th-goal-bar { height:5px; border-radius:3px; background:var(--gray-2); overflow:hidden; margin:6px 0 4px; }
  .th-goal-bar span { display:block; height:100%; background:var(--t-blue); border-radius:3px; }
  .th-goal-n { font-size:11px; color:var(--gray-4); line-height:1.4; }

  /* who is not around */
  .th-pack { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; font-size:12.5px; }
  .th-pack:hover { color:var(--green-dk,#1E6B3C); }
  .th-pack svg { width:15px; height:15px; flex:0 0 auto; }
  .th-pack-l { flex:1; min-width:0; }
  .th-pack-av { display:inline-flex; }
  .th-pack-av img, .th-pack-av > span { margin-left:-6px; border:1.5px solid var(--card-bg,#FDFCF6); border-radius:50%; }
  .th-pack-n { font-size:11px; color:var(--gray-4); }

  /* the kind chip and the face on a row */
  .th-row .th-main { flex:1; min-width:0; }
  .th-kind { font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; flex:0 0 auto; }
  .th-k-ticket  { background:var(--yellow-lt); color:var(--t-amber); }
  .th-k-routine { background:var(--violet-lt); color:var(--t-violet); }
  .th-k-late    { background:var(--danger-lt); color:var(--t-red); }
  .th-who { display:inline-flex; flex:0 0 auto; }
  .th-grp-note { margin-left:auto; font-size:10.5px; color:var(--gray-4); font-weight:400; text-transform:none; letter-spacing:0; }

  /* the header nudge */
  .mark-pill { --t-red:#8C2D22; --t-green:#26492F; --t-amber:#8A3A17;
               display:inline-flex; align-items:center; gap:7px; background:var(--danger-lt); border:1px solid #F7E3DE;
               border-radius:999px; padding:5px 13px 5px 11px; cursor:pointer; text-align:left; line-height:1.2; }
  .mark-pill:hover { background:var(--danger-lt); }
  /* clocked out and clocked in are opposite states, so they must not be the
     same colour — red is "you have not started", green is "you are running" */
  .mark-pill.is-go { background:var(--green-lt); border-color:#8CC79A; }
  .mark-pill.is-go:hover { background:#9BD3A6; }
  .mark-pill.is-go b, .mark-pill.is-go .mark-sub { color:var(--t-green); }
  .mark-pill.is-go .mark-dot { background:var(--t-green); animation:mark-beat 2s ease-in-out infinite; }
  .mark-pill.is-on { background:var(--yellow-lt); border-color:#FAC775; }
  .mark-pill.is-on:hover { background:var(--yellow-lt); }
  .mark-pill.is-on b, .mark-pill.is-on .mark-sub { color:var(--t-amber); }
  .mark-pill.is-on .mark-dot { background:var(--t-amber); animation:mark-beat 2s ease-in-out infinite; }
  .mark-pill.is-done { background:var(--gray-1); border-color:var(--border); cursor:pointer; }
  .mark-pill.is-done b, .mark-pill.is-done .mark-sub { color:var(--gray-4); }
  .mark-pill.is-done .mark-dot { background:var(--gray-3); }
  .mark-pill.is-wait { opacity:.6; cursor:default; }
  @keyframes mark-beat { 0%,100%{opacity:1} 50%{opacity:.35} }
  @media (prefers-reduced-motion:reduce){ .mark-pill .mark-dot { animation:none; } }
  .mark-pill b { font-size:12.5px; color:var(--t-red); font-weight:600; white-space:nowrap; }
  .mark-dot { width:8px; height:8px; border-radius:50%; background:var(--t-red); flex:0 0 auto; }

  @media (max-width:1080px){
    .th-split { grid-template-columns:1fr; }
    .th-rail { position:static; flex-direction:row; flex-wrap:wrap; }
    .th-rail-c { flex:1 1 280px; }
  }
  @media (max-width:640px){ .th-rail { flex-direction:column; } }
  /* On a phone the pill shares one row with the brand, the status pill, the
     bell and the avatar. The shift range is the first thing to go; the time you
     clocked in and the running total are the point of it. */
  @media (max-width:768px){
    #mark-pill-mob .mark-pill { padding:4px 9px; gap:5px; min-height:34px; }
    #mark-pill-mob .mark-pill b { font-size:11.5px; }
  }
  /* The row is hamburger, logo, brand, clock pill, status, bell, avatar — on a
     390px phone that does not fit. The pill was flex-shrink:0 and the brand had
     no overflow, so the logo was pushed out from under its own container and
     the pill sat on top of it. Now the pill gives way first, the brand clips
     rather than overflowing, and the brand text goes before the logo does. */
  @media (max-width:768px){
    .mobile-topbar { gap:8px; }
    .mtb-brand { overflow:hidden; }
    #mark-pill-mob { flex:0 1 auto; overflow:hidden; }
    #mark-pill-mob .mark-pill { max-width:100%; overflow:hidden; }
  }
  /* This used to be hidden below 480px, on the reasoning that the brand name was
     the least useful thing on the row. That reasoning expired: the element has
     not held the brand name for a long time -- navigate() writes the PAGE name
     into it -- and as of 2026-09-17 the page hero is gone, so this is the only
     place a phone says which page you are on. It keeps its ellipsis and gives
     way before the logo does, so a long name clips instead of shoving. */
  @media (max-width:480px){ .mobile-topbar-title { min-width:0; } }
  
  /* #88 (3b): the greeting and the task tabs share one row, so the day blocks
     below start higher up the page. */
  .th-head { display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px; flex-wrap:wrap; margin-bottom:12px; }
  .th-head .th-strip { margin-bottom:0; }
  .th-head-r { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

  /* A day. Two labelled lists inside it: what is fixed, then what is due. */
  .th-day { background:var(--card-bg,#fff); border:1px solid var(--border);
    border-radius:var(--radius); padding:11px 13px 9px; margin-bottom:10px; }
  .th-day.is-today { border-color:var(--edge-today); background:var(--row-today); }
  .th-day.is-over  { border-color:var(--edge-over);  background:var(--row-over); }
  .th-day-h { display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
  .th-day-n { font-size:13.5px; font-weight:800; }
  .th-day-s { font-size:10.5px; color:var(--gray-4); }
  .th-day-c { font-size:10.5px; font-weight:700; color:var(--gray-4);
    background:var(--gray-2); border-radius:999px; padding:1px 8px; }
  .th-day.is-today .th-day-c { color:var(--green-dk); background:var(--pill-today); }
  /* The two headings are the whole point of 3b, so they read as headings and
     not as another row: uppercase, small, and never bold enough to compete
     with the day itself. */
  .th-day-lbl { font-size:9px; font-weight:800; letter-spacing:.08em;
    text-transform:uppercase; color:var(--gray-4); margin:7px 0 3px; }
  .th-day-lbl:first-of-type { margin-top:0; }
  .th-day-free { font-size:11.5px; color:var(--gray-3); padding:3px 0 4px; }
  /* The rows inside a day are tighter than the rows in a card list, because a
     day is a run of short lines rather than a set of things to weigh up. What
     made it look busy was three separate borders competing on every row: the
     block's own edge, a 3px colour bar per row, and a divider between rows.
     The section heading already says what kind each row is, so the bar goes;
     the divider stays but only between rows, not under the last one. */
  .th-day .th-row { padding:5px 0; border-left:none !important; padding-left:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
  .th-day .th-row:last-child { border-bottom:none; }
  .th-day .th-main { flex-direction:row; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .th-day .th-title { font-size:12.5px; }
  /* "all day" on its own line doubled the height of every visit for no extra
     information, and the week ahead is almost entirely all-day visits. */
  .th-day .th-sub { font-size:10.5px; }
  .th-day .th-ic { font-size:11px; }
  .th-day-more { font-size:11.5px; font-weight:600; color:var(--danger);
    cursor:pointer; padding:5px 0 2px; }
  .th-day-more:hover { text-decoration:underline; }

  /* Folds open by class, not by repaint. */
  .th-foldwrap { background:var(--card-bg,#fff); border:1px solid var(--border);
    border-radius:var(--radius); margin-bottom:10px; overflow:hidden; }
  .th-fold { display:flex; align-items:center; gap:9px; padding:10px 13px;
    font-size:12.5px; color:var(--gray-4); cursor:pointer; user-select:none; }
  .th-fold:hover { background:var(--gray-1); }
  .th-fold-n { font-size:11px; color:var(--gray-4); }
  .th-fold-cv { font-size:13px; opacity:.55; transition:transform .14s ease; }
  .th-foldwrap.is-open .th-fold-cv { transform:rotate(90deg); }
  .th-fold-body { display:none; padding:0 13px 10px; }
  .th-foldwrap.is-open .th-fold-body { display:block; }
  .th-foldwrap.is-open .th-day:last-child { margin-bottom:0; }

  /* One line, so it does not need a card's worth of padding. */
  .th-shift { padding-bottom:9px; }
  .th-shift-l { font-size:12.5px; color:var(--text); }

  .th-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:14px; }
  .th-greet { font-size:19px; font-weight:700; letter-spacing:-.01em; }
  .th-facts { font-size:12.5px; color:var(--gray-4); display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
  .th-facts svg { opacity:.7; margin-right:2px; }
  .th-dot { opacity:.4; }
  .th-new-btn { font:600 13px/1 inherit; padding:9px 14px; border-radius:var(--radius-btn);
                white-space:nowrap; display:inline-flex; align-items:center; gap:2px; }
  .th-row { display:flex; align-items:flex-start; gap:9px; padding:9px 0; border-bottom:1px solid var(--border); }
  .th-row:last-child { border-bottom:none; }
  .th-row:hover { background:var(--gray-1); }
  .th-ic { flex:0 0 auto; margin-top:1px; opacity:.8; }
  .th-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .th-title { font-size:13.5px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
  .th-sub { font-size:11.5px; color:var(--gray-4); line-height:1.35; }
  .th-right { flex:0 0 auto; margin-top:1px; }
  .th-empty { font-size:12.5px; color:var(--gray-4); padding:14px 2px 16px; text-align:center; }
  /* A tab or a view toggle is a STATE, not the thing that expires. Twenty-three
     of them wore btn-primary for "selected", which is why three filled greens
     could sit on one screen and the guide's "one filled button per screen"
     meant nothing. This is the guide's own selected-row treatment — moss tint,
     moss ink, no fill — so the filled button goes back to being the action. */
  .btn.btn-seg-on { background:var(--menu-active); color:var(--menu-active-ink);
                    border:1px solid transparent; font-weight:700; }
  .btn.btn-seg-on:hover { background:var(--menu-active); filter:brightness(.97); }

  .th-seg { display:inline-flex; background:var(--gray-1); border:1px solid var(--border);
            border-radius:var(--radius-btn); padding:2px; gap:2px; }
  .th-seg-o { border:none; background:none; cursor:pointer; border-radius:var(--radius-btn);
              padding:6px 12px; font:600 12.5px/1 inherit; color:var(--gray-4);
              display:inline-flex; align-items:center; gap:6px; }
  .th-seg-o.on { background:var(--card-bg,#fff); color:var(--text);
                 box-shadow:0 1px 2px rgba(0,0,0,.08); }
  .th-seg-n { font-size:10.5px; font-weight:700; background:var(--gray-2);
              color:var(--gray-4); border-radius:var(--radius-btn); padding:1px 6px; }
  .th-seg-o.on .th-seg-n { background:var(--green-tint,#eef3e8); color:var(--green-dk,#26482F); }
  .th-day .card-body { padding-top:10px; padding-bottom:10px; }
  .th-grp { display:flex; align-items:center; gap:8px; padding:14px 0 6px; }
  .th-grp:first-child { padding-top:4px; }
  .th-grp-bar { width:3px; height:13px; border-radius:2px; flex:0 0 auto; }
  .th-grp-lbl { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
  .th-grp-n { font-size:10.5px; color:var(--gray-4); background:var(--gray-1);
              border-radius:var(--radius-btn); padding:1px 7px; font-weight:700; }
  .th-later { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--gray-4);
              border:1px dashed var(--border); border-radius:var(--radius-btn); padding:9px 12px;
              margin-bottom:14px; cursor:pointer; }
  .th-later:hover { border-color:var(--green,#26482F); color:var(--text); }
  @media (max-width:768px){
    .th-wrap { max-width:none; }
    .th-greet { font-size:17px; }
    .th-strip { gap:2px 10px; margin-bottom:10px; }
    .th-facts { font-size:11.5px; gap:5px; }
    .th-wrap .card { margin-bottom:10px !important; border-radius:10px; }
    .th-wrap .card-header { padding:8px 12px; background:none; }
    .th-wrap .card-body { padding:4px 12px 10px; }
    .th-row { padding:8px 0; }
    .th-title { font-size:13px; }
    .th-grp { padding:11px 0 5px; }
    .th-seg-o { padding:6px 10px; font-size:12px; min-height:40px; }   /* was a 28px tap target */
    /* The tab bar's centre button is + New and does the same job, so the header
       carried a second one. Dropping it here gives the row back to the task
       filters, which is what the space is actually short of.
       Two classes on purpose: .btn sets display:inline-flex in this same
       breakpoint about 490 lines below, and at equal specificity the later
       rule wins. This is the third time in this file that a rule was correct
       and simply out-ranked. */
    .btn.th-new-btn { display: none; }
    /* Same reason: the bottom bar's Tasks goes to the same place, so the link
       above the list was a second door spending a row on itself. */
    #th-all-link { display: none; }
  }

  /* Each destination carries its own colour, sat in a soft disc of the same
     hue. The disc gives the glyph a consistent footprint so a busy icon and a
     sparse one still line up, and it is what you actually lock onto scanning. */
  /* Artwork cannot take a colour the way a line icon can, so an inactive item
     is dimmed and slightly drained and the active one comes up to full. That
     keeps "you are here" readable without touching the drawings. */
  .nav-item .icon.art { background: none !important; width: 26px; height: 26px; }
  .nav-item .icon.art svg { width: 24px; height: 24px; display: block;
                            filter: saturate(.9) opacity(.86); transition: filter .15s; }
  .nav-item:hover .icon.art svg { filter: saturate(1) opacity(.96); }
  .nav-item.active .icon.art svg { filter: saturate(1.06) opacity(1); }
  .nav-item .icon { font-size: 15px; width: 24px; height: 24px; flex: 0 0 auto;
                    display: inline-flex; align-items: center; justify-content: center;
                    border-radius: var(--radius-btn); color: var(--h, var(--menu-ink));
                    background: color-mix(in srgb, var(--h, #fff) 16%, transparent);
                    transition: background .15s, color .15s; }
  .nav-item .icon svg { width: 15px; height: 15px; opacity: 1; }
  .nav-item:hover .icon { background: color-mix(in srgb, var(--h, #fff) 26%, transparent); }
  /* Active fills the disc solid and drops the glyph out in the sidebar's own
     dark, so "where am I" is still answered by weight, not only by hue. */
  .nav-item.active .icon { background: transparent; color: inherit; }
  .nav-item.active .icon svg { opacity: 1; }

  /* ─── TOPBAR ─── */
  /* Gradient: RESQ forest green → amber — left to right, like dawn through canopy */
  #topbar { border-top: 3px solid var(--yellow); border-image: linear-gradient(90deg, var(--green-dk) 0%, var(--green) 38%, var(--yellow) 100%) 1; }
  /* The page name no longer eats the whole bar: the acting-as chip sits
     beside it, and the free space goes between them and the account
     controls rather than in front of the chip. */
  .topbar-title { font-size: 16px; font-weight: 700; color: var(--text); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
  .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sidebar-bg);
            color: var(--yellow); display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 13px; border: 2px solid var(--yellow); }
  .role-badge { font-size: 11px; background: var(--yellow-lt); color: var(--yellow-dk);
                padding: 2px 8px; border-radius: var(--radius); font-weight: 700; }
  .notif-count { position: absolute; top: 2px; right: 2px; background: var(--danger); color: var(--danger-lt);
                 font-size: 9px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px;
                 display: flex; align-items: center; justify-content: center; padding: 0 3px; }
  .notif-hdr { display: flex; align-items: center; justify-content: space-between;
               padding: 12px 14px; border-bottom: 1px solid var(--border); }
  .notif-hdr-title { font-weight: 700; font-size: 13px; }
  .notif-mark-all { font-size: 11px; color: var(--green); cursor: pointer; }
  .notif-list { max-height: 360px; overflow-y: auto; }
  .notif-item { padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer;
                transition: background 0.1s; display: flex; gap: 10px; align-items: flex-start; }
  .notif-item:hover { background: var(--gray-1); }
  .notif-item.unread { background: var(--yellow-lt); }
  .notif-item.unread:hover { background: #fff3cd; }
  .notif-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; display:flex; align-items:flex-start; }
  .notif-icon svg { width: 18px; height: 18px; }
  /* Placeholders filled from the shared set once the page is parsed — these sit
     in static markup, where a ${} would print as text. */
  .sd-ic { display: inline-flex; align-items: center; flex: 0 0 auto; }
  .sd-ic svg { display: block; }
  .notif-body { flex: 1; min-width: 0; }
  .notif-msg { font-size: 12px; color: var(--text); line-height: 1.4; }
  .notif-time { font-size: 10px; color: var(--gray-3); margin-top: 2px; }
  .notif-empty { padding: 24px; text-align: center; color: var(--gray-3); font-size: 13px; }
  /* ─── PROFILE EDIT FORM ─── */
  .profile-edit-section { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
                          padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
  .profile-edit-section h3 { font-size: 11px; font-weight: 800; text-transform: uppercase;
                              letter-spacing: .05em; color: var(--green); margin-bottom: 12px;
                              padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
  .profile-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
  .profile-save-bar { display: flex; justify-content: flex-end; margin-top: 16px; gap: 8px; align-items: center; }
  .profile-saved-msg { font-size: 12px; color: var(--green); font-weight: 600; display: none; }
  .pf-label { font-size: 10px; font-weight: 700; color: var(--gray-4); text-transform: uppercase;
              letter-spacing: .05em; display: block; margin-bottom: 4px; }

  /* ─── #156. READ FIRST ───
     Fiyana, 2026-09-08: "Every field looks like it's editable right now. We're
     in edit view directly instead of showing the information and then giving an
     edit option if needed."
     So a section shows its VALUES, and becomes a form only when somebody asks
     it to. Both are rendered and CSS picks -- which keeps every input id exactly
     where it was, so the save path and the pending-request markers underneath
     each field carry on working untouched. */
  .pf-f { min-width: 0; }
  .pf-read { font-size: 13.5px; color: var(--text); line-height: 1.5; padding: 4px 0 7px;
             border-bottom: 1px solid var(--border); min-height: 27px;
             overflow-wrap: anywhere; white-space: pre-wrap; }
  .pf-read.is-blank { color: var(--gray-3); }
  .profile-edit-section .pf-edit { display: none; }
  .profile-edit-section.is-editing .pf-read { display: none; }
  .profile-edit-section.is-editing .pf-edit { display: block; }
  /* Nothing to save until something can be changed. */
  .profile-edit-section .profile-save-bar { display: none; }
  .profile-edit-section.is-editing .profile-save-bar { display: flex; }
  .pf-sec-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
              padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .pf-sec-h h3 { margin: 0; padding: 0; border: 0; flex: 0 1 auto; }
  /* The glyph fills its own box, so the space after it disappears against an
     uppercase, letter-spaced heading. Given its own room instead. */
  .pf-sec-ic { margin-right: 7px; font-size: 13px; letter-spacing: 0; }
  .pf-sec-note { font-size: 11px; color: var(--gray-3); font-weight: 400; }
  .pf-ask { margin-left: auto; flex: 0 0 auto; background: none; border: 1px solid var(--border);
            color: var(--green-dk); font-size: 11.5px; font-weight: 700; border-radius: 8px;
            padding: 4px 11px; cursor: pointer; white-space: nowrap; }
  .pf-ask:hover { background: var(--gray-1); }
  .profile-edit-section.is-editing .pf-ask { color: var(--gray-4); }
  @media (max-width: 720px) {
    .pf-sec-h { flex-wrap: wrap; }
    .pf-ask { margin-left: 0; }
  }

  /* ─── CARDS ─── */
  .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
          border: 1px solid var(--border); }
  .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border);
                 display: flex; align-items: center; justify-content: space-between; }
  .card-title { font-weight: 700; font-size: 14px; }
  .card-body { padding: 20px; }

  /* ─── BUTTONS ─── */
  .btn { padding: 9px 18px; font-weight: 600; border-radius: 8px; font-size: 13px;
         transition: all 0.15s; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 6px; }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn-primary { background: var(--green); color: var(--green-lt); font-weight: 700;
                 box-shadow: 0 1px 4px rgba(38,72,47,0.22); }
  .btn-primary:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(38,72,47,0.3); }
  .btn-secondary { background: var(--gray-2); color: var(--text); }
  .btn-green { background: var(--green); color: var(--green-lt); box-shadow: 0 1px 4px rgba(38,72,47,0.22); }
  .btn-green:hover { background: var(--green-dk); box-shadow: 0 4px 14px rgba(38,72,47,0.3); }
  .btn-danger { background: var(--danger); color: var(--danger-lt); box-shadow: 0 1px 4px rgba(231,76,60,0.25); }
  .btn-warning { background: var(--warn); color: var(--yellow-lt); }
  .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: var(--radius-btn); gap: 4px; }
  .btn-outline { background: var(--card-bg); border: 1.5px solid var(--green); color: var(--green); font-weight: 600; }
  .btn-outline:hover { background: var(--green-lt); }

  /* ─── TABLE ─── */
  .table-wrap { overflow-x: auto; }
  /* Opt-in frozen header (#61): the wrap scrolls inside itself and the header
     row stays put. Applied to the long admin grids, not globally — modals and
     short tables have no business growing an inner scrollbar. */
  .table-wrap.freeze-head { overflow: auto; max-height: 72vh; }
  .table-wrap.freeze-head thead th { position: sticky; top: 0; z-index: 2;
    box-shadow: 0 1px 0 var(--border); }
  [data-theme="dark"] .table-wrap.freeze-head thead th { background: #1B2433; }
  table { width: 100%; border-collapse: collapse; font-size: 13px; }
  th { text-align: left; padding: 10px 14px; background: var(--gray-1);
       border-bottom: 2px solid var(--border); font-size: 11px; font-weight: 700;
       text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-4); }
  td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: var(--gray-1); }

  /* ─── STAT CARDS ─── */
  .stats-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 24px; }
  .stat-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow);
               border: 1px solid var(--border); padding: 16px 20px; }
  .stat-val  { font-size: 26px; font-weight: 800; color: var(--sidebar-bg); }
  .stat-lbl  { font-size: 11px; color: var(--gray-4); margin-top: 4px; font-weight: 600; }
  .stats-row-compact { gap: 10px; }
  .stats-row-compact .stat-card { padding: 8px 12px; border-top-width: 2px; }
  .stats-row-compact .stat-val  { font-size: 17px; }
  .stats-row-compact .stat-lbl  { font-size: 10px; margin-top: 1px; }

  /* ─── GRID ─── */
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

  /* ─── FORM ─── */
  .form-row { margin-bottom: 14px; }
  .form-actions { display: flex; gap: 10px; margin-top: 20px; }

  /* ─── MODAL ─── */
  /* THE LAYERS, in one place, because three different answers is how a tab bar
     ends up drawn over a modal:
       topbar 5 · sidebar 10 · rail 11 · phone tab bar 120 · nav tooltip 300
       · bottom sheets 601 · MODALS 1000 · toast 1100 · photo lightbox 9999
     A modal is the thing you are doing, so nothing covers it — except the app
     answering you. The toast sat at 999 under a 1000 modal and rendered behind
     the scrim, so every "pick a date" and every insert error raised from a form
     was invisible, and the form just sat there looking broken. A message about
     the modal has to be ABOVE the modal. */
  .toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 1100;
    color: #fff; padding: 12px 20px; border-radius: var(--radius-btn);
    font-size: 13px; font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-width: 320px;
  }
  @media (max-width: 768px) {
    /* The phone tab bar is 69px plus the safe area. bottom:24px put the toast
       behind it, which is the second way this message went unread. */
    .toast { left: 16px; right: 16px; max-width: none;
             bottom: calc(85px + env(safe-area-inset-bottom, 0px)); }
  }
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000;
                   display: flex; align-items: center; justify-content: center; padding: 16px; }
  .modal { background: var(--card-bg); border-radius: var(--radius); width: 480px; max-width: 95vw;
           max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.18); }
  .modal-header { padding: 18px 20px; border-bottom: 1px solid var(--border);
                  display: flex; align-items: center; justify-content: space-between; }
  .modal-title { font-weight: 700; font-size: 15px; }
  .modal-close { background: none; font-size: 20px; color: var(--gray-4); padding: 0 6px; }
  .modal-body  { padding: 20px; }
  .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: var(--gray-1); border-radius: 0 0 var(--radius) var(--radius); }
  /* ─── CHIP CONTROLS ───
     A labelled form field per attribute reads as an admin form and costs a
     lot of vertical space, which is fatal on a phone. Chips carry their own
     current value as the label ("Today", "P2", "→ Neha"), so the field name
     never needs its own line. */
  .chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
              border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg);
              font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer;
              white-space: nowrap; transition: border-color .12s, background .12s; }
  .chip-btn:hover { border-color: var(--line); }
  .chip-btn.is-set { border-color: var(--green); background: var(--green-lt); color: var(--green-dk); font-weight: 600; }
  /* A chip holding a VALUE, not a state. 2026-09-02: every value chip used
     is-set, which is green, so five shouted at once and the two that were
     actually urgent did not stand out. Colour is reserved for state now. */
  .chip-btn.is-val { border-color: var(--line); background: var(--card-bg, #fff);
                     color: var(--text); font-weight: 600; }
  .chip-btn.is-val:hover { border-color: var(--gray-4); }
  .cp-chip-ic { display: inline-flex; align-items: center; gap: 4px; }
  /* Colour by meaning, not one generic "set" state — a red chip reads as
     urgent at a glance, which is the whole point of not having to read it. */
  .chip-btn.c-red    { border-color: #E98A7E; background: var(--danger-lt); color: var(--danger); font-weight: 600; }
  .chip-btn.c-amber  { border-color: #C4705C; background: var(--yellow-lt); color: var(--yellow-dk); font-weight: 600; }
  .chip-btn.c-blue   { border-color: #85b7eb; background: #e8f1fb; color: #185fa5; font-weight: 600; }
  .chip-btn.c-violet { border-color: #afa9ec; background: var(--violet-lt); color: #534ab7; font-weight: 600; }
  .chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .chip-av  { width: 20px; height: 20px; border-radius: 50%; background: var(--yellow-lt);
              color: var(--yellow-dk); font-size: 9.5px; font-weight: 700; display: flex;
              align-items: center; justify-content: center; flex-shrink: 0; margin-left: -3px; }
  /* Segmented options can carry the same colour so the picker and the
     resulting chip look like the same object. */
  .seg-opt.sel-red    { background: #8C2D22; border-color: #8C2D22; color: #fff; font-weight: 600; }
  .seg-opt.sel-amber  { background: #8A3A17; border-color: #8A3A17; color: #fff; font-weight: 600; }
  .seg-opt.sel-gray   { background: #3E4756; border-color: #3E4756; color: #fff; font-weight: 600; }
  .seg-opt.sel-light  { background: #B4BECC; border-color: #B4BECC; color: var(--text); font-weight: 600; }
  .chip-btn.is-open { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-lt); }
  /* Eight identically-weighted pills means none of them reads first. An unset
     optional attribute should recede — dashed and grey says "you may set this";
     solid and coloured says "this is set, and here is its value". The hierarchy
     is the whole point: what matters has to be visible without reading. */
  .chip-btn.is-quiet { border-style: dashed; border-color: var(--line);
                       color: var(--gray-4); background: transparent; font-weight: 500; }
  .chip-btn.is-quiet:hover { color: var(--text); border-color: var(--gray-4); }
  /* Icon-only. Once the flag is red, the word "Critical" adds nothing but width. */
  .chip-btn.is-icon { padding: 7px 11px; gap: 0; }
  /* The glyph carries the field's colour whatever state the chip is in. An
     unset chip used to be grey border, grey text, grey icon — nothing to aim
     at. Now the icon stays recognisable before you have read a single word. */
  .chip-btn svg { color: var(--h, inherit); opacity: 1; }
  /* Multi-colour art brings its own fills — a tint would muddy it. State stays
     on the border and the label, which is where it already was. */
  .chip-btn svg[aria-hidden] { color: initial; }
  .chip-btn > span:first-child:not(:only-child) { color: var(--h, inherit); opacity: 1; }
  /* Overlapping avatars for multi-owner, with a ring so faces stay separable. */
  .chip-avstack { display: inline-flex; align-items: center; }
  .chip-avstack > span + span { margin-left: -7px; }
  .chip-avstack span { box-shadow: 0 0 0 1.5px var(--card-bg); border-radius: 50%; }
  /* ── Plan outline ───────────────────────────────────────────────────── */
  .tree { --tree-indent: 24px; }
  .tree-row { display: flex; align-items: center; gap: 8px; min-height: 36px;
              padding: 4px 8px 4px 0; border-radius: var(--radius-btn); cursor: pointer;
              position: relative; }
  .tree-row:hover { background: var(--gray-1); }
  .tree-chev { width: 16px; flex-shrink: 0; text-align: center; font-size: 9px;
               color: var(--gray-3); user-select: none; line-height: 1; }
  .tree-kids { position: relative; margin-left: var(--tree-indent); }
  /* The rail sits under the parent's chevron and stops short of the bottom, so
     it never dangles past the last child. */
  .tree-kids::before { content: ''; position: absolute; left: -16px; top: 0;
                       bottom: 10px; width: 1px; background: var(--border); }
  .tree-title { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                white-space: nowrap; }
  .tree-t1 { font-size: 13.5px; font-weight: 600; }
  .tree-t2 { font-size: 13px;   font-weight: 500; }
  .tree-t3 { font-size: 12.5px; font-weight: 400; }
  .tree-meta { font-size: 11px; color: var(--gray-4); flex-shrink: 0; white-space: nowrap; }
  .tree-act { margin-left: auto; display: flex; align-items: center; gap: 2px;
              flex-shrink: 0; opacity: 0; transition: opacity .12s; }
  .tree-row:hover .tree-act, .tree-row:focus-within .tree-act { opacity: 1; }
  /* Touch has no hover, so never hide the only way to act on a row. */
  @media (hover: none) { .tree-act { opacity: 1 !important; } }
  .tree-ghost { border: none; background: transparent; color: var(--gray-4);
                font-size: 11.5px; padding: 4px 8px; border-radius: var(--radius-btn);
                cursor: pointer; white-space: nowrap; line-height: 1.3; }
  .tree-ghost:hover { background: var(--gray-2); color: var(--text); }
  .tree-empty { font-size: 12px; color: var(--gray-4); padding: 6px 0 6px 24px; }
  .mv-card { border: 1px solid var(--border); border-radius: var(--radius);
             padding: 14px 16px; margin-bottom: 14px; background: var(--card-bg); }

  .chip-panel { margin-top: 10px; padding: 12px; border: 1px solid var(--border);
                border-radius: var(--radius); background: var(--gray-1); }
  /* Segmented picker — one tap, no dropdown, no keyboard. */
  .seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg-opt { flex: 1 1 auto; min-width: 72px; text-align: center; padding: 10px 10px;
             border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
             font-size: 13px; cursor: pointer; user-select: none; }
  .seg-opt:hover { border-color: var(--line); }
  .seg-opt.active { background: var(--green); border-color: var(--green); color: var(--green-lt); font-weight: 600; }
  /* Composer title — the one thing that always matters, so it gets the size. */
  .composer-title { width: 100%; border: none !important; background: transparent !important;
                    font-size: 19px !important; font-weight: 600; padding: 4px 0 !important;
                    outline: none; color: var(--text); }
  .composer-title::placeholder { color: var(--gray-3); font-weight: 500; }
  .composer-divider { height: 1px; background: var(--border); margin: 12px 0 14px; }

  .modal-sec { font-size: 10px; font-weight: 800; color: var(--gray-4); text-transform: uppercase; letter-spacing: .07em; margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
  .modal-sec:first-child { margin-top: 0; }
  .modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .modal-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
  .modal-label { font-size: 10px; font-weight: 700; color: var(--gray-4); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 4px; }
  .modal-inp { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-btn); font-size: 13px; font-family: inherit; background: var(--input-bg); }
  .modal-inp:focus { border-color: var(--yellow); outline: none; box-shadow: 0 0 0 3px rgba(168,115,15,.16); }
  .modal-check-pill { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn); cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 600; transition: background .1s; }
  .modal-check-pill:has(input:checked) { background: var(--green-lt); border-color: var(--green); color: var(--green); }
  .modal-check-pill input { width: 14px; height: 14px; accent-color: var(--green); flex-shrink: 0; }

  /* ─── LEAVE BALANCE ─── */
  .leave-bal { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
  .leave-bal-item .lb-type { font-size:11px; font-weight:700; text-transform:uppercase;
                             letter-spacing:.05em; color:var(--gray-4); margin-bottom:2px; }
  .leave-bal-item .lb-val  { font-size:30px; font-weight:700; line-height:1.1; letter-spacing:-.02em; }
  .leave-bal-item .lb-unit { font-size:11.5px; font-weight:600; color:var(--gray-4);
                             margin-left:6px; letter-spacing:0; }
  .leave-bal-item .lb-bar  { height:4px; border-radius:3px; background:var(--gray-2);
                             overflow:hidden; margin:7px 0 5px; }
  .leave-bal-item .lb-bar > span { display:block; height:100%; border-radius:3px; }
  .leave-bal-item { background: var(--gray-1); border: 1px solid var(--border); border-radius: 8px;
                    padding: 12px 16px; min-width: 110px; }
  .lb-val { font-size: 22px; font-weight: 800; color: var(--green); }
  .lb-type { font-size: 11px; color: var(--gray-4); margin-top: 2px; }

  /* ─── PAYSLIP CARD ─── */
  .payslip-row { display: flex; align-items: center; justify-content: space-between;
                 padding: 12px 0; border-bottom: 1px solid var(--border); }
  .payslip-row:last-child { border-bottom: none; }

  /* ─── LOGIN ─── */
  #login-screen { min-height: 100vh; display: flex; align-items: stretch; }
  .login-image-panel { flex: 1; background: url('https://leluvfemrtkxzkziibvq.supabase.co/storage/v1/object/public/profile-photos/DSC_8582%202.jpg') center/cover no-repeat; position: relative; display: flex; align-items: flex-end; min-height: 100vh; }
  .login-image-panel::before { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(3,14,8,0.92) 0%, rgba(5,22,12,0.4) 45%, rgba(3,14,8,0.15) 100%); pointer-events:none; }
  .login-image-text { position: relative; z-index: 1; padding: 52px 48px; pointer-events:none; }
  .login-image-text .tagline { font-size: 32px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 10px; color: white; }
  .login-image-text .sub { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 500; line-height: 1.5; }
  .login-image-text .sub em { color: rgba(157,168,108,0.9); font-style: normal; }
  .login-form-panel { width: 440px; flex-shrink: 0; background: var(--sidebar-bg); display: flex; align-items: center; justify-content: center; padding: 40px 24px; min-height: 100vh; position: relative; z-index: 1; }
  .login-box { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 36px 32px; width: 352px; box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
  .login-logo { text-align: center; margin-bottom: 28px; }
  .login-logo img { height: 72px; width: 72px; border-radius: 50%; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; border: 2px solid rgba(157,168,108,0.4); }
  .login-logo .brand-name { font-size: 22px; font-weight: 900; color: white; letter-spacing: -0.5px; }
  .login-logo .brand-sub { color: rgba(255,255,255,0.35); font-size: 11px; margin-top: 3px; font-weight: 500; }
  .login-box .form-row label { color: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
  .login-box input[type="email"], .login-box input[type="password"] { background: rgba(255,255,255,0.07) !important; border: 1px solid rgba(255,255,255,0.12) !important; color: white !important; border-radius: 8px !important; }
  .login-box input[type="email"]:focus, .login-box input[type="password"]:focus { border-color: rgba(180,192,129,0.6) !important; background: rgba(255,255,255,0.1) !important; outline: none; }
  .login-box input::placeholder { color: rgba(255,255,255,0.25) !important; }
  .login-divider { text-align: center; margin: 20px 0 14px; position: relative; }
  .login-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background: rgba(255,255,255,0.08); }
  .login-divider span { position:relative; background: transparent; padding: 0 12px; font-size:10px; color:rgba(255,255,255,0.3); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; }

  /* ─── NOTIFICATION BANNER ─── */
  .alert { padding: 10px 16px; border-radius: var(--radius-btn); margin-bottom: 16px; font-size: 13px; }
  .alert-warn { background: var(--yellow-lt); border: 1px solid #fbbf24; color: var(--danger); }
  .alert-info { background: var(--green-lt); border: 1px solid #9BD3A6; color: var(--green-dk); }
  .alert-err  { background: var(--danger-lt); border: 1px solid #fca5a5; color: var(--danger); }

  /* ─── TABS ─── */
  .profile-tab-pane { animation: fadeIn .15s ease; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  @keyframes slideInRight { from { transform:translateX(100%); } to { transform:translateX(0); } }
  .tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; overflow-x:auto; }
  .tab  { padding: 10px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
          color: var(--gray-4); border-bottom: 2px solid transparent; margin-bottom: -2px;
          background: none; border-radius: 0; }
  .tab.active { color: var(--yellow-dk); border-bottom-color: var(--yellow); }

  /* ─── UTILS ─── */
  .flex { display: flex; }
  .flex-between { display: flex; justify-content: space-between; align-items: center; }
  .mt-16 { margin-top: 16px; }
  .mt-24 { margin-top: 24px; }
  .mb-12 { margin-bottom: 12px; }
  .mb-16 { margin-bottom: 16px; }
  .text-sm { font-size: 12px; color: var(--gray-4); }
  .text-bold { font-weight: 700; }
  .hidden { display: none !important; }

  /* ─── PAYSLIP PRINT ─── */
  .payslip-print { max-width: 680px; margin: 0 auto; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
  .payslip-header { background: var(--sidebar-bg); color: white; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; }
  .payslip-section { padding: 16px 24px; border-bottom: 1px solid var(--border); }
  .payslip-row-item { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
  .payslip-total { background: var(--green-lt); padding: 16px 24px; }
  /* === Mobile Responsive === */
  .mobile-topbar { display: none; }
  .table-scroll-hint { display: none; font-size: 11px; color: var(--gray-4); text-align: center; padding: 4px 0 8px; }
  .table-scroll-hint::before { content: '← Scroll to see more →'; }

  @media (max-width: 768px) {
    #sidebar { display: none; }
    #rail    { display: none; }
    #main { margin-left: 0 !important; padding: 0 !important; }
    #content { padding: 12px !important; }
    /* The tab bar floats over the page, so the page has to end above it. This
       line must stay BELOW the shorthand above it: same specificity, both
       important, so the later one wins (#288). tabbarcleartest checks the order. */
    #content { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

    .table-wrap table { display: block; }
    .table-wrap thead { display: none; }
    .table-wrap tbody { display: block; }
    .table-wrap tr {
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 12px;
      padding: 12px;
      background: var(--card-bg);
    }
    .table-wrap td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border: none;
      font-size: 13px;
    }
    .table-wrap td::before {
      content: attr(data-label);
      font-weight: 600;
      color: var(--gray-4);
      font-size: 11px;
      text-transform: uppercase;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
    .stats-row { grid-template-columns: 1fr 1fr !important; }

    .filter-bar { flex-direction: column; }
    .filter-bar select, .filter-bar input { width: 100%; }

    .modal-box { width: 95vw !important; max-width: 95vw !important; }

    /* Bottom sheet. A centred box on a phone puts the primary action in the
       middle of the screen and the keyboard covers it; a sheet anchored to the
       bottom keeps thumb-reach and survives the keyboard opening. */
    .modal-overlay { align-items: flex-end !important; }
    .modal {
      width: 100% !important; max-width: 100% !important;
      border-radius: 18px 18px 0 0 !important;
      max-height: 92vh !important;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      animation: sheetUp .22s cubic-bezier(.32,.72,0,1);
    }
    /* (#26) A wide table inside a modal (some declare min-width:700px) used to
       stretch the layout wider than the phone screen, so the browser zoomed
       out and the whole app read as a shrunken desktop. Scroll the wide thing
       inside the sheet instead of letting it win against the viewport. */
    .modal-body { overflow-x: auto; }
    @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    /* Grab handle, so it reads as a sheet rather than a stuck panel. */
    .modal::before {
      content: ''; display: block; width: 36px; height: 4px; border-radius: 999px;
      background: var(--gray-3); margin: 10px auto 2px; flex-shrink: 0;
    }
    .modal-header { padding: 10px 18px 14px !important; }
    .modal-body { padding: 4px 18px 18px !important; }
    /* Apple's 44px minimum — the old 7px-padding chips were ~28px tall. */
    .chip-btn { padding: 10px 14px; font-size: 13.5px; }
    /* This is mostly used on a phone, so the phone is not the compromise case.
       15px body rather than 14px, and 44px minimum on anything you tap — the
       Apple and Material floor, and roughly the width of an adult fingertip. */
    body { font-size: 15px; }
    .tab, .tree-row, .seg-opt, select, a.btn { min-height: 44px; }
    .tab, .tree-row { display: flex; align-items: center; }
    /* 16px specifically, not 15px: below 16px iOS Safari zooms the whole page
       when a field takes focus, and then leaves you scrolled sideways. */
    input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: 16px; min-height: 44px; }
    /* Slightly larger on a phone, still round, still not a text field. */
    input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; }
    /* The tap target moves to the label, which is what the finger hits anyway.
       Without this the pills come out 36px — under the 44px floor argued for
       above, and lower than before, because it was the stretched control that
       was accidentally holding them open. Scoped to the pill class rather than
       to every label that wraps a tickbox: there are 64 of those and some are
       block layout that a forced flex would rearrange. */
    .modal-check-pill { min-height: 44px; }
    .tree { --tree-indent: 20px; }
    .seg-opt { padding: 13px 10px; font-size: 14px; }
    .btn { min-height: 44px; }

    #topbar { display: none !important; }

    .mobile-topbar { display: flex !important; align-items: center; gap: 12px; padding: 12px; background: var(--card-bg); border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
    #main { padding-top: calc(100px + env(safe-area-inset-top, 0px)) !important; }
    #sidebar.mobile-open { display: flex !important; position: fixed; top: 0; left: 0; border-right: 0; width: 80vw; max-width: 280px; height: 100vh; z-index: 200; overflow-y: auto;
                           overflow-x: hidden; /* W-1818: the drawer scrolls down only; sideways belongs to the strips inside it */ }
    .mobile-sidebar-close { display: block !important; }
    /* Quick links, phone edition. The rail is display:none here, so without
       this the shortcuts simply do not exist on a phone. */
    #rail-mobile { display: block; padding: 2px 12px 10px; flex: 0 0 auto; }
    .qlm-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                color: var(--menu-ink-2); padding: 0 4px 6px; }
    .qlm-row  { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
                padding-bottom: 2px;
                /* W-1818: a sideways swipe here scrolls the strip. Without these the drawer's own
                   vertical scroll claimed the gesture (the same fault rule 55b fixes in the page)
                   and the strip sprang back to the left. */
                touch-action: pan-x pan-y; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .qlm-row::-webkit-scrollbar { display: none; }
    .qlm-item { flex: 0 0 auto; width: 64px; min-height: 40px; background: none; border: 0; padding: 4px 0;
                cursor: pointer; font-family: inherit; display: flex; flex-direction: column;
                align-items: center; gap: 4px; color: var(--menu-ink-2); }
    .qlm-ic   { width: 40px; height: 40px; border-radius: var(--radius); overflow: hidden;
                display: flex; align-items: center; justify-content: center;
                background: var(--menu-hover); border: 1px solid var(--menu-line);
                font-size: 13px; font-weight: 700; color: var(--menu-ink-strong); }
    .qlm-ic img { width: 100%; height: 100%; object-fit: cover; }
    .qlm-lb   { font-size: 10.5px; line-height: 1.25; max-width: 64px; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
    /* The collapse chevron is a desktop control and collapsing does nothing on
       a phone now, so it would just be a second, broken-looking close button. */
    .menu-collapse { display: none; }

    /* Dashboard widgets */
    .card { margin-bottom: 12px; }
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-body { padding: 12px !important; }

    /* Tables inside cards that aren't .table-wrap */
    .card table { display: block; overflow-x: auto; width: 100%; }

    /* Leave balances pivot — too many columns, make it scroll */
    #content .card .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #content .card .table-wrap table { min-width: 600px; display: table; }
    #content .card .table-wrap thead { display: table-header-group; }
    #content .card .table-wrap tbody { display: table-row-group; }
    #content .card .table-wrap tr { display: table-row; border: none; border-radius: 0; margin-bottom: 0; padding: 0; }
    #content .card .table-wrap td { display: table-cell; border-bottom: 1px solid var(--border); }
    #content .card .table-wrap td::before { display: none; }

    /* Employee master — card-stack */
    #emp-master-wrap { overflow-x: unset; }
    #emp-master-wrap table { min-width: unset; display: block; }
    #emp-master-wrap thead { display: none; }
    #emp-master-wrap tbody { display: block; }
    #emp-master-wrap tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; padding: 12px; background: var(--card-bg); }
    #emp-master-wrap td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border: none; font-size: 13px; }

    /* Leave admin — card-stack */
    .table-wrap#la-wrap table { min-width: unset; display: block; }
    .table-wrap#la-wrap thead { display: none; }
    .table-wrap#la-wrap tbody { display: block; }
    .table-wrap#la-wrap tr { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; padding: 12px; background: var(--card-bg); }
    .table-wrap#la-wrap td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border: none; font-size: 13px; }

    /* Payslip and modals */
    .payslip-print { margin: 0; border-radius: 0; }
    .payslip-header { flex-direction: column; gap: 8px; }

    /* 1. iOS input zoom fix — only for fields that take a caret. Applied to a
       radio, an !important font-size scales the control along with it. */
    input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: 16px !important; }

    /* 2. Touch targets */
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    /* Was 36px, which is under the guide's 40px floor and is the single rule
       behind most of the undersized targets on a phone — 475 of them on Skills
       alone, all the same .btn-sm. Raised here rather than per page. */
    .btn-sm { min-height: 40px; }
    .nav-item { min-height: 48px; padding: 12px 16px !important; }

    /* 3. Modal scrollable body */
    .modal-box {
      max-height: 90vh !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    .modal-box > div:last-of-type {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
    }

    /* 4. Grid-2 inside modals → single column on mobile */
    .modal-box .grid-2 { grid-template-columns: 1fr !important; }

    /* 5. Card headers wrap gracefully */
    .card-header { flex-wrap: wrap; gap: 8px; }
    .card-header .btn { flex-shrink: 0; }

    /* 6. Text overflow */
    td, .card-body p, .stat-card { word-break: break-word; overflow-wrap: break-word; }
    .badge { white-space: nowrap; }

    /* 7. Stat cards font scaling */
    .stat-card .stat-value { font-size: 22px !important; }
    .stat-card .stat-label { font-size: 11px !important; }

    /* 8. Filter bar */
    .filter-bar a { font-size: 14px !important; padding: 10px 4px !important; display: inline-block; }
    .filter-bar .btn { width: 100%; }

    /* 9. Safe area insets */
    #main { padding-bottom: env(safe-area-inset-bottom, 0px) !important; }
    /* A footer that sticks to the bottom edge sticks under the tab bar on a
       phone; it has to stick to the top of the tab bar instead (#288). */
    .mobile-topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
    #sidebar.mobile-open { padding-top: env(safe-area-inset-top, 0px); }

    /* 10. Horizontal scroll hint for pivot tables */
    .table-scroll-hint { display: block !important; }

    /* 11. Payslip improvements */
    .payslip-print { border-radius: 0 !important; }
    .payslip-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
    .payslip-row-item { flex-wrap: wrap; gap: 4px; }

    /* 12. Form actions in modals — stack buttons */
    .form-actions { flex-direction: column !important; gap: 8px !important; }
    .form-actions .btn { width: 100% !important; }

    /* 13. Login box — on mobile hide image, full-width form */
    .login-image-panel { display: none !important; }
    .login-form-panel { width: 100% !important; min-height: 100vh; padding: 24px 16px !important; }
    .login-box { width: 100% !important; max-width: 360px; padding: 24px 20px !important; }

    /* 14. Bottom navigation safe zone */
    body { padding-bottom: env(safe-area-inset-bottom, 0px); }

    /* 15. Tab bars — horizontal scroll, no wrap */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tab { flex-shrink: 0; white-space: nowrap; }

    /* 16. Filter-bar inputs override inline widths */
    .filter-bar input, .filter-bar select { width: 100% !important; }

    /* 17. Leave Balances header stacks on mobile */
    #lb-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
    #lb-header > * { width: 100%; }
    #lb-header button { align-self: flex-start; }

    /* 18. My Leave + My Overtime — card-stack inside .card .table-wrap */
    /* #my-leave-wrap — leave requests now rendered as card divs (not table), no table conversion needed */
    /* #my-ot-wrap still a table; keep its rules below */
    #my-ot-wrap { overflow-x: unset !important; }
    #my-ot-wrap table { min-width: unset !important; display: block !important; }
    #my-ot-wrap thead { display: none !important; }
    #my-ot-wrap tbody { display: block !important; }
    #my-ot-wrap tr { display: flex !important; flex-direction: column !important; border: 1px solid var(--border) !important; border-radius: 10px !important; margin-bottom: 12px !important; padding: 12px !important; background: var(--surface-1) !important; }
    #my-ot-wrap td { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 4px 0 !important; border: none !important; font-size: 13px !important; }

    /* 19. Employee Master filter grid — 2 columns on mobile */
    #emp-filter-bar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    #emp-filter-bar .emp-search-wrap { grid-column: 1 / -1; }
    #emp-filter-bar .emp-add-btn { grid-column: 1 / -1; }
    #emp-filter-bar select { width: 100% !important; }

    /* 20. Comp-off stat cards — 3-column on mobile */
    .stats-row.stats-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .stats-row.stats-3 .stat-card { padding: 12px 10px !important; }
    .stats-row.stats-3 .stat-val { font-size: 20px !important; }

    /* 21. User Manager tabs wrap fix */
    #user-mgr-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* 22. Leave Admin date inputs — show labels on mobile */
    .la-date-wrap { display: flex; flex-direction: column; }
    .la-date-wrap .la-date-label { display: block; font-size: 11px; color: var(--gray-4); font-weight: 600; margin-bottom: 3px; }

    /* 23. Universal: .flex-between always wraps on mobile */
    .flex-between { flex-wrap: wrap !important; }

    /* 24. Accommodation occupancy — bed cards wrap naturally (min-width:140px, flex-wrap:wrap) */
    /* No additional rules needed; covered by flex-wrap and the overflow-x:auto tab bar */

    /* 25. My Canteen: subscription checkboxes + labels stack if needed */
    #content label[style*="display:flex"][style*="align-items:center"] { flex-wrap: wrap; }

    /* 26. Canteen rate config 2-col grid → 1-col on mobile */
    #content .card-body [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* 27. Welfare & payroll lines: sticky first-column stays visible on scroll */
    #content td[style*="position:sticky"] { z-index: 1; }

    /* 28 & 29. All new page tables (.card .table-wrap) are already covered by
       the existing "#content .card .table-wrap" horizontal-scroll rule above. */

    /* 30. Tasks toolbar filter row — single scrollable strip (no wrapping) */
    .ac-toolbar-r2 {
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      /* fade right edge to hint scroll */
      -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
      mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
    #ac-search { width: 110px !important; min-width: 90px !important; flex-shrink: 0 !important; }

    /* 31. Kanban columns — show next-col peek on narrow screens */
    .ac-kanban-col { flex: 0 0 82vw !important; }

    /* 32. Approval decide buttons — 44px minimum touch target */
    .btn-decide { min-height: 44px !important; font-size: 13px !important; padding: 9px 16px !important; }

    /* 33. Goal detail modal header — wrap controls below title */
    .goal-modal-header { flex-wrap: wrap !important; }
    .goal-modal-header > div:first-child { flex: 1 1 auto; min-width: 0; }

    /* 34. Payslip row — allow download button to wrap */
    .payslip-row { flex-wrap: wrap; gap: 8px; }

    /* 35. Profile field grids — 3-col too narrow on mobile */
    .profile-grid   { grid-template-columns: 1fr 1fr !important; }
    .profile-grid-2 { grid-template-columns: 1fr !important; }

    /* 36. Hide jump-to search in sidebar on mobile */

    /* 38. Hide stat-card rows on all pages — too wide, not useful on phone */
    .stats-row { display: none !important; }

    /* 39. Attendance daily table — card-stack layout on mobile */
    #att-daily-wrap table   { min-width: unset !important; display: block !important; }
    #att-daily-wrap thead   { display: none !important; }
    #att-daily-wrap tbody   { display: block !important; }
    #att-daily-wrap tr      { display: grid !important; grid-template-columns: auto 1fr auto auto !important;
                              gap: 4px 8px !important; padding: 10px 12px !important;
                              border: 1px solid var(--border) !important; border-radius: 10px !important;
                              margin-bottom: 8px !important; align-items: center !important; }
    #att-daily-wrap td      { padding: 0 !important; border: none !important; font-size: 12px !important; }
    #att-daily-wrap td:nth-child(1) { font-weight: 700; font-size: 13px !important; grid-column: 1; }
    #att-daily-wrap td:nth-child(2) { grid-column: 2; }
    #att-daily-wrap td:nth-child(3) { grid-column: 3; font-size: 11px !important; color: var(--gray-4); }
    #att-daily-wrap td:nth-child(4) { grid-column: 4; font-size: 11px !important; color: var(--gray-4); }
    #att-daily-wrap td:nth-child(5) { display: none !important; }
    #att-daily-wrap td:nth-child(6) { display: none !important; }
    #att-daily-wrap td:nth-child(7) { grid-column: 1 / -1; margin-top: 4px; }

    /* 40. Inbox/Approvals filter seg — wrap on mobile */
    .seg { flex-wrap: wrap !important; margin-left: 0 !important; }
    .seg-opt { flex: 0 0 auto !important; min-width: 0 !important; }

    /* 41. Approvals tab bar + state filter — stack on mobile */
    #approvals-tab-bar,
    div[style*="margin-left:auto"] > .seg { margin-left: 0 !important; }

    /* 42. Goals kanban — already handled by ac-kanban-col; hide vg-stat in goals */
    .vg-stat-row { display: none !important; }

    /* 43. Dashboard two-column shift+team grid — stack */
    #dash-shift-team { grid-template-columns: 1fr !important; }

    /* 44. About Me save bar — stack buttons */
    .profile-save-bar { flex-wrap: wrap !important; gap: 8px !important; }

    /* 45. Leave balance chips — 2-per-row */
    .leave-bal { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .leave-bal > div { min-width: 0 !important; }

    /* 46. Leave request cards (native card layout, table conversion no longer needed) */
    /* #my-leave-wrap now uses card divs; old table-conversion rules removed */

    /* 47. Org Chart Edit reporting-lines table – mobile card layout */
    #rs-tbody { display: block !important; }
    #rs-tbody tr { display: block !important; border: 1px solid var(--border) !important;
      border-radius: 10px !important; margin-bottom: 10px !important;
      padding: 10px 12px !important; background: var(--surface-0) !important; }
    #rs-tbody td { display: block !important; padding: 3px 0 !important;
      border: none !important; font-size: 13px !important; }
    #rs-tbody td:nth-child(1) { display: none !important; }
    #rs-tbody td:nth-child(3) { font-size: 11px !important; color: var(--gray-4) !important; margin-bottom: 4px !important; }
    #rs-tbody td:nth-child(4) select,
    #rs-tbody td:nth-child(5) select { width: 100% !important; font-size: 12px !important; box-sizing: border-box !important; }
    #rs-tbody td:nth-child(6) { margin-top: 8px !important; }
    #rs-tbody td:nth-child(6) button { width: 100% !important; }

    /* 58. Helpdesk queue. RETIRED 2026-09-27: this block turned a ten-column
       table into cards under 768px, after a phone report at v.631 where the
       title came out four characters wide. Fiyana's mockups replaced the table
       itself with a list of cards at every width, so there is nothing left to
       convert and every rule here placed a cell that no longer exists. The
       reasoning is kept because it is why the queue looks the way it does:
       each row reads in a chosen order, title first, because that is what you
       scan a queue for. See .hdq-row further down. */

    /* 59. Helpdesk filters. Her note on 2026-09-17 asked for one line -- "make
       the filters horizontally fit in one line after the search so that the
       space used on top reduces" -- and on a phone that line scrolled
       sideways. SUPERSEDED 2026-09-27: the new mockups put search and the type
       control on their own wrapped line on a phone, and measured at 375px the
       sideways-scrolling version crushed the search box to a sliver once the
       Operations/Software/All control joined the row. The one-line intent
       still holds on desktop, where the row does not wrap. See the wrap rules
       further down. */

    /* 48. Dashboard task card – bigger font, no horizontal overflow */
    #dash-actions-card { overflow: hidden !important; }

    /* 50. Wide content SCROLLS, it does not get clipped. overflow-x:hidden here
       silently cut off anything wider than the screen — kanban columns, org
       tree, wide tables — with no way to reach the rest. */
    #content { overflow-x: auto !important; width: 100% !important; box-sizing: border-box !important;
               -webkit-overflow-scrolling: touch; }

    /* 51. All inline 1fr 1fr grids anywhere in content → single column on mobile */
    #content [style*="grid-template-columns:1fr 1fr"],
    #content [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

    /* 55. The page itself stays put; scrolling happens inside #content. */
    html, body { overflow-x: hidden !important; max-width: 100% !important; }
    html, body { overscroll-behavior-x: none; }

    /* 55b. Anything that declares its own horizontal scroll gets to keep it:
       kanban strips, wide tables, tab bars, calendar day columns. Without
       touch-action the gesture is claimed by the vertical page scroll. */
    #content [style*="overflow-x:auto"],
    #content [style*="overflow-x: auto"],
    #content .table-wrap,
    #content .card table,
    #content .tabs,
    .modal-body [style*="overflow-x:auto"] {
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-x pan-y !important;
      overscroll-behavior-x: contain !important;
      max-width: 100% !important;
    }
    /* A flex/grid strip must be allowed to exceed its parent, or its columns
       squash to fit and there is nothing left to scroll. */
    #content [style*="overflow-x:auto"] > *,
    #content [style*="overflow-x: auto"] > * { flex-shrink: 0; }
    /* Thin visible scrollbar so it's obvious the strip moves */
    #content [style*="overflow-x:auto"]::-webkit-scrollbar,
    #content .table-wrap::-webkit-scrollbar { height: 5px; -webkit-appearance: none; }
    #content [style*="overflow-x:auto"]::-webkit-scrollbar-thumb,
    #content .table-wrap::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 3px; }

    /* 56. Dashboard-specific mobile cards */
    .dash-wfh-grid   { grid-template-columns: 1fr !important; }
    .dash-celeb-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
    .dash-celeb-grid .card { margin-bottom: 0 !important; }
    /* .dash-celeb-row overflow removed — badge is now inline */
    /* .dash-celeb-badge removed — badge now inline in left column */

    /* 57. Team person rows — bigger text on mobile */
    .dash-team-card [style*="font-size:13px"] { font-size: 14px !important; }

    /* 52. Birthday/anniversary rows — badge now inline in left column, no CSS needed */

    /* 53. Dashboard miniRow — shorter date, prevent inner overflow */
    #dash-actions-card > div { overflow: hidden !important; width: 100% !important; }

    /* 54. EDD banner — mobile layout now handled in JS; desktop CSS only */
    /* (flex-wrap rules removed; mobile renderEDDBanner() returns block layout) */
    #dash-actions-card [style*="font-size:13px"] { font-size: 14px !important; }
    #dash-actions-card [style*="font-size:10px"] { font-size: 11px !important; }

    /* 49. Secondary/neutral btn – visible in dark mode (Regularise etc) */
    .btn:not(.btn-primary):not(.btn-danger) { background: var(--surface-1) !important;
      border-color: var(--border) !important; color: var(--text) !important; }

        /* 37. Hero banners on mobile — compact, hide duplicate title */
    .nav-search-wrap { display: none !important; }
  }

  /* Desktop: Employee Master filter bar inline (override base width:100% on selects) */
  #emp-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
  #emp-filter-bar select { width: auto !important; min-width: 130px; }
  #emp-filter-bar input { width: auto !important; }
  #emp-filter-bar .emp-search-wrap { flex: 1; min-width: 200px; max-width: 320px; }

  /* Desktop: new page headers — always wrap gracefully on smaller windows */
  .flex-between { flex-wrap: wrap; gap: 8px; }

  /* Desktop defaults for dashboard grids */
  .dash-wfh-grid   { grid-template-columns: 1fr 1fr; }
  .dash-celeb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Desktop: canteen rate config — keep 2-col above mobile breakpoint */
  @media (min-width: 769px) {
    #content .card-body [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  }

  /* Desktop: Leave Balances Sort links → styled buttons */
  .lb-sort-bar { display: flex; gap: 6px; }
  .lb-sort-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 4px 10px; font-size: 12px; color: var(--gray-4); cursor: pointer; }
  .lb-sort-btn:hover, .lb-sort-btn.active { background: var(--yellow-lt); border-color: var(--yellow); color: var(--yellow-dk); }

  /* Dashboard Quick Actions — consistent buttons */
  .qa-btn { display: block; width: 100%; margin-bottom: 8px; text-align: center; }
  .qa-btn:last-child { margin-bottom: 0; }

  /* ─── STATUS + LOCATION PILLS ─── */
  .status-pill-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--gray-1); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 5px 11px; font-size: 12px;
    font-weight: 600; cursor: pointer; transition: all 0.15s;
    white-space: nowrap; font-family: inherit; color: var(--text);
    letter-spacing: -0.01em;
  }
  .status-pill-btn:hover { background: var(--card-bg); border-color: var(--line); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .sd-available      { background: #3F6B44; box-shadow: 0 0 0 2px rgba(34,197,94,0.2); }
  .sd-remote         { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
  .sd-deployed       { background: #f97316; box-shadow: 0 0 0 2px rgba(249,115,22,0.2); }
  .sd-out_of_office  { background: var(--gray-3); }
  .sd-weekly_off     { background: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,0.2); }
  .sd-on_call        { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,0.2); }
  .sd-extended_duty  { background: #ec4899; box-shadow: 0 0 0 2px rgba(236,72,153,0.2); }
  .status-dropdown-panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.13); z-index: 300; min-width: 280px;
    overflow: hidden; animation: fadeIn .12s ease;
  }
  .status-attend-row {
    padding: 8px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
    font-size: 11px; color: var(--gray-4); display: flex; gap: 14px; flex-wrap: wrap;
  }
  .status-attend-row strong { color: var(--text); }
  .status-note-section {
    padding: 10px 14px 12px; border-top: 1px solid var(--border);
  }
  .status-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: background 0.1s; border-bottom: 1px solid var(--border);
  }
  .status-opt:last-child { border-bottom: none; }
  .status-opt:hover { background: var(--gray-1); }
  .status-opt.active { background: var(--green-lt); color: var(--green); font-weight: 700; }
  .status-opt-note { font-size: 10px; color: var(--gray-3); margin-top: 1px; }
  .loc-option.active { background: var(--green-lt); color: var(--green); font-weight: 700; }
  .status-divider { font-size: 10px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--gray-3); padding: 8px 14px 4px; }

  /* ── The Now chip: status + clock + place in one control, tinted by status ── */
  .now-chip { display:inline-flex; align-items:stretch; background:var(--gray-1);
    border:1.5px solid var(--border); border-radius:var(--radius); padding:0; font-size:12px;
    font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap;
    font-family:inherit; color:var(--text); letter-spacing:-0.01em; overflow:hidden; }
  .now-chip:hover { border-color:var(--line); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .now-chip-half { display:flex; align-items:center; gap:7px; padding:5px 11px; }
  .now-chip-div { width:1.5px; align-self:stretch; background:var(--border); flex-shrink:0; }
  .now-chip #status-clock { color:var(--gray-4); }
  .now-available     { background:var(--green-lt); border-color:#9BD3A6; color:var(--green); }
  .now-remote        { background:#EDF4FE; border-color:#CFE2FA; color:#1F5EA8; }
  .now-deployed      { background:var(--yellow-lt); border-color:#F0A47C; color:var(--yellow-dk); }
  .now-out_of_office { background:var(--gray-2); border-color:#E3E7EC; color:#3E4756; }
  .now-weekly_off    { background:#F1EAFD; border-color:#E0D2F9; color:#5B3A9E; }
  .now-on_call       { background:var(--yellow-lt); border-color:#F0A47C; color:var(--yellow-dk); }
  .now-extended_duty { background:#FDECF4; border-color:#F8CFE2; color:#A82662; }
  .now-available .now-chip-div     { background:#9BD3A6; }
  .now-remote .now-chip-div        { background:#CFE2FA; }
  .now-deployed .now-chip-div      { background:#F0A47C; }
  .now-out_of_office .now-chip-div { background:var(--border); }
  .now-weekly_off .now-chip-div    { background:#E0D2F9; }
  .now-on_call .now-chip-div       { background:#F0A47C; }
  .now-extended_duty .now-chip-div { background:#F8CFE2; }
  .now-chip[class*=" now-"] #status-clock,
  .now-chip[class*=" now-"] #status-note-tag { color:inherit; opacity:.75; }
  [data-theme="dark"] .now-chip { background:#1B2433; border-color:#26303D; color:#EDF0F3; }
  [data-theme="dark"] .now-chip-div { background:#26303D; }
  [data-theme="dark"] .now-available     { background:rgba(34,197,94,.14);  border-color:rgba(34,197,94,.4);  color:#8CC79A; }
  [data-theme="dark"] .now-remote        { background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.4); color:#93bdf7; }
  [data-theme="dark"] .now-deployed      { background:rgba(249,115,22,.14); border-color:rgba(249,115,22,.4); color:#C4705C; }
  [data-theme="dark"] .now-out_of_office { background:rgba(148,163,184,.14);border-color:rgba(148,163,184,.4);color:#b8c2cc; }
  [data-theme="dark"] .now-weekly_off    { background:rgba(139,92,246,.14); border-color:rgba(139,92,246,.4); color:#c1a8f8; }
  [data-theme="dark"] .now-on_call       { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.4); color:#F0A47C; }
  [data-theme="dark"] .now-extended_duty { background:rgba(236,72,153,.14); border-color:rgba(236,72,153,.4); color:#f39dc6; }
  [data-theme="dark"] .now-available .now-chip-div     { background:rgba(34,197,94,.4); }
  [data-theme="dark"] .now-remote .now-chip-div        { background:rgba(59,130,246,.4); }
  [data-theme="dark"] .now-deployed .now-chip-div      { background:rgba(249,115,22,.4); }
  [data-theme="dark"] .now-out_of_office .now-chip-div { background:rgba(148,163,184,.4); }
  [data-theme="dark"] .now-weekly_off .now-chip-div    { background:rgba(139,92,246,.4); }
  [data-theme="dark"] .now-on_call .now-chip-div       { background:rgba(245,158,11,.4); }
  [data-theme="dark"] .now-extended_duty .now-chip-div { background:rgba(236,72,153,.4); }

  /* ── The Where section of the combined panel ── */
  .where-hdr { display:flex; align-items:center; gap:8px; padding:10px 12px 4px;
    font-size:10px; font-weight:700; color:var(--gray-4); text-transform:uppercase; letter-spacing:.05em; }
  .where-hdr .where-line { flex:1; height:1px; background:var(--border); }
  .where-coords { font-size:10.5px; font-weight:500; color:var(--gray-4);
    font-variant-numeric:tabular-nums; text-transform:none; letter-spacing:0; }
  .where-wrap { display:flex; flex-wrap:wrap; gap:5px; padding:4px 12px 8px; }
  .where-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
    border-radius:8px; cursor:pointer; background:transparent; border:1px solid var(--border);
    font-size:12px; font-weight:500; color:var(--text); font-family:inherit; }
  .where-chip:hover { border-color:var(--green); }
  .where-chip.on { background:var(--green-lt); border-color:var(--green); color:var(--green); font-weight:700; }
  .where-base { font-size:9px; color:var(--gray-4); }
  .where-custom { display:flex; gap:6px; padding:0 12px 10px; align-items:center; }
  [data-theme="dark"] .where-chip { border-color:#26303D; color:#EDF0F3; }
  [data-theme="dark"] .where-chip.on { background:rgba(34,197,94,.14); }

  /* ── The Me chip: avatar + badge + name + role, one control ── */
  .me-chip { display:inline-flex; align-items:center; gap:9px; background:transparent;
    border:1.5px solid transparent; border-radius:var(--radius); padding:4px 10px 4px 5px;
    cursor:pointer; font-family:inherit; color:var(--text); transition:all .15s; }
  .me-chip:hover { border-color:var(--border); background:var(--gray-1); }
  .me-chip .notif-count { top:-3px; right:-4px; border:1.5px solid white; }
  [data-theme="dark"] .me-chip:hover { background:#1B2433; border-color:#26303D; }
  [data-theme="dark"] .me-chip .notif-count { border-color:#1B2433; }
  .me-tabs { display:flex; gap:2px; padding:8px 8px 0; background:var(--gray-1);
    border-bottom:1px solid var(--border); }
  .me-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    padding:8px 12px; border:none; border-bottom:2px solid transparent; border-radius:9px 9px 0 0;
    background:transparent; font-family:inherit; font-size:12.5px; font-weight:600;
    color:var(--gray-4); cursor:pointer; }
  .me-tab.on { background:var(--card-bg); border-bottom-color:var(--green); color:var(--text); }[data-theme="dark"] .me-tabs { border-bottom-color:#26303D; }[data-theme="dark"] .me-tab.on { color:#EDF0F3; }
  .me-tab-count { font-size:10px; font-weight:700; color:var(--danger-lt); background:var(--danger);
    border-radius:999px; padding:1px 6px; }
  .me-tab:not(.on) .me-tab-count { background:var(--gray-2); color:var(--gray-4); }
  .notif-kind { font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:4px; }

  /* ── Mobile: the band under the bar, and the bottom sheets ── */
  .mobile-topbar { flex-wrap:wrap; }
  #mobile-status-band { flex-basis:100%; display:flex; align-items:center; gap:8px;
    margin:6px -12px -12px; padding:7px 14px; font-size:11.5px; cursor:pointer;
    background:var(--gray-1); color:var(--text); border-top:1px solid var(--border); }
  #mobile-status-band.now-available     { background:var(--green-lt); color:var(--green); border-top-color:#9BD3A6; }
  #mobile-status-band.now-remote        { background:#EDF4FE; color:#1F5EA8; border-top-color:#CFE2FA; }
  #mobile-status-band.now-deployed      { background:var(--yellow-lt); color:var(--yellow-dk); border-top-color:#F0A47C; }
  #mobile-status-band.now-out_of_office { background:var(--gray-2); color:#3E4756; border-top-color:#E3E7EC; }
  #mobile-status-band.now-weekly_off    { background:#F1EAFD; color:#5B3A9E; border-top-color:#E0D2F9; }
  #mobile-status-band.now-on_call       { background:var(--yellow-lt); color:var(--yellow-dk); border-top-color:#F0A47C; }
  #mobile-status-band.now-extended_duty { background:#FDECF4; color:#A82662; border-top-color:#F8CFE2; }
  [data-theme="dark"] #mobile-status-band { background:#1B2433; color:#EDF0F3; border-top-color:#26303D; }
  [data-theme="dark"] #mobile-status-band.now-available     { background:rgba(34,197,94,.14);  color:#8CC79A; }
  [data-theme="dark"] #mobile-status-band.now-remote        { background:rgba(59,130,246,.14); color:#93bdf7; }
  [data-theme="dark"] #mobile-status-band.now-deployed      { background:rgba(249,115,22,.14); color:#C4705C; }
  [data-theme="dark"] #mobile-status-band.now-out_of_office { background:rgba(148,163,184,.14);color:#b8c2cc; }
  [data-theme="dark"] #mobile-status-band.now-weekly_off    { background:rgba(139,92,246,.14); color:#c1a8f8; }
  [data-theme="dark"] #mobile-status-band.now-on_call       { background:rgba(245,158,11,.14); color:#F0A47C; }
  [data-theme="dark"] #mobile-status-band.now-extended_duty { background:rgba(236,72,153,.14); color:#f39dc6; }
  .band-sep { width:3px; height:3px; border-radius:999px; background:currentColor; opacity:.5; flex-shrink:0; }

  .sheet-backdrop { position:fixed; inset:0; background:rgba(18,33,47,.34); z-index:600; }
  .bottom-sheet { position:fixed; left:0; right:0; bottom:0; z-index:601; background:var(--card-bg);
    border-radius:22px 22px 0 0; max-height:84vh; display:flex; flex-direction:column;
    box-shadow:0 -8px 32px rgba(25,30,20,.2); overscroll-behavior:contain; }[data-theme="dark"] .bottom-sheet { color:#EDF0F3; }
  .sheet-handle-row { flex-shrink:0; padding:9px 0 4px; display:flex; justify-content:center; cursor:pointer; }
  .sheet-handle { width:38px; height:4px; border-radius:999px; background:var(--gray-2); }
  .sheet-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
  .sheet-status-card { display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--radius);
    cursor:pointer; background:var(--card-bg); border:1.5px solid var(--border); min-height:48px;
    font-family:inherit; width:100%; text-align:left; color:var(--text); }[data-theme="dark"] .sheet-status-card { border-color:#26303D; color:#EDF0F3; }
  /* The chosen card wears its status: tinted, edged in the dot's own colour.
     Declared after the base rule on purpose — the base was winning the cascade
     and the chosen card looked exactly like the other three. */
  .sheet-status-card.now-available     { background:var(--green-lt); border-color:#3F6B44; color:var(--green); }
  .sheet-status-card.now-remote        { background:#EDF4FE; border-color:#3b82f6; color:#1F5EA8; }
  .sheet-status-card.now-deployed      { background:var(--yellow-lt); border-color:#f97316; color:var(--yellow-dk); }
  .sheet-status-card.now-out_of_office { background:var(--gray-2); border-color:#8FA3B8; color:#3E4756; }
  [data-theme="dark"] .sheet-status-card.now-available     { background:rgba(34,197,94,.14);  color:#8CC79A; }
  [data-theme="dark"] .sheet-status-card.now-remote        { background:rgba(59,130,246,.14); color:#93bdf7; }
  [data-theme="dark"] .sheet-status-card.now-deployed      { background:rgba(249,115,22,.14); color:#C4705C; }
  [data-theme="dark"] .sheet-status-card.now-out_of_office { background:rgba(148,163,184,.14);color:#b8c2cc; }
  .sheet-where-chip { display:inline-flex; align-items:center; gap:6px; padding:10px 13px;
    border-radius:var(--radius); cursor:pointer; background:var(--card-bg); border:1.5px solid var(--border);
    font-size:12.5px; font-weight:500; color:var(--text); font-family:inherit; min-height:44px; }
  .sheet-where-chip.on { background:var(--green-lt); border-color:var(--green); color:var(--green); font-weight:700; }[data-theme="dark"] .sheet-where-chip { border-color:#26303D; color:#EDF0F3; }
  [data-theme="dark"] .sheet-where-chip.on { background:rgba(34,197,94,.14); }
  .sheet-save-wrap { flex-shrink:0; padding:11px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border); background:inherit; }
  .sheet-save { width:100%; background:var(--green); color:var(--green-lt); border:none; border-radius:13px;
    padding:15px; font-size:14.5px; font-weight:600; text-align:center; cursor:pointer; font-family:inherit; }
  .sheet-acct-row { display:flex; align-items:center; gap:13px; padding:14px 16px; cursor:pointer;
    min-height:52px; border-bottom:1px solid var(--gray-1); font-size:13.5px; }
  /* Sheet tabs are filled, not underlined — an underline arcs strangely around
     a rounded button sitting on the same white as its active state. */
  .bottom-sheet .me-tab { border-bottom:none; border-radius:var(--radius); min-height:44px; }
  .bottom-sheet .me-tab.on { background:var(--gray-1); }
  [data-theme="dark"] .bottom-sheet .me-tab.on { background:#26303D; }
  [data-theme="dark"] .sheet-acct-row { border-bottom-color:#26303D; }

  /* ─── EMPLOYEE STATUS INDICATOR (in table) ─── */
  .emp-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

  /* ─── PHOTO ZOOM / LIGHTBOX ─── */
  .photo-thumb {
    cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease;
    position: relative; z-index: 1;
  }
  .photo-thumb:hover {
    transform: scale(1.55); box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    z-index: 5;
  }
  #photo-lightbox {
    position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn .15s ease; cursor: zoom-out;
  }
  #photo-lightbox img {
    width: min(320px, 85vw); height: min(320px, 85vw); border-radius: 50%;
    object-fit: cover; border: 4px solid white;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: photoZoomIn .15s ease;
  }
  #photo-lightbox-name {
    position: absolute; bottom: calc(50% - min(180px,47vw));
    color: white; font-size: 15px; font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6); text-align: center; width: 100%;
  }
  @keyframes photoZoomIn { from { transform: scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } }

  /* ─── TOPBAR POLISH ─── */
  #topbar { gap: 16px; }
  .topbar-title { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; }
  @media (max-width: 1100px) { #user-name, #user-role-badge { display: none !important; } }
  .topbar-user { gap: 12px; }

  /* ─── CARD POLISH ─── */
  .card { border-radius: var(--radius); }
  .stat-card { border-radius: var(--radius); }

  /* ─── NAV POLISH ─── */
  .nav-item { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; }
  .nav-item .icon { font-size: 16px; }
  .nav-item.active { font-weight: 700; }

  /* ─── MOBILE STATUS PILL ─── */
  @media (max-width: 768px) {
    .status-pill-btn { font-size: 11px; padding: 4px 9px; }
    #status-loc-wrap { gap: 4px; }
    .status-dropdown-panel { right: auto; left: 0; min-width: 180px; }
    .photo-thumb:hover { transform: none; box-shadow: none; } /* no hover zoom on touch */
  }

  /* ═══════════════════════════════════════════════════════════
     WILDLIFE / NATURE THEME — employee pages
  ═══════════════════════════════════════════════════════════ */

  /* The page's name, then one line of plain English state, on the page's own
     ground. This used to be a dark gradient band carrying a watermark animal,
     which is exactly the "bark surfaces in content" the style guide forbids —
     dark belongs to navigation. Nothing replaces the surface: the type does
     the work, which is what lets the cards below read as the objects. */

  /* Every role now gets the same forest primary, so the per-role overrides
     that used to exist here are gone. Keeping them would have meant three
     different primary colours for the same button depending on who is
     logged in, which is how an app stops feeling like one product. */

  /* ═══════════════════════════════════════════════════════════
     DARK MODE
     Applied via <html data-theme="dark">
     Covers layout + CSS classes. Inline background:white in
     JS-generated HTML is caught by the broad element selectors.
  ═══════════════════════════════════════════════════════════ */
  [data-theme="dark"] {
    /* ── Slate · dark ───────────────────────────────────────────────
       Derived from the same ladder rather than inverted: the ground drops
       BELOW the card, so a card still reads as paper on a desk. The
       pre-coloured icons keep their own fills — each one is a solid tile
       and does not need recolouring. */
    --paper:     #0E141C;
    --grid-line: #141C27;
    --gray-1:    #0E141C;   /* ground, below the card */
    --gray-2:    #1B2433;
    --line:      #5F6D7D;   /* the hairline it was */
    --gray-3:    #8B98A8;   /* meta text · 5.72:1 on the card (AA) */
    --gray-4:    #95A1B0;   /* 6.4:1 on the card (AA) */
    --text:      #EDF0F3;
    --border:    #26303D;
    --shadow:    0 1px 3px rgba(0,0,0,.45);
    --surface:   #161E29;   /* the card sits above the ground */
    --card-bg:   #161E29;
    --band:       #19212C;
    --input-bg:  #1B2433;
    --sidebar-bg:#080C12;

    /* Forest is 1.6:1 on this ground, i.e. invisible. Dark mode needs the
       green to move UP the scale, and the "dark" variant to be the lighter
       one — hover has to go somewhere. */
    --green:     #9BD3A6;   /* 9.6:1 on the card (AAA) */
    --green-dk:  #C3E3CB;
    --green-lt:  #17281C;
    --olive:     #8CC79A;
    --olive-dk:  #9BD3A6;
    --olive-lt:  #17281C;
    --accent:    #8CC79A;

    /* Full clay glares on a dark ground, so it lifts to a warm ink and the
       fills drop to the deep end. */
    --warn:      #F0A47C;
    --warn-lt:   #2A1811;
    --yellow:    #F0A47C;
    --yellow-dk: #F6BFA0;
    --yellow-lt: #2A1811;
    --orange:    #F0A47C;
    --orange-lt: #2A1811;
    --danger:    #E98A7E;
    --danger-lt: #2A1412;   /* --danger reads 6.96:1 on it */
    --info-lt:   #0F1F2B;   /* --info reads 9.05:1 on it */
    --violet-lt: #1C1528;   /* --violet reads 8.50:1 on it */
    --info:      #8EC5EA;   /* 9.05:1 on the card */
    --violet:    #C3A6F5;   /* 8.06:1 on the card */

    --on-dark:    #9BD3A6;
    --on-dark-lt: #C3E3CB;
    --rail-bg:       #0C1810;
    --menu-bg:       #161E29;
    --menu-line:     #212B38;
    --menu-ink:      #B4BECC;
    --menu-ink-strong:#EDF0F3;
    --menu-ink-2:    #8FA0B2;
    --menu-hover:    #1B2433;
    --menu-active:   #17281C;
    --menu-active-ink:#9BD3A6;

    /* Dark twin of --card-borrowed: warm enough to read as "not yours",
       dim enough that a column of them is not a wall of clay. */
    --card-borrowed:    #241A14;
    --card-borrowed-bd: #433124;
    --ink-over: #E98A7E;
    --row-surface: #161E29;
    --row-today: #15241A;  --rail-today: #17281C;  --edge-today: #2C4733;
    --row-over:  #241812;  --rail-over:  #2A1811;  --edge-over:  #4A2D1F;
    --pill-today:#1E3524;  --pill-over:  #3A2419;
    --card-edge-over:     #A3574A;
    --card-edge-borrowed: #8A5E2E;
  }
  /* Dark text on mid-green reads better than white here: white on #3F6B44 is
     only 3.2:1, dark is 5.58:1. */
  [data-theme="dark"] .btn-primary       { background: var(--green); color: #17281C; }
  [data-theme="dark"] .btn-primary:hover { background: var(--green-dk); color: #17281C; }

  /* body & main canvas */

  [data-theme="dark"] #topbar         { background: #1B2433 !important; border-bottom-color: #26303D !important; }[data-theme="dark"] .mobile-topbar { border-bottom-color: #26303D !important; }

  /* sidebar stays dark, just deepen it */
  [data-theme="dark"] #sidebar        { background: var(--menu-bg); }

  /* cards */

  /* tables */
  [data-theme="dark"] table           { color: #EDF0F3; }
  [data-theme="dark"] thead tr,
  [data-theme="dark"] thead th        { background: #1B2433 !important; color: #B4BECC !important; border-color: #26303D !important; }
  [data-theme="dark"] tbody tr        { border-bottom-color: #26303D !important; }
  [data-theme="dark"] tbody tr:hover  { background: #1B2433 !important; }
  [data-theme="dark"] tfoot tr        { background: #1B2433 !important; border-top-color: #26303D !important; }
  [data-theme="dark"] td              { border-color: #26303D !important; }

  /* sticky table cells (lots have background:white inline) */
  [data-theme="dark"] td[style*="position:sticky"],
  [data-theme="dark"] th[style*="position:sticky"] { background: #1B2433 !important; }

  /* inputs / selects / textareas */
  [data-theme="dark"] input,
  [data-theme="dark"] select,
  [data-theme="dark"] textarea        { background: #1B2433 !important; color: #EDF0F3 !important; border-color: #3E4756 !important; }
  [data-theme="dark"] input:focus,
  [data-theme="dark"] select:focus,
  [data-theme="dark"] textarea:focus  { border-color: var(--yellow) !important; }
  [data-theme="dark"] input[type=checkbox] { accent-color: var(--yellow); }
  [data-theme="dark"] input[disabled],
  [data-theme="dark"] select[disabled] { opacity: 0.4; }/* modals */ [data-theme="dark"] .modal { color: #EDF0F3; border-color: #26303D; }
  [data-theme="dark"] .modal-overlay  { background: rgba(0,0,0,0.65) !important; }

  /* dropdowns / panels */
  [data-theme="dark"] .status-dropdown-panel,
  [data-theme="dark"] .notif-item     { border-bottom-color: #26303D !important; }
  [data-theme="dark"] .notif-item:hover { background: #1B2433 !important; }
  [data-theme="dark"] .notif-item.unread { background: #2a2300 !important; }
  [data-theme="dark"] .notif-hdr      { border-bottom-color: #26303D !important; }

  /* any inline background:white not covered above */
  [data-theme="dark"] div[style*="background:white"],
  [data-theme="dark"] div[style*="background: white"] { background: #1B2433 !important; }

  /* tabs / pill buttons */
  [data-theme="dark"] .tab-btn        { background: #1B2433 !important; color: #95A1B0 !important; border-color: #38383850 !important; }
  [data-theme="dark"] .tab-btn.active { background: var(--yellow) !important; color: #161E29 !important; }

  /* badges */
  [data-theme="dark"] .badge-green    { background: #17281C !important; color: #8CC79A !important; }
  [data-theme="dark"] .badge-orange   { background: #2a1600 !important; color: #fb923c !important; }
  [data-theme="dark"] .badge-red      { background: #2A1512 !important; color: #E98A7E !important; }
  [data-theme="dark"] .badge-blue     { background: #0a1a2e !important; color: #60a5fa !important; }
  [data-theme="dark"] .vg-pillar-blue   { background:#0a1a2e !important; color:#60a5fa !important; }
  [data-theme="dark"] .vg-pillar-orange { background:#2a1600 !important; color:#fb923c !important; }
  [data-theme="dark"] .vg-pillar-gray   { background:#1B2433 !important; color:#95A1B0 !important; }
  [data-theme="dark"] .vg-pillar-green  { background:#17281C !important; color:#8CC79A !important; }
  [data-theme="dark"] .vg-pillar-purple { background:#241a3d !important; color:#c4b5fd !important; }
  [data-theme="dark"] .vg-pillar-pink   { background:#3d1a2e !important; color:#f9a8d4 !important; }
  [data-theme="dark"] .badge-gray     { background: #1B2433 !important; color: #95A1B0 !important; }

  /* alert boxes */
  [data-theme="dark"] .alert-info     { background: #0a1a2e !important; color: #93c5fd !important; border-color: #1e3a5f !important; }
  [data-theme="dark"] .alert          { border-color: #38383850 !important; }

  /* topbar title + misc text */
  [data-theme="dark"] .topbar-title   { color: #EDF0F3; }
  [data-theme="dark"] a               { color: #8CC79A; }

  /* dark mode toggle button itself */
  #dark-toggle {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; cursor: pointer; border-radius: var(--radius-btn);
    font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.15s; width: 100%; margin-bottom: 6px;
  }
  #dark-toggle:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
  #dark-toggle .dt-track {
    width: 28px; height: 16px; border-radius: 8px; background: rgba(255,255,255,0.2);
    position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  #dark-toggle .dt-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,0.7); transition: transform 0.2s;
  }
  [data-theme="dark"] #dark-toggle .dt-track { background: var(--yellow); }
  [data-theme="dark"] #dark-toggle .dt-thumb { transform: translateX(12px); background: #161E29; }
  [data-theme="dark"] #dark-toggle { color: rgba(255,255,255,0.75); }
  /* ── SETTINGS DROPDOWN (topbar) ── */
  .settings-dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; font-size: 13px; font-weight: 500;
    color: var(--text); cursor: pointer; background: none;
    border: none; width: 100%; text-align: left;
    border-bottom: 1px solid var(--border); transition: background 0.1s;
  }
  .settings-dd-item:last-child { border-bottom: none; }
  .settings-dd-item:hover { background: var(--gray-1,#f5f5f0); }
  .settings-dd-item.danger { color: var(--danger); }
  [data-theme="dark"] .settings-dd-item.danger { color: #E98A7E; }
  .settings-dt-track { width: 24px; height: 12px; background: rgba(0,0,0,0.18); border-radius: var(--radius-btn); display: flex; align-items: center; flex-shrink: 0; transition: background 0.2s; }
  .settings-dt-thumb { width: 10px; height: 10px; border-radius: 50%; background: white; margin: 1px; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s; }
  [data-theme="dark"] .settings-dt-track { background: var(--yellow,#d4a017); }
  [data-theme="dark"] .settings-dt-thumb { transform: translateX(12px); background: #161E29; }/* ── DARK MODE: stat cards ── */ [data-theme="dark"] .stat-card { border-color: #26303D !important; }
  [data-theme="dark"] .stat-val    { color: #EDF0F3 !important; }

  /* ── DARK MODE: leave + OT mobile card rows (has background:white !important in @media) ── */
  [data-theme="dark"] #my-leave-wrap tr,
  [data-theme="dark"] #my-ot-wrap tr   { background: #1B2433 !important; border-color: #26303D !important; color: #EDF0F3 !important; }
  [data-theme="dark"] #my-leave-wrap td,
  [data-theme="dark"] #my-ot-wrap td   { color: #EDF0F3 !important; border-color: #26303D !important; }

  /* ── DARK MODE: yellow-lt banners (attention / warnings) ── */
  [data-theme="dark"] .alert-warn,
  [data-theme="dark"] details[style*="background:var(--yellow-lt)"] { background: #2a1a00 !important; border-color: #5a3a00 !important; color: #fcd34d !important; }

  /* ── DARK MODE: chip-btn states ── */
  [data-theme="dark"] .chip-btn           { background: #1B2433 !important; border-color: #3E4756 !important; color: #EDF0F3 !important; }
  [data-theme="dark"] .chip-btn.is-set    { background: #17281C !important; border-color: var(--green) !important; color: #8CC79A !important; }
  [data-theme="dark"] .chip-btn.c-blue    { background: #0a1a2e !important; border-color: #60a5fa !important; color: #93c5fd !important; }
  [data-theme="dark"] .chip-btn.c-amber   { background: #2a1600 !important; border-color: #fb923c !important; color: #fcd34d !important; }
  [data-theme="dark"] .chip-btn.c-red     { background: #2A1512 !important; border-color: #E98A7E !important; color: #fca5a5 !important; }
  [data-theme="dark"] .chip-btn.c-violet  { background: #241a3d !important; border-color: #c4b5fd !important; color: #c4b5fd !important; }
  [data-theme="dark"] .chip-panel         { background: #1B2433 !important; border-color: #3E4756 !important; }

  /* The hero sub used to be white-alpha over a dark band. It reads --gray-4
     now, which dark mode already redefines, so there is nothing to override. */

  /* ── DARK MODE: tab bar ── */
  /* :not(.ac-tabs) for the same reason as the .tab.active rule below: this sets
     an ink with !important on EVERY tab, so it outranks any later rule however
     specific, and the Tasks pills were rendering #95A1B0 on their own --green
     ground. Third time a blanket dark override has reached into a component it
     was never written for. */
  [data-theme="dark"] .tabs:not(.ac-tabs) .tab { color: #95A1B0 !important; border-bottom-color: #26303D !important; }
  /* :not(.ac-tabs) because this was written for the UNDERLINE tabs — yellow ink
     under a yellow border on the page ground. The Tasks strip is pills with a
     --green ground, and this rule's !important beat the pill's own ink there:
     --yellow on --green measured 1.19:1 in dark. A blanket !important theme
     override silently outranks every component rule written after it, so the
     fix is to stop the blanket covering a component it was never about. */
  [data-theme="dark"] .tabs:not(.ac-tabs) .tab.active { color: var(--yellow) !important; border-bottom-color: var(--yellow) !important; }
  [data-theme="dark"] .tabs              { border-bottom-color: #26303D !important; }/* ── DARK MODE: goal-modal + modal content ── */ [data-theme="dark"] .modal-sec { border-color: #26303D !important; }
  [data-theme="dark"] .modal-overlay     { background: rgba(0,0,0,0.7) !important; }

  /* ── DARK MODE: seg (filter toggles) ── */
  /* :not(.ac-view) — the Tasks Week/Board/List switch carries its own green,
     and this forced --yellow onto it, so "Board" came out peach in dark. */
  [data-theme="dark"] .seg-opt:not(.ac-view)        { background: #1B2433 !important; border-color: #3E4756 !important; color: #95A1B0 !important; }
  [data-theme="dark"] .seg-opt.active:not(.ac-view) { background: var(--yellow) !important; color: #161E29 !important; border-color: var(--yellow) !important; }

  /* ── DARK MODE: form-row labels ── */
  [data-theme="dark"] .form-row label    { color: #B4BECC !important; }
  [data-theme="dark"] label              { color: #B4BECC; }

  /* ── DARK MODE: EDD annual data review banner ── */
  [data-theme="dark"] .edd-banner { background: #1a2744 !important; border-color: rgba(96,165,250,0.35) !important; }
  [data-theme="dark"] .edd-banner div[style*="font-weight:700"] { color: #60a5fa !important; }
  [data-theme="dark"] .edd-banner div[style*="font-size:12px"]  { color: rgba(96,165,250,0.7) !important; }
  [data-theme="dark"] .edd-banner button { background: #2563eb !important; color: #fff !important; border-color: transparent !important; }

  /* ── DARK MODE: secondary/neutral buttons (Regularise, plain btn-sm etc) ── */
  [data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger) {
    background: #1B2433 !important; border-color: #3E4756 !important; color: #EDF0F3 !important; }

  /* ── DARK MODE: Org Chart Edit rs-tbody rows ── */
  [data-theme="dark"] #rs-tbody tr { background: #1B2433 !important; border-color: #26303D !important; }
  [data-theme="dark"] #rs-tbody select { background: #1B2433 !important; color: #EDF0F3 !important; border-color: #3E4756 !important; }

  /* ── DARK MODE: kanban column background ── */
  [data-theme="dark"] .ac-kanban-col { background: #161E29 !important; border-color: #26303D !important; }

  /* ═══════════════════════════════════════════════════════════
     #63 — My Week and My Team boards (Tasks tab)
     The point of both is the SHAPE of the week, so load bars and column
     widths do more work here than typography does.
  ═══════════════════════════════════════════════════════════ */
  /* The task card shared by the kanban columns and both My Week views. These
     are the values it has always had; they moved off the element so that
     .awk-cards below can override them, which an inline style makes
     impossible whatever the specificity of the rule. */
  .ac-kcard { background:var(--cbg,var(--card-bg,#fff)); border:1px solid var(--cbd,var(--border));
    border-radius:9px; padding:10px 11px; }
  /* 1b draws the accent as a 3px bar down the left edge. A border-left is the
     same three pixels without a wrapper element around every card. */
  .ac-kanban-col .ac-kcard { border-left:3px solid var(--acc,var(--border)); padding-left:9px; }

  /* ── the board's columns, measured off 1b ──
     278 wide, 10/9 padding, 8 between cards, and tinted by what the column
     MEANS: warm for the late pile, green for today, quiet for the rest. The
     tints are --warn-lt and --green-lt rather than the mock's raw hexes, so
     they flip with the theme like every other tinted ground here. */
  /* No border: the tint IS the edge in 1b, and a hairline on top of it made
     the inner width 258 where the design's is 260. */
  .ac-kanban-col { flex:0 0 278px; background:var(--gray-1); border:none;
    border-radius:10px; padding:10px 9px; display:flex; flex-direction:column; }
  .ac-kanban-col.is-late  { background:var(--warn-lt); }
  .ac-kanban-col.is-today { background:var(--green-lt); }
  .ac-kanban-col.is-empty { flex:0 0 160px; opacity:.75; }
  .ac-kcol-h { display:flex; align-items:center; gap:8px; padding:0 2px 9px; }
  .ac-kcol-h > b { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
                   color:var(--gray-3); white-space:nowrap; }
  .ac-kanban-col.is-late  .ac-kcol-h > b, .ac-kanban-col.is-late  .ac-kcol-n { color:var(--warn); }
  .ac-kanban-col.is-today .ac-kcol-h > b { color:var(--green); }
  .ac-kcol-s { font-size:12px; color:var(--gray-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ac-kcol-h > i { flex:1; }
  .ac-kcol-n { font-size:12px; font-weight:700; color:var(--gray-4); }
  .ac-kcol-h input[type=checkbox] { width:14px; height:14px; cursor:pointer; flex:0 0 auto; }
  .ac-kcol-b { display:flex; flex-direction:column; gap:8px; }
  .ac-kcol-e { font-size:11.5px; color:var(--gray-4); padding:8px 2px; }

  /* Two tiers, because one was a paragraph. The view buttons, both toggles,
     the tint key and a thirty-word explanation were on a single wrapping row,
     which said they were all equally important and, on a laptop, wrapped the
     sentence under the buttons and pushed the board down the page. The things
     you click stay on the first line; the two sentences that explain the board
     move to a quieter strip of their own. */
  .awk-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    font-size:11.5px; color:var(--gray-4); margin-bottom:8px; }
  /* The date range earns the right-hand end: it is the one thing here you read
     rather than operate, and "which seven days am I even looking at" is not
     answered anywhere else on the board — the rails say Wed 26, not the year. */
  .awk-range { margin-left:auto; font-weight:600; white-space:nowrap; }
  .awk-key { display:inline-flex; align-items:center; gap:6px; }
  .awk-key i { width:22px; height:11px; border-radius:3px; border:1px solid; display:inline-block; }
  .awk-toggle { display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
    color:var(--gray-4); font-weight:600; cursor:pointer; margin:0; }

  /* ─── TASKS: the page frame ───
     Row one is the tab strip with + New task at its head. Row two is HOW you
     are looking at whatever that tab holds: the view, the search, the filters,
     and whether the ones sitting with an approver are showing.

     Scoped to .ac-tabs on purpose. The underline-and-yellow tabs every other
     page uses are not touched — this one strip carries a primary button and
     six counts, and an underline under a button reads as a broken control. */
  .ac-tabs { border-bottom: none; align-items: center; gap: 4px; padding-bottom: 2px; }
  .ac-tabs .tab { border-bottom: none; margin-bottom: 0; border-radius: 999px;
                  padding: 7px 14px; white-space: nowrap; }
  .ac-tabs .tab:hover { background: var(--gray-1); }
  /* --green and --green-lt flip together, so this pair is legible in both
     themes. It is the same pair .seg-opt.active already uses. */
  .ac-tabs .tab.active { background: var(--green); color: var(--green-lt); }
  /* The count inherits the pill rather than keeping its own grey ground, which
     would be a second background to get right in two themes for no gain. */
  .ac-tabs .tab.active .badge { background: transparent; color: inherit; opacity: .85; }
  .ac-newtask { flex: 0 0 auto; margin-right: 8px; }

  .ac-tbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .ac-tbar-seg { display: inline-flex; flex: 0 0 auto; }
  .ac-tbar .seg-opt { flex: 0 0 auto; min-width: 0; padding: 6px 14px; font-size: 12.5px; }
  /* The search box takes the room left over. It was 160px and fixed, which is
     narrower than the placeholder it now carries. */
  .ac-tbar-q { flex: 1 1 220px; min-width: 0; font-size: 12.5px; padding: 7px 11px;
               border: 1px solid var(--border); border-radius: 8px;
               background: var(--card-bg); color: var(--text); }
  .ac-rev { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
            font-size: 12px; color: var(--gray-4); font-weight: 600; cursor: pointer; margin: 0; }
  .ac-rev input { width: 14px; height: 14px; margin: 0; cursor: pointer; }

  /* The view switch is a toolbar control on a desktop and a MENU item on a
     phone — her call, 2026-09-13: "keep the tabs, but move the view switch
     behind the menu." At 375 the tabs, the switch, the search and the review
     box were four rows of chrome above the first task. */
  .ac-dr-views, .ac-rev-dr { display: none; }
  .ac-dr-l { font-size: 11px; font-weight: 700; letter-spacing: .05em;
             text-transform: uppercase; color: var(--gray-3); }
  .ac-tb-narrow { display: none; }
  @media (max-width: 768px) {
    /* The phone's own Add menu already offers New task, and inside a strip
       that scrolls sideways this button scrolls off and stops existing. */
    .ac-newtask { display: none; }
    /* 5a: "search collapses to a field shared with Filters". One row, two
       controls, and everything else — the view switch, the status filter,
       group, sort, who, source and the in-review box — behind the one button.
       Four rows of chrome above the first task is what this replaces. */
    .ac-tbar-q { flex: 1 1 120px; order: 1; }
    .ac-tbar > .btn { order: 2; flex: 0 0 auto; }
    .ac-tbar-seg { display: none; }
    .ac-rev-bar { display: none; }
    .ac-dr-views { display: flex; align-items: center; gap: 8px; flex: 1 1 100%;
                   flex-wrap: wrap; margin-bottom: 2px; }
    .ac-rev-dr { display: inline-flex; flex: 1 1 100%; }
    /* Nobody looks for "List" under a word that only says Filters. */
    .ac-tb-wide { display: none; }
    .ac-tb-narrow { display: inline; }
  }

  /* ─── TASKS: groups, the late pile, and what is folded away ─── */
  /* Measured off 1c: a tinted band at 12px 16px, the day in small caps, the
     date beside it, the count at the far end where the counts line up down the
     page and can be read as a column. */
  .ac-ghead { display: flex; align-items: center; gap: 9px; padding: 12px 16px;
              background: var(--band); border-top: 1px solid var(--border); }
  .ac-ghead:first-child { border-top: none; }
  .ac-ghead > b { font-size: 11px; font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--gray-3); }
  .ac-ghead input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; }
  .ac-gdate { font-size: 12px; line-height: 16px; color: var(--gray-3); }
  .ac-gcount { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gray-4); }

  /* ── a task, on one line ── */
  .ac-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
            border-bottom: 1px solid var(--border); cursor: pointer; }
  .ac-row:hover { background: var(--gray-1); }
  .ac-row.is-sel { background: var(--green-lt); }
  .ac-tick { flex: 0 0 auto; width: 19px; height: 19px; border-radius: 999px; cursor: pointer;
             display: flex; align-items: center; justify-content: center; line-height: 1;
             font-size: 11px; border: 1.5px solid var(--gray-3); background: none; color: var(--green-lt); }
  .ac-tick.is-done  { background: var(--green); border-color: var(--green); }
  .ac-tick.is-gated { border-style: dashed; border-color: var(--warn); }
  .ac-row-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-row-t.is-done { text-decoration: line-through; color: var(--gray-4); font-weight: 500; }
  .ac-row-m { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
  /* 4a puts the number INLINE with the title, because a phone has no right-hand
     column to hang a chip in. On a desktop the chip does that job, so only one
     of the two is ever on screen. */
  .ac-row-i { display: none; color: var(--gray-3); font-weight: 600; }
  /* The flag alone is enough beside a date column; on a phone the word goes
     with it, because a small coloured flag on its own is not a priority. */
  .ac-row-pr { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
  .ac-row-pr > span { display: none; }
  .ac-row-pr.p1 { color: var(--danger); }
  .ac-row-pr.p2 { color: var(--warn); }
  .ac-row-pr.p3 { color: var(--gray-4); }
  .ac-row-pr.p4 { color: var(--gray-4); }
  @media (min-width: 769px) { .ac-row-pr.p3 { display: none; } }
  .ac-row-n { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 5px;
              line-height: 1.35; background: var(--gray-2); color: var(--gray-3); }
  .ac-row-un { width: 22px; height: 22px; border-radius: 999px; display: flex;
               align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
               background: var(--warn-lt); color: var(--warn); }
  /* A fixed width so the dates line up as a column however long the titles are. */
  .ac-row-d { flex: 0 0 auto; min-width: 62px; text-align: right;
              font-size: 12.5px; font-weight: 600; color: var(--gray-3); }
  .ac-row-d.is-late { color: var(--danger); }
  /* The date is the right-hand column on a desktop, so it goes last there; on a
     phone it reads in the sentence "Critical · 11 Sept · FE" and comes first. */
  @media (min-width: 769px) { .ac-row-d { order: 1; } }
  /* A late row carries the band's own tint, as it does in 4a. */
  .ac-row.is-late { background: var(--danger-lt); }
  .ac-row.is-late:hover { background: var(--danger-lt); filter: brightness(.98); }
  @media (max-width: 768px) {
    /* A phone has no room for a right-hand column, so the title takes the
       width and the meta drops under it rather than squeezing the title to
       nothing. */
    .ac-row { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
    /* The tick stays beside the title; it is the title's control. Only the
       meta drops, indented to the title's own left edge. */
    .ac-row-t { flex: 1 1 0; white-space: normal; }
    .ac-row-m { flex: 1 1 100%; margin-left: 31px; }
    .ac-row-d { min-width: 0; }
    .ac-tick { margin-top: 1px; }
    .ac-row-i { display: inline; }
    .ac-row-n { display: none; }          /* it is inline in the title instead */
    .ac-row-pr > span { display: inline; }
  }
  .ac-empty-day { padding: 9px 16px 12px; font-size: 12px; color: var(--gray-4); }
  .ac-more { display: block; width: 100%; text-align: left; padding: 9px 16px;
             border: none; background: none; cursor: pointer; font-size: 12px;
             font-weight: 600; color: var(--green-dk); }
  .ac-more:hover { background: var(--gray-1); }

  /* The late pile. Its own ground because it is the one thing on this page you
     act on as a group, and --danger-lt flips with --danger so the pairing holds
     in both themes. */
  .ac-late { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             padding: 12px 16px; background: var(--danger-lt);
             border-bottom: 1px solid var(--border); }
  .ac-late-n { font-size: 26px; line-height: 1; font-weight: 700; color: var(--danger); }
  .ac-late-t { flex: 1 1 220px; min-width: 0; font-size: 12.5px; color: var(--gray-4); }
  .ac-late-t > b { display: block; font-size: 13.5px; color: var(--text); }
  .ac-late .btn { flex: 0 0 auto; background: var(--card-bg); }
  .ac-folded { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 2px; }
  .ac-folded > span { font-size: 12px; color: var(--gray-4); }
  .ac-kanban-col .ac-more { padding: 7px 2px; font-size: 11.5px; }

  /* ─── TASKS: the task view ───
     Measured off 2b rather than eyeballed: rail 312px, label 9.5px/700 at
     .07em, value 13px, the two-up grid 149+149 with 13/14 gaps, file cards
     radius 9 with a 30px type badge, footer band on --gray-1 at 14px 24px.

     The first attempt kept the chip buttons and stood them in a column. That
     gave eleven fat pills all wearing the same border whether their value was
     set or not, and no way to change anything without opening a panel. This is
     a fact SHEET: label, value, and the one verb that belongs to it. */
  .tv-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 980px) {
    .tv-grid { grid-template-columns: minmax(0,1fr) 312px; gap: 26px; align-items: start; }
    .tv-side { order: 2; }
    .tv-main { order: 1; }
  }
  .tv-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .tv-main { display: flex; flex-direction: column; }
  /* One less box between .tv-side and the blocks it is spacing. Declared HERE,
     above the phone media query that gives it a real box back — a media query
     adds no specificity, so a plain rule after it wins whatever the width. */
  .tv-rail { display: contents; }

  /* ── 6b: two tabs on a phone ──
     The nine setting rows and the working record are two different visits. On a
     desktop they sit side by side; at 375 there is no "beside", so they are
     tabs and the WORK opens first. display:contents on both columns lets the
     files block — which belongs to the rail on a desktop — sit between the
     notes and the checklist here, which is the order 6b asks for, without the
     markup being written twice. */
  .tv-cog, .tv-back { display: none; }
  @media (max-width: 979px) {
    /* A cog with the count on it, sat beside the title, instead of a row of two
       full-width tabs. The work is not a tab — it is the sheet. */
    .tv-cog, .tv-back { display: inline-flex; align-items: center; gap: 5px;
              flex: 0 0 auto; margin-top: 2px;
              padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
              background: var(--card-bg); color: var(--gray-4);
              font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
    /* A drawn gear, not the \u2699 text glyph, which renders as a hairline on
       a phone. tnEm sizes in em; at 13px the drawing needs a touch more. */
    .tv-cog > svg { width: 16px; height: 16px; }
    .tv-cog > b { font-weight: 700; color: var(--text); }
    .tv-cog:hover, .tv-back:hover { border-color: var(--gray-3); color: var(--text); }
    /* It said "\2039 Work" until 2026-09-14, which named a tab that stopped
       existing when the cog replaced the two-tab row: the work IS the sheet.
       A back arrow on its own now, sized so it is still a comfortable target
       without a word propping it up. */
    .tv-back { color: var(--green); border-color: var(--green); font-weight: 600;
               justify-content: center; min-width: 38px; font-size: 17px;
               line-height: 1; padding-top: 4px; padding-bottom: 4px; }

    .tv-grid { display: flex; flex-direction: column; gap: 0; }
    .tv-main, .tv-side { display: contents; }
    .tv-notes-blk { order: 2; }
    .tv-files     { order: 3; margin-top: 18px; }
    .tv-rest-blk  { order: 4; }
    /* Everything else the rail holds is a SETTING and sorts after the work.
       .tv-rail is display:contents on a desktop, which generates no box — so
       `order` on it did nothing and its nine rows escaped to the top of the
       flex container, above the tabs. It gets a real box here. */
    .tv-side > *  { order: 5; }
    .tv-files     { order: 3; }
    .tv-rail { display: flex; flex-direction: column; gap: 9px; order: 5; }

    /* The work: everything the rail holds goes, except the files. */
    .tv-grid.is-work .tv-rail,
    .tv-grid.is-work #ad-panel,
    .tv-grid.is-work .tv-src,
    .tv-grid.is-work .tv-gate,
    .tv-grid.is-work .tv-more-btn,
    .tv-grid.is-work .tv-side > .tv-f-blk:not(.tv-files) { display: none; }
    /* The settings: the work goes, files with it — they are work. */
    .tv-grid.is-set .tv-notes-blk,
    .tv-grid.is-set .tv-rest-blk,
    .tv-grid.is-set .tv-files { display: none; }
    .tv-grid.is-set .tv-rail { margin-top: 4px; }
  }
  .tv-main { min-width: 0; }

  /* Which ticket, where it has got to, when it is owed, when it was raised.
     Above the title, because it is what you check before reading it. */
  .tv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
             font-size: 12px; color: var(--gray-4); margin-bottom: 2px; }
  .tv-meta > b { font-size: 13px; font-weight: 600; color: var(--text); }
  .tv-stat { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; line-height: 1.3;
             background: var(--green-lt); color: var(--green); }
  .tv-stat.is-in_progress { background: var(--info-lt);   color: var(--info); }
  .tv-stat.is-review      { background: var(--violet-lt); color: var(--violet); }
  .tv-stat.is-hold,
  .tv-stat.is-on_hold     { background: var(--warn-lt);   color: var(--warn); }
  .tv-stat.is-done        { background: var(--green-lt);  color: var(--green); }

  /* ── a fact ── */
  .tv-fs { display: flex; flex-direction: column; gap: 10px; }
  .tv-f  { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .tv-f.is-tint { background: var(--green-lt); border-radius: 9px; padding: 9px 12px; }
  .tv-f.is-late { background: var(--danger-lt); border-radius: 9px; padding: 9px 12px; }
  .tv-f-b { flex: 1; min-width: 0; cursor: pointer; border-radius: 6px; }
  .tv-f-b:hover .tv-f-v { text-decoration: underline; text-underline-offset: 2px; }
  .tv-f-l { font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--gray-3); line-height: 1.26; }
  .tv-f-v { font-size: 13px; font-weight: 700; color: var(--text); margin-top: 1px;
            line-height: 1.45; overflow: hidden; text-overflow: ellipsis; }
  .tv-fs > .tv-f:first-child .tv-f-v { font-size: 14px; line-height: 1.36; }
  .tv-f.is-tint .tv-f-v { color: var(--green); }
  .tv-f.is-late .tv-f-v { color: var(--danger); }
  /* Who has actually laid eyes on this task. It sits inside the owner value,
     so inline-block is doing real work: text-decoration propagates to in-flow
     descendants and a child cannot switch it off, and without this the hover
     underline on the owner name would run through these lines too. Colour is
     set per line on the element, from tokens, because the three states carry
     different weight and the palette inverts between themes. */
  .tv-seen { display: inline-block; margin-top: 5px; font-size: 11.5px;
             font-weight: 600; line-height: 1.45; letter-spacing: 0; }
  /* The verdict is the control. A bordered button here would read as an action
     on the task, which it is not, so it is a line of text with a caret. */
  .tv-seen-sum { display: block; width: 100%; text-align: left; border: none;
                 background: none; padding: 0; margin: 0; cursor: pointer;
                 font: inherit; color: inherit; }
  .tv-seen-car { display: inline-block; margin-right: 4px; font-size: 9px;
                 transition: transform .12s ease; }
  .tv-seen-sum.is-open .tv-seen-car { transform: rotate(90deg); }
  .tv-seen-all { margin-top: 3px; padding-left: 13px; }
  .tv-seen-all > div + div { margin-top: 2px; }
  /* The verb, not a button: a bordered control here would make five of them
     compete with Start at the bottom, which is the only real button on screen. */
  .tv-f-a { flex: 0 0 auto; border: none; background: none; padding: 0; cursor: pointer;
            font-size: 12px; font-weight: 600; color: var(--green); }
  .tv-f-a:hover { text-decoration: underline; }

  .tv-prio { gap: 8px; }
  .tv-prio-pick { display: flex; gap: 2px; flex: 0 0 auto; }
  .tv-flag { border: 1px solid transparent; background: none; cursor: pointer; padding: 2px 4px;
             color: inherit;
             border-radius: 6px; line-height: 1; opacity: .34; }
  .tv-flag:hover { opacity: .7; background: var(--gray-1); }
  .tv-flag.is-on { opacity: 1; border-color: var(--border); background: var(--gray-1); }

  /* ── a block with its own small heading ── */
  .tv-f-blk { display: flex; flex-direction: column; gap: 7px; }
  .tv-sec { display: flex; align-items: center; gap: 7px; }
  .tv-sec > span { font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
                   text-transform: uppercase; color: var(--gray-3); white-space: nowrap; }
  .tv-main .tv-sec > span { font-size: 10.5px; }
  .tv-sec > b { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; line-height: 1.36;
                background: var(--gray-2); color: var(--gray-4); }
  .tv-sec > i { flex: 1; height: 1px; background: var(--border); }
  .tv-sec-a { flex: 0 0 auto; border: none; background: none; padding: 0; cursor: pointer;
              font-size: 12px; font-weight: 600; color: var(--green); }
  .tv-main .tv-sec-a { font-size: 12.5px; }
  .tv-sec-a:hover { text-decoration: underline; }
  .tv-main .tv-sec { margin: 20px 0 8px; }
  .tv-main .tv-sec:first-child { margin-top: 0; }

  .tv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .tv-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; line-height: 1.35;
            background: var(--info-lt); color: var(--info); border: 1px solid var(--border); }
  .tv-tag.is-none { background: none; color: var(--gray-4); border-style: dashed;
                    font-weight: 600; cursor: pointer; }

  /* Neither of these needs a whole row. */
  .tv-2up { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; }
  .tv-2up .tv-f { gap: 0; }

  /* A field sitting at its default earns one line, not two. Label and value
     side by side, quieter, about half the height -- and a field somebody has
     actually set keeps the full label-above-value treatment, so what is set
     stands out from what is not.
     Fiyana, 2026-09-14: "if there are no tags, no department, visibility
     needs to be edited, etc., then it can be shown in a smaller way." */
  .tv-f.is-quiet .tv-f-b { display: flex; align-items: baseline; gap: 7px; }
  .tv-f.is-quiet .tv-f-l { flex: 0 0 auto; margin: 0; }
  .tv-f.is-quiet .tv-f-v { font-size: 12px; font-weight: 600; color: var(--gray-4); margin: 0; }

  .tv-goal { font-size: 13px; line-height: 1.4; }
  /* The blocks at the foot of the rail -- link to a goal, where it was raised
     from, who signs it off -- had nothing between them and read as one lump.
     Each gets air and a hairline above it, so they read as separate answers. */
  .tv-side > .tv-goal,
  .tv-side > .tv-gate,
  .tv-side > .tv-src,
  .tv-side > .tv-f-blk + .tv-f-blk { margin-top: 14px; padding-top: 14px;
                                     border-top: 1px solid var(--border); }
  .tv-empty { font-size: 12.5px; color: var(--gray-4); }
  .tv-more-btn { align-self: flex-start; border: 1px dashed var(--border); background: none;
                 border-radius: 8px; padding: 7px 12px; cursor: pointer;
                 font-size: 12.5px; color: var(--gray-4); }
  .tv-more-btn:hover { border-style: solid; color: var(--text); }

  /* ── a file, as a card ──
     A row of pale pills said nothing but a label. What kind of file, how big,
     who put it there and when is what tells you whether the .xlsx in front of
     you is the one somebody mentioned in a comment. */
  .tv-file { display: flex; align-items: center; gap: 9px; padding: 8px 10px;
             border: 1px solid var(--border); border-radius: 9px; background: var(--card-bg); }
  .tv-file-k { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; padding: 0;
               display: flex; align-items: center; justify-content: center;
               font-size: 9px; font-weight: 700; letter-spacing: .02em; }
  .k-red    { background: var(--danger-lt); color: var(--danger); }
  .k-blue   { background: var(--info-lt);   color: var(--info); }
  .k-green  { background: var(--green-lt);  color: var(--green); }
  .k-violet { background: var(--violet-lt); color: var(--violet); }
  .k-amber  { background: var(--warn-lt);   color: var(--warn); }
  .k-grey   { background: var(--gray-2);    color: var(--gray-4); }
  .tv-file-b { flex: 1; min-width: 0; }
  .tv-file-n { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
  .tv-file-m { font-size: 11px; color: var(--gray-4); margin-top: 1px; line-height: 1.45; }
  .tv-file-x { flex: 0 0 auto; border: 1px solid var(--border); background: var(--card-bg);
               border-radius: 6px; width: 24px; height: 24px; cursor: pointer;
               font-size: 11px; color: var(--gray-4); text-decoration: none;
               display: flex; align-items: center; justify-content: center; }
  .tv-file-x:hover { border-color: var(--gray-3); color: var(--text); }

  .tv-gate { font-size: 12.5px; color: var(--gray-4); line-height: 1.45;
             padding: 10px 12px; background: var(--gray-1); border-radius: 9px; }
  .tv-gate b { color: var(--text); }
  .tv-gate-a { display: flex; gap: 12px; margin-top: 5px; }
  .tv-gate-a button { border: none; background: none; padding: 0; cursor: pointer;
                      font-size: 12px; font-weight: 600; color: var(--green-dk); }
  .tv-gate-a button:hover { text-decoration: underline; }

  /* 2b reads the note as prose at 14px/1.65, not as a bordered box. */
  .tv-note { font-size: 14px; line-height: 1.65; white-space: pre-wrap; cursor: text; }
  /* #169: a rendered note is already divs and lists, so pre-wrap would double
     every break it has just been given. The markers are gone by the time this
     runs -- the text is escaped first and the formatting added to what is
     already safe. */
  .tv-note.is-rich { white-space: normal; }
  .tv-note.is-rich ul, .tv-note.is-rich ol { margin: 3px 0 3px 18px; padding: 0; }
  .tv-note.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
                        overflow: hidden; }
  .tv-note-more { border: none; background: none; padding: 4px 0 0; cursor: pointer;
                  font-size: 13px; font-weight: 600; color: var(--green); }
  .tv-note-more:hover { text-decoration: underline; }
  .tv-notes { width: 100%; font-size: 14px; line-height: 1.65; }

  /* ── a picker you can leave ──
     The only way to shut the owner picker was to press "Hand over" a second
     time, which nobody guesses: you press a thing called Hand over expecting it
     to hand over. Every panel now says what it is and carries a ✕, and Escape
     shuts it before it reaches the modal. */
  .tv-panel { padding-top: 8px; }
  .tv-panel-h { display: flex; align-items: center; gap: 8px; margin: -2px 0 9px; }
  .tv-panel-h > b { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .05em;
                    text-transform: uppercase; color: var(--gray-3); }
  .tv-panel-x { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; cursor: pointer;
                border: 1px solid var(--border); background: var(--card-bg); color: var(--gray-4);
                font-size: 11px; line-height: 1; display: flex; align-items: center;
                justify-content: center; }
  .tv-panel-x:hover { border-color: var(--gray-3); color: var(--text); }

  /* ── a box to drop a file on ──
     Not a button called "Choose file" with a list of extensions after it. The
     whole area is the target: drag onto it, or click it to browse. */
  .tv-drop { display: flex; align-items: center; gap: 11px; cursor: pointer;
             padding: 14px 14px; border: 1.5px dashed var(--border); border-radius: 10px;
             background: var(--gray-1); color: var(--gray-4); font-size: 12px; }
  .tv-drop:hover, .tv-drop.is-over { border-color: var(--green); background: var(--green-lt); }
  .tv-drop b { display: block; font-size: 13px; color: var(--text); }
  .tv-drop-i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
               background: var(--card-bg); border: 1px solid var(--border);
               display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .tv-drop-m:not(:empty) { font-size: 11.5px; color: var(--gray-4); margin-top: 7px; }
  .tv-or { display: flex; align-items: center; gap: 9px; margin: 14px 0 9px;
           font-size: 11px; color: var(--gray-4); }
  .tv-or > i { flex: 1; height: 1px; background: var(--border); }
  /* Dropping onto the list itself works too, so you never have to open the
     panel first just to attach something. */
  .tv-files.is-over { outline: 2px dashed var(--green); outline-offset: 4px; border-radius: 8px; }

  /* Where this task came from. A chip, not a panel: it is one fact and one
     place to go, and the panel it used to be competed with the files under it. */
  .tv-src { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
            padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
            background: var(--gray-1); cursor: pointer; font: inherit; color: var(--text); }
  .tv-src-t { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
  .tv-src-p { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; line-height: 1.3;
              padding: 2px 8px; border-radius: 5px;
              background: var(--green-lt); color: var(--green); }
/* A checklist step is edited where it sits. It has to look like text until you
   touch it, or the list becomes a column of boxes; the hover tint is the only
   hint that it can be changed, and the focus ring is the confirmation. */
.tv-sub-t { outline:none; border-radius:4px; padding:1px 4px; margin:-1px -4px;
            cursor:text; min-width:2em; }
.tv-sub-t:hover { background:var(--gray-2); }
.tv-sub-t:focus { background:var(--surface-1,#fff); box-shadow:0 0 0 2px var(--olive);
                  text-decoration:none !important; color:var(--text) !important; }
/* The grip is the only part of a step that drags: the words are edited in place
   and the box ticks, so a drag from anywhere else would fight both. Quiet until
   the row is hovered, because 22 grips at full strength is a column of noise.
   touch-action:none is what lets a finger drag it instead of scrolling the
   panel; without it the phone takes the gesture and cancels the drag. */
.tv-sub-grip { flex-shrink:0; display:flex; align-items:center; justify-content:center;
               width:20px; height:28px; margin:0 -6px 0 -4px; padding:0; border:none;
               background:none; border-radius:4px; color:var(--gray-3); opacity:.55;
               cursor:grab; touch-action:none; }
.tv-sub:hover .tv-sub-grip, .tv-sub-grip:focus-visible { opacity:1; }
.tv-sub-grip:hover { background:var(--gray-2); color:var(--text); }
.tv-sub-grip:focus-visible { outline:2px solid var(--olive); outline-offset:1px; }
.tv-sub.is-dragging { background:var(--surface-1,#fff); box-shadow:0 4px 14px rgba(0,0,0,.14);
                      border-radius:6px; position:relative; z-index:2; }
.tv-sub.is-dragging .tv-sub-grip { cursor:grabbing; opacity:1; }
/* On a touch screen the grip is full strength, and its target is 44px tall
   rather than the 28px drawn: the pseudo-element takes the finger without moving
   anything. It stops at the grip's own right edge, 4px short of the checkbox, so a tap meant for
   the box is never taken as a drag. */
@media (hover:none){
  .tv-sub-grip { opacity:1; width:28px; margin-left:-8px; position:relative; }
  .tv-sub-grip::before { content:''; position:absolute; top:-8px; bottom:-8px; left:-8px; right:0; }
}
  .tv-newsub { width: 100%; font-size: 13px; margin-top: 8px; }

  /* Start and Submit are not equally reversible, and that difference is the
     whole decision, so the band says which is which. */
  .tv-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
             margin: 22px -20px -20px; padding: 14px 24px;
             background: var(--gray-1); border-top: 1px solid var(--border);
             border-radius: 0 0 var(--radius) var(--radius);
             /* 6a and 6b agree on this one: "the verbs never move". Pinned to
                the foot of the sheet, a task with 400 words of notes behaves
                the same as an empty one. */
             position: sticky; bottom: -20px; z-index: 2; }
  .tv-foot-n { font-size: 11.5px; color: var(--gray-4); flex: 1 1 220px; min-width: 0; }

  @media (max-width: 979px) {
    .tv-2up { grid-template-columns: 1fr; }
    .tv-foot { margin: 18px -20px -20px; padding: 12px 20px; }
  }

  /* ─── MY WEEK ON A PHONE, to 4a/4b ───
     Seven columns do not fit 375px, and a strip of them that scrolls sideways
     means the days you are trying to push work into are the ones off the edge.
     The week becomes something you READ at a glance — one dot per day that has
     something due — and the work runs down the page under it. */
  .wkm-strip, .wkm-list { display: none; }
  .wkm-strip { margin-bottom: 0; }
  .wkm-days { display: flex; gap: 3px; }
  .wkm-d { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
           gap: 1px; padding: 6px 2px 7px; border: 0; border-radius: 10px; cursor: pointer;
           background: none; color: var(--gray-3); font-family: inherit; }
  .wkm-d:hover { background: var(--gray-1); }
  /* Selected, not "today": the head below belongs to whichever day is chosen,
     and today is only the one it starts on. Today keeps a quiet mark so you can
     still find it after moving away. */
  .wkm-d.is-today .wkm-dow { color: var(--green); }
  .wkm-d.is-on { background: var(--green); color: var(--green-lt); }
  .wkm-d.is-on .wkm-dow, .wkm-d.is-on .wkm-num, .wkm-d.is-on .wkm-n { color: var(--green-lt); }
  .wkm-dow { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; }
  .wkm-num { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.15; }
  /* A count, not a dot. "13 on Thursday" says where the load is; a dot only
     says "something". */
  .wkm-n { font-size: 10.5px; font-weight: 600; color: var(--gray-4); line-height: 1.2; }
  .wkm-late .wkm-dow, .wkm-late .wkm-num { color: var(--danger); }
  .wkm-late.is-on { background: var(--danger); }
  .wkm-late.is-on .wkm-dow, .wkm-late.is-on .wkm-num, .wkm-late.is-on .wkm-n { color: var(--danger-lt); }

  /* The selected day tile's own head. It states what every row below has in
     common, so the rows can stop repeating it. */
  .wkm-head { display: flex; align-items: baseline; gap: 9px; margin: 8px 0 0;
              padding: 9px 14px; border-radius: 9px 9px 0 0;
              background: var(--green-dk); color: var(--green-lt); }
  .wkm-head.is-late { background: var(--danger); color: var(--danger-lt); }
  .wkm-head > b { font-size: 13px; font-weight: 700; white-space: nowrap; }
  .wkm-head > span { flex: 1; min-width: 0; font-size: 12px; opacity: .85;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wkm-head-f { flex: 0 0 auto; border: none; background: none; padding: 0; cursor: pointer;
                font: inherit; font-size: 12.5px; font-weight: 600; color: inherit; }
  .wkm-head-f:hover { text-decoration: underline; }
  .wkm-list { overflow: hidden; border-radius: 0 0 9px 9px; }
  .ac-ghead.is-late  { background: var(--danger-lt); }
  .ac-ghead.is-late > b { color: var(--danger); }
  .ac-ghead.is-today > b { color: var(--green); }

  /* ─── BULK EDIT, to 2a ───
     A dark slate panel whatever the theme, because this is a MODE rather than
     part of the page under it — the same reasoning a toast uses. The ground and
     the ink are both FIXED, so neither has to flip, and the controls on it are
     translucent white rather than each carrying its own colour: nine buttons in
     nine colours read as nine competing decisions. */
  .ac-bulk { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
             position:sticky; top:0; z-index:5; margin-bottom:10px;
             background:#1B2433; color:#fff; border-radius:10px; padding:10px 14px; }
  .ac-bulk > b { font-size:13.5px; font-weight:700; }
  .ac-bulk-div { width:1px; height:22px; background:rgba(255,255,255,.18); }
  .ac-bulk-sp  { flex:1; }
  .ac-bulk-p { font-size:12.5px; font-weight:600; color:#fff; background:rgba(255,255,255,.1);
               border:none; border-radius:8px; padding:7px 11px; cursor:pointer;
               width:auto; margin:0; font-family:inherit; }
  .ac-bulk-p:hover { background:rgba(255,255,255,.18); }
  /* A <select> paints its menu with the page's colours, not the bar's, so the
     OPTIONS need an ink and a ground of their own or they are white on white. */
  .ac-bulk-p option { color:var(--text); background:var(--card-bg); }
  .ac-bulk-go { font-size:13px; font-weight:700; border:none; border-radius:8px;
                padding:8px 14px; cursor:pointer;
                background:var(--green-dk); color:var(--green-lt); }
  .ac-bulk-q { font-size:12.5px; font-weight:600; border:none; background:none; padding:0 2px;
               cursor:pointer; color:rgba(255,255,255,.72); }
  .ac-bulk-q:hover { color:#fff; text-decoration:underline; }
  .ac-bulk-q.is-danger { color:#F0A47C; }
  .ac-bulk-hint { flex:1 1 100%; font-size:11px; color:rgba(255,255,255,.6); }

  /* ─── MY WEEK, to 1a ───
     A band for the late pile, seven days across, a band for the undated. The
     class prefix is wk- and not awk-: .awk-band, .awk-col and .awk-row are the
     OLD week views and the team board, and reusing a live class name is the
     collision that cost an hour on the task view's file cards. */
  .wk-band { display:flex; align-items:flex-start; gap:14px; padding:12px 14px;
             border-radius:10px; background:var(--card-bg); border:1px solid var(--border);
             margin-bottom:9px; }
  .wk-band.is-late { background:var(--warn-lt); border-color:var(--warn-lt); }
  .wk-band-l { flex:0 0 120px; display:flex; align-items:flex-start; gap:9px;
               font-size:12px; color:var(--gray-3); line-height:1.35; }
  .wk-band-l b { color:var(--text); font-size:13px; display:block; }
  .wk-band-n { font-size:26px; line-height:1; font-weight:700; color:var(--warn) !important; }
  .wk-band-c { flex:1; min-width:0; display:flex; gap:9px; flex-wrap:wrap; align-content:flex-start; }
  .wk-band-c > .ac-kcard { flex:0 1 248px; }
  .wk-band-a { flex:0 0 auto; display:flex; flex-direction:column; gap:7px; align-items:stretch; }
  .wk-band-a .ac-more { padding:0; text-align:center; font-size:12.5px; }

  /* The days size themselves to what is on them, so an empty Sunday is a strip
     and a heavy Monday is not squeezed to match it. */
  .wk-strip { display:flex; align-items:flex-start; gap:8px; margin-bottom:9px;
              overflow-x:auto; padding-bottom:4px; }
  .wk-d { flex:1 1 0; min-width:132px; display:flex; flex-direction:column; gap:7px;
          border-radius:10px; padding:10px 9px; }
  .wk-d.is-today { background:var(--green-lt); }
  .wk-d.is-empty { flex:0 1 96px; min-width:88px; }
  .wk-d.awk-over { outline:2px dashed var(--green); outline-offset:-3px; }
  .wk-d-h { display:flex; align-items:baseline; gap:6px; }
  .wk-d-h > b { font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
                color:var(--gray-3); }
  .wk-d.is-today .wk-d-h > b { color:var(--green); }
  .wk-d-n { font-size:12px; color:var(--gray-3); }
  .wk-d-h > i { flex:1; }
  .wk-d-c { font-size:12px; font-weight:700; color:var(--gray-4); }
  .wk-d-b { display:flex; flex-direction:column; gap:8px; }
  .wk-d-e { font-size:11.5px; color:var(--gray-4); line-height:1.45; padding:2px 1px; }
  .wk-d .ac-kcard { padding:8px 9px; }
  .wk-d .ac-kt { font-size:12px; }
  .wk-d .ac-more { padding:2px 1px; font-size:11.5px; }

  .wk-foot { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
             font-size:11.5px; color:var(--gray-4); padding-top:4px; }
  .wk-foot > span:first-child { flex:1 1 260px; }

  @media (max-width: 768px) {
    /* Seven columns do not fit a phone at all — not even scrolling, because the
       days you are trying to push work into are then the ones off the edge. The
       whole desktop shape goes and 4a's strip takes over. These rules have to
       come AFTER .wk-strip's own display:flex or they lose at equal
       specificity, which is exactly what happened the first time. */
    .wk-strip, .wk-band, .wk-foot { display:none; }
    .wkm-strip, .wkm-list { display:block; }
  }
  /* is-wknd is listed FIRST and is-today second on purpose: a weekend can also
     be today, and when it is, "today" is the thing you need to see. Equal
     specificity means source order decides. */
  .awk-col.is-wknd  { background:var(--gray-1); }
  .awk-col.is-today { border-color:var(--edge-today); background:var(--row-today); }
  .awk-col.is-today .awk-h { color:var(--green-dk); }
  .awk-col.is-over  { border-color:var(--edge-over); background:var(--row-over); }
  .awk-col.is-over  .awk-hl { color:var(--ink-over); }
  .awk-col.is-none  { border-style:dashed; }
  .awk-col.awk-over { outline:2px dashed var(--green); outline-offset:-3px; }
  .awk-row.is-today .awk-hl b, .awk-col.is-today .awk-hl b { color:var(--green-dk); background:var(--pill-today); }
  .awk-row.is-over  .awk-hl b, .awk-col.is-over  .awk-hl b { color:var(--ink-over); background:var(--pill-over); }
  .awk-bar { height:4px; border-radius:999px; background:var(--gray-2); margin-top:5px; overflow:hidden; }
  .awk-bar i { display:block; height:100%; border-radius:999px; min-width:2px; }
  .awk-row.is-strip { min-height:54px; }
  /* Stacked, an empty day's rail — label, sub, bar, "+ add" — stood 100px
     tall, which is a day with nothing on it taking as much room as a day with
     work in it. On a strip the four go into a two-row grid instead: label and
     "+ add" share the top line, the sub sits under them, and the load bar goes
     away, because a bar at 0% of your busiest day is a line saying nothing.
     The rail keeps its 158px, so the rails still line up down the page — that
     alignment is the reason a rail is a fixed width at all. */
  .awk-row.is-strip .awk-rail { display:grid; grid-template-columns:1fr auto;
    align-items:center; gap:2px 8px; padding:10px 14px; }
  .awk-row.is-strip .awk-rail .awk-hl  { grid-column:1; grid-row:1; }
  .awk-row.is-strip .awk-rail .awk-sub { grid-column:1; grid-row:2; }
  .awk-row.is-strip .awk-rail .awk-bar { display:none; }
  .awk-row.is-strip .awk-rail-foot     { grid-column:2; grid-row:1; margin:0; padding:0; }
  /* is-wknd first and is-today second, for the same reason as .awk-col: a
     weekend can also be today, and when it is, "today" is the thing you need
     to see. Equal specificity means source order decides. */
  .awk-row.is-wknd  { background:var(--gray-1); }
  .awk-row.is-today { border-color:var(--edge-today); background:var(--row-today); }
  .awk-row.is-today .awk-rail { background:var(--rail-today); border-right-color:var(--edge-today); }
  .awk-row.is-today .awk-hl   { color:var(--green-dk); }
  .awk-row.is-over  { border-color:var(--edge-over); background:var(--row-over); }
  .awk-row.is-over  .awk-rail { background:var(--rail-over); border-right-color:var(--edge-over); }
  .awk-row.is-over  .awk-hl   { color:var(--ink-over); }
  .awk-row.is-over  .awk-sub  { color:var(--ink-over); }
  .awk-row.is-none  { border-style:dashed; }
  .awk-row.awk-over { outline:2px dashed var(--green); outline-offset:-3px; }
  .awk-rail .awk-bar { margin-top:2px; }
  /* Two lines, then an ellipsis — in the rows view and on the overdue shelf,
     where cards sit side by side and one 40-word ticket title otherwise set
     the height of every card beside it. In a column they stack, so nothing is
     gained by cutting them and the whole title can stay. The full text is on
     the element's own title attribute either way. */
  .awk-cards .ac-kt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; }
  .awk-cards.is-empty { align-items:center; }
  .awk-cards.is-empty .awk-empty { flex:1; border:1.5px dashed var(--border);
    border-radius:var(--radius-btn); padding:7px 12px; }
  .awk-add { background:none; border:none; padding:0; font-size:11px; font-weight:600;
    color:var(--gray-4); cursor:pointer; }
  .awk-hl .awk-add { margin-left:auto; }
  .awk-row.is-today .awk-add, .awk-col.is-today .awk-add { color:var(--green-dk); }
  .awk-add:hover { color:var(--green-dk); text-decoration:underline; }

  /* ── My Team: people down, days across ── */
  .awt-wrap { overflow:auto; max-height:74vh; border:1px solid var(--border); border-radius:var(--radius-btn); background:var(--card-bg); }
  .awt-grid { min-width:max-content; }
  .awt-row  { display:flex; border-bottom:1px solid var(--border); }
  .awt-row:last-child { border-bottom:none; }
  /* The person column is the anchor you read every row against, so it stays put. */
  /* min-width:0, and it is load-bearing. A flex item defaults to
     min-width:auto and will not shrink below its content, so "Gauri
     Shendge-Gundecha" pushed this column to 225px while "Pallavi Patil" left
     it at 178px — and every row then started at a different x, which is why
     the grid did not line up. The ellipsis on the name cannot fire until the
     box is actually constrained. */
  .awt-who  { position:sticky; left:0; z-index:2; flex:0 0 178px; min-width:0;
    display:flex; align-items:flex-start; gap:8px;
    padding:8px 10px; background:var(--card-bg); border-right:2px solid var(--border); }
  .awt-wn   { min-width:0; }
  .awt-wn b { display:block; font-size:12px; font-weight:700; white-space:nowrap;
    overflow:hidden; text-overflow:ellipsis; }
  .awt-wn span { font-size:10px; color:var(--gray-4); }
  .awt-od   { color:var(--danger); font-style:normal; font-weight:700; }
  /* People Master: what this person still owes the file, said out loud on the
     row instead of hidden behind a tooltip on a 10px glyph. */
  .pm-missing { display:inline-flex; align-items:center; gap:4px; margin-top:3px;
    font-size:10px; font-weight:600; line-height:1.5; color:var(--yellow-dk);
    background:var(--yellow-lt); border:1px solid var(--card-borrowed-bd);
    border-radius:5px; padding:1px 6px; max-width:220px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Marks somebody you are SECOND manager for. Olive rather than amber or red:
     it is a fact about the reporting line, not a warning about their work, and
     the row already uses red for overdue. */
  .awt-2nd  { font-style:normal; font-size:9px; font-weight:800; letter-spacing:.03em;
    color:var(--olive-dk); background:var(--olive-lt); border:1px solid var(--olive-lt);
    border-radius:4px; padding:0 4px; vertical-align:1px; }
  .awt-cell { flex:0 0 132px; min-width:0; min-height:56px; padding:6px; border-right:1px solid var(--border);
    max-height:168px; overflow-y:auto; overflow-x:hidden; }
  .awt-cell.is-wknd  { background:var(--gray-2); }
  .awt-cell.is-today { background:var(--green-lt); }
  .awt-cell.is-none  { flex:0 0 156px; min-width:0; border-right:none; border-left:2px solid var(--border); }
  /* Overdue is a column here, not a day: wider than one, tinted, and cut off
     from the week by the same 2px divider "No date" uses at the other end. It
     carries no drop handlers — dropping a task INTO overdue would mean giving
     it a date in the past — but its chips drag OUT onto a day, which is the
     whole reason the column exists. */
  .awt-cell.is-over  { flex:0 0 156px; min-width:0; background:var(--row-over);
    border-right:2px solid var(--edge-over); }
  .awt-cell.is-over .awt-n { color:var(--ink-over); }
  .awt-head .awt-cell.is-over b { color:var(--ink-over); }
  .awt-cell.awk-over { outline:2px dashed var(--green); outline-offset:-3px; }
  /* The header row rides above the people column, which is itself sticky. */
  .awt-head { position:sticky; top:0; z-index:3; background:var(--gray-1); }
  .awt-head .awt-who { background:var(--gray-1); z-index:4; }
  .awt-hd   { display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-height:42px; font-size:11px; color:var(--gray-4); }
  .awt-hd b { font-size:11px; font-weight:800; color:var(--text); }
  .awt-chip { display:flex; align-items:center; gap:5px; background:var(--card-bg);
    border:1px solid var(--border); border-radius:5px; padding:3px 5px; margin-top:4px;
    font-size:10.5px; cursor:grab; max-width:100%; overflow:hidden; }
  .awt-chip i { width:5px; height:5px; border-radius:50%; flex:0 0 auto; }
  /* min-width:0 is the whole fix: a flex child will not shrink below its
     content width without it, so the ellipsis never fired and a long ticket
     title ran across the next three days. */
  .awt-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

  @media (max-width: 768px) {
    .awt-who { flex:0 0 128px; }
    .awt-cell { flex:0 0 108px; }
  }

  /* Team Workload: closed, a cell is a number and a bar. */
  .awt-n { font-size:15px; font-weight:800; line-height:1.1; color:var(--text); text-align:center; }
  .awt-n.is-muted { color:var(--gray-4); font-weight:700; font-size:13px; }
  .awt-who { cursor:pointer; user-select:none; }
  .awt-who:hover { background:var(--gray-1); }
  .awt-head .awt-who:hover { background:var(--gray-1); }
  .awt-chev { font-size:9px; color:var(--gray-4); flex:0 0 8px; margin-top:5px; }
  .awt-cell.is-open .awt-n { font-size:11px; text-align:left; color:var(--gray-4); font-weight:700; }

  /* Expand all / Collapse all. Buttons, not a checkbox: they are actions you
     take, and the lit one tells you which state you are already in. */
  .awk-lnks { display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-btn); overflow:hidden; }
  .awk-lnk { background:var(--card-bg); border:none; border-radius:0; padding:4px 9px;
    font-size:11px; font-weight:700; color:var(--gray-4); cursor:pointer; }
  .awk-lnk + .awk-lnk { border-left:1px solid var(--border); }
  .awk-lnk:hover { background:var(--gray-1); color:var(--text); }
  .awk-lnk.is-on { background:var(--green-lt); color:var(--green-dk); }

  /* #50 stage 2 — "where are you?" at clock-in, for the 47 people who clock in
     from the app. Base comes preselected, so the row costs a glance rather
     than a tap; only an exception costs anything. Sits directly under the
     clock line, on the panel's own ground rather than the pastel above it. */
  .pw-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:9px 12px; background:var(--gray-1); border-bottom:1px solid var(--border); }
  /* Its own line, so the chips wrap as a group rather than stranding one of
     them alone on a second row — which is what happens on a 375px phone as
     soon as somebody's base is named 'Bavdhan HQ' rather than 'Pune TTC'. */
  .pw-lab { flex:0 0 100%; font-size:11px; font-weight:600; color:var(--gray-4); margin-bottom:1px; }
  .pw-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 10px;
    border-radius:999px; cursor:pointer; background:var(--card-bg); border:1.5px solid var(--border);
    font-size:11.5px; font-weight:500; color:var(--text); font-family:inherit; min-height:32px; }
  .pw-chip:hover { border-color:var(--line); }
  .pw-chip.on { background:var(--green-lt); border-color:var(--green); color:var(--green); font-weight:700; }
  /* Stacked, not side by side. Sharing a row left both the site list and the
     "where?" box about 150px wide on a phone, which is most of who uses this. */
  .pw-where { display:flex; flex-direction:column; gap:6px; padding:0 12px 9px;
    background:var(--gray-1); border-bottom:1px solid var(--border); }
  .pw-sel, .pw-txt { font-family:inherit; font-size:12px; padding:7px 9px; border-radius:8px;
    border:1.5px solid var(--border); background:var(--card-bg); color:var(--text);
    min-height:34px; flex:1; min-width:132px; }
  [data-theme="dark"] .pw-row, [data-theme="dark"] .pw-where { background:#1B2433; }
  [data-theme="dark"] .pw-chip, [data-theme="dark"] .pw-sel, [data-theme="dark"] .pw-txt {
    background:#1B2433; border-color:#26303D; color:#EDF0F3; }
  [data-theme="dark"] .pw-chip.on { background:rgba(34,197,94,.14);
    border-color:var(--on-dark); color:var(--on-dark-lt); }

  /* #50 stage 3 - a posting somewhere other than your base. Listed only when
     there is one, so the row style carries no empty state. */
  .pg-row { display:flex; align-items:center; gap:10px; padding:9px 11px;
    border:1px solid var(--border); border-radius:10px; background:var(--gray-1); }
  .pg-now { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    background:var(--green); color:var(--green-lt); border-radius:4px; padding:1px 5px; margin-left:6px;
    vertical-align:2px; }
  [data-theme="dark"] .pg-row { background:#1B2433; border-color:#26303D; }
  [data-theme="dark"] .pg-now { background:var(--on-dark); color:#17281C; }

  /* ═══ RECRUITMENT: the queue, the modal, the row ═══
     Drawn from Recruitment.dc.html (artboards 1a–1d). The design's own palette
     is not reproduced literally: every colour here resolves to a token this app
     already defines, because those tokens have dark-mode twins and the raw hex
     values do not. The three heats are the overdue language My Week already
     speaks — grey, amber, then the --pill-over/--ink-over pair — so a late thing
     looks late in the same way everywhere in the app. */

  /* The age tile. Its whole job: "with them 7 days" and "with them 40 days"
     are the same grey sentence at a glance, and a number in a heat is not. */
  .rq-age { flex:0 0 auto; width:48px; border-radius:var(--radius-btn); text-align:center;
            padding:6px 0; background:var(--gray-2); }
  .rq-age .n { font-size:15px; font-weight:800; line-height:1; color:var(--gray-4);
               font-variant-numeric:tabular-nums; }
  .rq-age .l { font-size:8.5px; font-weight:800; letter-spacing:.07em; margin-top:2px;
               text-transform:uppercase; color:var(--gray-3); }
  .rq-age.is-warm { background:var(--yellow-lt); }
  .rq-age.is-warm .n { color:var(--yellow-dk); } .rq-age.is-warm .l { color:var(--yellow); }
  .rq-age.is-late { background:var(--pill-over); }
  .rq-age.is-late .n { color:var(--ink-over); } .rq-age.is-late .l { color:var(--card-edge-over); }
  .rq-age.is-soon { background:var(--green-lt); }
  .rq-age.is-soon .n { color:var(--green); font-size:12.5px; }
  .rq-age.is-soon .l { color:var(--green); opacity:.75; }

  .rq-list { display:flex; flex-direction:column; gap:8px; }
  .rq-row  { display:flex; align-items:center; gap:14px; background:var(--card-bg);
             border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; }
  .rq-row.is-late { border-color:var(--edge-over); }
  .rq-main { flex:1; min-width:0; }
  .rq-head { display:flex; align-items:center; gap:8px; margin-bottom:3px; flex-wrap:wrap; }
  .rq-name { font-size:14.5px; font-weight:700; color:var(--text); }
  .rq-sub  { font-size:12.5px; color:var(--gray-4); }

  /* One pill vocabulary, shared by the row badge and the filter chip above it,
     so the chip you press and the badge you then look for are the same colour. */
  .rq-pill { border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700;
             white-space:nowrap; background:var(--gray-2); color:var(--gray-4); }
  .rq-pill.is-late    { background:var(--pill-over); color:var(--ink-over); }
  .rq-pill.is-warm    { background:var(--yellow-lt); color:var(--yellow-dk); }
  .rq-pill.is-signoff { background:var(--olive-lt); color:var(--olive-dk); }
  .rq-pill.is-todo    { background:var(--green-lt); color:var(--green); }
  .rq-pill.is-join    { background:var(--green); color:var(--green-lt); }

  .rq-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .rq-chip  { border:1.5px solid transparent; border-radius:999px; padding:4px 11px; cursor:pointer;
              font:600 11.5px/1.3 inherit; display:inline-flex; align-items:center; gap:6px; }
  .rq-chip b { font-weight:800; }
  .rq-chip.is-on { border-color:var(--text); }

  .rq-bar   { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
  .rq-title { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:22px; line-height:1; color:var(--text); }
  .rq-count { font-size:12px; color:var(--gray-4); }
  .rq-scope { display:flex; background:var(--gray-2); border-radius:var(--radius-btn); padding:2px; gap:2px; margin-left:auto; }
  .rq-scope button { border:none; background:none; border-radius:var(--radius-btn); padding:5px 12px; cursor:pointer;
                     font:12px/1.2 inherit; color:var(--gray-4); }
  .rq-scope button:hover { background:var(--gray-1); }
  .rq-scope button.is-on { background:var(--green); color:var(--green-lt); font-weight:600; }

  .rq-acts { display:flex; align-items:center; gap:8px; flex:0 0 auto; position:relative; }
  .rq-go   { background:var(--green); color:var(--green-lt); border:1px solid var(--green); border-radius:8px;
             padding:7px 14px; font:600 12px/1.2 inherit; cursor:pointer; white-space:nowrap; }
  .rq-go:hover { background:var(--green-dk); border-color:var(--green-dk); }
  /* The second track in a group drops to outline, so the eye still finds one
     primary per card rather than two competing greens. */
  .rq-go.is-ghost { background:var(--card-bg); color:var(--green); }
  .rq-go.is-ghost:hover { background:var(--green-lt); }
  .rq-more { width:30px; height:30px; border:1px solid var(--border); border-radius:8px; cursor:pointer;
             background:var(--card-bg); color:var(--gray-4); font-weight:700; line-height:1; flex:0 0 auto; }
  .rq-more:hover, .rq-more.is-open { border-color:var(--green); color:var(--green); background:var(--green-lt); }
  .rq-menu { position:absolute; top:calc(100% + 6px); right:0; width:210px; z-index:30; padding:5px;
             background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
             box-shadow:0 10px 28px rgba(30,35,25,.16); }
  .rq-menu button { display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer;
                    padding:7px 11px; font:12.5px/1.3 inherit; color:var(--text); border-radius:var(--radius-btn); }
  .rq-menu button:hover { background:var(--gray-1); }
  .rq-menu button.is-danger { color:var(--danger); }
  .rq-menu button.is-danger:hover { background:var(--pill-over); }
  .rq-menu .sep { border-top:1px solid var(--border); margin:4px 6px; }

  /* One candidate, one card. Three tracks used to be three rows repeating the
     same name and the same phone number three times. */
  .rq-group { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); }
  .rq-ghead { display:flex; align-items:center; gap:10px; padding:11px 16px; flex-wrap:wrap;
              border-bottom:1px solid var(--border); }
  .rq-av    { width:28px; height:28px; border-radius:999px; background:var(--green-lt); color:var(--green);
              font-size:11px; font-weight:800; flex:0 0 auto;
              display:flex; align-items:center; justify-content:center; }
  .rq-gmeta { font-size:12px; color:var(--gray-4); }
  .rq-greach{ font-size:12px; color:var(--gray-4); font-variant-numeric:tabular-nums; margin-left:auto; }
  .rq-track { display:flex; align-items:center; gap:14px; padding:11px 16px 11px 22px;
              border-bottom:1px solid var(--border); }
  .rq-track:last-child { border-bottom:none; }
  .rq-track .rq-name { font-size:13.5px; }

  .rq-none { padding:32px; text-align:center; color:var(--gray-3); font-size:13px; }
  .rq-note { padding:10px 0; font-size:12px; color:var(--gray-4); }
  .rq-foot { font-size:11.5px; color:var(--gray-3); margin-top:12px; text-wrap:pretty; }

  /* Phone: the age moves to the top-right as bare numerals, the verb goes
     full width at a 44px target, and the row becomes two stacked areas. */
  @media (max-width:768px){
    .rq-row, .rq-track { display:grid; grid-template-columns:1fr auto; align-items:start;
                         grid-template-areas:"main age" "acts acts"; gap:8px 10px; padding:12px 14px; }
    .rq-age  { grid-area:age; width:auto; background:none !important; padding:0; text-align:right; }
    .rq-age .n { font-size:12px; }
    .rq-age .l { display:none; }
    .rq-main { grid-area:main; }
    .rq-acts { grid-area:acts; }
    .rq-go   { flex:1; padding:11px 0; font-size:13px; text-align:center; }
    .rq-more { width:44px; height:44px; }
    .rq-scope { margin-left:0; width:100%; }
    .rq-scope button { flex:1; }
    .rq-greach { margin-left:0; flex:1 1 100%; }
  }

  /* The explanatory half of a checkbox label is a line of its own. Inline it
     runs straight into the label above it: "…outside the 8-day cap The same
     treatment the salary-sheet carry-forward has." */
  .opt-sub { display:block; color:var(--gray-4); font-size:11.5px; margin-top:2px; }

  /* ─── Categorise: chips name the roles, only the open one is a form ─── */
  .tr-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .tr-chip  { border-radius:999px; padding:4px 12px; font:600 12px/1.3 inherit; cursor:pointer;
              background:var(--green-lt); color:var(--green); border:1px solid var(--green-lt); }
  .tr-chip.is-open { background:var(--card-bg); color:var(--text); border-color:var(--green); font-weight:700; }
  .tr-chip.is-add  { background:var(--card-bg); color:var(--gray-4); border:1px dashed var(--line); }
  .tr-chip.is-add:hover { border-color:var(--green); color:var(--green); }
  /* A finished row is one line. Three roles cost three lines, not three screens. */
  .tr-done  { display:flex; align-items:center; gap:12px; background:var(--gray-1); font-size:12.5px;
              border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; color:var(--gray-4); }
  .tr-done .tick { width:18px; height:18px; border-radius:999px; background:var(--green); color:var(--green-lt);
                   font-size:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
  .tr-done .what { flex:1; min-width:0; }
  .tr-done .what b { color:var(--text); }
  .tr-done .nums { font-variant-numeric:tabular-nums; white-space:nowrap; }
  .tr-done .edit { font-weight:600; color:var(--green); cursor:pointer; white-space:nowrap;
                   background:none; border:none; font-size:12px; }
  .tr-open  { border:1px solid var(--green); border-radius:var(--radius); background:var(--card-bg); overflow:hidden; }
  .tr-ohead { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--green-lt);
              border-bottom:1px solid var(--border); font-size:13px; font-weight:700; color:var(--text); }
  .tr-ohead .rm { margin-left:auto; color:var(--danger); cursor:pointer; font-size:12px; font-weight:600;
                  background:none; border:none; }
  .tr-grid  { padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
  .tr-grid .wide { grid-column:1/-1; }
  .tr-grid label { display:block; font-size:11px; font-weight:700; color:var(--gray-4); margin-bottom:4px; }
  .tr-hint  { font-size:11.5px; color:var(--gray-3); }
  .tr-pos   { background:var(--gray-1); border-radius:var(--radius-btn); padding:10px 13px; font-size:12px;
              color:var(--gray-4); line-height:1.5; }
  .tr-rows  { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
  @media (max-width:768px){ .tr-grid { grid-template-columns:1fr; } }

  /* ─── Applicants: the row that carries everything ─── */
  .ap-grid { display:grid; grid-template-columns:44px minmax(0,1.5fr) minmax(0,1fr) 158px;
             gap:6px 18px; padding:14px 18px; border-bottom:1px solid var(--border); }
  .ap-grid:last-child { border-bottom:none; }
  .ap-no   { font-size:12px; color:var(--gray-3); font-variant-numeric:tabular-nums; padding-top:2px; }
  /* Their words, in the display face and in quotation marks, because it is the
     candidate speaking and not us. Two lines, then it stops. */
  .ap-msg  { font-style:italic; font-size:14.5px;
             color:var(--gray-4); display:-webkit-box; -webkit-line-clamp:2; line-clamp:2;
             -webkit-box-orient:vertical; overflow:hidden; }
  /* What they wrote is formatted where it is written, so it is read back
     formatted here too. The block elements _rtRender emits are laid inline
     inside the clamp, or the opening quotation mark takes a line of its own and
     a two-line preview becomes a four-line one. */
  .ap-msg > * { display:inline; margin:0; padding:0; }
  /* Laid inline, one block runs straight into the next: a list ending "large
     animals" followed by "No written note" reads as "animalsNo". */
  .ap-msg > *::after { content:' '; }
  .ap-msg li { display:inline; list-style:none; }
  .ap-msg li + li::before { content:' · '; }
  .ap-msg li::after { content:none; }
  .ap-msg br { display:none; }
  .ap-trail{ min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px; }
  .ap-reach{ font-size:12px; color:var(--gray-4); font-variant-numeric:tabular-nums; }
  .ap-track{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border);
             border-radius:999px; padding:3px 10px; font-size:11.5px; color:var(--gray-4); }
  .ap-dot  { width:7px; height:7px; border-radius:999px; flex:0 0 auto; background:var(--gray-3); }
  .ap-acts { display:flex; flex-direction:column; gap:6px; align-items:stretch; position:relative; }
  .ap-acts .row2 { display:flex; gap:6px; }
  .ap-trackrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .ap-track-acts { gap:5px; }
  .ap-track-acts .rq-go { padding:5px 10px; font-size:11.5px; }
  .ap-track-acts .rq-more { width:26px; height:26px; }
  .ap-btn  { border:1px solid var(--border); background:var(--card-bg); color:var(--text); cursor:pointer;
             border-radius:8px; padding:6px 0; font:600 12px/1.3 inherit; text-align:center; }
  .ap-btn:hover { border-color:var(--green); color:var(--green); }
  .ap-btn.is-go { background:var(--green); border-color:var(--green); color:var(--green-lt); }
  .ap-btn.is-go:hover { background:var(--green-dk); color:var(--green-lt); }
  @media (max-width:768px){
    .ap-grid { grid-template-columns:1fr; gap:8px; padding:14px; }
    .ap-no   { display:none; }
    .ap-acts { flex-direction:row; }
    .ap-acts .row2 { flex:1; }
    .ap-btn  { flex:1; padding:10px 0; }
  }

/* ═══════════════════════════════════════════════════════════════════════════
   MEMOS
   From the Claude Design draft (Memos.dc.html, 31 Aug 2026), artboards 1a–1f.
   The rules the design is actually making, so they survive an edit here:
     * an unacknowledged memo carries a 4px green spine and a full-width green
       button in the bottom third of the card — thumb range, one tap, no opening;
     * opening pales the spine but does not clear it, because read and seen are
       two signals and the list has to show the difference;
     * acknowledged memos drop under a divider, lose the button, gain a
       timestamped tick;
     * the subject is the line that reaches a lock screen and the composer says
       so with a live preview rather than help text.
   ═══════════════════════════════════════════════════════════════════════════ */

.mm-wrap { max-width:640px; }
.mm-tab { padding-bottom:8px; color:var(--gray-3); cursor:pointer; display:flex; align-items:center; gap:7px;
          background:none; border:0; font:inherit; border-radius:0; }
/* border-radius:0 is load-bearing: the global `button` rule sets a radius, and
   the active tab's 2px bottom border followed it into a curved sliver. */
.mm-tab.on { color:#fff; font-weight:600; border-bottom:2px solid #9BD3A6; }
.mm-tab-n { background:#9BD3A6; color:#17281C; border-radius:999px; font-size:11px; font-weight:800; padding:1px 7px; }
.mm-tab.on .mm-tab-n { background:#9BD3A6; }
.mm-tab:not(.on) .mm-tab-n { background:rgba(248,247,242,.16); color:#EAF1EC; }
.mm-chip { flex:0 0 auto; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:600;
           white-space:nowrap; cursor:pointer; background:var(--card-bg); border:1px solid #E3E7EC; color:var(--gray-4); }
.mm-chip.on     { background:#1B3522; border-color:#1B3522; color:#fff; }
.mm-chip.act    { background:var(--yellow-lt); border-color:#FBEAE2; color:var(--yellow-dk); }
.mm-chip.act.on { background:#8A3A17; border-color:#8A3A17; color:#fff; }

/* ── the list ──────────────────────────────────────────────────────────── */
.mm-list { padding:8px 0 4px; display:flex; flex-direction:column; gap:9px; }

.mm-card { display:flex; background:var(--card-bg); border:1px solid #E3E7EC; border-radius:10px;
           box-shadow:0 1px 3px rgba(27,42,30,.05); overflow:hidden; cursor:pointer; text-align:left; }
.mm-card:hover { border-color:#F0A47C; }
.mm-spine { flex:0 0 4px; background:#2F5A3A; }
.mm-body  { flex:1; min-width:0; padding:12px 13px 11px; }
.mm-top   { display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.mm-flag  { background:var(--yellow-lt); color:var(--yellow-dk); border-radius:5px; padding:2px 7px;
            font-size:10.5px; font-weight:700; letter-spacing:.02em; }
.mm-aud   { font-size:11.5px; color:var(--gray-4); }
.mm-when  { font-size:11.5px; color:var(--gray-3); white-space:nowrap; margin-left:auto; }
.mm-subj  { font-size:15px; font-weight:600; line-height:1.3; margin-bottom:3px; }
.mm-from  { font-size:12.5px; color:var(--gray-4); margin-bottom:4px; }
.mm-from b { color:var(--green-dk); font-weight:500; }
.mm-prev  { font-size:12.5px; color:var(--gray-3); line-height:1.4; margin-bottom:11px;
            display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mm-acts  { display:flex; gap:8px; }
.mm-seen-btn { flex:1; background:#2F5A3A; color:#fff; border:0; border-radius:var(--radius-btn); padding:11px 0;
               text-align:center; font:600 13.5px/1 inherit; cursor:pointer; }
.mm-seen-btn:hover { background:#26492F; }
.mm-icon-btn { flex:0 0 46px; height:42px; border:1px solid #E3E7EC; border-radius:var(--radius-btn); background:var(--card-bg);
               display:flex; align-items:center; justify-content:center; color:var(--gray-4); cursor:pointer; }
.mm-icon-btn.on { background:var(--yellow-lt); border-color:#F0A47C; color:var(--yellow-dk); }
/* Who the memo went to, under the sender. Quiet: it is reference, not the
   message, and it has to stay readable when it runs to ten names. */
.mm-aud-box { border-top:1px solid var(--border); margin:0 0 2px; padding:10px 0 2px;
              display:flex; flex-direction:column; gap:5px; }
.mm-aud-l   { display:flex; gap:8px; font-size:12.5px; color:var(--text); line-height:1.45; }
.mm-aud-k   { flex:0 0 30px; color:var(--gray-3); font-weight:600; font-size:11px;
              text-transform:uppercase; letter-spacing:.04em; padding-top:2px; }
.mm-aud-n   { color:var(--gray-3); font-style:italic; }
/* Who a memo went to, on the card. One line, clipped: the sheet holds the
   full list and this only has to answer "who else is on this". */
.mm-rcpt { font-size:12px; color:var(--gray-3); margin-bottom:4px;
           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* The chip once you have dealt with it. Green rather than the amber of an open
   ask, so a list of memos reads as outstanding-or-not at a glance. */
.mm-flag.done { background:var(--green-lt); color:var(--olive-dk); display:inline-flex; align-items:center; gap:4px; }
/* The exit from Needs action, and it sits on its own row under the card rather
   than beside Open, because it has to survive acknowledgement and Open does not. */
.mm-done-btn { flex:1; margin-top:8px; background:var(--card-bg); border:1px solid #E3E7EC; border-radius:var(--radius-btn);
               padding:9px 0; display:flex; align-items:center; justify-content:center; gap:6px;
               color:var(--olive-dk); font:600 12.5px/1 inherit; cursor:pointer; }
.mm-done-btn:hover { background:var(--green-lt); border-color:#9BD3A6; }
.mm-done-btn.on { background:var(--green-lt); border-color:#9BD3A6; color:var(--olive-dk); }

/* Opened but not acknowledged: the spine pales, the button stays. */
.mm-card.read .mm-spine { background:#8CC79A; }

/* Acknowledged: no spine colour, no button, a tick with a time. */
.mm-card.done { border-color:var(--border); }
.mm-card.done .mm-spine { background:var(--border); }
.mm-card.done .mm-body  { padding:11px 13px; }
.mm-card.done .mm-subj  { font-size:14.5px; color:var(--text); }
.mm-card.done .mm-when  { color:var(--gray-3); }
.mm-tick { display:inline-flex; align-items:center; gap:4px; color:var(--olive-dk); font-weight:500; }
.mm-dot  { color:var(--border); margin:0 5px; }

/* ── empty state ───────────────────────────────────────────────────────── */
.mm-empty { padding:52px 34px 34px; text-align:center; }
.mm-empty-h { font-size:16.5px; font-weight:600; margin-bottom:7px; }
.mm-empty-p { font-size:13.5px; color:var(--gray-4); line-height:1.5; }
.mm-empty-b { display:inline-flex; align-items:center; gap:8px; margin-top:20px; background:none;
              border:1px solid #2F5A3A; color:var(--olive-dk); border-radius:var(--radius-btn); padding:11px 18px;
              font:600 13.5px/1 inherit; cursor:pointer; }

/* ── the memo itself ───────────────────────────────────────────────────── */
.mm-sheet   { background:var(--gray-2); margin:-20px -20px -20px; padding:14px 14px 0; }
.mm-av      { width:32px; height:32px; border-radius:999px; background:var(--green-lt); color:var(--green);
              font-size:11.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
              flex:0 0 auto; }
.mm-av.off  { background:var(--gray-2); color:var(--gray-3); }
.mm-shelf   { display:flex; gap:2px; padding:9px 10px 0; }
.mm-shelf-b { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 0;
              color:var(--gray-4); font:600 11px/1 inherit; background:none; border:0; cursor:pointer; border-radius:8px; }
.mm-shelf-b:hover { background:var(--gray-2); color:var(--green-dk); }
.mm-shelf-b[disabled] { opacity:.45; cursor:default; }
.mm-shelf-b[disabled]:hover { background:none; color:var(--gray-4); }
.mm-ack     { padding:8px 14px 16px; }
.mm-ack-b   { width:100%; background:#2F5A3A; color:#fff; border:0; border-radius:var(--radius); padding:15px 0;
              font:600 15.5px/1 inherit; cursor:pointer; display:flex; align-items:center;
              justify-content:center; gap:9px; }
.mm-ack-b:hover { background:#26492F; }
.mm-ack-n   { text-align:center; font-size:11.5px; color:var(--gray-3); margin-top:7px; }

/* ── receipts: who has and has not ─────────────────────────────────────── */
.mm-rc      { background:var(--card-bg); border:1px solid #E3E7EC; border-radius:10px; overflow:hidden; margin-top:10px; }
.mm-rc-h    { padding:13px 14px 12px; }
.mm-rc-n    { display:flex; align-items:baseline; gap:8px; margin-bottom:9px; }
.mm-rc-big  { font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; }
.mm-rc-of   { font-size:13px; color:var(--gray-4); }
.mm-rc-bad  { font-size:12px; color:var(--danger); font-weight:600; margin-left:auto; }
.mm-bar     { height:7px; border-radius:999px; background:var(--border); overflow:hidden; }
.mm-bar > i { display:block; height:100%; background:#2F5A3A; }
.mm-rc-s    { border-top:1px solid var(--border); padding:11px 14px 12px; }
.mm-rc-lbl  { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              color:var(--gray-3); margin-bottom:8px; }
.mm-team    { display:flex; align-items:center; gap:9px; font-size:13px; margin-bottom:7px; }
.mm-team.zero { color:var(--danger); }
.mm-team-n  { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-mini    { width:96px; height:6px; border-radius:999px; background:var(--border); overflow:hidden; flex:0 0 96px; }
.mm-mini > i{ display:block; height:100%; background:#2F5A3A; }
.mm-team-c  { width:52px; text-align:right; color:var(--gray-4); font-variant-numeric:tabular-nums; }
.mm-team.zero .mm-team-c { color:inherit; font-weight:600; }
.mm-person  { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.mm-person-n{ flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-st      { font-size:12px; white-space:nowrap; }
.mm-st.ok   { color:var(--olive-dk); font-weight:600; }
.mm-st.mid  { color:var(--gray-3); }
.mm-st.no   { color:var(--danger); }
.mm-more    { width:100%; margin-top:2px; background:var(--card-bg); border:1px solid #E3E7EC; border-radius:var(--radius-btn);
              padding:10px 0; text-align:center; font:600 13px/1 inherit; color:var(--text); cursor:pointer; }

/* ── composer ──────────────────────────────────────────────────────────── */
.mm-c-card  { background:var(--card-bg); border:1px solid #E3E7EC; border-radius:10px; padding:12px 13px 13px; margin-bottom:10px; }
.mm-c-lbl   { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              color:var(--gray-3); margin-bottom:8px; }
.mm-c-lbl i { font-style:normal; font-weight:400; letter-spacing:0; text-transform:none;
              color:var(--gray-3); margin-left:7px; }
.mm-chips   { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:9px; }
.mm-who     { display:flex; align-items:center; gap:7px; background:var(--green-lt); border:1px solid #9BD3A6;
              border-radius:999px; padding:4px 6px 4px 5px; font-size:12.5px; font-weight:500; }
.mm-who-av  { width:20px; height:20px; border-radius:999px; background:#26492F; color:#fff; font-size:9px;
              font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mm-who-x   { color:var(--gray-3); font-size:13px; cursor:pointer; background:none; border:0; padding:0 2px; }
.mm-add     { border:1px dashed #F0A47C; background:none; color:var(--gray-4); border-radius:999px;
              padding:5px 12px; font:500 12.5px/1.3 inherit; cursor:pointer; }
/* ── Memos 2c: the people you memo most, and By when as a button ─────────── */
.mm-recs    { margin-top:10px; }
.mm-rec-l   { font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
              color:var(--gray-3); margin-bottom:7px; }
.mm-rec-l i { font-weight:600; text-transform:none; letter-spacing:0; font-style:normal;
              color:var(--gray-3); }
.mm-rec-row { display:flex; gap:7px; flex-wrap:wrap; }
.mm-rec     { display:inline-flex; align-items:center; gap:6px; background:var(--card-bg);
              border:1px solid #E3E7EC; border-radius:999px; padding:5px 11px 5px 5px;
              font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; }
.mm-rec:hover { border-color:#2F5A3A; }
.mm-rec.dept { padding:5px 11px; color:var(--text); }
.mm-rec-av  { display:inline-flex; align-items:center; justify-content:center;
              width:22px; height:22px; border-radius:50%; background:var(--green-lt);
              color:var(--green); font-size:9.5px; font-weight:800; }
.mm-when-b  { background:var(--card-bg); border:1px dashed #F0A47C; border-radius:8px; padding:8px 12px;
              font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; width:100%; }
.mm-when-b:hover { border-color:#2F5A3A; color:var(--green); }

.mm-scopes  { display:flex; gap:6px; border-top:1px solid var(--border); padding-top:10px; }
.mm-scope   { flex:1; text-align:center; border:1px solid #E3E7EC; background:var(--card-bg); border-radius:8px;
              padding:8px 0; font:600 12.5px/1.2 inherit; color:var(--text); cursor:pointer; }
.mm-scope.on{ background:#1B3522; border-color:#1B3522; color:#fff; }
.mm-scope[disabled] { color:var(--gray-3); cursor:default; background:var(--yellow-lt); }
.mm-hint    { font-size:11.5px; color:var(--gray-3); margin-top:7px; }
.mm-lock    { display:flex; align-items:center; gap:6px; background:var(--gray-2); border-radius:var(--radius-btn);
              padding:7px 9px; margin-top:9px; font-size:11.5px; color:var(--gray-4); }
.mm-lock b  { color:var(--green-dk); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-in      { width:100%; border:0; padding:0; font:600 15.5px/1.3 inherit; color:var(--green-dk); background:none; }
.mm-in::placeholder { color:var(--gray-3); font-weight:500; }
.mm-ta      { width:100%; border:0; padding:0; font:400 14px/1.55 inherit; color:var(--green-dk);
              background:none; resize:vertical; min-height:96px; }
.mm-ta::placeholder { color:var(--gray-3); }
.mm-in:focus, .mm-ta:focus { outline:none; }
.mm-sect    { padding:12px 13px 11px; border-bottom:1px solid var(--border); }
.mm-sect:last-child { border-bottom:0; padding:12px 13px 14px; }
.mm-toggle  { display:flex; align-items:center; gap:11px; background:var(--card-bg); border:1px solid #E3E7EC;
              border-radius:10px; padding:11px 13px; margin-bottom:12px; cursor:pointer; }
.mm-tg-t    { font-size:13.5px; font-weight:600; }
.mm-tg-s    { font-size:11.5px; color:var(--gray-3); }
.mm-sw      { flex:0 0 auto; width:44px; height:26px; border-radius:999px; background:#D6DCE4; padding:3px;
              display:flex; justify-content:flex-start; transition:background .12s; }
.mm-sw > i  { display:block; width:20px; height:20px; border-radius:999px; background:var(--card-bg); }
.mm-toggle.on .mm-sw { background:#8A3A17; justify-content:flex-end; }
.mm-send    { display:flex; align-items:center; gap:10px; width:100%; background:#2F5A3A; border:0;
              border-radius:var(--radius); padding:13px 16px; cursor:pointer; text-align:left; }
.mm-send.all{ background:#1B3522; }
/* White on the disabled peach was 2.04:1 — the one state where you most need
   to read why you cannot send. Dark ink on it instead. */
.mm-send[disabled] { background:#F0A47C; cursor:default; }
.mm-send[disabled] .mm-send-t,
.mm-send[disabled] .mm-send-s { color:#2A1811; }
.mm-send-t  { color:#fff; font-size:15.5px; font-weight:600; }
.mm-send-s  { color:#9BD3A6; font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mm-send.all .mm-send-s { color:var(--gray-3); }
.mm-people  { max-height:210px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius-btn); padding:4px; }
.mm-prow    { display:flex; align-items:center; gap:9px; padding:7px 8px; cursor:pointer; font-size:13px; border-radius:var(--radius-btn); }
.mm-prow:hover { background:var(--gray-2); }

@media (max-width:768px){
  .mm-subj { font-size:15.5px; }
  .mm-sheet { margin:-16px -16px 0; }
}
.mm-audhead { display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 10px;
              background:var(--gray-2); border-radius:8px; font-size:12px; color:var(--text); cursor:pointer; }
.mm-audhead:hover { background:var(--border); }

/* The tab strip on the Memos page. Light, because the page hero above it is
   already the dark green block — the design's dark header was drawn for a phone
   that has no hero over it, and running both gave the page two headers.
   Named .mm-nav, NOT .mm-bar: .mm-bar is already the receipts progress bar, at
   height:7px with overflow:hidden, and reusing the name squashed the tabs into
   a 7px sliver. Rendering it is the only thing that found that. */
.mm-nav { display:flex; gap:22px; font-size:14px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.mm-nav .mm-tab { color:var(--gray-3); padding-bottom:9px; margin-bottom:-1px; }
.mm-nav .mm-tab.on { color:var(--green-dk); border-bottom:2px solid #2F5A3A; }
.mm-nav .mm-tab .mm-tab-n { background:var(--green-lt); color:var(--green); }
.mm-nav .mm-tab.on .mm-tab-n { background:#2F5A3A; color:#fff; }

/* ── draft 2 of the Memos screen: one bar, three groups, a tick per settled
      memo, and the empty two-thirds of the desktop given to the memo ───────
   Against the build: the sub-tab row and the filter-chip row were two separate
   bands above the first memo, and on a phone the search field was a third. They
   are one row now. .mm-topbar wraps at narrow widths so the phone gets the tab
   row and nothing else, which is what "two bands, not six" means.
   Not named .mm-bar. That is the receipts progress bar at height:7px, and the
   note above already records what reusing it did to the tabs. */
.mm-topbar   { display:flex; align-items:center; justify-content:flex-start; gap:12px;
               flex-wrap:wrap; min-height:60px; padding:6px 0 4px;
               border-bottom:1px solid var(--border); margin-bottom:2px; }
.mm-topbar .mm-nav { border-bottom:0; margin-bottom:0; flex:0 0 auto; }
.mm-topbar .mm-nav .mm-tab { padding-bottom:0; margin-bottom:0; border-bottom:0; }
.mm-topbar .mm-nav .mm-tab.on { border-bottom:0; background:var(--green-lt); border-radius:999px;
               padding:5px 11px; color:var(--green-dk); }
.mm-topbar .mm-search { width:auto; flex:1 1 180px; min-width:0; max-width:340px; margin:0; }
/* The new-memo button LEADS the row (7a), so it must not carry the auto margin
   that used to push it to the far right: with the button first, that margin
   shoved the whole strip -- tabs included -- over to the right-hand edge.
   Fiyana, 2026-09-14: "Bring all the buttons to the left." */
.mm-topbar-r { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.mm-tickrow.is-cleared .mm-tick-x { opacity:1; color:var(--green); }
.mm-tickrow.is-cleared .mm-tick-t { color:var(--gray-3); }
.mm-tickrow > .mm-tick-b > .mm-tick { flex:0 0 auto; }

/* The reading pane. Desktop only, and it is why .mm-wrap's 640px cap lifts:
   the cap put a 640px column in a 2100px window and left the right two-thirds
   blank. The pane is 660px because that is a comfortable measure for prose;
   wider is harder to read, not more generous. */
.mm-read       { display:none; }
@media (min-width:1024px){
  .mm-wrap.mm-split       { max-width:1140px; }
  .mm-wrap.mm-split .mm-split-b { display:grid; grid-template-columns:minmax(340px,420px) minmax(0,660px);
                            gap:22px; align-items:start; }
  .mm-wrap.mm-split .mm-read { display:block; position:sticky; top:12px; }
  .mm-wrap.mm-split .mm-grp:first-child { padding-top:12px; }
  /* The pane's own sheet must not keep the modal's negative margins. */
  .mm-wrap.mm-split .mm-read .mm-sheet { margin:0; }
}
.mm-due     { font-size:11px; font-weight:700; padding:2px 7px; border-radius:5px;
              background:var(--green-lt); color:var(--text); white-space:nowrap; }
.mm-due.late{ background:var(--danger-lt); color:var(--danger); }
.mm-tag.late{ border-color:#E98A7E; color:var(--danger); }

.mm-tools   { display:flex; align-items:center; gap:2px; margin-bottom:7px; }
.mm-tool    { width:28px; height:26px; border:1px solid #E3E7EC; background:var(--card-bg); border-radius:var(--radius-btn);
              font-size:12px; color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.mm-tool:hover { background:var(--gray-2); }
.mm-tool-sep{ width:1px; height:16px; background:var(--border); margin:0 4px; }
.mm-rte     { min-height:104px; font-size:14px; line-height:1.55; color:var(--green-dk); outline:none; }
.mm-rte:empty::before { content:attr(data-ph); color:var(--gray-3); }
.mm-rte ul, .mm-rte ol { margin:6px 0 6px 20px; padding:0; }
.mm-rte p   { margin:0 0 8px; }

.mm-ccrow   { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px;
              border-top:1px solid #EDF0F3; padding-top:9px; }
.mm-link    { background:none; border:0; color:var(--olive-dk); font:600 12.5px/1 inherit; cursor:pointer; padding:2px 0; border-radius:0; }
.mm-link:hover { text-decoration:underline; }
.mm-who.bcc { background:var(--border); border-color:var(--gray-3); }
.mm-who.bcc .mm-who-av { background:#8A3A17; }

/* ── the composer as one card of rows (#270, 28 Sep 2026) ─────────────────
   Agreed with Neha on a practice screen first. Labels on the left in bold,
   Cc/Bcc on the To line, the group buttons and Frequent names small under it,
   one picker for every "who", a real toolbar, and the optional things as a
   single row of buttons. Every colour is a token, so dark is the same markup. */
.mm-say    { font-size:12.5px; line-height:1.4; color:var(--gray-3); margin-top:3px; }
.mm-form   { padding:0; }
.mm-r      { display:flex; align-items:flex-start; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); }
.mm-r[hidden] { display:none; }
.mm-rl     { flex:0 0 58px; font-size:13.5px; font-weight:700; color:var(--text); padding-top:6px; }
.mm-form .mm-chips { flex:1; min-width:0; margin:0; align-items:center; min-height:32px; }
.mm-form .mm-add { padding:6px 12px; }
.mm-who-n  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }
/* A long name or group shrinks inside the row rather than running under Cc/Bcc. */
.mm-form .mm-who { max-width:100%; min-width:0; }
.mm-form .mm-who-n { min-width:0; }
.mm-who-c  { font-size:11.5px; opacity:.8; }
.mm-who.grp { background:var(--info-lt); border-color:transparent; color:var(--info); }
.mm-who.grp .mm-who-av { background:var(--info); }
.mm-ccb    { display:flex; gap:6px; padding-top:1px; flex:0 0 auto; }
.mm-pill   { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px;
             border:1px solid var(--border); background:var(--card-bg); color:var(--text);
             font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; }
.mm-pill.sm { height:30px; padding:0 11px; }
.mm-pill:hover { border-color:#2F5A3A; }
.mm-pill.on { background:var(--orange-lt); border-color:#F0A47C; color:var(--yellow-dk); }
.mm-quick  { display:flex; flex-direction:column; gap:7px; padding:8px 14px 10px 82px; border-bottom:1px solid var(--border); }
.mm-qline  { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mm-ql     { font-size:11.5px; color:var(--gray-3); margin-right:2px; }
.mm-grp    { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border:1px solid var(--border);
             border-radius:var(--radius-btn); background:var(--card-bg); color:var(--text);
             font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer; }
.mm-grp svg { color:var(--gray-3); }
.mm-grp:hover { border-color:#2F5A3A; }
.mm-grp.on { background:var(--green-lt); border-color:#2F5A3A; color:var(--green-dk); }
.mm-grp[disabled] { opacity:.5; cursor:default; }
.mm-grp[disabled]:hover { border-color:var(--border); }
.mm-quick .mm-recs { margin:0; }
.mm-quick .mm-rec { height:24px; padding:0 9px; border:0; border-radius:999px; background:var(--gray-2); color:var(--gray-4);
             font-family:inherit; font-size:12px; font-weight:500; cursor:pointer; }
.mm-quick .mm-rec:hover { background:var(--green-lt); color:var(--green-dk); }
.mm-quick .mm-hint { margin:0; }
.mm-quick .mm-hint:empty, #memo-recents:empty { display:none; }
.mm-form #memo-aud-list:not(:empty) { padding:0 14px 10px 82px; border-bottom:1px solid var(--border); }
.mm-cchint { font-size:11.5px; color:var(--gray-3); }
.mm-pk     { margin:8px 14px 10px 82px; border:1px solid var(--border); border-radius:12px; background:var(--card-bg);
             box-shadow:0 8px 24px rgba(16,24,40,.10); overflow:hidden; }
.mm-pk-q   { display:block; width:calc(100% - 20px); margin:10px; height:42px; padding:0 12px; border:2px solid #3F6B44;
             border-radius:10px; background:var(--card-bg); color:var(--text); font-family:inherit; font-size:14.5px; outline:none; }
.mm-pk-q::placeholder { color:var(--gray-3); }
.mm-pk-l   { max-height:280px; overflow-y:auto; border-top:1px solid var(--border); }
.mm-pk-o   { display:flex; align-items:center; gap:12px; padding:8px 14px; cursor:pointer; font-size:14px; color:var(--text); }
.mm-pk-o.hi { background:var(--green-lt); }
.mm-pk-o.none { color:var(--gray-3); cursor:default; font-size:13px; padding:12px 14px; }
.mm-pk-n   { flex:1; min-width:0; }
.mm-pk-b   { flex:0 0 auto; font-size:11.5px; color:var(--gray-4); background:var(--gray-2); border-radius:999px;
             padding:2px 9px; white-space:nowrap; }
.mm-form .mm-in { flex:1; min-width:0; height:32px; font-weight:500; }
.mm-cnt    { flex:0 0 auto; font-size:11.5px; color:var(--gray-3); white-space:nowrap; }
.mm-cnt.bad { color:var(--danger); }
.mm-form .mm-tools { margin:0; padding:5px 10px; gap:2px; flex-wrap:wrap; background:var(--band);
             border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2; }
.mm-form .mm-tool { width:34px; height:32px; border:0; background:none; color:var(--gray-4); }
.mm-form .mm-tool:hover { background:var(--card-bg); color:var(--text); }
.mm-form .mm-tool.on { background:var(--card-bg); color:var(--olive-dk); box-shadow:inset 0 0 0 1px var(--border); }
.mm-form .mm-tool-sep { height:20px; }
.mm-form .mm-rte { min-height:170px; padding:12px 14px; font-size:14.5px; line-height:1.65; }
.mm-attl   { padding:0 14px; }
.mm-attl:empty { display:none; }
.mm-opts   { display:flex; flex-wrap:wrap; gap:8px; padding:11px 14px; border-top:1px solid var(--border); }
.mm-opts .mm-pill svg { color:var(--gray-3); }
.mm-opts .mm-pill.on svg { color:inherit; }
.mm-inl    { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0 14px; }
.mm-inl[hidden] { display:none; }
.mm-inl > * { margin-bottom:11px; }
.mm-inl .input { flex:1; min-width:140px; }
.mm-foot   { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; padding:0 14px; }
.mm-foot .mm-send { flex:1 1 260px; width:auto; }
/* Save as draft stands as tall as the send button beside it (Neha, 28 Sep:
   "this looks odd"), rather than a small chip floating at its middle. */
.mm-foot .adt-mode { justify-content:center; padding:0 18px; font-size:13.5px; border-radius:var(--radius); }
.mm-foot .adt-say { align-self:center; }
/* What the toolbar can now make, wherever memo text is shown. */
.mm-rte h3, .mbx-body h3 { font-size:1.1em; font-weight:700; margin:.5em 0 .3em; color:var(--text); }
.mm-rte blockquote, .mbx-body blockquote { margin:.4em 0 .6em; padding-left:12px; border-left:3px solid var(--border);
             color:var(--gray-4); }
.mm-rte mark, .mbx-body mark { background:#FCE8A8; color:inherit; padding:0 2px; border-radius:2px; }
[data-theme="dark"] .mm-rte mark, [data-theme="dark"] .mbx-body mark { background:#5A4A12; }
@media (max-width:560px){
  .mm-quick, .mm-form #memo-aud-list:not(:empty) { padding-left:14px; }
  .mm-pk { margin-left:10px; margin-right:10px; }
  .mm-rl { flex:0 0 auto; min-width:44px; }
  .mm-foot .mm-send { order:-1; flex-basis:100%; }
}
.mm-att     { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:var(--gray-2);
              border:1px solid #E3E7EC; border-radius:8px; padding:9px 11px; cursor:pointer;
              font:500 12.5px/1.3 inherit; color:var(--text); }
.mm-att:hover { background:var(--border); }
.mm-att-n   { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.mm-owner   { margin-top:10px; }
.mm-reply.me{ background:var(--green-lt); }

/* ═══════════════════════════════════════════════════════════
   CONTENT PLANNER (cp-)
   Slice 1. Implements the "Plain" direction from the Content
   design canvas, turn 2: one status pill, one title, one line
   of plain English. The width on desktop buys a date column
   and an Open button, deliberately not more information.
   Tokens only, so dark mode comes from the root redefinition
   rather than from a parallel set of rules.
   ═══════════════════════════════════════════════════════════ */
.cp-wrap    { max-width:860px; margin:0 auto; padding:0 2px 40px; }
/* The calendar needs room; the list needs a reading width. */
.cp-wrap.cp-wide { max-width:1320px; }
.cp-bar     { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.cp-bar-sp  { flex:1 1 auto; }

/* Filter chips: Everything / Mine / Stuck */
.cp-chip    { border:1px solid var(--border); background:var(--card-bg); color:var(--gray-4);
              border-radius:8px; padding:7px 13px; font-size:13px; font-weight:500;
              cursor:pointer; font-family:inherit; line-height:1.2; }
.cp-chip:hover { color:var(--text); }
.cp-chip.on { border-color:var(--green); color:var(--green); background:var(--green-lt); font-weight:600; }

/* One card per content item */
.cp-card    { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
              padding:15px 16px; margin-bottom:10px; cursor:pointer; }
.cp-card:hover { border-color:var(--line); }
.cp-card.cp-stuck { border-color:var(--yellow); border-width:2px; padding:14px 15px; }
.cp-card-t  { font-size:15.5px; font-weight:600; color:var(--text); line-height:1.35; margin:9px 0 0; }
.cp-card-s  { font-size:13px; color:var(--gray-4); line-height:1.5; margin:5px 0 0; }
.cp-card-n  { font-size:13px; font-weight:600; color:var(--text); margin:10px 0 0; }
/* A blocker is amber. A deliberate pause is not a warning, and painting it
   like one made a calm decision look like a problem on the board. */
.cp-reason  { font-size:13px; color:var(--gray-4); line-height:1.5; margin:6px 0 0; }
.cp-reason-stuck { color:var(--yellow-dk); }

/* Status pill. A short, unambiguous set — and where something is part-done the
   pill counts it ("2 of 3 published"), never "mostly". */
.cp-pill    { display:inline-block; border-radius:999px; padding:3px 10px; font-size:11.5px;
              font-weight:600; line-height:1.5; border:1px solid transparent; white-space:nowrap; }
.cp-pill-q  { background:var(--gray-2); color:var(--gray-4); }            /* not started, paused */
.cp-pill-w  { background:var(--gray-2); color:var(--text); }              /* being made, waiting */
.cp-pill-r  { background:var(--card-bg); border-color:var(--green); color:var(--green); }
.cp-pill-p  { background:var(--green); color:var(--green-lt); }                      /* n of m published */
.cp-pill-d  { background:var(--green-dk); color:var(--green-lt); }                   /* all published */
.cp-pill-s  { background:var(--yellow-lt); border-color:var(--yellow); color:var(--yellow-dk); }
[data-theme="dark"] .cp-pill-p, [data-theme="dark"] .cp-pill-d { color:#17281C; }
/* In dark, --gray-2 (#1B2433) sits a hair off the card, so the two grey pills
   read as plain text with no pill around them. Pre-existing, and it only
   started to matter when the calendar began showing a dozen at a time. */
[data-theme="dark"] .cp-pill-q,
[data-theme="dark"] .cp-pill-w { border-color:var(--line); }

/* One colour per status, 2026-09-01: "different statuses could be different
   colors." The q/w/r/s set above stays because the SIGN-OFF pill still uses it,
   and a sign-off state is not a status. These run in ladder order, so the
   colour itself carries a sense of progress: grey, slate, amber, violet, blue,
   then green. */
.cp-pill-idea  { background:var(--gray-2); color:var(--gray-4); }
.cp-pill-plan  { background:#EDF0F3; color:#4a5a6b; border-color:#E3E7EC; }
.cp-pill-make  { background:var(--yellow-lt); color:var(--yellow-dk); border-color:#C4705C; }
.cp-pill-sign  { background:var(--violet-lt); color:#534ab7; border-color:#afa9ec; }
.cp-pill-redy  { background:#e8f1fb; color:#185fa5; border-color:#85b7eb; }
.cp-pill-part  { background:var(--green-lt); color:var(--green-dk); border-color:var(--green); }
.cp-pill-live  { background:var(--green-dk); color:var(--green-lt); }
.cp-pill-stuck { background:var(--danger-lt); color:var(--danger); border-color:#E98A7E; }
.cp-pill-hold  { background:var(--yellow-lt); border-color:var(--yellow); color:var(--yellow-dk); }
.cp-pill-canc  { background:var(--gray-2); color:var(--gray-4); text-decoration:line-through; }
[data-theme="dark"] .cp-pill-live { color:#17281C; }
[data-theme="dark"] .cp-pill-idea,
[data-theme="dark"] .cp-pill-canc { border-color:var(--line); }
[data-theme="dark"] .cp-pill-plan { background:#26303D; color:#b7c6d6; border-color:#3c4c5e; }
[data-theme="dark"] .cp-pill-make { background:#2A1811; color:#C4705C; }
[data-theme="dark"] .cp-pill-sign { background:#26303D; color:#b6b0f0; }
[data-theme="dark"] .cp-pill-redy { background:#1B2433; color:#8fbdf0; }
[data-theme="dark"] .cp-pill-stuck{ background:#26303D; color:#E98A7E; }

/* Desktop only: the width buys a date column and an Open button. */
.cp-row-r   { display:none; }
.cp-only-phone { display:block; }
@media (min-width:769px) {
  .cp-card  { display:grid; grid-template-columns:1fr auto; column-gap:18px; align-items:start; }
  .cp-row-l { min-width:0; }
  .cp-row-r { display:flex; flex-direction:column; align-items:flex-end; gap:9px;
              padding-top:1px; white-space:nowrap; }
  .cp-when  { font-size:12.5px; color:var(--gray-4); }
  .cp-only-phone { display:none; }
}
.cp-h       { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:25px; line-height:1.2;
              color:var(--text); margin:10px 0 0; font-weight:600; }
.cp-sub     { font-size:12.5px; color:var(--gray-4); margin:-5px 0 9px; line-height:1.5; }

/* An Output: "a thing to make" */
.cp-out     { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
              padding:13px 14px; margin-bottom:9px; }
.cp-out-h   { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.cp-out-t   { font-size:14.5px; font-weight:600; color:var(--text); line-height:1.35; }
.cp-out-m   { font-size:13px; color:var(--gray-4); margin:4px 0 8px; }
.cp-opt     { font-size:11px; color:var(--gray-4); font-weight:500; }

/* Three links, three shapes, always in the same order and always all three
   present. An empty one says so. This is the one thing that must never be
   confusable: working material, the approved file, and where it went live. */
.cp-slots   { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:8px; }
.cp-slot    { padding:10px 13px; border-bottom:1px dashed var(--border); }
.cp-slot:last-child { border-bottom:0; }
.cp-slot-k  { font-size:11.5px; font-weight:700; color:var(--gray-4); letter-spacing:.02em; }
.cp-slot-v  { font-size:13px; color:var(--text); line-height:1.5; margin-top:3px; word-break:break-word; }
.cp-slot-v .cp-none { color:var(--gray-3); }
.cp-slot-v a { color:var(--green); }
/* Solid green was right when this section held one link and nothing else. It
   now holds a sub-headline, two buttons, a file hint and the caption box, and
   every one of those went unreadable on it. The signal is kept -- tinted panel,
   green edge, the tick on the heading -- and the contents stay legible. */
.cp-slot.cp-approved { background:var(--green-lt); border-left:3px solid var(--green);
                       border-bottom-color:transparent; }
.cp-slot.cp-approved .cp-slot-k { color:var(--green-dk); }
[data-theme="dark"] .cp-slot.cp-approved { background:#1B3522; }
[data-theme="dark"] .cp-slot.cp-approved .cp-slot-k { color:#8CC79A; }

/* Capture. Title is the only thing between an idea and a saved record;
   everything else is openly optional. */
.cp-f       { margin-bottom:13px; }
.cp-f label { display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:5px; }
.cp-f .cp-opt-lbl { font-weight:500; color:var(--gray-4); }
.cp-f input, .cp-f textarea, .cp-f select {
              width:100%; box-sizing:border-box; background:var(--input-bg); color:var(--text);
              border:1px solid var(--border); border-radius:8px; padding:10px 12px;
              font-size:14px; font-family:inherit; }
.cp-f textarea { min-height:78px; resize:vertical; line-height:1.5; }
.cp-hint    { font-size:12px; color:var(--gray-4); margin-top:5px; line-height:1.5; }

/* Empty state */
.cp-empty   { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
              padding:30px 24px; text-align:center; }
.cp-empty-h { font-size:15.5px; font-weight:600; color:var(--text); }
.cp-empty-p { font-size:13.5px; color:var(--gray-4); line-height:1.6; max-width:430px;
              margin:8px auto 0; }

/* ── Content planner, revised 2026-08-31 on her feedback ──────────────────
   "too much clicking to get to what u need", "adding multiple outputs needs
   to be easy", "see what information is missing. Don't make me click so much
   to find out what I need to do." Three answers: say what is missing on the
   card, group a cross-posted set into one block, and pick the type once and
   tick the platforms. */

/* What is still needed, said where it can be read without opening anything. */
.cp-need    { font-size:13px; color:var(--text); line-height:1.5; margin:8px 0 0;
              display:flex; gap:7px; align-items:baseline; }
.cp-need b  { font-weight:600; white-space:nowrap; }
.cp-need-i  { color:var(--gray-4); font-weight:400; }

/* Platforms a set went to, read-only. */
.cp-plats   { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0 0; }
.cp-plat    { font-size:11.5px; font-weight:500; color:var(--gray-4);
              background:var(--gray-2); border-radius:var(--radius-btn); padding:3px 8px; }
.cp-pick.on { background:var(--green); border-color:var(--green); color:var(--green-lt); font-weight:600; }
[data-theme="dark"] .cp-pick.on { color:#17281C; }

/* An inline action on a list card, so the commonest next step is one tap from
   the list rather than four. */
.cp-inline  { margin-top:11px; }

/* ── Inline detail, 2026-09-01 ────────────────────────────────────────────
   "make the detail inline". No navigating away and no Back link: the card
   opens where it is. One at a time, because a wall of open cards is the
   overwhelm this module keeps being told to avoid. */
.cp-tap     { cursor:pointer; }
.cp-chev    { font-size:11px; color:var(--gray-3); margin-left:7px;
              display:inline-block; transition:transform .12s ease; }

/* ── The words, on the page, 2026-09-01 ───────────────────────────────────
   Her instruction: keep the terminology clear about what an idea, a post and
   a publication are, and write it on top of the module so people understand
   what "add" means. Dismissible, because it is for the first week. */
.cp-legend  { position:relative; background:var(--green-lt); border:1px solid var(--border);
              border-radius:10px; padding:14px 16px; margin:0 0 14px; }
.cp-legend-x{ position:absolute; top:8px; right:10px; border:0; background:none; cursor:pointer;
              font-size:17px; line-height:1; color:var(--gray-4); font-family:inherit; padding:2px 5px; }
.cp-legend-x:hover { color:var(--text); }
.cp-legend-shut { background:none; border:0; padding:0; margin:0 0 11px; }
.cp-legend-t{ border:0; background:none; padding:0; cursor:pointer; font-family:inherit;
              font-size:12.5px; font-weight:600; color:var(--green); text-decoration:underline; }
.cp-gloss   { margin:0; display:grid; gap:7px; }
.cp-gloss > div { display:flex; gap:9px; align-items:baseline; }
.cp-gloss dt{ font-size:12.5px; font-weight:700; color:var(--text); min-width:74px; flex:none; }
.cp-gloss dd{ margin:0; font-size:12.5px; color:var(--gray-4); line-height:1.5; }

/* What the post actually is, all of it visible at once when opened. */
.cp-facts   { margin:0; display:grid; gap:8px; }
.cp-fact    { display:flex; gap:11px; align-items:baseline; }
.cp-fact dt { font-size:12px; font-weight:600; color:var(--gray-4); min-width:112px; flex:none;
              text-transform:uppercase; letter-spacing:.03em; }
.cp-fact dd { margin:0; font-size:13.5px; color:var(--text); line-height:1.5; }

/* Tasks. Real Team Den tasks, so they look like the ones on the Tasks page. */
.cp-tasks   { margin-top:9px; }
/* A task row opens the real task, so it has to look like something you open. */
.cp-task    { display:flex; align-items:center; gap:11px; cursor:pointer;
              background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-btn);
              padding:10px 12px; margin-bottom:7px; }
.cp-task:hover { border-color:var(--green); background:var(--green-lt); }
.cp-task-b  { flex:1; min-width:0; }
.cp-task-t  { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.4; }
.cp-task-m  { font-size:12.5px; color:var(--gray-4); margin-top:2px; }
.cp-task-go { color:var(--gray-3); font-size:19px; line-height:1; flex:none; }
.cp-task:hover .cp-task-go { color:var(--green); }
.cp-task-done .cp-task-t { color:var(--gray-4); text-decoration:line-through; }
.cp-late    { color:var(--yellow-dk); font-weight:600; }

/* The state, as a pill, so a row is readable at a glance rather than parsed. */
.cp-task-s  { flex:none; font-size:10.5px; font-weight:700; letter-spacing:.03em;
              text-transform:uppercase; border-radius:var(--radius-btn); padding:4px 8px; min-width:64px;
              text-align:center; background:var(--gray-2); color:var(--gray-4); }
.cp-task-s-in_progress { background:var(--yellow-lt); color:var(--yellow-dk); }
.cp-task-s-review      { background:var(--yellow-lt); color:var(--yellow-dk); }
.cp-task-s-done        { background:var(--green); color:var(--green-lt); }
.cp-task-s-cancelled   { background:var(--gray-2); color:var(--gray-3); }
[data-theme="dark"] .cp-task-s-done { color:#17281C; }

/* A platform that has actually gone live. */
.cp-plat-live { background:var(--green-lt); color:var(--green); font-weight:600; }
[data-theme="dark"] .cp-plat-live { color:var(--green-dk); }
.mm-task-t.done { color:var(--gray-3); text-decoration:line-through; }
.mm-task-s.ok { background:var(--green-lt); color:var(--green); }
/* Opened and acknowledged are two separate facts, so the bar carries both:
   the pale band is how far the memo has been OPENED, the solid band how far it
   has been ACKNOWLEDGED. They are stacked, not side by side, because the
   second is always a subset of the first. */
.mm-bar, .mm-mini { position:relative; }
.mm-bar > i, .mm-mini > i { position:absolute; left:0; top:0; height:100%; }
.mm-bar > i.op, .mm-mini > i.op { background:#8CC79A; }
.mm-rc-key { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:9px; font-size:11px; color:var(--gray-4); }
.mm-rc-key span { display:inline-flex; align-items:center; gap:5px; }
.mm-rc-key i { width:9px; height:9px; border-radius:3px; display:inline-block; }
.mm-rc-key .k-ack { background:#2F5A3A; }
.mm-rc-key .k-op  { background:#8CC79A; }
.mm-rc-key .k-no  { background:var(--border); }

/* The next step, offered rather than looked for. */
.cp-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px; }
.cp-await   { font-size:13px; color:var(--gray-4); }

/* Working material: slot 1. Several links and small files, and it must never
   be mistakable for slot 2, the file that was signed off. */
.cp-assets   { padding:2px 0 0; }
.cp-asset    { display:flex; align-items:baseline; gap:8px; font-size:13px;
               padding:4px 0; line-height:1.5; }
.cp-asset a  { color:var(--green); word-break:break-word; cursor:pointer; }
.cp-asset-k  { font-size:10.5px; font-weight:700; color:var(--gray-4); letter-spacing:.04em;
               background:var(--gray-2); border-radius:5px; padding:2px 6px; flex:none;
               text-transform:uppercase; }
.cp-asset-x  { font-size:11.5px; color:var(--gray-3); flex:none; }
.cp-asset-del{ margin-left:auto; border:0; background:none; cursor:pointer; color:var(--gray-3);
               font-size:15px; line-height:1; padding:0 3px; font-family:inherit; flex:none; }
.cp-asset-del:hover { color:var(--yellow-dk); }
.cp-asset-add{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:9px; }

/* ── Editing happens where the thing is, 2026-09-01 ───────────────────────
   "Edit in place, kill the big modal." Structured fields are always the real
   control; free text reads as text until clicked. */
.cp-inline-in  { width:100%; box-sizing:border-box; background:var(--input-bg); color:var(--text);
                 border:1px solid var(--green); border-radius:var(--radius-btn); padding:7px 9px;
                 font-size:13.5px; font-family:inherit; }
.cp-inline-in.cp-inline-date { width:auto; min-width:160px; border-color:var(--border); }
textarea.cp-inline-in { min-height:64px; resize:vertical; line-height:1.5; }
.cp-inline-chk { font-size:12.5px; color:var(--gray-4); white-space:nowrap; }
.cp-inline-chk input { width:auto; margin-right:4px; vertical-align:-1px; }
/* Text that can be changed says so on hover rather than with an icon per row. */
.cp-click      { cursor:text; border-radius:var(--radius-btn); padding:2px 5px; margin:-2px -5px;
                 border:1px dashed transparent; }
.cp-click:hover{ border-color:var(--line); background:var(--gray-1); }
.cp-facts .cp-fact dd { flex:1; min-width:0; }

/* ── The calendar, 2026-09-01 ─────────────────────────────────────────────
   Posts on the day they go out, undated ones in a tray underneath so they are
   not forgotten. A month grid where there is room; the same month as a list of
   days on a phone, because a 7x6 grid at 375px is unreadable. */
.cp-views    { display:inline-flex; gap:6px; margin-right:8px; }
.cp-cal-head { display:flex; align-items:center; gap:9px; margin:0 0 12px; }
.cp-cal-m    { font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:19px; color:var(--text);
               margin-right:auto; }
.cp-cal      { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:1px;
               background:var(--border); border:1px solid var(--border); border-radius:10px;
               overflow:hidden; }
.cp-cal-dow  { background:var(--gray-2); color:var(--gray-4); font-size:11px; font-weight:700;
               letter-spacing:.05em; text-transform:uppercase; padding:7px 8px; text-align:center; }
.cp-cal-day  { background:var(--card-bg); min-height:96px; padding:6px 6px 8px; }
.cp-cal-out  { background:var(--gray-1); }
.cp-cal-out .cp-cal-n { opacity:.35; }
.cp-cal-n    { font-size:12px; font-weight:600; color:var(--gray-4); margin-bottom:5px; }
.cp-cal-today .cp-cal-n { background:var(--green); color:var(--green-lt); border-radius:50%;
               width:21px; height:21px; display:inline-flex; align-items:center;
               justify-content:center; }
[data-theme="dark"] .cp-cal-today .cp-cal-n { color:#17281C; }
.cp-cal-over { background:var(--green-lt); outline:2px dashed var(--green); outline-offset:-3px; }

/* One post on one day. Colour follows its status, the same set as the pills. */
.cp-chip-p   { font-size:11.5px; font-weight:600; line-height:1.35; border-radius:var(--radius-btn);
               padding:4px 6px; margin-bottom:3px; cursor:pointer; overflow:hidden;
               text-overflow:ellipsis; white-space:nowrap; background:var(--gray-2);
               color:var(--text); border-left:3px solid var(--line); }
.cp-chip-p:hover { filter:brightness(.96); }
.cp-chip-w   { border-left-color:var(--yellow); }
.cp-chip-r   { border-left-color:var(--green); background:var(--green-lt); color:var(--green); }
.cp-chip-p.cp-chip-s { border-left-color:var(--yellow-dk); background:var(--yellow-lt);
               color:var(--yellow-dk); }
.cp-chip-done{ background:var(--green); color:var(--green-lt); border-left-color:var(--green-dk); }
[data-theme="dark"] .cp-chip-done { color:#17281C; }

/* Undated posts, draggable onto a day. */
.cp-tray     { margin-top:14px; border:1px dashed var(--border); border-radius:10px; padding:11px 13px; }
.cp-tray-h   { font-size:12px; font-weight:700; color:var(--gray-4); text-transform:uppercase;
               letter-spacing:.04em; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.cp-tray-x   { font-weight:500; text-transform:none; letter-spacing:0; font-size:12px; opacity:.8; }
.cp-tray-b   { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.cp-tray-b .cp-chip-p { margin:0; max-width:230px; }

/* A toast you can act on: a drag with no way back is one people avoid. */
.cp-undo     { position:fixed; left:50%; transform:translateX(-50%); bottom:26px; z-index:1000;
               display:flex; align-items:center; gap:14px; background:var(--green-dk); color:var(--green-lt);
               padding:11px 14px 11px 18px; border-radius:10px; font-size:13.5px;
               box-shadow:0 6px 20px rgba(0,0,0,.22); max-width:92vw; }
.cp-undo-b   { background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:var(--radius-btn);
               padding:6px 13px; font-size:13px; font-weight:700; cursor:pointer;
               font-family:inherit; }
.cp-undo-b:hover { background:rgba(255,255,255,.28); }

/* The phone form of the same month. */
.cp-agenda   { display:none; }
.cp-ag-day   { margin-bottom:14px; }
.cp-ag-d     { font-size:12px; font-weight:700; color:var(--gray-4); text-transform:uppercase;
               letter-spacing:.04em; margin:0 0 7px; }
@media (max-width:768px) {
  .cp-cal    { display:none; }
  .cp-agenda { display:block; }
}

/* ── the post workspace, 2026-09-01 ───────────────────────────────────────
   A post opens the way a task opens. Shaped after the task modal on purpose:
   that is the surface everyone in this company already knows, and the post is
   the task here, with the content tasks as its checklist. */

.cp-w-head  { display:flex; align-items:flex-start; gap:10px; }
.cp-w-tick  { flex-shrink:0; width:24px; height:24px; margin-top:3px; border-radius:50%;
              cursor:pointer; border:1.5px solid var(--line); background:transparent;
              color:#fff; font-size:13px; line-height:1; padding:0; }
.cp-w-tick.on { border-color:var(--green); background:var(--green); }
.cp-w-title { flex:1; resize:none; overflow:hidden; font-size:17px; font-weight:700;
              line-height:1.35; color:var(--text); border:1px solid transparent;
              border-radius:var(--radius-btn); padding:3px 7px; margin:0; background:transparent;
              font-family:inherit; }
.cp-w-title:hover { border-color:var(--border); }
.cp-w-title:focus { border-color:var(--green); background:var(--surface-1); outline:none; }
.cp-w-x     { flex-shrink:0; border:none; background:none; cursor:pointer; font-size:20px;
              line-height:1; color:var(--gray-4); padding:2px 4px; }
.cp-w-x:hover { color:var(--text); }

.cp-w-need  { margin:12px 0 0; }
.cp-w-ok    { margin:12px 0 0; font-size:12.5px; color:var(--green-dk); }

/* Counts, and the unread tag. Comments are never behind a tab: 2026-09-01,
   "comments are getting missed because you can't see them when you first open
   the task." The tab styles that used to live here went with the tabs. */
.cp-w-n     { font-weight:400; color:var(--gray-4); letter-spacing:0; }
.cp-new     { background:var(--green); color:var(--green-lt); border-radius:10px; padding:1px 8px;
              font-size:10px; font-weight:800; letter-spacing:.02em; text-transform:none; }
[data-theme="dark"] .cp-new { color:#17281C; }

/* the fold on What happened */
.cp-fold    { display:flex; align-items:center; gap:7px; width:100%; margin:20px 0 0;
              padding:8px 0; border:0; border-top:1px solid var(--border);
              background:none; cursor:pointer; font-family:inherit; font-size:10px;
              font-weight:800; letter-spacing:.06em; text-transform:uppercase;
              color:var(--gray-4); }
.cp-fold:hover { color:var(--text); }
.cp-fold-c  { display:inline-block; font-size:11px; transition:transform .12s ease; }
.cp-fold.on .cp-fold-c { transform:rotate(90deg); }

/* how many comments, on the card in the list */
.cp-card-c  { display:flex; align-items:center; gap:8px; margin-top:8px; }
.cp-card-cn { font-size:11.5px; color:var(--gray-4); }

.cp-w-body  { min-height:120px; }
.cp-w-sect  { display:flex; align-items:center; gap:10px; font-size:10px; font-weight:800;
              color:var(--gray-4); letter-spacing:.06em; text-transform:uppercase;
              margin:18px 0 5px; }
.cp-w-sub   { font-size:11.5px; color:var(--gray-4); margin:0 0 9px; line-height:1.5; }
.cp-w-add   { margin-left:auto; border:1px dashed var(--border); background:none;
              border-radius:var(--radius); cursor:pointer; font-size:11px; font-weight:600;
              color:var(--green-dk); padding:2px 10px; letter-spacing:0; text-transform:none; }
.cp-w-add:hover { border-style:solid; background:var(--surface-1); }
.cp-w-foot  { display:flex; gap:8px; align-items:center; margin-top:20px; padding-top:14px;
              border-top:1px solid var(--border); }
.cp-w-gap   { flex:1; }

/* the tick on a task row: finishing something is one click and opens nothing */
.cp-task-tick { flex-shrink:0; width:19px; height:19px; margin-top:1px; border-radius:50%;
                cursor:pointer; border:1.5px solid var(--line); background:transparent;
                color:#fff; font-size:11px; line-height:1; padding:0; }
.cp-task-tick.on { border-color:var(--green); background:var(--green); }
.cp-task-tick:hover { border-color:var(--green); }

/* what happened */
.cp-evs    { max-height:210px; overflow-y:auto; }
.cp-ev     { display:grid; grid-template-columns:auto 1fr auto; gap:4px 9px;
              align-items:baseline; padding:5px 0; border-bottom:1px solid var(--border);
              font-size:12.5px; }
.cp-ev-w   { font-weight:600; color:var(--text); }
.cp-ev-s   { color:var(--gray-4); }
.cp-ev-t   { font-size:11px; color:var(--gray-3); white-space:nowrap; }

/* comments */
.cp-cmts    { max-height:230px; overflow-y:auto; margin-bottom:9px; }
.cp-cmt     { padding:7px 0; border-bottom:1px solid var(--border); }
.cp-cmt-h   { display:flex; align-items:baseline; gap:8px; font-size:12.5px; }
.cp-cmt-t   { font-size:11px; color:var(--gray-3); }
.cp-cmt-x   { margin-left:auto; border:none; background:none; cursor:pointer;
              font-size:15px; line-height:1; color:var(--gray-3); padding:0 3px; }
.cp-cmt-x:hover { color: var(--danger); }
.cp-cmt-b   { margin-top:2px; font-size:13px; color:var(--text); line-height:1.5;
              white-space:pre-wrap; word-break:break-word; }
.cp-cmt-new { display:flex; gap:6px; }
.cp-cmt-in  { flex:1; }

@media (max-width:768px) {
  .cp-w-title { font-size:16px; }
  .cp-ev     { grid-template-columns:1fr; gap:1px; }
  .cp-ev-t   { grid-row:1; justify-self:start; }
}
/* What a sent memo carries: its files, the tasks it turned into, and the memo
   it was forwarded from. A forward with no visible parent is just a memo with
   FW in front of it, and the chain is the thing memos were built for. */
.mm-carries { display:flex; flex-wrap:wrap; gap:6px; margin:7px 0 2px; align-items:center; }
.mm-carry   { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
              color:var(--gray-4); background:var(--gray-2); border-radius:5px; padding:2px 8px; white-space:nowrap; }
.mm-carry svg { opacity:.75; }

/* ── faces, and the week view, 2026-09-01 ─────────────────────────────────
   "wherever you can, show little thumbnails of the team working on it, and the
   status chip and all of that stuff on the calendar itself." The faces are
   pkAvatar, the app's own, so a person looks the same on a post as on a task. */

.cp-faces   { display:inline-flex; align-items:center; flex-shrink:0; }
.cp-face    { display:inline-flex; border-radius:50%; box-shadow:0 0 0 1.5px var(--card-bg,#fff); }
.cp-face-n  { margin-left:4px; font-size:10.5px; font-weight:700; color:var(--gray-4); }
.cp-card-w  { display:flex; align-items:center; gap:8px; margin-top:9px; }
.cp-card-wn { font-size:11.5px; color:var(--gray-4); }
.cp-task-f  { flex-shrink:0; display:inline-flex; }
.cp-cmt-f   { display:inline-flex; flex-shrink:0; }
.cp-ev-f    { display:inline-flex; vertical-align:middle; margin-right:6px; }
.cp-ev-w    { display:flex; align-items:center; }

/* a month chip carries its faces and its status colour */
.cp-chip-t  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.cp-chip-p  { display:flex; align-items:center; gap:5px; }
.cp-chip-f  { display:inline-flex; flex-shrink:0; }

/* the week: seven columns with room to say something */
.cp-cal-sp  { flex:1; }
/* Seven columns need a floor. At 1200px an equal split gave each one 95px, and
   a status pill truncated mid-word is worse than a horizontal scrollbar. */
.cp-week-wrap { overflow-x:auto; margin-top:12px; padding-bottom:4px; }
.cp-week    { display:grid; grid-template-columns:repeat(7, minmax(138px, 1fr)); gap:7px;
              align-items:start; }
.cp-wk-col  { background:var(--surface-1,#f7f6f1); border:1px solid var(--border);
              border-radius:var(--radius); padding:8px 7px 9px; min-height:150px; }
.cp-wk-col.cp-cal-over { border-color:var(--green); background:var(--green-lt); }
.cp-wk-now  { border-color:var(--green); }
.cp-wk-h    { display:flex; align-items:baseline; gap:5px; font-size:11px; font-weight:800;
              color:var(--gray-4); letter-spacing:.03em; text-transform:uppercase;
              padding:0 2px 7px; }
.cp-wk-today{ font-size:9.5px; font-weight:800; color:var(--green-dk); letter-spacing:0;
              text-transform:none; }
.cp-wk-none { height:6px; }
.cp-wk-card { background:var(--card-bg,#fff); border:1px solid var(--border);
              border-left:3px solid var(--line); border-radius:var(--radius-btn); padding:8px;
              margin-bottom:7px; cursor:pointer; }
.cp-wk-card:hover { border-color:var(--line); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.cp-wk-s    { margin-bottom:6px; }
/* The status wraps rather than truncating: half a word is not a status. */
.cp-wk-s .cp-pill { display:inline-block; white-space:normal; line-height:1.3; }
.cp-wk-t    { font-size:12.5px; font-weight:700; color:var(--text); line-height:1.35;
              overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:3;
              -webkit-box-orient:vertical; overflow:hidden; }
.cp-wk-m    { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:7px; }
.cp-wk-p    { display:inline-flex; flex-wrap:wrap; gap:4px; }
.cp-plat-s  { font-size:9.5px; font-weight:800; letter-spacing:.03em; color:var(--gray-4);
              background:var(--gray-1,#f0efe9); border-radius:4px; padding:2px 5px; }
.cp-plat-s.on { background:var(--green-lt); color:var(--green-dk); }
.cp-wk-n    { font-size:11px; color:var(--gray-4); margin-top:6px; }

/* the status colour on a week card's edge, matching the month chips */
.cp-wk-card.cp-chip-q { border-left-color:var(--line); }
.cp-wk-card.cp-chip-w { border-left-color:#C4705C; }
.cp-wk-card.cp-chip-r { border-left-color:#85b7eb; }
.cp-wk-card.cp-chip-d { border-left-color:var(--green); }
.cp-wk-card.cp-chip-s { border-left-color:#E98A7E; }

@media (max-width:768px) {
  /* Neither seven columns nor a 7x6 grid is readable here, so the agenda takes
     over and both grids are hidden. */
  .cp-week-wrap { display:none; }
  .cp-cal-head  { flex-wrap:wrap; }
  .cp-cal-sp    { flex-basis:100%; height:0; }
}

/* the same colours on a calendar chip's edge and a week card's edge */
.cp-chip-idea  { border-left-color:var(--line); }
.cp-chip-plan  { border-left-color:#8fa3b8; }
.cp-chip-make  { border-left-color:#C4705C; }
.cp-chip-sign  { border-left-color:#afa9ec; }
.cp-chip-redy  { border-left-color:#85b7eb; }
.cp-chip-part  { border-left-color:var(--green); }
.cp-chip-live  { border-left-color:var(--green-dk); }
.cp-chip-stuck { border-left-color:#E98A7E; }
.cp-chip-hold  { border-left-color:var(--yellow); }
.cp-chip-canc  { border-left-color:var(--line); }
.cp-wk-card.cp-chip-idea  { border-left-color:var(--line); }
.cp-wk-card.cp-chip-plan  { border-left-color:#8fa3b8; }
.cp-wk-card.cp-chip-make  { border-left-color:#C4705C; }
.cp-wk-card.cp-chip-sign  { border-left-color:#afa9ec; }
.cp-wk-card.cp-chip-redy  { border-left-color:#85b7eb; }
.cp-wk-card.cp-chip-part  { border-left-color:var(--green); }
.cp-wk-card.cp-chip-live  { border-left-color:var(--green-dk); }
.cp-wk-card.cp-chip-stuck { border-left-color:#E98A7E; }
.cp-wk-card.cp-chip-hold  { border-left-color:var(--yellow); }
.cp-wk-card.cp-chip-canc  { border-left-color:var(--line); }

/* a platform as its mark: no chrome around a logo, it is the chrome */
.cp-plat-i  { background:none; padding:2px; position:relative; display:inline-flex; }
.cp-plat-i.on { background:none; }
.cp-plat-tick { position:absolute; right:-2px; bottom:-2px; font-size:8px; font-weight:900;
                color:var(--green-dk); background:var(--card-bg,#fff); border-radius:50%;
                line-height:1; padding:1px; }
.cp-plat svg { vertical-align:-2px; margin-right:5px; }

/* what would move this post on, under its status */
.cp-w-step  { margin:9px 0 0; padding:9px 12px; border-radius:var(--radius-btn); background:var(--gray-1);
              border:1px solid var(--border); font-size:12px; color:var(--gray-4);
              line-height:1.55; }
.cp-w-step b { color:var(--text); }

/* the key */
.cp-how     { border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;
              margin:2px 0 8px; background:var(--surface-1,#f7f6f1); }
.cp-how-p   { font-size:12.5px; color:var(--gray-4); line-height:1.6; margin:0 0 12px; }
.cp-how-p:last-child { margin-bottom:0; }
.cp-how-p b { color:var(--text); }
.cp-how-l   { list-style:none; margin:0 0 14px; padding:0; }
.cp-how-l li { display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:start;
               padding:8px 0; border-top:1px solid var(--border); }
.cp-how-l li:first-child { border-top:0; }
.cp-how-i   { font-size:12.5px; color:var(--text); line-height:1.5; }
.cp-how-t   { font-size:12px; color:var(--gray-4); margin-top:3px; line-height:1.55; }
.cp-how-t b { color:var(--text); }
@media (max-width:640px) {
  .cp-how-l li { grid-template-columns:1fr; gap:5px; }
}

/* what goes out: the approved pile and the words that go with it */
.cp-slot-h  { font-size:11.5px; color:var(--gray-4); line-height:1.5; margin:0 0 9px; }
.cp-cap-k   { font-size:10px; font-weight:800; color:var(--gray-4); letter-spacing:.06em;
              text-transform:uppercase; margin:14px 0 7px;
              padding-top:12px; border-top:1px dashed var(--border); }
.cp-cap     { white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.6;
              color:var(--text); background:var(--card-bg,#fff); border:1px solid var(--border);
              border-radius:var(--radius-btn); padding:11px 13px; cursor:text; }
.cp-cap:hover { border-color:var(--line); }
.cp-cap-b   { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
.cp-cap-in  { min-height:110px; }

/* Deleting a post. Quiet until you are near it: a destructive action that looks
   like a primary button gets pressed by accident. */
.cp-del-b   { border:1px solid transparent; background:none; cursor:pointer; font-family:inherit;
              font-size:12px; font-weight:600; color:var(--gray-4); border-radius:8px;
              padding:6px 12px; }
.cp-del-b:hover { color: var(--danger); border-color:#E98A7E; background:var(--danger-lt); }
[data-theme="dark"] .cp-del-b:hover { background:#26303D; border-color:#8C2D22; color:#E98A7E; }
.cp-del-t   { font-size:15px; font-weight:700; color:var(--text); margin:0 0 12px; }
.cp-del-p   { font-size:13px; color:var(--gray-4); line-height:1.6; margin:0 0 10px; }
.cp-del-p b { color:var(--text); }
.cp-del-l   { margin:0 0 12px; padding-left:20px; font-size:13px; color:var(--text);
              line-height:1.7; }

/* the workflow a type brings with it */
.cp-flow    { border:1px solid var(--green); border-radius:var(--radius); padding:14px 16px;
              margin:16px 0 0; background:var(--green-lt); }
[data-theme="dark"] .cp-flow { background:#1B3522; }
.cp-flow-t  { font-size:13px; font-weight:700; color:var(--green-dk); }
[data-theme="dark"] .cp-flow-t { color:#8CC79A; }
.cp-flow-p  { font-size:12.5px; color:var(--gray-4); line-height:1.55; margin:3px 0 9px; }
.cp-flow-l  { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.cp-flow-s  { font-size:11.5px; color:var(--text); background:var(--card-bg,#fff);
              border:1px solid var(--border); border-radius:var(--radius); padding:3px 10px; }
.cp-part-sel { font-size:11px; padding:2px 6px; min-height:0; height:auto; width:auto;
               margin-left:auto; max-width:150px; }

/* Master Data: content workflows */
.cw-wrap    { padding:18px 20px 26px; }
.cw-intro   { font-size:12.5px; color:var(--gray-4); line-height:1.65; margin:0 0 18px;
              max-width:70ch; }
.cw-row     { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px;
              background:var(--card-bg,#fff); overflow:hidden; }
.cw-row.cw-open { border-color:var(--line); }
.cw-h       { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; }
.cw-ty      { font-size:13.5px; font-weight:700; color:var(--text); min-width:130px; }
.cw-nm      { font-size:12.5px; color:var(--gray-4); }
.cw-none    { font-size:12px; color:var(--gray-3); font-style:italic; }
.cw-ct      { font-size:11.5px; color:var(--gray-4); margin-left:auto; }
.cw-chev    { font-size:11px; color:var(--gray-3); }
.cw-b       { padding:4px 14px 16px; border-top:1px solid var(--border); }
.cw-k       { font-size:10px; font-weight:800; color:var(--gray-4); letter-spacing:.06em;
              text-transform:uppercase; margin:14px 0 5px; }
.cw-sub     { font-size:11.5px; color:var(--gray-4); line-height:1.5; margin:0 0 10px;
              max-width:70ch; }
.cw-sub b   { color:var(--text); }
.cw-steps   { margin-bottom:10px; }
.cw-step    { display:flex; align-items:center; gap:7px; padding:6px 0; flex-wrap:wrap;
              border-bottom:1px solid var(--border); }
.cw-n       { font-size:11px; font-weight:700; color:var(--gray-3); width:16px; flex:0 0 16px; }
.cw-in      { flex:1 1 220px; min-width:180px; font-size:12.5px; padding:5px 9px; min-height:0; }
.cw-sel     { flex:0 0 auto; width:auto; max-width:160px; font-size:12px; padding:5px 7px;
              min-height:0; height:auto; }
.cw-days    { flex:0 0 66px; width:66px; font-size:12px; padding:5px 7px; min-height:0; }
.cw-chk     { display:inline-flex; align-items:center; gap:4px; font-size:11.5px;
              color:var(--gray-4); white-space:nowrap; }
.cw-chk input { width:14px; height:14px; min-height:0; margin:0; }
.cw-x       { border:none; background:none; cursor:pointer; font-size:16px; line-height:1;
              color:var(--gray-3); padding:0 4px; }
.cw-x:hover { color: var(--danger); }
.cw-empty   { font-size:12px; color:var(--gray-3); font-style:italic; margin-bottom:10px; }
.cw-foot    { margin-top:18px; padding-top:12px; border-top:1px solid var(--border); }

/* Content set-up: the team's own lists, moved out of Master Data 2026-09-02 */
.cp-set     { max-width:900px; }
.cp-set-p   { font-size:12.5px; color:var(--gray-4); line-height:1.65; margin:0 0 18px; }
.cp-set-b   { border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px 16px;
              margin-bottom:12px; background:var(--card-bg,#fff); }
.cp-set-k   { font-size:10px; font-weight:800; color:var(--gray-4); letter-spacing:.06em;
              text-transform:uppercase; margin:0 0 5px; }
.cp-set-h   { font-size:11.5px; color:var(--gray-4); line-height:1.5; margin:0 0 11px; }
.cp-set-rows{ margin-bottom:10px; }
.cp-set-row { display:flex; align-items:center; gap:7px; padding:5px 0;
              border-bottom:1px solid var(--border); }
.cp-set-in  { flex:0 0 200px; font-size:12.5px; padding:5px 9px; min-height:0; }
.cp-set-desc{ flex:1 1 240px; }
.cw-wrap.cw-bare { padding:0; }
@media (max-width:640px) {
  .cp-set-in { flex:1 1 100%; }
  .cp-set-row { flex-wrap:wrap; }
}

/* Platform marks that have to answer for the theme. X's brand colour is black
   and vanishes on a dark page; the two non-brand marks are slate and dim inside
   a chip. The six real brand colours are fixed in the icon spec, because a
   brand is the same colour in both themes. */
.cp-mk-ink   { fill: #101828; }
[data-theme="dark"] .cp-mk-ink   { fill: #E3E7EC; }
.cp-mk-slate { stroke: #4a6b8a; }
[data-theme="dark"] .cp-mk-slate { stroke: #93b4d4; }

/* Pay review person view: the two above-the-fold cards stack below 900px, and
   the revise grid becomes one column. Both are in the design handoff. */
@media (max-width: 900px){
  .pr-two{ grid-template-columns: 1fr !important; }
}

  /* The JS half of this shipped inside another commit without the rule, so a
     module switch kept the outgoing page but never made it inert. That is the
     load-bearing half: a dimmed-but-live page invites a click that acts on the
     page you are leaving. */
  #content.is-loading { opacity:.5; pointer-events:none; transition:opacity .12s ease; }
@media (max-width: 900px){
  .pr-tiles{ grid-template-columns: repeat(2,1fr) !important; }
}

  /* Chips on a task row inside a post. Smaller than the post's own chips so the
     row still reads as one line, not two chip rows stacked. */
  .cp-task-chips { display:flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
  .cp-task-chips .chip-btn { font-size:11px; padding:2px 8px; }

/* ── Inbox, redesigned 2026-09-03 (Inbox.dc.html) ─────────────────────────
   The old strip carried an inline flex-wrap:wrap that beat the media query
   below it, so on a phone it wrapped to three rows AND kept a scrollbar, and
   the first item of the first queue sat below the fold behind seven stacked
   bands. One row here, never wrapping, and a left rail once there is room. */
  .inbox-head { margin: 0 0 14px; }
  .inbox-h1  { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
  .inbox-sub { font-size: 13px; color: var(--gray-4); margin-top: 2px; line-height: 1.5; }

  .inbox-strip {
    display: flex; gap: 2px; overflow-x: auto; flex-wrap: nowrap;
    border-bottom: 2px solid var(--border); margin-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .inbox-strip::-webkit-scrollbar { display: none; }
  .inbox-tab {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; padding: 11px 13px; cursor: pointer;   /* 11px clears the 40px touch floor */
    font-size: 13.5px; font-weight: 600; color: var(--gray-4); white-space: nowrap;
    /* A global button rule rounds every button; a tab in a strip is not a pill. */
    border-radius: 0; outline-offset: -2px;
  }
  .inbox-tab.on { color: var(--text); border-bottom-color: var(--green); }
  /* Was opacity .55, which on top of an already-muted --gray-4 came to about
     3.1:1 on the dark card — the whole strip read as smudges. A quiet tab is
     still a tab you have to read. */
  .inbox-tab.zero:not(.on) { opacity: .78; }
  .inbox-n {
    display: inline-block; min-width: 18px; text-align: center;
    background: var(--orange-lt); color: var(--yellow-dk); border-radius: var(--radius);
    padding: 1px 6px; font-size: 11px; font-weight: 700;
  }
  /* A grey zero says the queue is empty. An absent badge used to mean both
     "none" and "not counted", which are different things. */
  .inbox-n.zero { background: var(--gray-2); color: var(--gray-4); font-weight: 600; }
  /* #201: a queue that could not be read. Not a count and not a grey zero --
     amber, so it reads as "unknown" rather than "nothing", which is the whole
     point of giving the strip a third state. */
  .inbox-n.unchecked { background: var(--yellow-lt); color: var(--yellow-dk); font-weight: 700; }
  .inbox-tab.unchecked { color: var(--yellow-dk); }
  /* The search sits above the list it filters, full width, because on a phone
     it is the first thing you reach for when the list is longer than a screen. */
  /* The date it landed, under the row. The big chip says how LONG it has been
     with you; this says when, which is what you quote back to somebody. */
  /* Whose items to show. Three states you can see at once — a select hid two
     of them behind a click, and a scope you cannot see is a scope you forget
     you set. */
  .inbox-head-row { display: flex; align-items: flex-start; justify-content: space-between;
                    gap: 16px; flex-wrap: wrap; }
  .ibx-showing { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  .ibx-showing-l { font-size: 12px; color: var(--gray-4); }
  .ibx-seg { display: flex; gap: 2px; background: var(--gray-2); border-radius: var(--radius-btn);
             padding: 3px; }
  .ibx-seg-o { border: 0; background: none; cursor: pointer; font-family: inherit;
               font-size: 12.5px; font-weight: 600; color: var(--gray-4);
               padding: 6px 12px; border-radius: 6px; min-height: 34px; white-space: nowrap; }
  .ibx-seg-o:hover { color: var(--text); }
  .ibx-seg-o.on { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow); }
  @media (max-width: 768px) {
    /* Under the heading rather than beside it, and each state a 40px target. */
    .inbox-head-row { flex-direction: column; gap: 10px; }
    .ibx-showing { width: 100%; }
    .ibx-seg { flex: 1; }
    .ibx-seg-o { flex: 1; min-height: 40px; padding: 6px 8px; }
  }
  /* The row is a div now, because the decide buttons live inside it. The
     clickable part that opens the thing is .ib-ev-open; the buttons sit beside
     it on a wide screen and under it on a phone, where a decision and an
     accidental tap must not share an edge. */
  .ib-ev-open { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 auto;
                min-width: 0; cursor: pointer; text-align: left; }
  .ib-ev-acts { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
  .ib-ev-acts .btn-sm { white-space: nowrap; }
  /* TWO rules, for two different reasons, and neither replaces the other.
     
     The media query is about TOUCH: on a small screen a decision and an
     accidental tap must not share an edge, however much room the row has.
     
     The container query is about ROOM, and is Neha's #180 of 2026-09-15 --
     "Odd wrap!!", with the Inbox breaking titles one word per line into a
     ribbon. The buttons are `flex: 0 0 auto` and never shrink; the title side
     is `flex: 1 1 auto; min-width: 0` and shrinks to nothing. That was fine
     while the only thing squeezing the row was the window, which the media
     query below caught. Then the list gained a detail pane beside it at
     1100px, so between roughly 1100 and 1400 the WINDOW is wide while the
     COLUMN is half of it -- wide enough to skip the media query, narrow enough
     to crush the title. A half-width browser lands exactly there.
     
     640px is MEASURED, not guessed: with the row laid out side by side in
     Chrome against this stylesheet, a title of ordinary length ("Abhishek
     Wankhade · needs categorising") is given 282px and sits on one line at a
     640px column, 242px and two lines at 600, and 62px and four lines at 420,
     which is the ribbon Neha photographed. Below 640 the row is better stacked
     than squeezed. */
  @container (max-width: 640px) {
    .ib-ev-row  { flex-direction: column; align-items: stretch; }
    .ib-ev-acts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
                  justify-content: flex-end; }
    .ib-ev-acts .ib-ev-open-b { margin-right: auto; }
  }
  @media (max-width: 900px) {
    .ib-ev-row  { flex-direction: column; align-items: stretch; }
    .ib-ev-acts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
                  justify-content: flex-end; }
    .ib-ev-acts .ib-ev-open-b { margin-right: auto; }
  }
  /* Who handles what. A row per category, its people as chips. */
  .hd-link { display:flex; gap:8px; align-items:center; margin-bottom:12px; }
  .hd-link input { flex:1 1 auto; min-width:0; font-size:12px; padding:7px 10px;
                   border:1px solid var(--border); border-radius:var(--radius-btn);
                   background:var(--gray-2); color:var(--gray-4); font-family:inherit; }
  @media (max-width: 768px) { .hd-link { flex-wrap:wrap; } .hd-link input { flex:1 1 100%; } }
  .hds-row { display:flex; gap:12px; align-items:flex-start; padding:10px 0;
             border-bottom:1px solid var(--border); }
  .hds-row:last-child { border-bottom:0; }
  .hds-cat { flex:0 0 38%; font-size:13px; font-weight:600; padding-top:5px; }
  .hds-who { flex:1 1 auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .hds-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
              background:var(--gray-2); color:var(--text); border-radius:999px; padding:5px 6px 5px 11px; }
  .hds-chip button { border:0; background:none; cursor:pointer; font-size:15px; line-height:1;
                     color:var(--gray-4); padding:0 4px; min-height:24px; font-family:inherit; }
  .hds-chip button:hover { color:var(--danger); }
  .hds-owner { font-size:10.5px; font-weight:600; color:var(--gray-4); background:var(--gray-1);
               border-radius:8px; padding:1px 6px; }
  .hds-none { font-size:12px; color:var(--gray-4); }
  .hds-add { font-size:12.5px; padding:6px 9px; border:1px solid var(--border);
             border-radius:var(--radius-btn); background:var(--input-bg,var(--card-bg));
             color:var(--text); font-family:inherit; min-height:34px; }
  @media (max-width: 768px) {
    .hds-row { flex-direction:column; gap:6px; }
    .hds-cat { flex:none; padding-top:0; }
    .hds-add { min-height:40px; width:100%; }
  }
  /* The list and the thing you are reading are ONE object: a single card with a
     rule down the middle, not a list with a panel floating beside it. Half and
     half, so neither side is the junior partner.

     Below 1100px there is no room for two columns, so the card is just the
     list and a row opens the record as it always did. The pane is not drawn at
     all rather than drawn and hidden — a row selecting into something nobody
     can see is a click that appears to do nothing. */
  .ib-ev-card { background: var(--card-bg); border: 1px solid var(--border);
                border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
  /* A size container, so the rows inside can be laid out by the width THEY have
     rather than the width the window has. See the @container below. */
  .ib-ev-listcol { min-width: 0; container-type: inline-size; }
  .ib-ev-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .ib-ev-head-t { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
  .ib-ev-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .ib-ev-sort { font-size: 12.5px; font-weight: 600; color: var(--text); font-family: inherit;
                border: 1px solid var(--border); border-radius: var(--radius-btn);
                background: var(--input-bg, var(--card-bg)); padding: 6px 9px; min-height: 34px;
                cursor: pointer; }
  .ib-ev-over { font-size: 11.5px; font-weight: 600; color: var(--danger); }
  .ib-ev-none { text-align: center; color: var(--gray-4); padding: 26px 20px; font-size: 13px; }
  .ib-detail { display: none; }
  @media (min-width: 1100px) {
    .ib-ev-card  { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
    .ib-detail   { display: block; border-left: 1px solid var(--border); padding: 16px;
                   min-width: 0; }
    .ib-ev-listcol { border-right: 0; }
    .ib-ev-row.on { background: var(--green-lt); box-shadow: inset 3px 0 0 var(--olive); }
  }
  @media (max-width: 768px) {
    .ib-ev-head { padding: 10px 12px; }
    .ib-ev-sort { min-height: 40px; }
  }
  /* The row stays put while the decision is held, greyed and struck, so you can
     see what you just did and what Undo would put back. */
  .ib-ev-row.is-deciding { opacity:.45; }
  .ib-ev-row.is-deciding .ib-ev-t { text-decoration:line-through; }
  .ib-undo { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:1100;
             display:flex; align-items:center; gap:12px; background:var(--sidebar-bg);
             color:#EDF0F3; border-radius:999px; padding:10px 12px 10px 18px;
             box-shadow:0 6px 24px rgba(0,0,0,.28); font-size:13px; font-weight:600;
             max-width:calc(100vw - 32px); }
  .ib-undo button { border:0; background:rgba(255,255,255,.14); color:#fff; font-family:inherit;
                    font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px;
                    cursor:pointer; min-height:36px; }
  .ib-undo button:hover { background:rgba(255,255,255,.24); }
  .ib-undo-c { font-size:11.5px; font-weight:600; color:var(--gray-3); min-width:26px; text-align:right; }
  @media (max-width: 768px) {
    /* Above the tab bar, like the toast — the same 69px plus the safe area. */
    .ib-undo { bottom:calc(85px + env(safe-area-inset-bottom, 0px)); }
    /* Undo is the one button on this screen you press against a clock. 36px is
       under the floor everything else here clears. */
    .ib-undo button { min-height:40px; padding:9px 16px; }
    /* Two filter rows inside the Inbox tabs were still below the floor: the
       penalty To review / Decided chips at 29px and the applicant queue's
       With me / My department / Everyone at 27px. Both predate the redesign;
       they are here because this is where the floor is kept. */
    .pen-chip { min-height:40px; }
    .rq-scope button { min-height:40px; padding:9px 12px; }
  }
  .ib-det-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .ib-det-q { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
              color:var(--gray-4); }
  .ib-det-days { font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
                 background:var(--gray-2); color:var(--gray-4); }
  .ib-det-days.is-warm { background:var(--orange-lt); color:var(--yellow-dk); }
  .ib-det-days.is-hot  { background:var(--warn); color:var(--card-bg); }
  .ib-det-t { font-size:17px; font-weight:700; line-height:1.3; margin:0 0 12px;
              letter-spacing:-.01em; }
  .ib-det-facts { display:flex; flex-direction:column; gap:9px; margin-bottom:14px; }
  .ib-det-fact-l { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                   color:var(--gray-4); margin-bottom:1px; }
  .ib-det-fact-v { font-size:13.5px; color:var(--text); }
/* A link in the decision pane, so what you are approving can be read before you
   approve it. Wraps rather than pushing the pane wide: a Drive URL's label can
   be long. */
.ib-det-link { display:inline-block; max-width:100%; overflow-wrap:anywhere;
               font-weight:600; color:var(--green); text-decoration:underline;
               text-underline-offset:2px; }
.ib-det-link + .ib-det-link { margin-left:10px; }
  .ib-det-fact-v .late { color:var(--danger); font-weight:600; }
  .ib-det-acts { display:flex; flex-direction:column; gap:8px; }
  .ib-det-acts .btn { width:100%; justify-content:center; }
  .ib-det-note { font-size:11.5px; color:var(--gray-4); margin-top:10px; line-height:1.45; }
  .ib-det-state { font-size:12.5px; color:var(--gray-4); margin:-6px 0 10px; line-height:1.5; }
  /* Why it is still sitting here. The one thing the row cannot tell you, so it
     is set apart rather than folded into the facts below it. */
  .ib-det-why { font-size:13px; line-height:1.55; color:var(--text); background:var(--gray-2);
                border-radius:var(--radius-btn); padding:10px 12px; margin-bottom:12px; }
  .ib-det-quote { margin-bottom:12px; }
  .ib-det-quote-b { font-size:13px; line-height:1.55; color:var(--text); white-space:pre-wrap;
                    border-left:2px solid var(--border); padding-left:10px; margin-top:4px;
                    max-height:150px; overflow:auto; }
  .ib-det-files { margin-bottom:12px; }
  .ib-det-file { display:flex; align-items:center; justify-content:space-between; gap:8px;
                 font-size:12.5px; padding:6px 0; border-bottom:1px solid var(--border); }
  .ib-det-file:last-of-type { border-bottom:0; }
  .ib-det-file span { font-size:11px; color:var(--gray-4); text-transform:uppercase;
                      letter-spacing:.04em; flex:0 0 auto; }
  .ib-det-empty { text-align:center; padding:26px 10px; }
  .ib-det-empty-h { font-size:14px; font-weight:700; margin-bottom:5px; }
  .ib-det-empty-s { font-size:12.5px; color:var(--gray-4); line-height:1.5; }
  .ib-ev-since { font-size: 11.5px; color: var(--gray-4); margin-top: 3px; }
  .ib-ev-search { margin: 0 0 10px; }
  .ib-ev-search input { width: 100%; box-sizing: border-box; }
  .inbox-off { font-size: 11.5px; color: var(--gray-4); margin: 0 0 14px; line-height: 1.45; }

  /* Two queues are a pair of cards, not a starved strip. */
  .inbox-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
  .inbox-pair-btn {
    text-align: left; padding: 11px 13px; border-radius: var(--radius-btn); cursor: pointer;
    border: 1.5px solid var(--border); background: transparent;
  }
  .inbox-pair-btn.on { border-color: var(--green); }
  .inbox-pair-name { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
  .inbox-pair-n    { display: block; font-size: 12px; color: var(--gray-4); margin-top: 2px; }
  .inbox-pair-btn.on .inbox-pair-n { color: var(--green); font-weight: 600; }

  .inbox-clear { text-align: center; padding: 40px 20px; }
  .inbox-clear-h { font-size: 17px; font-weight: 700; }
  .inbox-clear-s { font-size: 13px; color: var(--gray-4); margin-top: 5px; }

/* ── Inbox 3b: "everything clear" says what is NOT here ──────────────────── */
.ib-clear-acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.ib-off-wrap   { margin-top:16px; background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
                 box-shadow:0 1px 3px rgba(27,42,30,.05); overflow:hidden; }
.ib-off-h      { display:flex; align-items:baseline; gap:7px; padding:12px 14px 9px;
                 font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
                 color:var(--gray-4); border-bottom:1px solid var(--border); }
.ib-off-h b    { font-weight:700; color:var(--gray-4); letter-spacing:0; font-size:12px; }
.ib-off-row    { display:flex; align-items:center; gap:12px; padding:11px 14px;
                 border-bottom:1px solid var(--border); }
.ib-off-row:last-child { border-bottom:0; }
/* A fixed left column, so the days compare down a straight edge rather than
   starting wherever the title before them happened to end. Same reasoning the
   design gives for the days-waiting column on 3a. */
.ib-off-d      { flex:0 0 42px; text-align:right; font-size:13px; font-weight:700; color:var(--yellow); }
.ib-off-b      { flex:1 1 auto; min-width:0; }
.ib-off-t      { font-size:13.5px; font-weight:600; color:var(--text); overflow:hidden;
                 text-overflow:ellipsis; white-space:nowrap; }
.ib-off-w      { font-size:11.5px; color:var(--gray-4); margin-top:1px; }
.ib-off-more   { padding:10px 14px; font-size:12px; color:var(--gray-4); border-top:1px solid var(--border); }

/* ── Inbox 3a: everything waiting on you, in one column ─────────────────── */
/* .ib-ev-head, -sort and -over are defined with the card layout above. They
   were repeated here from when the list was a card of its own, and at equal
   specificity the LATER rule wins — so the copies down here quietly beat the
   layout. The list carries no chrome of its own any more: the card around both
   columns provides it, and a card inside a card is two borders and two
   shadows for one object. */
.ib-ev-list  { overflow:hidden; }
.ib-ev-row   { display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
               background:none; border:0; font:inherit; cursor:pointer; border-radius:0;
               padding:12px 14px; border-bottom:1px solid var(--border); }
.ib-ev-row:last-child { border-bottom:0; }
.ib-ev-row:hover { background:var(--gray-2); }
/* Fixed, so the rows compare down a straight edge. The design's own reasoning
   from turn 2: "days-waiting gets a fixed left column so rows compare down a
   straight edge" -- a title of any length cannot push it out of alignment. */
/* A tile rather than two lines of text, so the column reads as a ladder. Three
   bands: a fortnight with you is full clay, over a working week is the tint,
   and this week carries no colour at all — colour on every row would mean
   nothing on any of them. */
.ib-ev-d     { flex:0 0 52px; text-align:center; border-radius:var(--radius-btn); padding:6px 4px;
               background:var(--gray-2); }
.ib-ev-dn    { font-size:17px; font-weight:700; color:var(--gray-4); line-height:1.05;
               font-variant-numeric:tabular-nums; }
.ib-ev-dl    { font-size:10px; color:var(--gray-4); text-transform:uppercase; letter-spacing:.05em; }
.ib-ev-d.is-warm    { background:var(--yellow-lt); }
.ib-ev-d.is-warm .ib-ev-dn,
.ib-ev-d.is-warm .ib-ev-dl { color:var(--yellow); }
.ib-ev-d.is-hot     { background:var(--yellow); }
.ib-ev-d.is-hot .ib-ev-dn,
.ib-ev-d.is-hot .ib-ev-dl  { color:#FFFFFF; }
/* Full clay on a dark ground glares, so the hottest tile drops and its ink
   comes up to meet it — the design's own note on the dark ladder. */
[data-theme="dark"] .ib-ev-d.is-hot    { background:#7A2F12; }
[data-theme="dark"] .ib-ev-d.is-hot .ib-ev-dn,
[data-theme="dark"] .ib-ev-d.is-hot .ib-ev-dl { color:#F6BFA0; }
.ib-ev-b     { flex:1 1 auto; min-width:0; }
.ib-ev-m     { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
/* #151: eleven queues, one --qh each, set on the element because eleven rules
   here would be eleven places to forget one. Everything DONE with that hue lives
   here, including the dark-mode lift. */
.ib-ev-q     { font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
               border-radius:4px; padding:2px 7px;
               color:var(--qh);
               background:color-mix(in srgb, var(--qh) 13%, transparent);
               border:1px solid color-mix(in srgb, var(--qh) 35%, transparent); }
  /* These hues are chosen against paper. On the dark card the darker half of
     them -- the leave green, the content violet, the approval blue -- come out
     close to the card they sit on. The palette's own rule for this is written at
     the top of the file: "accents that sit on a dark card have to move UP the
     scale, not match the page", which is why --on-dark exists. Same move, done
     once for all eleven rather than by picking a second set of hues that would
     then have to be kept in step with the first. */
  [data-theme="dark"] .ib-ev-q {
               color:color-mix(in srgb, var(--qh) 55%, white);
               background:color-mix(in srgb, var(--qh) 22%, transparent);
               border-color:color-mix(in srgb, var(--qh) 48%, transparent); }
.ib-ev-due   { font-size:11px; font-weight:600; color:var(--text); }
.ib-ev-due.late { color:var(--danger); }
.ib-ev-t     { font-size:14px; font-weight:600; color:var(--text); }
.ib-ev-w     { font-size:12px; color:var(--gray-4); margin-top:1px; }
@media (max-width:520px){
  .ib-ev-row { gap:10px; padding:11px 12px; }
  .ib-ev-d   { flex:0 0 46px; }
}

  .inbox-main { min-width: 0; }   /* a wide table scrolls rather than pushing the rail */

  /* Desktop: the strip becomes a rail, so all eight queues are visible at once.

     A flex row, NOT a float. float:left only moves inline content aside; the
     queue rows are block boxes, so in v.544 their backgrounds ran underneath
     the rail and covered the queue names. */
  @media (min-width: 900px) {
    .inbox-body { display: flex; align-items: flex-start; gap: 20px; }
    .inbox-nav  { flex: 0 0 200px; position: sticky; top: 12px; }
    .inbox-main { flex: 1 1 auto; }
    .inbox-strip {
      flex-direction: column; gap: 0; overflow: visible;
      border-bottom: none; border-right: 1px solid var(--border); margin: 0;
    }
    .inbox-tab {
      width: 100%; justify-content: space-between; margin: 0;
      border-bottom: none; border-left: 3px solid transparent; padding: 9px 12px;
    }
    .inbox-tab.on { border-left-color: var(--green); background: var(--gray-2); }
    .inbox-off { margin: 8px 12px 0; }
  }

  /* Filtering a Pay Review row must not touch the row's own display. It is a
     grid; clearing style.display to show it again stripped that and stacked the
     cells, which read as the filter showing the wrong people. */
  .pr-hide { display: none !important; }
  /* a table row hidden by the filter must not become a block */
  tr.pr-hide { display: none !important; }

/* ── Frozen headers on Pay Review ─────────────────────────────────────────
   Fiyana, 2026-09-03: "freeze top row for both tabs."

   The tables sat in a wrapper with overflow-x:auto so a 960px-wide table could
   scroll sideways on a narrow screen. That also computes overflow-y to auto,
   which makes the wrapper the scroll container for `position: sticky` — and
   the wrapper is as tall as its content, so a sticky header inside it never
   has anything to stick to. Giving the wrapper a height is what makes the
   freeze real: the rows scroll inside it and the header holds. */
  .pr-scroll { overflow: auto; max-height: calc(100vh - 260px); }
  .pr-freeze-head th {
    position: sticky; top: 0; z-index: 2;
    background: var(--card-bg, var(--gray-1));
  }
  /* The queue is a grid of divs in the page's own scroller, so its column
     header can stick to the viewport directly. */
  .pr-freeze {
    position: sticky; top: 0; z-index: 2;
    background: var(--card-bg, var(--gray-1));
  }

/* Pay figures on the Pay Review browsing lists. Both versions are in the markup
   and this picks one, so the toggle is a single class on <body> and therefore
   survives a repaint. See _prMoney(). */
.pr-money-v { display: none; }
.pr-money-x { letter-spacing: 2px; color: var(--gray-3); }
body.pr-money-on .pr-money-v { display: inline; }
body.pr-money-on .pr-money-x { display: none; }
[data-pr-eye] { opacity: .45; }
body.pr-money-on [data-pr-eye] { opacity: 1; }

/* ── Content planner: the outputs a post type has to produce ───────────────
   Rows, one per declared output, drawn whether or not anything exists yet.
   The empty ones are the point: "not uploaded" had nowhere to be said. */
  .cp-outs { display:flex; flex-direction:column; gap:6px; margin:8px 0 4px; }
  .cp-out  { display:flex; flex-direction:column; gap:8px; padding:10px 12px;
             border:1px solid var(--border); border-radius:var(--radius-btn); background:var(--surface-1,#fbfaf6); }
  /* The head is the old row: label, state, approver, buttons. The body under it
     is the output itself -- the caption field, or the attached file. Named -top
     rather than -h because an older, unrelated .cp-out-h rule already exists at
     the top of this file and would leak justify-content in. */
  /* WRAPS. Every button on this row is flex:0 0 auto and the label block was
     flex:1 with min-width:0, so the label absorbed the whole shortfall: with a
     picker and four buttons on one row, "Carousal post for approval" came out
     one word per line and "Uploaded, not sent for review" broke into five.
     Adding the fifth control is what tipped it, but the row was one control
     away from this the whole time. The buttons drop to a second line now, and
     the label carries a floor of its own so it cannot be squeezed to nothing. */
  .cp-out-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .cp-out-body { border-top:1px dashed var(--border); padding-top:8px; }
  .cp-out-body .cp-cap-in { min-height:88px; }
  .cp-out-body .cp-asset:last-child { margin-bottom:0; }
  .cp-out.is-ok   { border-color:#8CC79A; background:rgba(63,190,108,.07); }
  .cp-out.is-back { border-color:#E98A7E; background:rgba(198,40,40,.05); }
  /* Verbally approved: settled, so it takes the moss of a sign-off. Clay was
     wrong. Clay means pending, held, overdue, and in dark mode it sits one
     shade off --danger, so the row read as a dispute -- the one thing it is
     not (reported 2026-09-21). What it is NOT is a sign-off given HERE, and
     that is the dashed edge's job, the same dash as a leave day applied for
     and not yet approved. Muted against the solid moss of .is-ok so a glance
     down a list still tells the two apart without reading either. */
  .cp-out.is-verbal { border-color:#9FBCA6; border-style:dashed;
                      background:rgba(63,190,108,.04); }
  .cp-out-b { flex:1 1 210px; min-width:190px; }
  .cp-out-t { font-size:13.5px; font-weight:650; }
  .cp-out-opt { font-size:10.5px; font-weight:400; color:var(--gray-4); }
  .cp-out-m { font-size:12px; color:var(--gray-4); margin-top:2px; }
  .cp-out.is-ok   .cp-out-m { color:var(--olive-dk); }
  .cp-out.is-back .cp-out-m { color:var(--danger); }
  .cp-out.is-verbal .cp-out-m { color:var(--olive-dk); }
  .cp-out-w { flex:0 0 auto; }
  .cp-out-noapp { flex:0 0 auto; font-size:10.5px; color:var(--gray-4);
                  border:1px dashed var(--border); border-radius:var(--radius); padding:2px 8px; }
  .cp-out-a { flex:0 0 auto; font-size:11.5px; padding:3px 10px; margin-left:0; }
  .cp-out-hint { flex:0 0 auto; font-size:11px; color:var(--gray-4); font-style:italic; }

  /* Who signs an output off. A picker for the content team, a face for
     everybody else. "for this post" is the load-bearing bit: an override set
     once and forgotten is a silent divergence from the type's own rule, so it
     is drawn rather than left to be inferred from a name. */
  .cp-out-appr { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; }
  .cp-out-sel  { font-size:11.5px; max-width:150px; padding:3px 6px; border-radius:var(--radius-btn);
                 border:1px solid var(--border); background:var(--surface-1,#fbfaf6);
                 color:var(--text); }
  .cp-out-sel.is-none { border-style:dashed; color:var(--gray-4); }
  .cp-out-appr.is-ov .cp-out-sel { border-color:#8A3A17; }
  .cp-out-ov   { flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.05em;
                 text-transform:uppercase; color:var(--yellow-dk); background:var(--yellow-lt);
                 border-radius:4px; padding:2px 6px; white-space:nowrap; }

/* ── Applicant detail: everything about one candidate, before you decide ───
   Reported 2026-09-08: "I can't see the CV that the person has uploaded, and I
   can't see details about the candidate." Appended at the end of the file, at
   the top level, deliberately: an earlier block was inserted against the first
   line of a multi-line rule, landed inside its body and was silently ignored. */
.rq-open      { display:block; flex:1; min-width:0; text-align:left; background:none;
                border:0; padding:0; font:inherit; color:inherit; cursor:pointer; border-radius:0; }
.rq-open:hover .rq-name { text-decoration:underline; }

.ad-wrap      { font-size:13px; }
.ad-top       { display:flex; align-items:baseline; gap:10px; margin:-4px 0 10px; }
.ad-meta      { flex:1; min-width:0; font-size:12px; color:var(--gray-3); }
.ad-age       { flex:0 0 auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:5px;
                background:var(--green-lt); color:#26303D; white-space:nowrap; }
.ad-age.is-warm { background:var(--yellow-lt); color:var(--yellow-dk); }
.ad-age.is-late { background:var(--danger-lt); color:var(--danger); }
.ad-ref       { font-size:12px; color:#26303D; background:var(--gray-2); border-radius:var(--radius-btn);
                padding:7px 10px; margin-bottom:12px; }
.ad-sect      { padding:12px 0; border-top:1px solid #EDF0F3; }
.ad-sect:first-of-type { border-top:0; padding-top:0; }
.ad-lbl       { font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
                color:var(--gray-3); margin-bottom:8px; }
.ad-none      { font-size:12.5px; color:var(--gray-4); }
.ad-reach     { display:inline-flex; align-items:center; gap:6px; margin:0 8px 6px 0;
                font-size:13px; font-weight:600; color:var(--green); text-decoration:none;
                background:var(--green-lt); border-radius:999px; padding:5px 12px; }
.ad-reach:hover { background:var(--green-lt); }
.ad-reach.is-plain { background:var(--gray-2); color:#26303D; font-weight:500; }
.ad-files     { display:flex; flex-direction:column; gap:6px; }
.ad-file      { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
                background:var(--card-bg); border:1px solid #E3E7EC; border-radius:8px; padding:9px 11px;
                font:inherit; font-size:13px; cursor:pointer; }
.ad-file:hover { border-color:#2F5A3A; }
.ad-file-n    { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
                font-weight:600; }
.ad-file-k    { flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.06em;
                color:var(--green); background:var(--green-lt); border-radius:4px; padding:2px 6px; }
/* pre-wrap, so a covering note keeps the paragraphs somebody typed. These run
   to 1,200 characters on the live queue and were not shown at all. */
.ad-msg       { white-space:pre-wrap; font-size:13px; line-height:1.55; color:#1B2433;
                background:var(--gray-2); border-radius:8px; padding:11px 12px;
                max-height:280px; overflow-y:auto; }
.ad-tracks    { display:flex; flex-direction:column; gap:7px; }
.ad-track     { background:var(--gray-2); border-radius:8px; padding:8px 11px; }
.ad-track-t   { font-size:13px; font-weight:600; }
.ad-track-s   { font-size:11.5px; color:var(--gray-3); margin-top:1px; }
.ad-acts      { display:flex; flex-direction:column; gap:5px; }
.ad-act       { display:flex; gap:10px; font-size:12.5px; color:#26303D; }
.ad-act-d     { flex:0 0 54px; color:var(--gray-3); }
.ad-foot      { display:flex; align-items:center; gap:8px; padding-top:14px;
                border-top:1px solid var(--border); margin-top:4px; }

/* The @ picker under a comment box. Opens UPWARD: a comment box sits at the
   bottom of its modal, and a list dropping down is a list off the screen. */
.mn-pop{
  display:none; position:absolute; left:0; right:0; bottom:calc(100% + 4px); z-index:40;
  background:var(--surface-1); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 6px 20px rgba(0,0,0,.14); overflow:hidden auto; max-height:190px;
}
.mn-opt{
  display:block; width:100%; text-align:left; padding:8px 11px; font-size:13px;
  background:none; border:none; color:var(--text); cursor:pointer;
}
.mn-opt:hover{ background:var(--gray-2); }

/* ── Memos mailbox (mbx-) ───────────────────────────────────────────────────
   Built to measurements taken off "Team Den Memos" 7a, not by eye. Every
   colour in that artboard resolved to a shipped Slate token, which is why
   there is not one literal hex below: dark mode follows for free, and
   darkinktest has nothing to catch. The old split was two cards with a gap;
   7a is ONE card with the list and the reading pane sharing a border. */
.mbx { display:flex; align-items:stretch; background:var(--card-bg);
       border:1px solid var(--border); border-radius:10px; overflow:hidden;
       box-shadow:0 1px 2px rgba(16,24,40,.04); }
.mbx-list { flex:0 0 366px; display:flex; flex-direction:column; min-width:0;
            background:var(--card-bg); border-right:1px solid var(--border); }

.mbx-find { display:flex; align-items:center; gap:9px; padding:12px 14px;
            background:var(--band); border-bottom:1px solid var(--border); }
.mbx-find input { flex:1 1 0; min-width:0; padding:6px 10px; font-weight:400; font-size:12.5px; line-height:1.35;
            color:var(--text); background:var(--card-bg); border:1px solid var(--border);
            border-radius:8px; }
.mbx-find input::placeholder { color:var(--line); }

.mbx-grp { display:flex; align-items:center; gap:8px; padding:15px 14px 7px;
           font-weight:700; font-size:10.5px; line-height:1.3; letter-spacing:.09em; text-transform:uppercase;
           color:var(--gray-3); }
.mbx-grp:first-child { padding-top:11px; }
.mbx-grp b { font-size:11px; font-weight:700; letter-spacing:0; padding:1px 7px;
             border-radius:999px; color:var(--gray-4); background:var(--gray-2); }
.mbx-grp.is-due b { color:var(--warn); background:var(--warn-lt); }

/* One row shape for both states. "Needs you" adds the ground, the spine and
   the dot; settled swaps the dot for a tick and quietens the sender. */
.mbx-r { position:relative; display:flex; gap:11px; padding:11px 14px 12px; width:100%;
         text-align:left; background:none; border:0; font:inherit; color:var(--text);
         cursor:pointer; }
.mbx-r:hover { background:var(--gray-2); }
.mbx-r.is-due { background:var(--green-lt); }
.mbx-r.is-due:hover { background:var(--green-lt); }
.mbx-r.is-on { background:var(--gray-2); }
.mbx-r.is-due.is-on { background:var(--green-lt); }
.mbx-spine { position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--olive); }
.mbx-mark { flex:0 0 8px; padding-top:5px; }
.mbx-dot { width:7px; height:7px; border-radius:999px; background:var(--warn); }
.mbx-tick { font-weight:700; font-size:11px; line-height:1.3; color:var(--olive); }
.mbx-b { flex:1 1 0; min-width:0; display:block; }
.mbx-l1 { display:flex; align-items:baseline; gap:8px; }
.mbx-who { flex:1 1 0; min-width:0; display:block; font-weight:700; font-size:13px;
           line-height:1.3; color:var(--text);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbx-r:not(.is-due) .mbx-who { font-weight:500; color:var(--menu-ink); }
.mbx-age { flex:0 0 auto; font-weight:400; font-size:11.5px; line-height:1.3; color:var(--gray-3); }
.mbx-sub { display:block; margin-top:2px; font-weight:700; font-size:13.5px; line-height:1.3;
           letter-spacing:-.012em; color:var(--text);
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbx-snip { display:block; margin-top:2px; font-weight:400; font-size:12.5px; line-height:1.32;
            color:var(--gray-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbx-pills { display:block; margin-top:7px; }
/* The Sent row's bottom line (8e): how far a memo has got, as a bar and a
   figure, in place of the due pill a received memo carries. */
.mbx-prog { display:flex; align-items:center; gap:8px; margin-top:8px; }
.mbx-prog-b { flex:1 1 0; height:4px; border-radius:999px; background:var(--gray-2);
              overflow:hidden; }
.mbx-prog-b i { display:block; height:100%; background:var(--olive); }
.mbx-prog-n { flex:0 0 auto; font-weight:700; font-size:11px; line-height:1.3;
              color:var(--gray-3); }
.mbx-pill { display:inline-block; font-weight:700; font-size:11px; line-height:1.3;
            padding:2px 7px; border-radius:5px; color:var(--warn); background:var(--warn-lt); }
/* A draft's third line carries a control, so it must not be truncated the way
   a body snippet is. */
.mbx-foot { display:block; margin-top:2px; font-weight:400; font-size:12.5px;
            line-height:1.32; color:var(--gray-3); }
.mbx-foot button { display:inline; padding:0; background:none; border:0; font:inherit;
            font-size:12.5px; color:var(--green); font-weight:600; cursor:pointer; }
.mbx-foot button:hover { text-decoration:underline; }
.mbx-more { display:block; width:100%; padding:9px 14px 12px; text-align:left;
            background:none; border:0; font-weight:600; font-size:12.5px; line-height:1.3; color:var(--green);
            cursor:pointer; }
.mbx-more:hover { text-decoration:underline; }
.mbx-none { padding:26px 16px; text-align:center; font-size:13px; color:var(--gray-4); }

/* Reading pane. 7a puts a toolbar above the memo and the reply thread on a
   band at the foot, so the memo itself is the only thing on white. */
.mbx-pane { flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
/* The back arrow and the step arrows belong to the phone, where the pane IS
   the screen. On a desktop the list is still beside it and the toolbar
   already carries "3 of 11". */
.mbx-nav { display:none; }
/* No wrap at 7a's own width: it keeps "1 of 11" and the arrows on the same row
   as the actions, hard right. Narrower than that -- a sent memo carries seven
   buttons and the last one was sliding off the edge -- it wraps rather than
   clips, and the phone block below wraps too. */
.mbx-bar { display:flex; align-items:center; gap:8px; padding:11px 20px;
           background:var(--band); border-bottom:1px solid var(--border); }
@media (max-width:1320px){ .mbx-bar { flex-wrap:wrap; } }
.mbx-bar-sp { flex:1 1 0; min-width:8px; }
.mbx-a { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; flex:0 0 auto;
         white-space:nowrap; font-weight:600; font-size:12.5px; line-height:1.3;
         color:var(--menu-ink); background:var(--card-bg);
         border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.mbx-a i { font-style:normal; color:var(--gray-3); }
.mbx-a:hover { border-color:var(--gray-3); }
/* Ink and ground BOTH from the palette, because the palette inverts: a fixed
   #fff here is white on pale green the moment the theme flips, which is the
   defect darkinktest exists to catch. 7b confirms it -- in dark the artboard
   paints this button #17281C on green, not white. */
.mbx-a.is-go { padding:8px 15px; font-size:13.5px; color:var(--green-lt);
               background:var(--olive); border-color:var(--olive); }
.mbx-a.is-go i { color:var(--green-lt); }
.mbx-a.is-go:hover { background:var(--green); border-color:var(--green); }
.mbx-a.is-warn { color:var(--warn); border-color:var(--warn-lt); }
.mbx-a.is-warn i { color:var(--warn); }
.mbx-a[disabled] { opacity:.45; cursor:default; }
.mbx-count { flex:0 0 auto; white-space:nowrap; font-weight:400; font-size:11.5px;
             line-height:1.3; color:var(--gray-3); }
.mbx-step { display:flex; gap:4px; flex:0 0 auto; }
.mbx-step button { width:28px; height:30px; display:flex; align-items:center;
         justify-content:center; font-size:12px; color:var(--gray-3);
         background:var(--card-bg); border:1px solid var(--border); border-radius:7px;
         cursor:pointer; }
.mbx-step button[disabled] { opacity:.4; cursor:default; }

/* The bottom was 0, so whatever ends the memo -- the tasks card, or the
   "Nothing yet" line when there are none -- sat flush against the top edge of
   the grey reply band, touching it exactly. Fiyana, 2026-09-16, with a
   screenshot. 22px mirrors .mbx-sec's own 22px above the section, so the block
   sits in an even gap rather than being pressed into the band. */
.mbx-head { padding:24px 32px 22px; }
.mbx-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mbx-c { font-weight:600; font-size:11.5px; line-height:1.3; padding:3px 9px; border-radius:6px;
         color:var(--gray-3); background:var(--gray-2); }
.mbx-c.is-act { font-weight:700; color:var(--warn); background:var(--warn-lt); }
.mbx-c.is-due { font-weight:600; color:var(--warn); background:none;
                border:1px solid var(--warn-lt); }
.mbx-c.is-ok { font-weight:700; color:var(--green); background:var(--green-lt); }
.mbx-t { margin-top:13px; font-weight:700; font-size:25px; line-height:30px; letter-spacing:-.024em; color:var(--text); }
.mbx-from { display:flex; align-items:center; gap:12px; margin-top:16px; }
.mbx-av { flex:0 0 38px; width:38px; height:38px; border-radius:999px; display:flex;
          align-items:center; justify-content:center; font-weight:700; font-size:13px; line-height:1;
          color:var(--green); background:var(--green-lt); overflow:hidden; }
.mbx-av img { width:100%; height:100%; object-fit:cover; }
.mbx-from-b { flex:1 1 0; min-width:0; }
.mbx-nm { font-weight:700; font-size:14.5px; line-height:1.3; color:var(--text); }
.mbx-nm span { font-weight:400; font-size:13px; line-height:1.3; color:var(--gray-3); }
.mbx-to { display:block; width:100%; margin-top:2px; font-weight:400; font-size:12.5px; line-height:1.35; color:var(--gray-3);
          background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.mbx-to u { color:var(--line); text-decoration:none; }
.mbx-when { flex:0 0 auto; font-weight:400; font-size:12.5px; line-height:1.3; color:var(--gray-3); }
.mbx-body { margin-top:22px; font-weight:400; font-size:15.5px; line-height:1.7; color:var(--text);
            overflow-wrap:anywhere; }
.mbx-body p { margin:0 0 10px; }
/* Editing a note where it is read: the title keeps the title's size, so the
   page does not jump when Edit is pressed, and the text sits in a plain box
   with the composer's toolbar above it. */
.mbx-head .mbx-edit-t, .mbx-head input.input.mbx-edit-t { display:block; width:100%; margin-top:13px; font-weight:700; font-size:22px;
              line-height:30px; padding:6px 10px; }
.mbx-edit { margin-top:18px; }
.mbx-edit .mm-tools { margin-bottom:6px; }
.mbx-edit-b { border:1px solid var(--border); border-radius:8px; padding:10px 12px;
              background:var(--surface-1,#fff); color:var(--text); font-size:15px; line-height:1.6; }
.mbx-edit-b:focus { border-color:var(--olive); box-shadow:0 0 0 2px var(--olive-lt, rgba(107,122,60,.18)); }
.mbx-edit-f { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.mbx-note { margin-top:20px; font-weight:400; font-size:12px; line-height:1.35; color:var(--gray-3); }

/* A button now, not a div: it opens the full list of everyone on the memo and
   where each has got to, which existed behind the small "to N people" chevron
   and nowhere else. The button reset is explicit because the element carries
   the section's own top rule. */
.mbx-rx { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%;
          min-height:44px; margin-top:22px; padding-top:14px;
          border:0; border-top:1px solid var(--border);
          background:none; font:inherit; text-align:left; cursor:pointer; }
.mbx-rx:hover .mbx-rx-h { text-decoration:underline; }
.mbx-rx-h { font-weight:700; font-size:13px; line-height:1.3; color:var(--green); }
.mbx-rx-bar { flex:1 1 120px; height:5px; border-radius:999px; background:var(--gray-2);
              overflow:hidden; }
.mbx-rx-bar i { display:block; height:100%; background:var(--olive); }
.mbx-rx-w { font-weight:400; font-size:12.5px; line-height:1.4; color:var(--gray-3); }
.mbx-rx-w b { font-weight:600; color:var(--menu-ink); }
/* Its own line and its own colour: this is the half you act on, and it sat
   behind a chevron while the summary above it looked like the whole answer. */
.mbx-rx-no { flex:1 1 100%; font-weight:600; font-size:12.5px; line-height:1.4;
             color:var(--danger); }

/* LINKS ON A MEMO AND ON A REPLY. One chip, two states: a draft chip carries a
   cross and does nothing when pressed, a sent chip IS the link. Sized off
   .mbx-file next door so a memo carrying both does not show two shapes. */
.mbx-lks { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.mbx-lk { display:inline-flex; align-items:center; gap:7px; max-width:100%;
          padding:6px 10px; border:1px solid var(--border); border-radius:9px;
          background:var(--gray-1); font-size:12.5px; line-height:1.35;
          color:var(--menu-ink); text-decoration:none; }
.mbx-lk-i { flex:0 0 auto; opacity:.6; font-size:12px; }
/* The address is the fallback label and can be very long. It truncates rather
   than pushing the cross off the end of the row. */
.mbx-lk-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.mbx-lk.is-go { border-color:var(--line); color:var(--green); font-weight:600; }
.mbx-lk.is-go:hover { border-color:var(--green); background:var(--card-bg); }
.mbx-lk.is-go:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.mbx-lk-x { flex:0 0 auto; border:0; background:none; cursor:pointer; padding:0 2px;
            color:var(--gray-4); font-size:15px; line-height:1; }
.mbx-lk-x:hover { color:var(--danger); }
/* The row you add one in. Wraps on a phone rather than squeezing three controls
   onto one line, where the address box ends up too narrow to read what is in it. */
.mbx-reply-l { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; }
.mbx-reply-l .input { flex:1 1 150px; min-width:0; font-size:12.5px; }
/* The seen strip is not a button -- there is nothing behind it to open -- so it
   drops .mbx-rx's pointer and hover underline while keeping its layout. */
.mbx-rx.is-flat { cursor:default; margin-top:14px; }
.mbx-rx.is-flat:hover .mbx-rx-h { text-decoration:none; }

.mbx-sec { margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.mbx-sec-h { display:flex; align-items:center; gap:9px; }
.mbx-sec-l { font-weight:700; font-size:10.5px; line-height:1.3; letter-spacing:.09em; text-transform:uppercase;
             color:var(--gray-3); }
.mbx-sec-n { font-weight:700; font-size:11px; line-height:1.3; padding:1px 7px; border-radius:999px;
             color:var(--green); background:var(--green-lt); }
.mbx-sec-n.is-q { color:var(--gray-4); background:var(--gray-2); }
.mbx-rule { flex:1 1 0; height:1px; background:var(--border); }
.mbx-sec-a { font-weight:600; font-size:12.5px; line-height:1.3; color:var(--green); background:none; border:0;
             padding:0; cursor:pointer; }
.mbx-sec-a:hover { text-decoration:underline; }
.mbx-sec-q { font-weight:400; font-size:11.5px; line-height:1.3; color:var(--gray-3); }

.mbx-tk { margin-top:11px; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.mbx-tk-r { display:flex; align-items:center; gap:11px; padding:11px 13px; width:100%;
            text-align:left; background:none; border:0; font:inherit; cursor:pointer; }
.mbx-tk-r + .mbx-tk-r { border-top:1px solid var(--border); }
.mbx-tk-r:hover { background:var(--band); }
.mbx-tk-o { flex:0 0 15px; width:15px; height:15px; border-radius:999px;
            border:1.5px solid var(--line); }
.mbx-tk-o.is-done { border-color:var(--olive); background:var(--olive); }
.mbx-tk-t { flex:1 1 0; min-width:0; font-weight:600; font-size:13.5px; line-height:1.3; color:var(--text);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mbx-tk-t u { color:var(--gray-3); text-decoration:none; }
.mbx-tk-r.is-done .mbx-tk-t { color:var(--gray-3); text-decoration:line-through; }
.mbx-tk-av { flex:0 0 24px; width:24px; height:24px; border-radius:999px; display:flex;
             align-items:center; justify-content:center; font-weight:700; font-size:10px; line-height:1;
             color:var(--green); background:var(--green-lt); overflow:hidden; }
.mbx-tk-av img { width:100%; height:100%; object-fit:cover; }
.mbx-tk-d { flex:0 0 74px; font-weight:600; font-size:12.5px; line-height:1.3; color:var(--green); }
.mbx-tk-d.is-late { color:var(--warn); }
.mbx-tk-s { flex:0 0 auto; font-weight:700; font-size:11px; line-height:1.3; padding:2px 8px; border-radius:5px;
            color:var(--gray-4); background:var(--gray-2); white-space:nowrap; }
.mbx-tk-s.is-ok { color:var(--green); background:var(--green-lt); }

/* The thread sits on the band so it reads as a conversation attached to the
   memo rather than more of the memo. */
.mbx-thread { margin-top:auto; padding:16px 32px 18px; background:var(--band);
              border-top:1px solid var(--border); }
.mbx-msg { display:flex; gap:11px; padding:12px 0; }
.mbx-msg + .mbx-msg { border-top:1px solid var(--border); }
.mbx-msg-av { flex:0 0 30px; width:30px; height:30px; border-radius:999px; display:flex;
              align-items:center; justify-content:center; font-weight:700; font-size:11px; line-height:1;
              color:var(--menu-ink); background:var(--gray-2); overflow:hidden; }
.mbx-msg-av img { width:100%; height:100%; object-fit:cover; }
.mbx-msg.is-me .mbx-msg-av { color:var(--green); background:var(--green-lt); }
.mbx-msg-b { flex:1 1 0; min-width:0; }
.mbx-msg-h { display:flex; align-items:baseline; gap:9px; }
.mbx-msg-n { font-weight:700; font-size:13.5px; line-height:1.3; color:var(--text); }
.mbx-msg-t { font-weight:400; font-size:12px; line-height:1.3; color:var(--gray-3); }
.mbx-msg-x { margin-top:4px; font-weight:400; font-size:14px; line-height:1.55; color:var(--text);
             overflow-wrap:anywhere; }
.mbx-msg-x b.at { font-weight:600; color:var(--green); }
.mbx-file { display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
            font-weight:600; font-size:12.5px; line-height:1.3; color:var(--text);
            background:transparent; border:0; border-radius:0;
            min-height:44px; cursor:pointer; max-width:100%; }
.mbx-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The file and the control that removes it are ONE object with a divider down
   the middle, not two boxes sitting next to each other. As two they read as a
   text field with a clear button -- "what are these squares next to each of the
   attachments", 2026-09-24 -- which is the wrong thing to think about a file
   that has already gone to four people. The wrapper carries the border now and
   the two children carry none.
   Still one object for a second reason: the control cannot wrap onto a line of
   its own, away from the name it belongs to. */
.mbx-file-w { display:inline-flex; align-items:stretch; max-width:100%; margin-top:9px;
              background:var(--card-bg); border:1px solid var(--border);
              border-radius:8px; overflow:hidden; }
.mbx-file-w:hover { border-color:var(--line); }
/* 44px is the repo's floor for anything you tap, and this one deletes something
   for everybody on the memo, so it keeps the full target even though it now
   shares a border with the file beside it.
   A bin, not a cross. A cross on a file that has already been sent reads as
   "close this" or "clear this field"; it is neither. It takes the file off the
   memo for all four people, and the word for that is delete. */
.mbx-file-x { flex:0 0 auto; width:38px; min-width:38px; min-height:44px;
              align-self:stretch; display:inline-flex;
              align-items:center; justify-content:center;
              color:var(--gray-3); background:transparent;
              border:0; border-left:1px solid var(--border); border-radius:0;
              cursor:pointer; }
.mbx-file-x:hover { color:var(--danger); background:var(--danger-lt,var(--gray-2)); }
.mbx-reply { margin-top:10px; }
.mbx-reply textarea { width:100%; min-height:58px; padding:10px 12px; resize:vertical;
            font-weight:400; font-size:13.5px; line-height:1.5; color:var(--text); background:var(--card-bg);
            border:1px solid var(--border); border-radius:9px; }
.mbx-reply textarea::placeholder { color:var(--line); }
.mbx-reply-f { display:flex; align-items:center; gap:8px; margin-top:8px; }
.mbx-reply-f .mbx-sec-q { margin-left:auto; }
.mbx-empty { padding:40px 32px; text-align:center; color:var(--gray-4); font-size:13px; }

/* On a phone 7g puts the tabs first and the new-memo button under them: which
   pile you are in matters more than starting a new one, and the button is a
   comfortable target on its own line. Order, not a second copy of the markup. */
@media (max-width:900px){
  .mm-topbar .mm-nav { order:1; }
  .mm-topbar-r { order:2; }
  .mm-topbar .mm-search { order:3; }
  /* Five tabs do not fit on a phone and the strip was nowrap with
     overflow:visible, so the last one -- Archive -- was simply clipped off the
     right edge with no way to scroll to it. Fiyana, 2026-09-14: "I don't see
     an archive button, at least in phone view."
     With her live counts (Received 3, Sent 3, Self notes, Archive 24) the
     Archive tab ended at 407px on a 390px screen.
     It wraps rather than scrolls: a scrollable strip hides its own tail
     without saying so, which is the thing the Inbox strip needed a whole
     "what did not fit" line to work around. */
  /* flex:0 0 auto up in .mm-topbar meant the strip took its max-content width
     and overflowed the page rather than wrapping inside it, so its own
     flex-wrap never came into play. It takes the whole row here, and then the
     tabs wrap within it however long the counts get. */
  .mm-topbar .mm-nav { flex:1 1 100%; flex-wrap:wrap; row-gap:8px; column-gap:16px; min-width:0; }
}

/* Phone: the two panes become two screens (7g, 7h). The list is the screen;
   opening a memo replaces it, with a back arrow and step arrows on top and the
   actions at the foot, where a thumb is. */
@media (max-width:900px){
  .mbx { display:block; border:0; border-radius:0; background:none; box-shadow:none; }
  .mbx-list { flex:none; border-right:0; background:var(--card-bg);
              border:1px solid var(--border); border-radius:10px; overflow:hidden;
              box-shadow:0 1px 2px rgba(16,24,40,.04); }
  .mbx.is-reading .mbx-list { display:none; }
  .mbx:not(.is-reading) .mbx-pane { display:none; }
  /* 7h puts the actions at the FOOT, under the replies, where a thumb is.
     Order rather than a second copy of the markup. */
  .mbx-pane { display:flex; flex-direction:column; }
  .mbx-nav { order:1; }
  .mbx-scroll { order:2; }
  .mbx-bar { order:3; }
  .mbx-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .mbx-nav button { width:44px; height:44px; display:flex; align-items:center;
            justify-content:center; font-size:15px; color:var(--gray-3);
            background:var(--card-bg); border:1px solid var(--border);
            border-radius:8px; cursor:pointer; }
  .mbx-nav .mbx-nav-back { flex:0 0 44px; font-size:17px; color:var(--menu-ink); }
  .mbx-nav-w { flex:1 1 0; min-width:0; font-weight:400; font-size:12.5px; line-height:1.3; color:var(--gray-3); }
  .mbx-nav-s { display:flex; gap:6px; }
  .mbx-card { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
              box-shadow:0 1px 2px rgba(16,24,40,.04); overflow:hidden; }
  /* Same 0 bottom as the desktop rule had, and a shorthand, so fixing only
     the desktop one would have left the phone exactly as it was.
     
     22px, not a tighter number: .mbx-sec keeps its 22px ABOVE the section on a
     phone -- it has no mobile override -- so anything less here is lopsided on
     phones alone. Raised by CodeRabbit on PR 90, against an 18px this had no
     reason for. */
  .mbx-head { padding:16px 16px 22px; }
  .mbx-chips { gap:6px; }
  .mbx-t { padding:0; margin-top:13px; font-size:22px; line-height:1.2; }
  .mbx-from { gap:10px; margin-top:14px; flex-wrap:wrap; }
  /* NOT display:none. Fiyana, 2026-09-15: "In the mobile version of memo, I'm
     not able to see when the memo was sent, like what time or what date."
     
     It was hidden because avatar, name, "to ..." and the timestamp do not fit
     on one 390px line -- which is a reason to MOVE it, not to delete the one
     fact that says whether a memo is from this morning or from August. It wraps
     to its own line now, indented past the avatar (38px) and the gap (10px) so
     it sits under the name rather than under the picture. */
  .mbx-from .mbx-when { flex:1 0 100%; padding-left:48px; margin-top:2px; }
  .mbx-nm span { display:block; font-size:12.5px; }
  .mbx-body { margin-top:16px; font-size:15px; }
  .mbx-thread { padding:14px 16px 16px; }
  .mbx-head, .mbx-thread { padding-left:16px; padding-right:16px; }
  /* The toolbar moves under the memo and stays reachable. */
  .mbx-bar { margin-top:14px; padding:12px 14px; background:var(--card-bg);
             border:1px solid var(--border); border-radius:10px; }
  .mbx-bar { flex-wrap:wrap; }
  .mbx-a { flex:1 1 auto; justify-content:center; }
  .mbx-bar-sp, .mbx-count, .mbx-step { display:none; }
  /* A task title is the thing you are reading; on 390px it gets the row to
     itself and the owner, date and state wrap under it. */
  .mbx-tk-r { flex-wrap:wrap; }
  .mbx-tk-t { flex:1 1 100%; white-space:normal; }
  .mbx-tk-o { order:-1; }
  .mbx-tk-d { flex:0 0 auto; }
}

/* ── Add task, from a memo (adt-) ───────────────────────────────────────────
   Artboards 7c and 7d: one popup, two modes. Measured, tokens throughout. */
.adt { width:600px; max-width:100%; background:var(--card-bg); border-radius:14px;
       box-shadow:0 18px 50px rgba(16,24,40,.32); overflow:hidden; }
.adt-h { display:flex; align-items:center; gap:12px; padding:19px 24px 0; }
.adt-t { flex:1 1 0; min-width:0; font-weight:700; font-size:19px; letter-spacing:-.024em;
         color:var(--text); }
.adt-mode { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; flex:0 0 auto;
            font-weight:600; font-size:12.5px; color:var(--green); background:var(--card-bg);
            border:1px solid var(--border); border-radius:8px; cursor:pointer; white-space:nowrap; }
.adt-mode i { font-style:normal; color:var(--gray-3); }
.adt-mode:hover { border-color:var(--gray-3); }
.adt-x { flex:0 0 auto; font-size:17px; color:var(--gray-3); background:none; border:0;
         cursor:pointer; padding:0 2px; line-height:1; }
.adt-say { font-weight:400; font-size:12.5px; line-height:1.45; color:var(--gray-3); }
/* margin-top:16px was for where this used to sit -- part way down the memo's
   own task composer, under the title. It is the FIRST thing in the New task box
   and in Add several now, so that margin stacked on the modal's own padding and
   left a gap above it, while having no margin below left the title input butted
   straight against it. Fiyana, 2026-09-16, with a screenshot. 12px below
   matches .composer-divider's 12px above, so the title sits in an even gap. */
.adt-src { display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 13px;
           background:var(--gray-2); border:1px solid var(--border); border-radius:9px; }
.adt-src-t { flex:1 1 0; min-width:0; font-weight:600; font-size:13px; color:var(--text);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adt-src-a { flex:0 0 auto; font-weight:600; font-size:12.5px; color:var(--green);
             background:none; border:0; cursor:pointer; }
.adt-src-a:hover { text-decoration:underline; }
.adt-rows { margin-top:16px; border:1px solid var(--border); border-radius:9px; overflow:hidden; }
.adt-rh, .adt-r { display:grid; grid-template-columns:minmax(0,1fr) 148px 116px 24px;
                  align-items:center; gap:10px; padding:9px 12px; }
.adt-rh { font-weight:700; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
          color:var(--gray-3); background:var(--band); border-bottom:1px solid var(--border); }
.adt-r + .adt-r { border-top:1px solid var(--border); }
.adt-r input, .adt-r select { width:100%; min-width:0; padding:6px 8px; font:inherit;
          font-size:12.5px; color:var(--text); background:var(--card-bg);
          border:1px solid var(--border); border-radius:7px; }
/* A task title you cannot read is worse than a taller row, so it wraps rather
   than truncating. The columns are narrowed to give it the room 7d gives it. */
.adt-r-t { font-weight:600; font-size:13px; line-height:1.35; color:var(--text);
           overflow-wrap:anywhere; }
.adt-r-x { background:none; border:0; color:var(--gray-3); cursor:pointer; font-size:13px; }
@media (max-width:700px){
  .adt-rh { display:none; }
  .adt-r { grid-template-columns:minmax(0,1fr) 28px; row-gap:6px; }
  .adt-r-t { grid-column:1 / -1; }
  .adt-h { padding-left:16px; padding-right:16px; }
}

/* Help desk header actions. Four buttons in a nowrap row with margin-left:auto
   ran off the right of a phone, taking "Report Issue" with them.
   Fiyana, 2026-09-14: "the Add an Issue button is not wrapping ... so maybe it
   can just turn into a plus sign without any text."
   The row wraps, and on a phone the three that carry a glyph drop their words
   and become the glyph. "My reports" keeps its text: a bare icon for it would
   be a guess. */
.hd-acts { display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; }

/* The queue at a glance. Her constraint, 2026-09-17: "All of this can't take
   up too much space either." So: two lines, no cards, no borders round each
   number, and the whole band is shorter than the filter row under it. The
   numbers are the only large type; the words beside them stay small and grey
   so a glance reads the figures and nothing else.
   Every colour is a token. A fixed ink here would invert wrongly in dark. */
/* Manage Access: one row per module, access as chips. Three tabs and a grid of
   checkboxes became one table, because "who holds this" is one question
   however it is answered — a role, a work profile, or one person. */
.ma-table { width:100%; border-collapse:collapse; }
.ma-table td { padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
.ma-grouprow td { background:var(--gray-1); font-weight:700; font-size:10.5px;
                  text-transform:uppercase; letter-spacing:.05em; color:var(--gray-4);
                  padding:6px 10px; border-bottom:1px solid var(--border); }
.ma-mod { width:38%; }
.ma-mod-name { font-size:13px; font-weight:600; color:var(--text); }
.ma-mod-pages { font-size:11px; color:var(--gray-4); margin-top:2px; line-height:1.45; }
.ma-who { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.ma-none { font-size:12px; color:var(--gray-4); }

/* A chip IS the grant: clicking it takes the access away, so it carries a ×
   rather than looking like a label. */
.ma-chip { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
           border:1px solid var(--border); background:var(--card-bg); color:var(--text);
           border-radius:999px; padding:2px 8px; font-size:11.5px; font-weight:600; line-height:1.6; }
.ma-chip.is-role         { background:var(--green-lt);  border-color:var(--green-lt);  color:var(--green); }
.ma-chip.is-work_profile { background:var(--warn-lt);   border-color:var(--warn-lt);   color:var(--warn); }
.ma-chip.is-employee     { background:var(--info-lt);   border-color:var(--info-lt);   color:var(--info); }
.ma-chip .ma-x { font-size:12px; opacity:.55; }
.ma-chip:hover .ma-x { opacity:1; }
.ma-add { border:1px dashed var(--line); background:none; color:var(--gray-4); cursor:pointer;
          border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; }
.ma-add:hover { color:var(--green); border-color:var(--green); }

.ma-picks { display:flex; flex-wrap:wrap; gap:6px; }
.ma-pick { border:1px solid var(--border); background:var(--card-bg); color:var(--text);
           border-radius:8px; padding:6px 10px; font-size:12.5px; cursor:pointer; }
.ma-pick:hover { border-color:var(--green); color:var(--green); }
.ma-pick.is-on { background:var(--green-lt); border-color:var(--green-lt); color:var(--green);
                 cursor:default; }

@media (max-width:768px){
  .ma-mod { width:auto; }
  .ma-table td { display:block; border-bottom:none; padding:6px 10px 0; }
  .ma-table tr td:last-child { padding-bottom:10px; border-bottom:1px solid var(--border); }
}

/* The three-line summary at the head of a module's access panel. Her ask:
   "can you summarize it on the top somewhere in a neater way". Every value in
   it is derived from the same rows the detail below is drawn from. */
.ar-sum { border:1px solid var(--border); background:var(--gray-1); border-radius:10px;
          padding:10px 12px; margin-bottom:14px; }
.ar-sum-row { display:flex; gap:10px; align-items:baseline; padding:3px 0; font-size:12.5px; }
.ar-sum-row + .ar-sum-row { border-top:1px solid var(--border); }
.ar-sum-k { flex:0 0 108px; font-size:10.5px; font-weight:700; text-transform:uppercase;
            letter-spacing:.05em; color:var(--gray-3); }
.ar-chip { display:inline-block; border-radius:999px; padding:1px 8px; margin:1px 4px 1px 0;
           font-size:11.5px; font-weight:600; border:1px solid var(--border); background:var(--card-bg); }
.ar-chip.is-role { background:var(--green-lt); border-color:var(--green-lt); color:var(--green); }
.ar-chip.is-person { background:var(--info-lt); border-color:var(--info-lt); color:var(--info); }

/* The ⓘ beside a module name in Manage Access. A quiet glyph, not a button:
   it sits in a dense table and must not compete with the checkboxes. */
.ma-i { border:none; background:none; padding:0 2px; margin:0; cursor:pointer;
        font-size:12px; line-height:1; color:var(--gray-3); vertical-align:baseline; }
.ma-i:hover { color:var(--green); }

.hd-dash { padding:10px 16px 9px; border-bottom:1px solid var(--border);
           display:flex; flex-direction:column; gap:7px; }
/* Her note, 2026-09-17: "put the numbers in boxes, I'm guessing." Tiles, but
   tight ones: number and word on ONE line inside each box, because stacking
   them is the conventional stat card and doubles the height of a band whose
   whole point was not to take up height. */
.hd-dash-n { display:flex; align-items:stretch; gap:6px; flex-wrap:wrap; }
.hd-stat { display:flex; align-items:baseline; gap:5px; margin:0; font:inherit;
           border:1px solid var(--border); background:var(--card-bg); border-radius:8px;
           padding:5px 10px; color:var(--gray-4); text-align:left; }
.hd-stat b { font-size:16px; font-weight:700; line-height:1.15; color:var(--text); }
.hd-stat span { font-size:11px; font-weight:600; }
button.hd-stat { cursor:pointer; }
button.hd-stat:hover b { text-decoration:underline; text-underline-offset:3px; }
.hd-stat.is-live { background:var(--green-lt); border-color:var(--green-lt); }
.hd-stat.is-live b, .hd-stat.is-live span { color:var(--green); }
.hd-stat.is-stale { background:var(--warn-lt); border-color:var(--warn-lt); }
.hd-stat.is-stale b, .hd-stat.is-stale span { color:var(--warn); }
.hd-stat.is-on b, .hd-stat.is-on span { text-decoration:underline; text-underline-offset:3px; }

.hd-dash-c { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.hd-chip { display:inline-flex; align-items:center; gap:5px; cursor:pointer;
           border:1px solid var(--border); background:var(--card-bg); color:var(--gray-4);
           border-radius:999px; padding:3px 9px; font-size:11.5px; font-weight:600;
           line-height:1.5; }
.hd-chip b { font-size:11.5px; font-weight:700; color:var(--text); }
.hd-chip:hover { border-color:var(--line); }
.hd-chip.is-on { background:var(--green-lt); border-color:var(--green-lt); color:var(--green); }
.hd-chip.is-on b { color:var(--green); }
/* #211. The people chips used to be introduced by a bar. A bar cannot say what
   the numbers after it count, and it was display:none on a phone, so on the
   screen most people read this on there was nothing at all between the type
   chips and the per-person ones. Words instead, and the bar is gone. */
.hd-dash-lbl { font-size:11px; color:var(--gray-4); margin-left:3px; white-space:nowrap; }

@media (max-width:640px){
  /* The figures stay readable; the gaps are what give way. */
  .hd-dash { padding:9px 12px 8px; gap:6px; }
  .hd-dash-n { gap:5px; }
  .hd-stat { padding:4px 8px; }
  .hd-stat b { font-size:15px; }
  .hd-stat span { font-size:10.5px; }
  /* Wrapped, the eight chips took four lines and 160px of an 812px phone,
     which is not "a summary on top" any more. One swipeable rail instead:
     they are sorted biggest first, so the ones worth seeing are the ones
     already on screen. */
  .hd-dash-c { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
               -webkit-overflow-scrolling:touch; padding-bottom:1px; }
  .hd-dash-c::-webkit-scrollbar { display:none; }
  .hd-chip, .hd-dash-lbl { flex:0 0 auto; }
}
@media (max-width:640px){
  .hd-acts { margin-left:0; width:100%; margin-top:8px; }
  .hd-acts .hd-lbl { display:none; }
  .hd-acts .btn { flex:0 0 auto; }
  .hd-acts .btn-primary { margin-left:auto; font-size:15px; line-height:1;
                          padding-left:14px; padding-right:14px; }
}

/* The tasks tab row: every tab on a desktop, the one you are on plus a menu on
   a phone. Fiyana, 2026-09-14: "there are too many tabs at the top. Maybe it
   can just say My Tasks for that page and then add a menu that says Other
   Views." Both are drawn from one list in the markup; this only chooses which
   of the two is on screen. */
.ac-tabpick { display: none; }
@media (max-width: 768px){
  /* The row scrolls horizontally to hold five tabs. With the tabs hidden there
     is nothing left to scroll, and `overflow:auto` was clipping the menu to
     the 39px height of the row it drops out of. */
  .ac-tabs { overflow: visible; }
  .ac-tabs .tab { display: none; }
  .ac-tabpick { display: block; position: relative; flex: 1 1 auto; min-width: 0; }
  .ac-tabpick-b { display: flex; align-items: center; gap: 7px; width: 100%;
                  padding: 9px 12px; font: inherit; font-size: 13.5px; font-weight: 700;
                  color: var(--text); background: var(--card-bg);
                  border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
  .ac-tabpick-b > span[aria-hidden] { margin-left: auto; color: var(--gray-3); font-weight: 400; }
  .ac-tabpick-m { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0;
                  background: var(--card-bg); border: 1px solid var(--border);
                  border-radius: 10px; box-shadow: 0 10px 28px rgba(16,24,40,.16);
                  padding: 6px; }
  .ac-tabpick-l { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                  text-transform: uppercase; color: var(--gray-3); padding: 6px 8px 4px; }
  .ac-tabpick-m button { display: flex; align-items: center; gap: 7px; width: 100%;
                  text-align: left; padding: 9px 8px; font: inherit; font-size: 13.5px;
                  font-weight: 600; color: var(--text); background: none; border: 0;
                  border-radius: 7px; cursor: pointer; }
  .ac-tabpick-m button:hover { background: var(--gray-2); }
  .ac-tabs .ac-newtask { flex: 0 0 auto; }
}

/* A memo opened with no mailbox behind it -- from a notification, or the
   banner on the home page. .mbx is display:flex, so without this the toolbar,
   the memo and the thread were laid out as three columns side by side and the
   actions were squashed out of sight. Fiyana, 2026-09-14: "When I open the
   memo, there is no option to archive." */
.mbx.mbx-solo { display: block; border: 0; border-radius: 0; background: none;
                box-shadow: none; }
.mbx-solo .mbx-bar { border-radius: 10px 10px 0 0; }
.mbx-solo .mbx-head { padding-left: 0; padding-right: 0; }
.mbx-solo .mbx-thread { margin-left: -14px; margin-right: -14px;
                        padding-left: 14px; padding-right: 14px; }

/* Done reports; it does not ask. */
.mbx-done { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
            padding: 7px 12px; font-weight: 700; font-size: 12.5px;
            color: var(--green); background: var(--green-lt);
            border: 1px solid var(--green-lt); border-radius: 8px; white-space: nowrap; }
.mbx-done i { font-style: normal; display: inline-flex; }
.mbx-done button { background: none; border: 0; padding: 0 0 0 4px; cursor: pointer;
                   font: inherit; font-size: 12px; font-weight: 600; color: var(--gray-3); }
.mbx-done button:hover { color: var(--text); text-decoration: underline; }

/* ═══ Money: requests, claims and advances ═══════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCE DEN
   Built to the Claude Design handoff, boards 1a to 5b. Everything here is
   prefixed fin- so it extends this stylesheet rather than colliding with it.
   The first version of these screens used .input, .lbl and .pill, none of
   which exist in this app, so every field and every status pill rendered as
   browser default. That is what this section fixes.
   Tokens only: no colour is written here that is not already a variable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fields ─────────────────────────────────────────────────────────────── */
/* W-1543, 2026-10-03: one rhythm, Team Den's. A label sits 5px over its field;
   every field, box and row of fields is 14px from the next (.form-row's number);
   buttons go in .form-actions, primary first, on the left. */
.fin-lbl { display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
           color:var(--gray-4); margin:0 0 5px; font-weight:600; }

.fin-in  { width:100%; font:inherit; font-size:13.5px; padding:8px 10px; color:var(--text);
           background:var(--input-bg, #fff); border:1px solid var(--border); border-radius:8px; }

.fin-in:focus-visible { outline:2px solid var(--olive); outline-offset:1px; }

textarea.fin-in { resize:vertical; }

.fin-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }

/* fields share a row; a button in a row keeps its own width */
.fin-row > :not(.btn) { flex:1; min-width:130px; }
.fin-row > .btn { flex:0 0 auto; align-self:flex-end; }

.fin-hint { font-size:11.5px; color:var(--gray-4); line-height:1.5; margin-top:5px; }

/* the tools under a table or a list: + Add, a switch. Left, their own width. */
.fin-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:12px; }

/* ── status pills ───────────────────────────────────────────────────────── */
.fin-pill { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px;
            border-radius:20px; white-space:nowrap; border:1px solid var(--border);
            background:var(--gray-1); color:var(--gray-4); }

.fin-pill.wait  { background:var(--yellow-lt); color:var(--yellow-dk); border-color:#f0dcb4; }

.fin-pill.done  { background:var(--green-lt);  color:var(--green-dk);  border-color:#cfe0c2; }

.fin-pill.stop  { background:var(--danger-lt); color:var(--danger); border-color:#f0cdc8; }

.fin-pill.urg   { background:var(--danger); color:var(--on-dark-lt,#fff); border-color:var(--danger); }

.fin-pill.band  { background:var(--olive-lt); color:var(--olive-dk); border-color:#dde0c8; }

/* ── chips: the mockup uses these wherever a field is a short closed list ── */
.fin-chips { display:flex; gap:8px; flex-wrap:wrap; }
/* W-1774: "Where is it for" asks city, then place, then building (Fiyana, 8 Oct 2026) */
.fin-sublbl { font-size:12px; color:var(--gray-4); margin:12px 0 6px; }
.fin-crumb { font-size:12.5px; color:var(--gray-4); margin-top:12px; }
.fin-crumb a { color:var(--green-dk, #2F6B4F); text-decoration:none; border-bottom:1px dotted currentColor; }
.fin-crumb b { color:var(--text, inherit); }
.fin-psearch { margin-top:12px; }
.fin-psearch-res { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.fin-psearch-opt { text-align:left; background:var(--gray-1, #F7F9FB); border:1px solid var(--border); border-radius:8px; padding:8px 10px; font:inherit; font-size:13px; cursor:pointer; color:inherit; }
.fin-psearch-opt:hover { border-color:var(--green-dk, #2F6B4F); }

.fin-chip  { flex:0 0 auto; border-radius:99px; padding:8px 14px; min-height:36px; font-size:12.5px; font-weight:600;
             white-space:nowrap; cursor:pointer; background:var(--card-bg,#fff); border:1px solid var(--border);
             color:var(--gray-4); font-family:inherit; }

.fin-chip:hover:not([disabled]) { border-color:var(--gray-3); }

.fin-chip[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:var(--on-dark-lt,#fff); }

.fin-chip[disabled] { background:var(--gray-2); color:var(--gray-3); cursor:not-allowed;
                      text-decoration:line-through; }

/* ── option cards: processing category, one per row with its own note ───── */
.fin-opt { display:block; width:100%; text-align:left; cursor:pointer; font-family:inherit;
           background:var(--card-bg,#fff); border:1px solid var(--border); border-radius:9px;
           padding:13px 15px; margin-bottom:10px; }

.fin-opt span { display:block; margin-top:3px; line-height:1.5; }

.fin-opt[aria-pressed="true"] { background:var(--green-lt); border-color:var(--green); }

.fin-opt[disabled] { background:var(--gray-1); cursor:not-allowed; }

.fin-opt b { display:block; font-size:13px; color:var(--text); }

.fin-opt[disabled] b { color:var(--gray-3); }

.fin-opt span { display:block; font-size:11.5px; color:var(--gray-4); margin-top:1px; }

.fin-opt[disabled] span { color:var(--danger); }

/* ── funding source cards: the balance IS the point of this control ─────── */
.fin-src { display:flex; width:100%; gap:10px; align-items:flex-start; text-align:left;
           cursor:pointer; font-family:inherit; background:var(--card-bg,#fff); border:1px solid var(--border);
           border-radius:9px; padding:9px 11px; margin-bottom:6px; }

.fin-src[aria-pressed="true"] { background:var(--green-lt); border-color:var(--green); }

.fin-src[disabled] { background:var(--gray-1); cursor:not-allowed; }

.fin-src .nm { font-size:13px; font-weight:600; color:var(--text); }

.fin-src[disabled] .nm { color:var(--gray-3); font-weight:400; }

.fin-src .hd { display:block; font-size:11.5px; color:var(--gray-4); margin-top:1px; }

.fin-src[disabled] .hd { color:var(--danger); }

.fin-src .amt { margin-left:auto; text-align:right; flex:0 0 auto; }

.fin-src .amt b { display:block; font-size:13px; font-variant-numeric:tabular-nums; }

.fin-src .amt span { display:block; font-size:10.5px; color:var(--gray-4); }

/* ── quote tiles ────────────────────────────────────────────────────────── */
.fin-quotes { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
@media (max-width:640px){ .fin-quotes { grid-template-columns:1fr; } }
/* the whole slot is the target; the browser's own file control is not shown (W-1543) */
.fin-quote { position:relative; cursor:pointer; }
/* Visually gone but still the label's target. !important because the phone rules give
   every input a width, a min-height and padding, which made these 800px wide and
   pushed the whole page sideways (W-1553). */
.fin-file-hidden { position:absolute !important; left:0; top:0; width:1px !important; height:1px !important;
                   min-width:0 !important; min-height:0 !important; padding:0 !important; border:0 !important;
                   margin:0 !important; opacity:0; overflow:hidden; clip-path:inset(50%); }
label:has(> .fin-file-hidden) { position:relative; }
.fin-quote-pick { display:inline-block; margin-top:8px; padding:6px 12px; border-radius:var(--radius-btn,8px);
                  border:1px solid var(--border); background:var(--card-bg,#fff); color:var(--text);
                  font-size:12px; font-weight:600; }
.fin-quote:focus-within { outline:2px solid var(--olive); outline-offset:2px; }

.fin-quote { border:1px dashed var(--gray-3); border-radius:8px; padding:12px 8px;
             text-align:center; font-size:12px; color:var(--gray-4); background:var(--gray-1); }

.fin-quote.has { border-style:solid; border-color:var(--green); background:var(--green-lt);
                 color:var(--green-dk); font-weight:600; }

/* ── the amber "here is what is missing, and the two ways out" box ──────── */
.fin-warn { background:var(--yellow-lt); border:1px solid #f0dcb4; border-left:3px solid var(--warn);
            border-radius:8px; padding:10px 12px; font-size:12.5px; line-height:1.5;
            color:var(--yellow-dk); }

.fin-warn b { color:var(--yellow-dk); }

.fin-plain { background:var(--olive-lt); border-radius:8px; padding:10px 12px;
             font-size:12.5px; line-height:1.6; color:var(--olive-dk); }

/* ── two columns, review permanently in the rail ────────────────────────── */
.fin-cols { display:grid; grid-template-columns:1fr 330px; gap:16px; align-items:start; }

/* A grid item will not shrink below its content's own minimum unless it is told to,
   so the claim's line table, which is 660px wide before it starts scrolling, was
   dragging the whole column past the screen and taking the page with it: at phone
   width the header, the description field and everything else ran off the right. The
   table still scrolls inside .fin-tw; this is what lets it. */
.fin-cols > * { min-width:0; }

.fin-rail { position:sticky; top:14px; }
/* Born without its media query in v.803, so the review rail sat under the form on
   every width and the two-column desktop layout never showed. Below 900px the rail
   goes under the form, and the page keeps room above the phone's bottom bar so the
   last card is not hidden behind it (#286). */
@media (max-width:900px){
  .fin-cols { grid-template-columns:1fr; padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  .fin-rail { position:static; }
}

/* ── one box per question: where, type of expense, delivery, the funding question ── */
.fin-box { border:1px solid var(--border); border-radius:9px; padding:12px 14px; margin-bottom:14px;
           background:var(--card-bg,#fff); }
.fin-box .fin-lbl { margin-bottom:8px; }

/* ── the figure, and the words under it ─────────────────────────────────── */
.fin-amt   { font-family:'Fraunces', Georgia, serif; font-size:26px; font-weight:600;
             font-variant-numeric:tabular-nums; line-height:1.1; }

.fin-words { font-size:11.5px; color:var(--gray-4); font-style:italic; line-height:1.4; margin-top:2px; }

/* ── who signs: initials, name, role ───────────────────────────────────── */
.fin-sig { display:flex; gap:9px; align-items:flex-start; padding:8px 0;
           border-bottom:1px solid var(--border); }

.fin-sig:last-child { border-bottom:0; }

.fin-av  { flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid;
           place-items:center; font-size:10.5px; font-weight:700;
           background:var(--olive-lt); color:var(--olive-dk); }

.fin-av.done { background:var(--green); color:var(--on-dark-lt,#fff); }

.fin-av.wait { background:var(--yellow-lt); color:var(--yellow-dk); }

.fin-sig .who  { font-size:13px; font-weight:600; }

.fin-sig .role { font-size:11.5px; color:var(--gray-4); }

/* The preferred signatory. Deliberately quiet: a nomination is a hint, and it
   should not out-shout the name of whoever actually has to sign. */
.fin-pref { width:100%; max-width:100%; margin-top:5px; font:inherit; font-size:11.5px;
            color:var(--gray-4); padding:3px 6px; border:1px solid var(--border);
            border-radius:6px; background:var(--input-bg, #fff); }

.fin-pref:focus-visible { outline:2px solid var(--olive); outline-offset:1px; }

/* ══ BILLS, BOARD 2a ══════════════════════════════════════════════════════════
   The working surface of the 10th and the 25th. Board 2a's rule: "The flag is the
   row, not a badge in it — Shreyas reads this list by colour from four feet away,
   so the fill carries the meaning and the swatch column is only how you change
   it." Everything here serves reading a long list fast, then changing three cells
   in place without leaving it.

   The fills follow the .th-red/.th-green/.th-amber pattern already in this file:
   a light tint with a matching dark value, never a single tint dimmed. Query and
   approved borrow those two hues; timing needs a fourth that .th-* does not have,
   because a large one-off awaiting a date is not an error and must not read as
   one.                                                                        */
.fin-tbl-wrap { overflow-x:auto; border-top:1px solid var(--border); }

.fin-tbl thead th.num { text-align:right; }

.fin-tbl td.num { text-align:right; font-variant-numeric:tabular-nums;
           font-weight:600; white-space:nowrap; }

/* the flag, as the row */
.fin-tbl tr.f-query { background:#fdf3e2; }

.fin-tbl tr.f-time  { background:#fbeceb; }

.fin-tbl tr.f-appr  { background:#eaf3e6; }

[data-theme="dark"] .fin-tbl tr.f-query { background:#33280f; }

[data-theme="dark"] .fin-tbl tr.f-time  { background:#3a2321; }

[data-theme="dark"] .fin-tbl tr.f-appr  { background:#22301d; }

/* an expense claim is not a flag, it is a kind of row: paid personally, owed back */
.fin-tbl td .owed { color:var(--danger); }

.fin-od.late { color:var(--danger); }

.fin-od.today { color:var(--warn); }

.fin-sw button.q { background:#f6e7a6; }

.fin-sw button.t { background:#f4cccc; }

.fin-sw button.n { background:transparent; }

.fin-x { border:0; background:none; cursor:pointer; color:var(--gray-4);
           font-size:13px; line-height:1; padding:2px 4px; }

.fin-x:hover { color:var(--danger); }

.fin-bar-tick .dest { color:var(--olive-dk); }

.fin-filters .sp { flex:1; }

/* ── numbered section headings, as the paper form numbers them ─────────── */
.fin-sect { padding:20px; }
@media (max-width:640px){ .fin-sect { padding:14px; } }

.fin-sect > h4 { margin:0 0 14px; font-size:14.5px; }

.fin-sect > h4 .n { color:var(--olive-dk); margin-right:5px; }

.fin-fld { margin-bottom:14px; }
.fin-fld > .fin-hint:last-child, .fin-box > .fin-hint:last-child { margin-bottom:0; }

/* the actions at the end of a form or a card: Team Den's .form-actions, with room above */
.fin-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
@media (max-width:640px){ .fin-actions { flex-direction:column; } .fin-actions .btn { width:100%; } }

.fin-bar .lab { display:flex; justify-content:space-between; gap:10px; margin-bottom:4px; }

.fin-bar.over .fin-fill { background:var(--danger); }

.fin-bar.over .lab { color:var(--danger); font-weight:600; }

.fin-leg.ok { border-color:#cfe0c2; background:var(--green-lt); color:var(--green-dk); }

.fin-blocked .amt { text-decoration:line-through; color:var(--gray-4); }

/* ── a reimbursement claim: the lines, and the limit beside each one ─────
   The cap column is the reason this is a table and not a list of cards. What a
   person wants to know, in one glance down one column, is how much of what they
   spent is coming back. */
.fin-check { display:flex; gap:8px; align-items:center; font-size:13px; cursor:pointer;
           margin-bottom:10px; }

.fin-check input { width:15px; height:15px; accent-color:var(--olive-dk); }

.fin-tw { overflow-x:auto; margin:0 -16px; padding:0 16px; }

.fin-lines { width:100%; border-collapse:collapse; font-size:12.5px; min-width:660px; }

.fin-lines th { text-align:left; font-size:10.5px; letter-spacing:.06em;
           text-transform:uppercase; color:var(--gray-4); font-weight:600;
           padding:0 10px 6px; border-bottom:1px solid var(--border); white-space:nowrap; }

.fin-lines td { padding:9px 10px; border-bottom:1px solid var(--border);
           vertical-align:top; }

/* the date is two words and must not become two lines: it is the column the eye
   runs down to find the day it is looking for */
.fin-lines td:first-child { white-space:nowrap; }

.fin-lines .num, .fin-lines th.num { text-align:right; font-variant-numeric:tabular-nums;
           white-space:nowrap; }

/* An editable table (the items on a purchase). The form's column is under 500px on a
   laptop, so a five-column table cannot fit there either: each item is a small card
   at every width, name and brand across the top, then quantity, unit, price and
   amount in one row (two by two on a phone). Each cell names itself from data-l. */
.fin-lines.fin-stack { min-width:0; display:block; }
.fin-lines.fin-stack thead { display:none; }
.fin-lines.fin-stack tbody, .fin-lines.fin-stack tfoot { display:block; }
.fin-lines.fin-stack tr { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)) auto; gap:10px 12px;
                          align-items:end; padding:14px 0; border-bottom:1px solid var(--border); }
.fin-lines.fin-stack td { display:block; padding:0; border:0; white-space:normal; text-align:left; min-width:0; }
.fin-lines.fin-stack td.wide { grid-column:1 / -1; }
.fin-lines.fin-stack td.num { padding-bottom:9px; font-weight:600; }
.fin-lines.fin-stack td[data-l]::before { content:attr(data-l); display:block; font-size:11px;
                          text-transform:uppercase; letter-spacing:.04em; color:var(--gray-4);
                          font-weight:600; margin-bottom:5px; }
.fin-lines.fin-stack tfoot tr { display:flex; justify-content:flex-end; gap:16px; border-bottom:0; padding-bottom:0; }
.fin-lines.fin-stack tfoot td:empty { display:none; }
.fin-lines.fin-stack .fin-in { min-width:0; }
@media (max-width:640px){
  .fin-lines.fin-stack tr { grid-template-columns:1fr 1fr; }
  .fin-lines.fin-stack tfoot tr { justify-content:space-between; }
}

.fin-sub { font-size:11px; color:var(--gray-4); }

/* Attaching the bill is a label wrapped round a hidden file input, so the whole
   thing is one target and the browser's own "no file chosen" never shows. */
.fin-attach { display:inline-block; font-size:11.5px; cursor:pointer; padding:2px 8px;
           border:1px dashed var(--border); border-radius:11px; color:var(--olive-dk);
           white-space:nowrap; }

.fin-attach:hover { border-style:solid; background:var(--olive-lt); }

.fin-link { border:0; background:none; padding:0; font:inherit; font-size:11.5px;
           color:var(--olive-dk); text-decoration:underline; cursor:pointer; }

.fin-addline { display:flex; gap:12px 12px; flex-wrap:wrap; align-items:flex-end;
           margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }

.fin-addline > div { flex:1; min-width:130px; }

.fin-addline .btn { margin-bottom:1px; }
/* Report Something — the chooser, and the About-somebody picker (#218) */
.rs-list{display:flex;flex-direction:column;gap:8px}
.rs-opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  padding:13px 14px;border:1px solid var(--border);border-radius:10px;
  background:var(--card-bg);cursor:pointer;font:inherit;color:var(--text)}
.rs-opt:hover{border-color:var(--green);background:var(--surface-1,#fbfaf6)}
/* The chooser's rows go somewhere when you press them, so they never need to
   show a choice. Used as a radio group -- "About somebody" -- one of them is
   the answer and has to look like it. */
.rs-opt.is-on{border-color:var(--green);background:var(--green-lt);}
.rs-opt.is-on .rs-t{color:var(--green-dk)}
.rs-opt.is-on .rs-s{color:var(--text)}
.rs-ic{font-size:19px;line-height:1.1}
.rs-t{display:block;font-weight:700;font-size:13.5px}
.rs-s{display:block;font-size:12px;color:var(--gray-4);margin-top:2px}

.pn-results{max-height:220px;overflow-y:auto}
.pn-pick{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;
  border-bottom:1px solid var(--border);background:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--text)}
.pn-pick:hover{background:var(--surface-1,#fbfaf6);border-color:var(--green);border-radius:8px}
.pn-sub{font-size:11.5px;color:var(--gray-4);flex:0 0 auto}
.pn-none{color:var(--gray-4);font-size:12.5px;padding:6px 2px}
.pn-chosen{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 11px;border:1px solid var(--green);border-radius:9px;
  background:var(--surface-1,#fbfaf6);font-size:13px;font-weight:600}

.pn-pend{border:1px solid var(--border);border-radius:9px;padding:11px 12px;margin-bottom:9px}
.pn-pend-top{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.pn-pend-meta{font-size:11.5px;color:var(--gray-4)}
.pn-pend-acts{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
/* ── the money list ────────────────────────────────────────────────────────
   Built on .ib-ev-row, the Inbox event row, because it is the same object: a queue
   of things with a status that you tap into. Same element (a button, so the keyboard
   and the screen reader get it for free), same paddings, same hover, same pills.
   Two additions, both earning it: .mn-k, the kind chip, which a joint list
   cannot do without and which takes .ib-ev-q's shape in neutral so it does not
   compete with the status pill; and a :focus-visible the Inbox row never got,
   because this row is now the only way to reach a request and a keyboard has
   to be able to see where it is. Everything else is .ib-ev-row's, to the
   pixel. */
.mn-row { display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
          background:none; border:0; font:inherit; cursor:pointer; border-radius:0;
          padding:12px 14px; border-bottom:1px solid var(--border); }
.mn-row:last-child { border-bottom:0; }
.mn-row:hover { background:var(--gray-2); }
.mn-row:focus-visible { background:var(--gray-2); box-shadow:inset 3px 0 0 var(--olive);
          outline:none; }
.mn-main { flex:1; min-width:0; display:block; }
.mn-k { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; border-radius:4px; padding:2px 7px; margin-bottom:5px;
        color:var(--gray-3); background:var(--gray-2); }
.mn-t { display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.mn-s { display:block; font-size:11.5px; color:var(--gray-4); margin-top:2px; }
.mn-urg { color:var(--danger); font-weight:700; }
.mn-n { display:block; font-size:12px; color:var(--gray-3); margin-top:5px;
        text-wrap:pretty; }
.mn-right { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end;
        gap:6px; }
.mn-a { font-weight:700; font-variant-numeric:tabular-nums; font-size:13.5px;
        color:var(--text); }
/* A lakh and over, written out. A misread zero is the one mistake on this page
   that cannot be undone. */
.mn-aw { display:block; font-size:10px; font-style:italic; color:var(--gray-4);
        text-align:right; max-width:150px; margin-top:2px; line-height:1.35; }
/* The reference is for a desk and for search; a phone row has better uses for
   the space (boards 1a/1b). */
@media (max-width:899px){
  .mn-ref { display:none; }
  /* The track needs about 158px to stay on one line. Without a floor the words
     under a six-figure amount took the main column to 157 and the track broke,
     stranding the + exactly as it did before. The words wrap instead: they are
     a check on the figure, not the thing being scanned. */
  .mn-main { min-width:166px; }
  .mn-aw { max-width:110px; }
}
/* Search sits with the other controls and takes the room that is left. */
.mn-q { flex:1 1 150px; max-width:260px; min-width:0; }

/* ─── Money → what KIND of request a row is (W-1628) ───
   As grey text under the title it read as part of the reference, and people
   could not tell a purchase from an advance at a glance. Each kind has its own
   tint: money RESQ pays out is green, money coming back to a person is warm. */
.mn-kind { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; padding:2px 7px; border-radius:4px; margin-top:4px;
        background:var(--gray-2); color:var(--gray-3); }
.mn-kind.buy   { background:var(--green-lt);  color:var(--green-dk); }
.mn-kind.svc   { background:var(--olive-lt);  color:var(--olive-dk); }
.mn-kind.works { background:#E7EDF5;          color:#2C4A6B; }
.mn-kind.back  { background:var(--warn-lt);   color:var(--warn); }
.mn-kind.adv   { background:var(--yellow-lt); color:var(--yellow-dk); }

/* ─── The filter, on the page rather than behind a button (W-1628) ─── */
.mn-filters { display:flex; flex-direction:column; gap:10px; padding:12px 14px;
        margin-bottom:12px; background:var(--card-bg); border:1px solid var(--border);
        border-radius:var(--radius); }
.mn-fgrp { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mn-flbl { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
        color:var(--gray-4); flex:0 0 118px; }
@media (max-width:620px){ .mn-flbl { flex:1 1 100%; } }

/* ─── One word of the track, explained (W-1628) ─── */
.mn-how-w { display:flex; gap:10px; font-size:12.5px; padding:4px 0;
        color:var(--gray-3); }
.mn-how-w > b { flex:0 0 86px; color:var(--text); }
.mn-how-w > span { flex:1; min-width:0; line-height:1.5; text-wrap:pretty; }

/* ─── Ask for money: an icon per choice (W-1628) ─── */
.fin-opt-i { display:flex; align-items:flex-start; gap:11px; text-align:left; }
/* Two classes, not one, and that is the whole point of this rule. `.fin-opt span`
   above sets display:block on EVERY span inside the button, and one class plus one
   element beats one class, so it won here: the badge went back to display:block,
   align-items and justify-content stopped meaning anything, and the 20px icon sat
   in the top-left corner of its 32px square. Reported 2026-10-05, the day the icons
   were added. Raising the specificity is enough; narrowing `.fin-opt span` instead
   would reach the title and example text, which do want display:block. */
.fin-opt .fin-opt-ic { flex:0 0 auto; width:32px; height:32px; border-radius:8px;
        background:var(--gray-2); display:flex; align-items:center;
        justify-content:center; margin-top:1px; }
.fin-opt-tx { flex:1; min-width:0; }
.fin-opt-i[disabled] .fin-opt-ic { opacity:.45; }

/* ─── Money → the four-step track on a row (W-1608) ───
   A circle per step with its word underneath, joined by a line: one thing moving
   along, not four separate tags. The line between Paid and Arrived is a + because
   those two have no order between them.

   Board 1c teaches five states in words, so colour only has to agree with it.
   Each state also differs in SHAPE — a tick, a thick ring, a filled dot, a bang,
   a thin ring — because these are read outdoors and by people who do not
   separate green from grey. */
.mn-trk { display:flex; align-items:flex-start; flex-wrap:wrap; gap:2px;
        margin-top:7px; }
.mn-stp { display:inline-flex; flex-direction:column; align-items:center; gap:3px;
        flex:0 0 auto; }
.mn-stp-o { width:16px; height:16px; border-radius:50%; display:flex;
        align-items:center; justify-content:center; font-size:9.5px;
        font-weight:700; line-height:1;
        border:1.5px solid var(--line); background:var(--card-bg);
        color:transparent; }
.mn-stp-k { font-size:10px; color:var(--gray-4); white-space:nowrap; }
/* the connector, and the + that replaces it where there is no order */
.mn-stp-line { flex:1 1 10px; min-width:8px; max-width:34px; height:1.5px;
        background:var(--border); margin-top:7px; }
.mn-stp-plus { flex:0 0 auto; font-size:11px; font-weight:700; color:var(--gray-4);
        margin-top:2px; padding:0 3px; }

.mn-stp.done  .mn-stp-o { background:var(--green); border-color:var(--green);
        color:var(--on-dark-lt,#fff); }
.mn-stp.done  .mn-stp-k { color:var(--gray-4); }
/* somebody is on it: a thick open ring, and the word in full strength */
.mn-stp.doing .mn-stp-o { border-width:2.5px; border-color:var(--text); }
.mn-stp.doing .mn-stp-k { color:var(--text); font-weight:700; }
/* yours: filled, with a hole punched in it */
.mn-stp.you   .mn-stp-o { background:var(--green); border-color:var(--green);
        box-shadow:inset 0 0 0 3px var(--card-bg); }
.mn-stp.you   .mn-stp-k { color:var(--olive-dk); font-weight:700; }
.mn-stp.stuck .mn-stp-o { border-color:var(--danger); border-width:2px;
        color:var(--danger); }
.mn-stp.stuck .mn-stp-k { color:var(--danger); font-weight:700; }

/* "You need to:" is a chip, not a sentence in green. It is the one line on the
   row that is addressed to the reader, and a filled shape says so from across a
   dark kennel block in a way coloured text does not. */
.mn-n.you   { display:inline-block; color:var(--olive-dk); font-weight:600;
        background:var(--olive-lt); border:1px solid #dde0c8; border-radius:6px;
        padding:3px 8px; margin-top:6px; }
.mn-n.stuck { color:var(--danger); font-weight:600; }
.mn-top { display:flex; justify-content:flex-end; align-items:center; gap:8px;
        flex-wrap:wrap; margin-bottom:12px; }
.mn-filt-on { background:var(--olive-lt); color:var(--olive-dk); border-color:#dde0c8; }
/* One row of "how to read it": the mark as it really appears, then what it means. */
.mn-how-r { display:flex; align-items:center; gap:10px; font-size:12.5px;
        color:var(--gray-3); padding:4px 0; }
.mn-how-r .mn-stp { flex:0 0 auto; min-width:22px; }

/* ─── Money → Budgets, board 2a/2b ───
   What is left is the number people come for, so it is the big one. The cap is
   the small line under it, not the other way round. */
.mn-bud { display:flex; align-items:flex-start; gap:14px; padding:11px 0;
        border-bottom:1px solid var(--border); }
.mn-bud:last-child { border-bottom:0; }
.mn-bud-l { flex:1; min-width:0; }
.mn-bud-t { font-size:13.5px; font-weight:600; color:var(--text); }
.mn-bud-s { font-size:11.5px; color:var(--gray-4); margin-top:2px; }
.mn-bud-w { font-size:11.5px; color:var(--warn); margin-top:5px; text-wrap:pretty; }
.mn-bud-r { flex:0 0 auto; text-align:right; }
.mn-bud-a { font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
        color:var(--text); white-space:nowrap; }
.mn-bud-a.over { color:var(--danger); }
/* ─── The budget bar in three parts, board 2a ───
   Solid, hatched, outlined. The pattern carries the meaning as much as the
   colour does, and the legend names all three in words, because this is read
   outdoors on a phone and by people who do not separate green from amber. */
.mn-bar { position:relative; display:flex; height:9px; margin-top:7px;
        border-radius:99px; overflow:hidden; background:var(--gray-2); }
.mn-bar-s { display:block; height:100%; }
.mn-bar-s.spent    { background:var(--green); }
.mn-bar-s.promised { background:repeating-linear-gradient(135deg,
        var(--olive) 0 3px, var(--olive-lt) 3px 6px); }
.mn-bar-s.asked    { background:var(--warn-lt);
        box-shadow:inset 0 0 0 1.5px var(--warn); }
/* where the cap sits once the bar has gone past it */
.mn-bar-cap { position:absolute; top:-2px; bottom:-2px; width:2px;
        background:var(--text); }

.mn-bud-top { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
        margin-bottom:12px; }
.mn-bud-top > .fin-hint { flex:1 1 240px; }
.mn-leg { display:flex; gap:12px; flex-wrap:wrap; font-size:11px;
        color:var(--gray-4); }
.mn-leg span { display:inline-flex; align-items:center; gap:5px; }
.mn-leg i { width:14px; height:9px; border-radius:2px; flex:0 0 auto; }

.mn-bud-c { font-size:11px; color:var(--gray-4); font-variant-numeric:tabular-nums;
        white-space:nowrap; margin-top:1px; }

/* ─── What this will cost in signatures, pinned on a phone (W-1608) ───
   Hidden on a desk, where the review rail already sits beside the form and does
   this better. Shown only where the rail has nowhere to go. */
.fin-costbar { display:none; }
@media (max-width:899px){
  .fin-costbar { display:block; position:sticky; bottom:0; z-index:5;
        margin:12px -12px 0; padding:9px 14px calc(9px + env(safe-area-inset-bottom));
        background:var(--card-bg); border-top:2px solid var(--text);
        box-shadow:0 -2px 10px rgba(16,24,40,.06); }
  /* The page has to end above it, or the last field sits under the bar. */
  .fin-cols { padding-bottom:4px; }
}
.fin-costbar-in { display:flex; align-items:center; gap:12px; }
.fin-costbar-l { flex:1; min-width:0; }
.fin-costbar-a { font-size:16px; font-weight:700; font-variant-numeric:tabular-nums;
        color:var(--text); }
.fin-costbar-w { font-size:10.5px; color:var(--gray-4); font-style:italic;
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-costbar-r { flex:0 0 auto; display:flex; align-items:center; gap:6px;
        font-size:11.5px; font-weight:600; color:var(--gray-3); text-align:right;
        max-width:52%; }
.fin-costbar-r.warn { color:var(--danger); }
.fin-costbar-av { font-size:10px; font-weight:700; letter-spacing:.04em;
        color:var(--olive-dk); background:var(--olive-lt); border-radius:99px;
        padding:2px 7px; white-space:nowrap; }

/* ─── The form as five steps, boards 3d to 3h (W-1608) ───
   One question at a time, with the cost carried along underneath. The sections
   inside a step lose their own numbering and spacing: the step is the heading
   now, and "1 ·" beside it would be a second count disagreeing with the first. */
.fin-step-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.fin-step-n { font-size:11.5px; font-weight:700; letter-spacing:.04em;
        text-transform:uppercase; color:var(--gray-4); margin:8px 0 2px; }
.fin-step-h { font-size:13.5px; font-weight:700; color:var(--text); }
/* Five segments, filled up to where you are. */
.fin-step-pips { display:flex; gap:4px; }
.fin-step-pips > span { flex:1; height:4px; border-radius:99px;
        background:var(--gray-2); }
.fin-step-pips > span.on { background:var(--green); }
.fin-step-t { font-size:19px; font-weight:700; letter-spacing:-.02em;
        color:var(--text); margin:0 0 14px; }
.fin-step .fin-sect > h4 { display:none; }
.fin-step .fin-sect { box-shadow:none; border:1px solid var(--border); }
.fin-step-go { display:flex; align-items:center; gap:10px; margin:16px 0 4px; }
.fin-step-go .btn-primary { margin-left:auto; min-width:110px; }
@media (max-width:899px){
  /* The pinned cost bar sits under the buttons, so the last step's Submit is
     not hidden behind it. */
  .fin-step-go { padding-bottom:4px; }
}
.mn-you { color:var(--olive-dk); }
.mn-done { margin-bottom:16px; }
.mn-done > summary { cursor:pointer; font-size:12.5px; color:var(--gray-4);
        padding:10px 14px; background:var(--card-bg); border:1px solid var(--border);
        border-radius:var(--radius); }
.mn-done[open] > summary { border-radius:var(--radius) var(--radius) 0 0; }
.mn-done .mn-row { background:var(--card-bg); border:1px solid var(--border);
        border-top:0; }

/* ─── Ask for money: two groups, side by side on a desk (W-1608) ───
   Two columns only where there is room for them. On a phone they stack, and
   "Money for you" lands under the four RESQ ones, which is the order the
   question is asked in anyway. */
.fin-ask-h { font-size:19px; font-weight:700; letter-spacing:-.02em;
        color:var(--text); margin:2px 0 14px; }
.fin-ask { display:grid; grid-template-columns:1fr; gap:10px 28px; }
@media (min-width:900px){ .fin-ask { grid-template-columns:1fr 1fr; } }
.fin-ask-col { min-width:0; }
.fin-ask-g { font-size:13.5px; font-weight:700; color:var(--text); margin-top:6px; }
.fin-ask-s { font-size:12px; color:var(--gray-4); margin:2px 0 8px; }

/* ─── Approvals, board 4a ───
   Somebody about to sign five things wants to know it is five, what they come
   to, and whether any has been sitting. Then, per request, who has signed and
   who is still missing — a count alone never said which. */
.ap-head { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.ap-sub  { font-size:12px; color:var(--gray-4); margin-top:2px; }

.ap-dots { display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
        color:var(--gray-4); }
.ap-dots i { width:8px; height:8px; border-radius:50%; flex:0 0 auto;
        border:1.5px solid var(--line); }
.ap-dots i.on { background:var(--green); border-color:var(--green); }

.ap-sigs { margin-top:9px; border:1px solid var(--border); border-radius:var(--radius);
        overflow:hidden; }
.ap-sig { display:flex; align-items:center; gap:9px; padding:7px 11px;
        font-size:12.5px; border-bottom:1px solid var(--border); }
.ap-sig:last-child { border-bottom:0; }
.ap-sig.yours { background:var(--olive-lt); }
.ap-tick { width:17px; height:17px; border-radius:50%; flex:0 0 auto;
        display:flex; align-items:center; justify-content:center; font-size:10px;
        font-weight:700; background:var(--green); color:var(--on-dark-lt,#fff); }
.ap-tick.open { background:transparent; border:2px solid var(--text); }
.ap-sig > span:nth-child(2) { flex:1; min-width:0; }
.ap-role { display:block; font-size:11px; color:var(--gray-4); }
.ap-when { flex:0 0 auto; font-size:11px; color:var(--gray-4); white-space:nowrap; }
.ap-when.turn { color:var(--olive-dk); font-weight:700; }
.fl-muted { color:var(--gray-4); }
.fl-small { font-size:11.5px; }
@media (max-width: 768px) {
  /* The vehicle list is used in the field: one card per vehicle on a phone.
     Team Den keeps tables inside cards scrolling sideways (#content .card
     .table-wrap), so this is scoped to the list and outranks that rule. */
  #content .card .table-wrap.fl-cards td .fl-small { display:inline; margin-left:6px; }
}
.fl-odo-in .flo-err { grid-column:1 / -1; color:var(--danger); }
.fl-check-item .flk-inote { grid-column:1 / -1; }
/* input.modal-inp: the generic input rule is input:not(...):not(...), which a plain class selector loses to */
.fl-fig.is-profile { border-color:var(--green-dk, #26482F); box-shadow:0 0 0 2px rgba(38,72,47,.15); }
/* W-1747: input[type=file] and the class are both needed. The global
   input:not([type=radio]):not([type=checkbox]) rule near the top of this file
   is more specific than ".fl-odo-photo input" and set width:100%, so the
   hidden input stretched to the page's width and Odometer scrolled sideways. */
.fl-odo-photo input[type="file"].flo-photo { position:absolute; left:0; top:0; width:1px; height:1px; min-height:0; padding:0; border:0; opacity:0; }

/* ── Dropdowns: one chevron, everywhere ─────────────────────────────────────
   The browser's own arrow sat hard against the right edge and drew the box its
   own way, so a select never looked like the inputs beside it (Neha, 27 Sep
   2026: "stuck to the right edge… really rudimentary"). appearance:none gives
   selects the same box as every input, and the chevron is drawn here, inset
   10px, with room kept for it.
   The longhands are !important on purpose: dozens of selects set a `background`
   shorthand (inline, .modal-inp, dark mode's `!important` one), and a shorthand
   resets background-image — the chevron would silently vanish from exactly
   those. Specificity (three :not()s) also beats the dark-mode rule.
   Left alone: multi-line lists (multiple / size), which have no arrow to fix,
   and .ws-inline, whose editors deliberately read as plain text until touched. */
select:not([multiple]):not([size]):not(.ws-inline) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7785' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px 12px !important;
  padding-right: 30px !important;
  text-overflow: ellipsis;
  cursor: pointer;
}
select:not([multiple]):not([size]):not(.ws-inline):hover:not(:disabled):not(:focus) { border-color: var(--gray-3, #B8C0C8); }
select:disabled { cursor: not-allowed; }
[data-theme="dark"] select:not([multiple]):not([size]):not(.ws-inline) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A9B3BF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
/* #223: the one person row every name box draws its results with. Compact on
   purpose -- a 28px photo and two lines that never wrap -- so a phone still
   shows several rows, including the @ list above the keyboard. */
._pr   { display:flex; align-items:center; gap:8px; flex:1; min-width:0; text-align:left; }
._pr-t { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
._pr-n { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
._pr-k { color:var(--gray-4); font-weight:400; }
._pr-s { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:400; color:var(--gray-4); }

/* Fleet documents and compliance (27 Sep 2026): filter buttons, type first, the yellow "no document" state */
.badge-yellow { background:#FFF3C4; color:#7A5B00; }
[data-theme="dark"] .badge-yellow { background:rgba(255,211,77,.18); color:#FFD24D; }
.fli-st.done { background:var(--green-lt); color:var(--green); }
.fli-st.now { background:var(--olive-lt); color:var(--olive-dk); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--olive); }
.fli-now.plain { border-color:var(--border); background:var(--gray-1); }
.fli-now.red { border-color:var(--danger); background:var(--danger-lt); }
.fli-taskcard { border:1px solid var(--border); border-radius:10px; padding:12px; margin:0 0 12px; display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
/* A bigger chevron on this screen's dropdowns (Neha, 27 Sep 2026: "make the triangle better") */
#fl-issue select:not([multiple]):not([size]) { background-size:14px 14px !important; padding-right:34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4 6 8.2 10 4' fill='none' stroke='%233E4756' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.fl-fchip .n { display:inline-block; min-width:18px; padding:0 5px; margin-left:3px; border-radius:99px; background:var(--gray-2); color:var(--text); font-size:11px; text-align:center; }
.fl-fchip.red { border-color:#EFC3BD; color:var(--danger); }
.fl-fchip.amber { border-color:#F0D9A8; color:#8A5A00; }
.fl-fchip.zero { opacity:.55; }
.fl-fchip.on { background:var(--text); border-color:var(--text); color:#fff; opacity:1; }
.fl-fchip.on .n { background:rgba(255,255,255,.22); color:#fff; }

/* ── Fleet → Reports, redesigned (27 Sep 2026, #261) ── */
.frp { display:flex; flex-direction:column; gap:16px; }
.frp-news { background:linear-gradient(135deg, #243F29, #3F6B44); color:#fff; border-radius:14px; padding:18px 20px; }
.frp-news-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#CFE3D2; margin-bottom:6px; }
.frp-news-t { font-size:15px; line-height:1.6; }
.frp-news-top { margin-top:10px; font-size:12.5px; color:#DDEBDF; display:flex; flex-wrap:wrap; gap:6px 14px; }
.frp-news-top b { color:#fff; }
.frp-news-b { margin-top:12px; }
.frp-news-b .btn { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.35); }
.frp-tile.bad { border-color:#EFC3BD; }
.frp-tile.bad b { color:var(--danger); }
.frp-pill.red { background:var(--danger-lt); color:var(--danger); }
.frp-pill.amber { background:#FFF4D6; color:#8A5A00; }
.frp-pill.gray { background:var(--gray-2); color:var(--gray-3); }
.frp-pill.green { background:var(--green-lt); color:var(--green); }
.frp-pipe > div.quote, .frp-pipe > div.work_approval { background:#FFF4D6; }
.frp-pipe > div.work { background:var(--info-lt); }
[data-theme="dark"] .frp-pipe > div.quote, [data-theme="dark"] .frp-pipe > div.work_approval, [data-theme="dark"] .frp-pill.amber { background:#3A2F14; color:#F3D58A; }

/* ---- Dev Board (renderWorkBoard) -----------------------------------------
   Board only, read-only, 2026-09-28. The project tabs were underline-style
   buttons, which read as "an odd shadow only at the bottom of every button"
   rather than as tabs -- so they are the app's own filter chips instead
   (.cp-chip is the same shape). */
.wb-wrap { padding:16px 20px 28px; }
.wb-top { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.wb-tally { font-size:13.5px; color:var(--gray-4); }
.wb-tally b { color:var(--text); font-weight:600; }
.wb-amber { color:var(--warn) !important; }
.wb-topright { margin-left:auto; }

.wb-projtabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px; }
.wb-ptab { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border);
  background:var(--card-bg); color:var(--gray-4); border-radius:999px; padding:6px 13px;
  font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit; line-height:1.2; }
.wb-ptab:hover { color:var(--text); }
/* Each system says what is HAPPENING in it, not just how many cards it has:
   what is waiting on a ruling, what is being worked on, what went live, and
   when it last moved (2026-10-03). A pill becomes two lines, so it stops being
   a round chip and becomes a tile. */
.wb-ptab { flex-direction:column; align-items:flex-start; gap:2px; border-radius:9px; padding:6px 11px; }
.wb-ptab-name { display:inline-flex; align-items:center; gap:5px; }
.wb-ptab-sub { font-size:9.5px; font-weight:600; color:var(--gray-4); letter-spacing:.01em; }
.wb-ptab.is-on .wb-ptab-sub { color:var(--green-dk); }
.wb-ptab-when { opacity:.7; font-weight:500; }
.wb-ship { color:var(--green-dk); }
.wb-ptab.is-on { border-color:var(--green); color:var(--green-dk); background:var(--green-lt); font-weight:600; }
.wb-ptab b { font-weight:700; font-size:11px; opacity:.75; }
.wb-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block; }

/* ── Dev Board → Archive (W-1422) ───────────────────────────────────────────
   Cards taken off the board. A panel rather than a sixth column: a dropped card
   has no status a column holds, and nineteen of them would otherwise pile into
   "Waiting on" and read as work somebody is waiting for. */
.wb-arch { display:flex; flex-direction:column; gap:10px; }
.wb-arch-hint { font-size:11.5px; color:var(--gray-4); line-height:1.45; }
.wb-arch-none { font-size:12.5px; color:var(--gray-4); padding:14px 2px; }
.wb-arch-row { display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid var(--border); }
.wb-arch-row:first-child { border-top:0; }
.wb-arch-main { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wb-arch-t { font-size:13px; font-weight:600; color:var(--text); line-height:1.35; }
.wb-arch-s { font-size:11px; color:var(--gray-4); }
.wb-arch-row .wb-mini { flex:0 0 auto; }
@media (max-width:560px){
  .wb-arch-row { align-items:flex-start; flex-wrap:wrap; }
  .wb-arch-main { flex:1 1 100%; }
}

.wb-controls { display:flex; flex-wrap:wrap; gap:9px 14px; align-items:center; margin-bottom:12px; }
.wb-ctl { display:inline-flex; align-items:center; gap:7px; }
.wb-ctl-l { font-size:11.5px; color:var(--gray-4); }
.wb-controls .form-control { width:auto; height:32px; padding:0 9px; font-size:12.5px; }
.wb-controls .wb-search { flex:1 1 180px; min-width:120px; }
.wb-donetoggle { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gray-4); white-space:nowrap; }
.wb-seggroup { display:inline-flex; border:1px solid var(--border); border-radius:999px;
  overflow:hidden; background:var(--card-bg); }
.wb-seg { appearance:none; background:none; border:0; padding:6px 12px; font-size:12.5px;
  color:var(--gray-4); cursor:pointer; font-family:inherit; white-space:nowrap; }
.wb-seg + .wb-seg { border-left:1px solid var(--border); }
.wb-seg.is-on { background:var(--green-lt); color:var(--green-dk); font-weight:600; }

/* Who is carrying what, with their face on it. */
.wb-people { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.wb-pchip { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border);
  background:var(--card-bg); border-radius:999px; padding:4px 11px 4px 4px; font-size:12.5px;
  color:var(--gray-4); cursor:pointer; font-family:inherit; }
.wb-pchip:hover { color:var(--text); }
.wb-pchip.is-on { border-color:var(--green); background:var(--green-lt); color:var(--green-dk); font-weight:600; }
.wb-pchip b { font-weight:700; font-size:11px; background:var(--gray-2); border-radius:9px; padding:1px 6px; }
.wb-pchip.is-on b { background:rgba(255,255,255,.65); }
.wb-nobody-dot { width:20px; height:20px; border-radius:50%; background:var(--gray-2);
  border:1px dashed var(--gray-3); flex:0 0 auto; display:inline-block; }

.wb-swim { margin-bottom:22px; }
.wb-swimhead { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.wb-swimname { font-size:14px; font-weight:600; color:var(--text); }
.wb-swimn { font-size:11.5px; font-weight:600; color:var(--gray-4); background:var(--gray-2);
  border-radius:9px; padding:1px 7px; }
.wb-swimsub { font-size:12px; color:var(--gray-4); }

.wb-board { display:grid; grid-template-columns:repeat(auto-fit, minmax(196px, 1fr)); gap:11px;
  align-items:start; }
.wb-col { background:var(--gray-1); border-radius:10px; padding:9px; min-height:60px; }
.wb-colhead { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  color:var(--gray-4); margin-bottom:9px; padding:0 2px; }
.wb-stdot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.wb-stdot-needs_ruling { background:var(--warn); }
.wb-stdot-blocked      { background:var(--danger); }
.wb-stdot-in_progress  { background:var(--green); }
.wb-stdot-in_review    { background:var(--yellow-dk); }
.wb-stdot-planned      { background:var(--gray-3); }
.wb-stdot-done         { background:var(--gray-3); }
.wb-count { margin-left:auto; background:var(--gray-2); color:var(--gray-4); border-radius:9px;
  padding:1px 7px; font-size:11px; font-weight:700; }
.wb-count.is-over { background:var(--danger-lt); color:var(--danger); }
.wb-empty { font-size:12px; color:var(--gray-3); text-align:center; padding:10px 0; }

.wb-card { background:var(--card-bg); border:1px solid var(--border);
  border-left:3px solid var(--proj, var(--gray-3)); border-radius:8px; padding:9px 10px;
  margin-bottom:7px; cursor:pointer; transition:box-shadow .12s, transform .12s; }
.wb-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.09); transform:translateY(-1px); }
.wb-cardtop { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.wb-kindchip { font-size:10.5px; font-weight:600; border:1px solid transparent; border-radius:5px;
  padding:1px 6px; white-space:nowrap; }
.wb-no { font-size:11px; font-weight:700; color:var(--gray-4); }
/* The name leads, and the ticket number sits beside it rather than above it. */
.wb-cardhead { display:flex; align-items:flex-start; gap:6px; }
.wb-cardhead .wb-tick { margin-left:auto; flex:none; margin-top:1px; }
/* Everything that is not the name, on one quiet line: kind, number, project,
   module, date. Its job is to be skippable. */
.wb-cardline { display:flex; align-items:center; flex-wrap:wrap; gap:4px;
  font-size:10.5px; color:var(--gray-4); margin:4px 0 7px; }
/* Who is on it leads the line; where the card came from is pushed to the far
   right. Tried letting it flow inline instead, to stop it wrapping onto a line
   of its own -- it was worse: left-aligned on its own line it reads as another
   fact about the work, where in the corner it reads as a quiet label. */
.wb-cardline .wb-faces { margin-right:2px; }
.wb-cardline .wb-src { margin-left:auto; padding-left:6px; }
.wb-cardline .wb-kind { font-weight:700; }
.wb-cardline .wb-no { font-size:10.5px; font-weight:700; }
.wb-cardline .wb-when { font-size:10.5px; }
.wb-sep { opacity:.45; }
/* Said only when something is hidden, so it has to read as a state, not decoration. */
.wb-narrow { color:#8A5A00; font-weight:600; }
.wb-clearf { margin-left:7px; border:1px solid #F0D28A; background:#FFF4DB; color:#8A5A00;
  font:inherit; font-size:10.5px; font-weight:700; border-radius:5px; padding:1px 7px; cursor:pointer; }
.wb-clearf:hover { background:#F7E6B8; }
a.wb-tick { text-decoration:none; cursor:pointer; }
a.wb-tick:hover { text-decoration:underline; }
.wb-tick { font-size:10.5px; font-weight:600; background:var(--green-lt); color:var(--green-dk);
  border-radius:5px; padding:1px 5px; margin-left:auto; }
/* Bold, and the biggest thing on the card: it is the only part that says what
   the work actually is (2026-09-29). */
.wb-title { font-size:14px; font-weight:650; line-height:1.3; color:var(--text); flex:1; min-width:0; }
.wb-cardfoot { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.wb-modchip { font-size:10.5px; background:var(--gray-2); color:var(--gray-4); border-radius:5px; padding:1px 6px; }
/* Somebody else is live in this module. Said on the card, before the work,
   because a review request arrives after it. */
.wb-noq { color:#8C2F26; background:#FDECEA; border-color:#F3C2BC; }
.wb-clash { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700;
  color:#8A5A00; background:#FFF4DB; border:1px solid #F0D28A; border-radius:5px;
  padding:2px 7px; margin-bottom:8px; }
/* A card that cannot say what is happening on it. Deliberately QUIETER than
   .wb-clash: a clash is a hazard you must act on before you start, this is the
   board admitting it does not know. Same shape so they stack together. */
.wb-quiet { color:var(--gray-4); background:var(--gray-1, #F4F4F5); border-color:var(--border); font-weight:600; }

/* One thread on a card: notes, commits, the pull request and its comments, in
   the order they happened. Modelled on the helpdesk thread, which is where
   this narrative used to live. */
/* Three streams by where a thing came from, and a banner when they disagree. */
.wbd-streams { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.wbd-stab { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600;
  padding:4px 9px; border:1px solid var(--border); border-radius:7px; background:var(--card, #fff);
  color:var(--gray-4); cursor:pointer; }
.wbd-stab b { font-weight:700; color:var(--gray-4); }
.wbd-stab.is-on { background:var(--green-lt); border-color:var(--green-dk); color:var(--green-dk); }
.wbd-stab.is-on b { color:var(--green-dk); }
.wbd-conflict { font-size:12px; line-height:1.5; color:#8A5A00; background:#FFF4DB;
  border:1px solid #F0D28A; border-radius:8px; padding:8px 10px; margin-bottom:12px; }
.wbd-ev-git    { border-left-color:#8250DF; }
.wbd-ev-claude { border-left-color:var(--warn); }
.wbd-ev-manual { border-left-color:var(--green-dk); }
.wbd-ev.is-flag { border-left-color:#C0483A; background:#FFF6F5; border-radius:0 8px 8px 0;
  padding-top:6px; padding-bottom:6px; padding-right:10px; }
.wbd-story  { display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.wbd-ev     { border-left:2px solid var(--border); padding-left:12px; }
.wbd-evhead { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; color:var(--gray-4); }
.wbd-evhead b { color:var(--text); font-weight:600; }
.wbd-evwhen { margin-left:auto; white-space:nowrap; }
.wbd-evout  { color:var(--green-dk); font-weight:600; text-decoration:none; }
.wbd-evout:hover { text-decoration:underline; }
.wbd-evtitle { font-size:13px; font-weight:600; color:var(--text); margin-top:4px; }
.wbd-evbody { font-size:12.5px; line-height:1.5; color:var(--gray-5, var(--text)); margin-top:4px;
  white-space:normal; overflow-wrap:anywhere; }
.wbd-evbody.is-clipped { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; }
.wbd-evmore { margin-top:3px; padding:0; border:0; background:none; cursor:pointer;
  font-size:11.5px; font-weight:600; color:var(--green-dk); }

/* The branch and its pull request, in GitHub's own marks and colours, because
   these are GitHub's things and everybody already reads them there. */
.wb-branch { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.wb-gh     { flex:none; align-self:center; }
.wb-br, .wb-pr { display:inline-flex; align-items:center; gap:4px; font-size:10.5px;
  font-weight:600; border-radius:5px; padding:2px 6px; text-decoration:none; max-width:100%; }
.wb-br { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; min-width:0;
  background:var(--gray-1); color:var(--gray-4); border:1px solid var(--border); }
.wb-br:hover  { border-color:var(--gray-4); }
.wb-brn       { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-pr-open   { background:#1A7F371F; color:#1A7F37; }
.wb-pr-merged { background:#8250DF1F; color:#8250DF; }
.wb-pr-closed { background:#CF222E1F; color:#CF222E; }
.wb-pr-draft  { background:#59636E1F; color:#59636E; }
.wbd-keys { display:flex; flex-wrap:wrap; gap:12px; }
.wbd-key  { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gray-4); }

.wb-projchip { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600;
  color:var(--gray-4); background:var(--gray-1); border-radius:5px; padding:1px 6px; }
.wb-when { font-size:10.5px; color:var(--gray-4); align-self:center; }
.wb-reporter { font-size:10.5px; color:var(--gray-4); background:var(--gray-1);
  border-radius:5px; padding:1px 6px; }
.wb-refs { font-size:10.5px; color:var(--gray-4); margin-left:auto; }
/* Live holds every item ever finished. The button raises the cap in place. */
.wb-more { width:100%; margin-top:6px; padding:7px; font-size:11.5px; font-weight:600;
  color:var(--green-dk); background:var(--green-lt); border:0; border-radius:7px; cursor:pointer; }
.wb-more:hover { filter:brightness(0.96); }
.wb-dep { font-size:10.5px; color:var(--warn); font-weight:600; width:100%; }

/* The read-only detail. */
.wbd-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.wbd-chip { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; border:1px solid var(--border);
  border-radius:6px; padding:2px 8px; color:var(--gray-4); }
.wbd-who { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); margin-bottom:12px; }
.wbd-notes { font-size:13.5px; line-height:1.5; color:var(--text); background:var(--gray-1);
  border-radius:8px; padding:11px 13px; }
.wbd-empty { color:var(--gray-4); font-size:12.5px; }
.wbd-dep { margin-top:10px; font-size:12.5px; color:var(--warn); background:var(--warn-lt);
  border-radius:6px; padding:7px 10px; }
.wbd-links { margin-top:10px; font-size:12.5px; color:var(--gray-4); }
.wbd-sec { margin-top:16px; margin-bottom:7px; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--gray-4); }
.wbd-devrow { display:flex; align-items:baseline; gap:8px; font-size:12.5px; padding:3px 0; min-width:0; }
.wbd-devrow a { color:var(--green-dk); font-weight:600; text-decoration:none; }
.wbd-devrow a:hover { text-decoration:underline; }
.wbd-devrow code { font-size:11.5px; background:var(--gray-2); border-radius:3px; padding:1px 5px; }
.wbd-devt { color:var(--gray-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wbd-actions { display:flex; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }

.wbl-st { font-size:11.5px; font-weight:600; border-radius:10px; padding:2px 9px; white-space:nowrap; }
.wbl-st-needs_ruling { background:var(--warn-lt);  color:var(--warn); }
.wbl-st-blocked      { background:var(--danger-lt);color:var(--danger); }
.wbl-st-in_progress  { background:var(--green-lt); color:var(--green-dk); }
.wbl-st-planned      { background:var(--gray-2);   color:var(--gray-4); }
.wbl-st-in_review    { background:var(--yellow-lt);color:var(--yellow-dk); }
.wbl-st-done         { background:var(--gray-2);   color:var(--gray-3); }
.wbl-none { padding:48px 20px; text-align:center; color:var(--gray-4); font-size:13.5px; }

@media (max-width: 860px){
  .wb-wrap { padding:12px 14px 24px; }
  .wb-board { grid-template-columns:1fr; }
  .wb-controls .wb-search { flex:1 1 100%; }
}

/* The Dev Board's dev panel: what the repository is doing about a card. */
.wb-devpanel { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.wb-devhead { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--gray-4); margin-bottom:10px; }
.wb-devempty { font-size:12.5px; color:var(--gray-4); line-height:1.45; }
.wb-devsect { margin-bottom:12px; }
.wb-devlabel { display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600;
  color:var(--gray-4); margin-bottom:5px; }
.wb-devrow { display:flex; align-items:baseline; gap:7px; font-size:12.5px; padding:3px 0; min-width:0; }
.wb-devrow code { font-size:11.5px; background:var(--gray-2); border-radius:3px; padding:1px 5px; }
.wb-devrow a { color:var(--green-dk); text-decoration:none; font-weight:600; }
.wb-devrow a:hover { text-decoration:underline; }
.wb-devtitle { color:var(--gray-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wb-devwho { color:var(--gray-3); font-size:11.5px; margin-left:auto; white-space:nowrap; }
.wb-prstate { font-size:10.5px; font-weight:600; border-radius:9px; padding:1px 7px; text-transform:lowercase; }
.wb-prstate-open   { background:var(--green-lt); color:var(--green-dk); }
.wb-prstate-merged { background:#EFE7FD; color:#6B45B8; }
.wb-prstate-closed { background:var(--gray-2); color:var(--gray-4); }

/* Helpdesk worklist, 2026-09-27. Rebuilt from Fiyana's mockups: the queue is
   a list of cards at every width, not a ten-column table that turns into
   cards on a phone. Title leads, the number/kind/person sit under it, age and
   status sit right so they scan down a column. */
.hd-tabs { display:flex; gap:2px; padding:0 16px; border-bottom:1px solid var(--border);
  background:var(--card-bg); overflow-x:auto; }
.hd-tab { appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:12px 12px 10px; font-size:14px; color:var(--gray-4); cursor:pointer; white-space:nowrap;
  display:flex; align-items:center; gap:7px; font-family:inherit; }
.hd-tab:hover { color:var(--text); }
.hd-tab.is-on { color:var(--text); font-weight:600; border-bottom-color:var(--green); }
.hd-tab b { font-weight:600; font-size:11.5px; color:var(--gray-4); background:var(--gray-2);
  border-radius:9px; padding:1px 7px; }
.hd-tab.is-on b { background:var(--green-lt); color:var(--green-dk); }

.hd-seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;
  background:var(--surface-0,#fff); flex:0 0 auto; }
.hd-segbtn { appearance:none; background:none; border:0; padding:6px 12px; font-size:12.5px;
  color:var(--gray-4); cursor:pointer; font-family:inherit; white-space:nowrap; }
.hd-segbtn + .hd-segbtn { border-left:1px solid var(--border); }
.hd-segbtn.is-on { background:var(--green-lt); color:var(--green-dk); font-weight:600; }
.hd-all { display:flex; align-items:center; padding:0 4px; }

.hdq { padding:4px 0 20px; }
.hdq-none { padding:40px 20px; text-align:center; color:var(--gray-4); font-size:13.5px; }
.hdq-band { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gray-4); padding:16px 20px 7px; display:flex; align-items:center; gap:8px; }
.hdq-band b { font-weight:600; letter-spacing:0; }

.hdq-row { display:flex; align-items:flex-start; gap:12px; padding:13px 20px; cursor:pointer;
  border-bottom:1px solid var(--border); background:var(--card-bg); transition:background .1s; }
.hdq-row:hover { background:var(--gray-1); }
.hdq-chk { margin-top:3px; flex:0 0 auto; }
.hdq-ico { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:var(--gray-2);
  display:flex; align-items:center; justify-content:center; font-size:15px; line-height:1; }
.hdq-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hdq-title { font-size:14.5px; line-height:1.35; color:var(--text); font-weight:500; }
.hdq-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  font-size:12px; color:var(--gray-4); }
.hdq-no { font-weight:600; color:var(--gray-4); }
.hdq-cat { background:var(--gray-2); border-radius:5px; padding:1px 7px; }
.hdq-who { display:inline-flex; align-items:center; gap:5px; }
.hdq-av { width:17px; height:17px; border-radius:50%; background:var(--green-lt); color:var(--green-dk);
  font-size:9px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.hdq-right { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  padding-top:1px; }
.hdq-age { font-size:12px; color:var(--gray-4); white-space:nowrap; }
.hdq-age.is-old { color:var(--warn); font-weight:600; }
.hdq-age.is-new { color:var(--green-dk); font-weight:600; }
.hdq-st { font-size:11px; font-weight:600; white-space:nowrap; color:var(--c);
  display:inline-flex; align-items:center; gap:5px; }
.hdq-st::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c); }

@media (max-width: 760px){
  .hd-tabs { padding:0 12px; }
  .hd-tab { padding:11px 9px 9px; font-size:13.5px; }
  /* The filter row is one non-wrapping flex line, so on a phone the kind
     control took its share and the search was crushed to a sliver. */
  #hd-filters { flex-wrap:wrap !important; }
  .hd-seg { width:100%; }
  .hd-segbtn { flex:1; text-align:center; }
  #hd-filters > input { flex:1 1 100% !important; min-width:0 !important; }
  #hd-filters > select { flex:1 1 calc(50% - 4px) !important; min-width:0 !important; }
  .hdq-band { padding:14px 14px 6px; }
  .hdq-row { padding:12px 14px; gap:10px; }
  /* Age and status go under the meta line rather than squeezing the title. */
  .hdq-right { flex-direction:row; align-items:center; gap:10px; }
  .hdq-row { flex-wrap:wrap; }
  .hdq-body { flex:1 1 100%; order:2; }
  .hdq-right { order:3; flex:1 1 100%; justify-content:flex-start; padding-left:42px; }
}

/* A vehicle ticket leads with its plate, not its machine-written title
   ("Issue | KA01MP8108 | High — Check 27 Sep 2026: 1. GENERAL SERVICE…").
   The plate is what anybody actually looks for. */
.hdq-plateline { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.hdq-plate { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; font-weight:700;
  letter-spacing:.04em; color:var(--text); border:1.5px solid var(--text); border-radius:4px;
  padding:1px 7px; white-space:nowrap; }
.hdq-pri { font-size:11px; font-weight:700; text-transform:none; }
.hdq-pri-urgent { color:var(--danger); }
.hdq-pri-high   { color:var(--warn); }
.hdq-pri-normal { color:var(--gray-4); }
.hdq-pri-low    { color:var(--gray-3); }

/* Notes on an item, and the one editable control beside them. */
.wbd-person { width:auto; height:30px; padding:0 8px; font-size:13px; }
.wbd-note { border-left:2px solid var(--border); padding:2px 0 8px 10px; margin-bottom:9px; }
.wbd-notehead { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--gray-4); margin-bottom:4px; }
.wbd-notewhen { margin-left:auto; }
.wbd-notebody { font-size:13px; line-height:1.45; color:var(--text); }
/* wrap, so the ask below can take a row of its own above the box */
.wbd-addnote { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:10px; }
.wbd-addnote textarea { flex:1; font-size:13px; }
/* Asked for at the moment it is wanted, rather than in a document nobody has
   open. 26 of 35 open cards had no note the day after the rule was written. */
.wbd-asknote { flex-basis:100%; font-size:12px; line-height:1.45; color:#8A5A00;
  background:#FFF4DB; border:1px solid #F0D28A; border-radius:6px; padding:7px 10px; }
.wb-mini { height:32px; padding:0 13px; font-size:12.5px; }
.wbd-help p { font-size:13.5px; line-height:1.55; color:var(--text); margin-bottom:12px; }
.wbd-help code { font-size:12px; background:var(--gray-2); border-radius:3px; padding:1px 5px; }
.wb-faces { display:inline-flex; align-items:center; }
.wb-faces > * + * { margin-left:-6px; box-shadow:0 0 0 1.5px var(--card-bg); border-radius:50%; }
.wb-facemore { font-size:10px; font-weight:700; color:var(--gray-4); margin-left:2px; }
.wb-src { font-size:10px; color:var(--gray-4); margin-left:auto; white-space:nowrap; }
.wb-src-claude { color:var(--warn); }
.wb-src-git { color:var(--green-dk); }
.wbd-people { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:10px; }
.wbd-person-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border);
  border-radius:999px; padding:3px 6px 3px 3px; font-size:12.5px; }
.wbd-x { appearance:none; border:0; background:none; color:var(--gray-4); cursor:pointer;
  font-size:14px; line-height:1; padding:0 2px; font-family:inherit; }
.wbd-x:hover { color:var(--danger); }
.wbd-src { font-size:11.5px; color:var(--gray-4); margin-bottom:12px; }
.wbd-prompt { background:var(--gray-1); border:1px solid var(--border); border-radius:8px;
  padding:12px; font-size:11.5px; line-height:1.5; white-space:pre-wrap; overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text); }
.wb-stdot-conflict   { background:var(--danger); }
.wbl-st-conflict     { background:var(--danger-lt); color:var(--danger); }

/* ── The item search on a requisition ─────────────────────────────────────────
   A <datalist> was here and could not stay: it shows one line per option, and
   the line that tells two similar items apart is the second one. "Syringe -
   3 ml" and "Syringe - 5 ml" read the same until the category is under them.
   Built on .ib-ev-row's shape rather than a new one -- same element, padding
   and hover as every other list of things you can tap in this app. */
.fi-list { margin-top:4px; max-height:280px; overflow-y:auto;
           border:1px solid var(--border); border-radius:8px;
           background:var(--surface, #fff); }
.fi-opt  { display:block; width:100%; text-align:left; background:none; border:0;
           border-bottom:1px solid var(--border); border-radius:0;
           font:inherit; cursor:pointer; padding:8px 10px; }
.fi-opt:last-child      { border-bottom:0; }
.fi-opt:hover           { background:var(--gray-2); }
.fi-opt:focus-visible   { background:var(--gray-2); outline:none;
                          box-shadow:inset 3px 0 0 var(--olive); }
.fi-n    { display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.fi-m    { display:block; font-size:11.5px; color:var(--gray-4); margin-top:1px; }

/* ── Outreach Log: collapsible sections (29 Sep 2026, W-1451) ── */
/* Each section is a <details>; the arrow is drawn in the summary itself, so the
   browser's own marker (Safari keeps it even under display:flex) is hidden. */
.or-section > summary::-webkit-details-marker { display:none; }
.or-section > summary::marker { content:""; }

/* ── W-1764: phone polish from the 7 Oct 2026 browser QA ────────────────────
   The status band fills the bar edge to edge: flex-basis 100% is the bar's
   content width, so the -12px margins could not widen it and it stopped 24px
   (the bar's two 12px paddings) short of the right edge. */
#mobile-status-band { flex-basis:calc(100% + 24px); }
.th-s { display:none; }
.th-seg-o { white-space:nowrap; }
/* Rows that scroll sideways with their scrollbar hidden fade at the right edge,
   so the last chip reads as "more this way", not as cut off. */
@media (max-width: 899px) {
  .inbox-strip, .hd-dash-c { -webkit-mask-image:linear-gradient(to right, #000 86%, transparent);
                             mask-image:linear-gradient(to right, #000 86%, transparent); padding-right:28px; }
}
@media (max-width: 600px) {
  .inbox-h1 { font-size:20px; line-height:1.25; }
  .th-l { display:none; } .th-s { display:inline; }
  /* the select-all box sits beside the streams, not alone on a line of its own */
  #hd-filters { flex-wrap:wrap; }
  #hd-filters .hd-seg { order:1; flex:1 1 0; }
  #hd-filters .hd-all { order:2; }
  #hd-filters > :not(.hd-seg):not(.hd-all) { order:3; }
}

/* ── W-1761: the vendor picker on a requisition ───────────────────────────── */
.vpick { position:relative; }
.vpick-list { position:absolute; z-index:60; left:0; right:0; top:calc(100% + 4px); background:var(--card-bg, #fff);
  border:1px solid var(--border); border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.12); max-height:320px; overflow:auto; padding:4px; }
.vpick-opt { display:flex; flex-direction:column; align-items:flex-start; gap:1px; width:100%; text-align:left; border:0; background:none;
  padding:8px 10px; border-radius:8px; cursor:pointer; font:inherit; color:var(--text); }
.vpick-opt:hover, .vpick-opt.on { background:var(--gray-1, #F7F9FB); }
/* W-1777: a kind of thing (class › type) found from the words typed, below the matching items */
.vpick-kind .vpick-n { color:var(--green-dk, #2F6B4F); }
.vpick-opt:not(.vpick-kind) + .vpick-kind { border-top:1px solid var(--border); }
.vpick-n { font-weight:600; font-size:13px; } .vpick-s { font-size:11.5px; color:var(--gray-4); }
.fin-row2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:8px; }

#fr-nv-gstin::placeholder { text-transform:none; }

/* ── W-1767: one card per vendor on a requisition, each with its own documents ── */
.fin-sect .fin-in::placeholder { text-transform:none; }
.vcard { border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--card-bg, #fff); }
.vcard.pref { border-color:var(--green); box-shadow:inset 3px 0 0 var(--green); }
.vcard-h { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.vcard-t { font-weight:700; font-size:13px; margin-right:auto; }
.vcard-pref { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text); cursor:pointer; }
.vcard-pref input { margin:0; }
.vcard-x { font-size:12px; }
.vcard-docs { margin:10px 0 8px; display:flex; flex-direction:column; gap:6px; }
.vcard-doc { display:flex; align-items:center; gap:8px; font-size:12.5px; flex-wrap:wrap; }
.vcard-dn { min-width:0; overflow-wrap:anywhere; }
.vcard-add { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto; gap:8px; align-items:center; }
.vcard-add .fin-in[hidden] { display:none; }
.vcard-attach { cursor:pointer; white-space:nowrap; justify-content:center; border:1px solid var(--border); background:var(--gray-1, #F7F9FB); }
@media (max-width:640px){ .vcard-add { grid-template-columns:1fr 1fr; } .vcard-attach { grid-column:1 / -1; } }