/* The portal's work screen (mock-up approved by Hans on 11 November 2026).

   It sits on site.css, the website's own sheet, for the IBM Plex fonts (ATOnsite is Plex Sans, CLMono is Plex Mono,
   both served from static/site/fonts) and its resets. Everything else is here: a calm, dense screen in grey and white,
   with colour only for status and the one primary button. Nothing is loaded from outside this server (the content
   security policy forbids it), and no style is written inside a page. */

/* ---- tokens ------------------------------------------------------------------------------------------------------ */
:root{
  --ct-ink:#0A1024; --ct-dim:#3A4255; --ct-faint:#5A6274; --ct-line:#B9C2CF; --ct-rule:#D3D8E0; --ct-rule-soft:#E6E9EE;
  --ct-ground:#FBFCFD; --ct-surface:#FFFFFF; --ct-sunk:#F4F6F9; --ct-link:#0A6F8C; --ct-link-hover:#075268;
  /* Status: the same meaning on every screen. */
  --ct-red:#C92A2A; --ct-orange:#C2570C; --ct-green:#2B8A3E; --ct-grey:#9AA1AE;
  /* The one primary button: white on blue. */
  --ct-primary:#0A7E9E; --ct-primary-hover:#086A85; --ct-on-primary:#FFFFFF;
  /* The dark top bar. */
  --ct-bar:#0A1024; --ct-bar-ink:#E8ECF3; --ct-bar-dim:#AEB7C7; --ct-bar-link:#C9D1DE; --ct-bar-accent:#3FB6D8;
  --ct-bar-field:#121826; --ct-bar-rule:#232B3B;
  --ct-sans:ATOnsite,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ct-mono:CLMono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ct-gutter:24px; --ct-max:1440px; --ct-r:8px;
}
/* The work screen is light only, like the mock-up. site.css turns its own tokens dark on a dark device; the portal
   keeps them light, so pages that still use them do not mix dark panels into a light screen. */
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{
  color-scheme:light;
  --ink:#0A1024; --dim:#3A4255; --faint:#5A6274; --rule:#D3D8E0; --ground:#FBFCFD; --surface:#FFFFFF; --sunk:#F4F6F9;
  --accent:#0A6F8C; --accent-soft:#E6F2F6; --chip-ink:#FFFFFF; --high:#C2570C; --med:#C2570C; --low:#5A6274;
  --geen:#2B8A3E; --sans:var(--ct-sans); --mono:var(--ct-mono);
}

/* ---- page -------------------------------------------------------------------------------------------------------- */
body.portal{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--ct-ground);color:var(--ct-ink);
  font-family:var(--ct-sans);font-size:14px;line-height:1.45;overflow-wrap:normal;word-break:normal;hyphens:manual}
.portal a{color:var(--ct-link)}
.portal a:hover{color:var(--ct-link-hover)}
.ct-main{flex:1 0 auto;width:100%;max-width:var(--ct-max);margin:0 auto;padding:20px var(--ct-gutter) 28px;
  display:flex;flex-direction:column;gap:16px}
