/* ============================================================
   Arche Advisory — The diagnostic
   v5.0 — three pages: diagnostic, diagnostic-questions, results.

   Ported from the 26 Jul mock-up, which was drawn on the OLD light
   palette (white paper, warm paper, gold secondary accent). Nothing
   from that palette survives here. Everything below resolves through
   the v4.4 token layer:

     grounds   --ground-1 / --ground-2 / --ground-3   (the ink scale)
     accent    --sage-bright, sole accent
     text      --fg-1 / --fg-2 / --fg-3
     lines     --line / --line-strong
     type      --font-display (Nevera) / serif / sans / mono

   NO NEW COLOURS AND NO NEW FONTS. Two consequences worth naming,
   because both were judgement calls rather than direct ports:

   1. The mock-up used GOLD for its secondary accent — the rule above
      "Last step", the draft tag, and the sub-50% score tracks. v4.4
      has no gold; sage is the sole accent. Gold becomes sage where it
      was decorative, and a weak score track fills --fg-3 (unlit bone)
      against --sage-bright (lit). Reads as lit/unlit rather than
      good/bad, which suits a dark ground better than an amber would.

   2. Colour is never the only signal. Every track also carries its
      percentage in text and an aria-label, so the weak/strong split
      survives greyscale, colour blindness and a screen reader.

   Breakpoints are 1199.98px and 809.98px only, matching the rest of
   the site. The mock-up's 900px breakpoint is not used.
   ============================================================ */


/* ------------------------------------------------------------
   Shared — page head block used by all three pages
------------------------------------------------------------ */

.dg-head { padding-block: 88px 64px; }
.dg-head .rule { margin-bottom: 22px; }
.dg-head .eyebrow { margin-bottom: 20px; }
.dg-head h1 { max-width: 20ch; margin-bottom: 26px; }
.dg-head .lead { max-width: 62ch; }

/* A sub-page nav needs a back-to-site affordance the index does not. */
.dg-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  color: var(--fg-3);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color var(--dur-fast) var(--ease-out);
}
.dg-back:hover { color: var(--sage-bright); }
.dg-back .arrow { transition: transform var(--dur-base) var(--ease-out); }
.dg-back:hover .arrow { transform: translateX(-4px); }

/* The privacy line. Appears on all three pages, deliberately, because
   it is the single claim most likely to decide whether someone answers
   question one honestly. */
.dg-privacy {
  margin-top: 18px;
  max-width: 62ch;
}


/* ------------------------------------------------------------
   diagnostic.html — the landing page
------------------------------------------------------------ */

.dg-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 72px;
  align-items: start;
  margin-top: 8px;
}

.dg-getlist { list-style: none; margin-top: 26px; }
.dg-getlist li {
  display: flex;
  gap: 18px;
  padding-block: 18px;
  border-bottom: var(--bw) solid var(--line);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
}
.dg-getlist li:first-child { border-top: var(--bw) solid var(--line); }
/* the short sage rule to the left of each row */
.dg-getlist .rl {
  flex: 0 0 20px;
  height: var(--rule-w);
  background: var(--sage-bright);
  margin-top: 13px;
}

/* The authority card. Lifted off the ground rather than tinted, since
   a warm card cannot exist on this palette. */
.dg-authority {
  background: var(--ground-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--shadow-card);
}
.dg-authority .rule { margin-bottom: 20px; }
.dg-authority .eyebrow { margin-bottom: 18px; }
.dg-authority p { font-size: var(--fs-small); line-height: 1.62; color: var(--fg-2); }

.dg-startbar {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Open-question marker. The mock-up's gold "draft-tag", restated in the
   only accent this site has. */
.dg-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage-bright);
  background: var(--sage-tint);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 5px 10px;
}
.dg-tag + .dg-tag { margin-left: 8px; }


/* ------------------------------------------------------------
   diagnostic-questions.html — the instrument
------------------------------------------------------------ */

/* Sticky, directly beneath the 52px-logo nav. The nav's own height is
   52 + 10px padding top and bottom + 1px border = 73px. */
.dg-progress {
  position: sticky;
  top: 73px;
  z-index: 40;
  background: rgba(14, 15, 13, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: var(--bw) solid var(--line);
  padding-block: 14px;
}
.dg-progress-inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex;
  align-items: center;
  gap: 18px;
}
.dg-bar {
  flex: 1;
  height: 3px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.dg-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--sage-bright);
  transition: width var(--dur-slow) var(--ease-out);
}

@media (max-width: 1199.98px) { .dg-progress { top: 65px; } }
@media (max-width: 809.98px)  { .dg-progress { top: 55px; } }

