/* ==========================================================================
   Qualimetrix Continuum — the layer the Continuum design adds on top of the
   design system.
   --------------------------------------------------------------------------
   site.css is the design-system component layer: every .qmx-* class is a
   translation of a named component and holds for both themes. This file adds
   only what the Continuum design introduces on top of it:

     1. the dark theme, which the Continuum site opens in;
     2. the interactive compositions the earlier site had no equivalent for —
        the control plane, the module tabs, the migration and pipeline step
        selectors, the framework filter and its matrix, the spec tables,
        the partner cards and the theme/language dock.

   Everything here is .qx-* so the two layers never collide, and every value
   is a token reference. No raw hex outside the theme block, where the dark
   grounds are declared.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Dark theme
   --------------------------------------------------------------------------
   The semantic aliases in tokens/colors.css are defined as var() references
   (--border-card: var(--qmx-border-card), and so on), so redefining the raw
   stops here carries the whole component layer across without touching it.
   The four grounds are declared literally because they exist only in this
   theme: page, card, subtle and soft.
   -------------------------------------------------------------------------- */
[data-theme="dark"]{
  --surface-page:#100904;
  --surface-card:#19100A;
  --surface-subtle:linear-gradient(180deg,#150C06,#1B1108);
  --qmx-soft:#20140C;
  --qmx-paper:#100904;
  --qmx-ink:#F7F0EA;
  --qmx-muted:rgba(255,236,222,.62);
  --text-body:#F7F0EA;
  --text-muted:rgba(255,236,222,.62);
  --text-accent:var(--qmx-orange-bright);
  --link-color:var(--qmx-orange-link-dark);
  --qmx-border-card:rgba(255,230,209,.13);
  --qmx-border-panel:rgba(255,230,209,.15);
  --qmx-border-row:rgba(255,230,209,.09);
  --qmx-border-code:rgba(255,230,209,.13);
  --qmx-border-top-subtle:rgba(255,230,209,.09);
  --qmx-border-bottom-subtle:rgba(255,230,209,.09);
  --qmx-divider-strong:rgba(255,230,209,.22);
  --qmx-line:rgba(255,230,209,.13);
  --qmx-tint-warm:rgba(254,80,0,.11);
  --qmx-tint-warm-border:rgba(254,80,0,.34);
  --qmx-tint-warm-text:var(--qmx-orange-social);
  --qmx-tint-note:rgba(255,230,209,.04);
  --qmx-tint-code:rgba(255,230,209,.05);
  --qmx-ink-code:#F0E4DA;
  --qmx-ink-tablehead:rgba(255,230,209,.58);
  --qmx-state-current-bg:rgba(254,80,0,.16);
  --qmx-state-current-fg:var(--qmx-orange-social);
  --qmx-state-partner-bg:rgba(255,230,209,.07);
  --qmx-state-partner-fg:rgba(255,236,222,.62);
  --qmx-grad-subtle:linear-gradient(180deg,#150C06,#1B1108);
}

/* tokens/base.css hardcodes the light link-hover stop; on the dark ground it
   has to come from the theme instead. */
[data-theme="dark"] a:hover{color:var(--qmx-tint-warm-text)}

/* The two panels that are dark in *both* themes keep their light-theme
   hairlines, so they stay legible once the page around them goes dark. */
[data-theme="dark"] .qmx-panel--emphasis{border-color:var(--qmx-orange-edge)}

/* Selector panels and filtered rows are hidden with the `hidden` attribute, and
   several of them are grid or flex containers whose own display would otherwise
   win over the user-agent rule. This is the one place !important is warranted:
   `hidden` has to mean hidden whatever the element is. */
[hidden]{display:none !important}

/* --------------------------------------------------------------------------
   2. Selectable surfaces
   --------------------------------------------------------------------------
   Four selectors in the design share one visual grammar: a bordered card that
   takes the warm tint and the orange edge when it is the current choice. They
   differ only in what they hold.
   -------------------------------------------------------------------------- */
.qx-pick{
  display:block;width:100%;text-align:left;
  border:1px solid var(--border-card);
  border-radius:var(--qmx-radius-7);
  padding:var(--qmx-space-18) var(--qmx-space-20);
  background:var(--surface-card);
  color:inherit;font:inherit;cursor:pointer;
  transition:var(--transition-surface);
}
.qx-pick:hover{border-color:var(--qmx-tint-warm-border)}
.qx-pick[data-on="1"]{border-color:var(--accent-primary);background:var(--qmx-tint-warm)}
.qx-pick__head{display:flex;align-items:center;gap:var(--qmx-space-12)}
.qx-pick__icon{color:var(--accent-primary);display:flex}
.qx-pick[data-on="1"] .qx-pick__icon{color:var(--qmx-orange-bright)}
.qx-pick__name{font-size:var(--qmx-text-16);line-height:var(--qmx-leading-snug);font-weight:var(--qmx-weight-semibold)}
.qx-pick p{margin:var(--qmx-space-8) 0 0;font-size:var(--qmx-text-13);color:var(--text-muted)}

/* Numbered step button — migration path and counterpart pipeline */
.qx-step{padding:var(--qmx-space-20);text-align:left}
.qx-step__num{font-size:var(--qmx-text-11);font-weight:var(--qmx-weight-bold);color:var(--accent-primary);letter-spacing:var(--qmx-tracking-label)}
.qx-step[data-on="1"] .qx-step__num{color:var(--qmx-orange-bright)}
.qx-step__label{margin-top:var(--qmx-space-10);font-size:var(--qmx-text-15);font-weight:var(--qmx-weight-semibold)}

/* --------------------------------------------------------------------------
   3. Control plane — the suite as one card
   -------------------------------------------------------------------------- */
.qx-plane{
  margin-top:var(--qmx-space-24);
  border:1px solid var(--border-card);
  border-radius:var(--qmx-radius-7);
  overflow:hidden;background:var(--surface-card);
}
.qx-plane__head{
  padding:var(--qmx-space-13) var(--qmx-space-22);
  border-bottom:1px solid var(--border-row);
  font-size:var(--qmx-text-10);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--qmx-ink-tablehead);
}
.qx-plane__lead{padding:var(--qmx-space-18) var(--qmx-space-22)}
.qx-plane__rest{padding:0 var(--qmx-space-22) var(--qmx-space-18);display:grid;gap:var(--qmx-space-12)}
.qx-plane__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--qmx-space-12)}
.qx-plane__detail{
  border-top:1px solid var(--border-row);
  background:var(--qmx-soft);
  padding:var(--qmx-space-24) var(--qmx-space-22);
}
.qx-plane__detail h3{
  margin:0;font-size:var(--qmx-text-9-5);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--text-accent);
}
.qx-plane__detail p{
  margin:var(--qmx-space-10) 0 0;font-size:var(--qmx-text-13-5);
  line-height:var(--qmx-leading-body);color:var(--text-muted);max-width:80ch;
}

