/* 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. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px}
.portal .crumbs a{text-decoration:none}
.crumbs>*+*::before{content:"›";color:var(--ct-faint);margin-right:8px}
.crumbs [aria-current="page"]{color:var(--ct-ink)}

/* ---- 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}

/* ---- 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 -------------------------------------------------------------------------------------------- */
.path{font-size:12px;color:var(--ct-faint)}
.portal .path a{text-decoration:none}
.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}
  .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) and removing one. */
.s-grid{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(120px,1fr) 110px 80px 110px 90px 110px;
  align-items:center;gap:0 10px;padding:0 12px;min-width:860px;box-sizing:border-box}
.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}
}
.s-loc-rm{display:inline-flex;gap:6px;align-items:center;margin-left:12px}
.portal .linkish{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ct-link);cursor:pointer;text-decoration:underline}