/* ---- Self-hosted brand faces ----
   Instrument Sans is the workhorse (body, tables, forms, figures); Space Grotesk is
   display only — page titles and marketing headlines, never dense UI.
   Self-hosted rather than Google's CDN: one less external request per page
   view, and no third party seeing our users' IP addresses. Both are variable
   fonts under the SIL Open Font Licence, so the whole weight range is one
   file each. Absolute paths so /street/ and the public pages resolve too. */
/* Instrument Sans, not Figtree. Figtree is a GEOMETRIC sans — uniform round
   letterforms and relatively closed apertures — which is friendly at display
   size and measurably harder to read at 13-14px in a dense table, because c/e/o
   converge. Inter (what this app used before) and Instrument Sans are
   neo-grotesques designed for exactly this job: taller x-height, open
   apertures, letterforms that stay distinct when small. The BID manager using
   the product reported the drop in legibility before any of this was measured,
   and she was right. Instrument Sans is also what next.sivo.uk runs, which she
   independently prefers. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-var.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/space-grotesk-var.woff2) format('woff2')}


:root{
  /* ---- PlaceManager agreed colour system ----
     Supplied by the designer, Aug 2026, after a review of all the design material. Two layers on
     purpose: the --pm-* names below are HIS palette, copied exactly and never edited, so the file can
     be checked against the spec at a glance. Everything under it is the semantic layer the ~1,200
     rules in this file already reference, remapped onto that palette — which is why a whole-product
     recolour touches one block rather than every rule.

     The rules that are easy to get wrong, in one place:
       - PlaceManager is a SIVO product. Interface actions are Signal Blue, NOT the workspace's own
         colour and NOT Lime Spark.
       - Red means a genuine problem or a destructive action. Nothing routine — no active nav, no
         ordinary tabs, no plain arrows.
       - Signal Gold carries Rich Black or Warning Dark text, never white.
       - Never colour alone: every status is paired with a word or an icon. */

  /* The designer's palette, verbatim. Do not edit these to taste — change the mapping below. */
  --pm-rich-black:#020D19;
  --pm-graphite:#23262F;
  --pm-paper:#F4F0E8;
  --pm-white:#FFFFFF;
  /* Slate AA, from the 12 Aug 2026 accessible-colour-system update: #66716D only cleared 4.45:1 on
     Paper, so the designer replaced it with #5F6966 (4.99:1) everywhere — it also passes on White,
     which is lighter still, so one value now covers both surfaces. */
  --pm-slate:#5F6966;
  --pm-stone:#DED8CC;

  --pm-primary:#0057FF;
  --pm-primary-hover:#0042C7;
  --pm-primary-soft:#E6EEFF;
  --pm-focus:#80ABFF;
  /* Dark Active: the sidebar's active-item background on Rich Black, paired with Focus Blue text —
     Signal Blue itself is only 2.3:1 there and must never sit directly on the dark sidebar. */
  --pm-dark-active:#102B52;

  --pm-urban-spark:#B6FF2E;

  --pm-success:#16845B;
  --pm-success-soft:#E7F6EF;
  --pm-success-border:#A9E3CC;
  /* 5.05:1 on Success Soft, from the same update — replaces the earlier color-mix approximation. */
  --pm-success-text:#0E7650;

  --pm-warning:#F5C451;
  --pm-warning-strong:#D99A00;
  --pm-warning-soft:#FFF6D6;
  --pm-warning-border:#F6D365;

  --pm-error:#D92D20;
  --pm-error-hover:#B42318;
  --pm-error-soft:#FEE4E2;
  --pm-error-border:#FDA29B;

  /* ---- Semantic layer ---- */
  --paper:var(--pm-paper);      /* application canvas                */
  --panel:var(--pm-white);      /* cards, forms, elevated surfaces   */
  /* Inset panels and table headers sit on Paper rather than an invented off-white: a white card on a
     Paper canvas already gives the step, so the system needs no extra tone here. */
  --surface:var(--pm-paper);
  --line:var(--pm-stone);       /* borders, dividers                 */
  --line-soft:color-mix(in srgb,var(--pm-stone) 55%,var(--pm-white));
  --ink:var(--pm-graphite);     /* headings and body text            */
  --night:var(--pm-rich-black); /* sidebar, premium dark panels      */
  --muted:var(--pm-slate);      /* secondary text, supporting icons  */
  /* The old ramp had a second, lighter muted. The system has one secondary text colour, and the
     lighter tone had no accessible equivalent, so both resolve to Slate. Dark surfaces carry their
     own value below — Slate on Rich Black is only 3.5:1 and would have failed there. */
  --muted-2:var(--pm-slate);
  --on-dark:var(--pm-stone);                                    /* text on Rich Black, 13:1        */
  --on-dark-soft:color-mix(in srgb,var(--pm-stone) 62%,var(--pm-rich-black));

  /* --primary is the SYSTEM action colour and never changes.
     --brand is the CLIENT's own colour, still injected per workspace at runtime — but it no longer
     drives any interface chrome. It used to colour active nav icons, tabs, links and chart bars,
     which is precisely why the product looked red: Wakefield's brand colour is a raspberry. */
  --primary:var(--pm-primary);
  --primary-hi:var(--pm-primary-hover);
  --focus:var(--pm-focus);
  --dark-active:var(--pm-dark-active); /* sidebar active-item background, paired with --focus text */
  --brand:var(--pm-primary);    /* fallback until a workspace loads  */
  --accent:var(--pm-primary);   /* was Blueberry #6878FF, retired    */
  --mist:var(--pm-primary-soft);/* Ice Blue: selected rows, pills    */
  --urban-spark:var(--pm-urban-spark); /* parent brand only — never a button or a status */

  --good:var(--pm-success);
  /* Success #16845B on its own background is 4.20:1 — the designer's pairing misses AA for text.
     #0E7650 (5.05:1) is the designer's own supplied fix, from the same 12 Aug 2026 update that
     retired the earlier color-mix approximation. --good keeps the pure value for icons, dots,
     borders and strokes, which only need 3:1. */
  --good-text:var(--pm-success-text);
  --good-bg:var(--pm-success-soft);
  --good-border:var(--pm-success-border);
  --warn:var(--pm-warning);
  /* Warning Dark (#7A4E00) is retired — it read as brown and still missed AA directly on Signal
     Gold. The 12 Aug 2026 update settled on Rich Black for warning text everywhere, on the pale
     warning ground as well as on gold itself: one rule instead of two. */
  --warn-text:var(--pm-rich-black);
  --on-gold:var(--pm-rich-black);
  --warn-strong:var(--pm-warning-strong);
  --warn-bg:var(--pm-warning-soft);
  --warn-border:var(--pm-warning-border);
  --danger:var(--pm-error);
  --danger-text:var(--pm-error-hover);
  --danger-bg:var(--pm-error-soft);
  --danger-border:var(--pm-error-border);
  --danger-night:var(--pm-error-border);  /* red legible on Rich Black */

  /* kept so older rules keep resolving */
  --bg:var(--pm-paper); --blue:var(--pm-rich-black); --soft:var(--pm-paper);
  --card:var(--pm-white);
  --shadow:0 18px 44px color-mix(in srgb,var(--pm-rich-black) 8%,transparent);
  --sivo-ink:var(--pm-rich-black); --sivo-violet:var(--pm-primary);
  --sivo-cream:var(--pm-paper); --sivo-muted:var(--pm-slate);
}
*{box-sizing:border-box}/* The old rule set neither size nor leading, so everything inherited 16px with
   the browser's default line-height. In dense tables that is the single biggest
   cause of eye strain — long measure, tight leading, no rhythm. 14px at 1.55
   with real antialiasing is the calm baseline the rest of the scale sits on. */
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}button,input,select,textarea{font:inherit}button{cursor:pointer}.wrap{min-height:100vh}.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}/* Near-white on near-black was ~18:1 and haloed badly. A light slate reads
   calmer and still clears AA comfortably. Tighter padding so more of the menu
   fits without scrolling — the reason next.sivo.uk shows more at a glance. */
.sidebar{background:var(--night);color:var(--on-dark);display:flex;flex-direction:column;
  padding:12px 10px env(safe-area-inset-bottom);position:sticky;top:0;height:100vh}.side-brand{display:flex;gap:12px;align-items:center;margin:0 0 20px}.side-brand b{display:block;color:var(--panel);font-weight:650}.side-brand small{display:block;color:var(--muted-2);font-weight:700;font-size:12px}.brand-logo{width:40px;height:40px;border-radius:4px;display:grid;place-items:center;overflow:hidden;background:transparent;color:var(--panel);font-weight:700}.brand-logo img{max-width:100%;max-height:100%;object-fit:contain}.brand-logo span{background:var(--night);border:1px solid rgba(255,255,255,.1);width:100%;height:100%;display:grid;place-items:center;border-radius:4px}.brand-logo.us span{background:transparent;border:0}.nav-section{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--on-dark-soft);font-weight:600;margin:14px 10px 5px}.nav-item{width:100%;border:0;background:transparent;color:var(--on-dark);border-radius:9px;
  display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;font-weight:500;
  text-align:left;line-height:1.25;min-height:34px}
.nav-item:hover{background:rgba(255,255,255,.055);color:#fff}.nav-item svg{width:17px;height:17px;flex:none;opacity:.72}.nav-item.on{background:var(--dark-active);color:var(--focus);font-weight:600}
.nav-item.on svg{opacity:1}.nav-item.on svg{color:var(--focus)}.sidebar nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.sidebar nav::-webkit-scrollbar{width:6px}.sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}.side-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;flex-shrink:0}.main{min-width:0}.topbar{min-height:64px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;padding-top:env(safe-area-inset-top);color:var(--muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;position:sticky;top:0;z-index:5}.topbar>div{display:flex;align-items:center;gap:10px}.icon-btn{width:42px;height:42px;border:1px solid var(--line);background:var(--panel);border-radius:12px}.icon-btn svg{width:20px}.hamburger-btn{display:none;width:40px;height:40px;border:0;background:transparent;color:inherit;border-radius:10px;align-items:center;justify-content:center;flex-shrink:0}.hamburger-btn svg{width:22px;height:22px}.side-brand .hamburger-btn{margin-left:auto;color:var(--surface)}.sidebar-backdrop{display:none}.avatar{width:42px;height:42px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:inline-grid;place-items:center;color:var(--night);font-weight:700;text-transform:none;letter-spacing:0}#view{padding:32px 28px 80px}.page-head{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:22px;padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;box-shadow:var(--shadow)}.page-head h1{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:34px;line-height:1.06;margin:5px 0;letter-spacing:-.03em;font-weight:700}.page-head p{margin:0;color:var(--muted)}.kick{font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:700;color:var(--muted)}.actions{display:flex;gap:10px;flex-wrap:wrap}/* ---- Button scale ----
   Four ranks, and every one of them visibly a control. The old pair (one dark,
   everything else white) is what a BID manager described as "a lot of white
   buttons which is confusing" — nothing indicated which action a screen was
   actually for. Primary is Signal Blue with white text, per the agreed system;
   secondary is the outline rank, white with a Signal Blue border and text. */
.btn{border:1px solid transparent;border-radius:10px;background:var(--primary);color:#fff;
  font-weight:600;padding:11px 17px;min-height:40px;line-height:1;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 2px 10px color-mix(in srgb,var(--primary) 24%,transparent)}
.btn:hover{background:var(--primary-hi)}
/* Outline button: white ground, Signal Blue border and text. */
.btn.secondary{background:var(--panel);color:var(--primary);border-color:var(--primary);box-shadow:none}
.btn.secondary:hover{background:var(--mist);border-color:var(--primary-hi);color:var(--primary-hi)}
.btn.tertiary{background:var(--mist);color:var(--primary);border-color:var(--mist);box-shadow:none}
.btn.danger{background:var(--danger);color:#fff;border-color:transparent;box-shadow:none}
/* .btn.light is retired but kept as an alias so no screen loses its styling
   mid-migration; it now renders as the secondary rank. */
.btn.light{background:var(--panel);color:var(--primary);border:1px solid var(--primary);box-shadow:none}
/* A destructive row-level action (Delete, Remove, Release) styled the same as Edit or View for months
   across every table in the product. .row-btn.danger exists so a destructive action can be marked red
   without a bulk rewrite of every call site at once — see CLAUDE.md's colour section. */
.row-btn.danger{border-color:var(--danger);color:var(--danger-text)}
.row-btn.danger:hover{background:var(--danger-bg)}
/* WCAG 2.2 AA: 24px minimum target, and a focus ring that is actually visible
   on both the warm ground and inside dark surfaces. */
.btn.small{padding:8px 13px;font-size:13.5px;min-height:32px}
:where(button,a,select,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.sidebar :where(button,a):focus-visible{outline-color:var(--focus)}/* Auto-fit, so five tiles no longer leave a lone orphan on a second row the
   way repeat(4) did on Businesses. Smaller all round: these are context, not
   the point of a records screen — the table is. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0 0 14px}/* Icon tile gives every card a fixed anchor, so a row of them is scanned
   rather than read. Tinted background, not a filled shape — a saturated block
   at this size fights the figure beside it. */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kpi-txt{min-width:0}
.kpi-ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--mist);color:var(--primary)}
.kpi-ic svg{width:17px;height:17px}
.kpi-ic.good{background:var(--good-bg);color:var(--good-text)}
.kpi-ic.warn{background:var(--warn);color:var(--on-gold)}
.kpi-ic.bad{background:var(--danger-bg);color:var(--danger-text)}.kpi span{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700}.kpi b{display:block;font-size:22px;margin-top:5px;letter-spacing:-.025em;font-weight:800;font-variant-numeric:tabular-nums}.kpi small{color:var(--muted);font-size:11.5px}.hub-grid,.workspace-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}.hub-grid button,.workspace-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px;text-align:left;box-shadow:var(--shadow);color:var(--ink)}.hub-grid button{font-weight:700;font-size:18px}.hub-grid span,.workspace-card span{display:block;color:var(--muted);font-size:14px;font-weight:600;margin-top:6px}.toolbar{background:var(--panel);border:1px solid var(--line);border-radius:18px;margin:16px 0;padding:12px;display:flex;gap:10px;flex-wrap:wrap}.toolbar .search{flex:1}.toolbar button,.pills button,.row-btn{border:1px solid var(--line);background:var(--panel);border-radius:12px;font-weight:650;padding:10px 12px;color:var(--night)}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;outline:none;color:var(--night)}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}textarea{min-height:96px;resize:vertical}.table-card,.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.card{padding:22px}.card h3{margin:0 0 14px;font-family:'Space Grotesk','Instrument Sans',sans-serif}table{width:100%;border-collapse:collapse;font-size:13.5px}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;background:var(--panel);padding:14px 18px}td{padding:13px 18px;border-top:1px solid var(--line);vertical-align:middle}tr{transition:.12s}tbody tr:hover{background:var(--panel)}td small{display:block;color:var(--muted);margin-top:4px}/* Colour never carries meaning alone (WCAG 1.4.1): every badge has a word.
   Mint measures 1.58:1 against white and Gold 1.59:1, so a bare status dot
   would be unreadable for some people — the label is what makes it legible. */
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:var(--mist);
  color:var(--muted);font-weight:600;font-size:11.5px;padding:4px 10px}.badge.warn{background:var(--warn-bg);color:var(--ink)}.profile-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.detail-grid p{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}.detail-grid b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.detail-grid span{display:block;margin-top:6px}.timeline{display:flex;flex-direction:column;gap:10px}.timeline>div{border-left:3px solid var(--primary);background:var(--panel);border-radius:12px;padding:12px 14px}.timeline span{display:block;color:var(--muted);font-size:13px;margin:3px 0}.timeline p{margin:4px 0 0}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.form-grid label{font-size:13px;font-weight:700;color:var(--muted)}.form-grid label>*{margin-top:7px}.form-grid .wide{grid-column:1/-1}.map{height:520px;border-radius:16px;background:var(--surface);overflow:hidden}.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.ops-list{display:flex;flex-direction:column;gap:8px;max-height:620px;overflow:auto}.empty{background:var(--panel);border:1px dashed var(--muted-2);border-radius:18px;text-align:center;padding:26px}.muted{color:var(--muted)}.login{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px;width:min(420px,100%);box-shadow:var(--shadow)}.login-card h1{font-family:'Space Grotesk','Instrument Sans',sans-serif;margin:10px 0 5px}.login-card p{color:var(--muted)}.login-card label{display:block;margin-top:12px;font-weight:650}.login-card .btn{width:100%;margin-top:16px}.logo-mark{width:48px;height:48px;border-radius:14px;background:var(--night);color:var(--panel);display:grid;place-items:center;font-weight:700}.err{color:var(--danger-text);margin-top:10px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--night);color:var(--panel);border-radius:999px;padding:12px 18px;font-weight:650;z-index:99;transition:.2s}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.rb-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px 12px;margin:10px 0}.rb-check{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px}.rb-check input{width:auto;margin:0;flex:none}.rb-check span{flex:1;min-width:0}