/* --------------------------------------------------------------------------
   4. Stage detail — the panel a step selector writes into
   -------------------------------------------------------------------------- */
.qx-detail{
  margin-top:var(--qmx-space-12);
  border:1px solid var(--qmx-border-panel);
  border-radius:var(--qmx-radius-7);
  background:var(--surface-card);
  padding:var(--pad-panel);
}
.qx-detail__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--qmx-space-32)}
.qx-detail h3{margin:0;font-size:var(--qmx-text-19);line-height:var(--qmx-leading-heading);font-weight:var(--qmx-weight-semibold)}
.qx-detail p{margin:var(--qmx-space-10) 0 0;font-size:var(--qmx-text-13-5);line-height:var(--qmx-leading-body);color:var(--text-muted)}
.qx-detail__aside{border-left:1px solid var(--border-row);padding-left:var(--qmx-space-32)}
.qx-detail__aside p{font-size:var(--qmx-text-13);margin-top:var(--qmx-space-9)}

/* --------------------------------------------------------------------------
   5. Filter chips
   -------------------------------------------------------------------------- */
.qx-chips{display:flex;gap:var(--qmx-space-10);flex-wrap:wrap}
.qx-chips--tight{gap:var(--qmx-space-8)}
.qx-chip{
  font-size:var(--qmx-text-11);font-weight:var(--qmx-weight-bold);
  letter-spacing:var(--qmx-tracking-label);text-transform:uppercase;
  color:var(--text-muted);
  border:1px solid var(--border-card);border-radius:var(--qmx-radius-4);
  padding:9px var(--qmx-space-13);background:var(--surface-card);
  cursor:pointer;transition:var(--transition-surface);
}
.qx-chip:hover{color:var(--text-body)}
.qx-chip[data-chip="1"]{
  color:var(--qmx-state-current-fg);
  background:var(--qmx-state-current-bg);
  border-color:var(--qmx-tint-warm-border);
}

