/* AQcredix — the hospital's own quality dashboard.
   Layout only; every colour is a token, and status tone comes from --ok / --warn / --nc so
   "on target" is never the same blue as "this is a link". */

.qd-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}

/* ---- the setup invitation ---- */
.qd-intro{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-elevated);
  padding:30px 32px;max-width:760px;}
.qd-intro h2{font-size:clamp(21px,2.4vw,27px);margin:0 0 10px;}
.qd-intro p{color:var(--fg-muted);line-height:1.65;margin:0 0 16px;}
.qd-steps{margin:0 0 18px;padding-left:20px;display:grid;gap:9px;}
.qd-steps li{color:var(--fg-muted);line-height:1.6;}
.qd-steps b{color:var(--fg);}

/* ---- summary cards and panels ---- */
.qd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;
  margin-bottom:18px;}
.qd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media (max-width:900px){ .qd-grid2{grid-template-columns:1fr;} }

/* ---- the department tiles ---- */
.qd-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;
  margin-top:18px;}
.qd-dept{display:flex;flex-direction:column;gap:9px;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-elevated);
  padding:16px 18px;font:inherit;color:inherit;transition:border-color 180ms ease,transform 180ms ease;}
.qd-dept:hover{border-color:var(--accent-bright);transform:translateY(-2px);}
.qd-dept-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.qd-dept-top b{font-size:15px;}
.qd-dept-head{font-size:12.5px;color:var(--fg-faint);}
.qd-dept-bar{display:block;height:7px;border-radius:99px;background:var(--border);overflow:hidden;}
.qd-dept-bar i{display:block;height:100%;border-radius:99px;}
.qd-dept-foot{font-size:12px;color:var(--fg-muted);font-variant-numeric:tabular-nums;}

/* Status reads as a word as well as a colour: a band nobody can distinguish by hue is not a
   status, and these are compliance figures. */
.qd-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;
  border:1px solid var(--border);color:var(--fg-muted);}
.qd-badge.ok{color:var(--ok);border-color:var(--ok);}
.qd-badge.warn{color:var(--accent-text);border-color:var(--accent-bright);}
.qd-badge.nc{color:var(--nc);border-color:var(--nc);}

/* ---- back bar on a department ---- */
.qd-back{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:18px;}
.qd-back-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ---- the entry rows ---- */
.qd-mrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;position:relative;
  border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px 12px 46px;
  margin-bottom:8px;background:var(--bg);}
.qd-mrow-n{position:absolute;left:14px;top:16px;font-size:12px;font-weight:700;
  color:var(--fg-faint);font-variant-numeric:tabular-nums;}
.qd-mrow .ws-f{margin:0;flex:1 1 200px;}
.qd-mrow .ws-f.qd-narrow{flex:0 1 116px;}
.qd-target{flex:0 0 auto;font-size:12px;color:var(--fg-muted);display:flex;flex-direction:column;
  gap:2px;padding-bottom:9px;font-variant-numeric:tabular-nums;}
.qd-target span{font-size:11px;color:var(--fg-faint);}
.qd-tag{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--fg-faint);margin-left:6px;}

/* The three every hospital tracks, offered rather than explained. */
.qd-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px;}
.qd-presets span{font-size:12.5px;color:var(--fg-faint);}

@media (max-width:640px){
  .qd-mrow{padding-left:14px;padding-top:26px;}
  .qd-mrow .ws-f.qd-narrow{flex:1 1 120px;}
}

/* "What happens after I press Save." The first step asks two questions and the second asks
   fifteen, so without this the setup reads as though a department is just a name and an HOD. */
.qd-next{border-left:3px solid var(--accent-bright);background:var(--bg);padding:11px 14px;
  border-radius:var(--r-sm);font-size:13px;line-height:1.6;color:var(--fg-muted);margin:2px 0 4px;}
.qd-next b{color:var(--fg);}

/* ---- Findings, evidence and training ----------------------------------------
   The second half of the overview. It gets a heading rather than just more panels
   because it answers a different question from everything above it: attainment is
   where the hospital stands, findings are why. */