@media(max-width:1000px){
.app-shell{grid-template-columns:1fr}
.hamburger-btn{display:inline-flex}
.sidebar-backdrop.open{display:block;position:fixed;inset:0;background:rgba(6,19,43,.55);z-index:40}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;max-width:82vw;height:100vh;z-index:45;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 30px rgba(0,0,0,.25);padding:14px 14px calc(14px + env(safe-area-inset-bottom));padding-top:calc(14px + env(safe-area-inset-top))}
.sidebar.open{transform:translateX(0)}
.topbar{min-height:56px;padding:0 14px;padding-top:calc(14px + env(safe-area-inset-top))}
#view{padding:18px 12px calc(24px + env(safe-area-inset-bottom))}.page-head,.profile-grid{display:block}
.page-head{padding:18px}
.page-head .actions{margin-top:12px}
.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hub-grid,.workspace-grid{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}
.detail-grid{grid-template-columns:1fr}
/* Raw <table> screens (Governance, Tasking, Promotions, Programmes, Events, Super
   Admin etc - ~130 call sites) have no mobile-specific layout, unlike .reclist's
   column collapse. They rely on this container scrolling sideways, which works,
   but the card's rounded edge looks like a hard boundary with nothing telling you
   there's more to the right. Standard CSS-only scroll-shadow: the two outer
   gradient layers scroll WITH the content (background-attachment:local) and mask
   themselves out at each end, so the shadow only shows on the side that actually
   has more to reveal. */
.table-card{overflow:auto;
  background:
    linear-gradient(to right,var(--panel) 30%,rgba(0,0,0,0)),
    linear-gradient(to left,var(--panel) 30%,rgba(0,0,0,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.18),rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.18),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-color:var(--panel);
  background-size:24px 100%,24px 100%,8px 100%,8px 100%;
  background-attachment:local,local,scroll,scroll;
}
.map{height:320px}
}

/* 4.6.2 premium restoration */
.kpi-grid.premium{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi.hot{border-color:var(--warn);background:var(--warn-bg);}
.map.big{min-height:360px;}
.all-fields{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.mini-form{margin-top:16px;padding:16px;border:1px solid var(--border,var(--line));border-radius:16px;background:var(--panel);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px;background:var(--panel);border:1px solid var(--border,var(--line));margin-bottom:16px;}
.tabs button{border:0;background:transparent;border-radius:999px;padding:11px 18px;font-weight:650;color:var(--muted);}
.tabs button.on{background:var(--night);color:white;box-shadow:0 8px 20px rgba(7,18,38,.18);}
.card h3{margin-top:0;}
.table-card tr{cursor:pointer;}
.form-grid input[type=date]{font-variant-numeric:tabular-nums;}
@media(max-width:900px){.profile-grid{grid-template-columns:1fr}.map.big{min-height:280px}.mini-form{grid-template-columns:1fr}}
.map.big{min-height:420px;border-radius:22px;border:1px solid var(--line);overflow:hidden;background:var(--surface);}
.timeline.compact>div{padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}.timeline.compact>div:last-child{border-bottom:0}.report-text{min-height:260px;width:100%;border:1px solid var(--line);border-radius:16px;padding:16px;font:inherit;line-height:1.55;background:var(--panel)}.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.admin-tabs{margin:12px 0 18px}.icon-bubble{width:46px;height:46px;border-radius:16px;background:var(--danger-bg);color:var(--danger-text);display:grid;place-items:center;font-weight:700;margin-bottom:18px}.checkline{display:flex!important;align-items:center;gap:10px;margin:14px 0;font-weight:650}.checkline input{width:auto!important}.brand-preview{border-radius:22px;background:var(--night);color:white;padding:24px;display:flex;flex-direction:column;gap:4px}.brand-preview span{color:var(--muted-2)}
.kpi-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1100px){.profile-grid{grid-template-columns:1fr!important}}
@media(max-width:760px){.kpi-grid.compact{grid-template-columns:1fr}.map.big{min-height:300px}}


/* 4.6.4 restoration polish */
.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.count-pill{display:inline-flex;border-radius:999px;background:var(--panel);color:var(--primary);font-weight:700;padding:8px 12px}.imported-fields-panel{margin-top:18px}.imported-field-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.imported-field-grid div{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}.imported-field-grid span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.imported-field-grid strong{display:block;margin-top:6px;word-break:break-word}.business-top-grid{align-items:stretch}.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.info-panel .detail-grid{margin-top:8px}.ballot-card label{display:block;font-weight:700;color:var(--muted);margin-bottom:12px}.ballot-card label>*{margin-top:7px}@media(max-width:1000px){.imported-field-grid{grid-template-columns:1fr}.compact{grid-template-columns:1fr}.mini-form{grid-template-columns:1fr}.business-top-grid{grid-template-columns:1fr}}.map.big{height:360px}.map.huge{height:560px}.map-legend{display:flex;gap:8px;align-items:center}.map-legend span{border-radius:999px;padding:6px 10px;font-weight:650;font-size:12px;background:var(--surface)}.map-legend .yes{background:var(--good);color:#fff}.map-legend .maybe{background:var(--warn);color:var(--on-gold)}.map-legend .no{background:var(--danger);color:#fff}
.map-legend .unknown{background:var(--muted);color:#fff}.capture-card label.wide{grid-column:1/-1}.report-tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:16px}.report-tabs button{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:left;cursor:pointer;box-shadow:var(--shadow)}.report-tabs button.on{border-color:var(--primary);background:var(--panel)}.report-tabs span{display:block;color:var(--muted);font-size:13px;margin-top:6px}.admin-tabs svg{width:16px;height:16px;margin-right:6px}.cat-list{display:grid;gap:8px;margin:12px 0}.cat-list div{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.cat-list button{border:0;background:var(--panel);border-radius:10px;padding:6px 9px;font-weight:700}.mini-form input{flex:1;min-width:160px}.brand-preview{border:1px solid var(--line);border-radius:18px;padding:24px;background:linear-gradient(135deg,var(--night),var(--night));color:var(--panel)}.brand-preview span{display:block;color:var(--line)}.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
@media(max-width:1000px){.report-tabs{grid-template-columns:1fr}.map.big,.map.huge{height:320px}}.programme-grid button{min-height:120px}.map.huge{height:520px}.report-tabs button{cursor:pointer}.form-grid input[type="date"]{font:inherit}.timeline.compact{max-height:560px;overflow:auto}

/* 4.6.7 operations/programmes restoration */
.ops-case-list{display:grid;gap:12px;max-height:620px;overflow:auto;padding-right:4px}.board{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:6px;margin-top:14px}.board-col{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;min-width:220px}.board-col-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px;font-weight:700;font-size:13px;color:var(--ink)}.board-col-head b{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:15px}.board-col-body{display:flex;flex-direction:column;gap:10px;max-height:600px;overflow-y:auto}.board-col-empty{margin:0;padding:14px 6px;font-size:13px}@media(max-width:1300px){.board{grid-template-columns:repeat(3,minmax(220px,1fr));grid-auto-rows:min-content}}@media(max-width:900px){.board{grid-template-columns:1fr}}.occ-card{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--panel);cursor:pointer}.occ-card:hover{box-shadow:0 10px 24px rgba(15,23,42,.08);transform:translateY(-1px)}.occ-card b{font-size:16px}.occ-card small{display:block;color:var(--muted);margin-top:5px}.occ-card p{color:var(--muted);margin:8px 0 10px}.map.huge{height:560px}.programme-grid button b{display:block;font-size:18px;margin-bottom:4px}.programme-grid button span{display:block;color:var(--muted);font-size:14px;line-height:1.35}.capture-card .category-buttons{margin-top:6px}.category-buttons{display:flex;flex-wrap:wrap;gap:8px}.category-buttons button{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 10px;font-weight:650;cursor:pointer}.category-buttons button:hover{background:var(--mist);color:var(--danger-text);border-color:var(--primary)}.pills{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}.pills button{border:1px solid var(--line);border-radius:999px;background:var(--panel);padding:8px 12px;font-weight:650}.inline-actions{display:flex;gap:8px;flex-wrap:wrap}.inline-actions button:not(.btn){border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:8px 11px;font-weight:650;cursor:pointer}.na-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--danger-text);margin-left:8px;vertical-align:middle}.del{border:1px solid var(--line);background:var(--panel);color:var(--muted-2);font-weight:650;font-size:13px;padding:10px 14px;border-radius:12px;cursor:pointer}.del:hover{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-bg)}