/* --------------------------------------------------------------------------
   6. Module tabs
   -------------------------------------------------------------------------- */
.qx-tabs{display:flex;gap:var(--qmx-space-28);flex-wrap:wrap;border-bottom:1px solid var(--border-card)}
.qx-tab{
  font-size:var(--qmx-text-12-5);font-weight:var(--qmx-weight-semibold);
  color:var(--text-muted);background:none;border:0;
  border-bottom:2px solid transparent;padding:var(--qmx-space-18) 0;
  cursor:pointer;transition:var(--transition-surface);
}
.qx-tab:hover{color:var(--text-body)}
.qx-tab[data-sel="1"]{color:var(--text-body);border-bottom-color:var(--accent-primary)}

.qx-modgrid{margin-top:var(--qmx-space-38);display:grid;grid-template-columns:1.15fr .85fr;gap:var(--qmx-space-48);align-items:start}
.qx-modgrid__aside{display:grid;gap:var(--qmx-space-17)}
.qx-modhead{display:flex;align-items:center;gap:var(--qmx-space-12);flex-wrap:wrap}
.qx-modkind{
  font-size:var(--qmx-text-10-5);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--text-accent);
}
.qx-modgrid h2{margin:var(--qmx-space-13) 0 0;font-size:var(--qmx-text-24);line-height:var(--qmx-leading-heading);letter-spacing:var(--qmx-tracking-h2);font-weight:var(--qmx-weight-semibold)}
.qx-modlede{margin:var(--qmx-space-13) 0 0;font-size:var(--qmx-text-15);line-height:var(--qmx-leading-body);color:var(--text-muted)}

/* Small labelled box — interfaces, evidence produced, contact of record */
.qx-mini{border:1px solid var(--border-card);border-radius:var(--qmx-radius-7);background:var(--surface-card);padding:var(--qmx-space-22)}
.qx-mini--pad{padding:var(--pad-panel)}
.qx-label{
  font-size:var(--qmx-text-9-5);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--qmx-ink-tablehead);
}
.qx-mini p{margin:var(--qmx-space-10) 0 0;font-size:var(--qmx-text-13);line-height:var(--qmx-leading-body);color:var(--text-muted)}
.qx-mini .qmx-tagcloud{margin-top:var(--qmx-space-12)}

/* --------------------------------------------------------------------------
   7. Spec tables — fixed sizes and the performance envelope
   -------------------------------------------------------------------------- */
.qx-spec{border:1px solid var(--border-card);border-radius:var(--qmx-radius-7);background:var(--surface-card);overflow:hidden}
.qx-spec__head{
  padding:var(--qmx-space-13) var(--qmx-space-20);
  border-bottom:1px solid var(--border-row);
  display:flex;align-items:center;justify-content:space-between;gap:var(--qmx-space-12);
  font-size:var(--qmx-text-10);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--qmx-ink-tablehead);
}
.qx-spec__head--fixed{background:var(--qmx-tint-warm)}
.qx-spec__head--soft{background:var(--qmx-tint-note)}
.qx-spec__row{
  display:grid;grid-template-columns:1fr auto;gap:var(--qmx-space-15);
  align-items:baseline;padding:var(--qmx-space-15) var(--qmx-space-20);
  border-bottom:1px solid var(--border-row);
}
.qx-spec__row:last-child{border-bottom:0}
.qx-spec__row span{font-size:var(--qmx-text-13)}
.qx-spec__value{
  font-size:var(--qmx-text-13-5);font-weight:var(--qmx-weight-mid);
  font-family:var(--qmx-font-mono);color:var(--text-body);
}
.qx-spec__value--accent{color:var(--text-accent)}

/* "Illustrative" — the badge that keeps a measured-looking number honest */
.qx-illustrative{
  font-size:var(--qmx-text-9-5);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label);font-weight:var(--qmx-weight-bold);
  color:var(--qmx-tint-warm-text);
  border:1px solid var(--qmx-tint-warm-border);
  border-radius:var(--qmx-radius-4);padding:4px var(--qmx-space-8);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   8. Control mapping matrix
   -------------------------------------------------------------------------- */