.qd-section{font-size:clamp(18px,2vw,23px);margin:34px 0 4px;}
.qd-section-actions{justify-content:flex-start;margin:0 0 16px;}

/* Nothing recorded yet — say what the three charts will be built from, so the empty
   state is an instruction and not an apology. */
.qd-findings-cta p{max-width:66ch;}

/* An "Edit" that lives inside a table cell. A full button would out-weigh the row it
   sits in, so it reads as a link and behaves as a button. */
.qd-linkbtn{font:inherit;font-size:12.5px;font-weight:600;color:var(--accent-text);
  background:none;border:0;padding:2px 0;cursor:pointer;
  border-bottom:1px solid transparent;}
.qd-linkbtn:hover{border-bottom-color:var(--accent-text);}

/* Destructive, and coloured as such only on hover — a red button sitting permanently in
   a form invites the eye to the one action nobody wants taken by accident. */
.qd-danger{color:var(--nc);}
.qd-danger:hover{background:var(--nc-tint);border-color:var(--nc);}

/* Two classes this page has been emitting with no rule behind them — .aqc-note since the
   first version, .ws-f-actions from the findings work. Both rendered as bare defaults: the
   note as full-size body text competing with the heading above it, the button row as
   buttons sitting on the text baseline. */
.aqc-note{font-size:12.5px;line-height:1.6;color:var(--fg-muted);margin:0 0 12px;max-width:70ch;}
.ws-f-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  margin-top:14px;}

/* ---- THE BOARD ---------------------------------------------------------------
   Eleven tiles of different weights on one twelve-column grid. Size carries
   meaning: the widest tile is the one that needs the most room to be read, not
   the one that matters most — importance is carried by position instead, and
   position is the hospital's to change. */
.qd-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;
  padding:10px 13px;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-md);}
.qd-bar-t{font-family:var(--font-display);font-weight:700;font-size:15px;}
.qd-bar-sp{flex:1;}
.qd-bar-b{font-size:12.5px;padding:7px 13px;}
.qd-bar-b.on{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--on-accent);}

/* The active cross-filter. Always shown, always dismissible — a filter you cannot
   see is a dashboard lying to you quietly. */
.qd-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  background:var(--brand-tint);color:var(--accent-text);border:1px solid var(--accent-solid);
  border-radius:999px;padding:4px 5px 4px 12px;}
.qd-chip button{border:0;background:var(--accent-solid);color:var(--on-accent);cursor:pointer;
  width:19px;height:19px;border-radius:50%;font:inherit;font-size:12px;line-height:1;padding:0;}