/* 4.7.1 property debt + history */
.debt-banner{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--danger-bg);border:1px solid var(--danger);border-left:5px solid var(--danger);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.debt-banner .kick{color:var(--danger-text)}
.debt-banner b{font-size:28px;color:var(--danger);display:block}
.debt-banner .db-right{text-align:right;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.owed{color:var(--danger)}
.timeline .is-current{border-left-color:var(--good-text)}

/* 4.7.2 place signals */
.signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.signal{background:var(--panel);border:1px solid var(--border,var(--surface));border-left:4px solid var(--muted-2);border-radius:14px;padding:14px 16px}
.signal.good{border-left-color:var(--good)}.signal.warn{border-left-color:var(--warn)}.signal.bad{border-left-color:var(--danger)}
.signal .sig-top{display:flex;justify-content:space-between;align-items:baseline}
.signal .sig-top span{font-size:12px;color:var(--muted);font-weight:600}
.signal .sig-top b{font-size:22px;font-family:'Space Grotesk','Instrument Sans',sans-serif}
.signal .sig-band{font-weight:700;font-size:13px;margin:2px 0 4px}
.signal.good .sig-band{color:var(--good-text)}.signal.warn .sig-band{color:var(--ink)}.signal.bad .sig-band{color:var(--danger-text)}
.signal small{color:var(--muted);font-size:11px}
@media(max-width:900px){.signal-grid{grid-template-columns:1fr 1fr}}

/* 4.7.3 command centre */
.cmd-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.ckpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.ckpi.warn,.ckpi.bad,.ckpi.good{background:var(--panel);border-color:var(--line)}
.ckpi.bad .ck-v{color:var(--danger-text)}.ckpi.warn .ck-v{color:var(--warn-text)}.ckpi.good .ck-v{color:var(--good-text)}
.ckpi .ck-t{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px}
.ckpi .ck-v{font-size:26px;font-weight:700;font-family:'Space Grotesk','Instrument Sans',sans-serif;line-height:1}
.ckpi .ck-s{font-size:12px;color:var(--muted);margin-top:5px}
.ck-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface);color:var(--primary);margin-bottom:10px}
.ck-ic svg{width:17px;height:17px}
.ckpi.good .ck-ic{background:var(--good-bg);color:var(--good-text)}
.ckpi.warn .ck-ic{background:var(--warn-bg);color:var(--warn-text)}
.ckpi.bad .ck-ic{background:var(--danger-bg);color:var(--danger-text)}
.ck-trend{display:inline-block;margin-left:6px;font-weight:650}
.ck-trend-good{color:var(--good-text)}
.ck-trend-bad{color:var(--danger-text)}
.health-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:650;font-size:12px}
.health-pill.good{background:var(--good-bg);color:var(--good-text)}
.health-pill.warn{background:var(--warn-bg);color:var(--warn-text)}
.health-pill.bad{background:var(--danger-bg);color:var(--danger-text)}
.row-biz{display:flex;align-items:center;gap:10px}
.row-avatar{flex:none;width:30px;height:30px;border-radius:9px;background:var(--primary);color:var(--panel);display:grid;place-items:center;font-weight:700;font-size:11px}
.vote-pill{display:inline-block;margin-left:6px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;border:1px solid;vertical-align:middle}
.ballot-addr-panel{border-left:3px solid var(--primary)}
.ballot-addr-lines{margin-top:10px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;font-size:14px;line-height:1.6}
.form-subhead{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--muted);margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.card>.form-subhead:first-of-type,.bizpane>.form-subhead:first-child{border-top:0;padding-top:0;margin-top:0}
.drawer-avatar{width:42px;height:42px;border-radius:11px;background:var(--mist);color:var(--primary);display:grid;place-items:center;font-weight:700;font-size:14px;margin-bottom:10px}
.drawer-sub{color:var(--muted);font-size:13px;font-weight:400;margin:-2px 0 12px}
.drawer-card{margin-bottom:18px}
.drawer-card h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--muted);margin:0 0 8px}
.next-action-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.drawer-next-action{font-weight:650;margin:0 0 2px}
.drawer-activity{display:flex;flex-direction:column;gap:10px}
.drawer-activity-row{border-left:2px solid var(--mist);padding:2px 0 2px 12px}
.drawer-activity-row b{display:block;font-size:13px}
.drawer-activity-row span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.drawer-activity-row p{margin:4px 0 0;font-size:13px}
.benefit-add{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.benefit-add-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.benefit-add-label select{width:auto;min-width:220px;display:block;margin-top:6px}
.benefit-add-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.benefit-add-row select,.benefit-add-row input{width:auto;flex:1;min-width:160px}
.benefit-add-row .btn{flex:none}
.map.small{height:220px;border-radius:16px}
.biz-layout{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
.biz-sidebar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;position:sticky;top:16px}
.biz-sidebar-section{margin-bottom:22px}
.biz-sidebar-section:last-child{margin-bottom:0}
.biz-sidebar-title{font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--muted-2);margin-bottom:8px}
.biz-view-item{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;font-family:inherit}
.biz-view-item:hover{background:var(--panel)}
.biz-view-item.on{background:var(--mist);color:var(--primary)}
.biz-view-item span{font-weight:700;color:var(--muted-2);font-size:12px}
.biz-view-item.on span{color:var(--primary)}
.biz-sidebar-section label{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:10px}
.biz-sidebar-section select{margin-top:5px}
.biz-sidebar-section input[type=range]{margin-top:8px;width:100%}
@media(max-width:1000px){.biz-layout{grid-template-columns:1fr}.biz-sidebar{position:static}}
.log-view{display:block;background:var(--night);color:var(--line);border-radius:14px;padding:16px;font:12px/1.6 SFMono-Regular,Consolas,Menlo,monospace;overflow:auto;white-space:pre-wrap;word-break:break-word;max-height:70vh;margin:0}
.log-view .log-err{color:var(--danger)}
.log-view .log-warn{color:var(--warn)}
.cmd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cmd-grid>.card{margin:0}
.health-big{font-size:40px;font-weight:650;font-family:'Space Grotesk','Instrument Sans',sans-serif;line-height:1;margin:6px 0}
.health-big small{font-size:18px;color:var(--muted);font-weight:600}
.health-bar{height:8px;border-radius:6px;background:var(--surface);overflow:hidden;margin:8px 0 14px}
.health-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--danger),var(--warn-strong),var(--good))}
.hc-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--surface);font-size:14px}
.hc-row b.pos{color:var(--good-text)}.hc-row b.neg{color:var(--danger)}
.feed{display:flex;flex-direction:column}
.feed-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--surface);font-size:13px;min-width:0}
.feed-ic{color:var(--primary)}
.feed-main{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed-meta{color:var(--muted);font-size:12px;white-space:nowrap;flex:none}
.dark-insight{background:var(--night)}
.dark-insight .kick{color:var(--muted-2)}.dark-insight p{color:var(--line)}.dark-insight h3{color:var(--panel);margin:4px 0 8px}
/* .chip was written for a dark surface — white text on a 12%-white tint — and
   was then reused on white cards, where it renders white on white. Purple Flag
   sub-groups were saved, returned and rendered, and simply could not be seen.
   Now legible on any ground; .chip-on-dark keeps the original for dark surfaces. */
.chip{display:inline-block;background:var(--mist);color:var(--primary);border:1px solid var(--mist);
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;margin:4px 4px 0 0;cursor:pointer}
.chip:hover{border-color:var(--primary)}
.chip-on-dark{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.focus-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--surface)}
.focus-row small{display:block;color:var(--muted);font-size:12px}
.focus-score{font-weight:700;color:var(--primary)}
.vi-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--surface);font-size:14px}
.row-between{display:flex;justify-content:space-between;align-items:center}
.pill-mini{font-size:11px;background:var(--surface);border-radius:999px;padding:3px 10px;color:var(--muted);font-weight:600}
@media(max-width:1200px){.cmd-kpis{grid-template-columns:repeat(3,1fr)}.cmd-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.cmd-kpis{grid-template-columns:1fr 1fr}.cmd-grid{grid-template-columns:1fr}
  /* Several .cmd-grid cards carry an inline style="grid-column:span 2" (or 3) for the
     desktop 2/3-column layouts. Collapsing the grid to one explicit column doesn't
     cancel that span - Grid auto-creates an implicit second column sized to content
     to satisfy it, so the row before/after a spanning card gets forced into a narrow
     auto column plus a wide one instead of stacking full-width. Inline styles need
     !important to override. */
  .cmd-grid>.card{grid-column:1!important}}