.qx-matrix{margin-top:var(--qmx-space-17);border:1px solid var(--border-card);border-radius:var(--qmx-radius-7);background:var(--surface-card);overflow:hidden}
.qx-matrix__head,.qx-matrix__row{display:grid;grid-template-columns:1.7fr 1fr 1.1fr;gap:var(--qmx-space-15)}
.qx-matrix__head{
  padding:var(--qmx-space-13) var(--qmx-space-20);
  background:var(--qmx-tint-warm);
  font-size:var(--qmx-text-10);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label-wide);
  font-weight:var(--qmx-weight-bold);color:var(--qmx-ink-tablehead);
}
/* Rows rule off their top edge, not their bottom. The filter hides rows, so a
   bottom border would leave a line hanging under whichever row happened to be
   last; a top border puts one line between every pair and none after the end. */
.qx-matrix__row{padding:var(--qmx-space-17) var(--qmx-space-20);border-top:1px solid var(--border-row);align-items:baseline}
.qx-matrix__control{font-size:var(--qmx-text-13-5);font-weight:var(--qmx-weight-mid)}
.qx-matrix__module{font-size:var(--qmx-text-13);color:var(--text-muted)}
.qx-matrix__ref{font-size:var(--qmx-text-13);font-family:var(--qmx-font-mono);color:var(--text-accent)}
.qx-matrix__empty{padding:var(--qmx-space-24) var(--qmx-space-20);font-size:var(--qmx-text-13);color:var(--text-muted)}

/* --------------------------------------------------------------------------
   9. Partners and programme
   --------------------------------------------------------------------------
   Partner logos arrive as supplied artwork on their own grounds, so the well
   stays near-black in both themes rather than following the surface.
   -------------------------------------------------------------------------- */
.qx-partnercard{
  border:1px solid var(--border-card);border-radius:var(--qmx-radius-7);
  background:var(--surface-card);padding:var(--pad-panel);
  display:flex;flex-direction:column;
}
.qx-logowell{
  background:#060606;border:1px solid var(--border-row);
  border-radius:var(--qmx-radius-5);height:64px;
  display:flex;align-items:center;padding:0 var(--qmx-space-18);
}
.qx-logowell img{max-height:44px;width:auto;object-fit:contain}
.qx-logowell--qustream img{height:38px}
.qx-partnercard__role{
  display:block;font-size:var(--qmx-text-11);text-transform:uppercase;
  letter-spacing:var(--qmx-tracking-label);color:var(--text-accent);
  margin:var(--qmx-space-22) 0 var(--qmx-space-8);
  font-weight:var(--qmx-weight-bold);
}
.qx-partnercard p{margin:0;font-size:var(--qmx-text-13);line-height:var(--qmx-leading-body);color:var(--text-muted)}
.qx-partnercard__foot{margin-top:auto;padding-top:var(--qmx-space-18)}

.qx-programme{
  margin-top:var(--qmx-space-24);
  border:1px solid var(--qmx-border-panel);border-radius:var(--qmx-radius-7);
  background:var(--surface-card);padding:var(--pad-panel);
  display:grid;grid-template-columns:280px 1fr;gap:var(--qmx-space-36);align-items:start;
}
.qx-programme p{margin:0;font-size:var(--qmx-text-13-5);line-height:var(--qmx-leading-body);color:var(--text-muted)}

/* --------------------------------------------------------------------------
   10. Contact and legal
   -------------------------------------------------------------------------- */
.qx-contact__mail{margin:var(--qmx-space-12) 0 0;font-size:var(--qmx-text-16);font-weight:var(--qmx-weight-mid)}
.qx-contact__where{margin:var(--qmx-space-10) 0 0;font-size:var(--qmx-text-13);line-height:var(--qmx-leading-body);color:var(--text-muted)}
.qx-contact__action{margin-top:var(--qmx-space-18)}

.qx-legal{max-width:80ch}
.qx-legal section{padding:var(--qmx-space-22) 0;border-top:1px solid var(--border-row)}
.qx-legal h2{margin:0;font-size:var(--qmx-text-18);line-height:var(--qmx-leading-snug);letter-spacing:var(--qmx-tracking-h2);font-weight:var(--qmx-weight-semibold)}
.qx-legal p{margin:var(--qmx-space-10) 0 0;font-size:var(--qmx-text-13-5);line-height:var(--qmx-leading-relaxed);color:var(--text-muted)}