.ct-main h1{margin:0;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:0}
.ct-main h2,.ct-main h3{margin:0;font-size:15px;font-weight:600;line-height:1.3}
.ct-main p{margin:0}
.ct-hide{position:absolute;left:-9999px}
.mono{font-family:var(--ct-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--ct-mono);font-variant-numeric:tabular-nums;text-align:right}
.muted,.dim{color:var(--ct-faint)}
.sans{font-family:var(--ct-sans)}
.small{font-size:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.spread{justify-content:space-between;align-items:baseline}
form{margin:0}

/* ---- top bar ----------------------------------------------------------------------------------------------------- */
.ct-top{background:var(--ct-bar);color:var(--ct-bar-ink);display:flex;align-items:center;flex-wrap:wrap;gap:4px 24px;
  padding:0 var(--ct-gutter);min-height:48px}
.portal .ct-mark{color:#FFFFFF;text-decoration:none;font-weight:600;font-size:16px;padding:12px 0;white-space:nowrap}
.portal .ct-mark span{color:var(--ct-bar-accent)}
.portal .ct-mark:hover{color:#FFFFFF}
.ct-menu{display:flex;gap:4px;flex:1 1 auto;min-width:0}
.portal .ct-menu a{color:var(--ct-bar-link);text-decoration:none;padding:13px 12px 10px;border-bottom:3px solid transparent;
  white-space:nowrap}
.portal .ct-menu a:hover{color:#FFFFFF}
.portal .ct-menu a[aria-current="page"]{color:#FFFFFF;border-bottom-color:var(--ct-bar-accent);font-weight:500}
.ct-search input{background:var(--ct-bar-field);border:1px solid var(--ct-bar-rule);border-radius:6px;height:32px;
  padding:0 10px;color:var(--ct-bar-ink);font:inherit;width:170px}
.ct-search input::placeholder{color:var(--ct-bar-dim)}
.ct-search input:focus{outline:2px solid var(--ct-bar-accent);outline-offset:1px}
.ct-who{display:flex;gap:12px;align-items:center;white-space:nowrap}
.ct-org{color:var(--ct-bar-ink)}
.ct-user{color:var(--ct-bar-dim)}
.portal .ct-who a{color:var(--ct-bar-ink);text-decoration:none}
.ct-out button{background:transparent;border:0;color:var(--ct-bar-dim);font:inherit;cursor:pointer;padding:6px 0}
.ct-out button:hover{color:#FFFFFF;text-decoration:underline}

/* ---- footer: one grey line --------------------------------------------------------------------------------------- */
.ct-foot{font-size:12px;color:var(--ct-faint);padding:10px var(--ct-gutter);border-top:1px solid var(--ct-rule-soft)}
.portal .ct-foot a{color:var(--ct-faint)}

/* ---- buttons ----------------------------------------------------------------------------------------------------- */
.portal .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  padding:6px 12px;min-height:32px;border:1px solid var(--ct-line);border-radius:6px;background:var(--ct-surface);
  color:var(--ct-link);font:inherit;font-weight:500;text-decoration:none;cursor:pointer;transform:none;white-space:nowrap}
.portal .btn:hover{border-color:var(--ct-link);color:var(--ct-link-hover);transform:none}
.portal .btn.primary{background:var(--ct-primary);border-color:var(--ct-primary);color:var(--ct-on-primary)}
.portal .btn.primary:hover{background:var(--ct-primary-hover);border-color:var(--ct-primary-hover);color:var(--ct-on-primary)}

/* ---- status ------------------------------------------------------------------------------------------------------ */
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ct-grey);flex:none}
.dot.red{background:var(--ct-red)} .dot.orange{background:var(--ct-orange)} .dot.green{background:var(--ct-green)}
.c-red{color:var(--ct-red)} .c-orange{color:var(--ct-orange)} .c-green{color:var(--ct-green)} .c-ink{color:var(--ct-ink)}
.strong-num{font-weight:600}

/* ---- counters ---------------------------------------------------------------------------------------------------- */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.portal .counter{display:flex;align-items:baseline;gap:10px;background:var(--ct-surface);border:1px solid var(--ct-rule);
  border-radius:var(--ct-r);padding:10px 14px;text-decoration:none;color:var(--ct-ink)}
.portal .counter:hover{border-color:var(--ct-line);color:var(--ct-ink)}
.counter .n{font-family:var(--ct-mono);font-size:22px;font-weight:600}
.counter .l{color:var(--ct-dim)}

/* ---- segmented switches (staff) ---------------------------------------------------------------------------------- */
.switches{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.switch{display:flex;align-items:center;gap:8px}
.switch>span{font-size:12px;color:var(--ct-faint)}
.seg{display:flex;border:1px solid var(--ct-line);border-radius:6px;overflow:hidden}
.portal .seg a{padding:6px 12px;min-height:32px;box-sizing:border-box;text-decoration:none;color:var(--ct-dim);
  background:var(--ct-surface);white-space:nowrap}
.portal .seg a[aria-current="true"]{background:var(--ct-ink);color:#FFFFFF}

/* ---- the clusters list ------------------------------------------------------------------------------------------- */
/* One grid for the head and every row, so the columns line up. The last column is fixed: every next-step button
   fills it, centred and on one line, so all buttons have the same width (Hans, 11 Nov 2026). */
.cl-list{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);overflow-x:auto}
.cl-grid{display:grid;grid-template-columns:28px minmax(170px,1.5fr) minmax(90px,1fr) 96px minmax(120px,1fr) 64px 64px
  64px 104px 104px 64px 156px;align-items:center;gap:0 8px;padding:0 12px;min-width:1080px;box-sizing:border-box}
.cl-head{height:34px;font-size:12px;color:var(--ct-faint);border-bottom:1px solid var(--ct-rule)}
.cl-head .num{font-family:var(--ct-sans)}
.nowrap{white-space:nowrap}
.cl-row{min-height:40px;border-bottom:1px solid var(--ct-rule-soft);color:var(--ct-dim)}
.cl-row:last-child{border-bottom:0}
.cl-row>.dot{justify-self:center}
.cl-name{display:flex;flex-direction:column;min-width:0}
.portal .cl-name a{font-weight:600;text-decoration:none;color:var(--ct-ink)}
.cl-name small{font-size:12px;color:var(--ct-faint)}
.portal .cl-row .loc{text-decoration:none;color:var(--ct-dim)}
.cl-date{font-family:var(--ct-mono);font-size:13px}
.cl-group{display:flex;align-items:center;gap:12px;padding:0 12px;height:34px;background:var(--ct-sunk);
  border-bottom:1px solid var(--ct-rule);font-weight:600;min-width:1080px;box-sizing:border-box}
.cl-group small{font-weight:400;color:var(--ct-faint);font-size:12px}
.portal .next{justify-self:stretch;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.legend{font-size:12px;color:var(--ct-faint)}
.ct-empty{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);padding:16px}

/* Under 720px the rows become cards, as in the phone mock-up: a status stripe on the left, the name, one line of
   counts and dates, and the next-step button across the full width of the card. */
@media (max-width:720px){
  :root{--ct-gutter:16px}
  body.portal{font-size:15px}
  .ct-top{gap:0 16px;padding-top:0}
  .ct-menu{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none}
  .portal .ct-menu a{padding:10px 10px 8px}
  .ct-search{display:none}
  .ct-who{margin-left:auto}
  .ct-org{display:none}
  .counters{grid-template-columns:1fr 1fr;gap:8px}
  .portal .counter{flex-direction:column;gap:0;padding:8px 12px}
  .counter .l{font-size:13px}
  .cl-list{background:transparent;border:0;overflow:visible;display:flex;flex-direction:column;gap:8px}
  .cl-grid.cl-head{display:none}
  .cl-name small{display:none}
  .cl-grid{display:grid;min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:12px}
  .cl-row{background:var(--ct-surface);border:1px solid var(--ct-rule);border-left:4px solid var(--ct-grey);
    border-radius:var(--ct-r)}
  .cl-row:last-child{border-bottom:1px solid var(--ct-rule)}
  .cl-row.red{border-left-color:var(--ct-red)} .cl-row.orange{border-left-color:var(--ct-orange)}
  .cl-row.green{border-left-color:var(--ct-green)}
  .cl-row>.dot,.cl-row>.c-storage,.cl-row>.c-sev,.cl-row>.c-last,.cl-row>.c-next,.cl-row>.c-change{display:none}
  .cl-name{grid-column:1/-1}
  .portal .cl-name a{font-size:16px}
  .cl-row>.loc,.cl-row>.c-type{font-size:13px;color:var(--ct-faint)}
  .cl-row>.c-type{justify-self:end}
  .cl-row>.c-phone{display:block;grid-column:1/-1;font-size:13px}
  .portal .next{grid-column:1/-1;min-height:44px;padding:10px 12px}
  .cl-group{min-width:0;background:transparent;border:0;padding:8px 0 0;height:auto;flex-wrap:wrap}
}
@media (min-width:721px){.c-phone{display:none}}

/* ---- panels, facts, tables (other pages) ------------------------------------------------------------------------- */
.panel{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);padding:16px}
.grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:820px){.grid2{grid-template-columns:minmax(0,1fr)}}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:4px 16px;margin:0}
dl.facts dt{color:var(--ct-faint)}
dl.facts dd{margin:0}
.eyebrow{font-size:12px;font-weight:400;color:var(--ct-faint);text-transform:none;letter-spacing:0;margin:0}
.eyebrow::before{display:none}
.tagline{font-size:12px;padding:1px 8px;border:1px solid var(--ct-rule);border-radius:999px;color:var(--ct-dim);
  white-space:nowrap}
.state{display:inline-flex;align-items:center;gap:6px}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ct-grey)}
.state.ok::before{background:var(--ct-green)} .state.wait::before{background:var(--ct-orange)}
.state.bad::before{background:var(--ct-red)}
.tbl{overflow-x:auto}
.portal table{border-collapse:collapse;width:100%}
.portal th{text-align:left;font-weight:400;color:var(--ct-faint);font-size:12px;padding:8px 10px;
  border-bottom:1px solid var(--ct-rule)}
.portal td{padding:8px 10px;border-bottom:1px solid var(--ct-rule-soft);vertical-align:top}
.portal tr:last-child td{border-bottom:0}
.cl-table{table-layout:fixed}
.cl-table .c-name{width:20%}.cl-table .c-type{width:24%}.cl-table .c-storage{width:34%}.cl-table .c-upload{width:22%}
@media (max-width:700px){.cl-table{table-layout:auto}}
.portal a.strong{font-weight:600;text-decoration:none}
.portal a.strong:hover{text-decoration:underline}
.loc-link{color:var(--ct-ink)!important;text-decoration:none}

/* Where you are: organisation, location, cluster, each a link back. */
/* The path bar: where you are, and every step back is a link. The same on every page below a menu item. */
.crumbs,.path{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:15px;font-weight:600;
  background:var(--ct-surface);border:1px solid var(--ct-rule);border-left:4px solid var(--ct-bar-accent);
  border-radius:6px;padding:7px 12px;margin-bottom:6px}