/* 4.7.4 places + priorities */
.prio-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--surface);cursor:pointer;font-size:14px}
.prio-row:hover{color:var(--primary)}
.pdot{width:10px;height:10px;border-radius:50%;flex:none}
.prio-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prio-go{color:var(--primary);font-weight:700}
.places-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px;align-items:start}
.street-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.street-card{background:var(--panel);border:1px solid var(--border,var(--surface));border-top:4px solid var(--muted-2);border-radius:16px;padding:16px;cursor:pointer;transition:.12s}
.street-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,27,51,.08)}
.street-card.good{border-top-color:var(--good-text)}.street-card.warn{border-top-color:var(--warn-text)}.street-card.bad{border-top-color:var(--danger)}
.sc-top{display:flex;justify-content:space-between;align-items:center}
.sc-top h3{margin:0;font-size:17px}
.sc-health{font-size:34px;font-weight:650;font-family:'Space Grotesk','Instrument Sans',sans-serif;line-height:1;margin:6px 0 12px}
.sc-health small{font-size:14px;color:var(--muted);font-weight:600}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-grid div{background:var(--panel);border-radius:10px;padding:8px 10px}
.sc-grid b{display:block;font-size:16px}.sc-grid span{font-size:11px;color:var(--muted)}
.trend.up{color:var(--good-text)}.trend.down{color:var(--danger)}.trend.flat{color:var(--muted-2)}
.q-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--surface);cursor:pointer}
.q-row small{display:block;color:var(--muted);font-size:11px}
.li-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--surface);font-size:13px;cursor:pointer;min-width:0}
.li-row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-res{max-height:240px;overflow:auto}
.ac-res:not(:empty){border:1px solid var(--surface);border-radius:8px;margin-top:4px;padding:2px 10px;background:var(--panel);box-shadow:0 6px 20px rgba(20,30,50,.08)}
.ac-res .li-row{padding:8px 0}
@media(max-width:1100px){.places-wrap{grid-template-columns:1fr}.street-cards{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.street-cards{grid-template-columns:1fr}}

/* 4.7.5 planner + timeline + narrative */
.plan-card{padding:8px 18px}
.plan-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--surface);cursor:pointer}
.plan-row.brk{opacity:.6;cursor:default}
.plan-time{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-weight:700;font-size:16px;color:var(--night);width:52px;flex:none}
.plan-main{flex:1;min-width:0}.plan-main small{display:block;color:var(--muted);font-size:12px}
.tl-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--surface);font-size:14px}
.tl-ic{color:var(--primary);font-size:14px;margin-top:2px}
.tl-main{flex:1;min-width:0}.tl-main small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.narr p{font-size:16px;line-height:1.55;margin:10px 0;color:var(--ink)}
.narr-rec{margin-top:16px;padding:14px 16px;background:var(--night);color:var(--panel);border-radius:12px}
.narr-rec b{color:var(--muted-2);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.narr-rec p{color:var(--panel);margin:4px 0 0}
.login-sub{color:var(--muted);text-align:center;font-size:13px;margin:6px 0 18px}
.login-ver{text-align:center;color:var(--muted-2);font-size:11px;margin-top:14px}
.login-card{box-shadow:0 20px 60px rgba(15,27,51,.12);border-radius:20px}
/* Sidebar footer: Switch place and Sign out as icons on one row with the version, rather than two
   full-width rows for two things used occasionally. Both buttons carry title + aria-label in the
   markup — an icon button with no accessible name is the trap this pattern usually falls into. */
.side-foot-row{display:flex;align-items:center;gap:6px;padding:4px 4px 2px}
.side-icon{width:34px;height:34px;flex:none;border:0;background:transparent;color:var(--on-dark);
  border-radius:9px;display:grid;place-items:center;cursor:pointer}
.side-icon svg{width:17px;height:17px;opacity:.72}
.side-icon:hover{background:rgba(255,255,255,.055);color:#fff}
.side-icon:hover svg{opacity:1}
.side-icon:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* --on-dark-soft, not --muted: Slate on Rich Black is 3.5:1 and this line had been failing AA. */
.side-ver{color:var(--on-dark-soft);font-size:11px;margin-left:auto;padding-right:6px;white-space:nowrap}
.econ-row{display:grid;grid-template-columns:1.4fr .8fr .8fr .8fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--surface)}
.econ-row b{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.econ-row input{margin:0}
.chips-wrap{margin:8px 0}
.chip2{display:inline-block;background:var(--surface);border-radius:999px;padding:5px 10px;font-size:12px;margin:0 6px 6px 0}
.chip2 b{color:var(--primary);cursor:pointer;margin-left:4px}
.badge{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;margin-left:6px}
.badge.good{background:var(--good-bg);color:var(--good-text)}.badge.bad{background:var(--danger-bg);color:var(--danger)}
.badge.muted{background:var(--surface);color:var(--muted)}
.rf-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.rf-bar label{font-size:12px;font-weight:650;color:var(--muted);display:flex;flex-direction:column;gap:5px;min-width:150px}
.rf-bar label select,.rf-bar label input{margin:0;min-width:150px}
.rf-check{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 14px;white-space:nowrap}
.rf-check input{width:auto;margin:0}
.complete-dot{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-weight:700;font-size:13px;line-height:1}
.complete-dot.yes{background:var(--good-bg);color:var(--good-text)}
.complete-dot.no{background:var(--danger-bg);color:var(--danger)}
.report-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.report-hub-card{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px;text-align:left;box-shadow:var(--shadow);cursor:pointer;transition:.12s}
.report-hub-card:hover{box-shadow:0 12px 26px rgba(15,23,42,.1);transform:translateY(-1px)}
.report-hub-card b{display:block;font-size:17px;font-family:'Space Grotesk','Instrument Sans',sans-serif;margin-bottom:6px}
.report-hub-card span{display:block;color:var(--muted);font-size:14px;line-height:1.4}
/* Additive only — styling for the new openModal()/onDelegate() foundation, not used by any existing
   screen yet. Doesn't touch or override any pre-existing selector. */
.modal-overlay{position:fixed;inset:0;background:rgba(11,23,48,.45);display:flex;align-items:center;justify-content:center;z-index:200;padding:24px}
.modal-panel{background:var(--panel);border-radius:20px;box-shadow:0 30px 70px rgba(15,23,42,.25);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:24px}
.modal-panel:focus{outline:none}
.ws-ic{width:40px;height:40px;border-radius:4px;background:var(--night);color:var(--panel);display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.ws-img{width:40px;height:40px;border-radius:4px;object-fit:cover;flex:none}
.workspace-card{display:flex;align-items:center;gap:12px;text-align:left}

/* 4.7.7 business tabs + health badge */
.biz-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.biz-chips .chip{background:var(--surface);color:var(--night);margin-right:6px}
.health-badge{border:1px solid var(--border,var(--surface));border-radius:14px;padding:10px 18px;text-align:right;min-width:220px}
.health-badge span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.health-badge b{font-size:30px;font-family:'Space Grotesk','Instrument Sans',sans-serif}
.health-badge small{display:block;color:var(--muted);font-size:12px}
.health-badge.good b{color:var(--good-text)}.health-badge.good{background:var(--panel)}
.health-badge.warn b{color:var(--warn-text)}.health-badge.bad b{color:var(--danger-text)}.health-badge.bad{background:var(--panel)}
.tabbar{display:flex;gap:6px;border-bottom:1px solid var(--border,var(--surface));margin-bottom:16px;flex-wrap:wrap}
.tabbar .tab{background:none;border:none;padding:10px 14px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit}
.tabbar .tab.on{color:var(--primary);border-bottom-color:var(--primary)}

.verdict{font-size:20px;font-weight:650;font-family:'Space Grotesk','Instrument Sans',sans-serif}
.verdict.good{color:var(--good-text)}.verdict.bad{color:var(--danger)}

/* Nav groups (collapsible sidebar sections) + global command bar */
.nav-section{width:100%;border:0;background:transparent;color:var(--on-dark-soft);font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;font-weight:600;margin:14px 0 3px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:20px}
.nav-section svg{width:14px;height:14px;transition:transform .15s;flex-shrink:0}
.nav-group.collapsed .nav-section svg{transform:rotate(-90deg)}
.nav-group.collapsed .nav-group-items{display:none}
.cmdbar-wrap{position:relative;flex:1;max-width:480px;margin:0 24px;display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:0 12px;gap:8px}
.cmdbar-wrap svg{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.cmdbar-input{border:0;background:transparent;padding:10px 0;text-transform:none;font-weight:600;letter-spacing:normal;font-size:14px;color:var(--night);box-shadow:none!important}
.cmdbar-input:focus{box-shadow:none!important}
.cmdbar-results{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:420px;overflow-y:auto;z-index:20;text-align:left}
.cmdbar-results.show{display:block}
.cmdbar-group-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:650;color:var(--muted);padding:10px 14px 4px}
.cmdbar-item{width:100%;border:0;background:transparent;text-align:left;padding:10px 14px;display:flex;flex-direction:column;gap:2px;cursor:pointer;text-transform:none;letter-spacing:normal}
.cmdbar-item:hover{background:var(--panel)}
.cmdbar-item b{font-size:14px;font-weight:700;color:var(--night)}
.cmdbar-item small{font-size:12px;color:var(--muted);font-weight:600}
.topbar-place{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
/* .mobile-search-btn only exists below 900px - hide it above, where the inline bar is used instead. */
.mobile-search-btn{display:none}
@media(max-width:900px){
  /* Specificity, not the media query, decides this: .topbar>div{display:flex} (a type selector plus
     a class = higher specificity than a bare .cmdbar-wrap) was winning at every width, so the intended
     display:none here was silently defeated - the bar stayed visible but squeezed by flex to a 0-width
     input, a search box that looked tappable and did nothing. Matching selector shape (.topbar>.cmdbar-wrap)
     ties on specificity and wins on source order instead. */
  .topbar>.cmdbar-wrap{display:none}
  .mobile-search-btn{display:inline-flex;align-items:center;justify-content:center}
  .cmdbar-wrap.mobile-open{display:flex!important;position:fixed;top:56px;left:0;right:0;margin:0;
    max-width:none;z-index:50;border-radius:0;padding:10px 14px;box-shadow:var(--shadow)}
}

/* Quick-view drawer — first phase of item 2, wired against Businesses and Contacts */
.drawer-backdrop{position:fixed;inset:0;background:rgba(11,16,32,.35);opacity:0;pointer-events:none;transition:opacity .18s;z-index:40}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer-panel{position:fixed;top:0;right:0;bottom:0;width:min(430px,92vw);background:var(--panel);box-shadow:-18px 0 48px rgba(11,17,23,.22);transform:translateX(100%);transition:transform .22s ease;z-index:41;padding:24px 22px 28px;overflow-y:auto}
.drawer-panel.open{transform:translateX(0)}
.drawer-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border:1px solid var(--line);background:var(--surface);border-radius:9px;display:grid;place-items:center;cursor:pointer}
.drawer-close svg{width:16px;height:16px}
.drawer-head{padding-right:44px;margin-bottom:16px}
.drawer-head h2{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:22px;margin:0 0 10px;line-height:1.2}
.drawer-chips .badge{margin-right:6px}
.drawer-facts{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin-top:14px}
.drawer-fact{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.drawer-fact span{color:var(--muted);font-weight:600;font-size:13px}
.drawer-fact b{font-weight:700;font-size:13px;text-align:right}
.drawer-actions{display:flex;gap:10px;margin-top:20px}
@media(max-width:600px){.drawer-panel{width:100vw}}

/* BID Command Centre dashboard fixes: ballot stacked bar, contrast on secondary text */
.ballot-stack{display:flex;width:100%;height:14px;border-radius:999px;overflow:hidden;background:var(--surface);margin-top:10px}
.ballot-seg{height:100%;min-width:2px}
.ballot-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.ballot-leg-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.ballot-leg-item i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ballot-leg-item b{font-weight:700}

/* Notifications bell/inbox — starting with task assignment, see loadNotifCount() in app-4-8-16.js */
.notif-dot{position:absolute;top:2px;right:2px;background:var(--danger-text);color:var(--panel);font-size:10px;font-weight:700;border-radius:999px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-panel{position:absolute;top:52px;right:0;width:340px;max-height:420px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);z-index:30;text-transform:none;letter-spacing:normal}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.notif-row{padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:400}
.notif-row:last-child{border-bottom:none}
.notif-row.unread{background:var(--panel)}
.notif-row b{font-size:13px;display:block}
.notif-body{color:var(--muted);margin-top:2px}
.notif-row small{color:var(--muted-2);display:block;margin-top:4px}
.notif-empty{padding:24px 16px;text-align:center;color:var(--muted);font-size:13px;font-weight:400}
.link-btn{border:none;background:none;color:var(--primary);font-weight:650;font-size:12px;padding:0;cursor:pointer}
.pagination{display:flex;align-items:center;justify-content:center;gap:14px;margin:10px 0}
.pagination button:disabled{opacity:.4;cursor:default}
.pagination span{font-weight:700;color:var(--muted);font-size:13px}
.wx-pill{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 16px;font-weight:650;color:var(--night);font-size:14px;white-space:nowrap}
.wx-pill .wx-date{color:var(--muted);font-weight:700}
.wx-pill .wx-icon{font-size:17px;line-height:1}
.wx-pill .wx-temp small{color:var(--muted);font-weight:700}
.head-stack{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.head-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.wx-strip{display:flex;gap:8px}
.wx-strip .wx-day{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-width:62px}
.wx-strip .wx-dl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:650}
.wx-strip .wx-ic{font-size:20px;line-height:1}
.wx-strip .wx-t{font-weight:650;font-size:13px;color:var(--night)}
.wx-strip .wx-t small{color:var(--muted);font-weight:700;margin-left:2px}
.wx-block{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.wx-say{max-width:340px;text-align:right;font-size:12.5px;line-height:1.35;color:var(--muted);font-weight:600}
/* Command Centre: a hero priorities panel + a compact place-health card on the main row, then an
   even three-up detail row. Cleaner hierarchy than the old equal-tile grid. */
.cmd-grid-main{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
.cmd-grid-main>.card{margin:0}
.health-card{align-self:start}
.health-card .health-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.health-score{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-weight:650;font-size:34px;line-height:1;color:var(--night)}
.health-score small{font-size:14px;color:var(--muted);font-weight:600;margin-left:1px}
.health-card .health-bar{margin:12px 0 14px}
.health-comps{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.health-comps .hc{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted);border-bottom:1px solid var(--surface);padding-bottom:7px}
.health-comps .hc b{font-weight:650}.health-comps .hc b.pos{color:var(--good-text)}.health-comps .hc b.neg{color:var(--danger)}
@media(max-width:1000px){.cmd-grid-main{grid-template-columns:1fr}}
/* Crime Intelligence offender gallery */
.ci-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.ci-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;cursor:pointer;box-shadow:var(--shadow);text-align:center}
.ci-card:hover{border-color:var(--line)}
.ci-card img{display:block;margin:0 auto}
.ci-card>div:first-child{margin:0 auto}
.ci-card-b{margin-top:10px}
.ci-card-b b{display:block;font-size:14px}
.ci-card-b small{display:block;color:var(--muted);font-size:12px}
.ci-shots{display:flex;flex-wrap:wrap;gap:10px}
.ci-shot{position:relative;width:120px;height:120px;border-radius:12px;overflow:hidden;background:var(--surface)}
.ci-shot img{width:100%;height:100%;object-fit:cover}
.ci-shot-src{position:absolute;left:0;bottom:0;right:0;background:rgba(11,23,48,.72);color:var(--panel);font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:2px 4px;text-align:center}
.ci-shot-rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(11,23,48,.72);color:var(--panel);font-size:14px;line-height:1;cursor:pointer}
.ci-off-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:12px}
/* Crime Intelligence member portal — its own small shell, independent of the CRM app */
.mbr-app{min-height:100vh;background:var(--bg,var(--panel));display:flex;flex-direction:column}
.mbr-top{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.mbr-title b{display:block;font-size:15px;line-height:1.1}
.mbr-title small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.mbr-biz{background:var(--primary);color:var(--panel);font-weight:700;font-size:12px;padding:5px 10px;border-radius:999px}
.mbr-main{max-width:760px;width:100%;margin:0 auto;padding:16px}
.mbr-card{padding:18px}
.mbr-terms{margin:8px 0 0;padding-left:18px;color:var(--ink);font-size:14px;line-height:1.5}
.mbr-terms li{margin-bottom:8px}
.mbr-tabs{display:flex;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:5px;margin-bottom:14px}
.mbr-tab{flex:1;border:0;background:none;padding:10px;border-radius:10px;font-weight:700;color:var(--muted);cursor:pointer;font-size:14px}
.mbr-tab.on{background:var(--primary);color:var(--panel)}
.mbr-subtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mbr-subtab{border:1px solid var(--line);background:var(--panel);padding:6px 12px;border-radius:999px;font-weight:700;color:var(--muted);cursor:pointer;font-size:13px}
.mbr-subtab.on{border-color:var(--primary);color:var(--primary);background:rgba(0,0,0,.02)}
.mbr-subtab span{display:inline-block;margin-left:5px;background:var(--line);color:var(--ink);border-radius:999px;padding:0 6px;font-size:11px}
.mbr-subtab.on span{background:var(--primary);color:var(--panel)}
.mbr-access-row .grow small{display:block;margin-top:2px}
.mbr-cta{display:flex;gap:8px;margin:12px 0}
.mbr-cta .btn{flex:1}
.mbr-home{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.mbr-feed{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.mbr-feed-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:8px 6px;border-radius:10px;cursor:pointer}
.mbr-feed-row:hover{background:rgba(0,0,0,.04)}
.mbr-feed-row.static{cursor:default}
.mbr-feed-row.static:hover{background:none}
.mbr-feed-b{min-width:0}
.mbr-feed-b b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbr-feed-b small{color:var(--muted);font-size:12px}
.mbr-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--line)}
.mbr-thumb.ph{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.mbr-partners{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.mbr-partner{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mbr-partner small{display:block;color:var(--muted);font-size:12px}
.mbr-partner p{margin:6px 0;font-size:14px}
.mbr-search{margin:12px 0 10px}
.mbr-search input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:15px;background:var(--panel)}
.mbr-galleries{display:flex;gap:8px;flex-wrap:wrap}
.mbr-gal{border:1px solid var(--line);background:var(--panel);padding:6px 12px;border-radius:999px;font-weight:700;color:var(--muted);cursor:pointer;font-size:13px}
.mbr-gal.on{border-color:var(--primary);color:var(--primary)}
.mbr-gal span{display:inline-block;margin-left:5px;background:var(--line);color:var(--ink);border-radius:999px;padding:0 6px;font-size:11px}
.mbr-gal.on span{background:var(--primary);color:var(--panel)}
.mbr-criteria{margin-top:8px;font-style:italic}
.mbr-ref{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.mbr-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mbr-check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer;margin:0}
.mbr-check:has(input:checked){border-color:var(--primary);color:var(--primary);font-weight:650}
.mbr-check input{margin:0;accent-color:var(--primary)}
.mbr-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.mbr-thumb-wrap{position:relative;width:88px;height:88px}
.mbr-thumb-wrap img{width:88px;height:88px;object-fit:cover;border-radius:12px;background:var(--line)}
.mbr-thumb-x{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:0;background:var(--danger);color:var(--panel);font-size:15px;line-height:1;cursor:pointer;font-weight:700}
.mbr-submit{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);padding:14px 0 6px;margin-top:16px;gap:8px}
.mbr-submit .btn{flex:1}
.mbr-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mbr-kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.mbr-kpi b{display:block;font-size:24px}
.mbr-kpi small{color:var(--muted);font-size:12px}
.mbr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mbr-off{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.mbr-off:hover{border-color:var(--line)}
.mbr-off-b b{display:block;font-size:14px;margin-bottom:4px}
.mbr-inc-list{display:flex;flex-direction:column;gap:10px}
.mbr-inc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.mbr-inc-h{display:flex;justify-content:space-between;align-items:baseline}
.mbr-inc-h span{color:var(--muted);font-size:12px}
.mbr-inc p{margin:6px 0 0;font-size:14px}
.mbr-inc small{color:var(--muted);font-size:12px}
.mbr-shots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mbr-shots img{width:110px;height:110px;object-fit:cover;border-radius:10px}
.mbr-warn{background:var(--danger-bg);color:var(--danger-text);border-radius:8px;padding:8px 10px;font-weight:700;font-size:13px}
.mbr-kvs{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.mbr-kv{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:5px 0;font-size:13px}
.mbr-kv span{color:var(--muted)}
.mbr-bans{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.mbr-ban{border:1px solid var(--line);border-left:4px solid var(--danger,var(--danger-text));border-radius:8px;padding:10px}
.mbr-ban b{display:block}
.mbr-ban small{display:block;color:var(--muted);font-size:12px}
.mbr-ban p{margin:6px 0 0;font-size:13px}
.mbr-access-list{display:flex;flex-direction:column;gap:8px}
.mbr-access-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.mbr-access-row .grow{flex:1;min-width:0}
.mbr-access-row small{color:var(--muted);font-size:12px}
.mbr-alerts{display:flex;flex-direction:column;gap:12px}
.mbr-alert{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:12px;padding:14px}
.mbr-alert.urgent{border-left-color:var(--danger,var(--danger-text));background:var(--panel)}
.mbr-alert-img{width:72px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.mbr-alert-lab{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.mbr-alert.urgent .mbr-alert-lab{color:var(--danger,var(--danger-text))}
.mbr-alert-b b{display:block;font-size:15px;margin-bottom:4px}
.mbr-alert-b p{margin:0 0 8px;font-size:14px;color:var(--ink)}
/* Crime Intelligence outcome timeline (offender + incident) */
.ci-timeline{display:flex;flex-direction:column;gap:0}
.ci-tl-row{display:flex;gap:12px;position:relative;padding:0 0 14px 2px}
.ci-tl-row:not(:last-child)::before{content:"";position:absolute;left:6px;top:14px;bottom:0;width:2px;background:var(--line)}
.ci-tl-dot{width:14px;height:14px;border-radius:50%;background:var(--primary);flex:0 0 auto;margin-top:2px;box-shadow:0 0 0 3px var(--panel)}
.ci-tl-b{flex:1;min-width:0}
.ci-tl-h{display:flex;align-items:center;gap:8px}
.ci-tl-date{color:var(--muted);font-size:12px}
.ci-tl-b small{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.ci-tl-b p{margin:4px 0 0;font-size:14px}
.ci-tl-b .row-btn{margin-top:4px}
.banner-note{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ink)}
/* A banner reporting a real failure. Red is legitimate here under the colour rules — a draft that did
   not finish is a genuine problem, not a routine status. */
.banner-note.bad{background:var(--danger-bg);border-color:var(--danger-border)}
.banner-note.bad b{color:var(--danger-text)}
.ci-off-list .checkline{display:flex;align-items:center;gap:8px;margin:0}
.ci-off-list .checkline input{width:auto;margin:0}
.ci-ban{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--panel);border-radius:16px;padding:16px 22px;margin:0 0 16px;box-shadow:var(--shadow)}
.ci-ban .ci-ban-k{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.85}
.ci-ban b{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:22px}
.ci-ban .ci-ban-timer{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:20px;font-weight:650;text-align:right;white-space:nowrap}
/* Crime Intelligence overview: 12-month trend + breakdown bars (CSS only, no chart library) */
.ci-trend{display:flex;align-items:flex-end;gap:6px;margin-top:14px;height:150px}
.ci-tcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.ci-tbar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--panel);border-radius:6px;overflow:hidden}
.ci-tbar-wrap i{display:block;width:100%;background:linear-gradient(180deg,var(--primary),var(--danger-text));border-radius:6px 6px 0 0;min-height:2px}
.ci-tn{font-size:11px;font-weight:650;color:var(--ink);height:14px}
.ci-tl{font-size:11px;color:var(--muted);font-weight:700}
.ci-bd{margin-bottom:12px}
.ci-bd-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;margin-bottom:5px}
.ci-bd-top span{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci-bd-top b{white-space:nowrap;font-weight:650}
.ci-bd-bar{height:7px;border-radius:5px;background:var(--surface);overflow:hidden}
.ci-bd-bar i{display:block;height:100%;background:var(--primary);border-radius:5px}
.mbr-schemes{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ci-note{border-left:3px solid var(--line);padding:8px 0 8px 12px;margin-bottom:10px}
.ci-note-h{display:flex;align-items:baseline;gap:10px;font-size:13px}
.ci-note-h span{color:var(--muted);font-size:12px}
.ci-note-h .row-btn{margin-left:auto}
.ci-note p{margin:4px 0 0;font-size:14px;white-space:pre-wrap}
.ci-note-add{display:flex;gap:8px;align-items:flex-start;margin-bottom:14px}
.ci-note-add textarea{flex:1;min-height:44px}
.mbr-intel{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mbr-intel textarea{width:100%;margin-bottom:8px}
/* Sprint 5: crime map, distribution strips and ranked bars */
.ci-map{height:460px;border-radius:14px;border:1px solid var(--line);margin-top:12px;background:var(--surface)}
.ci-bars{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.ci-bar-row{display:grid;grid-template-columns:minmax(90px,1.3fr) 3fr auto;align-items:center;gap:10px;font-size:13px}
.ci-bar-l{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-bar-t{background:var(--line);border-radius:999px;height:9px;overflow:hidden}
.ci-bar-t i{display:block;height:100%;background:var(--primary);border-radius:999px}
.ci-bar-row b{font-weight:650;font-size:12px;white-space:nowrap}
.ci-when{margin-top:8px}
.ci-when-cols{display:flex;align-items:flex-end;gap:2px;height:78px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:6px}
.ci-when-cols.wide{gap:6px}
.ci-when-cols span{flex:1;background:var(--primary);border-radius:3px 3px 0 0;min-height:2px}
.ci-when-cols span.z{background:var(--line)}
.ci-when-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px;padding:0 4px}
.ci-when-ax.wide span{flex:1;text-align:center}
.ci-up{color:var(--danger);font-weight:650}

/* ---- SIVO brand: sign-in and in-app branding ---------------------------------
   Rebuilt on Paper (v4.9.345). The previous screen was a dark card on near-black, inherited from the
   SIVO Field app where a near-black screen genuinely suits a phone used outdoors after dark. On a
   desktop product opened every weekday morning it read as gloomy, and it was the one screen in the
   product not using the agreed palette at all.

   Now: Paper ground, White card, Rich Black display type, Signal Blue the only action colour. The
   left half says what the product does, so signing in looks like arriving somewhere rather than
   passing a checkpoint. Lime Spark stays out of it entirely - parent brand, never interface. */
:root{--sivo-ink:var(--night);--sivo-violet:var(--primary);--sivo-cream:var(--surface);--sivo-muted:var(--muted-2)}

.pm-signin{min-height:100vh;background:var(--paper);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 28px 24px}
/* The boundary drawing. Sits behind everything and is never read. */
.pm-signin-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  color:var(--line);opacity:.55}
.pm-signin-pin circle{fill:var(--primary);opacity:.22}
.pm-signin-grid{position:relative;z-index:1;width:100%;max-width:1080px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}

/* ---- the pitch ---- */
.pm-signin-lockup{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.pm-signin-div{width:1px;height:22px;background:var(--line)}
.pm-signin-by{color:var(--muted);font-size:13px;font-weight:600}
.pm-signin-h1{font-family:'Space Grotesk','Instrument Sans',sans-serif;color:var(--night);
  font-size:clamp(32px,4vw,44px);font-weight:600;line-height:1.08;letter-spacing:-.025em;
  margin:0 0 14px;text-wrap:balance;max-width:12ch}
.pm-signin-lede{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 30px;max-width:46ch}
.pm-signin-caps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.pm-signin-caps li{display:flex;flex-direction:column;gap:3px;padding-left:13px;position:relative}
/* A Signal Blue rule rather than a bullet or an icon: it marks the item without inventing a glyph. */
.pm-signin-caps li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  border-radius:2px;background:var(--primary);opacity:.32}
.pm-signin-caps b{color:var(--ink);font-size:14px;font-weight:650;letter-spacing:-.005em}
.pm-signin-caps span{color:var(--muted);font-size:13px;line-height:1.5}

/* ---- the card ---- */
.pm-signin-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:34px 32px 26px;box-shadow:0 1px 2px rgba(2,13,25,.04),0 24px 60px rgba(2,13,25,.09)}
.pm-signin-h2{font-family:'Space Grotesk','Instrument Sans',sans-serif;color:var(--night);
  font-size:25px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.pm-signin-sub{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 20px}
.pm-signin-card label{display:block;text-align:left;color:var(--muted);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;margin-top:16px}
.pm-signin-card input{width:100%;margin-top:7px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;color:var(--ink);font:inherit}
.pm-signin-card input::placeholder{color:var(--muted)}
.pm-signin-card input:focus{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 45%,transparent)}
.pm-signin-btn{width:100%;margin-top:24px;border:0;border-radius:12px;background:var(--primary);
  color:#fff;font-weight:700;font-size:15.5px;padding:14px 18px;cursor:pointer;transition:.15s}
.pm-signin-btn:hover{background:var(--primary-hi)}
.pm-signin-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pm-signin-link{background:none;border:0;color:var(--primary);font-weight:650;font-size:13.5px;
  margin-top:16px;cursor:pointer;width:100%;text-align:center;padding:4px}
.pm-signin-link:hover{color:var(--primary-hi);text-decoration:underline}
.pm-signin-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
.pm-signin .err{color:var(--danger-text);font-size:13px;font-weight:700;margin-top:12px;min-height:1em}
.pm-signin-ver{color:var(--muted);font-size:11.5px;text-align:center;margin:18px 0 0;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.pm-signin-foot{position:relative;z-index:1;color:var(--muted);font-size:12.5px;letter-spacing:.04em;
  margin-top:34px}
/* The reset panel, revealed under the button. */
.pm-signin-forgot{margin-top:14px;padding:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;text-align:left}
.pm-signin-forgot .btn{margin-top:12px;width:100%}
.pm-signin-forgot .sub{color:var(--muted);font-size:12.5px;line-height:1.5;margin:10px 0 0}

@media(max-width:940px){
  .pm-signin{padding:32px 20px 20px}
  .pm-signin-grid{grid-template-columns:1fr;gap:34px;max-width:480px}
  /* Card first on a phone: somebody on a small screen came here to sign in, not to read the pitch. */
  .pm-signin-card{order:-1}
  .pm-signin-h1{font-size:29px;max-width:none}
  .pm-signin-caps{gap:14px 20px}
}
@media(max-width:520px){
  .pm-signin-card{padding:26px 22px 20px}
  .pm-signin-caps{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.pm-signin-btn{transition:none}}

/* Product branding in the top bar, once signed in. */
.topbar-brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.topbar-brand b{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--sivo-ink);text-transform:none}
.topbar-divider{width:1px;height:20px;background:var(--line);margin:0 4px;flex:0 0 auto}
.sivo-mark{display:block;flex:0 0 auto}
@media(max-width:760px){.topbar-brand b{display:none}}
/* Captured Outlook email on the Urban Spark client timeline. Distinct from a hand-written note. */
.us-email{border-left:3px solid var(--sivo-violet);background:var(--panel);border-radius:12px;padding:12px 14px}
.us-email.out{border-left-color:var(--muted);background:var(--panel)}
.us-email span{display:block;color:var(--muted);font-size:13px;margin:3px 0}
.us-email p{margin:4px 0 0}
.us-email-prev{color:var(--muted);font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.us-email a{color:var(--primary);font-weight:700}

/* BidMail audience: email-source note + area/sector filter chips */
.mc-filter-box{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--soft)}
.mc-facets{display:flex;flex-wrap:wrap;gap:7px}
.mc-facet{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 11px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.mc-facet.on{border-color:var(--primary);color:var(--primary);background:rgba(0,0,0,.02)}
.mc-facet span{display:inline-block;margin-left:5px;background:var(--line);color:var(--ink);border-radius:999px;padding:0 6px;font-size:11px}
.mc-facet.on span{background:var(--primary);color:var(--panel)}

/* ===== Crime Intelligence scheme chat ===== */
.cichat-wrap{display:flex;flex-direction:column;max-width:820px}
.cichat-rooms{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cichat-room{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.cichat-room.on{background:var(--primary);border-color:var(--primary);color:var(--panel)}
.cichat-badge{display:inline-block;margin-left:6px;background:var(--danger,var(--danger-text));color:var(--panel);border-radius:999px;padding:0 6px;font-size:11px}
.cichat-room.on .cichat-badge{background:var(--panel);color:var(--primary)}
.cichat-msgs{height:min(58vh,520px);overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:var(--bg,var(--panel));padding:14px;display:flex;flex-direction:column;gap:8px}
.cichat-msg{display:flex;max-width:78%}
.cichat-msg.mine{align-self:flex-end;justify-content:flex-end}
.cichat-bubble{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 12px;font-size:14px;line-height:1.4;position:relative;white-space:pre-wrap;word-break:break-word}
.cichat-msg.mine .cichat-bubble{background:var(--primary);border-color:var(--primary);color:var(--panel)}
.cichat-msg.urgent .cichat-bubble{border-color:var(--danger,var(--danger-text));box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 15%,transparent)}
.cichat-flag{display:inline-block;background:var(--danger,var(--danger-text));color:var(--panel);border-radius:6px;padding:0 6px;font-size:10px;font-weight:650;text-transform:uppercase;letter-spacing:.03em;margin-right:4px;vertical-align:middle}
.cichat-meta{margin-top:4px;font-size:11px;opacity:.7;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cichat-msg.mine .cichat-meta{color:var(--panel);opacity:.85}
.cichat-biz{opacity:.85}
.cichat-del{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;line-height:1;opacity:.6;padding:0 2px;margin-left:auto}
.cichat-del:hover{opacity:1}
.cichat-composer{display:flex;align-items:center;gap:10px;margin-top:10px}
.cichat-composer textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;max-height:120px;min-height:42px}
.cichat-urgent{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
/* field-staff CI alerts */
.ci-alerts{display:flex;flex-direction:column;gap:10px}
.ci-alert{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.ci-alert.urgent{border-color:var(--danger,var(--danger-text));box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 12%,transparent)}
.ci-alert .grow{flex:1;min-width:0}
.ci-alert-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ci-alert-img{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--surface);flex:none}
.ci-alert p{margin:4px 0}
/* presence (who's online) */
.cichat-presence{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,var(--muted));margin-bottom:8px}
.cichat-presence .cichat-dot{width:8px;height:8px;border-radius:50%;background:var(--good-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent);flex:none}
.cichat-online-names{opacity:.8}
/* typing indicator */
.cichat-typing{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted,var(--muted));min-height:18px;margin:6px 2px 0}
.cichat-typedots{display:inline-flex;gap:3px}
.cichat-typedots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;animation:cichatType 1.2s infinite}
.cichat-typedots i:nth-child(2){animation-delay:.2s}
.cichat-typedots i:nth-child(3){animation-delay:.4s}
@keyframes cichatType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
/* attach button + image bubble + preview */
.cichat-attach{flex:none;width:40px;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;color:var(--muted,var(--muted));cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.cichat-attach:hover{color:var(--primary);border-color:var(--primary)}
.cichat-attach svg{width:20px;height:20px}
.cichat-img{display:block;margin-bottom:6px}
.cichat-img img{max-width:240px;max-height:260px;width:auto;border-radius:10px;display:block;background:rgba(0,0,0,.04)}
.cichat-msg.mine .cichat-img img{background:rgba(255,255,255,.15)}
.cichat-preview{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg,var(--panel))}
.cichat-preview img{width:44px;height:44px;object-fit:cover;border-radius:8px;flex:none}
.cichat-pv-name{font-size:12px;color:var(--muted,var(--muted));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cichat-pv-rm{margin-left:auto;background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--muted,var(--muted));padding:0 4px;flex:none}
.cichat-pv-rm:hover{color:var(--danger,var(--danger-text))}

/* ===== Purple Flag ===== */
.pf-counts{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pf-count{flex:1 1 180px;background:var(--card,var(--panel));border:1px solid var(--line,var(--surface));border-left-width:4px;border-radius:12px;padding:12px 14px}
.pf-count.good{border-left-color:var(--good-text)}
.pf-count.warn{border-left-color:var(--warn-text)}
.pf-count.bad{border-left-color:var(--danger,var(--danger-text))}
.pf-count-l{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,var(--muted))}
.pf-count b{display:block;font-size:20px;line-height:1.3;margin-top:2px}
.pf-count small{color:var(--muted,var(--muted))}
.pf-crit{margin-bottom:12px}
.pf-crit-h{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.pf-crit-h span{color:var(--muted,var(--muted));font-size:12px}
.pf-bar{height:7px;border-radius:99px;background:var(--line,var(--surface));overflow:hidden}
.pf-bar i{display:block;height:100%;border-radius:99px;background:var(--good-text);transition:width .3s}
.pf-grp-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pf-grp-h small{display:block;color:var(--muted,var(--muted));font-weight:400}
.pf-subs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip-x{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;padding:0 2px;color:var(--muted,var(--muted))}
.chip-x:hover{color:var(--danger,var(--danger-text))}

/* ===== Best Bar None ===== */
.bbn-pipe{display:flex;gap:8px;flex-wrap:wrap}
.bbn-stage{flex:1 1 110px;border:1px solid var(--line,var(--surface));background:var(--card,var(--panel));border-radius:12px;padding:12px 10px;text-align:left;cursor:pointer;font:inherit}
.bbn-stage:hover{border-color:var(--primary)}
.bbn-stage b{display:block;font-size:22px;line-height:1.1}
.bbn-stage span{display:block;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,var(--muted));margin-top:3px}
.bbn-stage.zero b{color:var(--muted,var(--muted));opacity:.5}
.bbn-unlinked{color:var(--warn-text);font-weight:600}
.bbn-unlinked-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--warn-text)}
.bbn-match{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line,var(--surface));border-radius:10px;padding:10px 12px;margin-bottom:6px}
.bbn-match small{display:block;color:var(--muted,var(--muted))}
.bbn-match-r{display:flex;align-items:center;gap:8px;white-space:nowrap}
.bbn-score{font-weight:650;font-size:12px;color:var(--muted,var(--muted))}
.bbn-score.mid{color:var(--warn-text)}
.bbn-score.hi{color:var(--ink)}
.bbn-link-ok{background:var(--line,var(--panel));border-radius:10px;padding:10px 12px;font-size:14px}
.bbn-check-warn{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:10px 12px;margin-top:12px;font-size:13px}
.bbn-check-warn small{display:block;color:var(--muted,var(--muted));margin-top:4px}
.bbn-check-ok{background:var(--panel);border:1px solid var(--good);border-radius:10px;padding:8px 12px;margin-top:12px;font-size:13px}
.bbn-brief{border:1px solid var(--line,var(--surface));border-left:4px solid var(--warn-text);border-radius:10px;padding:10px 12px}
.bbn-brief.ok{border-left-color:var(--good-text)}
.bbn-brief-tag{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted,var(--muted));margin-bottom:6px}
.bbn-brief textarea{width:100%}
.pf-gap{background:var(--card,var(--panel));border:1px solid var(--line,var(--surface));border-left:4px solid var(--primary);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.guest-row{display:flex;gap:8px;margin-bottom:6px}
.guest-row input{flex:1}

/* ===== Event table planner ===== */
.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:10px}
.pl-table{border:1px solid var(--line,var(--surface));border-radius:12px;padding:10px 12px;background:var(--card,var(--panel))}
.pl-table.full{border-color:var(--good);background:var(--panel)}
.pl-table.target{cursor:pointer}
.pl-table.target:hover{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 12%,transparent)}
.pl-h{display:flex;align-items:baseline;gap:6px;margin-bottom:6px}
.pl-h b{flex:1}
.pl-shape{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,var(--muted))}
.pl-cap{font-size:12px;font-weight:700;color:var(--muted,var(--muted))}
/* The table's host. Interface chrome, so Signal Blue rather than the client's own colour. */
.pl-host{font-size:12px;color:var(--primary);margin:0 0 4px}
/* A cancelled event stays listed but reads as past-tense: muted, not hidden. Red is carried by the
   badge alone — the row is a status, not a problem, so it does not take a danger colour. */
.ev-cancelled td{color:var(--muted)}
.ev-cancelled td b{font-weight:600;text-decoration:line-through;text-decoration-thickness:1px}
/* AI cost tiles on Server health. Tabular figures so the four amounts line up on the decimal. */
.ai-spend{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:6px}
.ai-spend-cell{background:var(--panel);padding:13px 15px;display:flex;flex-direction:column;gap:3px}
.ai-spend-cell .l{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700}
.ai-spend-cell .v{font-size:21px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ai-spend-cell .s{font-size:12px;color:var(--muted)}
/* Event logo control on the booking settings card. */
.ev-logo-row{display:flex;gap:16px;align-items:flex-start;margin-top:12px;
  border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.ev-logo-prev{flex:0 0 auto;width:118px;height:78px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);display:grid;place-items:center;overflow:hidden;padding:8px}
.ev-logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.ev-logo-prev .muted{font-size:11px;text-align:center;line-height:1.3}
.ev-logo-act{flex:1;min-width:230px}
.ev-logo-act .sub{margin:4px 0 10px}
.pl-table ul,.pl-list{list-style:none;margin:0;padding:0}
.pl-table li,.pl-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:4px 0;border-top:1px solid var(--line,var(--surface))}
.pl-table li.on{background:var(--warn-bg);border-radius:6px;padding-left:4px;padding-right:4px}
.pl-need{display:inline-block;font-size:10px;font-weight:650;background:var(--warn);color:var(--on-gold);border-radius:4px;padding:1px 4px;margin-left:3px;cursor:help}
.pl-picked{background:var(--warn-bg);border:1px solid var(--warn);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:14px}

/* Event check-in: big tap targets, readable at arm's length at a door. */
.ci-list{max-height:52vh;overflow-y:auto}
.ci-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-bottom:1px solid var(--line)}
.ci-row.on{background:color-mix(in srgb,var(--good) 8%,transparent)}
.ci-row b{display:block;font-size:15px}
.ci-row small{display:block;color:var(--muted);font-size:12px}
.ci-row .ci-need{color:var(--danger);font-weight:600}
.ci-row .btn{min-width:96px}

/* ---- Event bookings modal: wide, two-column ----
   Setting an event up touches a dozen fields plus tickets, tables and a bookings list. In a 560px modal
   that is one long scroll where every section pushes the next off screen, and the format dropdown was
   literally truncating its own options. Wide panel, work on the left, reference on the right. */
.modal-panel.modal-wide{max-width:1180px;padding:26px 28px}
.ev-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.ev-head h3{margin:0 0 4px}
.ev-head .sub{margin:0}
.ev-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:12px}
.ev-cols>div{display:grid;gap:14px;align-content:start;min-width:0}
.ev-full{display:grid;gap:14px;margin-top:14px}
.ev-full .card{margin:0}
/* The KPI row is context, not the headline. At full premium size three of them ate a third of the
   panel before you reached a single field. */
