/* ============================================================================
   Chief360.Ui — shared design system (v0.7)
   Owned by the Watch Desk workstream. Consumed by Blazor surfaces (Watch Desk
   WASM, HQ Server, Dashboard360 Blazor, Commander MAUI-Blazor-Hybrid).
   Native surfaces (WPF, native iOS/Android) implement the TOKENS in §:root.
   Served at: _content/Chief360.Ui/chief360.css
   v0.6 includes: form kit, single-content toolbar + segmented switcher, user menu,
   .agencyhead{margin:0}, nav colours tokenised (--menuoff/--menuon/--menusub), ShowCaret.
   v0.6.1: page-title (h1) no longer shows a focus ring after a keyboard refresh.
   v0.6.2: form labels bold + navy (--label token); nav-label class .lbl -> .navlbl (was
           colliding with host .lbl). Form kit stays .c3-* scoped.
   ============================================================================ */

/* ============================================================================
   WATCH DESK — application shell (rev 2)
   Changes: top bar + strong headers now BLACK (less dark-blue); blue kept to the
   sidebar + accents; real Chief360 logo; "Watch Desk" wordmark; agency banner is
   now a photo slot with a legibility scrim + logo coin (solid-color fallback).
   Every component hand-built — seed for the in-house Blazor component set.
   ========================================================================== */
:root{
  --black:#0D0D10;            /* top bar + strong inner headers */
  --navy:#13233D;             /* the single navy accent: breadcrumb band */
  --side:#1565B0; --side-2:#0E5197; --side-hi:#1E76C7;
  --menuoff:#dceaf7; --menuon:#ffffff; --menusub:#cfe3f5; /* nav text: inactive / active+hover / sub-item */
  --agency:#E8731C; --agency-2:#cf6315;
  --surface:#EDF0F5; --card:#FFFFFF; --input-bg:#FFFFFF; --line:#D9DFE8; --line-2:#E7ECF2;
  --text:#1B2531; --muted:#5A6775; --muted-2:#93A0AE; --label:#1a3a5c; /* field labels */
  /* --muted darkened from #6A7787 to #5A6775. The old value measured 4.56:1 on white —
     it PASSED AA (4.5:1) but only just; the new value is 5.78:1. --muted is used at 11-12px
     where the margin matters most, so the headroom is worth having. Not a fix for a failure. */
  --orange:#E8731C; --orange-soft:#FBEEDE; --orange-ink:#b85f12;
  --ok:#159A4C; --under:#CE3B3B; --over:#2563EB; --amber:#E0AC44;
  --shiftA:#CE3B3B; --shiftB:#2D7DD2; --shiftC:#159A4C; --shiftD:#E0AC44;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --r:8px; --shadow:0 1px 2px rgba(16,23,38,.06),0 6px 18px rgba(16,23,38,.08);
}
/* Base scoped to the app root so the library never restyles the host's <html>/<body>
   or the global `*`. Tokens (:root) stay global so native/other consumers can read them.
   (Full class-name prefixing is deferred deliberately — see README — to avoid changing
   the approved visuals; everything renders inside `.app`, so scoping the base is enough.) */
html,body{margin:0;padding:0}   /* app shell fills the viewport — no edge gap */
.app,.app *{box-sizing:border-box}
.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;
  font-family:var(--sans);color:var(--text);background:var(--surface);
  font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.app button{font-family:inherit}
.app :focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* Blazor <FocusOnNavigate Selector="h1"> focuses the page title (tabindex=-1) after each navigation for
   screen readers. Keep that behaviour, but don't paint a ring on it — otherwise a keyboard refresh (F5)
   leaves the title outlined until the pointer moves. Interactive elements above still show the ring. */
.app h1:focus,.app h1:focus-visible,
.app [tabindex="-1"]:focus,.app [tabindex="-1"]:focus-visible{outline:none}

