/* Palette derived from the Nelara mark: blue #1b6df4, red #f3192a.
   Blue carries the work: primary actions, active state, links.
   Red is reserved for risk: identifiable data, locked datasets, deletion.
   Nothing else is allowed to be red, so red always means something. */
:root{
  /* Your mark, adopted directly. The sidebar IS #1b6df4. Everything else is
     that same colour at a different lightness, holding hue 217 and saturation
     91 so nothing drifts to a duller blue. Red is reserved for risk. */
  --brand:#1b6df4;        /* the mark, used for the header band */
  --side:#00059a;         /* the sidebar */
  --side-800:#00047a; --side-900:#000366;
  --brand-600:#1b6df4;
  --brand-700:#0a56d1;    /* pressed, and the base of the sidebar gradient */
  --brand-800:#0844a6;
  --blue:#1b6df4; --blue-d:#0a56d1;
  --red:#f3192a; --red-700:#c31421; --red-50:#fdecee;
  /* Gold sits at hue 46, the complement of the mark's 217, so it is the colour
     the palette was already implying. It means ATTENTION: read this, decide
     this, review this. Never risk, which is red's job alone. */
  --gold:#ffc400; --gold-300:#ffe49a; --gold-50:#fff9e5; --gold-700:#6b4e00;
  --green:#0e8f5f; --green-50:#e7f6ef;
  --ink:#0f1b2d; --muted:#5b6b7f; --line:#dbe5f4;
  --bg:#f3f6fc; --card:#fff; --tint:#e7effe;
  --shadow:0 1px 2px rgba(27,109,244,.06), 0 4px 18px rgba(27,109,244,.08);

  /* --------------------------------------------------------------------
     CONTEXT-AWARE SIDEBAR (orientation, not branding).
     These scoped variables colour ONLY the sidebar, the topbar band, and
     the active-nav pill. Content - buttons, cards, tables, stats - keeps
     using --brand/--blue and never changes. The defaults below reproduce
     the existing blue theme exactly; body[data-ctx="…"] overrides them.
     -------------------------------------------------------------------- */
  --sb-bg:#00059a;                       /* = --side               */
  --sb-bg-2:#000366;                     /* = --side-900 (gradient) */
  --sb-accent:#1b6df4;                   /* active pill + topbar    */
  --sb-accent-2:#3b86ff;                 /* topbar gradient end     */
  --sb-accent-glow:rgba(27,109,244,.5);  /* active pill shadow      */
}

/* Platform - Dark Slate: you are managing the whole platform. */
body[data-ctx="platform"]{
  --sb-bg:#1f2937; --sb-bg-2:#111827;
  --sb-accent:#3b4a5f; --sb-accent-2:#4a5b71; --sb-accent-glow:rgba(17,24,39,.55);
}
/* Organization - Indigo: you are working inside an organisation. */
body[data-ctx="organization"]{
  --sb-bg:#1e3a8a; --sb-bg-2:#14285f;
  --sb-accent:#2e50b8; --sb-accent-2:#3a63d6; --sb-accent-glow:rgba(30,58,138,.55);
}
/* Study - Emerald: you are working inside a specific study. */
body[data-ctx="study"]{
  --sb-bg:#065f46; --sb-bg-2:#043b2c;
  --sb-accent:#0a8a63; --sb-accent-2:#0f9e72; --sb-accent-glow:rgba(6,95,70,.55);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- App shell: sidebar + main ---------- */
.shell{display:flex;min-height:100vh}

.sidebar{width:236px;flex:0 0 236px;background:var(--sb-bg);border-right:none;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  background-image:linear-gradient(180deg,var(--sb-bg) 0%,var(--sb-bg-2) 100%)}
.sidebar .brand{display:flex;align-items:center;gap:9px;padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);text-decoration:none}
.sidebar .brand:hover{text-decoration:none}
.brand-mark{height:26px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px}
.brand-text{font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em;white-space:nowrap}
.brand-text b{font-weight:800;color:#cfe0ff}

.nav{flex:1;overflow-y:auto;padding:12px 10px}
.nav-group{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.85);padding:14px 8px 6px}
.nav-group:first-child{padding-top:4px}
.nav-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;
  color:#fff;font-size:14px;font-weight:600;text-decoration:none;margin-bottom:2px;
  transition:background .12s,color .12s}