.portal .crumbs a,.portal .path a{text-decoration:none;color:var(--ct-link);padding:2px 6px;border-radius:4px}
.portal .crumbs a:hover,.portal .path a:hover{background:#EAF6FA;text-decoration:underline}
.crumbs>*+*::before{content:"\203A";color:var(--ct-faint);margin:0 8px 0 2px;font-weight:400}
.crumbs [aria-current="page"]{color:var(--ct-ink);padding:2px 6px}
.portal .crumbs a+a::before,.portal .crumbs a+span::before{display:inline-block;text-decoration:none}

/* ---- forms ------------------------------------------------------------------------------------------------------- */
form.signup{display:grid;gap:14px}
.portal label{font-size:14px;font-weight:500;color:var(--ct-ink);display:grid;gap:6px}
.portal input[type=text],.portal input[type=email],.portal input[type=file],.portal select{font:inherit;font-size:16px;
  padding:8px 10px;border:1px solid var(--ct-line);border-radius:6px;background:var(--ct-surface);color:var(--ct-ink);
  width:100%;box-sizing:border-box}
.portal input[type=text]:focus,.portal input[type=email]:focus,.portal select:focus{outline:2px solid var(--ct-primary);
  outline-offset:1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.portal label.check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.check input{margin-top:4px}
.fixed-field p{margin:0;padding:8px 10px;border:1px dashed var(--ct-line);border-radius:6px;color:var(--ct-ink)}
.callout{background:var(--ct-sunk);border-radius:var(--ct-r);padding:12px 14px}
.notice{border-left:3px solid var(--ct-orange);padding-left:10px}
.errorlist{color:var(--ct-red);font-size:13px;margin:0;padding-left:18px}
.portal input[type=tel],.portal input[type=datetime-local],.portal textarea{font:inherit;font-size:16px;padding:8px 10px;
  border:1px solid var(--ct-line);border-radius:6px;background:var(--ct-surface);color:var(--ct-ink);width:100%;
  box-sizing:border-box}
.portal textarea{resize:vertical;min-height:5.5em}
.portal input[type=tel]:focus,.portal input[type=datetime-local]:focus,.portal textarea:focus{
  outline:2px solid var(--ct-primary);outline-offset:1px}
.portal .help{font-size:12px;font-weight:400;color:var(--ct-faint)}
/* A question with its answers as radio buttons (Django's RadioSelect: a div of divs, each a label around an input). */
.portal fieldset.choices{border:0;margin:0;padding:0;display:grid;gap:6px}
.portal fieldset.choices legend{font-size:14px;font-weight:500;color:var(--ct-ink);padding:0;margin-bottom:6px}
.portal fieldset.choices label{display:flex;gap:10px;align-items:center;font-weight:400;padding:7px 10px;
  border:1px solid var(--ct-line);border-radius:6px;background:var(--ct-surface);cursor:pointer}
.portal fieldset.choices label:has(input:checked){border-color:var(--ct-primary);background:#EAF6FA}
.portal fieldset.choices > div{display:grid;gap:6px}

/* ---- incidents and ClusterDown (incidents/) --------------------------------------------------------------------- */
.cd-down{border-left:4px solid var(--ct-red)}
.cd-down h2{color:var(--ct-red)}
ol.cd-steps{margin:0;padding-left:20px;display:grid;gap:6px}
ol.cd-steps li::marker{font-weight:600;color:var(--ct-primary)}
.cd-step{display:grid;gap:8px}
.cd-step h2 .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:8px;
  background:var(--ct-primary);color:var(--ct-on-primary);font-size:13px;font-weight:600;vertical-align:1px}
.cd-said{white-space:pre-wrap;margin:0}

/* ---- upload ------------------------------------------------------------------------------------------------------ */
.drop{border:2px dashed var(--ct-line);border-radius:var(--ct-r);padding:24px 16px;text-align:center;background:var(--ct-sunk)}
.drop .big{font-weight:600}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.checks li{display:grid;grid-template-columns:1.4rem minmax(0,1fr) auto;gap:8px;align-items:baseline}
.checks .ic{font-family:var(--ct-mono);font-weight:500}
.checks .ok{color:var(--ct-green)} .checks .bad{color:var(--ct-red)}
.code{font-family:var(--ct-mono);background:var(--ct-sunk);border:1px solid var(--ct-rule);border-radius:6px;padding:4px 8px}

/* ---- activity timeline ------------------------------------------------------------------------------------------- */
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--ct-rule);display:grid;gap:10px}
.tl li{position:relative;padding-left:14px}
.tl li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--ct-surface);border:2px solid var(--ct-grey)}
.tl time{font-family:var(--ct-mono);font-size:12px;color:var(--ct-faint);display:block}

/* ---- the cluster page -------------------------------------------------------------------------------------------- */
.cp-head{align-items:flex-start}
.cp-title{gap:4px}
.cp-name{gap:10px}
.dot.big{width:12px;height:12px}
.cp-facts{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--ct-dim)}
.portal .cp-facts a{text-decoration:none}
.cp-actions{gap:8px}
.cp-position{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;background:var(--ct-surface);
  border:1px solid var(--ct-rule);border-radius:var(--ct-r);padding:10px 14px}
.cp-position strong{font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--ct-rule);overflow-x:auto}
.portal .tabs a{padding:8px 14px;min-height:40px;box-sizing:border-box;display:flex;align-items:center;gap:6px;
  text-decoration:none;color:var(--ct-dim);border-bottom:3px solid transparent;white-space:nowrap}
.portal .tabs a[aria-current="page"]{color:var(--ct-ink);font-weight:600;border-bottom-color:var(--ct-primary)}

/* Risk labels: the report's severity palette. Critical is black with a red ring, as in the reports. */
.labels{gap:8px}
.portal .label-filter{display:flex;align-items:center;gap:8px;min-height:32px;padding:4px 10px 4px 4px;box-sizing:border-box;
  border:1px solid var(--ct-rule);border-radius:6px;background:var(--ct-surface);color:var(--ct-ink);text-decoration:none}