.ev-kpis{gap:10px;margin-bottom:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.ev-kpis .kpi{padding:12px 14px;min-height:0;border-radius:14px}
.ev-kpis .kpi b{font-size:24px;margin-top:4px}
.ev-kpis .kpi small{font-size:12px}
.ev-cols .card{margin:0}
/* Checkboxes read as a row of switches, not as two orphaned form fields in a grid. */
.ev-checks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:10px 0 4px}
.ev-checks .rb-check{margin:0}
.ev-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:12px}
.ev-form>label.wide{grid-column:1/-1}
/* Helper text under a field was rendering at the same weight as the next label, so the two ran together
   and it read like a stray heading. Muted and normal weight puts it back underneath its own field. */
.ev-form small{display:block;font-weight:400;color:var(--muted);margin-top:5px;line-height:1.4}
.ev-form select,.ev-form input,.ev-form textarea{width:100%}
@media(max-width:1080px){
  .ev-cols{grid-template-columns:1fr}
  .modal-panel.modal-wide{max-width:820px}
}
@media(max-width:720px){
  .ev-form{grid-template-columns:1fr}
  .ev-head{flex-direction:column;gap:10px}
}

/* Comms template preview. The core block is shaded so it is visibly the part the workspace does not
   control — the design only works if that boundary is obvious, not merely enforced. */