.nav-link:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.nav-link.active{background:var(--sb-accent);color:#fff;box-shadow:0 2px 12px var(--sb-accent-glow)}
.nav-link.active .nav-ico{color:#fff}
.nav-ico{width:18px;height:18px;flex:0 0 18px;color:rgba(255,255,255,.82)}
.nav-link:hover .nav-ico{color:#fff}

.sidebar-foot{border-top:1px solid rgba(255,255,255,.10);padding:12px 14px;display:flex;
  align-items:center;gap:8px;justify-content:space-between}
.who-name{font-size:13px;font-weight:600;color:#fff;line-height:1.2}
.sidebar-foot .role{background:rgba(255,255,255,.12);color:rgba(255,255,255,.78)}
.signout{background:none;border:none;color:#fff;cursor:pointer;font-size:12px;
  font-weight:600;padding:0}
.signout:hover{color:#fff;text-decoration:underline}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 22px;
  background:linear-gradient(90deg,var(--sb-accent) 0%,var(--sb-accent-2) 100%);
  border-bottom:none;position:sticky;top:0;z-index:9;color:#fff}
/* Brand subtitle - the level in words, reinforcing the sidebar colour. */
.brand-stack{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-sub{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Context breadcrumb in the topbar band. */
.crumbnav{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;
  font-size:14px;font-weight:600}
.crumbnav .cr{color:rgba(255,255,255,.82);white-space:nowrap;text-decoration:none}
.crumbnav a.cr:hover{color:#fff;text-decoration:underline}
.crumbnav .cr-current{color:#fff;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.crumbnav .cr-sep{color:rgba(255,255,255,.5);flex:none}
.topbar .crumb{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.01em}
.topbar .burger{border-color:rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.12)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:12px;color:rgba(255,255,255,.9)}
.crumb{font-weight:700;font-size:15px;color:var(--ink)}
/* The burger is shown at EVERY width. It used to appear only below 900px, which
   meant a laptop or a landscape tablet had no way to reclaim the 236px sidebar.
   Above 900px it COLLAPSES the sidebar (the page grows into the space); below
   900px it slides the sidebar in over the page, as before. */
.burger{display:block;background:none;border:1px solid var(--line);border-radius:8px;
  padding:6px;cursor:pointer;color:var(--ink)}
.burger svg{width:20px;height:20px;display:block}

/* Collapsed state, wide screens. Margin rather than display:none so the sidebar
   slides rather than vanishing, and so focus order is unchanged for keyboards. */
@media (min-width:901px){
  .sidebar{transition:margin-left .18s ease}
  body.nav-collapsed .sidebar{margin-left:-236px}
}

/* Tap-outside-to-close, small screens only. Inert until the sidebar is open. */
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:29}
@media (max-width:900px){ body.nav-open .nav-backdrop{display:block} }

@media (max-width:900px){
  .sidebar{position:fixed;left:-260px;z-index:30;transition:left .2s;box-shadow:0 0 30px rgba(0,0,0,.12)}
  .sidebar.open{left:0}
}

.container{max-width:1180px;width:100%;margin:22px auto;padding:0 22px;flex:1}
.foot{text-align:center;color:var(--muted);font-size:12px;padding:30px}

.flash{max-width:1180px;width:100%;margin:16px auto -6px;padding:11px 16px;border-radius:8px;font-size:14px}
.flash-success{background:#e6f6ee;color:#0c6b45;border:1px solid #bfe6d3}
.flash-error{background:#fdeaea;color:#a11a1a;border:1px solid #f3c6c6}

h1{font-size:24px;margin:0 0 4px} h2{font-size:18px;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 20px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px}
.stat .n{font-size:30px;font-weight:800;color:var(--blue)}
.stat .l{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.03em}

.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:8px;
  box-shadow:0 1px 2px rgba(27,109,244,.24);transition:background .12s,transform .06s;
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{background:var(--blue-d);text-decoration:none}
.btn-green{background:var(--green)} .btn-green:hover{background:#0c7d55}
.btn-ghost{background:#fff;color:var(--blue);border:1px solid var(--blue)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{background:var(--red)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.table-wrap{overflow:auto;max-height:520px;border:1px solid var(--line);border-radius:10px}

label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;
  font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue)}
.help{color:var(--muted);font-size:12px;margin-top:3px}
.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.inline > div{flex:1;min-width:130px}

.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:12px;background:#eef3f8;color:var(--blue-d);font-weight:600}
.pill{font-size:11px;padding:1px 7px;border-radius:10px;background:#eee;color:#555}
.muted{color:var(--muted)}
.badge-ai{background:#f3e8ff;color:#7b52c9}
.right{text-align:right}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:600;font-size:13px}
.tabs a.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.notice{background:#fff8e6;border:1px solid #f0e0a8;border-radius:8px;padding:10px 14px;font-size:13px;color:#7a5c00}

/* XLSForm section-divider notes (rendered from "# **heading**" note labels) */
.form-section{
  margin:22px 0 6px;padding:9px 14px;border-left:4px solid var(--blue);
  background:linear-gradient(90deg,#eef3f8,#fff);border-radius:0 8px 8px 0;
  font-size:16px;font-weight:700;color:var(--blue-d)
}
.form-section strong{font-weight:800}

/* Users page: token + copy */
.user-list{display:flex;flex-direction:column}
.user-row{display:grid;grid-template-columns:1.4fr auto 2.2fr auto;gap:16px;align-items:center;
  padding:14px 6px;border-bottom:1px solid var(--line)}
.user-row:last-child{border-bottom:none}
.user-row.inactive{opacity:.5}
.user-name{font-weight:600}
.tok-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:0 0 4px}
.tok-wrap{display:flex;gap:6px;align-items:center}
.tok-field{flex:1;min-width:120px;padding:7px 9px;font-size:12px;background:#f7f9fb;
  border:1px solid var(--line);border-radius:7px;color:var(--ink)}
.copy-btn{white-space:nowrap}
.user-actions{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
@media (max-width:820px){
  .user-row{grid-template-columns:1fr;gap:8px}
  .user-actions{justify-content:flex-start}
}

/* Stacked brand lockup: mark on top, name below (login screen) */
.lockup{text-align:center;margin:0 0 22px}
.lockup-mark{height:76px;width:auto;display:block;margin:0 auto 10px}
.lockup-name{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.lockup-name b{font-weight:800;color:var(--blue)}
.lockup-tag{font-size:13px;color:var(--muted);margin-top:4px}

/* Guard: neutralise any cached older rule that coloured brand text green
   and left the mark unsized. Safe to keep permanently. */
.brand img,.brand-mark{height:26px !important;width:auto !important}

/* Hub pages: form/tool listing rows */
.hub-row{display:grid;grid-template-columns:1.6fr auto auto 1fr;gap:14px;align-items:center;
  padding:13px 6px;border-bottom:1px solid var(--line)}
.hub-row:last-child{border-bottom:none}
.hub-title{font-weight:600}
.hub-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.empty{text-align:center;padding:34px 20px;color:var(--muted)}
.empty h3{margin:8px 0 4px;color:var(--ink);font-size:16px}
@media (max-width:820px){ .hub-row{grid-template-columns:1fr;gap:8px} .hub-actions{justify-content:flex-start} }

/* Workspace switcher */
.ws-switch{position:relative;padding:10px 10px 0}
.ws-btn{width:100%;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);border-radius:9px;padding:9px 10px;cursor:pointer;text-align:left}
.ws-btn:hover{background:rgba(255,255,255,.26)}
.ws-cur{flex:1;min-width:0}
.ws-lbl{display:block;font-weight:700;font-size:13px;color:#fff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ws-role{display:block;font-size:11px;color:rgba(255,255,255,.88)}
.ws-caret{width:15px;height:15px;color:rgba(255,255,255,.9);flex:0 0 15px}
.ws-menu{display:none;position:absolute;left:10px;right:10px;top:100%;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 26px rgba(16,32,43,.14);padding:6px;margin-top:4px}
.ws-menu.open{display:block}
.ws-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:#9aa7b4;padding:7px 9px 4px}
.ws-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
  padding:8px 9px;font-size:13px;font-weight:600;color:#41525f;cursor:pointer;text-decoration:none}
.ws-item:hover{background:#f1f5f9;text-decoration:none;color:var(--ink)}
.ws-item.current{color:var(--blue-d)}

/* Organisation cards + profile */
.org-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.org-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px;text-decoration:none;transition:.12s}
.org-card:hover{border-color:var(--blue);box-shadow:0 3px 14px rgba(27,94,154,.10);text-decoration:none}
.org-logo{width:52px;height:52px;flex:0 0 52px;border-radius:11px;background:#f1f5f9;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.org-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.org-logo.lg{width:78px;height:78px;flex:0 0 78px;border-radius:14px}
.org-initial{font-weight:800;font-size:21px;color:var(--blue)}
.org-logo.lg .org-initial{font-size:30px}
.org-body{min-width:0;flex:1}
.org-name{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.org-desc{font-size:13px;color:var(--muted);margin-top:3px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.org-stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}
.org-stats strong{color:var(--ink)}
.pill-home{background:#e6f6ee;color:#0c6b45}
.org-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap}

/* Member rows with avatars */
.member-row{display:flex;align-items:center;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.member-row:last-child{border-bottom:none}
.avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:#eaf2fa;color:var(--blue-d);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.tabs a{cursor:pointer}

/* Modals */
.modal{display:none;position:fixed;inset:0;z-index:60;background:rgba(16,32,43,.45);
  align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:14px;width:100%;max-width:560px;
  box-shadow:0 18px 50px rgba(16,32,43,.24);animation:pop .14s ease-out}
@keyframes pop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:17px}
.modal-x{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);
  cursor:pointer;padding:0 4px}
.modal-x:hover{color:var(--ink)}
.modal-body{padding:16px 20px}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px;
  border-top:1px solid var(--line);background:#fafbfc;border-radius:0 0 14px 14px}

/* Breadcrumbs */
.crumbs{font-size:12px;color:var(--muted);margin-bottom:3px}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs a:hover{color:var(--blue)}
.crumbs span{margin:0 4px;opacity:.6}

/* Data dictionary */
.progress{height:5px;background:#e3e9ef;border-radius:3px;margin-top:8px;overflow:hidden;max-width:340px}
.progress-bar{height:100%;background:var(--green);border-radius:3px;transition:width .3s}
table.dict td{vertical-align:top}
table.dict tr.confirmed{background:#fbfdfc}
.conf{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 7px;border-radius:10px}
.conf-high{background:#e6f6ee;color:#0c6b45}
.conf-medium{background:#fff4e0;color:#8a5a00}
.conf-low{background:#fdeaea;color:#a11a1a}
.pill-draft{background:#fff4e0;color:#8a5a00}
.pill-pii{background:#fdeaea;color:#a11a1a}

/* Tool workspace: one header, one tab bar */
.tool-head{display:flex;align-items:flex-start;gap:14px;margin:2px 0 12px;flex-wrap:wrap}
.tool-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.tool-meta strong{color:var(--ink)}
.warn-link{color:#8a5a00;font-weight:600;background:#fff4e0;padding:2px 8px;border-radius:10px;font-size:12px}
.warn-link:hover{text-decoration:none;background:#ffeccc}
.tool-tabs{border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:18px;gap:2px}
.tool-tabs a{border:none;border-bottom:2px solid transparent;border-radius:0;background:none;
  padding:9px 13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.tool-tabs a:hover{color:var(--ink);background:#f7f9fb;text-decoration:none}
.tool-tabs a.active{background:none;color:var(--blue);border-bottom-color:var(--blue)}
.tab-badge{background:#fff4e0;color:#8a5a00;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:9px;line-height:1.5}
.tool-tabs a.active .tab-badge{background:#eaf2fa;color:var(--blue-d)}

/* Data Management work queue */
.queue-row{display:flex;gap:18px;align-items:flex-start;padding:14px 4px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.queue-row:last-child{border-bottom:none}

/* Analysis method chooser */
.method-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:8px}
.method{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.method.chosen{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset}

/* Design panel: native disclosure, no JavaScript required */
.design-panel summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.design-panel summary::-webkit-details-marker{display:none}
.design-panel summary::before{content:'\25B8';color:var(--muted);font-size:12px;transition:transform .15s}
.design-panel[open] summary::before{transform:rotate(90deg)}

/* ---------- Brand finishing ----------
   Blue is the work. Red is risk, and nothing else may use it, so that a red
   thing on screen always means respondent data, a lock, or a deletion. */
.btn:hover{background:var(--brand-700);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--brand);border:1px solid #c9dcfb;box-shadow:none}
.btn-ghost:hover{background:var(--tint);border-color:var(--brand);color:var(--brand-800)}
.btn-danger{background:var(--red);box-shadow:0 1px 2px rgba(243,25,42,.26)}
.btn-danger:hover{background:var(--red-700)}
.btn-green{background:var(--green);box-shadow:0 1px 2px rgba(14,143,95,.24)}
.btn-green:hover{background:#0b7a51}

/* Focus has to be visible on both the blue sidebar and the light page. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.sidebar a:focus-visible,.sidebar button:focus-visible{outline-color:#8fb6ff}

input,select,textarea{border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,109,244,.14);outline:none}

h1{letter-spacing:-.02em;color:var(--ink)}
h2{letter-spacing:-.01em}
.crumb{color:var(--ink)}
.tag{background:var(--tint);color:var(--brand-800)}
.pill{background:#eef2f7;color:#48586a}
.pill-pii{background:var(--red-50);color:var(--red-700)}
.pill-home{background:var(--green-50);color:#0b6b47}
.badge-ai{background:var(--tint);color:var(--brand-800)}
.role-admin{background:var(--red-50);color:var(--red-700)}
.notice{background:var(--tint);border:1px solid #cddffb;color:var(--brand-800)}
.flash-ok{background:var(--green-50);border:1px solid #bfe6d3;color:#0b6b47}
.flash-error{background:var(--red-50);border:1px solid #f8ccd1;color:var(--red-700)}
table th{color:var(--muted)}
tr:hover td{background:#fafcff}
.conf-low{background:var(--red-50);color:var(--red-700)}
.progress-bar{background:var(--brand)}
.tool-tabs a.active{color:var(--brand);border-bottom-color:var(--brand)}
.method.chosen{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.org-card:hover{border-color:var(--brand);box-shadow:0 3px 16px rgba(27,109,244,.12)}
.org-initial{color:var(--brand)}
.avatar{background:var(--tint);color:var(--brand-800)}
.foot{color:var(--muted)}

/* The page is a surface too, not an absence. A faint field of the brand blue
   keeps large white cards from reading as the background itself. */
body{background:
  radial-gradient(1100px 460px at 82% -10%, rgba(27,109,244,.10), transparent 62%),
  radial-gradient(800px 380px at -5% 105%, rgba(243,25,42,.04), transparent 58%),
  var(--bg);
  background-attachment:fixed}
.container{position:relative}

/* The readout.
   Every hub opens with the same four figures. They stay light like the rest of
   the page; the brand shows in the figure itself and a live edge above it. */
.stat{position:relative;overflow:hidden;background:var(--card);
  border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(27,109,244,.07), 0 6px 20px rgba(27,109,244,.09)}
.stat::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand)}
.stat::after{content:'';position:absolute;right:-40px;top:-40px;width:120px;height:120px;
  border-radius:50%;background:radial-gradient(circle,rgba(27,109,244,.10),transparent 66%)}
.stat .n{color:var(--brand);position:relative;letter-spacing:-.03em;font-weight:800}
.stat .l{color:var(--muted);position:relative;text-transform:uppercase;
  letter-spacing:.07em;font-size:10.5px;font-weight:700}

/* Instrument builder */
.sec-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--brand-700);background:var(--tint);padding:5px 9px;border-radius:6px;margin:12px 0 6px}
.q-row{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--line)}
.q-row:last-child{border-bottom:none}
.q-row.editing{background:var(--tint);border-radius:8px;padding:9px;border-bottom:none}
.q-acts{display:flex;gap:3px;align-items:center;flex-shrink:0}
.mini{background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-size:12px;
  color:var(--muted);cursor:pointer;line-height:1.4;text-decoration:none;display:inline-block}
.mini:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.mini.danger:hover{border-color:var(--red);color:var(--red)}
.gate{font-size:11px;color:var(--brand-700);background:var(--tint);display:inline-block;
  padding:2px 7px;border-radius:5px;margin-top:4px}
.gate-box{border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:14px;background:#fbfcfe}

/* ---------- Pill tabs ----------
   A row of destinations with their counts, so the number is part of the label
   rather than something you discover after clicking. */
.ptabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ptab{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:11px 16px;text-decoration:none;color:var(--muted);
  font-weight:600;font-size:14px;box-shadow:var(--shadow);transition:.12s}
.ptab:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.ptab .pi{width:17px;height:17px;flex:0 0 17px;color:currentColor}
.ptab .pc{background:#eef2f7;color:#48586a;font-size:11px;font-weight:800;
  padding:2px 8px;border-radius:20px;line-height:1.5}
.ptab.on{background:#20263a;border-color:#20263a;color:#fff;box-shadow:0 4px 14px rgba(32,38,58,.24)}
.ptab.on .pc{background:rgba(255,255,255,.2);color:#fff}
.ptab.warn .pc{background:var(--red-50);color:var(--red-700)}
.ptab.on.warn .pc{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Callouts ----------
   Gold occupies a section partly: a bar down its edge and a wash behind it, so
   the eye is drawn without the page turning into a warning. */
.callout{position:relative;background:var(--gold-50);border:1px solid var(--gold-300);
  border-left:none;border-radius:12px;padding:18px 20px 18px 24px;margin-bottom:14px;
  box-shadow:var(--shadow);overflow:hidden}
.callout::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.callout strong{color:var(--gold-700)}
.callout .help,.callout p{color:#7a6220}
.callout a{color:var(--brand-800);font-weight:600}
/* A blue button on a gold field is two loud colours fighting. Inside a callout
   the action takes the callout's own ink, so the gold stays the loudest thing
   and the button still reads as the thing to press. */
.callout .btn,.card.attention .btn{background:var(--gold-700);color:#fff;
  box-shadow:0 1px 2px rgba(107,78,0,.28)}
.callout .btn:hover,.card.attention .btn:hover{background:#543d00}
.callout .btn-ghost,.card.attention .btn-ghost{background:#fff;color:var(--gold-700);
  border:1px solid var(--gold-300);box-shadow:none}
.callout .btn-ghost:hover,.card.attention .btn-ghost:hover{background:#fff3cd;border-color:var(--gold)}

/* The same treatment where a card must carry attention rather than replace it. */
.card.attention{position:relative;border-color:var(--gold-300);background:var(--gold-50);
  border-left:none;padding-left:24px;overflow:hidden}
.card.attention::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.card.attention strong,.card.attention h2{color:var(--gold-700)}
.card.attention .help{color:#7a6220}

/* A count that means "these need your judgement" is gold, not red: nothing is
   broken, there is simply work to do. */
.ptab.warn .pc{background:var(--gold-50);color:var(--gold-700)}
.ptab.on.warn .pc{background:rgba(255,196,0,.28);color:#fff}
.conf-medium{background:var(--gold-50);color:var(--gold-700)}
.pill-draft{background:var(--gold-50);color:var(--gold-700)}
.tab-badge{background:var(--gold-50);color:var(--gold-700)}
.warn-link{color:var(--gold-700);background:var(--gold-50)}
.warn-link:hover{background:var(--gold-300)}

/* ---------- Tool context strip ----------
   One line at the top of every working page: the verb is the page, the dataset
   is a choice. No second tab bar, no separate tool page. */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:9px 14px;margin-bottom:16px;
  box-shadow:var(--shadow)}
.tb-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tb-current{font-weight:700;color:var(--ink)}
.tb-form{margin:0;display:flex;gap:6px;align-items:center}
.tb-form select{margin:0;min-width:260px;padding:6px 10px;font-size:13px;font-weight:600}
.tb-link{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
.tb-link:hover{color:var(--brand)}

/* ---------- Dataset picker ----------
   One verb, chosen in the sidebar; one dataset, chosen here. This replaced the
   per-tool tab bar, which repeated the sidebar's vocabulary a level down. */
.picker{margin:0 0 18px}
.picker-label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted);margin-bottom:7px}
.picker-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;text-decoration:none;box-shadow:var(--shadow);transition:.12s;min-width:150px}
.chip:hover{border-color:var(--brand);text-decoration:none}
.chip-t{display:block;font-weight:700;font-size:13px;color:var(--ink);line-height:1.3}
.chip-m{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.chip.on{background:#20263a;border-color:#20263a;box-shadow:0 4px 14px rgba(32,38,58,.24)}
.chip.on .chip-t{color:#fff}
.chip.on .chip-m{color:rgba(255,255,255,.66)}

/* ---------- Analysis charts ---------- */
.chart-block{margin:6px 0 20px}
.chart-grid{display:grid;grid-template-columns:1fr;gap:16px}
.chart-grid.twin{grid-template-columns:1fr 1fr}
@media (max-width:900px){.chart-grid.twin{grid-template-columns:1fr}}
.chart-fig{position:relative;margin:0;padding:14px 12px 12px;height:320px;
  background:var(--card);border:1px solid var(--line);border-radius:12px}
.chart-fig canvas{max-width:100%}
.chart-dl{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .12s;font-size:11px;padding:3px 8px}
.chart-fig:hover .chart-dl{opacity:1}
@media print{.chart-dl{display:none}.chart-fig{break-inside:avoid;border-color:#ccc}}

/* Phase 4 - accessibility: skip link (visible only on keyboard focus) */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#20263a;color:#fff;
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.linkbtn{background:none;border:none;padding:0;cursor:pointer;color:var(--blue,#1b6df4);font:inherit}

/* Live in-form logic (entry form progressive enhancement) - Phase 2B step 5 */
.wf-field.wf-hidden{display:none}
.field-error{color:#a11a1a;font-size:12.5px;margin:2px 0 10px;font-weight:600}
.wf-repeat-note{background:var(--gold-50,#fbf6e7);border:1px solid var(--gold-300,#e6d59a);border-left:5px solid var(--gold,#c9a227);border-radius:10px;padding:10px 12px;font-size:13px;color:#7a6220;margin-bottom:12px}

/* Repeat-column editor (builder) - Phase 2B step 7 */
.repeat-editor{border:1px solid var(--line,#dfe3e8);border-radius:10px;padding:10px 12px;margin:10px 0;background:#fafbfc}
.child-card{border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:#fff}
.child-head{display:flex;gap:8px;align-items:center}
.child-head .child-name{flex:1;min-width:0}
.child-head .child-type{flex:0 0 130px}
.child-adv{margin-top:6px}
.child-adv input{margin-top:6px}

/* Appearance-aware entry widgets - Phase 2C */
.wf-radios,.wf-checks{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:8px 10px}
.wf-scale{display:flex;flex-wrap:wrap;gap:6px}
.wf-scale .wf-opt{flex:1 1 auto;justify-content:center;border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:6px 8px;text-align:center}
.wf-opt{display:flex;gap:8px;align-items:center;font-weight:400;margin:0}
.wf-opt input{width:auto}
.wf-affix{display:flex;align-items:stretch}
.wf-affix .wf-prefix,.wf-affix .wf-suffix{display:flex;align-items:center;padding:0 10px;background:#f2f4f7;border:1px solid var(--line,#dfe3e8);color:#475467;font-size:13px}
.wf-affix .wf-prefix{border-right:0;border-radius:8px 0 0 8px}
.wf-affix .wf-suffix{border-left:0;border-radius:0 8px 8px 0}
.wf-affix input{border-radius:0 8px 8px 0}
.wf-affix .wf-prefix + input{border-radius:0 8px 8px 0}
.wf-range{display:flex;align-items:center;gap:10px}
.wf-range input[type=range]{flex:1}
.wf-range output{min-width:2.5em;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
/* Searchable dropdown: filter box + scrollable single-select list */
.wf-search{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:8px 10px}
.wf-search-box{padding:6px 8px;border:1px solid var(--line,#dfe3e8);border-radius:6px}
.wf-search-list{display:flex;flex-direction:column;gap:4px;max-height:180px;overflow:auto}
.wf-search-list .wf-opt.is-hidden{display:none}
.wf-search-empty{color:#98a2b3;font-size:12px;padding:4px 2px}
/* Autocomplete typeahead */
.wf-autocomplete{width:100%}
/* Checkboxes (columns appearance) laid out in a responsive grid */
.wf-checks-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:4px 16px}
/* Rating → stars. Reverse DOM order + direction:rtl so :checked fills down to 1. */
.wf-stars{display:inline-flex;flex-direction:row;direction:rtl;gap:4px;font-size:26px;line-height:1}
.wf-stars input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wf-stars label{color:#d0d5dd;cursor:pointer;transition:color .1s;margin:0}
.wf-stars input:checked ~ label{color:#f5b301}
.wf-stars label:hover,.wf-stars label:hover ~ label{color:#f5b301}
.wf-stars input:focus-visible + label{outline:2px solid #2563eb;outline-offset:2px;border-radius:3px}
/* Likert → segmented scale with end-anchor labels */
.wf-likert-wrap{display:flex;flex-direction:column;gap:4px}
.wf-likert .wf-opt{font-weight:500}
.wf-anchors,.wf-vas-anchors{display:flex;justify-content:space-between;font-size:12px;color:#667085}
/* VAS → continuous line, no number, anchored ends */
.wf-vas{display:flex;flex-direction:column;gap:6px}
.wf-vas-range{width:100%}

/* Builder hierarchy headings - Phase 2E */
.mod-head{font-weight:700;font-size:13px;color:var(--sidebar,#00059A);margin:14px 0 2px;text-transform:uppercase;letter-spacing:.04em}
.grp-head{font-weight:600;font-size:12.5px;color:#475467;margin:6px 0 2px 10px;border-left:2px solid var(--line,#dfe3e8);padding-left:8px}

/* Visual designer - Phase 2G */
.designer-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.designer-bar .designer-hint{margin-left:auto}
.q-row .drag-handle{display:none;cursor:grab;color:#98a2b3;font-size:15px;line-height:1;padding:0 2px;user-select:none}
.q-row .q-pick{display:none;margin:2px 2px 0 0}
.qlist.designer .q-row .drag-handle{display:inline-block}
.qlist.selecting .q-row .q-pick{display:inline-block}
.q-row.dragging{opacity:.5;outline:2px dashed var(--sidebar,#00059A)}
.bulk-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#f2f4f7;border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:8px 10px;margin:0 0 10px}
.bulk-bar .bulk-count{font-size:13px}
.btn.danger,.mini.danger{color:#a11a1a}

/* Media capture - Phase 2H */
.wf-media input[type=file]{display:block;width:100%}
.wf-sign{border:1px solid var(--line,#dfe3e8);border-radius:8px;padding:6px;background:#fff}
.wf-sign .sign-pad{width:100%;height:150px;touch-action:none;border-bottom:1px dashed var(--line,#dfe3e8);cursor:crosshair}
.wf-sign .sign-acts{display:flex;gap:8px;align-items:center;margin-top:6px}
.att-link{display:inline-flex;gap:5px;align-items:center;font-size:12px}

/* ---------------------------------------------------------------------------
   Role-aware navigation - Phase 3A
   Sections, planned (inert) items and the active-project context header.
   --------------------------------------------------------------------------- */
.nav-sec{margin-bottom:2px}
.nav-sec .nav-group{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.62);
  padding:14px 8px 5px}
.nav-sec .nav-group .nav-ico{width:15px;height:15px;flex:0 0 15px;color:rgba(255,255,255,.5)}
.nav-sec.on .nav-group{color:rgba(255,255,255,.95)}
.nav-sec.on .nav-group .nav-ico{color:var(--gold,#ffc400)}
.nav-link.nav-sub{padding-left:20px;font-weight:500;font-size:13.5px}
.nav-link.nav-sub .nav-ico{width:16px;height:16px;flex:0 0 16px}

.nav-link.nav-soon{color:rgba(255,255,255,.40);cursor:default;font-weight:500}
.nav-link.nav-soon:hover{background:transparent;color:rgba(255,255,255,.40)}
.nav-link.nav-soon .nav-ico{color:rgba(255,255,255,.28)}
.nav-soon-tag{margin-left:auto;font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:1px 6px}

.proj-ctx{display:flex;align-items:center;gap:8px;margin:0 10px 2px;padding:9px 10px;
  border-radius:9px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14)}
.proj-ctx-in{min-width:0;flex:1}
.proj-ctx-lbl{display:block;font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold,#ffc400)}
.proj-ctx-name{display:block;font-size:13px;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-ctx-role{display:block;font-size:11px;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-ctx-exit{flex:0 0 auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.24);border-radius:7px;padding:3px 8px;text-decoration:none}
.proj-ctx-exit:hover{background:rgba(255,255,255,.16);color:#fff;text-decoration:none}

/* ---------------------------------------------------------------------------
   Study workflow pipeline - Phase 3C
   A study is a sequence of stages; one percentage hides which you are in.
   --------------------------------------------------------------------------- */
.wfpipe{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:8px 0 4px;padding:0}
.wfstep{position:relative;flex:1 1 88px;min-width:88px;text-align:center;padding-top:16px}
.wfstep::before{content:"";position:absolute;top:5px;left:0;right:50%;height:2px;
  background:var(--line,#e3e8ef)}
.wfstep::after{content:"";position:absolute;top:5px;left:50%;right:0;height:2px;
  background:var(--line,#e3e8ef)}
.wfstep:first-child::before,.wfstep:last-child::after{background:transparent}
.wfstep.done::before,.wfstep.done::after,.wfstep.now::before{background:var(--brand,#1b6df4)}
.wfdot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid var(--line,#cbd5e1);z-index:1}
.wfstep.done .wfdot{background:var(--brand,#1b6df4);border-color:var(--brand,#1b6df4)}
.wfstep.now .wfdot{background:#fff;border-color:var(--brand,#1b6df4);
  box-shadow:0 0 0 4px rgba(27,109,244,.18)}
.wflabel{display:block;font-size:10.5px;line-height:1.25;color:var(--muted,#64748b);padding:0 3px}
.wfstep.done .wflabel{color:var(--ink,#0f172a)}
.wfstep.now .wflabel{color:var(--brand,#1b6df4);font-weight:700}
.wfstep a{text-decoration:none;display:block}
.wfstep a:hover .wflabel{color:var(--brand,#1b6df4);text-decoration:underline}

/* ---------------------------------------------------------------------------
   Study timeline - Phase 3D
   --------------------------------------------------------------------------- */
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:14px 0}
.tl-card{background:#fff;border:1px solid var(--line,#e3e8ef);border-radius:12px;padding:13px 14px;
  display:flex;flex-direction:column;gap:7px}
.tl-card.done{border-color:rgba(27,109,244,.35)}
.tl-card.now{border-color:var(--brand,#1b6df4);box-shadow:0 2px 14px rgba(27,109,244,.16)}
.tl-card.todo{opacity:.82}
.tl-head{display:flex;align-items:center;gap:8px}
.tl-dot{width:10px;height:10px;border-radius:50%;background:#fff;
  border:2px solid var(--line,#cbd5e1);flex:0 0 10px}
.tl-card.done .tl-dot{background:var(--brand,#1b6df4);border-color:var(--brand,#1b6df4)}
.tl-card.now .tl-dot{border-color:var(--brand,#1b6df4);box-shadow:0 0 0 3px rgba(27,109,244,.2)}
.tl-name{font-weight:700;font-size:13.5px;line-height:1.2}
.tl-badge{margin-left:auto;font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand,#1b6df4);border:1px solid rgba(27,109,244,.4);border-radius:999px;padding:1px 6px}
.tl-pct{font-size:12px;font-weight:700;color:var(--brand,#1b6df4);margin-top:-2px}
.tl-untracked{font-size:12px;font-style:italic;color:var(--muted,#94a3b8);padding:6px 0}
.tl-evidence{font-size:12.5px;color:var(--ink,#0f172a)}
.tl-source{font-size:10.5px;color:var(--muted,#94a3b8)}
.tl-go{font-size:12px;font-weight:700;text-decoration:none;margin-top:auto}
.tl-go:hover{text-decoration:underline}
.tl-evidenced{font-size:12px;font-style:italic;color:var(--muted,#64748b);padding:4px 0}

/* ---------------------------------------------------------------------------
   Timeline execution - Phase 3D v2-v4
   Module-internal tabs, critical path, risk cards.
   --------------------------------------------------------------------------- */
.ttabs{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 12px;border-bottom:1px solid var(--line,#e3e8ef)}
.ttab{padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted,#64748b);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.ttab:hover{color:var(--ink,#0f172a);text-decoration:none}
.ttab.on{color:var(--brand,#1b6df4);border-bottom-color:var(--brand,#1b6df4)}
.tl-h{margin:0 0 10px;font-size:15px}
.frow{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.frow label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;
  color:var(--muted,#64748b)}
.frow input,.frow select{padding:6px 8px;border:1px solid var(--line,#cbd5e1);border-radius:7px;
  font-size:13px;min-width:130px}
.late{color:#b91c1c;font-weight:700}
.cpath{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0;align-items:center}
.cnode{background:rgba(27,109,244,.09);border:1px solid rgba(27,109,244,.35);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:600;position:relative}
.cnode+.cnode::before{content:"→";position:absolute;left:-13px;top:5px;color:var(--muted,#94a3b8);
  font-weight:400}
.cnode.late{background:rgba(185,28,28,.08);border-color:rgba(185,28,28,.45);color:#b91c1c}
.risk{border-left:4px solid var(--line,#cbd5e1);padding:8px 0 8px 12px;margin-bottom:10px}
.risk.high{border-left-color:#b91c1c}
.risk.medium{border-left-color:var(--gold,#ffc400)}
.risk.low{border-left-color:var(--line,#cbd5e1)}
.pill-warn{background:rgba(255,196,0,.18);color:#92400e}

/* ---------------------------------------------------------------------------
   Documents - Phase 3E
   --------------------------------------------------------------------------- */
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.dfilters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dfilters input[type=search]{flex:1;min-width:200px;padding:7px 10px;
  border:1px solid var(--line,#cbd5e1);border-radius:8px;font-size:13px}
.dfilters select{padding:7px 9px;border:1px solid var(--line,#cbd5e1);border-radius:8px;font-size:13px}
.ddrawer{border-left:4px solid var(--brand,#1b6df4)}
.dmeta{display:grid;grid-template-columns:130px 1fr;gap:5px 14px;margin:10px 0 0;font-size:13px}
.dmeta dt{color:var(--muted,#64748b);font-weight:600}
.dmeta dd{margin:0}
.btn-ghost{background:transparent;border:1px solid var(--line,#cbd5e1);color:var(--ink,#0f172a)}
.btn-ghost:hover{background:rgba(15,23,42,.04)}

/* ---------------------------------------------------------------------------
   Instrument rows - Phase 3F
   One primary action per row; everything else behind a details-based menu
   so it works without JavaScript.
   --------------------------------------------------------------------------- */
.irow{display:flex;align-items:center;gap:10px;padding:11px 0;
  border-top:1px solid var(--line,#eef2f7)}
.irow:first-of-type{border-top:0}
.imain{flex:1;min-width:0}
.ititle{font-weight:700;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ititle a{text-decoration:none;color:var(--ink,#0f172a)}
.ititle a:hover{color:var(--brand,#1b6df4);text-decoration:underline}
.rowmenu{position:relative}
.rowmenu>summary{list-style:none;cursor:pointer;width:30px;height:30px;line-height:28px;
  text-align:center;border:1px solid var(--line,#cbd5e1);border-radius:8px;font-size:16px;
  color:var(--muted,#64748b);user-select:none}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu[open]>summary{border-color:var(--brand,#1b6df4);color:var(--brand,#1b6df4)}
.rowmenu-panel{position:absolute;right:0;top:34px;z-index:20;min-width:196px;background:#fff;
  border:1px solid var(--line,#e3e8ef);border-radius:10px;padding:6px;
  box-shadow:0 8px 26px rgba(15,23,42,.14)}
.rowmenu-panel a{display:block;padding:7px 9px;border-radius:7px;font-size:13px;
  text-decoration:none;color:var(--ink,#0f172a)}
.rowmenu-panel a:hover{background:rgba(27,109,244,.08);text-decoration:none}
.rowmenu-sep{margin:6px 4px 3px;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted,#94a3b8)}

/* ---------------------------------------------------------------------------
   Field Operations - Phase 3G
   --------------------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0}
.kpi{background:#fff;border:1px solid var(--line,#e3e8ef);border-radius:11px;padding:12px 13px}
.kpi-v{font-size:23px;font-weight:800;color:var(--brand,#1b6df4);line-height:1.15}
.kpi-l{font-size:11px;color:var(--muted,#64748b);margin-top:3px;line-height:1.3}

/* ---------------------------------------------------------------------------
   Explore histogram - Phase 3L
   --------------------------------------------------------------------------- */
.histo{display:flex;align-items:flex-end;gap:2px;height:130px;padding:4px 0;
  border-bottom:1px solid var(--line,#e3e8ef)}
.histo-col{flex:1;height:100%;display:flex;align-items:flex-end}
.histo-bar{width:100%;background:var(--brand,#1b6df4);border-radius:3px 3px 0 0;opacity:.85}
.histo-col:hover .histo-bar{opacity:1}
.nav-sec{margin-bottom:2px}
/* The section heading is a <summary>: clickable, focusable, no JavaScript. */
.nav-sec>.nav-group{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.62);
  padding:9px 8px;cursor:pointer;border-radius:8px;list-style:none;user-select:none}
.nav-sec>.nav-group::-webkit-details-marker{display:none}
.nav-sec>.nav-group:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.95)}
.nav-sec>.nav-group:focus-visible{outline:2px solid var(--gold,#ffc400);outline-offset:2px}
.nav-caret{width:14px;height:14px;flex:0 0 14px;margin-left:auto;opacity:.55;
  transition:transform .15s ease}
.nav-sec[open]>.nav-group .nav-caret{transform:rotate(90deg)}
.nav-sec[open]{padding-bottom:4px}
.nav-sec>.nav-group .nav-ico{width:15px;height:15px;flex:0 0 15px;color:rgba(255,255,255,.5)}
.nav-sec.on>.nav-group{color:rgba(255,255,255,.95)}
.nav-sec.on>.nav-group .nav-ico{color:var(--gold,#ffc400)}

/* ===========================================================================
   Web entry as a guided interview - Phase 2J
   Section-at-a-time wizard: instrument header, progress, GPS-once start step,
   full-width question shell, Previous / Save draft / Next / Submit.
   =========================================================================== */
.entry-head{display:flex;align-items:flex-start;gap:16px;margin:2px 0 2px}
.entry-head-main{flex:1;min-width:0}
.entry-title{font-size:23px;font-weight:800;margin:0 0 4px;color:#101828}
.entry-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:#475467}
.entry-meta-k{color:#98a2b3;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:11px;margin-right:5px}
.entry-head .btn{flex:0 0 auto}

/* The form is the page now - a single full-width card, not a floating box. */
.entry-shell{background:#fff;border:1px solid var(--line,#dfe3e8);border-radius:14px;
  padding:22px 26px 20px;box-shadow:0 1px 3px rgba(16,24,40,.04)}
.entry-shell .wf-field>label{font-size:15px;font-weight:700;color:#101828;margin:0 0 6px}
.entry-shell .wf-field{margin-bottom:16px}
.entry-shell .wf-page-off{display:none}

/* Progress header */
.wf-wiz-top{margin:14px 0 16px}
.wf-wiz-plabel{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:7px}
.wf-wiz-title{font-size:15px;font-weight:700;color:#101828}
.wf-wiz-count{font-size:12.5px;color:#667085;font-weight:600;white-space:nowrap}
.wf-wiz-top .progress{max-width:none;height:7px}
.wf-wiz-fill{height:100%;width:0;background:var(--blue,#1b6df4);border-radius:3px;transition:width .25s ease}

/* Start-interview step */
.wf-start-h{font-size:18px;font-weight:800;margin:0 0 14px;color:#101828}
.wf-start-meta{display:flex;flex-wrap:wrap;gap:10px 34px;margin-bottom:6px}
.wf-start-meta>div{display:flex;flex-direction:column;gap:2px}
.wf-start-meta span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#98a2b3;font-weight:600}
.wf-start-meta b{font-size:15px;color:#101828}
.wf-geo-start{margin-top:18px;border:1px solid var(--line,#dfe3e8);border-radius:12px;padding:16px 18px;background:#fafbfc}
.wf-geo-label{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#98a2b3;font-weight:700;margin-bottom:8px}
.wf-geo-state{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:#475467;margin-bottom:12px}
.wf-geo-state .wf-dot{width:10px;height:10px;border-radius:50%;background:#cbd2da;flex:0 0 10px}
.wf-geo-state[data-state=busy] .wf-dot{background:var(--blue,#1b6df4)}
.wf-geo-state[data-state=ok]{color:#0e7a4f}
.wf-geo-state[data-state=ok] .wf-dot{background:#12a366}
.wf-geo-state[data-state=error]{color:#a11a1a}
.wf-geo-state[data-state=error] .wf-dot{background:#d92d20}
.wf-geo-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wf-geo-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 20px;margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--line,#dfe3e8)}
.wf-geo-detail>div{display:flex;flex-direction:column;gap:2px}
.wf-geo-detail span{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:#98a2b3;font-weight:600}
.wf-geo-detail b{font-size:14px;color:#101828;font-variant-numeric:tabular-nums}
.wf-geo-help{font-size:12px;margin:12px 0 0}

/* Navigation bar */
.wf-nav{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line,#dfe3e8)}
.wf-nav-spacer{flex:1}
@media (max-width:560px){
  .wf-nav{flex-wrap:wrap}
  .wf-nav-spacer{flex-basis:100%;height:0}
}

/* Resume-draft bar */
.wf-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--tint,#eef4ff);
  border:1px solid #cddffb;border-radius:10px;padding:10px 14px;margin:8px 0 0;font-size:13px;color:#1d3a6b}
.wf-resume span{flex:1;min-width:180px}

/* Toast */
.wf-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);
  background:#101828;color:#fff;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;
  box-shadow:0 6px 24px rgba(16,24,40,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60}
.wf-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Styled file upload (replaces the raw native control) */
.wf-media{border:1.5px dashed var(--line,#dfe3e8);border-radius:10px;padding:14px 16px;background:#fafbfc;transition:border-color .15s,background .15s}
.wf-media:hover{border-color:var(--blue,#1b6df4);background:#f5f9ff}
.wf-media input[type=file]{display:block;width:100%;font-size:13px;color:#475467;cursor:pointer}
.wf-media input[type=file]::file-selector-button{margin-right:12px;padding:7px 14px;border:none;border-radius:8px;
  background:var(--blue,#1b6df4);color:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:background .15s}
.wf-media input[type=file]::file-selector-button:hover{background:var(--blue-d,#0a56d1)}
.wf-media input[type=file]::-webkit-file-upload-button{margin-right:12px;padding:7px 14px;border:none;border-radius:8px;
  background:var(--blue,#1b6df4);color:#fff;font-weight:600;font-size:13px;cursor:pointer}

/* ===========================================================================
   Instrument Designer redesign - Phase 2K
   Header + tab chrome, hierarchical builder list, slide-in editor drawer.
   Reuses existing tokens; the plain POST builder still works with JS off.
   =========================================================================== */

/* --- header --- */
.ib-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:2px 0 10px}
.ib-head-main{flex:1;min-width:240px}
.ib-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ib-title{font-size:22px;font-weight:800;margin:0;color:#101828}
.ib-badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:2px 9px;border-radius:20px;border:1px solid transparent}
.ib-badge.draft{background:#fff4e5;border-color:#f4d9a8;color:#9a6b00}
.ib-badge.published{background:var(--green-50,#e7f6ee);border-color:#bfe6d3;color:#0b6b47}
.ib-metaline{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:#667085;margin-top:5px}
.ib-metaline .k{color:#98a2b3;font-weight:600}
.ib-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ib-more{position:relative}
.ib-more-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;background:#fff;border:1px solid var(--line,#dfe3e8);
  border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.14);padding:6px;z-index:40;display:none}
.ib-more-menu.open{display:block}
.ib-more-menu a,.ib-more-menu button{display:block;width:100%;text-align:left;background:none;border:none;
  padding:8px 10px;border-radius:7px;font:inherit;font-size:13px;color:#344054;cursor:pointer}
.ib-more-menu a:hover,.ib-more-menu button:hover{background:var(--tint,#eef4ff);text-decoration:none}
.ib-more-menu .sep{height:1px;background:var(--line,#eef0f3);margin:5px 2px}

/* --- top tabs --- */
.ib-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line,#dfe3e8);margin:0 0 16px;flex-wrap:wrap}
.ib-tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 14px;font:inherit;font-size:14px;font-weight:600;color:#667085;cursor:pointer;margin-bottom:-1px}
.ib-tab:hover{color:#101828}
.ib-tab.active{color:var(--blue,#1b6df4);border-bottom-color:var(--blue,#1b6df4)}
.ib-panel{display:none}
.ib-panel.active{display:block}

/* --- workspace toolbar --- */
.ib-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.ib-toolbar .spacer{flex:1}
.ib-toolbar .designer-hint{font-size:12px;color:#98a2b3}

/* --- hierarchical list --- */
.ib-list-head{display:grid;grid-template-columns:44px 1fr 150px 90px 120px;gap:8px;
  padding:7px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:#98a2b3;border-bottom:1px solid var(--line,#dfe3e8)}
.ib-list-head .r{text-align:right}
@media (max-width:760px){ .ib-list-head{display:none} }

.qlist .mod-head,.qlist .sec-head,.qlist .grp-head{border-radius:8px;margin-top:12px}
.qlist .mod-head{background:#eef1fb;border-left:4px solid var(--sidebar,#00059A);padding:8px 12px;
  font-weight:800;color:var(--sidebar,#00059A);text-transform:none;font-size:13.5px;letter-spacing:0}
.qlist .sec-head{background:#eef6ff;border-left:4px solid var(--blue,#1b6df4);padding:7px 12px;
  font-weight:700;color:var(--blue-d,#0a56d1);font-size:13px}
.qlist .grp-head{background:#f5f7fa;border-left:3px solid #b6c2d0;padding:6px 12px;margin-left:14px;
  font-weight:600;color:#475467;font-size:12.5px}

.q-row{display:grid;grid-template-columns:44px 1fr 150px 90px 120px;gap:8px;align-items:center;
  padding:9px 12px;border:1px solid transparent;border-bottom:1px solid var(--line,#eef0f3);background:#fff}
.q-row:hover{background:#fafbff}
.q-row.editing{background:#eef6ff;border-color:#cfe0fb;border-radius:8px}
.q-row.just-saved{animation:ibflash 1.4s ease}
@keyframes ibflash{0%{background:#fff7d6}100%{background:#fff}}
.q-row .q-ord{display:flex;align-items:center;gap:6px;color:#98a2b3;font-size:12px;font-variant-numeric:tabular-nums}
.q-row .q-main{min-width:0}
.q-row .q-label{font-size:13.5px;color:#101828;font-weight:500;overflow:hidden;text-overflow:ellipsis}
.q-row .q-name{font-size:11px}
.q-row .q-type-col .pill{white-space:nowrap}
.q-row .q-req-col{text-align:center}
.q-row .q-acts{justify-content:flex-end;display:flex;gap:2px}
.q-req-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d0d5dd}
.q-req-dot.on{background:var(--red,#e5484d)}
.q-row .gate{font-size:11px;color:#7a5c00;background:#fff8e6;border-radius:4px;padding:0 5px;display:inline-block;margin-top:2px}
@media (max-width:760px){
  .q-row{grid-template-columns:28px 1fr auto;row-gap:2px}
  .q-row .q-type-col,.q-row .q-req-col{display:none}
}

/* --- editor drawer --- */
.ib-overlay{position:fixed;inset:0;background:rgba(16,24,40,.34);opacity:0;visibility:hidden;
  transition:opacity .2s;z-index:70}
.ib-overlay.open{opacity:1;visibility:visible}
.ib-drawer{position:fixed;top:0;right:0;height:100vh;width:34%;min-width:380px;max-width:560px;background:#fff;
  box-shadow:-8px 0 32px rgba(16,24,40,.18);transform:translateX(100%);transition:transform .22s ease;
  z-index:71;display:flex;flex-direction:column}
.ib-drawer.open{transform:translateX(0)}
.ib-drawer-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line,#dfe3e8)}
.ib-drawer-title{font-size:16px;font-weight:800;margin:0;flex:1;min-width:0}
.ib-drawer-close{appearance:none;background:none;border:none;font-size:22px;line-height:1;color:#98a2b3;cursor:pointer;padding:2px 6px}
.ib-drawer-close:hover{color:#101828}
.ib-drawer-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line,#dfe3e8);overflow-x:auto}
.ib-dtab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;white-space:nowrap;
  padding:9px 11px;font:inherit;font-size:13px;font-weight:600;color:#667085;cursor:pointer;margin-bottom:-1px}
.ib-dtab.active{color:var(--blue,#1b6df4);border-bottom-color:var(--blue,#1b6df4)}
.ib-drawer-body{flex:1;overflow-y:auto;padding:16px 18px}
.ib-dpanel{display:none}
.ib-dpanel.active{display:block}
.ib-drawer-foot{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line,#dfe3e8);
  background:#fff}
.ib-drawer-foot .spacer{flex:1}
.ib-save-note{font-size:12px;color:#667085}
.ib-save-note.err{color:#a11a1a;font-weight:600}
.ib-save-note.ok{color:#0b6b47;font-weight:600}

/* the drawer holds the existing question form; keep its inline rows tidy */
.ib-drawer .inline{display:flex;gap:10px;flex-wrap:wrap}
.ib-drawer .inline>div{flex:1;min-width:140px}

@media (max-width:900px){ .ib-drawer{width:48%} }
@media (max-width:680px){
  .ib-drawer{width:100%;min-width:0;max-width:none}
}

/* keep the toolbar mini-forms (section/module/group/details) as popovers */
.ib-pop{position:relative}
.ib-pop-menu{position:absolute;left:0;top:calc(100% + 6px);width:320px;max-width:88vw;background:#fff;
  border:1px solid var(--line,#dfe3e8);border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.16);
  padding:14px;z-index:45;display:none}
.ib-pop-menu.open{display:block}

/* ==========================================================================
   Protocol Workspace - Phase 3S.1
   Gold means attention (the readiness card), never risk. Cards hold at most a
   handful of controls; anything rarely touched sits in a <details> that says
   what it holds, so collapsing never hides content silently.
   ========================================================================== */
.pw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.pw-stage{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;
  background:var(--tint);color:var(--blue-d);font-size:12px;font-weight:600;vertical-align:1px}

.pw-readiness{border-left:3px solid var(--gold);background:var(--gold-50)}
.pw-readiness strong{color:var(--gold-700)}
.pw-chips{display:flex;gap:6px;flex-wrap:wrap}
.pw-chip{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff;
  border:1px solid var(--gold-300);color:var(--gold-700);font-size:12px}

/* Module chrome, not navigation: these live inside Protocol and never appear
   in the sidebar. */
.pw-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);
  margin:0 0 18px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pw-tabs a{flex:0 0 auto;padding:9px 15px;font-size:14px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap}
.pw-tabs a:hover{color:var(--ink);text-decoration:none}
.pw-tabs a.active{color:var(--blue);border-bottom-color:var(--blue)}

.pw-form{margin:0}
.pw-card{margin-bottom:14px}
.pw-card > h2{margin:0 0 12px;font-size:16px;color:var(--ink)}
.pw-count{font-size:13px;font-weight:400}
.pw-note{margin:-6px 0 12px;font-size:12.5px}

.pw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}
.pw-field{min-width:0}
.pw-label{display:block;font-size:12px;color:var(--muted);margin:0 0 3px}
.pw-input{width:100%;box-sizing:border-box}
.pw-check{font-weight:400;display:inline-flex;align-items:center;gap:6px;padding-top:4px}
/* A textarea earns the full row; a two-column grid makes prose unreadable. */
.pw-field:has(textarea){grid-column:1/-1}

details.pw-card > summary{cursor:pointer;font-size:16px;font-weight:700;color:var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;list-style:none}
details.pw-card > summary::-webkit-details-marker{display:none}
details.pw-card > summary::after{content:'▸';color:var(--muted);font-weight:400;margin-left:auto}
details.pw-card[open] > summary::after{content:'▾'}
details.pw-card[open] > summary{margin-bottom:12px}
.pw-summary-meta{font-size:12px;font-weight:400}

.pw-actions{display:flex;align-items:center;gap:12px;margin:4px 0 18px}
.pw-actions .muted{font-size:12px}

.pw-addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px}
.pw-addrow .pw-field{width:150px}

.pw-gap-rows{display:flex;gap:28px;flex-wrap:wrap}
.pw-gap-n{display:block;font-size:26px;font-weight:700;color:var(--ink);line-height:1.1}
.pw-list{margin:0;padding-left:18px}
.pw-list li{margin:4px 0}

@media (max-width:900px){
  .pw-grid{grid-template-columns:1fr}
  .pw-addrow .pw-field{width:100%}
}

/* Protocol import review - Phase 3S.4 */
.pw-prop{padding:12px 0;border-top:1px solid var(--line)}
.pw-prop:first-of-type{border-top:none;padding-top:0}
.pw-prop-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;cursor:pointer}
.pw-src{font-size:12px}
.pw-conf{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:1px 7px;border-radius:999px}
.pw-conf-high{background:var(--tint);color:var(--blue-d)}
.pw-conf-medium{background:var(--gold-50);color:var(--gold-700)}
.pw-conf-low{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.pw-existing{margin:0 0 6px;font-size:12.5px;color:var(--gold-700);
  background:var(--gold-50);border-left:3px solid var(--gold);padding:6px 10px;border-radius:0 6px 6px 0}

/* ============================================================================
   WORKSPACE SURFACES - Organizations page and Dashboard
   ----------------------------------------------------------------------------
   Everything below is prefixed orgx- or dashx- so it cannot collide with the
   sidebar's .ws- switcher or the older .org- card grid, which other pages
   still use. Colours come from the tokens declared at the top of this file;
   no new hues are introduced. Numbers are set in tabular figures throughout,
   because a column of counts that shifts width as it updates reads as noise.
   ========================================================================= */

body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* ---------- Page header: title left, tools right ---------- */
.orgx-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.orgx-head-text{flex:1 1 260px;min-width:0}
.orgx-head h1{font-size:28px;font-weight:800;letter-spacing:-.025em;margin:0 0 3px}
.orgx-head .sub{margin:0;font-size:14px}
.orgx-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.orgx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.orgx-search{position:relative;display:flex;align-items:center}
.orgx-search svg{position:absolute;left:12px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.orgx-search input{width:268px;padding:10px 14px 10px 35px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:13.5px;
  box-shadow:0 1px 2px rgba(15,27,45,.04)}
.orgx-search input::-webkit-search-cancel-button{cursor:pointer}

.orgx-select{position:relative;display:flex;align-items:center}
.orgx-select svg{position:absolute;left:12px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.orgx-select select{width:auto;min-width:150px;padding:10px 32px 10px 34px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;
  color:var(--ink);appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  box-shadow:0 1px 2px rgba(15,27,45,.04)}

.btn.orgx-new{display:inline-flex;align-items:center;gap:7px;padding:10px 17px;
  border-radius:10px;font-size:13.5px;box-shadow:0 2px 10px rgba(27,109,244,.28)}
.btn.orgx-new svg{width:16px;height:16px}
.btn.btn-lg{padding:12px 24px;font-size:15px;border-radius:11px}

/* ---------- Hero: the tenancy promise, stated once ---------- */
.orgx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:24px;
  align-items:center;background:linear-gradient(115deg,#f2f7ff 0%,#e9f1ff 52%,#eef4ff 100%);
  border:1px solid #d9e6fd;border-radius:20px;padding:30px 34px;margin-bottom:26px}
.orgx-hero-copy h2{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.orgx-hero-copy > p{margin:0 0 20px;color:#42536b;font-size:14.5px;max-width:46ch;line-height:1.6}

.orgx-pillars{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px 20px}
.orgx-pillars li{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;
  column-gap:11px;align-items:center}
.orgx-pill-ico{grid-row:1 / span 2;width:34px;height:34px;border-radius:10px;background:#fff;
  border:1px solid #d4e3fc;display:flex;align-items:center;justify-content:center;
  color:var(--brand);box-shadow:0 1px 3px rgba(27,109,244,.10)}
.orgx-pill-ico svg{width:17px;height:17px}
.orgx-pillars b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.3}
.orgx-pillars li > span:last-child{font-size:12px;color:#5a6b83;line-height:1.4}

.orgx-awaiting{display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  background:var(--gold-50);border:1px solid var(--gold-300);color:var(--gold-700);
  padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:600}
.orgx-awaiting:hover{background:#fff4d1;text-decoration:none}
.orgx-awaiting b{font-weight:800}

.orgx-hero-art{min-width:0}
.orgx-art{display:block;width:100%;height:auto;max-height:220px}

/* ---------- The grid ---------- */
.orgx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
  gap:20px;align-items:start}

.orgx-card{display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(27,109,244,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.orgx-card:hover{transform:translateY(-3px);border-color:#c2d9fb;
  box-shadow:0 2px 4px rgba(15,27,45,.05), 0 16px 38px rgba(27,109,244,.13)}
.orgx-card:focus-within{border-color:var(--brand)}

.orgx-card-top{display:flex;gap:15px;align-items:flex-start;padding:22px 24px 18px}
.orgx-logo{width:56px;height:56px;flex:0 0 56px;border-radius:14px;background:#f5f8ff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.orgx-logo img{width:100%;height:100%;object-fit:contain;padding:7px}
.orgx-initial{font-size:23px;font-weight:800;color:var(--brand)}

.orgx-ident{min-width:0;flex:1}
.orgx-ident h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.25}
.orgx-ident h3 a{color:var(--ink)}
.orgx-ident h3 a:hover{color:var(--brand);text-decoration:none}
.orgx-kind{margin:3px 0 0;font-size:13px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgx-badges{margin:10px 0 0;display:flex;gap:6px;flex-wrap:wrap}

.orgx-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  padding:3px 10px 3px 8px;border-radius:999px;background:var(--green-50);color:#0b6b47}
.orgx-status .orgx-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.orgx-status-suspended{background:var(--gold-50);color:var(--gold-700)}
.orgx-status-archived{background:#eef2f7;color:#48586a}
.orgx-status-trial{background:var(--tint);color:var(--brand-800)}

.orgx-tag{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:#eef2f7;color:#48586a}
.orgx-tag-here{background:var(--tint);color:var(--brand-800)}

/* ---------- KPI row ---------- */
.orgx-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0;
  padding:0 24px 18px}
.orgx-kpis > div{display:flex;align-items:center;gap:9px;min-width:0;padding-right:8px;
  border-right:1px solid #eef2f9}
.orgx-kpis > div:last-child{border-right:none;padding-right:0}
.orgx-kpis svg{width:17px;height:17px;flex:none;color:var(--brand);opacity:.85}
.orgx-kpis dt{font-size:17px;font-weight:800;color:var(--ink);line-height:1.15;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.orgx-kpis dd{margin:1px 0 0;font-size:11px;color:var(--muted);line-height:1.25}
.orgx-kpi-warn svg{color:var(--gold-700);opacity:1}
.orgx-kpi-warn dt{color:var(--gold-700)}

/* ---------- Recent activity ---------- */
.orgx-activity{padding:16px 24px 18px;border-top:1px solid #f0f4fa;background:#fcfdff}
.orgx-activity h4{margin:0 0 10px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.075em;color:var(--muted)}
.orgx-activity ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.orgx-activity li{display:flex;align-items:baseline;gap:12px;font-size:13px;line-height:1.35}
.orgx-what{position:relative;padding-left:15px;color:#3a4a60;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgx-what::before{content:'';position:absolute;left:0;top:.48em;width:6px;height:6px;
  border-radius:50%;background:var(--brand);opacity:.55}
.orgx-when{font-size:11.5px;color:#8794a7;white-space:nowrap;flex:none;
  font-variant-numeric:tabular-nums}
.orgx-quiet{margin:0;font-size:13px;color:var(--muted)}

/* ---------- The operations readout: this page's signature ----------
   Four instrument cells, hairline-divided, set in tabular figures with a
   coloured rule along the top edge that carries the organisation's state.
   It is the one place on the card allowed to look like a gauge. */
.orgx-health{list-style:none;margin:0;padding:13px 24px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:#f7faff;border-top:1px solid #e7eefa;position:relative}
.orgx-health::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:var(--green)}
.orgx-health-warn::before{background:var(--gold)}
.orgx-health-bad::before{background:var(--red)}
.orgx-health li{min-width:0;padding-right:10px;border-right:1px solid #e4ecf8}
.orgx-health li:last-child{border-right:none;padding-right:0}
.orgx-health span{display:block;font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:#8794a7;margin-bottom:3px}
.orgx-health b{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  color:#31435c;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orgx-health b .orgx-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--green)}
.orgx-health-warn b .orgx-dot{background:var(--gold)}
.orgx-health-bad b .orgx-dot{background:var(--red)}

/* ---------- Card actions ---------- */
.orgx-actions{display:flex;align-items:center;gap:9px;padding:16px 24px 20px;
  border-top:1px solid #eef2f9}
.orgx-actions form{margin:0;flex:1}
.btn.orgx-open{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;flex:1;padding:11px 18px;border-radius:10px;font-size:13.5px;
  box-shadow:0 2px 10px rgba(27,109,244,.24)}
.btn.orgx-open svg{width:16px;height:16px;transition:transform .16s ease}
.btn.orgx-open:hover svg{transform:translateX(3px)}
.btn.orgx-open-off{background:#eef2f7;color:#7b8798;cursor:not-allowed;box-shadow:none}
.btn.orgx-open-off:hover{background:#eef2f7}

.orgx-ghost{display:inline-flex;align-items:center;gap:7px;padding:11px 14px;border-radius:10px;
  border:1px solid var(--line);background:#fff;color:#42536b;font-size:13px;font-weight:600;
  white-space:nowrap;transition:background .14s,border-color .14s,color .14s}
.orgx-ghost svg{width:15px;height:15px;color:var(--muted);transition:color .14s}
.orgx-ghost:hover{background:var(--tint);border-color:#bcd5fa;color:var(--brand-800);text-decoration:none}
.orgx-ghost:hover svg{color:var(--brand)}

/* ---------- Create tile: an outline of the shape it makes ---------- */
.orgx-create{display:flex;align-items:center;gap:18px;text-align:left;width:100%;
  min-height:172px;padding:26px;border:2px dashed #c6d9f8;border-radius:16px;
  background:#fbfdff;cursor:pointer;font-family:inherit;color:inherit;
  transition:background .16s,border-color .16s,transform .16s}
.orgx-create:hover{background:var(--tint);border-color:var(--brand);transform:translateY(-3px)}
.orgx-create-plus{width:56px;height:56px;flex:none;border-radius:50%;background:#e6efff;
  display:flex;align-items:center;justify-content:center;color:var(--brand);transition:background .16s}
.orgx-create:hover .orgx-create-plus{background:#d5e5ff}
.orgx-create-plus svg{width:24px;height:24px}
.orgx-create-copy{min-width:0;display:block}
.orgx-create-copy b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.015em;
  color:var(--ink);margin-bottom:4px}
.orgx-create-copy span{display:block;font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- Empty and no-match states ---------- */
.orgx-empty{text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:56px 28px}
.orgx-empty svg{width:130px;height:104px;margin-bottom:20px}
.orgx-empty h2{margin:0 0 8px;font-size:21px;font-weight:700;letter-spacing:-.02em}
.orgx-empty p{margin:0 auto 24px;max-width:44ch;color:var(--muted);font-size:14px}
.orgx-none{text-align:center;color:var(--muted);font-size:14px;padding:34px 0 8px}
.orgx-none button{background:none;border:none;color:var(--brand);font:inherit;font-weight:700;
  cursor:pointer;padding:0;text-decoration:underline}

/* ============================================================================
   DASHBOARD
   The workspace you are standing in, answered top to bottom: where am I, what
   is in here, what moved, what is waiting.
   ========================================================================= */
.dashx-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.dashx-head-text{flex:1 1 280px;min-width:0}
.dashx-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--brand-800);
  background:var(--tint);border-radius:999px;padding:4px 11px;margin-bottom:9px}
.dashx-eyebrow .orgx-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.dashx-head h1{font-size:28px;font-weight:800;letter-spacing:-.025em;margin:0 0 3px}
.dashx-head .sub{margin:0;font-size:14px}
.dashx-head-acts{display:flex;gap:9px;flex-wrap:wrap}

.dashx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;margin-bottom:22px}
.dashx-kpi{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(27,109,244,.06)}
.dashx-kpi::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--brand)}
.dashx-kpi-ico{width:34px;height:34px;border-radius:10px;background:var(--tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.dashx-kpi-ico svg{width:17px;height:17px}
.dashx-kpi .n{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.03em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.dashx-kpi .l{margin-top:3px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--muted)}

.dashx-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;align-items:start}
.dashx-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(27,109,244,.06)}
.dashx-panel-head{display:flex;align-items:center;gap:12px;padding:17px 22px;
  border-bottom:1px solid #eef2f9;background:#fcfdff}
.dashx-panel-head h2{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em;flex:1}
.dashx-panel-head a{font-size:12.5px;font-weight:700;color:var(--brand)}
.dashx-body{padding:8px 22px 18px}

.dashx-list{list-style:none;margin:0;padding:0}
.dashx-list li{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #f2f5fa}
.dashx-list li:last-child{border-bottom:none}
.dashx-mark{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tint);
  color:var(--brand-800);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800}
.dashx-line{min-width:0;flex:1}
.dashx-line a,.dashx-line b{display:block;font-size:14px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashx-line a:hover{color:var(--brand)}
.dashx-line small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashx-meta{font-size:11.5px;color:#8794a7;white-space:nowrap;flex:none;
  font-variant-numeric:tabular-nums}

.dashx-blank{padding:26px 0 30px;text-align:center;color:var(--muted);font-size:13.5px}
.dashx-blank p{margin:0 0 14px}

.dashx-jump{display:grid;gap:8px;padding:8px 22px 20px}
.dashx-jump a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:11px;
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:#32435c;
  transition:background .14s,border-color .14s,transform .14s}
.dashx-jump a:hover{background:var(--tint);border-color:#bcd5fa;color:var(--brand-800);
  transform:translateX(2px);text-decoration:none}
.dashx-jump svg{width:17px;height:17px;flex:none;color:var(--brand)}
.dashx-jump .dashx-arrow{margin-left:auto;color:var(--muted);width:15px;height:15px}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .dashx-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .orgx-hero{grid-template-columns:minmax(0,1fr);padding:26px 24px;gap:18px}
  .orgx-hero-art{order:2}
  .orgx-art{max-height:190px;margin:0 auto}
  .orgx-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .orgx-head h1,.dashx-head h1{font-size:24px}
  .orgx-controls{width:100%}
  .orgx-search{flex:1 1 100%}
  .orgx-search input{width:100%}
  .orgx-select{flex:1 1 140px}
  .orgx-select select{width:100%;min-width:0}
  .btn.orgx-new{flex:1 1 100%;justify-content:center}
  .orgx-hero-copy h2{font-size:22px}
  .orgx-card-top,.orgx-kpis,.orgx-activity,.orgx-health,.orgx-actions{padding-left:18px;padding-right:18px}
  .orgx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 0}
  .orgx-kpis > div:nth-child(2n){border-right:none;padding-right:0}
  .orgx-health{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
  .orgx-health li:nth-child(2n){border-right:none;padding-right:0}
  .orgx-actions{flex-wrap:wrap}
  .orgx-actions form{flex:1 1 100%}
  .orgx-ghost{flex:1;justify-content:center}
  .orgx-create{min-height:0}
  .dashx-head-acts{width:100%}
  .dashx-head-acts .btn{flex:1;text-align:center}
}

/* Motion is a nicety, never the message. */
@media (prefers-reduced-motion:reduce){
  .orgx-card,.orgx-create,.orgx-ghost,.dashx-jump a,.btn.orgx-open svg{transition:none}
  .orgx-card:hover,.orgx-create:hover,.dashx-jump a:hover{transform:none}
  .btn.orgx-open:hover svg{transform:none}
}

/* ============================================================================
   PLATFORM DASHBOARD
   ----------------------------------------------------------------------------
   Prefixed pdx- throughout so it cannot reach the organisation pages. Colours
   are the tokens declared at the top of this file; the five KPI tints are the
   only new hues and each is a wash, not a fill, so no card shouts louder than
   the number it carries.
   ========================================================================= */

/* The command centre needs the width. Only this page takes it. */
body.pdx .container{max-width:1520px}

.pdx-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.pdx-head-text{flex:1 1 300px;min-width:0}
.pdx-head h1{font-size:28px;font-weight:800;letter-spacing:-.025em;margin:0 0 3px}
.pdx-head .sub{margin:0;font-size:14px}
.pdx-head-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}

.pdx-select{position:relative;display:flex;align-items:center}
.pdx-select-ico{position:absolute;left:12px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.pdx-select select{width:auto;min-width:158px;padding:10px 32px 10px 34px;border-radius:10px;
  border:1px solid var(--line);background:#fff;font-size:13.5px;font-weight:600;color:var(--ink);
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
  box-shadow:0 1px 2px rgba(15,27,45,.04)}

/* ---------- Alerts ---------- */
.pdx-alerts{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px}
.pdx-alert{display:flex;align-items:center;gap:11px;padding:11px 15px;border-radius:12px;
  font-size:13.5px;border:1px solid;background:#fff}
.pdx-alert svg{width:17px;height:17px;flex:none}
.pdx-alert span{flex:1;min-width:0}
.pdx-alert a{font-weight:700;font-size:12.5px;white-space:nowrap}
.pdx-sev-critical{background:var(--red-50);border-color:#f8ccd1;color:var(--red-700)}
.pdx-sev-high{background:var(--gold-50);border-color:var(--gold-300);color:var(--gold-700)}
.pdx-sev-medium{background:var(--tint);border-color:#cddffb;color:var(--brand-800)}
.pdx-sev-low,.pdx-sev-informational{background:#f4f7fb;border-color:var(--line);color:#42536b}

/* ---------- KPI row ---------- */
.pdx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-bottom:22px}
.pdx-kpi{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  background:var(--card);overflow:hidden;
  box-shadow:0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(27,109,244,.06)}
.pdx-kpi-row{display:flex;align-items:flex-start;gap:12px}
.pdx-kpi-main{flex:1;min-width:0}
.pdx-kpi-label{margin:0;font-size:12.5px;font-weight:600;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdx-kpi-value{margin:6px 0 0;font-size:31px;font-weight:800;letter-spacing:-.035em;
  color:var(--ink);line-height:1.05;font-variant-numeric:tabular-nums}
.pdx-kpi-ico{width:44px;height:44px;flex:none;border-radius:13px;display:flex;
  align-items:center;justify-content:center}
.pdx-kpi-ico svg{width:21px;height:21px}
.pdx-kpi-delta{margin:12px 0 0;font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px}
.pdx-delta-up{color:var(--green)}
.pdx-delta-flat{color:var(--muted)}
.pdx-delta-none{color:#9aa7b8;font-weight:600}

/* Five washes, one per card. Tint the icon plate and the card face only. */
.pdx-tint-blue{background:linear-gradient(160deg,#f4f8ff 0%,#fff 58%)}
.pdx-tint-blue .pdx-kpi-ico{background:#e2ecfe;color:var(--brand)}
.pdx-tint-green{background:linear-gradient(160deg,#f1fbf6 0%,#fff 58%)}
.pdx-tint-green .pdx-kpi-ico{background:var(--green-50);color:var(--green)}
.pdx-tint-violet{background:linear-gradient(160deg,#f8f5ff 0%,#fff 58%)}
.pdx-tint-violet .pdx-kpi-ico{background:#efe8ff;color:#7c4ddb}
.pdx-tint-amber{background:linear-gradient(160deg,#fffaf0 0%,#fff 58%)}
.pdx-tint-amber .pdx-kpi-ico{background:var(--gold-50);color:#b98600}
.pdx-tint-cyan{background:linear-gradient(160deg,#f1fbfd 0%,#fff 58%)}
.pdx-tint-cyan .pdx-kpi-ico{background:#dff4fa;color:#0e7f9b}

/* ---------- Panel grid ---------- */
.pdx-row{display:grid;gap:20px;margin-bottom:20px;align-items:start}
.pdx-row-3{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr)}
.pdx-span-2{grid-column:auto}
.pdx-stack{display:grid;gap:20px;align-content:start}

.pdx-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(15,27,45,.04), 0 8px 24px rgba(27,109,244,.06);min-width:0}
.pdx-card-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.pdx-card-head h2{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.012em;flex:1}
.pdx-card-head a{font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap}
.pdx-chip{font-size:11.5px;font-weight:600;color:var(--muted);background:#f3f6fc;
  border:1px solid var(--line);border-radius:999px;padding:3px 11px;white-space:nowrap}
.pdx-card-foot{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:13px;
  border-top:1px solid #eef2f9;font-size:12px;color:var(--muted)}
.pdx-card-foot a{margin-left:auto;font-weight:700;color:var(--brand)}

.pdx-empty{margin:26px 0;text-align:center;color:var(--muted);font-size:13.5px}
.pdx-failed{margin:8px 0;padding:16px;border:1px dashed #d9c9a0;background:var(--gold-50);
  border-radius:12px;color:var(--gold-700);font-size:13px;text-align:center}
.pdx-muted{color:var(--muted)}

/* ---------- Charts ---------- */
.pdx-legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:var(--muted)}
.pdx-legend span{display:inline-flex;align-items:center;gap:7px}
.pdx-key{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.pdx-key-blue{background:var(--brand)}
.pdx-key-green{background:var(--green)}
.pdx-key-violet{background:#8b5cf6}
.pdx-chart{position:relative;height:250px}

.pdx-donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pdx-donut{position:relative;width:158px;height:158px;flex:none}
.pdx-donut-centre{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none}
.pdx-donut-centre b{font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pdx-donut-centre span{font-size:11px;color:var(--muted)}
.pdx-modes{list-style:none;margin:0;padding:0;display:grid;gap:13px;flex:1;min-width:130px}
.pdx-modes li{display:flex;align-items:flex-start;gap:9px}
.pdx-modes b{display:block;font-size:12.5px;font-weight:700;color:var(--ink)}
.pdx-modes span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pdx-modes .pdx-key{margin-top:5px}

/* ---------- System health ---------- */
.pdx-health-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pdx-health-status{margin:0;flex:1;display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700}
.pdx-health-status svg{width:17px;height:17px;flex:none}
.pdx-tone-ok{color:var(--green)}
.pdx-tone-warn{color:var(--gold-700)}
.pdx-tone-bad{color:var(--red-700)}
.pdx-tone-unknown{color:var(--muted)}

/* Score ring drawn with a conic gradient - no second canvas for one number. */
.pdx-gauge{width:74px;height:74px;flex:none;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:conic-gradient(var(--green) calc(var(--pct) * 1%), #e8eef8 0);
  position:relative}
.pdx-gauge::before{content:'';position:absolute;inset:7px;background:#fff;border-radius:50%}
.pdx-gauge b{position:relative;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pdx-gauge span{position:relative;font-size:8px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-top:2px}

.pdx-health{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pdx-health li{display:flex;align-items:center;gap:9px;font-size:13px}
.pdx-health li span{flex:1;min-width:0;color:#3a4a60;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdx-health li b{font-size:12.5px;font-weight:700;white-space:nowrap}
.pdx-dot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}

/* ---------- Ranked organisations ---------- */
.pdx-rank{list-style:none;margin:0;padding:0;display:grid;gap:15px;counter-reset:none}
.pdx-rank li{display:flex;align-items:center;gap:11px}
.pdx-rank-n{width:22px;height:22px;flex:none;border-radius:7px;background:#f0f4fb;
  color:var(--muted);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pdx-avatar{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tint);
  color:var(--brand-800);font-size:12px;font-weight:800;display:flex;align-items:center;
  justify-content:center;overflow:hidden;border:1px solid var(--line)}
.pdx-avatar img{width:100%;height:100%;object-fit:contain;padding:4px}
.pdx-rank-body{flex:1;min-width:0}
.pdx-rank-top{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pdx-rank-top a{font-size:13.5px;font-weight:700;color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdx-rank-top a:hover{color:var(--brand)}
.pdx-rank-top b{font-size:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.pdx-rank-pct{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;flex:none;width:44px;text-align:right}

.pdx-bar{display:block;height:6px;border-radius:4px;background:#eef2f9;overflow:hidden}
.pdx-bar i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.pdx-bar-lg{height:9px;margin:14px 0 12px}
.pdx-bar-lg.pdx-tone-ok i{background:var(--green)}
.pdx-bar-lg.pdx-tone-warn i{background:var(--gold)}
.pdx-bar-lg.pdx-tone-bad i{background:var(--red)}

/* ---------- Activity feed ---------- */
.pdx-feed{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pdx-feed li{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-bottom:1px solid #f2f5fa}
.pdx-feed li:last-child{border-bottom:none}
.pdx-feed-ico{width:32px;height:32px;flex:none;border-radius:9px;background:var(--tint);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.pdx-feed-ico svg{width:15px;height:15px}
.pdx-feed-body{flex:1;min-width:0}
.pdx-feed-body b{display:block;font-size:13px;font-weight:600;color:var(--ink);line-height:1.4}
.pdx-feed-body small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdx-feed-when{font-size:11.5px;color:#8794a7;white-space:nowrap;flex:none;padding-top:2px;
  font-variant-numeric:tabular-nums}

/* ---------- Approvals ---------- */
.pdx-approvals{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pdx-approvals li{display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid #f2f5fa}
.pdx-approvals li:last-child{border-bottom:none}
.pdx-approval-body{flex:1;min-width:0}
.pdx-approval-body a{display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdx-approval-body a:hover{color:var(--brand)}
.pdx-approval-body small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.pdx-approval-meta{display:flex;align-items:center;gap:9px;flex:none}
.pdx-approval-meta span{font-size:11.5px;color:#8794a7;white-space:nowrap}
.pdx-badge{font-style:normal;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:var(--gold-50);color:var(--gold-700);white-space:nowrap}

.pdx-clear{text-align:center;padding:20px 0 24px}
.pdx-clear-ico{width:34px;height:34px;color:var(--green);margin-bottom:9px}
.pdx-clear b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.pdx-clear span{display:block;font-size:13px;color:var(--muted);margin-top:3px}

/* ---------- Storage ---------- */
.pdx-storage-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pdx-storage-figs span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#8794a7;margin-bottom:4px}
.pdx-storage-figs b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pdx-storage-note{margin:0;font-size:12px;color:#42536b;line-height:1.5}
.pdx-storage-note + .pdx-storage-note{margin-top:5px}

.pdx-stamp{text-align:center;font-size:11.5px;color:#8794a7;margin:4px 0 0}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .pdx-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pdx-row-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pdx-span-2{grid-column:1 / -1}
}
@media (max-width:900px){
  .pdx-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdx-row-3{grid-template-columns:minmax(0,1fr)}
  .pdx-span-2{grid-column:auto}
}
@media (max-width:620px){
  .pdx-head h1{font-size:23px}
  .pdx-kpis{grid-template-columns:minmax(0,1fr)}
  .pdx-head-acts{width:100%}
  .pdx-select{flex:1 1 100%}
  .pdx-select select{width:100%}
  .pdx-head-acts .orgx-ghost{flex:1;justify-content:center}
  .pdx-head-acts .btn{flex:1 1 100%;justify-content:center}
  .pdx-card{padding:17px 16px}
  .pdx-donut-wrap{justify-content:center}
  .pdx-storage-figs{grid-template-columns:minmax(0,1fr);gap:8px}
  .pdx-storage-figs > div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .pdx-storage-figs span{margin-bottom:0}
  .pdx-rank-pct{width:auto}
}

/* Study arm pills - Stage 1 (arm allocation) */
.pill-intervention { background:#e6f4ea; color:#1b7f3b; border:1px solid #b7e1c5; }
.pill-control      { background:#eef1fb; color:#00059A; border:1px solid #c9d2f5; }

/* ── Appointment Operations Center ───────────────────────────── */
/* KPI strip: one line per card. The number and the label sit side by side so the
   strip costs ~62px of vertical space instead of ~110px, which matters because
   the queue underneath is the thing the RA actually works from. */
.ops-kpis{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 14px}
.ops-kpi{flex:1 1 150px;min-width:150px;background:#fff;border-radius:10px;padding:10px 14px;
  box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  display:flex;gap:10px;align-items:center;text-decoration:none;
  transition:box-shadow .15s ease,transform .15s ease}
.ops-kpi:hover{box-shadow:0 4px 12px rgba(16,24,40,.10);transform:translateY(-1px)}
.ops-kpi.on{outline:2px solid #00059A;outline-offset:-2px}
.ops-kpi .ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex:none}
.ops-kpi .txt{display:flex;align-items:baseline;gap:7px;min-width:0}
.ops-kpi .n{font-size:21px;font-weight:700;line-height:1;color:#101828}
.ops-kpi .l{font-weight:600;font-size:12px;color:#475467;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.k-blue .ico{background:#eaf0ff;color:#0b3ea8} .k-green .ico{background:#e6f4ea;color:#1b7f3b}
.k-red .ico{background:#fdeaea;color:#b00020}  .k-amber .ico{background:#fdf3e2;color:#8a5a00}
.k-violet .ico{background:#efeaff;color:#4b2fa8}
@media (max-width:820px){.ops-kpi{flex:1 1 46%;min-width:0}}

.ops-tabs{display:flex;gap:22px;border-bottom:1px solid #eaecf0;margin-bottom:16px}
.ops-tabs a{padding:10px 2px;font-weight:600;font-size:14px;color:#667085;text-decoration:none;
  border-bottom:2px solid transparent}
.ops-tabs a.on{color:#00059A;border-bottom-color:#00059A}

.ops-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.ops-chip{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none;
  background:#fff;color:#344054;border:1px solid #eaecf0}
.ops-chip.on{background:#00059A;color:#fff;border-color:#00059A}

/* With no participant selected there is no aside at all, so the queue simply
   takes the full width - no placeholder, no reserved gutter. */
.ops-split{display:flex;gap:16px;align-items:flex-start}
.ops-main{flex:1 1 auto;min-width:0;width:100%}
.ops-side{flex:0 0 340px;position:sticky;top:12px}
@media (max-width:1100px){.ops-split{flex-direction:column}.ops-side{flex:1 1 auto;width:100%;position:static}}

.ops-av{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#3538cd;background:#eaf0ff;flex:none}
.ops-who{display:flex;gap:10px;align-items:center}
.ops-who .pid{font-weight:700;font-size:13px}
.ops-who .sub{font-size:11px;color:#667085}

.ops-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.b-due{background:#fdeaea;color:#b00020} .b-up{background:#eaf0ff;color:#0b3ea8}
.b-missed{background:#fdeaea;color:#b00020} .b-done{background:#e6f4ea;color:#1b7f3b}
.b-call{background:#fdf3e2;color:#8a5a00}  .b-wait{background:#f2f4f7;color:#475467}

.ops-calls{display:flex;gap:6px}
.ops-call{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;border:1px solid #eaecf0;background:#fff;color:#98a2b3}
.c-answered{background:#e6f4ea;border-color:#b7e1c5;color:#1b7f3b}
.c-delivered{background:#e6f4ea;border-color:#b7e1c5;color:#1b7f3b}
.c-queued{background:#fdf3e2;border-color:#f0dcb4;color:#8a5a00}
.c-failed{background:#fdeaea;border-color:#f3c2c2;color:#b00020}
.c-cancelled{background:#f2f4f7;border-color:#eaecf0;color:#98a2b3}
.ops-callno{font-size:9px;color:#98a2b3;text-align:center;margin-bottom:2px}

.ops-panel{background:#fff;border-radius:14px;padding:18px;
  box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04)}
.ops-panel h3{margin:0 0 12px;font-size:15px}
.ops-kv{display:flex;justify-content:space-between;gap:12px;font-size:12px;padding:5px 0}
.ops-kv .k{color:#667085} .ops-kv .v{font-weight:600;text-align:right}
.ops-box{border:1px solid #eaecf0;border-radius:11px;padding:12px;margin-top:12px}
.ops-box h4{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#667085}

/* Repeat groups on the desk entry form - completes Phase 2B step 7.
   The shared collect-core widget is the same one the field app renders, so
   these rules only give it desk chrome; the PWA keeps its own. */
.wf-repeat .repeat-group{margin-top:4px}
.wf-repeat .repeat-instances{display:grid;gap:10px}
.wf-repeat .repeat-instance{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg)}
.wf-repeat .repeat-instance-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:8px}
.wf-repeat .repeat-instance label{display:block;font-weight:600;font-size:13px;margin:8px 0 3px;color:var(--ink)}
.wf-repeat .repeat-instance label.chk{display:flex;align-items:center;gap:7px;font-weight:400}
.wf-repeat .repeat-instance label.chk input{width:auto}
.wf-repeat .repeat-instance .field-error{color:var(--red-700);font-size:12px;margin-top:4px}
.wf-repeat .repeat-add{margin-top:10px}
.wf-repeat .repeat-instances:empty+.repeat-add{margin-top:0}

/* ==========================================================================
   FIELD TEAMS  (Field Operations > Field Teams)
   Scoped to .ft-* so nothing here can reach another module. Everything below
   builds on the existing tokens - no new palette, no new radius scale. The
   page is dense on purpose: a coordinator checking on eight teams should not
   have to scroll past decoration to reach a number.
   ========================================================================== */

/* The application caps content at 1180px, which is right for a reading column
   and wrong for a ten-column operations table beside a sidebar. Widened for
   this page only, through the body class the layout already supports, so no
   other module moves. */
body.ft-page .container{max-width:1560px}

/* ---- page header -------------------------------------------------------- */
.ft-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ft-head .ft-head-text{flex:1 1 320px;min-width:0}
.ft-head h1{margin:0 0 2px}
.ft-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ft-head-actions .btn,.ft-head-actions summary.btn{display:inline-flex;align-items:center;gap:7px;width:auto;
  height:38px;padding:0 14px;white-space:nowrap}
.ft-head-actions svg{width:15px;height:15px;flex:0 0 15px}
summary.btn{list-style:none;cursor:pointer}
summary.btn::-webkit-details-marker{display:none}

/* ---- six summary cards -------------------------------------------------- */
.ft-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
.ft-stat{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.ft-stat .ft-ico{flex:0 0 34px;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--tint);color:var(--brand)}
.ft-stat .ft-ico svg{width:17px;height:17px}
.ft-stat .n{font-size:23px;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.ft-stat .l{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:1px}
.ft-stat .d{font-size:11.5px;color:var(--muted);line-height:1.3}
.ft-ico-green{background:var(--green-50);color:var(--green)}
.ft-ico-gold{background:var(--gold-50);color:var(--gold-700)}
.ft-ico-red{background:var(--red-50);color:var(--red-700)}

/* ---- filter bar --------------------------------------------------------- */
.ft-filters{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.ft-filters .f{display:flex;flex-direction:column;gap:4px;min-width:150px}
.ft-filters .f.grow{flex:1 1 260px;min-width:200px}
.ft-filters label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.ft-filters input,.ft-filters select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.ft-filters input:focus,.ft-filters select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,109,244,.14)}
.ft-search{position:relative}
.ft-search input{padding-left:32px}
.ft-search svg{position:absolute;left:10px;bottom:11px;width:15px;height:15px;color:var(--muted)}
.ft-clear{background:none;border:0;color:var(--brand);font-weight:600;font-size:13px;cursor:pointer;
  padding:9px 4px;white-space:nowrap}
/* Small screens: the five filters fold behind one control rather than pushing
   the teams a screen and a half down the page. Added by script, so with no
   script every filter is simply visible. */
.ft-filter-toggle{display:none}
.ft-filters.collapsed .f,.ft-filters.collapsed #ftApply,.ft-filters.collapsed .ft-clear{display:none}
.ft-filters.collapsed{padding:8px 10px}
.ft-clear:hover{text-decoration:underline}

/* ---- two-column layout -------------------------------------------------- */
/* Single column until the table can be shown whole. A 10-column table squeezed
   beside a sidebar hides Status and Actions behind a scrollbar, which is where
   the two columns a coordinator came for happen to live. */
.ft-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
.ft-main{min-width:0}
@media (min-width:1500px){
  .ft-layout{grid-template-columns:minmax(0,1fr) 268px}
}

/* ---- bulk bar ----------------------------------------------------------- */
.ft-bulk{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);
  border-bottom:0;border-radius:12px 12px 0 0;background:var(--card);font-size:13px}
.ft-bulk .n{font-weight:700;color:var(--ink)}
.ft-bulk select{padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff;
  max-width:220px}
.ft-bulk [disabled]{opacity:.5;cursor:not-allowed}

/* ---- the table ---------------------------------------------------------- */
.ft-tablecard{background:var(--card);border:1px solid var(--line);border-radius:0 0 12px 12px;
  box-shadow:var(--shadow);overflow:visible}
.ft-scroll{overflow-x:auto}
table.ft-table{width:100%;border-collapse:collapse;font-size:13px}
/* Headers wrap rather than forcing a column wider than its data needs - a
   two-line "Target / Completed" costs one row of height once, a column 40px
   too wide costs it on every screen. */
table.ft-table th{text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);padding:8px 7px;border-bottom:1px solid var(--line);background:#fafcff;
  white-space:normal;line-height:1.25;vertical-align:bottom}
table.ft-table th:nth-child(7){max-width:86px}
table.ft-table th a{color:inherit;display:inline-flex;align-items:center;gap:4px}
table.ft-table td{padding:9px 7px;border-bottom:1px solid #eef3fa;vertical-align:middle}
table.ft-table tr:last-child td{border-bottom:0}
table.ft-table tbody tr:hover{background:#f8fbff}
table.ft-table tr.ft-flag td{background:#fffdf5}
table.ft-table tr.ft-flag:hover td{background:#fff9e8}
.ft-check{width:34px}
.ft-team{display:flex;align-items:center;gap:9px;min-width:0}
.ft-dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.ft-team a{font-weight:700;color:var(--ink);white-space:nowrap}
.ft-team a:hover{color:var(--brand)}
.ft-person{display:flex;align-items:center;gap:9px;min-width:0}
.ft-person .avatar{width:28px;height:28px;flex:0 0 28px;font-size:10.5px;font-weight:700}
.ft-person .nm{display:block;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:112px}
.ft-person .rl{font-size:11px;color:var(--muted);line-height:1.2;white-space:nowrap}
.ft-num{display:block;font-weight:700;line-height:1.15;white-space:nowrap}
.ft-num-sub{display:block;font-size:10.5px;color:var(--muted);line-height:1.2;white-space:nowrap}
.ft-countbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.ft-countbtn:hover .ft-num{color:var(--brand);text-decoration:underline}
.ft-progress{min-width:88px}
.ft-progress .pv{font-weight:700;font-size:12.5px;margin-bottom:4px}
.ft-bar{height:5px;border-radius:3px;background:#e3e9ef;overflow:hidden;max-width:92px}
.ft-bar i{display:block;height:100%;border-radius:3px;background:var(--green)}
.ft-bar.warn i{background:var(--gold)} .ft-bar.bad i{background:var(--red)}
.ft-bar.muted i{background:var(--line)}
.ft-expected{font-size:10.5px;color:var(--muted);margin-top:3px;white-space:nowrap}

/* ---- status badges ------------------------------------------------------ */
.ft-badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:11px;white-space:nowrap}
.ft-badge.good{background:var(--green-50);color:#0b6b47}
.ft-badge.warn{background:var(--gold-50);color:var(--gold-700)}
.ft-badge.bad{background:var(--red-50);color:var(--red-700)}
.ft-badge.muted{background:#eef2f7;color:#48586a}
.ft-note-i{color:var(--muted);cursor:help;font-size:11px;margin-left:3px}

/* ---- row actions -------------------------------------------------------- */
.ft-actions{display:flex;gap:0;align-items:center;justify-content:flex-end}
.ft-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  border:1px solid transparent;background:none;color:var(--muted);cursor:pointer}
.ft-iconbtn:hover{background:var(--tint);color:var(--brand);border-color:var(--line);text-decoration:none}
.ft-iconbtn svg{width:15px;height:15px}
.ft-menu{position:relative}
.ft-menu>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:26px;
  height:26px;border-radius:7px;color:var(--muted);cursor:pointer}
.ft-menu>summary::-webkit-details-marker{display:none}
.ft-menu>summary:hover{background:var(--tint);color:var(--brand)}
.ft-menu[open]>summary{background:var(--tint);color:var(--brand)}
.ft-menu-body{position:absolute;right:0;top:34px;z-index:40;min-width:212px;background:#fff;
  border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 34px rgba(15,27,45,.16);padding:5px}
.ft-menu-body a,.ft-menu-body button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;
  background:none;font:inherit;font-size:13px;color:var(--ink);border-radius:7px;cursor:pointer}
.ft-menu-body a:hover,.ft-menu-body button:hover{background:var(--tint);text-decoration:none}
.ft-menu-sep{height:1px;background:var(--line);margin:5px 2px}
.ft-menu-danger{color:var(--red-700)!important}
.ft-menu-danger:hover{background:var(--red-50)!important}
.ft-menu-head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  padding:6px 10px 3px}

/* ---- pagination --------------------------------------------------------- */
.ft-pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.ft-pager .sp{margin-left:auto;display:flex;align-items:center;gap:6px}
.ft-pager a,.ft-pager span.pg{display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  height:30px;padding:0 8px;border:1px solid var(--line);border-radius:7px;background:#fff;font-weight:600;
  color:var(--ink);font-size:13px}
.ft-pager a:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.ft-pager span.pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ft-pager span.pg.off{opacity:.45}
.ft-pager select{padding:5px 8px;border:1px solid var(--line);border-radius:7px;font-size:13px;background:#fff}

/* ---- insights sidebar --------------------------------------------------- */
.ft-side{display:grid;gap:12px;position:sticky;top:14px}
.ft-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:14px}
.ft-panel h3{margin:0 0 2px;font-size:14px}
.ft-panel .sub{font-size:11.5px;color:var(--muted);margin-bottom:10px}
.ft-kv{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #f0f4fa;font-size:13px}
.ft-kv:last-of-type{border-bottom:0}
.ft-kv .ft-ico{flex:0 0 24px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;background:var(--tint);color:var(--brand)}
.ft-kv .ft-ico svg{width:13px;height:13px}
.ft-kv .k{flex:1;min-width:0}
.ft-kv .v{font-weight:700}
.ft-panel-link{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;
  border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:13px;font-weight:600}
.ft-panel-link:hover{border-color:var(--brand);text-decoration:none}
.ft-donut{display:flex;align-items:center;gap:14px}
.ft-donut svg{flex:0 0 96px}
.ft-legend{display:grid;gap:7px;font-size:12px;min-width:0}
.ft-legend div{display:flex;align-items:center;gap:7px}
.ft-legend i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.ft-legend b{font-size:13px}
.ft-legend small{color:var(--muted)}
.ft-rank{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #f0f4fa;font-size:13px}
.ft-rank:last-of-type{border-bottom:0}
.ft-rank .pos{flex:0 0 20px;height:20px;border-radius:6px;background:var(--tint);color:var(--brand-800);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.ft-rank .nm{flex:1;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-rank .pc{font-weight:700}

/* ---- bottom information cards ------------------------------------------- */
.ft-info{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.ft-info .c{display:flex;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:13px}
.ft-info .t{font-weight:700;font-size:13px;margin-bottom:2px}
.ft-info .d{font-size:12px;color:var(--muted);line-height:1.35}

/* ---- empty state -------------------------------------------------------- */
.ft-empty{text-align:center;padding:40px 24px}
.ft-empty .ft-ico{width:52px;height:52px;border-radius:14px;margin:0 auto 12px}
.ft-empty .ft-ico svg{width:26px;height:26px}
.ft-empty h3{margin:0 0 6px;font-size:17px}
.ft-empty p{max-width:520px;margin:0 auto 8px;color:var(--muted);font-size:13.5px}
.ft-empty-actions{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.ft-empty-actions .btn{width:auto}
.ft-explain{margin:18px auto 0;max-width:560px;text-align:left;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ---- drawer (create / edit) --------------------------------------------- */
.ft-drawer{position:fixed;inset:0;z-index:70;display:none}
.ft-drawer.open{display:block}
.ft-drawer-back{position:absolute;inset:0;background:rgba(16,32,43,.42)}
.ft-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);background:#fff;
  box-shadow:-14px 0 44px rgba(15,27,45,.2);display:flex;flex-direction:column}
/* The form is what actually holds the head, body and footer, so it - not the
   panel - has to be the column. Without this the footer is laid out past the
   bottom of a fixed panel and the save button cannot be reached at all. */
.ft-drawer-panel>form{display:flex;flex-direction:column;height:100%;min-height:0;margin:0}
.ft-drawer-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);
  flex:0 0 auto}
.ft-drawer-head h2{margin:0;font-size:16px}
.ft-drawer-x{margin-left:auto;background:none;border:0;font-size:24px;line-height:1;color:var(--muted);cursor:pointer}
.ft-drawer-body{padding:16px 18px;overflow:auto;flex:1 1 auto;min-height:0}
.ft-drawer-foot{display:flex;gap:8px;justify-content:flex-end;padding:13px 18px;border-top:1px solid var(--line);
  background:var(--bg);flex:0 0 auto}
.ft-drawer-foot .btn{width:auto}
.ft-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ft-field{margin-bottom:13px}
.ft-field>label{display:block;font-size:12.5px;font-weight:700;margin-bottom:4px;color:var(--ink)}
.ft-field input,.ft-field select,.ft-field textarea{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--ink)}
.ft-field textarea{min-height:74px;resize:vertical}
.ft-field input:focus,.ft-field select:focus,.ft-field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,109,244,.14)}
.ft-field .hint{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.ft-field.bad input,.ft-field.bad select,.ft-field.bad textarea{border-color:#e0a3a3;background:#fffafa}
.ft-err{color:var(--red-700);font-size:12px;font-weight:600;margin-top:4px}
.ft-swatches{display:flex;gap:7px;flex-wrap:wrap}
.ft-swatch{position:relative;width:30px;height:30px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.ft-swatch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ft-swatch span{display:block;width:100%;height:100%;border-radius:6px}
.ft-swatch:has(input:checked){border-color:var(--ink)}
.ft-formerr{background:var(--red-50);border:1px solid #f3c6c6;color:var(--red-700);border-radius:9px;
  padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:14px}

/* ---- team detail -------------------------------------------------------- */
.ft-detail-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ft-detail-head .ft-dot{width:14px;height:14px;flex:0 0 14px;margin-top:7px}
.ft-detail-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
.ft-mini{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 13px}
.ft-mini .n{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ft-mini .l{font-size:11.5px;color:var(--muted);font-weight:600}
.ft-dl{display:grid;grid-template-columns:190px 1fr;gap:0}
.ft-dl dt{padding:7px 0;font-size:12.5px;color:var(--muted);border-bottom:1px solid #f0f4fa}
.ft-dl dd{padding:7px 0;margin:0;font-size:13.5px;border-bottom:1px solid #f0f4fa}
.ft-unavailable{background:var(--gold-50);border:1px solid var(--gold-300);border-left:4px solid var(--gold);
  border-radius:9px;padding:11px 13px;font-size:12.5px;color:#7a6220;line-height:1.5;margin-bottom:14px}
.ft-spark{display:flex;align-items:flex-end;gap:3px;height:70px;margin:10px 0 4px}
.ft-spark i{flex:1;background:var(--brand);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.ft-spark i.zero{background:var(--line)}
.ft-spark-x{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* The floating create button exists only where the header one is hidden. */
.ft-fab{display:none}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:1499px){
  .ft-side{position:static;grid-template-columns:repeat(3,1fr);display:grid}
}
@media (max-width:1180px){
  .ft-stats{grid-template-columns:repeat(3,1fr)}
  .ft-side{grid-template-columns:repeat(2,1fr)}
  .ft-info{grid-template-columns:repeat(2,1fr)}
  .ft-detail-cards{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1024px){
  .ft-stats{grid-template-columns:repeat(2,1fr)}
  .ft-side{grid-template-columns:1fr}
  .ft-info{grid-template-columns:1fr}
  .ft-detail-cards{grid-template-columns:repeat(2,1fr)}
  .ft-dl{grid-template-columns:1fr}
  .ft-dl dt{padding-bottom:0;border-bottom:0}
  /* The table becomes cards: a 10-column grid cannot be read on a phone, and a
     horizontally scrolling table hides the columns that matter most. */
  .ft-scroll{overflow:visible}
  table.ft-table thead{display:none}
  table.ft-table,table.ft-table tbody,table.ft-table tr,table.ft-table td{display:block;width:100%}
  table.ft-table tr{border:1px solid var(--line);border-radius:11px;margin:0 0 10px;padding:10px 12px;
    background:#fff}
  table.ft-table tbody{padding:10px;display:block}
  table.ft-table tbody tr:hover{background:#fff}
  table.ft-table td{border:0;padding:4px 0;display:flex;align-items:center;gap:10px}
  table.ft-table td::before{content:attr(data-label);flex:0 0 108px;font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
  /* The select box tucks into the card's top-right corner. It must not keep the
     full-width rule above, or it covers the team name it sits beside. */
  table.ft-table td.ft-check{position:absolute;top:8px;right:10px;left:auto;width:auto;margin:0;padding:0}
  table.ft-table td.ft-check::before{content:none}
  table.ft-table td[data-label="Team"]{padding-right:34px;font-size:15px}
  table.ft-table tr{position:relative}
  table.ft-table td[data-label="Team"]::before{content:none}
  .ft-actions{justify-content:flex-start}
  .ft-filters .f,.ft-filters .f.grow{flex:1 1 100%;min-width:0}
  .ft-head-actions{width:100%}
  .ft-head-actions .btn{flex:1}
  .ft-filter-toggle{display:inline-flex;align-items:center;gap:7px;width:100%;justify-content:space-between;
    background:none;border:0;font:inherit;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;
    padding:4px 2px}
  .ft-filter-toggle .cnt{font-size:11px;font-weight:700;color:#fff;background:var(--brand);border-radius:9px;
    padding:1px 7px}
  /* Create stays reachable however far down the list you are. */
  .ft-fab{display:inline-flex;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:35;
    align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:700;
    font-size:14px;padding:12px 18px;border-radius:26px;box-shadow:0 8px 24px rgba(27,109,244,.36)}
  .ft-fab:hover{text-decoration:none;color:#fff}
  .ft-fab svg{width:16px;height:16px}
  .ft-head-actions .ft-create{display:none}     /* the floating button replaces it */
}

/* ---- Study Sites -------------------------------------------------------- */
/* Deliberately short. Study Sites reuses the .ft-* system Field Teams already
   defines - the same stat strip, filter bar, table, drawer, panels and phone
   card layout - because they are two views of one module and a second stylesheet
   would be the visual half of the duplication this work exists to remove. Only
   what genuinely has no counterpart is added here. */
.fs-name{font-weight:700;color:var(--ink);white-space:nowrap}
.fs-name:hover{color:var(--brand)}
.fs-drawer-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;background:var(--tint);color:var(--brand);flex:0 0 32px}
.fs-drawer-ico svg{width:17px;height:17px}
/* The site table carries three more columns than the team table, so it needs the
   wider breakpoint before the sidebar may sit beside it. */
@media (min-width:1500px) and (max-width:1679px){
  body.ft-page .ft-layout{grid-template-columns:minmax(0,1fr)}
  body.ft-page .ft-side{position:static;display:grid;grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  table.ft-table td[data-label="Site / Area"]{padding-right:34px;font-size:15px}
  table.ft-table td[data-label="Site / Area"]::before{content:none}
}

/* ============================================================================
   Identity console - Platform Users, Organization Members, Study Members.
   Appended by Nelara_IAM v1.0.0. Everything here is namespaced .iam-*, and the
   three pages otherwise reuse the ft-* component set that Field Teams and
   Study Sites already use, so all five pages are visibly one application.
   ========================================================================= */
.iam-table{width:100%;border-collapse:collapse;font-size:13px}
.iam-table thead th{position:sticky;top:0;background:#f8fafc;z-index:1;text-align:left;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.iam-table tbody td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.iam-table tbody tr:hover{background:#fafcff}
.iam-table tbody tr:last-child td{border-bottom:none}
.iam-cbcol{width:34px;padding-right:0!important}
.iam-actcol{width:84px;text-align:right;white-space:nowrap}
.iam-sortable a{color:inherit;text-decoration:none;display:inline-flex;gap:3px;align-items:center}
.iam-sortable a:hover{color:var(--brand)}
.iam-sortmark{font-size:9px;opacity:.75}

.iam-person{display:flex;align-items:flex-start;gap:9px;min-width:0}
.iam-av{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em}
.iam-av.t0{background:#1b6df4}.iam-av.t1{background:#0e8f5f}.iam-av.t2{background:#7c3aed}
.iam-av.t3{background:#d97706}.iam-av.t4{background:#db2777}.iam-av.t5{background:#0891b2}
.iam-who{min-width:0}
.iam-nm{font-weight:600;line-height:1.25;color:var(--ink)}
.iam-nm a{color:inherit;text-decoration:none}
.iam-nm a:hover{color:var(--brand);text-decoration:underline}
.iam-sub{font-size:11.5px;color:var(--muted);line-height:1.35;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:230px}
.iam-you{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:9px;
  background:var(--green-50);color:#0b6b47;vertical-align:middle;margin-left:4px}

.iam-role{display:inline-block;font-size:11px;font-weight:700;padding:2px 9px;border-radius:11px;
  white-space:nowrap;background:#eef2f7;color:#48586a}
.iam-role.r-red{background:#fee2e2;color:#9f1239}
.iam-role.r-violet{background:#ede9fe;color:#5b21b6}
.iam-role.r-blue{background:#e0edff;color:#1e40af}
.iam-role.r-teal{background:#ccfbf1;color:#0f766e}
.iam-role.r-amber{background:#fef3c7;color:#92400e}
.iam-role.r-grey{background:#eef2f7;color:#48586a}
/* A role key with no row in the roles table. Deliberately conspicuous: it
   grants nothing, and an administrator needs to see that rather than a label. */
.iam-role.r-stale{background:#fff7ed;color:#9a3412;border:1px dashed #fdba74}
.ft-badge.info{background:#e0edff;color:#1e40af}

.iam-when{line-height:1.25}
.iam-when .r{display:block;font-weight:600;color:var(--ink);font-size:12.5px}
.iam-when .x{display:block;font-size:11px;color:var(--muted)}

.iam-tok{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.iam-tok .m{font-size:12px;letter-spacing:.06em;color:var(--ink)}
.iam-tok-b{display:inline-flex;gap:2px}
.iam-tok-why{font-size:11px;color:var(--muted);max-width:150px;line-height:1.3}
.iam-tok-out{display:block;width:100%;font-size:12.5px;background:#f8fafc;border:1px solid var(--line);
  border-radius:7px;padding:5px 8px;word-break:break-all}

.iam-ib{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);cursor:pointer;
  padding:0;text-decoration:none}
.iam-ib:hover{background:#eef4ff;border-color:#dbe5f4;color:var(--brand)}
.iam-ib svg{width:16px;height:16px}
.iam-orglink{font-weight:600;color:var(--ink);text-decoration:none}
.iam-orglink:hover{color:var(--brand);text-decoration:underline}
.iam-team{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:none}
.iam-team:hover{color:var(--brand)}
.iam-note-i{cursor:help;color:var(--muted);font-size:11px}

.iam-note{display:flex;gap:10px;align-items:flex-start;background:#f0f6ff;border:1px solid #d6e4ff;
  border-radius:11px;padding:10px 13px;margin-bottom:14px;font-size:12.5px;color:#1e3a5f;line-height:1.5}
.iam-note svg{flex:none;width:17px;height:17px;margin-top:1px;color:#1b6df4}

/* ------------------------------------------------------------- the drawer */
.iam-drawer{position:fixed;inset:0;z-index:80}
.iam-drawer[hidden]{display:none}
.iam-drawer-back{position:absolute;inset:0;background:rgba(15,27,45,.42)}
.iam-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100%);background:#fff;
  box-shadow:-18px 0 44px rgba(16,24,40,.18);display:flex;flex-direction:column}
.iam-drawer-head{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)}
.iam-drawer-head h2{margin:0;font-size:16px;font-weight:700;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iam-drawer-body{padding:16px 18px 30px;overflow:auto;flex:1}

.iam-form label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);margin:11px 0 4px}
.iam-form label.iam-check{display:flex;align-items:center;gap:8px;text-transform:none;
  font-size:13px;font-weight:600;letter-spacing:0;color:var(--ink);margin-top:10px}
.iam-form input[type=text],.iam-form input[type=email],.iam-form input[type=search],
.iam-form input:not([type]),.iam-form select{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:13.5px;background:#fff}
.iam-form input:focus,.iam-form select:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(27,109,244,.13)}
.iam-form .help{font-size:12px;color:var(--muted);line-height:1.5;margin:7px 0 0}
.iam-readonly{padding:9px 11px;border:1px dashed var(--line);border-radius:9px;background:#f8fafc;
  font-size:13px;color:var(--ink)}
.iam-warn{background:#fff7ed;border:1px solid #fed7aa;border-left:3px solid #ea580c;border-radius:9px;
  padding:11px 13px;font-size:12.5px;line-height:1.55;color:#7c2d12;margin:4px 0 6px}
.iam-warn strong{display:block;margin-bottom:3px;color:#7c2d12}

.iam-h3{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin:20px 0 8px}
.iam-kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;
  border-bottom:1px solid #f1f5f9;font-size:13px}
.iam-kv span{color:var(--muted)}
.iam-kv b{color:var(--ink);font-weight:600;text-align:right}
.iam-listrow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
.iam-listrow:last-child{border-bottom:none}
.iam-card-head{display:flex;flex-direction:column;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.iam-card-badges{display:flex;gap:6px;flex-wrap:wrap}

/* ------------------------------------------------------------------ toasts */
.iam-toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:8px}
.iam-toast{background:#0f1b2d;color:#fff;font-size:13px;padding:11px 15px;border-radius:10px;
  box-shadow:0 12px 30px rgba(16,24,40,.26);max-width:340px;line-height:1.45;
  transition:opacity .35s,transform .35s}
.iam-toast.bad{background:#7f1d1d}
.iam-toast.go{opacity:0;transform:translateY(6px)}

/* ------------------------------------------------------------- responsive */
@media (max-width:1180px){
  .iam-sub{max-width:160px}
}
@media (max-width:900px){
  /* The table becomes stacked cards. Role, status and the action menu stay
     visible, because those are what someone is on this page to act on. */
  .iam-table thead{display:none}
  .iam-table,.iam-table tbody,.iam-table tr,.iam-table td{display:block;width:100%;box-sizing:border-box}
  .iam-table tr{border:1px solid var(--line);border-radius:11px;margin-bottom:10px;padding:4px 2px;
    position:relative;background:#fff}
  .iam-table tbody td{border-bottom:none;padding:5px 12px}
  .iam-table tbody td:empty{display:none}
  .iam-cbcol{position:absolute;top:8px;right:44px;width:auto;padding:0!important}
  .iam-actcol{position:absolute;top:6px;right:8px;width:auto}
  .iam-sub{max-width:none}
  .iam-drawer-panel{width:100%}
  .iam-toasts{left:14px;right:14px;bottom:78px}
  .iam-toast{max-width:none}
}

/* ---- identity console: the clear-filters control -------------------------
   .ft-clear predates the identity pages and never held an icon: Field Sites
   uses the text character. An <svg> with no width inside a flex line has no
   intrinsic size to fall back on, so it grew to fill the row and rendered as a
   giant refresh arrow. Scoped to .iam-clear so the Field Sites control is left
   exactly as it was. */
.iam-clear{display:inline-flex;align-items:center;gap:6px;text-decoration:none;line-height:1}
.iam-clear svg{width:14px;height:14px;flex:0 0 auto}

/* ---- a script that ends the interview ----------------------------------
   `.notice` is overridden to the blue tint further up this file, so every note
   on the desk entry form rendered as the same blue panel: a reminder to the
   interviewer and a script telling them to STOP looked identical. Red, plus a
   heavier left bar and bold text, so it still reads as different to someone who
   cannot distinguish the two colours. Which notes get this is decided by
   Termination::isStopScript(), the same rule the server and the field app use. */
.notice.notice-stop{background:#fdeaea;border:1px solid #f0bcbc;border-left:6px solid #c0392b;
  color:#8f1d1d;font-weight:600}
/* ---- Study Sites: the field-team assignment notice -----------------------
   A site with no team used to replace the WHOLE listing with a "create your
   first field team" card, so a site that had just been created successfully
   was nowhere on screen. The listing is now unconditional and this slim strip
   carries the same information as a configuration status. It sits below the
   summary strip and above the filters; it never substitutes for the table. */
.ft-assign-notice{display:flex;gap:12px;align-items:center;background:var(--gold-50);
  border:1px solid var(--gold-300);border-left:4px solid var(--gold);border-radius:9px;
  padding:10px 13px;margin-bottom:14px}
.ft-assign-notice .t{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:#7a6220}
.ft-assign-notice .t strong{display:block;color:var(--ink);font-size:13.5px;font-weight:700}
.ft-assign-notice .t .d{display:block;margin-top:2px}
.ft-assign-notice .btn{flex:0 0 auto}
.ft-assign-notice .ft-ico{flex:0 0 auto}
@media (max-width:640px){
  .ft-assign-notice{flex-wrap:wrap}
  .ft-assign-notice .btn{width:100%}
}

/* ---- Study Sites: the geographic coverage view ---------------------------
   study_sites is a tree, so the table shows hierarchy by indentation and one
   expandable row per sub-county rather than by three geography columns. A
   table wide enough for County / Sub-county / Ward / Village stops being
   readable long before it stops being accurate. */
.cv-stats{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.cv-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.cv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cv-filters{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;padding:14px 16px;margin-bottom:14px}
.cv-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.cv-f label{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.cv-f select,.cv-f input[type=search]{height:38px;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;font-size:13.5px;background:#fff;color:var(--ink);min-width:150px}
.cv-f-search{flex:1 1 260px}
.cv-searchwrap{position:relative;display:block}
.cv-searchwrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;
  color:var(--muted);pointer-events:none}
.cv-searchwrap input{width:100%;padding-left:32px!important}
.cv-f-go{flex-direction:row;gap:8px;align-items:center}

.cv-card{padding:0;overflow:hidden}
.cv-table{width:100%;border-collapse:collapse;font-size:13.5px}
.cv-table thead th{text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.cv-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft,#eef1f4);vertical-align:middle}
.cv-num{text-align:right;white-space:nowrap}
.cv-prog{width:130px;white-space:nowrap}
.cv-act{width:44px;text-align:right}
.cv-geo{min-width:230px}

.cv-group{border-left:3px solid var(--cv-accent,#1b6df4)}
.cv-grouprow td{background:#f7f9fb;border-bottom:1px solid var(--line)}
.cv-toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--ink)}
.cv-gname{font-weight:700;font-size:14px}
.cv-chev{width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .12s ease;color:var(--muted)}
.cv-group.is-open .cv-chev{transform:rotate(90deg)}
.cv-count{display:inline-block;margin-left:9px;font-size:11.5px;color:var(--muted)}
.cv-gapbadge{margin-left:8px}

/* Collapsed by default; the first group is opened by the view. */
.cv-group .cv-row{display:none}
.cv-group.is-open .cv-row{display:table-row}

.cv-site a{font-weight:600;color:var(--ink);text-decoration:none}
.cv-site a:hover{text-decoration:underline}
.cv-row .cv-geo{padding-left:34px}
.cv-ward{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.cv-person{display:block}
.cv-sub{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.cv-team{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:12.5px}
.cv-team:hover{text-decoration:underline}
.cv-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}

.cv-pct{display:inline-block;min-width:34px;font-variant-numeric:tabular-nums;font-size:12.5px}
.cv-bar{display:inline-block;width:74px;height:5px;border-radius:3px;background:#e8ecf1;overflow:hidden;
  vertical-align:middle;margin-left:6px}
.cv-bar i{display:block;height:100%;border-radius:3px}
.cv-bar-good i{background:#0e8f5f}.cv-bar-mid i{background:#c98a00}.cv-bar-low i{background:#1b6df4}
.cv-bar-none i{background:transparent}

.cv-kebab{list-style:none;cursor:pointer;padding:2px 7px;border-radius:6px;color:var(--muted);
  font-size:16px;line-height:1}
.cv-kebab::-webkit-details-marker{display:none}
.cv-kebab:hover{background:#eef1f5;color:var(--ink)}

.cv-table tfoot td{background:#f7f9fb;border-top:1px solid var(--line);border-bottom:0;font-weight:600}
.cv-none{padding:26px 14px;text-align:center;color:var(--muted)}

/* Mobile: one card per site. Ten columns do not belong on a phone. */
@media (max-width:820px){
  .cv-table,.cv-table tbody,.cv-table tfoot,.cv-table tr,.cv-table td{display:block;width:100%}
  .cv-table thead{display:none}
  .cv-group .cv-row{display:none}
  .cv-group.is-open .cv-row{display:block;padding:10px 0 12px;border-bottom:1px solid var(--line)}
  .cv-row td{border:0;padding:2px 14px}
  .cv-row .cv-geo{padding-left:14px;padding-top:8px}
  .cv-row .cv-num,.cv-row .cv-prog{text-align:left;width:auto;display:inline-block;padding-right:18px}
  .cv-row .cv-num::before{content:attr(data-label) " ";font-size:11px;color:var(--muted)}
  .cv-act{position:absolute;right:10px}
  .cv-grouprow td{display:inline-block;width:auto;padding:10px 14px;border-bottom:0}
  .cv-grouprow .cv-geo{display:block;width:100%}
}

/* ---- Field Teams: the deployment view ------------------------------------
   A village holds one team_id, so per-village attribution means one team row
   per enumerator. The table groups those deployments by the geography they
   cover so the page reads as "who is deployed" rather than as a list of
   records. Nothing is merged: expanding a group lists every real team inside. */
.dp-split{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.dp-split.has-drawer{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1100px){.dp-split.has-drawer{grid-template-columns:1fr}}
.dp-main{min-width:0}

.dp-table .cv-grouprow td{background:#fff}
.dp-table .cv-group.is-selected{background:#f2f9f5}
.dp-table .cv-group.is-selected .cv-grouprow td{background:#f2f9f5}
.dp-table .cv-group.is-selected{border-left-color:#0e8f5f}
.dp-table .cv-sub{display:block;font-size:11px;color:var(--muted);margin-top:1px;font-weight:400}
.dp-eye{display:inline-flex;padding:4px;border-radius:6px;color:var(--muted)}
.dp-eye:hover{background:#eef1f5;color:var(--ink)}
.dp-eye svg{width:16px;height:16px}
.dp-dep td{background:#fbfcfd}
.dp-depname{padding-left:34px!important}
.dp-init{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:#e8ecf1;color:var(--ink);font-size:9px;font-weight:700;margin-right:3px}

.dp-summary{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;padding:14px 18px;margin-top:14px}
.dp-summary .l{display:block;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.dp-summary .n{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-top:2px}
.dp-summary .btn{margin-left:auto}

.dp-drawer{position:sticky;top:14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.05);max-height:calc(100vh - 28px);overflow:auto}
.dp-dhead{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dp-dhead h2{font-size:16px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-dhead p{margin:3px 0 0;font-size:12px}
.dp-close{margin-left:auto;font-size:22px;line-height:1;color:var(--muted);text-decoration:none;padding:0 4px}
.dp-close:hover{color:var(--ink)}

.dp-facts{margin:12px 0 4px;display:grid;gap:7px}
.dp-facts>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.dp-facts dt{color:var(--muted);margin:0}
.dp-facts dd{margin:0;font-weight:600;text-align:right}

.dp-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dp-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.dp-sechead h3{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}
.dp-sechead a{font-size:12px}
.dp-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dp-list li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.dp-lname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-lname em{color:var(--muted);font-style:normal;font-size:11.5px}
.dp-lmeta{flex:0 0 auto;font-size:11.5px;color:var(--muted)}
.dp-pin svg{width:14px;height:14px;color:#1b6df4}
.dp-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#eef1f5;font-size:10px;font-weight:700;color:var(--ink);flex:0 0 auto}
.dp-more{margin:8px 0 0;font-size:12px;color:var(--muted)}
.dp-edit{width:100%;margin-top:16px}
.dp-note{margin-top:16px;font-size:12px}

@media (max-width:820px){
  .dp-summary{gap:12px 20px}
  .dp-summary .btn{margin-left:0;width:100%}
}

/* ---- Field Teams: the deployment view ------------------------------------
   A village holds one team_id, so per-village attribution means one team row
   per enumerator. The table groups those deployments by the geography they
   cover so the page reads as "who is deployed" rather than as a list of
   records. Nothing is merged: expanding a group lists every real team inside. */
.dp-split{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.dp-split.has-drawer{grid-template-columns:minmax(0,1fr) 360px}
@media (max-width:1100px){.dp-split.has-drawer{grid-template-columns:1fr}}
.dp-main{min-width:0}

.dp-table .cv-grouprow td{background:#fff}
.dp-table .cv-group.is-selected{background:#f2f9f5}
.dp-table .cv-group.is-selected .cv-grouprow td{background:#f2f9f5}
.dp-table .cv-group.is-selected{border-left-color:#0e8f5f}
.dp-table .cv-sub{display:block;font-size:11px;color:var(--muted);margin-top:1px;font-weight:400}
.dp-eye{display:inline-flex;padding:4px;border-radius:6px;color:var(--muted)}
.dp-eye:hover{background:#eef1f5;color:var(--ink)}
.dp-eye svg{width:16px;height:16px}
.dp-dep td{background:#fbfcfd}
.dp-depname{padding-left:34px!important}
.dp-init{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:#e8ecf1;color:var(--ink);font-size:9px;font-weight:700;margin-right:3px}

.dp-summary{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;padding:14px 18px;margin-top:14px}
.dp-summary .l{display:block;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.dp-summary .n{display:block;font-size:17px;font-weight:700;color:var(--ink);margin-top:2px}
.dp-summary .btn{margin-left:auto}

.dp-drawer{position:sticky;top:14px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.05);max-height:calc(100vh - 28px);overflow:auto}
.dp-dhead{display:flex;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.dp-dhead h2{font-size:16px;margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dp-dhead p{margin:3px 0 0;font-size:12px}
.dp-close{margin-left:auto;font-size:22px;line-height:1;color:var(--muted);text-decoration:none;padding:0 4px}
.dp-close:hover{color:var(--ink)}

.dp-facts{margin:12px 0 4px;display:grid;gap:7px}
.dp-facts>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.dp-facts dt{color:var(--muted);margin:0}
.dp-facts dd{margin:0;font-weight:600;text-align:right}

.dp-sec{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.dp-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.dp-sechead h3{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0}
.dp-sechead a{font-size:12px}
.dp-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dp-list li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.dp-lname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-lname em{color:var(--muted);font-style:normal;font-size:11.5px}
.dp-lmeta{flex:0 0 auto;font-size:11.5px;color:var(--muted)}
.dp-pin svg{width:14px;height:14px;color:#1b6df4}
.dp-avatar{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:#eef1f5;font-size:10px;font-weight:700;color:var(--ink);flex:0 0 auto}
.dp-more{margin:8px 0 0;font-size:12px;color:var(--muted)}
.dp-edit{width:100%;margin-top:16px}
.dp-note{margin-top:16px;font-size:12px}

@media (max-width:820px){
  .dp-summary{gap:12px 20px}
  .dp-summary .btn{margin-left:0;width:100%}
}

/* Contracts & Declarations - subtle status chip in Field Teams member roster */
.ft-decl{display:inline-block;margin-top:3px;font-size:11px;font-weight:600;text-decoration:none;border-radius:10px;padding:1px 8px}
.ft-decl.ok{color:#0e6b46;background:#e7f3ec}
.ft-decl.pend{color:#8a6d1f;background:#f7ecd0}
/* overflow-x:auto creates a clipping context on BOTH axes, so an open row menu
   was cut off at the card edge: the options were there and unreachable. While a
   menu is open the card stops clipping. Horizontal scrolling is only needed
   while reading the table, and a menu is open only while acting on one row. */
.ft-scroll:has(details[open]){overflow:visible}

/* ---------------------------------------------------------------------------
   Field assignment block (desk collector). Deliberately quiet: this is context,
   not a question, so it must not compete with the questions underneath it.
   Appended by deploy; safe to append twice (identical rules).
   --------------------------------------------------------------------------- */
.fa-block{background:#f7f9fd;border:1px solid #dbe5f4;border-radius:10px;padding:12px 14px;margin-bottom:18px}
.fa-head{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b7f;margin-bottom:8px}
.fa-grid{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0}
.fa-item{min-width:130px}
.fa-item dt{font-size:11.5px;color:#6b7a8d;margin:0 0 1px}
.fa-item dd{margin:0;font-size:14px;font-weight:600;color:#0f1b2d;line-height:1.25}
.fa-src{display:block;font-size:10.5px;font-weight:500;color:#8a97a8;margin-top:1px}
.fa-switch{margin-top:10px;padding-top:8px;border-top:1px solid #e4ebf7;font-size:12.5px;color:#5b6b7f}
.fa-switch a{margin-left:8px;font-weight:600}

/* ---------------------------------------------------------------------------
   Field status table on the Field Operations overview (Round 3).
   Appended to app.css by deploy; safe to append twice.
   --------------------------------------------------------------------------- */
.ds-head{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#33465e;margin-bottom:12px}
.ds-head .warn{color:#8a5a12}
.ds-head .bad{color:#a11a1a}
.ds-scroll{overflow-x:auto}
.ds-table{width:100%;font-size:13px}
.ds-table th.num,.ds-table td.num{text-align:right}
.ds-table tr.ds-bad td{background:#fff6f6}
.ds-table tr.ds-warn td{background:#fffaf0}
.ds-unknown{color:#8a97a8;font-style:italic}
.ds-pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;
  background:#eef1f5;color:#33465e}
.ds-pill.ds-ok{background:#eef9f1;color:#1a6b39}
.ds-pill.ds-warn{background:#fff7e8;color:#8a5a12}
.ds-pill.ds-bad{background:#fdeaea;color:#a11a1a}

/* ---------------------------------------------------------------------------
   Field status table on the Field Operations overview (Round 3).
   Appended to app.css by deploy; safe to append twice.
   --------------------------------------------------------------------------- */
.ds-head{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:#33465e;margin-bottom:12px}
.ds-head .warn{color:#8a5a12}
.ds-head .bad{color:#a11a1a}
.ds-scroll{overflow-x:auto}
.ds-table{width:100%;font-size:13px}
.ds-table th.num,.ds-table td.num{text-align:right}
.ds-table tr.ds-bad td{background:#fff6f6}
.ds-table tr.ds-warn td{background:#fffaf0}
.ds-unknown{color:#8a97a8;font-style:italic}
.ds-pill{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 9px;
  background:#eef1f5;color:#33465e}
.ds-pill.ds-ok{background:#eef9f1;color:#1a6b39}
.ds-pill.ds-warn{background:#fff7e8;color:#8a5a12}
.ds-pill.ds-bad{background:#fdeaea;color:#a11a1a}
.ds-table td.ds-ver{font-variant-numeric:tabular-nums;font-size:12px;color:#5b6b7f}

/* ============================================================ RECORDS INDEX
   The operational interview register. Uses the existing tokens only: no new
   palette, no framework. Tinted KPI cards, one accent per meaning, and a table
   that drops its secondary columns rather than scrolling sideways. */
.rec-lede{font-size:13.5px;margin:-6px 0 14px}
.rec-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
@media (max-width:1100px){.rec-kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.rec-kpis{grid-template-columns:repeat(2,1fr)}}
.rec-kpi{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
a.rec-kpi:hover{text-decoration:none;border-color:var(--blue)}
a.rec-kpi.on{border-color:var(--blue);box-shadow:0 0 0 2px var(--tint)}
.rec-kpi-n{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.rec-kpi-l{font-size:13px;font-weight:600;margin-top:2px}
.rec-kpi-h{font-size:11.5px;color:var(--muted);margin-top:1px}
.rec-kpi.rec-blue{background:#f5f9ff}
.rec-kpi.rec-amber{background:var(--gold-50)}
.rec-kpi.rec-green{background:var(--green-50)}
.rec-kpi.rec-grey{background:#f6f8fb}
.rec-kpi.rec-violet{background:#f6f5ff}

.rec-intake{padding:12px 16px;font-size:13.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rec-controls{padding:14px 16px}
.rec-row1{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.rec-search{flex:1 1 340px;min-width:220px;padding:9px 12px;border:1px solid var(--line);
  border-radius:8px;font-size:13.5px}
.rec-date{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.rec-date input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px}
.rec-row2{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.rec-row2 label{font-size:11.5px;color:var(--muted);display:block}
.rec-row2 select{display:block;margin-top:3px;padding:7px 9px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;min-width:130px;background:#fff}
.rec-export{position:relative}
.rec-export summary{list-style:none;cursor:pointer}
.rec-export summary::-webkit-details-marker{display:none}
.rec-menu{position:absolute;right:0;z-index:20;margin-top:4px;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);min-width:190px;padding:4px}
.rec-menu a{display:block;padding:8px 12px;font-size:13px;border-radius:6px;color:var(--ink)}
.rec-menu a:hover{background:var(--tint);text-decoration:none}

.rec-count{font-size:13px;margin:0 0 10px}
.rec-table{width:100%}
.rec-table th{white-space:nowrap;font-size:12px}
.rec-table th a{color:var(--muted)}
.rec-table td{vertical-align:top;font-size:13.5px}
.rec-table .nowrap{white-space:nowrap}
.rec-copy{border:none;background:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px}
.rec-copy:hover{color:var(--blue)}
.pill.rec-amber{background:var(--gold-50);color:var(--gold-700)}
.pill.rec-green{background:var(--green-50);color:#0b6b47}
.pill.rec-red{background:var(--red-50);color:var(--red-700)}
.pill.rec-grey{background:#f1f3f6;color:#5b6472}
.pill.rec-pub{background:#eef2ff;color:#3730a3}
.gps-good{color:#0b6b47}
.gps-fair{color:var(--gold-700)}
.gps-poor{color:var(--red-700)}
.gps-none{color:var(--muted)}

.rec-foot{display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:14px;font-size:13px}
.rec-per label{font-size:12px;color:var(--muted)}
.rec-per select{padding:5px 8px;border:1px solid var(--line);border-radius:6px;font-size:13px}
.rec-pages a{display:inline-block;min-width:28px;text-align:center;padding:4px 6px;
  border:1px solid var(--line);border-radius:6px;margin-left:4px;color:var(--ink)}
.rec-pages a.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.rec-pages a:hover{text-decoration:none;border-color:var(--blue)}
.rec-note{font-size:12.5px;margin-top:-4px}

/* Narrow screens drop the secondary columns rather than scrolling the table. */
@media (max-width:1000px){
  .rec-table .c-sec{display:none}
}

/* ------------------------------------------------------------ RECORD DETAIL */
.rec-detail-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.rec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.rec-card{padding:16px}
.rec-card h2{margin:0 0 10px;font-size:14px}
.rec-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13px}
.rec-card dt{color:var(--muted);white-space:nowrap}
.rec-card dd{margin:0}
.rec-uuid,.rec-coord{font-size:11.5px;word-break:break-all}
.rec-flag{margin-top:10px;padding:10px 12px;background:var(--gold-50);
  border-left:3px solid var(--gold);border-radius:6px;font-size:12.5px}
.rec-disp-note{font-size:12px;margin:10px 0 0}
.rec-qh{margin:0 0 4px;font-size:15px}
.rec-qh-note{font-size:12.5px;margin:0 0 12px}
.rec-sec{padding-top:16px}
.rec-qlabel{width:38%;vertical-align:top}
.rec-qvalue{vertical-align:top}
.rec-qname{font-size:11.5px}
.rec-skipped .rec-qlabel,.rec-skipped .rec-qvalue{opacity:.62}
.rec-raw td{font-size:12px}
.rec-rawv{word-break:break-all}

/* ==== NELARA-FIELD-OVERVIEW-V1 ====================================== BEGIN
   Field Overview: the field operations command centre.
   Guarded by the marker above and below. deploy.md greps for the BEGIN marker
   before appending, so this block can never land twice.
   Nothing here restyles the application shell: the sidebar, top bar, breadcrumb
   and cards are the existing ones. Only the content area of this page. */

.fo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 18px}
.fo-datebar{display:flex;align-items:center;gap:10px}
.fo-datebar input[type=date]{height:38px;border:1px solid var(--line);border-radius:9px;
  padding:0 10px;font-size:13.5px;background:#fff;color:var(--ink)}
.fo-datelabel{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap}
.fo-refresh{height:38px;width:38px;border:1px solid var(--line);border-radius:9px;background:#fff;
  cursor:pointer;font-size:17px;line-height:1;color:var(--muted)}
.fo-refresh:hover{background:#f2f5f8;color:var(--ink)}

.fo-notice{border-left:4px solid #c98a00;margin-bottom:16px}

/* --- six KPI cards ------------------------------------------------------- */
.fo-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}
.fo-kpi{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:14px 15px 13px;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(16,24,40,.04)}
a.fo-kpi:hover{border-color:#c7d2de;box-shadow:0 2px 6px rgba(16,24,40,.07)}
.fo-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;font-size:15px;margin-bottom:9px}
.fo-ic-blue{background:#e8f0fe;color:#1b6df4}
.fo-ic-green{background:#e6f5ee;color:#0e8f5f}
.fo-ic-purple{background:#f0eafc;color:#7c3aed}
.fo-ic-amber{background:#fdf1dd;color:#b26a00}
.fo-ic-teal{background:#e2f4f2;color:#0f766e}
.fo-kv{display:block;font-size:25px;font-weight:700;letter-spacing:-.02em;color:#0f2136;
  font-variant-numeric:tabular-nums;line-height:1.15}
.fo-kl{display:block;font-size:12.5px;color:#475467;margin-top:2px}
.fo-ks{display:block;font-size:11.5px;color:var(--muted);margin-top:7px}

@media (max-width:1280px){.fo-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.fo-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- the 2/3 + 1/3 grid -------------------------------------------------- */
.fo-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start}
.fo-wide{grid-column:auto}
@media (max-width:1080px){.fo-grid{grid-template-columns:1fr}}

.fo-card{padding:16px 18px 15px}
.fo-h{margin:0 0 12px;font-size:15.5px;font-weight:700;color:#0f2136}
.fo-empty{color:var(--muted);font-size:13px;margin:6px 0 2px}
.fo-none{color:var(--muted);font-weight:400}
.fo-foot{margin:12px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.fo-warntext{color:#b26a00}

/* --- sub-county table ---------------------------------------------------- */
.fo-table{width:100%;border-collapse:collapse;font-size:13.5px}
.fo-table thead th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
.fo-table td{padding:12px 10px;border-bottom:1px solid var(--line-soft,#eef1f4);vertical-align:middle}
.fo-table tfoot td{border-bottom:0;border-top:1px solid var(--line);font-weight:700;background:#fbfcfd}
.fo-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fo-prog{width:190px;white-space:nowrap}
.fo-name{font-weight:600;color:#0f2136}
.fo-name a{color:inherit;text-decoration:none}
.fo-name a:hover{text-decoration:underline}
.fo-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle}
.fo-pct{display:inline-block;min-width:38px;font-size:12.5px;font-variant-numeric:tabular-nums}
.fo-bar{display:inline-block;width:96px;height:5px;border-radius:3px;background:#e8ecf1;
  overflow:hidden;vertical-align:middle;margin-left:8px}
.fo-bar i{display:block;height:100%;border-radius:3px}
.fo-bar-good i{background:#0e8f5f}.fo-bar-mid i{background:#1b6df4}
.fo-bar-low i{background:#1b6df4}.fo-bar-none i{background:transparent}

/* --- status pills -------------------------------------------------------- */
.fo-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  white-space:nowrap}
.fo-good{background:#e6f5ee;color:#0a6b47}
.fo-warn{background:#fdf1dd;color:#8a5200}
.fo-bad{background:#fdeaea;color:#a41d1d}
.fo-none.fo-pill,.fo-pill.fo-none{background:#eef1f5;color:#5b6a7c}

/* --- today's summary ----------------------------------------------------- */
.fo-sum{list-style:none;margin:0;padding:0}
.fo-sum li{display:flex;align-items:center;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line-soft,#eef1f4)}
.fo-sum li:last-child{border-bottom:0}
.fo-sum .fo-ic{width:30px;height:30px;margin:0;font-size:13px;flex:0 0 auto}
.fo-sl{flex:1 1 auto;font-size:13px;color:#475467}
.fo-sv{font-size:13.5px;font-weight:700;color:#0f2136;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- needs attention ----------------------------------------------------- */
.fo-alerts{list-style:none;margin:0;padding:0}
.fo-alert{display:flex;align-items:center;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--line-soft,#eef1f4)}
.fo-alert:last-child{border-bottom:0}
.fo-alert.is-strong{background:#fffaf9;margin:0 -18px;padding-left:18px;padding-right:18px;
  border-left:3px solid #c0392b}
.fo-adot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.fo-adot.fo-bad{background:#c0392b}.fo-adot.fo-warn{background:#d98307}
.fo-adot.fo-good{background:#0e8f5f}.fo-adot.fo-info{background:#1b6df4}
.fo-atext{flex:1 1 auto;font-size:13px;color:#1f2d3d}
.fo-anames{font-size:12px;color:var(--muted);text-align:right;max-width:44%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-view{flex:0 0 auto;font-size:12.5px;font-weight:600;color:#1b6df4;text-decoration:none;
  border:1px solid var(--line);border-radius:8px;padding:5px 13px;background:#fff}
.fo-view:hover{background:#f2f6fb;border-color:#c7d2de}

/* --- recent activity ----------------------------------------------------- */
.fo-acts{list-style:none;margin:0;padding:0}
.fo-acts li{display:flex;align-items:flex-start;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line-soft,#eef1f4)}
.fo-acts li:last-child{border-bottom:0}
.fo-acts .fo-adot{margin-top:5px}
.fo-acopy{flex:1 1 auto;min-width:0}
.fo-acopy a{display:block;font-size:13px;font-weight:600;color:#0f2136;text-decoration:none}
.fo-acopy a:hover{text-decoration:underline}
.fo-acopy em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px}
.fo-atime{flex:0 0 auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.fo-legend{margin:16px 0 0;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.7}

/* --- phones: stack in the order the brief specifies ---------------------- */
@media (max-width:820px){
  .fo-table thead{display:none}
  .fo-table,.fo-table tbody,.fo-table tfoot,.fo-table tr,.fo-table td{display:block;width:100%}
  .fo-table tr{padding:10px 0;border-bottom:1px solid var(--line-soft,#eef1f4)}
  .fo-table td{border:0;padding:2px 0}
  .fo-table .fo-num,.fo-table .fo-prog{display:inline-block;width:auto;text-align:left;padding-right:16px}
  .fo-table .fo-num::before{content:attr(data-label) " ";font-size:11px;color:var(--muted)}
  .fo-alert{flex-wrap:wrap}
  .fo-anames{max-width:100%;text-align:left;white-space:normal;flex:1 1 100%;order:3}
}

/* Visually hidden, still read by screen readers and still focusable.
   This codebase had no such convention; the class was used before it existed,
   so "Operational date" and "Refresh" printed as visible text in the header. */
.fo-head .sr-only,.fo-datebar .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* ==== NELARA-FIELD-OVERVIEW-V1 ======================================== END */

/* Analysis v3: recursive sidebar hierarchy. */
.nav-sec.nav-depth-1{margin-left:8px;border-left:1px solid rgba(255,255,255,.10);padding-left:4px}
.nav-sec.nav-depth-1>.nav-group{padding-left:8px;font-size:11.5px;text-transform:none;letter-spacing:0;font-weight:650;color:rgba(255,255,255,.72)}
.nav-sec.nav-depth-1>.nav-group .nav-ico{width:14px;height:14px;flex-basis:14px}
.nav-link.nav-depth-2{padding-left:34px;font-size:12.75px}
.nav-link.nav-depth-2 .nav-ico{width:14px;height:14px;flex-basis:14px;opacity:.8}
.nav-sec.nav-depth-2{margin-left:14px}
.nav-sec.nav-depth-2>.nav-group{padding-left:14px;font-size:11px;text-transform:none;letter-spacing:0}

/* ============================================================================
   ORGANIZATION WORKSPACE (BLUE)
   Header identity, the studies table, quick actions, and the two sidebar rows
   that are chrome rather than menu destinations. Nothing here re-themes
   --brand: the context theme owns sidebar colour, this owns layout.
   ========================================================================= */
.orgh{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.orgh-id{display:flex;align-items:flex-start;gap:16px;flex:1 1 320px;min-width:0}
.orgh-logo{width:64px;height:64px;flex:none;border-radius:14px;object-fit:contain;
  background:#fff;border:1px solid var(--line);padding:6px}
.orgh-logo-fb{display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--tint);border-color:#d4e3fb;color:var(--brand-800);
  font-size:26px;font-weight:800;letter-spacing:-.02em}
.orgh-text{min-width:0}
.orgh-text h1{font-size:28px;font-weight:800;letter-spacing:-.028em;margin:0 0 2px;line-height:1.12}
.orgh-kicker{margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.orgh-desc{margin:5px 0 0;font-size:13.5px;color:#4a5a70;max-width:70ch}
.orgh-acts{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto}

/* KPI accents. The figure is the message; colour only separates the four. */
.dashx-kpi .s{margin-top:6px;font-size:12px;color:var(--muted)}
.dashx-kpi.k-violet::before{background:#7c5cff}
.dashx-kpi.k-violet .dashx-kpi-ico{background:#f1eeff;color:#6b46f5}
.dashx-kpi.k-green::before{background:#0e8f5f}
.dashx-kpi.k-green .dashx-kpi-ico{background:#e7f6ef;color:#0e8f5f}
.dashx-kpi.k-gold::before{background:#e6a400}
.dashx-kpi.k-gold .dashx-kpi-ico{background:#fdf3d9;color:#a97a00}

/* Studies table on the organisation home. */
.orgtbl-wrap{overflow-x:auto;margin:0 -22px;padding:0 22px}
.orgtbl{width:100%;border-collapse:collapse;font-size:13.5px}
.orgtbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);padding:10px 12px 10px 0;border-bottom:1px solid #eef2f9;
  white-space:nowrap}
.orgtbl td{padding:12px 12px 12px 0;border-bottom:1px solid #f2f5fa;vertical-align:middle}
.orgtbl tr:last-child td{border-bottom:none}
.orgtbl th.num,.orgtbl td.num{text-align:right;padding-right:18px;font-variant-numeric:tabular-nums}
.orgtbl-name{display:flex;align-items:center;gap:11px;min-width:0}
.orgtbl-nm{min-width:0}
.orgtbl-nm a{display:block;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;max-width:38ch}
.orgtbl-nm a:hover{color:var(--brand)}
.orgtbl-nm small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42ch}
.orgtbl-when{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.orgtbl-act a{font-weight:700;font-size:12.5px;color:var(--brand);white-space:nowrap}
.orgpill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;
  font-weight:700;background:#e7f6ef;color:#0b6b48;white-space:nowrap}
.orgpill.is-off{background:#eef2f7;color:#5b6b7f}

/* Quick actions: four shortcuts to pages that already exist. */
.orgqa{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
  padding:16px 22px 20px}
.orgqa-item{display:flex;align-items:flex-start;gap:12px;padding:14px 15px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:#32435c;
  transition:background .14s,border-color .14s,transform .14s}
.orgqa-item:hover{background:var(--tint);border-color:#bcd5fa;transform:translateY(-1px);
  text-decoration:none}
.orgqa-ico{width:34px;height:34px;flex:none;border-radius:10px;background:var(--tint);
  color:var(--brand);display:flex;align-items:center;justify-content:center}
.orgqa-ico svg{width:18px;height:18px}
.orgqa-txt{min-width:0}
.orgqa-txt b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.orgqa-txt small{display:block;font-size:12px;color:var(--muted);margin-top:2px}

/* Sidebar chrome: the workspace level line, the Switch workspace row, and the
   account link on the signed-in user's name. */
.ws-sub{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.72);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-foot-links{margin-top:auto;padding:8px 10px 4px;
  border-top:1px solid rgba(255,255,255,.10)}
.nav-switch{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:600}
.nav-switch:hover{background:rgba(255,255,255,.10);color:#fff;text-decoration:none}
.nav-switch svg{width:17px;height:17px;flex:none;opacity:.75}
a.who-link{color:#fff;text-decoration:none}
a.who-link:hover{text-decoration:underline}

/* Invite form on the Members > Invitations tab. */
.orginv-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0 14px;align-items:end}
.orginv-form .f{min-width:0}
.orginv-form .f label{display:block;font-size:11px;color:#5b6b7f;margin-bottom:3px}
.orginv-form .f input,.orginv-form .f select{width:100%}
.orginv-form button{grid-column:1/-1;justify-self:start;margin-top:12px}

/* Logo control on Organization Settings. */
.orgset-logo{display:flex;align-items:flex-start;gap:16px;margin:6px 0 16px;flex-wrap:wrap}
.orgset-logo-ctl{flex:1 1 260px;min-width:0}

@media (max-width:620px){
  .orgh-text h1{font-size:23px}
  .orgh-acts{margin-left:0;width:100%}
  .orgh-acts .btn{flex:1;justify-content:center}
  .orgqa{padding-left:16px;padding-right:16px}
}
@media (prefers-reduced-motion:reduce){
  .orgqa-item{transition:none}
  .orgqa-item:hover{transform:none}
}