.portal .label-filter[aria-current="true"]{background:#E3F1F5;border-color:var(--ct-primary)}
.sev{display:inline-block;background:var(--ct-grey);color:#FFFFFF;border-radius:4px;padding:1px 8px;font-size:12px;
  font-weight:600;white-space:nowrap}
.sev.critical{background:#0A1024;box-shadow:0 0 0 2px #FF3B30} .sev.high{background:var(--ct-red)}
.sev.medium{background:var(--ct-orange)} .sev.low{background:#1C6FBF} .sev.fixed{background:var(--ct-green)}
.sev.accepted{background:#6B7285}

/* Work in hand and the timeline bars are SVG, so their widths are attributes, not styles. */
.work{gap:8px 16px}
.key{display:inline-block;width:8px;height:8px;border-radius:2px;vertical-align:middle;box-sizing:border-box}
.w-progress{fill:var(--ct-primary);background:var(--ct-primary)}
.w-planned{fill:#7CC4D8;background:#7CC4D8}
.w-rest{fill:var(--ct-rule-soft);background:var(--ct-rule-soft)}
.key.w-rest{border:1px solid var(--ct-line)}
.s-critical{fill:#0A1024;background:#0A1024} .s-high{fill:var(--ct-red);background:var(--ct-red)}
.s-medium{fill:#E8870E;background:#E8870E} .s-low{fill:#4C8FD6;background:#4C8FD6}
.key.s-critical,.key.s-high,.key.s-medium,.key.s-low{width:10px;height:10px}
.work-bar,.t-bar{display:block;max-width:100%}

/* Lists on the cluster page: one grid per list for the head and the rows. */
.list{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);overflow-x:auto}
.list-head{height:34px;font-size:12px;color:var(--ct-faint);border-bottom:1px solid var(--ct-rule)}
.list-head .num{font-family:var(--ct-sans)}
.list-row{min-height:40px;border-bottom:1px solid var(--ct-rule-soft);padding-top:4px;padding-bottom:4px}
.list-row:last-child{border-bottom:0}
.list-note{padding:8px 12px;font-size:12px;color:var(--ct-faint)}
.f-grid,.t-grid,.m-grid{display:grid;align-items:center;gap:0 10px;padding-left:12px;padding-right:12px;box-sizing:border-box}
.f-grid{grid-template-columns:84px minmax(280px,3fr) 64px minmax(120px,1fr) 130px 110px 96px;min-width:1000px}
.t-grid{grid-template-columns:104px 150px 272px 64px 72px 72px;min-width:780px}
.m-grid{grid-template-columns:48px minmax(170px,1.2fr) minmax(280px,2.4fr) 190px minmax(140px,1fr);min-width:960px}
.f-title{font-weight:500;color:var(--ct-ink)}
.ws{display:flex;align-items:center;gap:6px}
ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:4px}

@media (max-width:720px){
  .cp-actions{width:100%}
  .cp-actions .btn,.cp-actions form{flex:1 1 100%}
  .cp-actions form .btn{width:100%}
  .list{background:transparent;border:0;overflow:visible;display:flex;flex-direction:column;gap:8px}
  .list-head{display:none}
  .f-grid,.t-grid,.m-grid{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 12px}
  .list-row{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r)}
  .list-row:last-child{border-bottom:1px solid var(--ct-rule)}
  .f-grid .f-title,.m-grid .f-title,.m-grid>span:nth-child(3){grid-column:1/-1}
  /* A finding on the phone: risk and first seen, the title, where (often a long node list, so a line of its own),
     then state and owner. Two equal columns, so a long field never pushes another over it. */
  .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f-grid>.f-seen{order:1;justify-self:end;white-space:nowrap}
  .f-grid>.f-title{order:2}
  .f-grid>.f-where{order:3;grid-column:1/-1}
  .f-grid>.f-mod{display:none}
  .f-grid>.f-ws{order:4}
  .f-grid>.f-owner{order:5;justify-self:end;text-align:right}
  .t-grid .t-bar{grid-column:1/-1}
}

/* Reading page (How we handle credentials): a readable line length inside the dense frame. */
.ct-prose{max-width:72ch}
.ct-prose h2{font-size:16px;font-weight:600;margin:20px 0 6px}
.ct-prose p{margin:0 0 10px}
.ct-prose .ct-table{overflow-x:auto;margin:8px 0 16px}
.ct-prose table{border-collapse:collapse;width:100%;background:var(--ct-surface)}
.ct-prose th,.ct-prose td{text-align:left;vertical-align:top;padding:8px 10px;border:1px solid var(--ct-rule)}
.ct-prose th{font-size:12px;font-weight:500;color:var(--ct-faint)}

/* Location page: move a cluster to another location, and notes after an action. */
.ct-move{display:flex;gap:6px;align-items:center}
.ct-move select{font:inherit;min-height:32px;min-width:12em}
.ct-note{margin:0;padding:8px 12px;border-radius:6px;border:1px solid var(--ct-rule);background:var(--ct-surface)}
.ct-note-error{border-color:#C92A2A;color:#C92A2A}
.ct-note-success{border-color:#2B8A3E}

/* Release desk (staff): the waiting list and one result with its card of facts beside the buttons. */
.d-grid{display:grid;grid-template-columns:28px minmax(150px,1.3fr) minmax(130px,1fr) 128px 92px 64px 64px 64px minmax(200px,1.6fr) 96px;
  align-items:center;gap:0 10px;padding:0 12px;min-width:1100px;box-sizing:border-box}
.d-holds{font-size:13px}
.d-top{margin:0;padding:0 0 0 20px;display:grid;gap:14px}
.d-top li{display:grid;gap:4px}
.d-facts{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px 12px;margin:0}
.d-facts dt{font-size:12px;color:var(--ct-faint);padding-top:2px}
.d-facts dd{margin:0;display:grid;gap:6px}
.d-crit li{color:var(--ct-red)}
.d-wide{width:100%}
.d-more summary{cursor:pointer;color:var(--ct-link);padding:6px 0}
.d-more form{padding-top:8px}
.d-more input,.d-more textarea{font:inherit;padding:6px 8px;border:1px solid var(--ct-line);border-radius:6px}
@media (max-width:720px){
  .d-grid{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;padding:12px}
  .d-grid.cl-head{display:none}
  .cl-row>.d-org,.cl-row>.d-since,.cl-row>.d-measured{display:none}
  .cl-row>.d-holds{grid-column:1/-1;font-size:13px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .d-facts{grid-template-columns:minmax(0,1fr)}
  .d-layout>aside{order:-1}
}
.ct-note-warning{border-color:var(--ct-orange)}

/* All clusters (staff): a tree of customer, location and cluster, and removing one. */
.t-tree{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);margin-bottom:16px;overflow:hidden}
.t-grid{display:grid;grid-template-columns:300px 200px 84px 124px 96px minmax(150px,1fr);
  align-items:center;gap:0 12px;padding:0 14px;min-height:38px;box-sizing:border-box;border-left:4px solid transparent}
.t-head{min-height:34px;font-size:13px;font-weight:600;color:var(--ct-ink);border-bottom:1px solid var(--ct-rule)}
.t-head .num{font-family:var(--ct-sans)}
.t-grid .num{text-align:right}
.t-grid>:last-child{justify-self:end}
.t-span{grid-column:2/5}
.t-count{font-size:12px}
/* The customer: a dark band in the colour of the top bar, with the brand's blue as its edge. */
.t-org+.t-org{border-top:2px solid var(--ct-surface)}
.t-org-row{background:var(--ct-bar);color:var(--ct-bar-ink);cursor:pointer;list-style:none;min-height:42px;
  border-left:4px solid var(--ct-bar-accent)}
.portal .t-org-row .t-name a{color:#FFFFFF;font-weight:600;font-size:15px;text-decoration:none}
.portal .t-org-row .t-name a:hover{text-decoration:underline}
.t-org-row .t-count{color:var(--ct-bar-dim)}
/* The location: a light blue band, one step in. */
.t-loc-row{background:#EAF6FA;cursor:pointer;list-style:none;border-top:1px solid #CFE6EE;border-left:4px solid #9FD3E3}
.t-loc-row .t-name{padding-left:20px}
.portal .t-loc-row .t-name a{color:var(--ct-ink);font-weight:600;text-decoration:none}
.portal .t-loc-row .t-name a:hover{text-decoration:underline}
.t-loc-row .t-count{color:var(--ct-dim)}
.t-org-row::-webkit-details-marker,.t-loc-row::-webkit-details-marker{display:none}
.t-org-row .t-name::before,.t-loc-row .t-name::before{content:"\25B8";display:inline-block;width:18px;color:var(--ct-bar-accent)}
.t-loc-row .t-name::before{color:var(--ct-primary)}
.t-org[open]>.t-org-row .t-name::before,.t-loc[open]>.t-loc-row .t-name::before{content:"\25BE"}
/* The cluster: two steps in, with a guide line down from its location. */
.t-cl-row{border-top:1px solid var(--ct-rule-soft);color:var(--ct-dim);position:relative}
.portal .t-cl-row .t-name{padding-left:72px}
.portal .t-cl-row.t-flat .t-name{padding-left:0}
.t-cl-row::before{content:"";position:absolute;left:46px;top:0;bottom:50%;width:22px;border-left:1px solid var(--ct-line);
  border-bottom:1px solid var(--ct-line)}
.t-cl-row:not(:last-child)::after{content:"";position:absolute;left:46px;top:50%;bottom:0;border-left:1px solid var(--ct-line)}
.portal .t-cl-row .t-name{text-decoration:none}
.t-cl-row:hover{background:var(--ct-sunk)}
.t-cl-row.t-flat::before,.t-cl-row.t-flat::after{display:none}
.portal .t-pill{display:inline-block;min-width:22px;padding:1px 6px;border-radius:10px;background:var(--ct-orange);color:#FFFFFF;
  font-weight:600;font-size:12px;text-align:center;text-decoration:none;box-sizing:border-box}
@media (max-width:720px){
  .t-grid{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:8px 12px}
  .t-head{display:none}
  .t-span{grid-column:auto}
  .t-grid>:last-child{grid-column:1/-1}
  .t-grid>span:last-child:empty{display:none}
  .t-cl-row>:nth-child(3),.t-cl-row>:nth-child(4),.t-cl-row>:nth-child(5),.t-org-row>:nth-child(3),.t-loc-row>:nth-child(3){display:none}
  .t-loc-row .t-name{padding-left:10px}
  .portal .t-cl-row .t-name{padding-left:44px}
  .t-cl-row::before,.t-cl-row:not(:last-child)::after{left:30px}
  .t-cl-row::before{width:16px}
}
.portal .btn.s-danger{background:var(--ct-red);border-color:var(--ct-red);color:#FFFFFF}
.d-confirm{font:inherit;padding:6px 8px;border:1px solid var(--ct-line);border-radius:6px;max-width:20rem}
@media (max-width:720px){
  .s-grid{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:12px}
  .s-grid.cl-head{display:none}
  .s-grid>.num,.s-grid>.cl-date{display:none}
  .s-grid .next{grid-column:1/-1}
}
.portal .linkish{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ct-link);cursor:pointer;text-decoration:underline}

/* Reports (measurements/reports.py): the list of every report, newest first, and one report to read or print. */
.r-grid{display:grid;align-items:center;gap:0 10px;padding-left:12px;padding-right:12px;box-sizing:border-box;
  grid-template-columns:104px minmax(150px,1.4fr) minmax(110px,1fr) 160px 130px 110px 150px;min-width:960px}
.r-open{display:flex;gap:6px}
.r-row-head{gap:8px}
.r-report{max-width:880px}
@media (max-width:720px){
  .r-grid{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 12px}
  .r-grid .r-cluster{grid-column:1/-1;order:-1}
  .r-grid .r-loc{display:none}
  .r-grid.list-head{display:none}
  .r-grid .r-open{grid-column:1/-1}
  .portal .r-grid .next{flex:1 1 0;min-height:44px}
}
/* The System Documentation (templates/measurements/sysdoc.html): the document engine's own page in a frame. */
.sd-frame{display:block;width:100%;height:78vh;min-height:480px;border:1px solid var(--ct-rule);
  border-radius:var(--ct-r);background:#FFFFFF;box-sizing:border-box}
@media (max-width:720px){.sd-frame{height:70vh}}
@media print{
  .ct-top,.ct-foot,.skip,.no-print{display:none !important}
  .portal .r-report{border:0;padding:0;max-width:none}
  .sev{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Risks (templates/clusters/risks.html): every finding of every cluster in one list. One grid for the head and the
   rows. A row with State and Owner to set is a form; the script saves it on a change, so its Save button only shows
   without the script. Printed, the choices print as plain words and the filters stay off the paper. */
.h-sub{font-size:14px;font-weight:400;color:var(--ct-dim)}
.rk-grid{display:grid;grid-template-columns:84px minmax(240px,3fr) minmax(120px,1fr) 56px minmax(110px,1fr) 176px 160px 92px;
  align-items:center;gap:0 10px;padding-left:12px;padding-right:12px;min-width:1120px;box-sizing:border-box;margin:0}
.rk-grid .rk-save{grid-column:1/-1;justify-self:end;padding:4px 0}
.rk-js .rk-save,.rk-js .rk-go{display:none}
.rk-cluster{display:flex;flex-direction:column;line-height:1.3}
.portal .rk-title,.portal .rk-cluster a{text-decoration:none}
.portal .rk-title{color:var(--ct-ink)}
.portal .rk-title:hover,.portal .rk-cluster a:hover{text-decoration:underline}
.rk-state{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
.rk-state select{flex:1 1 0}
.rk-by{flex-basis:100%;padding-left:14px}
.portal .rk-state select,.portal .rk-owner select,.portal .rk-pick select{font-size:14px;padding:4px 8px;min-height:32px;
  width:100%;min-width:0}
.portal .rk-pick select{width:auto;min-width:10em}
.portal .rk-pick label{font-size:12px;font-weight:400;color:var(--ct-faint);display:inline}
.rk-print{display:none}
.rk-gap{margin:0}
.w-fixed{background:var(--ct-green)} .w-accepted{background:#6B7285}
.w-proposed{background:#FFFFFF;border:2px solid #6B7285} .w-again{background:var(--ct-red)}
@media (max-width:720px){
  .rk-grid{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;padding:10px 12px}
  .rk-grid.list-head{display:none}
  .rk-filters .switch{max-width:100%;min-width:0}
  .rk-filters .seg{overflow-x:auto;max-width:100%}
  .rk-cluster{flex-direction:row;flex-wrap:wrap;gap:0 6px;align-items:baseline}
  .rk-grid>.rk-seen{order:1;justify-self:end}
  .rk-grid>.rk-title{order:2;grid-column:1/-1}
  .rk-grid>.rk-cluster{order:3}
  .rk-grid>.rk-where{order:4;justify-self:end;text-align:right}
  .rk-grid>.rk-module{display:none}
  .rk-grid>.rk-state{order:5}
  .rk-grid>.rk-owner{order:6;align-self:start}
  .rk-grid>.rk-save{order:7}
  .portal .rk-state select,.portal .rk-owner select{font-size:16px;min-height:40px}
}
@media print{
  .ct-top,.ct-foot,.rk-noprint,.rk-save,.rk-state select,.rk-owner select,.rk-state>.key{display:none!important}
  .rk-print{display:inline}
  .list{border:0;overflow:visible}
  .rk-grid{min-width:0;grid-template-columns:70px minmax(0,3fr) minmax(0,1fr) 40px minmax(0,1fr) 100px 100px 72px;font-size:11px}
  .list-row{break-inside:avoid}
}

/* Organisation (accounts/org_views.py): people with their roles, open invitations, and locations. */
.o-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;margin-top:16px}
.o-list{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r)}
.o-grid{display:grid;grid-template-columns:minmax(150px,1fr) minmax(170px,1.2fr) 210px minmax(130px,1fr) minmax(170px,auto);
  align-items:center;gap:0 12px;padding:0 14px;min-height:44px;box-sizing:border-box}
.o-grid.o-loc{grid-template-columns:minmax(200px,1fr) 90px 80px minmax(190px,auto)}
.o-head{min-height:34px;font-size:13px;font-weight:600;color:var(--ct-ink);border-bottom:1px solid var(--ct-rule)}
.o-row+.o-row{border-top:1px solid var(--ct-rule-soft)}
.o-row:hover{background:var(--ct-sunk)}
.o-mail{color:var(--ct-dim);overflow-wrap:anywhere}
.portal .o-name a{text-decoration:none}
.o-grid .num{text-align:right}
.o-head .num{font-family:var(--ct-sans)}
.o-role{display:flex;gap:6px;align-items:center}
.o-role select{font:inherit;padding:4px 6px;border:1px solid var(--ct-line);border-radius:6px;background:var(--ct-surface)}
.portal .o-role .btn{padding:4px 10px;min-height:0}
.o-pill{display:inline-block;padding:2px 10px;border-radius:10px;background:var(--ct-sunk);border:1px solid var(--ct-rule);
  font-size:12px;font-weight:600;color:var(--ct-dim)}
.o-pill.o-owner{background:var(--ct-bar);border-color:var(--ct-bar);color:#FFFFFF}
.o-pill.o-wait{background:#FFF4E5;border-color:#F3C99B;color:var(--ct-orange)}
.o-acts{display:flex;gap:14px;justify-content:flex-end;align-items:center}
.portal .linkish.o-danger{color:var(--ct-red)}
.o-roles{font-size:13px;color:var(--ct-dim)}
.o-roles summary{cursor:pointer;color:var(--ct-link)}
.o-roles dl{display:grid;grid-template-columns:120px 1fr;gap:4px 12px;margin:8px 0 0}
.o-roles dt{font-weight:600;color:var(--ct-ink)}
.o-roles dd{margin:0}
@media (max-width:900px){
  .o-layout{grid-template-columns:minmax(0,1fr)}
  .o-grid,.o-grid.o-loc{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 12px}
  .o-head{display:none}
  .o-mail{grid-column:1/-1}
  .o-acts{grid-column:1/-1;justify-content:flex-start}
}
.o-reach{color:var(--ct-dim);font-size:13px}
.o-access{border:1px solid var(--ct-rule);border-radius:6px;padding:8px 12px 10px;margin:0;display:grid;gap:4px}
.o-access legend{font-weight:600;padding:0 4px}
.portal .o-access .o-choice,.portal .o-access .o-picks label{display:flex;flex-direction:row;align-items:center;margin:0}
.portal .o-access input{width:auto;margin:0;min-height:0}
.o-choice{display:flex;gap:8px;align-items:center;font-weight:500}
.o-picks{display:none;flex-wrap:wrap;gap:4px 14px;padding:2px 0 6px 24px;font-size:13px}
.o-picks label{display:flex;gap:6px;align-items:center;font-weight:400}
.o-pick-loc{flex-basis:100%;font-size:12px;color:var(--ct-faint);margin-top:2px}
.o-choice:has(input:checked)+.o-picks{display:flex}
.o-edit{position:relative}
.o-edit>summary{list-style:none;cursor:pointer;font-size:12px}
.o-edit>summary::-webkit-details-marker{display:none}
.o-edit[open]>form{position:absolute;right:0;top:22px;z-index:5;width:300px;background:var(--ct-surface);
  border:1px solid var(--ct-rule);border-radius:var(--ct-r);box-shadow:0 6px 20px rgba(10,16,36,.12);padding:12px;
  display:grid;gap:10px}
@media (max-width:900px){.o-acts{flex-wrap:wrap}.o-edit[open]{flex-basis:100%;order:9}.o-edit[open]>form{position:static;width:auto;margin-top:6px}}
/* ---- staff tree: the flag of a cluster whose customer waits on a new device ---------------------------------------- */
.portal .t-cl-row .t-name>a:first-child{text-decoration:none}
.portal .t-flag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;border:1px solid var(--ct-orange);
  color:var(--ct-orange);font-size:11px;font-weight:600;text-decoration:none;vertical-align:1px;white-space:nowrap}
.portal .t-flag:hover{background:#FFF3EA;color:var(--ct-orange)}

/* ---- Devices (staff) ---------------------------------------------------------------------------------------------- */
.dv-list{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r)}
.dv-fam-list{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);overflow-x:auto}
.dv-grid{display:grid;grid-template-columns:minmax(240px,1.6fr) 130px 250px 80px 104px 170px 260px;
  gap:0 12px;align-items:center;padding:0 12px;min-width:1160px;box-sizing:border-box}
.dv-grid.list-head{min-height:34px;font-size:13px;font-weight:600;color:var(--ct-ink);border-bottom:1px solid var(--ct-rule)}
.dv-grid .num{text-align:right}
.dv-group{display:flex;align-items:center;gap:12px;padding:0 12px;min-height:34px;background:#EAF6FA;
  border-top:1px solid #CFE6EE;border-left:4px solid #9FD3E3;font-weight:600;min-width:1160px;box-sizing:border-box}
.dv-group .small{font-weight:400;color:var(--ct-dim)}
.dv-row{min-height:44px;padding-top:4px;padding-bottom:4px;border-top:1px solid var(--ct-rule-soft);color:var(--ct-dim)}
.dv-row:hover{background:var(--ct-sunk)}
.dv-name{display:flex;flex-direction:column;min-width:0;padding-left:16px}
.dv-name strong{color:var(--ct-ink);font-weight:600}
.dv-name small{font-size:12px;color:var(--ct-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-change{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.portal .dv-change select{width:auto;font-size:13px;padding:4px 6px;min-height:32px}
.dv-js .dv-set{display:none}
.portal .dv-note{font:inherit;padding:8px 10px;border:1px solid var(--ct-line);border-radius:6px;width:100%;box-sizing:border-box;resize:vertical}
@media (max-width:720px){
  .dv-fam-list{background:transparent;border:0;overflow:visible;display:flex;flex-direction:column;gap:8px}
  .dv-grid.list-head{display:none}
  .dv-group{min-width:0;border:0;background:transparent;padding:8px 0 0}
  .dv-grid{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:10px 12px}
  .dv-row{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r)}
  .dv-name{grid-column:1/-1;padding-left:0}
  .dv-name small{white-space:normal}
  .dv-row>:nth-child(4),.dv-row>:nth-child(5){display:none}
  .dv-change{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}
}

/* ---- Search -------------------------------------------------------------------------------------------------------- */
.sr-box{display:flex;gap:8px;max-width:40rem}
.portal .sr-box input{flex:1;font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--ct-line);border-radius:6px;
  background:var(--ct-surface);color:var(--ct-ink);min-width:0}
.portal .sr-box input:focus{outline:2px solid var(--ct-primary);outline-offset:1px}
.sr-group{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);overflow:hidden}
.sr-head{display:flex;align-items:baseline;gap:10px;padding:8px 12px;background:var(--ct-sunk);border-bottom:1px solid var(--ct-rule)}
.sr-head h2{font-size:15px}
.sr-hit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:2px 16px;align-items:baseline;padding:8px 12px;
  border-top:1px solid var(--ct-rule-soft)}
.sr-hit:first-of-type{border-top:0}
.sr-hit:hover{background:var(--ct-sunk)}
.portal .sr-hit>a{font-weight:600;text-decoration:none;color:var(--ct-ink)}
.portal .sr-hit>a:hover{text-decoration:underline;color:var(--ct-link)}
.sr-where{font-size:12px;color:var(--ct-faint);text-align:right;white-space:nowrap}
.sr-detail{grid-column:1/-1;font-size:12px;color:var(--ct-dim)}
.sr-detail mark,.sr-hit mark{background:#FFF0B3;color:inherit;padding:0 1px;border-radius:2px}
.ct-phone-only{display:none}
@media (max-width:720px){
  .portal .ct-menu a.ct-phone-only{display:inline-block}
  .sr-hit{grid-template-columns:minmax(0,1fr)}
  .sr-where{text-align:left;white-space:normal}
}
.sr-where .sev,.sr-where .tagline{margin-right:6px}
/* Passkeys (accounts/passkeys.py) */
a.ct-user{color:var(--ct-bar-dim);text-decoration:none}
a.ct-user:hover{color:#FFFFFF;text-decoration:underline}
.o-grid.pk-grid{grid-template-columns:minmax(160px,1fr) 110px 150px minmax(150px,auto)}
.pk-signin{margin-top:4px}
.pk-offer{margin:8px 0 12px}
@media (max-width:900px){.o-grid.pk-grid{grid-template-columns:minmax(0,1fr) auto}}
/* Staff looking at one customer's portal (accounts/access.py StaffReader) */
.ct-look{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:8px 24px;
  background:#FFF4E5;border-bottom:2px solid #F3C99B;color:var(--ct-ink);font-size:14px}
.ct-look a{font-weight:600;color:var(--ct-orange)}
.portal .t-open{font-size:13px;font-weight:600;color:#FFFFFF;text-decoration:underline}

/* ---- Multi-Site clusters (docs/v3/multi-site.md, clusters/sites.py) ---------------------------------------------- */
/* The label every cluster carries. Multi-Site in the purple of the mock-up, Single-Site in the brand's light blue. */
.site-label{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:0 7px;border-radius:4px;
  border:1px solid #A9D3DF;background:#E3F1F5;color:#075268;white-space:nowrap;vertical-align:1px}
.site-label.multi{border-color:#C9B8EC;background:#EDE7F8;color:#4B2A8F}
.cl-name-line{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.portal .cl-row .loc a{text-decoration:none;color:var(--ct-dim)}
.portal .cl-row .loc a:hover{text-decoration:underline}
.crumbs-plus{color:var(--ct-faint);font-weight:400}
.crumbs-plain{padding:2px 6px}
.t-type{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.t-also{display:block;font-size:12px;color:var(--ct-faint);font-weight:400;padding-top:1px}
/* The one-time card: which location is each site. */
.sites-card{border-left:4px solid #6A3FB8;border-color:#C9B8EC #C9B8EC #C9B8EC #6A3FB8}
.sites-card-head{gap:2px}
.sites-grid{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,max-content) minmax(220px,280px);
  justify-content:start;align-items:center;gap:10px 24px}
.sites-name{font-weight:600}
.sites-pick{display:block}
.portal .sites-pick select{min-height:44px}
.sites-save{gap:10px 16px}
/* The Locations block of one cluster, on the location page. */
.loc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 200px;align-items:center;
  gap:4px 12px;padding-left:12px;padding-right:12px}
.loc-grid>:last-child{justify-self:end;text-align:right}
.loc-table .c-name{width:18%}.loc-table .c-site{width:30%}.loc-table .c-type{width:18%}.loc-table .c-storage{width:16%}
.loc-table .c-act{width:18%}
.loc-acts{gap:6px}
@media (max-width:720px){
  .sites-grid{grid-template-columns:minmax(0,1fr)}
  .sites-grid .sites-nodes{margin-top:-8px}
  .sites-grid .sites-pick{margin-bottom:6px}
  .loc-grid{grid-template-columns:minmax(0,1fr)}
  /* On the phone a location's clusters show name, label and actions; type and storage are on the cluster page. */
  .loc-table .lt-wide{display:none}
  .loc-grid>:last-child{justify-self:start;text-align:left}
  .loc-list .loc-grid{padding:10px 12px}
}
/* The Equipment tab (clusters/equipment.py): a panel per location in the location's own colour. The colours stay
   clear of the red, orange, blue and green that mean risk and state; white on each is at least 5.9:1. */
.loc-c0{--loc:#6A3FB8;--loc-soft:#F3EEFB} .loc-c1{--loc:#B0307A;--loc-soft:#FBEAF3}
.loc-c2{--loc:#7D5F00;--loc-soft:#F8F1DC} .loc-c3{--loc:#8A2D9E;--loc-soft:#F6EAF8}
.eq-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.eq-panel{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r)}
.eq-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:9px 14px;background:var(--loc);
  color:#FFFFFF;border-radius:7px 7px 0 0;list-style:none;cursor:pointer}
.eq-panel:not([open])>.eq-head{border-radius:7px}
.eq-head::-webkit-details-marker{display:none}
.portal .eq-head .eq-loc{color:#FFFFFF;font-size:16px;font-weight:600;text-decoration:none}
.portal .eq-head a.eq-loc:hover{text-decoration:underline}
.eq-main{font-size:12px;font-weight:600;background:#FFFFFF;color:var(--loc);border-radius:4px;padding:0 7px;white-space:nowrap}
.eq-counts{margin-left:auto;font-size:13px}
.eq-site{font-size:13px;color:var(--ct-dim);background:var(--loc-soft);padding:6px 14px;border-bottom:1px solid var(--ct-rule)}
.eq-group{display:flex;justify-content:space-between;gap:10px;padding:7px 14px 5px;font-size:12px;font-weight:600;
  color:var(--loc);background:var(--ct-ground);border-bottom:1px solid var(--ct-rule-soft)}
.eq-group .mono{font-weight:500;color:var(--ct-faint)}
.eq-row{display:grid;grid-template-columns:10px minmax(0,1fr) minmax(0,1.3fr) 64px;align-items:center;gap:0 10px;
  padding:4px 14px;min-height:36px;box-sizing:border-box;border-bottom:1px solid var(--ct-rule-soft)}
.eq-row.eq-can{grid-template-columns:10px minmax(0,1fr) minmax(0,1.3fr) 64px 40px}
.eq-name{font-size:13px;font-weight:500;color:var(--ct-ink)}
.eq-model{font-size:13px;color:var(--ct-dim)}
.eq-hand{font-size:12px;color:var(--ct-faint);white-space:nowrap}
.eq-open{font-size:13px;text-align:right;white-space:nowrap}
.portal .eq-open a{text-decoration:none}
.eq-missing{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 10px;padding:6px 14px;
  min-height:36px;box-sizing:border-box;font-size:13px;color:var(--ct-faint);border-bottom:1px solid var(--ct-rule-soft)}
.portal .eq-missing a{text-decoration:none;white-space:nowrap}
.eq-panel>:last-child{border-bottom:0}
/* Move: a quiet word at the end of the row; the choice opens under it. */
.eq-move{position:relative;justify-self:end}
.eq-move>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--ct-faint);text-decoration:underline}
.eq-move>summary::-webkit-details-marker{display:none}
.eq-move>summary:hover{color:var(--ct-link)}
.eq-move[open]>.eq-pop{position:absolute;right:0;top:22px;z-index:5;width:260px;background:var(--ct-surface);gap:8px;
  border:1px solid var(--ct-rule);border-radius:var(--ct-r);box-shadow:0 6px 20px rgba(10,16,36,.12);padding:12px}
.eq-pop form{display:grid;gap:8px;justify-items:start}
.portal .eq-pick{font-size:13px;width:100%}
.portal .eq-pick select{font-size:14px;padding:5px 8px;min-height:34px}
/* Not placed yet: above the panels, in the colour of the one-time card on the same page. */
.eq-loose{background:#F3EEFB;border-color:#C9B8EC;border-left:4px solid #6A3FB8;padding:10px 14px;gap:8px}
.eq-loose-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px}
.eq-loose-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:var(--ct-surface);
  border:1px solid var(--ct-rule);border-radius:6px;padding:8px 12px}
.eq-place{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.portal .eq-place .eq-pick{display:flex;align-items:center;gap:8px;width:auto;font-weight:400}
.portal .eq-place select{width:auto;min-width:12em}
.eq-between{background:var(--ct-surface);border:1px solid var(--ct-rule);border-radius:var(--ct-r);overflow:hidden}
.ct-main .eq-between-head{padding:8px 14px;background:var(--ct-sunk);border-bottom:1px solid var(--ct-rule);font-size:14px}
.eq-brow{display:flex;align-items:center;gap:10px;padding:8px 14px;color:var(--ct-dim)}
.eq-brow strong{font-weight:600;color:var(--ct-ink)}
.eq-filter{gap:8px}
@media (min-width:721px){
  /* Side by side, the panels stay open: only the location's name in the header is a link. */
  .eq-head{pointer-events:none;cursor:default}
  .eq-head a{pointer-events:auto}
}
@media (max-width:720px){
  .eq-panels{grid-template-columns:minmax(0,1fr)}
  .eq-head::before{content:"\25BE";width:12px}
  .eq-panel:not([open])>.eq-head::before{content:"\25B8"}
  .eq-counts{margin-left:0;flex-basis:100%;padding-left:24px}
  /* A row on the phone: dot, name, open findings and Move on one line, the model under the name. */
  .eq-row,.eq-row.eq-can{grid-template-columns:10px minmax(0,1fr) auto;gap:2px 10px;padding:6px 14px}
  .eq-row.eq-can{grid-template-columns:10px minmax(0,1fr) auto auto}
  .eq-row>.eq-model{grid-row:2;grid-column:2/-1}
  .eq-row>.eq-model:empty{display:none}
  .eq-place{margin-left:0;width:100%}
  .portal .eq-place .eq-pick{flex:1 1 100%;flex-wrap:wrap}
  .portal .eq-place select{flex:1 1 auto;min-height:44px}
  .eq-move[open]>.eq-pop{width:240px}
  /* The location filter on the cluster's Risks tab scrolls sideways, as the filters on Risks do. */
  .eq-places .switch{max-width:100%;min-width:0}
  .eq-places .seg{overflow-x:auto;max-width:100%}
}
/* The location page (clusters/location_page.py): the square in the location's colour, the Clusters tab on the grid of
   the start page with the other locations and the actions, the Equipment tab per cluster, and the Settings form. */
.loc-square{width:14px;height:14px;border-radius:3px;background:var(--loc);flex:none}
.cl-grid.lc-grid{grid-template-columns:28px minmax(120px,1fr) minmax(170px,1.5fr) 96px minmax(110px,1fr) 56px 56px
  64px 104px;gap:0 12px;min-width:920px}
.cl-grid.lc-grid.lc-acts{grid-template-columns:28px minmax(120px,1fr) minmax(170px,1.5fr) 96px minmax(110px,1fr) 56px
  56px 64px 104px 340px;min-width:1180px}
.lc-site{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.lc-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:4px 0}
.portal .lc-act .ct-move select{min-width:0;width:auto;font-size:14px;padding:5px 8px;min-height:32px}
.lc-group{overflow:hidden}
.lc-group+.lc-group{margin-top:10px}
.lc-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:8px 14px;background:var(--loc-soft);
  border-left:4px solid var(--loc);border-bottom:1px solid var(--ct-rule);list-style:none;cursor:pointer}
.lc-group-head::-webkit-details-marker{display:none}
.lc-group-head::before{content:"\25BE";color:var(--loc);width:10px}
.lc-group:not([open])>.lc-group-head{border-bottom:0}
.lc-group:not([open])>.lc-group-head::before{content:"\25B8"}
.portal .lc-group-head>a{font-size:15px;font-weight:600;text-decoration:none}
.lc-note{font-size:13px;color:var(--ct-dim)}
.portal .lc-note a{text-decoration:none}
.eq-row.lc-row{grid-template-columns:10px minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.4fr) minmax(0,.5fr) 72px;
  padding-left:28px}
.lc-kind,.lc-rack{font-size:13px;color:var(--ct-dim)}
.lc-sub{display:none}
.lc-settings{max-width:960px;box-sizing:border-box}
.lc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 24px;align-items:start}
.lc-field{display:grid;gap:6px;min-width:0}
.lc-save{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}
.lc-read dd{white-space:pre-line}
.lc-remove{max-width:960px;box-sizing:border-box}
@media (max-width:720px){
  .cl-grid.lc-grid,.cl-grid.lc-grid.lc-acts{min-width:0;grid-template-columns:minmax(0,1fr) auto}
  .cl-row>.lc-act{grid-column:1/-1}
  /* Three tabs fit side by side on the phone. */
  .portal .lc-tabs a{padding:8px 9px}
  .eq-row.lc-row{grid-template-columns:10px minmax(0,1fr) auto;padding-left:14px}
  .eq-row.lc-row>.lc-kind,.eq-row.lc-row>.eq-model,.eq-row.lc-row>.lc-rack{display:none}
  .lc-sub{display:block;grid-row:2;grid-column:2/-1;font-size:13px;color:var(--ct-dim)}
}