.qd-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:13px;align-items:start;}
.qd-tile{grid-column:span 4;background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:13px 15px;min-width:0;display:flex;flex-direction:column;}
.qd-tile.s3{grid-column:span 3;} .qd-tile.s4{grid-column:span 4;}
.qd-tile.s5{grid-column:span 5;} .qd-tile.s6{grid-column:span 6;}
.qd-tile.s8{grid-column:span 8;} .qd-tile.s12{grid-column:span 12;}
.qd-tile.is-hidden{display:none;}
.qd-tile-h{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.qd-tile-n{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qd-tile-note{font-size:11px;color:var(--fg-faint);margin-left:auto;white-space:nowrap;}
.qd-tile-b{flex:1;min-width:0;}

/* The headline figure, with its comparison underneath. */
.qd-big{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.02em;
  font-size:clamp(30px,3.6vw,46px);font-variant-numeric:tabular-nums;}
.qd-big.sm{font-size:clamp(24px,2.6vw,32px);}
.qd-big small{font-size:.36em;color:var(--fg-muted);margin-left:3px;}
.qd-vs{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:11.5px;
  color:var(--fg-faint);}
.qd-vs b{font-family:var(--font-mono);font-weight:700;font-variant-numeric:tabular-nums;}
.qd-vs b.up{color:var(--ok);} .qd-vs b.down{color:var(--nc);} .qd-vs b.flat{color:var(--fg-muted);}
.qd-vs-row{font-size:11.5px;color:var(--fg-faint);margin-top:6px;}
.qd-mini{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px;}
.qd-mini .k{display:block;font-size:10px;color:var(--fg-faint);text-transform:uppercase;
  letter-spacing:.04em;}
.qd-mini .v{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;
  font-variant-numeric:tabular-nums;}

/* ---- edit mode ---- */
.qd-grid.is-editing .qd-tile{border-style:dashed;border-color:var(--accent-solid);cursor:grab;}
.qd-grid.is-editing .qd-tile.is-hidden{display:flex;opacity:.4;}
.qd-tile.is-drag{opacity:.4;}
.qd-tile.is-over{border-style:solid;box-shadow:0 0 0 3px var(--brand-tint);}
.qd-tools{display:flex;gap:5px;margin-left:auto;}
.qd-tools select,.qd-tools button{font:inherit;font-size:10.5px;border:1px solid var(--border);
  background:var(--bg);color:var(--fg-muted);border-radius:6px;padding:2px 5px;cursor:pointer;}
.qd-tray{margin-top:14px;padding:12px 14px;border:1px dashed var(--border);border-radius:var(--r-md);}
.qd-tray h4{margin:0 0 8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-faint);}
.qd-tray .qd-bar-b{margin:0 6px 6px 0;}
.qd-tray-none{font-size:12px;color:var(--fg-faint);}

/* Anything the reader can act on says so. */
.qd-tile[data-tile="chapters"] .aqc-slice,
.qd-tile[data-tile="chapters"] .aqc-pie-key li,
.qd-tile[data-tile="attainment"] .aqc-bar{cursor:pointer;}
.qd-tile[data-tile="chapters"] .aqc-slice:hover,
.qd-tile[data-tile="attainment"] .aqc-bar:hover{opacity:.82;}

@media (max-width:1150px){
  .qd-tile.s3,.qd-tile.s4,.qd-tile.s5{grid-column:span 6;}
  .qd-tile.s6,.qd-tile.s8{grid-column:span 12;}
}
@media (max-width:700px){
  .qd-tile,.qd-tile.s3,.qd-tile.s4,.qd-tile.s5,
  .qd-tile.s6,.qd-tile.s8{grid-column:span 12;}
}

/* =============================== THE FIVE SECTIONS ===============================
   One board became five, and the tabs are the only navigation on the page. They are
   sized and spaced as a real control rather than a row of links: the section you are
   in has to be readable from across a desk, because everything below it changes
   meaning depending on which one is lit. */
.qd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;padding:5px;
  background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;}
.qd-tab{font:inherit;font-size:13px;padding:8px 16px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--fg-muted);
  transition:background .14s ease,color .14s ease;}
.qd-tab b{font-weight:600;}
.qd-tab:hover{background:var(--surface-1);color:var(--fg);}
.qd-tab.on{background:var(--accent-solid);color:var(--on-accent);}
.qd-tab.on:hover{background:var(--accent-solid);color:var(--on-accent);}
.qd-tab:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px;}

.qd-bar-sub{font-size:12px;color:var(--fg-faint);}
@media (max-width:900px){.qd-bar-sub{display:none;}}

/* Said once, at the top, when a section cannot draw anything yet. */
.qd-nudge{margin-bottom:14px;padding:11px 14px;font-size:13px;line-height:1.6;
  background:var(--brand-tint);border:1px solid var(--accent-solid);
  border-radius:var(--r-md);color:var(--fg);}
.qd-intro-warn{border-color:var(--accent-solid);}
.qd-foot{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-faint);}
.qd-unset{font-size:12px;color:var(--fg-faint);font-style:italic;}

/* THE FIVE BOARDS ON THE EMPTY STATE, AND THEY ARE CHOICES NOW.
   These used to be five description panels with one button underneath them, which meant
   they described the thing you could not pick and the button picked for you. Each is a
   real button, so it has to look like one: it takes a pointer, it lifts on hover, and it
   shows a focus ring, because a card that acts on click and gives nothing back reads as
   decoration and gets ignored. */
.qd-secs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin:16px 0;}
.qd-sec{display:flex;flex-direction:column;gap:3px;width:100%;
  padding:12px 13px 11px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg-elevated);text-align:left;font:inherit;color:inherit;
  cursor:pointer;transition:border-color 140ms ease,transform 140ms ease,box-shadow 140ms ease;}