/* --------------------------------------------------------------------------
   11. The dock — theme and language
   --------------------------------------------------------------------------
   Both toggles sit on the warm near-black chip ground in either theme, so the
   control reads the same whichever theme it is about to leave.
   -------------------------------------------------------------------------- */
.qx-dock{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;gap:var(--qmx-space-8)}
.qx-dock__group{
  display:flex;border:1px solid rgba(255,230,209,.24);
  border-radius:var(--qmx-radius-4);overflow:hidden;
  background:var(--qmx-nav-mobile);box-shadow:var(--qmx-shadow-float);
}
.qx-dock button{
  font-size:var(--qmx-text-11);font-weight:var(--qmx-weight-bold);
  letter-spacing:var(--qmx-tracking-label);color:var(--qmx-on-dark-3);
  padding:var(--qmx-space-8) var(--qmx-space-12);
  background:none;border:0;cursor:pointer;transition:var(--transition-surface);
}
.qx-dock button:hover{color:var(--qmx-white)}
.qx-dock button[data-chip="1"]{
  color:var(--qmx-state-current-fg);
  background:var(--qmx-state-current-bg);
}

/* --------------------------------------------------------------------------
   12. Small compositions the Continuum pages need
   -------------------------------------------------------------------------- */
.qx-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--qmx-grid-gap-wide)}
.qx-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--qmx-grid-gap)}
.qx-4--tight{gap:var(--qmx-grid-gap-tight)}
.qx-mt24{margin-top:var(--qmx-space-24)}
.qx-mt16{margin-top:var(--qmx-space-17)}
.qx-mt12{margin-top:var(--qmx-space-12)}
.qx-endlink{margin-top:var(--qmx-space-18);display:flex;justify-content:flex-end}
.qx-narrow{max-width:70ch}
.qx-prose{margin-top:var(--qmx-space-13);max-width:78ch;font-size:var(--qmx-text-14);line-height:var(--qmx-leading-body);color:var(--text-muted)}

/* The home hero keeps the design's two-line rule: only the second line takes
   the accent. site.css tints every span in a home h1, which was right when the
   headline had one highlighted line and a plain rest; here both lines are
   spans, so the accent is named explicitly instead. */
.qmx-hero--home h1 span{color:inherit}
.qmx-hero--home h1 .qx-hero-accent{color:var(--accent-primary)}

/* The record straddles the hero edge, so the first section under it clears the
   overhang. Once the record un-straddles at 1120px there is nothing to clear. */
.qx-clears-record{padding-top:var(--qmx-hero-pad-top)}

/* ReleaseRecord with overlap off — the evidence specimen, which sits in the
   flow of its section rather than across a seam.
   Below 1120px site.css un-straddles the overlapping record and gives it the
   inverse ground the hero was providing. The flat variant never straddled and
   is already inside a section, so it keeps neither. */
.qmx-record--flat{height:auto}
.qmx-record--flat .qmx-record__panel{position:static;transform:none;margin:0 auto}
@media(max-width:1120px){
  .qmx-record--flat{background:none;padding:0}
}

/* A boundary note that opens a column rather than closing a section. */
.qmx-boundary.qx-flush{margin-top:0}

/* --------------------------------------------------------------------------
   13. Responsive — the same three breakpoints the system already defines
   -------------------------------------------------------------------------- */
@media(max-width:1120px){
  .qx-clears-record{padding-top:0}
  .qx-4{grid-template-columns:repeat(2,1fr)}
  .qx-2,.qx-plane__pair{grid-template-columns:1fr}
  .qx-modgrid{grid-template-columns:1fr;gap:var(--qmx-space-32)}
  .qx-detail__grid{grid-template-columns:1fr;gap:var(--qmx-space-24)}
  .qx-detail__aside{border-left:0;border-top:1px solid var(--border-row);padding-left:0;padding-top:var(--qmx-space-20)}
  .qx-programme{grid-template-columns:1fr;gap:var(--qmx-space-24)}
}
@media(max-width:860px){
  .qx-tabs{gap:var(--qmx-space-18)}
  .qx-dock{right:12px;bottom:12px}
}
@media(max-width:600px){
  .qx-4{grid-template-columns:1fr}
  .qx-matrix__head{display:none}
  .qx-matrix__row{grid-template-columns:1fr;gap:var(--qmx-space-5)}
  .qx-spec__row{grid-template-columns:1fr;gap:var(--qmx-space-4)}
}