.dg-catblock {
  padding-block: 48px;
  border-bottom: var(--bw) solid var(--line);
}
.dg-catblock:last-of-type { border-bottom: 0; }

.dg-cathead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 10px;
}
.dg-cathead .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sage-bright);
}
.dg-cathead h2 { font-size: clamp(21px, 2.2vw, 30px); }
.dg-catsub {
  font-size: var(--fs-small);
  color: var(--fg-3);
  margin-bottom: 32px;
  max-width: 56ch;
}

.dg-q { margin-bottom: 36px; max-width: 760px; }
.dg-q:last-child { margin-bottom: 0; }
.dg-qt {
  display: flex;
  gap: 12px;
  font-size: 17.5px;
  line-height: 1.5;
  font-weight: var(--w-medium);
  color: var(--fg-1);
  margin-bottom: 16px;
}
.dg-qt .qn {
  flex: 0 0 28px;
  padding-top: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: var(--w-regular);
  color: var(--fg-3);
}

/* Fieldset carries the grouping for assistive tech; the visible label is
   the legend, so its border, padding and default inset are cleared.

   NOT display:contents. That is the tidier way to stop a legend
   imposing its own layout, and it is also the way to have several
   browsers drop the element out of the accessibility tree, which would
   leave every radio group unnamed. The legend stays a block and the
   flex row is a span inside it. */
.dg-q fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.dg-q legend { display: block; width: 100%; padding: 0; }

.dg-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 40px;
}

/* Whole row is the target, not just the radio — brief §8. */
.dg-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--ground-2);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--fg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.dg-opt:hover {
  border-color: var(--sage-bright);
  background: var(--sage-tint);
  color: var(--fg-1);
}
.dg-opt input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--sage-bright);
}
.dg-opt.is-checked {
  border-color: var(--sage-bright);
  background: var(--sage-tint);
  color: var(--fg-1);
}
/* The radio itself takes focus; the ring belongs on the row. */
.dg-opt:has(input:focus-visible) {
  outline: 2px solid var(--sage-bright);
  outline-offset: 3px;
}

/* An unanswered question, once the visitor has tried to submit. */
.dg-q.is-missing .dg-qt { color: var(--sage-bright); }
.dg-q.is-missing .dg-opts { box-shadow: -3px 0 0 var(--sage-bright); }


/* ---- Last step ---- */

.dg-fieldgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 820px;
  margin-top: 30px;
}
.dg-field { display: flex; flex-direction: column; gap: 8px; }
.dg-field.full { grid-column: 1 / -1; }
.dg-field label {
  font-size: 14px;
  font-weight: var(--w-semibold);
  color: var(--fg-1);
}
.dg-field .req { color: var(--sage-bright); }
.dg-field input,
.dg-field select,
.dg-field textarea {
  font-family: var(--font-sans);
  font-size: 15.5px;
  color: var(--fg-1);
  padding: 13px 14px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--ground-1);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.dg-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.dg-field input:focus,
.dg-field select:focus,
.dg-field textarea:focus {
  border-color: var(--sage-bright);
  box-shadow: var(--focus-ring);
}
.dg-field input[aria-invalid="true"],
.dg-field textarea[aria-invalid="true"] { border-color: var(--sage-bright); }
.dg-field .hint { font-size: var(--fs-caption); color: var(--fg-3); }
.dg-field .err {
  font-size: var(--fs-caption);
  color: var(--sage-bright);
  min-height: 1em;
}
/* The native select arrow renders as a light control on a dark field in
   some browsers; the explicit scheme keeps it legible. */
.dg-field select { color-scheme: dark; }

/* The PDPA notification. Deliberately body-sized rather than fine
   print: a notice nobody reads is not a notice. Sage left rule so it
   reads as a statement rather than a disclaimer. */
.dg-notice {
  margin-top: 34px;
  max-width: 68ch;
  padding-left: 18px;
  border-left: var(--rule-w) solid var(--sage-bright);
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--fg-2);
}
.dg-notice strong { color: var(--fg-1); font-weight: var(--w-semibold); }
.dg-notice a { color: var(--sage-bright); }

/* Honeypot. Off-screen rather than display:none — some bots skip
   anything that is not rendered, and a screen reader will not reach it
   because the wrapper is aria-hidden and the input is out of the tab
   order. */
.dg-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dg-submitrow {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
/* Disabled is styled, never hidden, and the button stays focusable so it
   can announce its state — brief §8. */
.dg-submit[aria-disabled="true"] {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--fg-3);
  cursor: not-allowed;
}
.dg-submit[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--fg-3);
}
.dg-submit[aria-disabled="true"] .arrow { transform: none; }


/* ------------------------------------------------------------
   results.html
------------------------------------------------------------ */