.mail-preview{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--panel);font-size:14px;line-height:1.5;max-height:52vh;overflow:auto}
.mail-preview p{margin:0 0 10px}
.mail-subject{font-weight:650;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.mail-core{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
.mail-core p:last-child{margin-bottom:0}

/* ============ Rota (shifts) ============
   The grid scrolls horizontally inside its own container rather than letting the page scroll: seven
   day columns plus a name column will not fit a laptop, and a page that slides sideways loses the
   sidebar. */
.rota-nav{display:flex;align-items:center;gap:8px;margin:0 0 14px}
.rota-week{margin-left:6px;font-size:15px}
.rota-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.rota-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rota-grid{border-collapse:collapse;width:100%;min-width:900px}
.rota-grid th,.rota-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  vertical-align:top;padding:6px;text-align:left}
.rota-grid thead th{position:sticky;top:0;background:var(--panel);z-index:2;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 8px}
.rota-grid th.today,.rota-grid td.today{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.rota-grid .rota-who{position:sticky;left:0;background:var(--panel);z-index:1;min-width:170px;max-width:170px}
.rota-grid thead .rota-who{z-index:3}
.rota-who b{display:block;font-size:13px}
.rota-who small{display:block;color:var(--muted);font-size:11px}
.rota-grid td{min-width:112px}

.shift-chip{display:block;width:100%;text-align:left;margin:0 0 4px;padding:6px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--soft);cursor:pointer;font:inherit;color:inherit;line-height:1.25}
.shift-chip:hover{border-color:var(--primary)}
.shift-chip b{display:block;font-size:12px}
.shift-chip .chip-role{display:block;font-size:11px;color:var(--muted)}
/* Draft shifts are visually provisional on purpose — a manager must be able to tell at a glance
   which parts of the week the team can actually see. */
.shift-chip.draft{border-style:dashed;background:transparent}
.shift-chip.lone{border-left:3px solid var(--warn)}
.chip-next{display:inline-block;font-size:10px;padding:0 4px;border-radius:4px;background:var(--line);color:var(--muted);margin-left:4px}
.chip-lone{display:inline-block;font-size:10px;padding:0 4px;border-radius:4px;background:var(--warn);color:var(--on-gold);margin-top:2px}
.rota-add{width:100%;border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:8px;
  padding:3px;cursor:pointer;font-size:14px;line-height:1;opacity:0}
.rota-grid td:hover .rota-add{opacity:1}
.rota-add:focus{opacity:1}

.rota-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rota-row:last-child{border-bottom:0}
.rota-row-d{min-width:150px}
.rota-row-d b{display:block}
.rota-row-d span{color:var(--muted);font-size:13px}
.rota-row-m{flex:1;min-width:180px}
.rota-row-m small{display:block;color:var(--muted)}

@media(max-width:700px){
  .rota-nav{flex-wrap:wrap}
  .rota-add{opacity:1}  /* No hover on touch, so the add button must always be visible. */
}

/* ---- Timesheets ---- */
.ts-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ts-head h3{margin:0}
/* A day that could not be totalled is tinted, not hidden. It is the row a manager most needs to see. */
tr.ts-exc td{background:color-mix(in srgb,var(--danger) 8%,transparent)}


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

/* ---- Filter bar and drawer ----
   Replaces the permanent 230px Views/Filters column. The chips are the safety
   feature: a filter you cannot see is a list you will misread. */
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.filterbar .btn svg{width:15px;height:15px}
.fcount{background:var(--primary);color:#fff;border-radius:999px;font-size:11px;
  min-width:18px;height:18px;display:inline-grid;place-items:center;padding:0 5px;margin-left:2px;font-weight:700}
.btn.secondary .fcount{background:var(--primary);color:#fff}
.fchips{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.fchip{display:inline-flex;align-items:center;gap:7px;background:var(--mist);color:var(--muted);
  border:1px solid var(--mist);border-radius:999px;padding:5px 10px;font-size:12.5px;font-weight:500;
  cursor:pointer;min-height:28px}
.fchip:hover{border-color:var(--primary);color:var(--primary)}
.fchip span{font-size:14px;line-height:1;opacity:.6}
.fchip:hover span{opacity:1}

/* The drawer slides from the right rather than sitting centred: it is a panel
   attached to the table, not a message interrupting it. */
.modal-drawer{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(390px,92vw);
  max-height:100vh;border-radius:0;margin:0;overflow-y:auto;padding:22px 22px 28px;
  transform:none;box-shadow:-18px 0 48px rgba(11,17,23,.22)}
.filterdrawer .biz-sidebar-section{margin-bottom:18px}
.filterdrawer .biz-sidebar-title{font-size:9.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--muted);font-weight:600;margin:0 0 7px}
.filterdrawer label{display:block;margin-bottom:11px;font-size:12.5px;font-weight:600;color:var(--muted)}
.filterdrawer label>*{margin-top:5px}
.biz-main{min-width:0}
.controlbar{align-items:center;gap:9px;padding:9px;margin:0 0 10px}
.controlbar .search{flex:1;min-width:0}
.fchips-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.pagination{margin:0 0 10px}

/* ---- Record list ----
   Replaces the seven-column table on record screens. Each row is one record,
   read left to right in a single pass: who, where, what, how much, what state.
   The name gets a whole line to itself and never wraps — the old table squeezed
   it into a narrow column so "1st Aesthetics Limited" broke across two lines
   and then repeated itself in capitals underneath. */
.reclist{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
/* One grid shared by the header and every row, so the labels stay honest:
   change a column here and the heading moves with it. */
.reclist{--reccols:38px minmax(0,2.1fr) minmax(0,1fr) 118px 62px 128px 14px}
.rec,.rec-head{display:grid;grid-template-columns:var(--reccols);align-items:center;gap:14px;width:100%}
.rec-head{padding:9px 18px;background:var(--surface);border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rec-head .num{text-align:right}
/* Fixed height, not a minimum. Rows carrying a voting-intention pill were
   stacking to 74px while the rest sat at 61px, and a list whose rows change
   height as you scan it is the thing that reads as untidy. The second pill is
   smaller so both fit the same band. */
.rec{text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--line);padding:9px 18px;height:56px}
.rec:first-of-type{border-top:0}
.rec:hover{background:var(--surface)}
.rec:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rec-av{width:34px;height:34px;border-radius:10px;background:var(--mist);color:var(--primary);
  display:grid;place-items:center;font-size:11.5px;font-weight:700;flex:none}
.rec-main{min-width:0}
/* One line, always. An ellipsis is more readable than a wrap in a list. */
.rec-name{display:block;font-weight:600;font-size:14.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-sub{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rec-legal{opacity:.72}
.rec-meta{min-width:0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-meta small{display:block;color:var(--muted);font-size:11.5px}
.rec-meta.num{text-align:right;font-variant-numeric:tabular-nums}
.rec-meta.num b{font-weight:650}
/* Health has its own column so it lines up down the list instead of shifting
   with the length of the status word. The vote pill sits under the status badge
   rather than beside it — three pills on one line was what looked untidy. */
.rec-health{display:flex;justify-content:center}
.rec-status{display:flex;align-items:center;justify-content:flex-end;min-width:0}
.rec-vote .badge{font-size:10px;padding:1px 7px;font-weight:600}
.rec-status .badge,.rec-vote .badge{white-space:nowrap}
.rec-chev{color:var(--muted-2);font-size:18px;line-height:1;text-align:right}

@media(max-width:1150px){
  /* !important: the per-screen column templates below (.reclist.props/.hered/.people
     etc) carry two classes, which outranks this bare .reclist selector on specificity
     alone regardless of media query, so without !important they silently keep their
     full desktop column widths on a phone and squeeze the name column to nothing. */
  .reclist{--reccols:38px minmax(0,1fr) 108px 62px 118px 14px!important}
  .rec-meta:not(.num){display:none}
  .rec-head span:nth-child(3){display:none}
}
@media(max-width:820px){
  .reclist{--reccols:34px minmax(0,1fr) 118px 14px!important}
  .rec-meta,.rec-health{display:none}
  .rec-head{display:none}
  .rec{gap:10px;padding:11px 13px}
}

/* Per-screen column templates. One component, four record types — the grid is
   the only thing that differs, so a change to row styling reaches all of them. */
.reclist.people{--reccols:38px minmax(0,1.6fr) minmax(0,1.3fr) 150px 150px 14px}
.reclist.hered{--reccols:38px minmax(0,1.8fr) minmax(0,1.2fr) 110px 110px 118px 14px}
.reclist.props{--reccols:38px minmax(0,1.9fr) minmax(0,1.2fr) 118px 118px 14px}
.reclist.props{--reccols:38px minmax(0,1.9fr) minmax(0,1.2fr) 118px 118px 112px 14px}
.rec-head .sortable{cursor:pointer;user-select:none}
.rec-head .sortable:hover{color:var(--primary)}
.reclist.keys{--reccols:38px minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.1fr) 96px 14px}
.reclist.keys .rec-av{background:var(--mist);color:var(--primary)}
.reclist.keys .rec-av svg{width:17px;height:17px}

/* ---- Workspace logo slots ---- */
.logogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.logoslot{border:1px solid var(--line);border-radius:13px;padding:14px;background:var(--surface)}
.logoslot-h b{display:block;font-size:13.5px;font-weight:650}
.logoslot-h small{display:block;color:var(--muted);font-size:11.5px}
.logoslot-box{margin:10px 0;height:90px;border-radius:10px;background:var(--panel);
  border:1px dashed var(--line);display:grid;place-items:center;padding:10px}
.logoslot-box img{max-width:100%;max-height:70px;object-fit:contain}
.logoslot-a{display:flex;gap:8px}
.logoslot-a label{cursor:pointer}
.reclist.avail{--reccols:38px minmax(0,1fr) 110px 14px}

/* Drawer brought onto the design system: section labels match the record list,
   facts use tabular figures so numbers line up, and the backdrop matches the
   filter drawer so the two read as the same mechanism. */
.drawer-card h4{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 8px}
.drawer-fact{font-size:13.5px}
.drawer-fact b{font-weight:600}
.drawer-fact span:last-child{font-variant-numeric:tabular-nums}
.drawer-backdrop{background:rgba(11,17,23,.34)}
.drawer-head h3{font-family:'Space Grotesk','Instrument Sans',sans-serif;font-size:22px;letter-spacing:-.02em;margin:0}

/* Operations and Events onto the same density rules as the record screens:
   smaller figures, tighter cards, one control row rather than stacked bars. */
.ckpi .ck-t{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.ckpi .ck-v{font-size:22px;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:4px}
.ckpi .ck-s{font-size:11.5px;color:var(--muted)}
.ckpi .ck-ic{width:32px;height:32px;border-radius:9px}
.ckpi .ck-ic svg{width:16px;height:16px}
.toolbar{padding:9px;margin:0 0 10px;align-items:center}
.pills{gap:6px;margin-bottom:8px}
/* Key rows carry their own action, so the row is not the only affordance. */
.reclist.keys{--reccols:38px minmax(0,1fr) minmax(0,.8fr) 96px 104px}
.rec.keyrow{cursor:default}
.keymain{background:transparent;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;min-width:0}
.keymain:hover .rec-name{color:var(--primary)}

/* Modal action rows sat flush against the last field with no separation, so the
   buttons read as part of the form rather than as its conclusion. Scoped to
   modal panels so page-header .actions are untouched. */
.modal-panel .actions{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  justify-content:flex-end;gap:10px;flex-wrap:wrap}
/* Destructive stays left, away from the confirming button. */
.modal-panel .actions .btn.danger{margin-right:auto}
.modal-panel h4{margin-top:24px;padding-top:4px}
.modal-panel .rota-banner{margin-bottom:16px}
.mn-act{display:grid;grid-template-columns:28px minmax(0,1fr) 150px 140px;gap:8px;align-items:center;margin-bottom:7px}
.mn-tick{display:grid;place-items:center}
.mn-tick input{width:auto;margin:0}
.mn-dec{margin:0 0 6px;padding-left:18px;font-size:13.5px}
@media(max-width:700px){.mn-act{grid-template-columns:28px minmax(0,1fr)}}
.reclist.us-ren{--reccols:38px minmax(0,1fr) 130px 130px 14px;border:0;border-radius:0}
.reclist.reqs{--reccols:38px minmax(0,1fr) 190px 190px;border:0;border-radius:0}
/* Five children, not four — a value and a date sit between the name and the buttons. Putting such a
   row in .reqs pushed .rec-acts into an implicit SECOND grid row, 38px wide in column one, where
   .reclist's overflow:hidden clipped it: the buttons existed and were simply invisible. Cost real
   time because the row saved perfectly and the failure looked like a save bug. */
.reclist.reqs5{--reccols:38px minmax(0,1fr) 110px 132px 190px;border:0;border-radius:0}
@media(max-width:1150px){ .reclist.reqs5{--reccols:38px minmax(0,1fr) 100px 120px 172px!important} }
/* .rec-meta is display:none below 820px, so the template loses that column too. Even then the
   remaining four will not fit a phone — icon + date + two buttons alone eat the width and the name
   collapsed to nothing. So the row goes to two lines here, with the buttons underneath. .rec's fixed
   height exists to keep a uniform scanning band, and that is kept: every row in this list is the same
   two-line height, and rec-name/rec-sub are single-line-with-ellipsis so nothing reflows. */
@media(max-width:820px){
  .reclist.reqs5{--reccols:34px minmax(0,1fr) auto!important}
  .reclist.reqs5 .rec{height:auto;row-gap:8px;align-content:center;
    grid-template-areas:"av main status" "acts acts acts"}
  .reclist.reqs5 .rec-av{grid-area:av}
  .reclist.reqs5 .rec-main{grid-area:main}
  .reclist.reqs5 .rec-status{grid-area:status}
  .reclist.reqs5 .rec-acts{grid-area:acts;justify-content:flex-start}
}
.rec-acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}

/* ---- Urban Spark business overview ---- */
.usb-top{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:14px}
@media(max-width:1000px){.usb-top{grid-template-columns:1fr}}
.usb-main,.usb-side{margin:0}
.usb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.usb-head h3{margin:0}
.usb-legend{display:flex;gap:12px;font-size:11px;color:var(--muted);align-items:center}
.usb-legend span{display:flex;align-items:center;gap:5px}
.usb-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.usb-legend i.late{background:var(--danger)}.usb-legend i.soon{background:var(--primary)}.usb-legend i.later{background:var(--mist)}
.usb-chart{width:100%;height:auto;margin-top:10px;overflow:visible}
.usb-bar{fill:var(--mist)}
.usb-bar.soon{fill:var(--primary)}
.usb-bar.late{fill:var(--danger)}
.usb-bar.empty{fill:var(--line)}
.usb-bar:hover{opacity:.82}
.usb-val{font-size:10px;font-weight:600;fill:var(--ink)}
.usb-lab{font-size:11px;fill:var(--muted)}
.usb-sub{font-size:9px;fill:var(--muted);opacity:.7}
.usb-book{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.usb-brow{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(0,3fr) 88px 82px;gap:12px;align-items:center;
  background:none;border:0;border-radius:8px;padding:7px 8px;text-align:left;cursor:pointer;font:inherit;color:inherit;width:100%}
.usb-brow:hover{background:var(--surface)}
.usb-bname{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usb-btrack{height:9px;border-radius:5px;background:var(--surface);overflow:hidden}
.usb-bfill{display:block;height:100%;border-radius:5px;background:var(--primary)}
.usb-bval{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.usb-bsvc{font-size:11px;color:var(--muted);text-align:right}
@media(max-width:700px){.usb-brow{grid-template-columns:1fr 70px;grid-template-areas:"n v" "t t"}
  .usb-bname{grid-area:n}.usb-bval{grid-area:v}.usb-btrack{grid-area:t}.usb-bsvc{display:none}}
.usb-ring-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
.usb-ring{width:118px;height:118px;flex:none}
.usb-ring-bg{fill:none;stroke:var(--surface);stroke-width:14}
.usb-ring-fg{fill:none;stroke:var(--good);stroke-width:14;stroke-linecap:round}
.usb-ring-n{font-size:26px;font-weight:700;fill:var(--ink)}
.usb-ring-l{font-size:10px;fill:var(--muted)}
.usb-ring-key{display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:600}
.usb-ring-key small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.usb-ring-key .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.usb-ring-key .dot.good{background:var(--good)}.usb-ring-key .dot.bad{background:var(--danger)}
.usb-stat{padding:9px 0;border-bottom:1px solid var(--line)}
.usb-stat:last-child{border-bottom:0}
.usb-stat b{display:block;font-size:24px;line-height:1.1}
.usb-stat span{font-size:12px;color:var(--muted)}

/* ---- Cash-flow forecast ----
   Committed money is solid, expected money is dashed and lighter, everywhere. The distinction is the
   whole point of the screen, so it is carried by weight and pattern as well as colour — a printout or
   a colour-blind reader still gets it. */
/* .report-tabs is a hard 7-column grid built for the Shifts screen; two tabs in it would each take a
   seventh of the row. Scoped override rather than touching the shared rule. */
.report-tabs.usb-tabs{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.usb-legend i.com{background:var(--primary)}
.usb-legend i.exp,.usb-legend i.exp2{background:var(--mist)}
.usb-legend i.inv{background:var(--primary)}
.usb-legend i.con{background:var(--primary);opacity:.55}
.usb-legend i.cost{background:var(--danger)}
.usc-grid{stroke:var(--line);stroke-width:1}
.usc-zero{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7}
.usc-neg{fill:var(--danger);opacity:.07}
.usc-ax{font-size:10px;fill:var(--muted)}
.usc-area{fill:var(--primary);opacity:.10;stroke:none}
.usc-com{fill:none;stroke:var(--primary);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.usc-exp{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4;opacity:.75}
.usc-dot{fill:var(--primary);stroke:var(--card);stroke-width:1.5}
.usc-dot.bad{fill:var(--danger)}
.usc-dot.low{stroke-width:2.5}
.usc-lowlab{font-size:11px;font-weight:700;fill:var(--ink)}
.usc-b{fill:var(--primary)}
.usc-b.con{opacity:.55}
.usc-b.exp{fill:var(--mist)}
.usc-b.cost{fill:var(--danger);opacity:.8}
.usc-b:hover{opacity:.85}
.usc-noopen{padding:18px;border:1px dashed var(--line);border-radius:10px;margin-top:10px}
.usc-noopen p{margin:0 0 10px}
.usc-tbl{width:100%;border-collapse:collapse;font-size:13px}
.usc-tbl th,.usc-tbl td{padding:8px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.usc-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.usc-tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.usc-tbl tr:last-child td{border-bottom:0}
.usc-r-bad td{background:color-mix(in srgb,var(--danger) 7%,transparent)}
.usc-cav{margin:10px 0 0;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.55}
.usc-cav li{margin-bottom:8px}
.usc-cav b{color:var(--ink)}

/* ---- Urban Spark client record ---- */
.crm-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink);margin-right:8px}
.crm-chip.status{padding:0 4px 0 12px;background:var(--mist);border-color:transparent}
.crm-chip.status select{border:0;background:none;font:inherit;color:inherit;padding:0 4px;cursor:pointer;
  height:26px;-webkit-appearance:none;appearance:none;text-align:center}
.crm-chip.status select:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:999px}
.crm-chip.status.s-won{background:var(--good-bg,rgba(121,223,207,.28))}
.crm-chip.status.s-lost{background:var(--danger-bg,color-mix(in srgb,var(--danger) 14%,transparent));color:var(--danger-text,var(--danger))}
.crm-chip.warn-chip{background:var(--danger-bg,color-mix(in srgb,var(--danger) 14%,transparent));color:var(--danger-text,var(--danger));border-color:transparent}
.crm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px}
@media(max-width:900px){.crm-grid{grid-template-columns:1fr}}
.crm-card{margin:0;display:flex;flex-direction:column}
.crm-card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.crm-card-h h3{margin:0}
.crm-facts{display:flex;flex-direction:column;margin-top:10px}
.crm-fact{display:grid;grid-template-columns:18px 132px minmax(0,1fr);gap:12px;align-items:center;
  padding:11px 2px;border-bottom:1px solid var(--line)}
.crm-fact:last-child{border-bottom:0}
.crm-fact svg{width:16px;height:16px;color:var(--muted)}
.crm-fl{font-size:12px;color:var(--muted)}
.crm-fv{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
a.crm-fv{color:var(--primary);text-decoration:none}
a.crm-fv:hover{text-decoration:underline}
.crm-fact.empty .crm-fv{font-weight:400}
.crm-annual{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.crm-annual b{font-size:28px;line-height:1;letter-spacing:-.5px}
.crm-annual span{font-size:12px;color:var(--muted)}
.crm-svcs{display:flex;flex-direction:column;margin-top:6px}
.crm-svc{display:grid;grid-template-columns:minmax(0,1fr) 82px 96px;gap:10px;align-items:center;width:100%;
  background:none;border:0;border-top:1px solid var(--line);padding:11px 2px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.crm-svc:hover{background:var(--surface)}
.crm-svc-n{font-size:13.5px;font-weight:600;overflow:hidden}
.crm-svc-n em{display:block;font-style:normal;font-weight:400;font-size:11.5px;color:var(--muted);margin-top:2px}
.crm-svc-v{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.crm-svc-d{font-size:12px;text-align:right;color:var(--muted)}

/* Urban Spark's two marks are a light-background and a dark-background pair, not a square and a
   wide one, so each preview sits on the surface it is actually used against. */
.logoslot-box.onlight{background:#fff}
.logoslot-box.ondark{background:var(--night)}
.logoslot-box.ondark .muted{color:var(--muted)}
/* Urban Spark carries three: a workspace square mark plus the document pair. */
.logogrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.logogrid.three{grid-template-columns:1fr}}

/* ---- Workspace picker ---- */
.ws-sec{margin-top:26px}
.ws-sec:first-of-type{margin-top:18px}
.ws-sec-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ws-sec-h h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  font-family:'Instrument Sans',sans-serif;font-weight:700}
.ws-count{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface);
  border-radius:999px;padding:2px 9px;line-height:1.6}
.ws-sec-h p{margin:0;font-size:12.5px;color:var(--muted);flex-basis:100%}
.workspace-card{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;cursor:pointer;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.workspace-card:hover{border-color:var(--primary);transform:translateY(-1px)}
.workspace-card.current{border-color:var(--primary);box-shadow:0 0 0 3px var(--mist)}
.ws-img,.ws-ic{width:44px;height:44px;border-radius:12px}
.ws-img{object-fit:contain;background:var(--surface);padding:4px}
.ws-ic{font-size:15px;letter-spacing:-.02em}
.workspace-card .ws-body{flex:1;min-width:0;display:block;margin:0}
.workspace-card .ws-body b{display:block;font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-card .ws-meta{display:block;color:var(--muted);font-size:12px;font-weight:600;margin-top:3px}
.workspace-card .ws-go{display:block;color:var(--muted);font-size:20px;line-height:1;flex:none;margin:0}
.workspace-card .ws-cur{display:block;flex:none;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--primary);background:var(--mist);border-radius:999px;padding:4px 9px;margin:0}

/* ---- Documents ---- */
.doc-block{border-top:1px solid var(--line);padding:14px 0}
.doc-block:first-child{border-top:0;padding-top:0}
.doc-block.empty .doc-body{color:var(--muted)}
.doc-block-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.doc-block-h b{font-size:14.5px}
.doc-kind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);background:var(--surface);border-radius:999px;padding:3px 9px}
.doc-block-a{margin-left:auto;display:flex;gap:6px}
.doc-hint{margin:5px 0 0;font-size:12px;color:var(--muted);font-style:italic}
.doc-body{margin-top:7px;font-size:13px;line-height:1.55;white-space:pre-wrap}

/* ---- Event bookings modal: tabs (v4.9.356) ----
   Eleven sections in one scroll meant hunting for the bookings list past a 458-row invitation list.
   Panes are rendered once and toggled with [hidden], never re-fetched, so switching costs nothing and
   a half-typed field in another pane survives. */
.ev-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);
  margin:14px 0 0;padding-bottom:0}
.ev-tab{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:650;font-size:14px;
  padding:10px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0}
.ev-tab:hover:not(:disabled){color:var(--ink);background:var(--surface)}
.ev-tab.on{color:var(--primary);border-bottom-color:var(--primary)}
.ev-tab:disabled{opacity:.4;cursor:default}
.ev-tab:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.ev-panes{padding-top:4px}
.ev-pane[hidden]{display:none}
/* Inside a pane the old two-column split is gone — each pane is narrow enough to read straight down. */
.ev-pane .card{margin-top:12px}

/* ---- "working, do not close" panel (v4.9.356) ----
   For a request that genuinely blocks — a few hundred emails go out one at a time and the server
   answers when the last has gone. The window used to just freeze, which reads as a crash and invites
   a second click; a second click would send the whole list again. */
.modal-narrow{max-width:420px}
.busy-box{text-align:center;padding:12px 6px}
.busy-box h3{margin:16px 0 6px}
.busy-box .sub{margin:0 0 6px}
.busy-spin{width:34px;height:34px;margin:0 auto;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--primary);animation:busySpin .8s linear infinite}
@keyframes busySpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  /* No spin, but it must still read as active rather than stalled. */
  .busy-spin{animation:none;border-top-color:var(--primary);opacity:.6}
}

/* ---- Dietary and access on the bookings list (v4.9.361) ----
   A "Dietary" pill on its own hid the requirement: the flag often belongs to a GUEST while the
   booker's own field is empty, so opening the booking looked like there was nothing there. The words
   go on the row now, with whose they are. Allergy information does not get to be one click away. */
.needs-cell{display:flex;flex-direction:column;gap:4px}
.needs-item{display:block;background:var(--warn-bg);border:1px solid var(--warn-border);
  border-radius:8px;padding:4px 8px;max-width:230px}
.needs-item b{display:block;font-size:12.5px;font-weight:650;color:var(--warn-text);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.needs-item small{display:block;font-size:10.5px;color:var(--muted);line-height:1.3}
.needs-item.access{background:var(--mist);border-color:var(--focus)}
.needs-item.access b{color:var(--primary-hi)}
/* The same information at the top of the booking detail, above the fields rather than below them. */
.needs-banner{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:12px;
  padding:12px 14px;margin:10px 0 4px}
.needs-banner .kick{color:var(--warn-text)}
.needs-banner ul{margin:6px 0 0;padding-left:18px}
.needs-banner li{font-size:14px;color:var(--ink);margin:3px 0}
.needs-banner li.access{color:var(--primary-hi)}

/* ---- Allergen and diet tally (v4.9.362) ----
   The count a caterer asks for, above the list of names rather than instead of it. */
.alg-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.alg-pill{display:inline-flex;align-items:baseline;gap:6px;background:var(--warn-bg);
  border:1px solid var(--warn-border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--warn-text)}
.alg-pill b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.alg-pills.diets .alg-pill{background:var(--mist);border-color:var(--focus);color:var(--primary-hi)}
.banner-note.bad ul{margin:8px 0 0;padding-left:18px}
.banner-note.bad li{margin:3px 0}

/* Staff-side allergen entry inside the booking modal. */
.staff-needs{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;background:var(--surface)}
.staff-needs .sub{margin:4px 0 10px}
.staff-needs .alg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:6px}
.staff-needs .alg{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);
  border-radius:8px;padding:7px 9px;background:var(--panel);cursor:pointer;font-size:13px}
.staff-needs .alg input{width:auto;margin:2px 0 0;flex:none}
.staff-needs .alg b{display:block;font-weight:650;font-size:12.5px}
.staff-needs .alg small{display:block;color:var(--muted);font-size:11px;line-height:1.35}
.mjp-track{background:var(--surface);border-radius:999px;height:10px;overflow:hidden;margin:14px 0 8px}
.mjp-fill{background:var(--primary);height:100%;border-radius:999px;transition:width .25s ease}