.qd-sec:hover{border-color:var(--accent-solid);transform:translateY(-1px);
  box-shadow:var(--shadow-1);}
.qd-sec:focus-visible{outline:2px solid var(--accent-solid);outline-offset:2px;}
.qd-sec b{display:block;font-family:var(--font-display);font-size:14px;margin-bottom:3px;}
.qd-sec span{font-size:12px;line-height:1.5;color:var(--fg-muted);}
/* The first thing that board will ask, so the choice is between actions rather than
   between topics. Pushed to the bottom so the cards line their prompts up however
   different the descriptions above them run. */
.qd-sec-go{margin-top:auto;padding-top:8px;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.04em;color:var(--accent-text);}
@media (prefers-reduced-motion: reduce){
  .qd-sec{transition:none;}
  .qd-sec:hover{transform:none;}
}

/* ---- every KPI, with its own line ----
   A card per KPI rather than a row per KPI: the sparkline needs its own width, and a
   table cell that has to hold a chart makes every other column narrow for nothing. */
.qd-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px;}
.qd-kpi{text-align:left;padding:11px 13px;border:1px solid var(--border);
  border-radius:var(--r-md);background:var(--bg);cursor:pointer;min-width:0;}
.qd-kpi:hover{border-color:var(--accent-solid);}
.qd-kpi-h{display:flex;align-items:baseline;gap:7px;}
.qd-kpi-h b{font-size:13.5px;line-height:1.35;min-width:0;overflow-wrap:anywhere;}
.qd-kpi-d{font-size:11.5px;color:var(--fg-faint);margin:2px 0 9px;}
.qd-kpi-n{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.qd-kpi-n i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg-faint);}
.qd-kpi-n b{font-family:var(--font-mono);font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;}
.qd-kpi-n b.ok{color:var(--ok);} .qd-kpi-n b.nc{color:var(--nc);}
.qd-kpi-n b.warn{color:var(--accent-text);}
.qd-kpi-none{font-size:11.5px;color:var(--fg-faint);padding:6px 0 2px;}

/* The code colour is the datum, so it is drawn rather than named twice. */
.qd-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;
  vertical-align:baseline;}
/* The distance between the register's figure and the champion's own. */
.qd-gap{font-family:var(--font-mono);font-size:11px;font-weight:700;}
.qd-gap.up{color:var(--ok);} .qd-gap.down{color:var(--nc);}
.qd-gap.flat{color:var(--fg-muted);}

.qd-tile.s9{grid-column:span 9;}
@media (max-width:1150px){.qd-tile.s9{grid-column:span 12;}}

/* ---- the code alert colours ----
   These are the only literal hues on the page, and they earn it: the colour IS the datum.
   A Code Red bar drawn in the platform blue would be unreadable to the very people who use
   these names every day. They are tokens rather than hex in the script because two of them
   invert: Code Black is invisible on the dark theme and Code White on the light one, so
   each theme gets a value that survives its own ground.

   Yellow is a deep gold rather than an amber. It has to stay legible on the light theme,
   and an amber pill on a quality dashboard reads as a warning about nothing. */
:root{
  --code-blue:#2563EB; --code-red:#DC2626;   --code-pink:#DB2777;
  --code-purple:#7C3AED; --code-yellow:#B7791F; --code-orange:#EA580C;
  --code-brown:#92400E; --code-grey:#6B7280;  --code-black:#111827;
  --code-white:#64748B;
}
[data-theme="dark"]{
  --code-blue:#60A5FA; --code-red:#F87171;   --code-pink:#F472B6;
  --code-purple:#A78BFA; --code-yellow:#D9A441; --code-orange:#FB923C;
  --code-brown:#C08457; --code-grey:#9CA3AF;  --code-black:#CBD5E1;
  --code-white:#F1F5F9;
}

/* Five pills need two comfortable rows on a phone rather than one squeezed line. */
@media (max-width:600px){
  .qd-tabs{gap:5px;padding:4px;}
  .qd-tab{padding:7px 11px;font-size:12.5px;}
}