.dg-scorewrap {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: start;
}

.dg-scorebox {
  background: var(--ground-2);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--shadow-card);
}
.dg-scorebox .eyebrow { margin-bottom: 18px; }

/* The one large figure on the page, in the display face. Nevera is
   caps-only with lining figures, so it sets numerals cleanly. */
.dg-bignum {
  font-family: var(--font-display);
  font-size: clamp(58px, 6vw, 82px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variant-numeric: lining-nums tabular-nums;
}
.dg-bignum .of {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}
.dg-bandname {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--fg-1);
  margin-top: 16px;
}
.dg-scorebox .rule { margin-block: 22px; }

.dg-catrow { padding-block: 17px; border-bottom: var(--bw) solid var(--line); }
.dg-catrow:first-child { border-top: var(--bw) solid var(--line); }
.dg-catrow .top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 9px;
}
.dg-catrow .nm { font-size: 15.5px; font-weight: var(--w-semibold); color: var(--fg-1); }
.dg-catrow .vl { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-3); }
.dg-track {
  height: 4px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.dg-track > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--sage-bright);
  transition: width var(--dur-slow) var(--ease-out);
}
/* Below 50%: unlit rather than a second hue. The number beside it and
   the aria-label carry the same information without relying on colour. */
.dg-track > span.is-low { background: var(--fg-3); }

.dg-interp { max-width: 64ch; }
.dg-interp .dg-verdict {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(23px, 2.5vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--fg-1);
  max-width: 24ch;
  margin-bottom: 22px;
}
.dg-interp p { margin-bottom: 18px; }

/* The next-step card. The ink anchor of the mock-up becomes the lifted
   ink-700, since the page ground is already the darkest ink. */
.dg-nextbox {
  background: var(--ground-3);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  padding: 38px;
  margin-top: 30px;
}
.dg-nextbox .eyebrow { margin-bottom: 16px; }
.dg-nextbox h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--w-regular);
  font-size: 24px;
  color: var(--fg-1);
  margin-bottom: 14px;
}
.dg-nextbox p {
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--fg-2);
  margin-bottom: 26px;
  max-width: 52ch;
}
/* v9.0 — two of the four bands have no call to action by design, so the
   26px reserved for a button below the paragraph would otherwise sit
   there as an unexplained gap. The button is [hidden] rather than
   removed from the markup, so :last-child does not help. */
.dg-nextbox:has(#r-next-cta[hidden]) p { margin-bottom: 0; }

/* Handoff block — the mailto, and the plain statement of what it does. */
.dg-handoff {
  margin-top: 30px;
  padding-top: 30px;
  border-top: var(--bw) solid var(--line);
}
.dg-handoff .eyebrow { margin-bottom: 14px; }
.dg-handoff p { font-size: var(--fs-small); color: var(--fg-2); margin-bottom: 22px; max-width: 56ch; }
.dg-handoff-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.dg-retake { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* Shown when results.html is opened without a valid result in the URL. */
.dg-noresult { max-width: 62ch; }
.dg-noresult h1 { margin-bottom: 22px; }
.dg-noresult p { margin-bottom: 26px; }


/* ------------------------------------------------------------
   Responsive — the two site breakpoints, nothing else
------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  .dg-grid { gap: 48px; }
  .dg-scorewrap { gap: 44px; }
  .dg-head { padding-block: 64px 48px; }
}

@media (max-width: 809.98px) {
  .dg-grid,
  .dg-scorewrap,
  .dg-fieldgrid { grid-template-columns: 1fr; }
  .dg-grid { gap: 40px; }
  .dg-scorewrap { gap: 36px; }
  .dg-opts { padding-left: 0; }
  .dg-qt .qn { flex-basis: 24px; }
  .dg-authority,
  .dg-nextbox { padding: 26px; }
  .dg-progress-inner { gap: 12px; }
  /* The time estimate is the least load-bearing item in a 320px bar. */
  .dg-progress-inner .dg-eta { display: none; }
}


/* ------------------------------------------------------------
   Print — someone will print the result. Give them something
   that is not four pages of dark ink.
------------------------------------------------------------ */

@media print {
  .nav, .footer, .dg-progress, .dg-retake, .dg-handoff, .dg-back { display: none; }
  html, body { background: #fff; color: #111; }
  .dg-scorebox, .dg-nextbox, .dg-authority { background: #fff; border-color: #ccc; box-shadow: none; }
  .dg-bignum, .dg-bandname, .dg-verdict, .dg-catrow .nm, h1, h2, h3 { color: #111; }
  .dg-interp p, .dg-nextbox p { color: #333; }
  .dg-scorewrap { grid-template-columns: 1fr; }
}