/* ---- top app bar: BLACK + orange stripe ---- */
.appbar{background:var(--black);color:#fff;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:58px;flex:none;border-bottom:3px solid var(--orange)}
.ham{width:36px;height:36px;border:0;background:transparent;border-radius:7px;display:grid;place-items:center;cursor:pointer;color:#cdd7e6}
.ham:hover{background:#1d1d22;color:#fff}.ham svg{width:18px;height:18px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:27px;display:block}
.brand .divider{width:1px;height:24px;background:#ffffff2b}
.brand .product{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e7edf4}
.brand .product .wd-accent{color:var(--orange)}
.appbar .spacer{flex:1}
.appbar .iconbtn{width:36px;height:36px;border:0;background:transparent;border-radius:8px;color:#cdd7e6;cursor:pointer;display:grid;place-items:center;position:relative}
.appbar .iconbtn:hover{background:#1d1d22;color:#fff}
.appbar .iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.who{display:flex;align-items:center;gap:9px;color:#cdd7e6;font-size:12.5px;padding-left:6px}
.who .avatar{width:30px;height:30px;border-radius:50%;background:#2a2a30;display:grid;place-items:center;font-size:11px;color:#dbe6f4;font-weight:700}

.body{flex:1;display:flex;min-height:0}

/* ---- sidebar (blue stays — it's the identity) ---- */
.sidebar{width:240px;flex:none;background:var(--side);color:#fff;display:flex;flex-direction:column;transition:width .18s ease;position:relative;z-index:30}
.app.collapsed .sidebar{width:60px}

/* ---- agency header: compact solid block + logo coin (switcher) ----
   Photo idea dropped (couldn't read well across every agency logo). Solid,
   shorter, minimal orange — just a 3px accent that echoes the top-bar stripe. */
.agencyhead{position:relative;margin:0;border-bottom:3px solid var(--agency)}
.agencybtn{width:100%;border:0;cursor:pointer;text-align:left;background:var(--side-2);color:#fff;
  display:flex;align-items:center;gap:11px;padding:11px 12px}
.agencybtn:hover{background:#0c4d8f}
.agencybtn .coin{width:38px;height:38px;border-radius:50%;background:#fff;flex:none;display:grid;place-items:center;color:var(--side);font-weight:800;font-size:10.5px;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.agencybtn .meta{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.agencybtn .meta .n{display:block;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agencybtn .meta .s{display:block;font-size:11px;color:#cfe0f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agencybtn .caret{flex:none;transition:transform .15s}
.agencyhead.open .agencybtn .caret{transform:rotate(180deg)}
.app.collapsed .agencybtn{justify-content:center;padding:9px 0}
.app.collapsed .agencybtn .meta,.app.collapsed .agencybtn .caret{display:none}
/* agency dropdown menu */
.agencymenu{display:none;position:absolute;top:100%;left:8px;right:8px;background:var(--card);color:var(--text);border-radius:10px;box-shadow:var(--shadow);z-index:60;overflow:hidden;margin-top:6px}
.agencyhead.open .agencymenu{display:block}
.agencymenu .search{padding:9px 11px;border-bottom:1px solid var(--line)}
.agencymenu .search input{width:100%;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font:inherit}
.agencymenu .opt{padding:9px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px}
.agencymenu .opt:hover{background:var(--orange-soft)}
.agencymenu .opt.cur{font-weight:700}
.agencymenu .opt .tick{margin-left:auto;color:var(--ok)}
.agencymenu .opt .ori{margin-left:auto;color:var(--muted);font-family:var(--mono);font-size:11px}

/* ---- nav ---- */
.nav{flex:1;overflow-y:auto;padding:6px 0}
.nav::-webkit-scrollbar{width:8px}.nav::-webkit-scrollbar-thumb{background:#ffffff33;border-radius:8px}
/* Work-in-progress marker on a nav row. Only Chief 360 staff ever see a row carrying this — an agency
   user does not get the item at all — so it is a reminder to the person demoing, not a warning to a
   client. Amber rather than red: unfinished is not broken, and red next to a nav label reads as an
   error in the product. Rides on margin-left:auto so it sits right of the label and left of any badge. */
.navwip{margin-left:auto;flex:0 0 auto;font-size:9.5px;font-weight:800;letter-spacing:.6px;
        line-height:1;padding:3px 5px;border-radius:4px;
        background:rgba(224,168,0,.18);color:var(--amber,#e0a800);border:1px solid rgba(224,168,0,.35)}
/* In the collapsed rail the label is hidden, so the badge would float oddly — shrink it to a dot. */
.rail .navwip{margin-left:0;padding:0;width:6px;height:6px;border-radius:50%;
              border:0;background:var(--amber,#e0a800);color:transparent;overflow:hidden}
.navitem{display:flex;align-items:center;gap:13px;padding:10px 16px;color:var(--menuoff);cursor:pointer;font-size:13.5px;font-weight:600;border-left:3px solid transparent;white-space:nowrap;position:relative;user-select:none}
.navitem .ico{width:18px;flex:none;display:grid;place-items:center;opacity:.92}
.navitem .navlbl{flex:1}
.navitem .chev{transition:transform .15s ease;opacity:.7}
.navitem:hover{background:var(--side-hi);color:var(--menuon)}
.navgroup.on > .navitem,.navitem.active{background:var(--side-2);color:var(--menuon);border-left-color:var(--orange)}
/* colour hardened at .sidebar specificity so a host rule can't override it (inactive #dceaf7, active #fff) */
.sidebar .navitem{color:var(--menuoff)}
.sidebar .navgroup.on > .navitem,.sidebar .navitem.active,.sidebar .navitem:hover{color:var(--menuon)}
.navgroup.open > .navitem .chev{transform:rotate(90deg)}
.subnav{max-height:0;overflow:hidden;transition:max-height .2s ease;background:#0f5aa0}
/* AN OPEN GROUP MUST NOT CLIP ITS OWN CHILDREN. This was max-height:320px against the master template's
   420px — I ported the wrong number — and .subnav is overflow:hidden, so Scheduling's eleven children
   were cut off after about the eighth with NO scrollbar and nothing on screen to say there was more
   (Brooks, 2026-10-21: "I can't get to the menu items past Timesheets & Payroll").

   NOT FIXED BY RAISING IT TO 420. That is the same bug with a larger number: ~35px a row means 420 holds
   twelve, so the twelfth nav item anyone adds breaks it again, silently, in the same way. A magic pixel
   count that encodes "how many children a group is allowed" is the wrong mechanism.

   So: a viewport-relative ceiling that no realistic group reaches, and overflow-y:auto so that if one
   ever does, it SCROLLS instead of vanishing. max-height stays a length rather than `none` because the
   open/close transition needs one to animate against. */
.navgroup.open > .subnav{max-height:70vh;overflow-y:auto}
.subnav .navitem{padding:8px 16px 8px 50px;font-size:12.5px;font-weight:500;color:var(--menusub);border-left:3px solid transparent}
.subnav .navitem:hover{background:#1463ac;color:var(--menuon)}
.subnav .navitem.active{background:#0d4f8e;color:var(--menuon);border-left-color:var(--orange)}
.app.collapsed .navitem{justify-content:center;padding:11px 0}
.app.collapsed .navitem .navlbl,.app.collapsed .navitem .chev{display:none}
.app.collapsed .subnav{max-height:0!important}
.app.collapsed .navgroup{position:relative}
.app.collapsed .navgroup:hover > .subnav{display:block;max-height:none!important;position:absolute;left:60px;top:0;width:208px;background:var(--side-2);box-shadow:var(--shadow);border-radius:0 8px 8px 0;z-index:70;padding:6px 0}
.app.collapsed .navgroup:hover > .subnav .navitem{padding:9px 16px;justify-content:flex-start}
.app.collapsed .navgroup:hover > .subnav .navitem .navlbl{display:block}
.app.collapsed .navgroup:hover > .subnav::before{content:attr(data-title);display:block;color:#9fc4e8;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:4px 16px 6px;font-weight:700}
.app.collapsed .navleaf:hover .tip{display:block}
.tip{display:none;position:absolute;left:60px;top:50%;transform:translateY(-50%);background:var(--black);color:#fff;padding:5px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:75;box-shadow:var(--shadow)}

/* ---- main ---- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.crumbbar{background:var(--navy);color:#fff;height:46px;flex:none;display:flex;align-items:center;padding:0 16px}
.crumb{display:flex;align-items:center}
.crumb .home{background:var(--black);color:#fff;display:grid;place-items:center;height:30px;padding:0 12px;border-radius:6px 0 0 6px}
.crumb .seg{clip-path:polygon(0 0,84% 0,100% 50%,84% 100%,0 100%);background:var(--side);color:#fff;font-weight:700;font-size:13px;height:30px;display:flex;align-items:center;padding:0 26px 0 16px;margin-left:-6px}
.crumbbar .right{margin-left:auto;display:flex;align-items:center;gap:10px;color:#cdd7e6;font-size:12px}

/* title bar: BLACK, orange title, no agency name (it's under the logo) */
.titlebar{background:var(--black);padding:13px 18px;display:flex;align-items:center;gap:14px;flex:none}
.titlebar h1{margin:0;color:var(--orange);font-size:19px;font-weight:800;letter-spacing:.3px}
/* THE SUBTITLE. This rule was in the master template all along and was never ported here, so every page
   that passes Chief360PageHeader a Subtitle rendered it in the default INK colour on the black band —
   dark on dark, invisible, on every area of the portal at once (Brooks, 2026-10-21, Radio Alert).
   Same failure as a missing icon key: the markup was right, the name resolved to no rule, and nothing
   errored. Copied verbatim from Chief360_Master_Template.html line 145. */
.titlebar .sub{color:#9aa7b5;font-size:12.5px}
.titlebar .acts{margin-left:auto;display:flex;gap:8px}
/* A select beside a button stretched to the button's height, and the button wrapped to three lines (Manager Board, 2026-10-28). */
.titlebar .acts{align-items:center}
.titlebar .acts .btn{white-space:nowrap}

.btn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--orange);color:var(--orange-ink)}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
/* Approve / acknowledge (green) and reject (red), as the Newsroom mockup draws them. */
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{background:var(--card);border-color:var(--under);color:var(--under)}
.btn.ok:disabled,.btn.danger:disabled{opacity:.55;cursor:not-allowed}
.btn.primary:hover{filter:brightness(1.05);color:#fff}
/* A BUTTON THAT READS AS A LINK. For a secondary action inside a popover or a footer — "Reset
   filters", "Clear" — where a bordered .btn competes with the real control beside it. It is a
   <button> and not an <a href="#">, because an action is not a destination: a link that does not go
   anywhere is wrong for a keyboard and wrong for a screen reader.
   Added because the Shift Board's "Reset filters" was using this name with no rule behind it, and
   rendered as a native grey browser button. */
.c3-linkbtn{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--over);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.c3-linkbtn:hover{color:var(--orange-ink)}
.c3-linkbtn:disabled{opacity:.6;cursor:not-allowed;text-decoration:none}

.content{flex:1;overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.content.flush{padding:0}      /* opt out of outer padding */
.content.tight{gap:0}          /* opt out of the between-block rhythm */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;max-width:1280px}
/* flex-shrink:0 IS LOAD-BEARING. A .w inside .content is a flex item in a column container, and
   .w sets overflow:hidden — which per spec DISABLES the automatic minimum size (min-height:auto
   applies only while overflow is visible). Without this the card is free to be compressed below its
   own content and then clips the overflow silently: Brooks set a kiosk PIN and the "your PIN is set"
   confirmation was cut in half by the card's bottom edge, with no scrollbar to suggest anything was
   missing. Ignored where .w is a grid item, so dashboards are unaffected. */
.w{grid-column:span 4;flex-shrink:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden}
/* span3 and span4 were MISSING, and the gap was invisible because .w already defaults to span 4:
   span4 worked by accident, and span3 silently rendered as 4. Time Off asks for four balance cards
   across one 12-column row and got 3 + 1 wrapped. A 12-column grid that defines 6, 8 and 12 but not
   its own divisors is an invitation to write a class that does nothing. */
.w.span3{grid-column:span 3}.w.span4{grid-column:span 4}
.w.span6{grid-column:span 6}.w.span8{grid-column:span 8}.w.span12{grid-column:span 12}
/* span5 / span7 (2026-11-06): the 5 + 7 pair the Dashboards and Open Shifts mockups use; both rendered as 4. */
.w.span5{grid-column:span 5}.w.span7{grid-column:span 7}
/* inner widget headers now BLACK */
.w-head{background:var(--black);color:#fff;display:flex;align-items:center;gap:9px;padding:9px 13px;font-size:13px;font-weight:700}
.w-head .ic{color:var(--orange)}
.w-head .more{margin-left:auto;color:#9aa3ad;cursor:pointer}.w-head .more:hover{color:#fff}
/* source-module tag: says which module a widget came from once it is on Home */
.w-head .src{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.05em;color:#aeb7c2;text-transform:uppercase;background:#20222b;padding:2px 7px;border-radius:4px}
.w-body{padding:12px 13px;flex:1}
.w-foot{border-top:1px solid var(--line-2);padding:8px 13px;font-size:12px}
.w-foot a{color:var(--side);text-decoration:none;font-weight:600}
.row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}.row .ttl{font-weight:600}.row .meta{color:var(--muted);font-size:12px}
/* Count badge (Chief360Badge). One look everywhere: the difference between a nav count and a button
   count is placement and label, never fill. --under is the platform's attention red. */
.c3-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;border-radius:20px;background:var(--under);color:#fff;font-size:10.5px;font-weight:800;
  line-height:1;white-space:nowrap;flex:none}
.c3-badge.dot{min-width:9px;width:9px;height:9px;padding:0}
/* On a nav row it sits at the end; collapsed, the rail has no room for digits, so any badge there becomes
   a dot on the icon rather than vanishing with the label (Chat Room, bus 1963). */
.navitem .c3-badge{margin-left:auto}
.app.collapsed .navitem .c3-badge{position:absolute;top:7px;right:calc(50% - 16px);margin-left:0;
  min-width:9px;width:9px;height:9px;padding:0;font-size:0;border:2px solid var(--side)}
.app.collapsed .navitem .c3-badge > *{display:none}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap}
.pill.red{background:#fbe4e1;color:var(--under)}.pill.amber{background:#FFF4D6;color:#9A6A12}
.pill.green{background:#e1f3e9;color:var(--ok)}.pill.blue{background:#e6f0fb;color:var(--over)}
/* purple and grey: the two every portal was writing for itself. File Share's mockup uses purple for
   legal-hold entries so they cannot be mistaken for the blue access changes beside them, and grey had
   already been added to watchdesk.css because Chief360Pill documented a colour the stylesheet did not
   have — an unrecognised Color renders an UNSTYLED pill, silently. */
.pill.purple{background:#efe9fb;color:#6D4AC7}
.pill.grey{background:var(--line-2);color:var(--muted)}
.shiftdot{width:9px;height:9px;border-radius:50%;flex:none}
.inc{display:grid;grid-template-columns:84px 1fr;border-bottom:1px solid var(--line-2)}
.inc:last-child{border-bottom:0}
.inc .t{padding:8px;font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.inc .n{background:var(--under);color:#fff;padding:8px 10px;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:space-between}
.inc .n .addr{font-weight:400;font-size:11px;opacity:.92}
.ql{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ql a{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);font-weight:600;font-size:12.5px}
.ql a:hover{border-color:var(--orange);background:var(--orange-soft)}
.ql a .ic{width:30px;height:30px;border-radius:7px;background:#E7F0FA;color:var(--side);display:grid;place-items:center;flex:none}
.health{display:flex;flex-direction:column;gap:9px}
.health .hr{display:flex;align-items:center;gap:10px}
.health .hr .nm{width:78px;font-weight:600;font-size:12.5px}
.health .hr .bar{flex:1;height:9px;border-radius:6px;background:#eef2f7;overflow:hidden}
.health .hr .bar i{display:block;height:100%;border-radius:6px}
.health .hr .ct{width:42px;text-align:right;font-family:var(--mono);font-size:12px}
/* table — black header */
.table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.table thead th{background:var(--black);color:#fff;text-align:left;font-size:12px;font-weight:700;padding:11px 13px}
.table tbody td{padding:10px 13px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.table tbody tr:hover{background:#f6f9fd}
.table .natcell{background:var(--under);color:#fff;font-weight:700}
.table .link{color:var(--side);font-weight:600}

/* dialog — black header, orange title, tabs */
.scrim{position:fixed;inset:0;background:rgba(8,14,24,.55);display:none;align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow:auto}
.scrim.open{display:flex}
.dialog{width:min(880px,100%);background:var(--card);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(8,14,24,.4)}
.dlg-head{background:var(--black);color:#fff;display:flex;align-items:center;padding:14px 18px}
.dlg-head h2{margin:0;color:var(--orange);font-size:16px;font-weight:800;letter-spacing:.3px}
.dlg-head .x{margin-left:auto;background:transparent;border:0;color:var(--orange);font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:7px}
.dlg-head .x:hover{background:#1d1d22}
/* Optional icon + subtitle (Chief360Dialog Icon/Subtitle) and width modifiers (Class). */
.dlg-head .dlg-ic{color:var(--orange);margin-right:10px;display:inline-flex}
.dlg-head .dlg-ic svg{width:18px;height:18px}
.dlg-titles{min-width:0}
.dlg-sub{color:#aeb7c2;font-size:12px;margin-top:2px}
.dialog.wide{width:min(960px,100%)}
.dialog.sm{width:min(520px,100%)}
.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 8px;gap:2px;overflow-x:auto}
.tab{border:0;background:transparent;padding:13px 16px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap}
.tab:hover{color:var(--text)}.tab.on{color:var(--side);border-bottom-color:var(--orange)}
.tabpane{display:none;padding:18px}.tabpane.on{display:block}
.dlg-body{padding:18px;display:flex;flex-direction:column;gap:14px}  /* default dialog body padding */
/* Dialog action row — the LAST child of the dialog's content, not a component parameter.
   Chief360Dialog deliberately has exactly one RenderFragment: the moment a Blazor component has two,
   every caller must wrap its body in an explicit <ChildContent>, and there are 53 usages across 26
   files including other chats' pages. A class costs nothing and breaks nobody.
   Right-aligned so the confirming button lands where the eye finishes reading. */
.dlg-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;
          margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:9px 22px;font-size:13px}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}

/* span3 collapses to 6 with everything else: four cards across is unreadable on a narrow screen, and
   three-column cards are the first thing to break when the grid narrows. */
@media (max-width:1100px){.w,.addw,.w.span3,.w.span4,.w.span5,.w.span7{grid-column:span 6}.w.span8{grid-column:span 12}}
@media (max-width:720px){.w,.addw,.w.span3,.w.span4,.w.span6,.w.span8{grid-column:span 12}.sidebar{position:absolute;height:100%}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================================
   RESPONSIVE & MOBILE (shared) — desktop = collapsible rail; mobile = drawer
   ============================================================================ */
.navscrim{display:none}
@media(max-width:1024px){
  /* sidebar leaves the layout and becomes an off-canvas drawer */
  .sidebar{position:fixed;top:58px;bottom:0;left:0;z-index:80;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--shadow)}
  .app.drawer-open .sidebar{transform:none}
  .app.collapsed .sidebar{width:240px}          /* ignore desktop collapse on mobile */
  .app.collapsed .navitem{justify-content:flex-start;padding:10px 16px}
  .app.collapsed .navitem .navlbl,.app.collapsed .navitem .chev{display:none!important}
  .app.collapsed .navitem .navlbl{display:block!important}
  .navscrim{position:fixed;inset:58px 0 0 0;background:rgba(8,14,24,.5);z-index:75;display:none}
  .app.drawer-open .navscrim{display:block}
  .brand .product{display:none}                  /* condense top bar */
  .who span:first-child{display:none}            /* hide name, keep avatar */
  .titlebar{flex-wrap:wrap}
  .grid{grid-template-columns:1fr}
  /* ONE COLUMN MEANS FULL WIDTH (2026-11-05): a span6/span12 left on a one-column grid adds implicit auto
     columns, and they collapse unevenly: a span6 card drew at 80px beside a 647px one. */
  .grid > *,.grid > .w[class*=span]{grid-column:1 / -1}
  .dialog{width:100%;min-height:calc(100vh - 80px);border-radius:0}  /* full-screen */
}
@media(max-width:560px){
  .crumbbar .right{display:none}                 /* breadcrumb: keep current crumb only */
  .titlebar .sub{display:none}                   /* phone: the title alone (master template line 359) */
}

/* DataTable card-stack mode (opt-in): set .table.cards on narrow read-heavy lists */
@media(max-width:720px){
  .table.cards thead{display:none}
  .table.cards tbody tr{display:block;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;background:var(--card)}
  .table.cards tbody td{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line-2)}
  .table.cards tbody td::before{content:attr(data-label);color:var(--muted);font-weight:600}
}

/* ============================================================================
   ICONS (Feather/Lucide style — the set the team approved) + TABLE SCROLL
   ============================================================================ */
.c3-ico{width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.navitem .c3-ico{width:19px;height:19px}
/* horizontal-scroll container for dense tables (desktop overflow + mobile) */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
.table-wrap .table{border-radius:0;border:0}


/* ============================================================================
   DAY / NIGHT — the chrome (black bar, blue rail, navy crumb, orange accent)
   stays; the CONTENT pane flips. Driven by data-theme on the .app root, which the
   Layout resolves from the user's saved choice, else the OS preference (auto).
   ============================================================================ */
.app[data-theme="dark"]{
  --surface:#0F141B;   /* page background */
  --card:#171E27;      /* cards, panels, table, dialog, dropdown */
  --input-bg:#0F141B;  /* inputs sit inset from the card */
  --line:#2A333F;
  --line-2:#222A34;
  --text:#E6EDF3;
  --muted:#8B97A6;
  --muted-2:#6C7887;
  --label:#dfe7f1;
  --orange-soft:#3A2A16;   /* dark tint for orange hover fills */
  /* --orange-ink is the text that sits ON --orange-soft. Flipping the fill and not the ink left
     #b85f12 on #3A2A16 — dark brown on dark brown, about 2.5:1 — anywhere the pair is used
     together, which is every open-position chip on the Shift Board. A token pair has to flip as a
     pair. #E8A866 measures 6.3:1 on the night fill and 7.7:1 on --card. */
  --orange-ink:#E8A866;
}
/* light tints that don't come from a token need a night variant */
.app[data-theme="dark"] .pill.red{background:#3A1F1C;color:#F0A79B}
.app[data-theme="dark"] .pill.amber{background:#3A2F16;color:#E6C072}
.app[data-theme="dark"] .pill.purple{background:#241B3C;color:#B49BEE}
.app[data-theme="dark"] .pill.green{background:#16311F;color:#6FD39B}
.app[data-theme="dark"] .pill.blue{background:#16263B;color:#7BB0EE}
.app[data-theme="dark"] .ql a .ic{background:#17293B}
.app[data-theme="dark"] .health .hr .bar{background:#1F2731}
.app[data-theme="dark"] .table tbody tr:hover{background:#1C2530}
.app[data-theme="dark"] .btn:hover{color:var(--orange)}


/* ============================================================================
   FORM KIT — Field layout + text / textarea / select / checkbox / radio / switch
   All token-driven, so controls flip in dark mode.
   ============================================================================ */
.c3-field{display:flex;flex-direction:column;gap:5px}
/* SPACE BETWEEN CONSECUTIVE FIELDS. .c3-field's own gap is INTERNAL — label to control to hint — and
   nothing separated one field from the next, so two fields in a row butted together: a hint sat flush
   against the next field's label, and every stacked form in the portal read as one run-on block
   (Brooks, 2026-10-21, Availability's Calendar Setup). The gap existed only on .c3-fieldset, which no
   page in the portal uses, so this has been true of every form since the component shipped.

   Adjacent-sibling rather than a blanket margin-bottom: a lone field, and the last field before a
   button row, get no trailing space they did not ask for. Reset inside .c3-fieldset so that container's
   own gap stays the single source of spacing there rather than adding to this. */
.c3-field + .c3-field{margin-top:14px}
.c3-fieldset > .c3-field + .c3-field{margin-top:0}
.c3-field-main{display:flex;flex-direction:column;gap:5px}
.c3-field.inline .c3-field-main{flex-direction:row;align-items:center;gap:12px}
.c3-field.inline .c3-label{flex:none;min-width:112px}
.c3-field.inline .c3-control{flex:1;min-width:0}
.c3-label{font-size:13px;font-weight:700;color:var(--label);letter-spacing:.005em}
.c3-req{color:var(--under);margin-left:2px}
.c3-control{min-width:0}
.c3-field-action{flex:none;margin-left:auto}
.c3-hint{font-size:11.5px;color:var(--muted)}
.c3-error{font-size:11.5px;color:var(--under);font-weight:600}

.c3-input{width:100%;border:1px solid var(--line);background:var(--input-bg);color:var(--text);
  border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;line-height:1.35}
.c3-input::placeholder{color:var(--muted-2)}
.c3-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.c3-input:disabled{opacity:.6;cursor:not-allowed}
textarea.c3-input{min-height:80px;resize:vertical}
select.c3-input{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-repeat:no-repeat;background-position:right 10px center;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236A7787" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>')}
.app[data-theme="dark"] select.c3-input{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%238B97A6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>')}

.c3-check,.c3-radio{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text)}
.c3-check input,.c3-radio input{width:16px;height:16px;accent-color:var(--orange);cursor:pointer;margin:0}
.c3-check.disabled,.c3-radio.disabled{opacity:.6;cursor:not-allowed}
.c3-radio-group{display:flex;flex-direction:column;gap:8px}
.c3-radio-group.row{flex-direction:row;flex-wrap:wrap;gap:8px 18px}

.c3-switch{position:relative;display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--text)}
.c3-switch input{position:absolute;opacity:0;width:1px;height:1px}
.c3-switch .track{width:36px;height:20px;border-radius:20px;background:var(--line);position:relative;transition:background .15s;flex:none}
.c3-switch .track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.c3-switch input:checked + .track{background:var(--orange)}
.c3-switch input:checked + .track::after{transform:translateX(16px)}
.c3-switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--orange-soft)}
.c3-switch.disabled{opacity:.6;cursor:not-allowed}

.c3-fieldset{display:flex;flex-direction:column;gap:10px}
.c3-fieldset > .legend{font-size:12.5px;font-weight:700;color:var(--text)}
.c3-fieldset > .desc{font-size:11.5px;color:var(--muted);margin-top:-6px}


/* ============================================================================
   SINGLE-CONTENT-PAGE LAYOUT — toolbar row + segmented switcher (pills / underline)
   Option A: title + <Chief360Toolbar> (segmented pills on the left, filters on the right)
   Option B: underline switcher on the title band via PageHeader's Tabs slot
   ============================================================================ */
.c3-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.c3-toolbar-start{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c3-toolbar-end{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.c3-count{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap}

/* switcher — pills (for the toolbar) */
.c3-seg{display:inline-flex}
.c3-seg.pills{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.c3-seg.pills .c3-seg-item{border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;padding:6px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .1s,background .1s}
.c3-seg.pills .c3-seg-item:hover{color:var(--text)}
.c3-seg.pills .c3-seg-item.on{background:var(--side);color:#fff;box-shadow:0 1px 2px rgba(16,23,38,.2)}

/* switcher — underline tabs (for the black title band) */
.c3-seg.underline{gap:4px}
.c3-seg.underline .c3-seg-item{border:0;background:transparent;color:#c7ced9;font:inherit;font-size:13.5px;
  font-weight:600;padding:11px 15px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.c3-seg.underline .c3-seg-item:hover{color:#fff}
.c3-seg.underline .c3-seg-item.on{color:#fff;border-bottom-color:var(--orange)}

/* title band carrying underline tabs (Option B) */
.titlebar.has-tabs{align-items:flex-end;padding-bottom:0}
.titlebar.has-tabs h1{padding-bottom:11px}
.titlebar-tabs{margin-left:auto}
.titlebar.has-tabs .acts{margin-left:10px;padding-bottom:6px}


/* ============================================================================
   USER MENU (app bar) — avatar/name button + dropdown (account, sign out, …)
   ============================================================================ */
.usermenu{position:relative;display:inline-flex}
.userbtn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;
  color:#e7edf5;font:inherit;font-size:13px;padding:5px 8px 5px 6px;border-radius:8px}
.userbtn:hover{background:rgba(255,255,255,.08)}
.userbtn .uname{font-weight:600;white-space:nowrap}
.userbtn .ucaret{opacity:.75;flex:none}
.uavatar{width:32px;height:32px;border-radius:50%;background:var(--side);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:700;flex:none;overflow:hidden}
.uavatar img{width:100%;height:100%;object-fit:cover}
.usermenu-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:224px;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:80;overflow:hidden;padding:6px}
.usermenu-head{padding:9px 11px 10px;border-bottom:1px solid var(--line-2);margin:-6px -6px 6px}
.usermenu-head .uh-name{font-weight:700;font-size:13.5px;color:var(--text)}
.usermenu-head .uh-sub{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umenu-item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;background:transparent;border:0;
  cursor:pointer;font:inherit;font-size:13px;color:var(--text);text-align:left;padding:9px 11px;border-radius:7px;text-decoration:none}
.umenu-item:hover{background:var(--orange-soft)}
.umenu-item .umi-ico{width:18px;height:18px;color:var(--muted);flex:none;display:grid;place-items:center}
.umenu-item .umi-ico svg{width:18px;height:18px}
.umenu-item.danger{color:var(--under)}
.umenu-item.danger:hover{background:#fbe9e9}
.umenu-item.danger .umi-ico{color:var(--under)}
.umenu-sep{height:1px;background:var(--line-2);margin:6px -6px}
.usermenu-scrim{position:fixed;inset:0;z-index:75}


/* ============================================================================
   CALENDAR (Chief360Calendar) — Month / Week / Day. All selectors .c3-cal-* scoped.
   ============================================================================ */
.c3-cal{display:flex;flex-direction:column;gap:12px}
.c3-cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c3-cal-tools{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.c3-cal-nav{display:inline-flex;align-items:center;gap:6px}
.c3-cal-navbtn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:8px;
  height:34px;min-width:34px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
.c3-cal-navbtn:hover{background:var(--surface);border-color:var(--muted-2)}
.c3-cal-title{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}

/* ---- month grid ---- */
.c3-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--card)}
.c3-cal-dow{background:var(--black);color:#fff;font-size:12px;font-weight:700;letter-spacing:.3px;padding:9px 10px}
.c3-cal-cell{min-height:106px;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);
  padding:5px 6px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;background:var(--card)}
.c3-cal-cell:nth-child(7n+1){border-left:0}
.c3-cal-cell:hover{background:var(--surface)}
.c3-cal-cell.other{background:var(--surface)}
.c3-cal-num{font-size:12.5px;font-weight:600;color:var(--text);align-self:flex-end;
  min-width:22px;height:22px;display:grid;place-items:center}
.c3-cal-cell.other .c3-cal-num{color:var(--muted-2)}
.c3-cal-cell.today .c3-cal-num{background:var(--orange);color:#fff;border-radius:50%}
.c3-cal-more{font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;padding:0 4px}

/* ---- event chip (shared) ---- */
.c3-cal-ev{display:flex;align-items:baseline;gap:6px;font-size:11.5px;font-weight:600;padding:3px 7px;
  border-radius:5px;border-left:3px solid var(--muted);background:var(--surface);color:var(--text);
  cursor:pointer;line-height:1.3;overflow:hidden}
.c3-cal-ev .c3-cal-ev-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c3-cal-ev .c3-cal-ev-time{flex:none;font-weight:700;opacity:.8;font-size:10.5px}
.c3-cal-ev.red{background:#FBE6E4;color:#B23A30;border-left-color:#DB5A4E}
.c3-cal-ev.orange{background:#FBEEDE;color:#B25B14;border-left-color:#E8731C}
.c3-cal-ev.amber{background:#FAF1DA;color:#8A6416;border-left-color:#E0AC44}
.c3-cal-ev.green{background:#E4F5EA;color:#1C7A3E;border-left-color:#35A85A}
.c3-cal-ev.blue{background:#E4EEFB;color:#1B4F9B;border-left-color:#2E6FD6}
.c3-cal-ev.purple{background:#EFE7FB;color:#6A34B0;border-left-color:#8E5AD6}
.c3-cal-ev.teal{background:#DEF3F1;color:#12756C;border-left-color:#2FA79A}
.c3-cal-ev.gray,.c3-cal-ev.grey{background:var(--surface);color:var(--muted);border-left-color:var(--muted-2)}

/* ---- week ---- */
.c3-cal-week{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--card)}
.c3-cal-wcol{border-left:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0}
.c3-cal-wcol:first-child{border-left:0}
.c3-cal-whead{background:var(--black);color:#fff;padding:8px 10px;text-align:center}
.c3-cal-whead .wd{font-size:11px;font-weight:700;letter-spacing:.3px;opacity:.85}
.c3-cal-whead .wn{font-size:16px;font-weight:700;margin-top:2px}
.c3-cal-whead.today .wn{color:var(--orange)}
.c3-cal-wbody{min-height:360px;padding:8px 7px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.c3-cal-wbody:hover{background:var(--surface)}
.c3-cal-week .c3-cal-ev{white-space:normal}
.c3-cal-week .c3-cal-ev .c3-cal-ev-t{white-space:normal}

/* ---- day (agenda) ---- */
.c3-cal-day{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.c3-cal-dhead{background:var(--black);color:#fff;padding:11px 14px;font-size:14px;font-weight:700}
.c3-cal-drow{display:flex;gap:14px;align-items:flex-start;padding:11px 14px;border-top:1px solid var(--line-2);cursor:pointer}
.c3-cal-drow:hover{background:var(--surface)}
.c3-cal-dtime{flex:none;width:132px;font-size:12.5px;font-weight:700;color:var(--muted);padding-top:2px}
.c3-cal-dev{flex:1;min-width:0}
.c3-cal-dev .c3-cal-ev{white-space:normal}
.c3-cal-dev .c3-cal-ev .c3-cal-ev-t{white-space:normal}
.c3-cal-empty{padding:28px 14px;color:var(--muted);font-size:13px;text-align:center;cursor:pointer}

@media (max-width:640px){
  .c3-cal-cell{min-height:76px}
  .c3-cal-ev .c3-cal-ev-time{display:none}
  .c3-cal-dtime{width:92px}
}


/* ══ ACCESSIBILITY ════════════════════════════════════════════════════════════
   Behavioural only — none of this changes the visual design. Added 2026-08-25. */

/* Nav items are real <button>s so they are focusable and Enter/Space activates
   them. Strip the UA button styling so they look exactly as they did as divs. */
.navitem{-webkit-appearance:none;appearance:none;background:none;border:0;
  border-left:3px solid transparent;width:100%;text-align:left;font:inherit;
  font-size:13.5px;font-weight:600;color:var(--menuoff)}

/* Skip link: first focusable element, visually hidden until focused. */
.c3-skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--black);color:#fff;
  padding:10px 16px;border-radius:0 0 8px 8px;font-weight:700;font-size:13px;text-decoration:none;
  transition:top .12s ease}
.c3-skip:focus{top:0}

/* NOTE: a `.app :focus-visible` outline rule already existed further up this file.
   This one only adds the corner radius so the ring follows rounded controls; the
   colour and width are unchanged. Verified in-browser: both rules load, later wins. */
.app :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
/* Sidebar sits on blue — a white ring reads where orange would not. */
.sidebar :focus-visible{outline-color:#fff}
/* The main landmark takes focus from the skip link but should not show a ring. */
.main:focus{outline:none}

/* Screen-reader-only text: for names and status that must be announced but not
   shown (a bare colour dot, an icon-only control). */
.c3-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion:reduce){
  .app *,.app *::before,.app *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---- Colour picker (Chief360ColorPicker) --------------------------------------------------
   The platform's 40-colour grid, ported from the legacy portal's copy-pasted .colorgrid/.colorbox
   so agencies see the same control they already know. Differences, both deliberate:
   - swatches are real <button>s in a radio group, so the grid is keyboard-operable;
   - the grid wraps to the container instead of a fixed 670px, so it fits a dialog on a phone. */
/* The column count is PINNED, never "whatever fits". 40 divides evenly by 20, 10 and 8, so every
   layout below ends on a full row — the legacy grid got this from a fixed 670px width, and a plain
   flex-wrap inherits the dialog's width instead and frays (14/14/12 in a narrow dialog).
   Container queries, not media queries: this lives in dialogs of different widths on the same page,
   so what matters is the space the picker has, not the size of the window. */
.c3-colorpicker { display:block; container-type:inline-size; }
.c3-colorpicker .c3-label { display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.c3-colorgrid { display:grid; grid-template-columns:repeat(10, 32px); gap:2px; justify-content:start; }
@container (min-width:690px) { .c3-colorgrid { grid-template-columns:repeat(20, 32px); } }   /* 2 rows */
@container (max-width:359px) { .c3-colorgrid { grid-template-columns:repeat(8, 40px); } }    /* 5 rows, touch */
.c3-colorbox { width:100%; aspect-ratio:1; flex:none; padding:0; border:0; cursor:pointer;
  display:grid; place-items:center; font-size:16px; line-height:1; font-family:inherit; }
.c3-colorbox:hover:not(:disabled) { transform:scale(1.08); }
.c3-colorbox:disabled { cursor:default; opacity:.5; }
/* The focus ring must read on 40 different backgrounds, so it is drawn outside the swatch. */
.c3-colorbox:focus-visible { outline:2px solid var(--text); outline-offset:2px; z-index:1; }
.c3-colorbox.selected { box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.35); }

@media (max-width:760px) {
  /* Bigger targets on touch. The column count still comes from the container queries above, so the
     rows stay full: 10 across at tablet width, 8 across on a phone. */
  .c3-colorgrid { grid-template-columns:repeat(10, 40px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTENT PATTERNS (v0.8, 2026-10-06)

   Lifted out of Newsroom's Watch Desk design template, where they were written
   as .nr-* feature styles. They are not Newsroom's: a content card, a section
   heading with a count, an inline search, a chip, a leading tile and an
   explanatory band are what every area's listing page is made of, and
   Scheduling needs all of them. Shipping them per-area gives each one its own
   copy that drifts, and a fix in one never reaches the others.

   RULES ARE VERBATIM from that template — only the selectors are renamed — so
   the rendered design still matches the approved mockup exactly.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- leading tile: a thumbnail, or a type's stored colour pair + icon ---- */
.c3-tile{width:46px;height:38px;border-radius:7px;flex:none;background:#dfe7f1 center/cover no-repeat;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;position:relative;overflow:hidden}
.c3-tile.vid::after{content:"\25B6";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;text-shadow:0 1px 3px #000a;background:rgba(0,0,0,.20);border-radius:7px}
/* .type carries a colour pair and an icon and NEVER an image — an identity, not a picture. */
.c3-tile.type{background-image:none;color:inherit}
.c3-tile.type svg{width:18px;height:18px}
.c3-tile.lg{width:62px;height:50px;border-radius:9px}

/* ---- item card: the full-weight row for things a reader acts on ---- */
.c3-itemlist{display:grid;gap:12px;max-width:1080px}
.c3-itemcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);display:flex;gap:14px;padding:14px;cursor:pointer}
.c3-itemcard .c3-tile{width:96px;height:70px;font-size:17px;flex:none}
.c3-itemcard .c3-tile.type svg{width:26px;height:26px}
.c3-itemcard .grow{flex:1;min-width:0}
.c3-itemcard .t{font-weight:800;font-size:14px}
.c3-itemcard .meta{color:var(--muted);font-size:12px;margin:3px 0 8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.c3-itemcard .sum{font-size:12.5px;margin-bottom:9px}
.c3-itemcard .dist{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.c3-itemcard .acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---- row card: the compact form, for what a reader only has to be aware of ---- */
.c3-rowlist{display:grid;gap:12px;max-width:940px}
.c3-rowcard{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px;flex-wrap:wrap}
.c3-rowcard .grow{flex:1;min-width:160px}
.c3-rowcard .nm{font-weight:800}
.c3-rowcard .d{color:var(--muted);font-size:12px}
.c3-rowcard .big{font-size:20px;font-weight:800;text-align:center;line-height:1}
.c3-rowcard .big small{display:block;font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}

/* ---- section heading: title + count + right-aligned ordering note ---- */
.c3-sectionhead{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.c3-sectionhead .big{font-size:15px;font-weight:800}
.c3-sectionhead .spacer{flex:1}

/* ---- chip ---- */
.c3-chip{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;border:1px solid var(--line);color:var(--muted);background:#fff;display:inline-block}
.c3-chip.int{border-color:#c7d9ef;background:#eaf2fc;color:var(--over)}
.c3-chip.pub{border-color:#f4d8bd;background:var(--orange-soft);color:var(--orange-ink)}
.c3-chip.att{font-family:var(--mono);letter-spacing:-.01em}
.c3-chip.fb{border-color:#f0e2b6;background:#fff8e6;color:#7a5b12}

/* ---- segmented tabs with counts (a third .c3-seg variant beside pills/underline) ---- */
.c3-seg.tabs{background:#fff;border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.c3-seg.tabs .c3-seg-item{border:0;background:transparent;padding:6px 12px;border-radius:7px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px}
.c3-seg.tabs .c3-seg-item.on{background:var(--side);color:#fff}
.c3-seg-count{font-size:11px;background:#eef2f7;color:var(--muted);border-radius:20px;padding:0 6px;font-weight:700}
.c3-seg.tabs .c3-seg-item.on .c3-seg-count{background:#ffffff2e;color:#fff}

/* ---- inline search ---- */
.c3-search{margin-left:auto;position:relative;display:inline-flex}
.c3-search input{border:1px solid var(--line);border-radius:8px;padding:8px 12px 8px 32px;font:inherit;width:230px}
.c3-search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--muted)}

/* ---- explanatory band: a tagged line that says what a thing is or why it behaves so ---- */
.c3-notebar{font-size:11.5px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.c3-notebar-tag{background:#eef2f7;color:var(--muted);border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:700}

/* ---- nudge: the warning tier, used as a prompt for something owed ---- */
.c3-nudge{display:flex;align-items:center;gap:12px;background:#fff8e6;border:1px solid #f0e2b6;border-radius:8px;padding:9px 14px;font-size:12.5px;color:#7a5b12;margin-bottom:12px;flex-wrap:wrap}
.c3-nudge .grow{flex:1;min-width:190px}

/* ---- note / help ---- */
.c3-note{background:var(--orange-soft);border:1px solid #f0d4b3;border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--orange-ink);margin-bottom:14px;max-width:1320px}
.c3-help{color:var(--muted);font-size:11px;margin-top:4px}

/* ---- attachments ---- */
.c3-attach{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.c3-att{width:92px;height:74px;border-radius:8px;border:1px solid var(--line);background:#eef2f7;display:grid;place-items:center;color:var(--muted);font-size:11px;position:relative;overflow:hidden;text-align:center;text-decoration:none}
.c3-att .k{position:absolute;top:4px;left:4px;font-size:9px;font-weight:800;background:#000a;color:#fff;padding:1px 5px;border-radius:5px}
.c3-att.add{border:2px dashed var(--line);cursor:pointer;color:var(--muted);font-weight:700}
.c3-att.add:hover{border-color:var(--orange);color:var(--orange-ink)}

/* ---- skeleton shimmer, for any list that loads ---- */
.c3-skel{height:12px;border-radius:6px;background:linear-gradient(90deg,#e7ecf2 25%,#d9dfe8 37%,#e7ecf2 63%);background-size:400% 100%;animation:c3shimmer 1.3s ease-in-out infinite}
@keyframes c3shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---- spacing utilities ----------------------------------------------------
   Deliberately a short list, not a utility framework: these exist so a caller
   can nudge a shared component's margin without an inline style or a one-off
   wrapper class, which is what the areas were doing. Add to it only when a
   design template actually calls for a value that is not here. */
.mt-8{margin-top:8px}
.mt-14{margin-top:14px}
.mt-20{margin-top:20px}
.mb-0{margin-bottom:0}

/* ---- action bar: the row of buttons above a management list ----------------
   Four Newsroom pages referenced `.nr-actbar` and nothing ever defined it — not
   in their feature CSS, not in the design template. It rendered as an unstyled
   div, which is why the buttons in those toolbars sat flush against each other.
   Generic by nature, so it lives here rather than under one area's prefix. */
.c3-actionbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.c3-actionbar .grow{flex:1}

/* ---- stat tile: one number and what it means ------------------------------
   Lives inside a .w-body. The label is not optional — a bare figure in a card
   is a quiz, and every area that has shipped one has had to add the caption
   afterwards. Colour carries direction (ok/red/blue), never meaning on its own. */
.c3-stat{display:flex;flex-direction:column;gap:3px}
.c3-stat .num{font-size:30px;font-weight:800;line-height:1.05;color:var(--text)}
.c3-stat .num.ok{color:var(--ok)}
.c3-stat .num.red{color:var(--under)}
.c3-stat .num.blue{color:var(--over)}
.c3-stat .num.amber{color:var(--orange-ink)}
/* For a figure that is a short phrase rather than a digit — "3 notices", "2 posts".
   The strip's cards have to stay the same height, so the long one shrinks. */
.c3-stat .num.small{font-size:18px}
.c3-stat .lab{font-size:11.5px;color:var(--muted);font-weight:600}

/* ---- stat strip: the row of stat cards above a management list -------------
   The two Newsroom management listings lead with one (Published / Pending /
   Scheduled / Drafts / …) and the design template draws them as a matched pair,
   so this is a shared strip rather than two area copies. Each card wraps a
   .c3-stat; `alert` is for a card that is also a link to the work it counts —
   it changes the cursor and tints the figure, and it must NOT be used on a card
   that only reports, or the tint stops meaning "there is something to do here".
   Auto-fit rather than a fixed column count: the strips differ in length
   between the two halves and by persona, and a fixed five leaves a hole. */
.c3-statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;
  margin-bottom:16px;max-width:1100px}
.c3-statcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;box-shadow:var(--shadow)}
.c3-statcard.alert{cursor:pointer}
.c3-statcard.alert:hover{border-color:var(--orange)}

/* ---- the leading cell of a management table row ----------------------------
   A tile, a title, and a quiet second line under it (a slug, an attachment
   count, "audience not set"). Both Newsroom management listings lead with one
   and the design template draws them identically, so it is shared rather than
   copied per area. Nowrap on the flex row: the tile is fixed-width and must not
   be pushed under the title on a narrow column. */
.c3-titlecell{display:flex;align-items:center;gap:11px;flex-wrap:nowrap}
.c3-titlecell .grow{min-width:0}
.c3-titlecell .ttl{font-weight:700}
.c3-titlecell .meta{color:var(--muted);font-size:11.5px;margin-top:2px}

/* ---- acknowledgement progress --------------------------------------------
   Bulletin-only: News never carries an acknowledgement obligation. Two sizes
   because they answer different questions — the inline bar is "is this one
   moving", in a table cell, and the meter is the report's own summary.

   The bar is only ever drawn when a DENOMINATOR exists. Newsroom does not seed
   a roster at post time, so AckRequiredCount is frequently null, and a bar with
   an invented denominator is a compliance number nobody can reconcile. The
   numerator alone is the honest render in that case and needs no bar. */
.c3-ackbar{display:inline-flex;align-items:center;gap:7px}
.c3-ackbar.link{cursor:pointer}
.c3-ackbar .bar{width:64px;height:8px;border-radius:6px;background:var(--line-2);overflow:hidden;flex:none}
.c3-ackbar .bar i{display:block;height:100%;background:var(--ok);border-radius:6px}
.c3-ackbar .n{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.c3-ackmeter{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:16px 20px;max-width:1000px;margin-bottom:14px}
.c3-ackmeter .m{text-align:center}
.c3-ackmeter .m .v{font-size:24px;font-weight:800;line-height:1.1}
.c3-ackmeter .m .v.ok{color:var(--ok)}
.c3-ackmeter .m .v.wait{color:#9A6A12}
.c3-ackmeter .m .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.c3-ackmeter .prog{flex:1;min-width:200px}
.c3-ackmeter .prog .bar{height:12px;border-radius:8px;background:var(--line-2);overflow:hidden}
.c3-ackmeter .prog .bar i{display:block;height:100%;background:var(--ok)}
.c3-ackmeter .prog .lbl{font-size:11.5px;color:var(--muted);margin-top:6px}

/* ---- "you cannot open this" / "this is not built yet" ----------------------
   The whole-page state for a screen a caller reached but may not use, or one
   whose backing service does not exist. Deliberately centred and quiet: it is
   an explanation, not an error, and it has to read as a finished answer rather
   than a page that failed to load. The portal had .wd-notready doing this for
   its own pages; this is the shared version, so an area does not need a local
   stylesheet to say "no". */
.c3-notready{max-width:620px;margin:48px auto;padding:28px;text-align:center;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:var(--r);
  box-shadow:var(--shadow)}
.c3-notready h2{margin:0 0 10px;font-size:18px}
.c3-notready p{margin:0 0 10px}
.c3-notready p.meta{color:var(--muted);font-size:12.5px;margin:0}
.c3-notready code{font-family:var(--mono);font-size:12px;background:var(--surface);padding:1px 5px;border-radius:4px}

/* ---- key/value list: settings and policy summaries ---- */
.c3-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:12.5px}
.c3-kv dt{font-weight:700;color:var(--muted);white-space:nowrap}
.c3-kv dd{margin:0}

/* ---- a quiet second line inside a table cell -------------------------------
   For the reason behind a verdict — "work-rest: Boyd <12h rest before Oct 22"
   under an Infeasible pill. A status with no reason is an argument the reader
   cannot have. */
.c3-cellnote{display:block;font-size:11px;color:var(--muted);margin-top:3px}

/* Legend for a colour-coded surface — a calendar, a board, a chart. Any surface that encodes meaning in
   colour needs one, because the colour is not self-describing and a reader who guesses wrong acts on it.
   Pairs with the Chief360Palette keys so a dot and its events always match. */
.c3-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;
           font-size:12px;color:var(--muted)}
.c3-legend span{display:inline-flex;align-items:center;gap:6px}
.c3-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;background:var(--muted)}
.c3-dot.blue{background:var(--blue,#2980b9)}
.c3-dot.green{background:var(--green,#27ae60)}
.c3-dot.amber{background:var(--amber,#e0a800)}
.c3-dot.red{background:var(--red,#e74c3c)}
.c3-dot.grey,.c3-dot.gray{background:var(--muted)}

/* ---- Row actions and inline editors (registry tables: categories, message types, tags) ----
   Added with the markup that uses them, after the class sweep caught all three as names resolving to no
   rule. A trailing actions cell, and the tag chip's own two controls — a tag has exactly two things
   anyone does to it, so they sit on the chip rather than earning a row and a kebab. */
.c3-rowacts{text-align:right;white-space:nowrap}
.c3-rowacts .btn{margin-left:6px}
.c3-tagedit{display:inline-flex;align-items:center;gap:6px;margin:0 8px 6px 0}
.c3-tagedit .lnk{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:11.5px;
  color:var(--muted);cursor:pointer;text-decoration:underline}
.c3-tagedit .lnk:hover{color:var(--orange-ink)}