/* Digital Construction Wales — CEWales brand layer.
   Loaded AFTER site.css, so it overrides the tokens the shell was built on.

   Everything here comes from the live cewales.org.uk, measured rather than
   guessed: crimson for action, navy for structure, Hanken Grotesk throughout,
   square corners, and the crimson section lozenge.

   Polarity is NOT decided here. site.css defines both palettes and
   layout.php stamps data-theme on <html> from the `brand_skin` setting. */

/* ---------- Hanken Grotesk, self-hosted ----------
   Deliberately not loaded from Google. Our own cookie notice says nothing is
   shared with anyone else, and a font request would hand every visitor's IP
   address to a third party. One variable file per subset; latin-ext carries
   the Welsh circumflex vowels (ŵ, ŷ). */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- brand tokens ----------
   `--accent` is the honest name. The old --mag names are kept pointing at it
   so every rule written against the first skin keeps working. */
:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --accent:         #DC0043;   /* CEWales crimson: primary action */
  --accent-deep:    #B00036;   /* hover */
  --on-accent:      #FFFFFF;
  --brand-navy:     #1E1936;   /* from the logo vector, not the theme CSS */

  --mag:        var(--accent);
  --mag-deep:   var(--accent-deep);
  --on-mag:     var(--on-accent);

  --display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r: 0;                      /* CEWales buttons are square */
}

/* On navy the crimson is too dark to read, so the accent lightens. Same hue,
   lifted until it clears AA against the navy band. */
:root, :root[data-theme="light"] { --mag-on-navy: #FF89A8; }
:root[data-theme="dark"]         { --mag-on-navy: #FF89A8; }

/* Dark keeps a lifted crimson so buttons stay legible on the dark ground. */
:root[data-theme="dark"] {
  --accent:      #FF4D7D;
  --accent-deep: #DC0043;
  --on-accent:   #2A0010;
}

/* ---------- headings ----------
   Hanken 800 is the CEWales signature. Uppercase is used for short section
   headings only: page titles here are long, and all-caps costs legibility
   for exactly the readers a toolkit cannot afford to lose. */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.015em; }
.hero h1 { letter-spacing: -.02em; }

/* ---------- the section lozenge ----------
   CEWales' repeating device: a small crimson tag with a square bullet, sitting
   above a heading. Replaces the plain mono eyebrow. */
.lozenge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--display); font-weight: 700;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 0; align-self: flex-start;
}
.lozenge::before {
  content: ""; width: 8px; height: 8px; background: var(--on-accent); flex: none;
}
.hero .lozenge { background: var(--accent); color: var(--on-accent); }

/* The old eyebrow becomes the lozenge wherever it is still used. */
.eyebrow { color: var(--accent); }
.hero .eyebrow { color: var(--mag-on-navy); }

/* ---------- the logo lockup ----------
   The real CEWales wordmark leads, Digital Construction Wales is the
   endorsement. Parent brand first, project second. */
.brand { gap: 14px; }
.brand-mark { display: none; }            /* the invented mark is retired */

.brandlock { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brandlock .cewmark {
  flex: none; width: 168px; height: auto; display: block;
}
/* The vector is navy; on the navy bar it is shown white. */
.topbar .brandlock .cewmark,
footer .brandlock .cewmark { filter: brightness(0) invert(1); }

.brandlock .rule {
  flex: none; width: 1px; align-self: stretch; margin: 2px 0;
  background: currentColor; opacity: .35;
}
.brandlock .project {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.brandlock .project b {
  font-family: var(--display); font-weight: 800; font-size: .82rem;
  letter-spacing: .01em; line-height: 1.12; text-transform: uppercase;
}
.brandlock .project span {
  font-family: var(--mono); font-size: .56rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .7; line-height: 1.2;
}
@media (max-width: 700px) {
  .brandlock .cewmark { width: 124px; }
  .brandlock .project b { font-size: .72rem; }
  .brandlock .project span { display: none; }
}

/* ---------- squared-off components ---------- */
.btn, .panel, .card, .field input, .field select, .field textarea,
.toolbtn, .btn-login, .suggest, .badge, .tablewrap, .notice, details.disc {
  border-radius: 0;
}
.badge { border-radius: 0; }

/* Secondary action is navy, as on the parent site. */
.btn-navy { background: var(--brand-navy); color: #fff; border: 0; }
.btn-navy:hover { background: #2C2450; color: #fff; }

/* Cards pick up the squared, bordered treatment rather than the soft one. */
a.card:hover { border-color: var(--accent); }
.card .arrow { font-family: var(--display); font-weight: 800; }

/* ---------- header fit ----------
   The real lockup is much wider than the placeholder mark it replaced, which
   left the navigation shrinking and breaking mid-phrase ("What digital /
   means"). Links never wrap; the lockup gives up the space instead. */
.mainnav a { white-space: nowrap; padding-left: 10px; padding-right: 10px; font-size: .85rem; }
.mainnav a::after { left: 10px; right: 10px; }
.brandlock .cewmark { width: 140px; }
.topbar .wrap { gap: 14px; }
/* No size bump on wide screens. Signed in there are two more controls in the
   header, and a larger lockup pushed the whole row past the container. */

/* The project name sat on three lines next to the wordmark, which made the
   lockup taller than the bar. One line each, sized to fit beside it. */
.brandlock .project b,
.brandlock .project span { white-space: nowrap; }
.brandlock .project b { font-size: .72rem; letter-spacing: .02em; }
.brandlock .project span { font-size: .52rem; }


/* With the project name set to nowrap the lockup must not be shrunk below its
   natural width, or it overflows and prints on top of the first nav link. */
.brand { flex: 0 0 auto; min-width: auto; }
.brandlock { flex: 0 0 auto; min-width: auto; }
.brandlock .project { flex: 0 0 auto; min-width: auto; }
.mainnav { flex: 1 1 auto; justify-content: flex-end; }

/* Forms and panels follow the prose: inside a narrow wrap the wrap IS the
   measure, so the fields line up under the heading instead of hugging the
   left edge with half the screen empty beside them. */
.wrap-narrow .formwrap { max-width: none; }
.wrap-narrow [style*="max-width:68ch"] { max-width: none !important; }

/* ---------- question blocks (persona, and later the profile) ----------
   Real <fieldset>/<legend> with native radios. A screen reader announces the
   question once and then each option as one of N, which a set of styled
   buttons with aria-pressed does not do. */
.qblock { border: 1px solid var(--line-soft); margin: 0; }
.qlegend {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  padding: 0 0 14px; line-height: 1.25;
}
.qlegend .tiny { font-weight: 400; margin-left: 6px; }
.optlist { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 13px;
  border: 1.5px solid var(--line); background: var(--surface);
  padding: 12px 14px; min-height: var(--tap); cursor: pointer;
}
.opt:hover { border-color: var(--accent); background: var(--surface-2); }
.opt input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); margin: 0; }
/* Two columns on anything but a phone: the short name, then the line that
   says who actually sits in that segment. The name stays the thing you scan;
   the explanation is there for the firm that has never used the phrase. */
.opt-text { display: grid; gap: 3px; min-width: 0; }
.opt-text b { font-weight: 700; line-height: 1.3; }
.opt-text em { font-style: normal; font-size: .84rem; line-height: 1.4; color: var(--muted); }
@media (min-width: 700px) {
  .opt-text { grid-template-columns: 220px 1fr; gap: 4px 20px; align-items: baseline; }
  .opt-text em { font-size: .86rem; }
}
/* :has is an enhancement; the radio dot already shows the state without it. */
.opt:has(input:checked) { border-color: var(--accent); background: var(--surface-2); }
.opt:has(input:checked) span { font-weight: 700; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- when the full navigation earns its place ----------
   Six nav items, a wide lockup, and two more controls once somebody is signed
   in. Below 1100px that row cannot fit, so the drawer takes over rather than
   the header quietly overflowing. Between 1100 and 1400 the nav runs tight. */
@media (max-width: 1199px) {
  .mainnav { display: none; }
  .menubtn { display: inline-flex; }
}
@media (min-width: 1200px) {
  .menubtn { display: none; }
  .drawer { display: none !important; }
  .mainnav { display: flex; }
  .mainnav a { font-size: .82rem; padding-left: 8px; padding-right: 8px; }
  .mainnav a::after { left: 8px; right: 8px; }
}
@media (min-width: 1400px) {
  .mainnav a { font-size: .86rem; padding-left: 11px; padding-right: 11px; }
  .mainnav a::after { left: 11px; right: 11px; }
}

/* A <legend> breaks out of its fieldset's border box, cutting a notch through
   the panel edge, and floating it to fix that collapses the option rows. So the
   fieldset carries no styling at all: the legend is the question heading, and
   the panel is an inner wrapper around the options. Semantics intact, no notch. */
.qblock { border: 0; padding: 0; margin: 0; min-width: 0; }
.qlegend { display: block; width: 100%; padding: 0 0 12px; }

/* Align the radio with the first line of the label rather than the middle of a
   four-line row. */
.opt { align-items: flex-start; }
.opt input { margin-top: 2px; }

/* ---------- the sector wheel ----------
   Colours come from the data (persona_segments.colour, sampled from the
   approved artwork), so only the non-coloured parts are styled here. */
.wheel { width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; overflow: visible; }

/* The space outside the rings: the tenth role. Its fill shows through the gaps
   between wedges, which is what makes those gaps read as channels running in
   to the client at the centre. */
.wheel-outside { fill: var(--surface-2); }
.wheel-rim     { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 7 6; }

.wheel-cell    { stroke: var(--surface); stroke-width: 1.5; }
.wheel-seg     { transition: opacity .12s; }
.wheel-seg.is-pin .wheel-cell { stroke: var(--surface); }
.is-pin-cell   { stroke: var(--brand-navy); stroke-width: 2.5; }

.wheel-label {
  font-family: var(--display); font-weight: 800; font-size: 23px;
  fill: #fff; letter-spacing: .09em; paint-order: stroke;
}

.wheel-ringmark { fill: #fff; stroke: var(--brand-navy); stroke-width: 1.5; }
.wheel-ringnum  { font-family: var(--mono); font-size: 13px; font-weight: 700; fill: var(--brand-navy); }

.wheel-hub          { fill: var(--brand-navy); }
.wheel-hub-eyebrow  { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; fill: rgba(255,255,255,.72); }
.wheel-hub-name     { font-family: var(--display); font-weight: 800; font-size: 19px; fill: #fff; }

.wheel-pin      { fill: var(--accent); stroke: #fff; stroke-width: 3.5; }
.wheel-pin-halo { fill: var(--accent); opacity: .3; }

/* The three explanatory pictures: one part of the model lit, the rest faded.
   Faded parts keep their shape so the reader still sees the whole wheel. */
.wheel--focus .wheel-cell.is-lit          { stroke: var(--brand-navy); stroke-width: 2; }
.wheel--focus .wheel-seg.is-dim .wheel-label,
.wheel--focus-level .wheel-label          { fill: var(--muted); }
.wheel--focus .wheel-ringno.is-dim    { opacity: .3; }
.wheel--focus-outside .wheel-ringno.is-dim { opacity: .12; }
.wheel--focus .wheel-ringno.is-lit .wheel-ringmark { fill: var(--brand-navy); }
.wheel--focus .wheel-ringno.is-lit .wheel-ringnum  { fill: #fff; }
.wheel-outside.is-lit { fill: var(--wheel-outside-lit, #DAD6EC); }
.wheel-rim.is-lit     { stroke: var(--wheel-rim-lit, var(--brand-navy)); stroke-width: 2.5; stroke-dasharray: none; }
.wheel-hubg.is-dim .wheel-hub         { fill: color-mix(in srgb, var(--brand-navy) 14%, var(--surface)); }
.wheel--focus-outside .wheel-hubg.is-dim .wheel-hub { fill: color-mix(in srgb, var(--brand-navy) 5%, var(--surface)); }
.wheel-hubg.is-dim .wheel-hub-eyebrow,
.wheel-hubg.is-dim .wheel-hub-name    { fill: var(--muted); }
.wheel--focus-outside .wheel-seg.is-dim .wheel-label { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }
.wheel-outside-label  {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: .08em; fill: var(--brand-navy);
}

/* The explanatory pictures when placed in a page by shortcode. */
.wheelfig { margin: 26px auto; max-width: 440px; }

/* The client hub and the space around the chain, pickable on the
   interactive wheel alongside the wedges. */
.wheel-hubg.is-clickable, .wheel-outg.is-clickable { cursor: pointer; }
.wheel-hubg.is-clickable:focus, .wheel-outg.is-clickable:focus { outline: none; }
.wheel-hubg.is-active .wheel-hub,
.wheel-hubg.is-clickable:focus-visible .wheel-hub { stroke: var(--accent); stroke-width: 4; }
.wheel-outg.is-active .wheel-outside { fill: #DAD6EC; }
.wheel-outg.is-active .wheel-rim,
.wheel-outg.is-clickable:focus-visible .wheel-rim { stroke: var(--brand-navy); stroke-width: 2.5; stroke-dasharray: none; }

/* The legend carries the full role names; the wheel carries the short ones. */
.wheel-key { display: grid; gap: 6px 18px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 560px) { .wheel-key { grid-template-columns: 1fr 1fr; } }
.wheel-key li { display: flex; align-items: baseline; gap: 9px; font-size: .86rem; list-style: none; }
.wheel-key .sw { width: 12px; height: 12px; flex: none; border-radius: 0; transform: translateY(1px); }

/* Reviewing mode. Deliberately loud: authentication is off, and nobody should
   mistake this for how the real site behaves. Local machine only. */
.devbanner {
  background: #7A1020; color: #fff; text-align: center;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  padding: 8px 14px; line-height: 1.45;
}

/* ---------- the wheel on a public page ---------- */
.wheelblock { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 26px 0; }
@media (min-width: 900px) { .wheelblock { grid-template-columns: 1fr 260px; align-items: center; } }
.wheeldetail h3 { margin-bottom: 8px; }
.wheeldetail { min-height: 150px; }

/* A pickable wedge. The whole group lifts slightly so it reads as one thing
   rather than four separate rings. */
.wheel-seg.is-clickable { cursor: pointer; }
.wheel-seg.is-clickable .wheel-cell { transition: opacity .12s; }
.wheel-seg.is-clickable:hover .wheel-cell,
.wheel-seg.is-clickable.is-active .wheel-cell { opacity: 1; }
.wheel:has(.is-active) .wheel-seg.is-clickable:not(.is-active) .wheel-cell { opacity: .38; }
.wheel-seg.is-clickable:focus { outline: none; }
.wheel-seg.is-clickable:focus-visible .wheel-cell { stroke: var(--accent); stroke-width: 2.5; }
.wheel-seg.is-clickable.is-active .wheel-cell { stroke: var(--brand-navy); stroke-width: 2; }

/* ---------- the Digital Profile picture ----------
   Five separate bars, deliberately never combined. No numbers on them: the
   Minimum Digital Baseline paper rules out a score, and a percentage is a
   score however it is dressed. */
.pillar { display: flex; flex-direction: column; gap: 7px; }
.pillar-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.pillar-track {
  position: relative; height: 10px; background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.pillar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .30; }
.pillar-dot {
  position: absolute; top: 50%; width: 14px; height: 14px;
  background: var(--accent); border: 2px solid var(--surface);
  transform: translate(-50%, -50%);
}

/* ---------- Your account: one page ----------
   The firm's wheel sits in the header beside the name (Andy's mock-up,
   30 Sept), and everything else is visible on arrival. */
.acct-hero.has-wheel { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 720px) { .acct-hero.has-wheel { grid-template-columns: 1fr 230px; } }
.acct-wheel { display: block; max-width: 230px; }
.acct-wheel .wheel { max-width: 230px; }
.acct-alert {
  display: inline-block; background: var(--accent); color: var(--on-accent) !important;
  font-weight: 700; padding: 8px 14px; text-decoration: none;
}
.acct-requests { border-left: 4px solid var(--accent); }
.acct-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; justify-content: space-between; }
.acct-facts { display: grid; grid-template-columns: 1fr; gap: 2px 20px; margin: 0; }
@media (min-width: 560px) { .acct-facts { grid-template-columns: minmax(12em, auto) 1fr; } }
.acct-facts dt { color: var(--muted); font-size: .88rem; }
.acct-facts dd { margin: 0 0 8px; font-weight: 600; }
.acct-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.acct-count {
  display: inline-block; min-width: 1.5em; margin-left: 4px; padding: 0 5px;
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-align: center;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Show / hide password: the eye sits inside the right-hand end of the box. */
.pwwrap { position: relative; display: block; }
.pwwrap input { width: 100%; padding-right: 52px; }
.pwtoggle {
  position: absolute; top: 0; right: 0; width: 48px; height: 100%; min-height: var(--tap);
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted); cursor: pointer;
}
.pwtoggle:hover, .pwtoggle[aria-pressed="true"] { color: var(--ink); }
.pwtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.pw-slash { display: none; }
.pwtoggle[aria-pressed="true"] .pw-slash { display: inline; }

/* The confirm-your-email reminder: message and button side by side, stacking on a phone. */
.verifybar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.verifybar form { margin: 0; }

/* ---------- Setting up a firm: the three steps (Jia Afsar, 26 Aug) ---------- */
.steps { margin: 0 0 20px; }
.steps-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; counter-reset: none; }
.steps li { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 0; border-top: 4px solid var(--line); font-size: .9rem; line-height: 1.25; }
.steps-num {
  flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); background: var(--surface); font-weight: 700; font-size: .85rem;
}
.steps li.is-done    { border-top-color: var(--brand-navy); color: var(--ink); }
.steps li.is-done .steps-num    { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }
.steps li.is-current { border-top-color: var(--accent); font-weight: 700; color: var(--ink); }
.steps li.is-current .steps-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps li.is-todo    { color: var(--muted); }
@media (max-width: 480px) { .steps li { flex-direction: column; align-items: flex-start; font-size: .8rem; } }

/* ---------- Where your firm sits: one question at a time ---------- */
.is-wizard .qblock.wiz-off { display: none; }
.wiz-count { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
.wiz-wheel { max-width: 260px; margin: 0 auto; }
.wiz-wheel .wheel { max-width: 260px; }
/* Lit by the answers so far: the chosen role's segment, then its ring. */
.wheel.is-live .wheel-seg:not(.is-chosen) .wheel-label { fill: var(--muted); }
.wheel.is-live .wheel-cell.is-chosen-cell { stroke: var(--accent); stroke-width: 4; }
.wheel.live-hub .wheel-hub { stroke: var(--accent); stroke-width: 5; }
.wheel.live-out .wheel-outside { fill: #DAD6EC; }
.wheel.live-out .wheel-rim { stroke: var(--brand-navy); stroke-width: 2.5; stroke-dasharray: none; }
.checkrow { display: grid; grid-template-columns: 1fr; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .checkrow { grid-template-columns: 1.2fr 1fr auto; align-items: baseline; } }
.checkrow dt { color: var(--muted); font-size: .9rem; }
.checkrow dd { margin: 0; font-weight: 600; }
.checkrow .checkact { font-weight: 400; }
.checklist { margin: 0; }
/* The wheel above the question, then every answer's name at once in a
   compact grid, then the explanation of the one chosen (Andy, 30 Sept, chosen
   over a carousel). The whole question fits on a screen with the wheel in
   view. With JavaScript off, the plain list with every explanation. */
.is-wizard .wiz-count { order: 0; }
.is-wizard .wiz-wheel { order: 1; }
.is-wizard .qblock { order: 2; }
.is-wizard .wiz-need, .is-wizard .row { order: 3; }
.is-wizard .wiz-wheel .wheel { max-width: 240px; }
@media (max-width: 600px) { .is-wizard .wiz-wheel .wheel { max-width: 170px; } }

/* A wider single measure, shared by the hero and the body (see layout.php). */
.wrap-mid { max-width: 1028px; }
/* Text in a wider measure still reads at a comfortable line length. */
.wrap-mid .lede, .wrap-mid .notice { max-width: 68ch; }
[hidden] { display: none !important; }

/* The compact grid of answer names. */
.is-wizard.style-grid .optlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.is-wizard.style-grid .opt { min-width: 0; }
.is-wizard.style-grid .opt-text b { overflow-wrap: anywhere; }
.is-wizard.style-grid .opt { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.is-wizard.style-grid .opt-text em { display: none; }
.is-wizard.style-grid .opt-text b { font-size: .92rem; }

/* The explanation: clear enough to read without effort (Andy). Full ink,
   body-size text, in the chosen answer's own colours. */
.opt-detail {
  margin-top: 14px; padding: 14px 18px 16px;
  /* The same colours as the chosen answer above it, so the two read as a pair. */
  background: var(--surface-2); border: 1.5px solid var(--accent); border-left-width: 6px;
  min-height: 7.5em;
}
.opt-detail p { margin: 0; }
.opt-detail-k { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px !important; }
.opt-detail-h { font-family: var(--display); font-weight: 800; font-size: 1.1rem; color: var(--ink); margin-bottom: 4px !important; }
.opt-detail-b { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.opt-detail.is-empty .opt-detail-b { color: var(--muted); }

/* "Support and shape the sector" chosen: the same picture as the outside
   image on Who it is for (Andy, 30 Sept): segments and the client centre
   faded almost to white, the outside space lavender with a navy rim. */
.wheel.live-out .wheel-label { fill: var(--muted); opacity: .45 !important; }
.wheel.live-out .wheel-hub { fill: color-mix(in srgb, var(--brand-navy) 4%, #fff); stroke: none; }
.wheel.live-out .wheel-hub-eyebrow,
.wheel.live-out .wheel-hub-name { fill: var(--muted); }
.wheel.live-out .wheel-ringno { opacity: .12; }
/* The rim label shows on the live wheel only when the outside is chosen. */
.wheel-outside-label.is-live-only { display: none; }
.wheel.live-out .wheel-outside-label.is-live-only { display: inline; }
/* A role in one of the segments chosen: the client centre fades too, as in
   the Role picture (Andy, 30 Sept). Not when the client is the answer, where
   the centre is what lights up, and not for Level 0. */
.wheel.is-live:not(.live-hub):not(.live-out) .wheel-hub { fill: color-mix(in srgb, var(--brand-navy) 14%, #fff); }
.wheel.is-live:not(.live-hub):not(.live-out) .wheel-hub-eyebrow,
.wheel.is-live:not(.live-hub):not(.live-out) .wheel-hub-name { fill: var(--muted); }
/* Pointing at an answer must not look like choosing it: navy outline only. */
.is-wizard.style-grid .opt:hover:not(:has(input:checked)) { background: var(--surface); border-color: var(--brand-navy); }
/* The chosen Level's number marker, on the live wheel. */
.wheel.is-live .wheel-ringno.is-lit .wheel-ringmark { fill: var(--accent); stroke: var(--accent); }
.wheel.is-live .wheel-ringno.is-lit .wheel-ringnum  { fill: #fff; }
/* A Level chosen that is not the outermost ring: the chosen role's name now
   sits on a faded cell, so it goes grey like the others. */
.wheel.live-ring:not(.live-ring-outer) .wheel-seg.is-chosen .wheel-label { fill: var(--muted); }
/* The chosen Level's ring, outlined in crimson on the live wheel, as the lit centre is (Andy). */
.wheel-ringline { display: none; }
.wheel-ringline.is-lit { display: inline; }
.wheel-ringline circle { fill: none; stroke: var(--accent); stroke-width: 3; }   /* the same crimson as the lit centre */

/* ---------- Why register, on the home page (step 5) ---------- */
.whyreg { border-top: 4px solid var(--accent); }
.whyreg-grid { display: grid; grid-template-columns: 1fr; gap: 18px 28px; }
@media (min-width: 640px)  { .whyreg-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .whyreg-grid { grid-template-columns: repeat(4, 1fr); } }
.whyreg h3 { font-size: 1.02rem; margin: 0 0 6px; }
.whyreg p { margin: 0; }

/* ---------- QR codes: a firm's, on the account page; the sign-up one, in the admin ---------- */
.qrbox { display: grid; justify-items: start; gap: 6px; }
.qr-img { width: 220px; max-width: 100%; background: #fff; }
.qr-img svg { display: block; width: 100%; height: auto; }
.qr-url { word-break: break-all; color: var(--muted); margin: 0; }

/* ---------- A wheel picture beside the text (Who it is for, 30 Sept) ----------
   Text left, picture right; the picture goes under the text on a phone. */
.inset-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 24px; align-items: start; }
.inset-text { display: flex; flex-direction: column; gap: 16px; }
.wheel-inset .wheelfig { margin: 0; max-width: 190px; }
.wheel-inset-cap { font-size: .82rem; line-height: 1.4; color: var(--muted); margin: 6px 0 0; text-align: center; }
@media (max-width: 600px) {
  .inset-row { grid-template-columns: 1fr; }
  .wheel-inset { width: 190px; margin: 0 auto; }
}

/* The Project Value flag on a firm's pin (30 Sept). */
.wheel-flag-pole  { stroke: var(--brand-navy); stroke-width: 4; }
.wheel-flag-cloth { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.wheel-flag-text  { font-family: var(--display); font-weight: 800; font-size: 30px; fill: #fff; }

/* Sortable table headings (People screen). */
th .sortlink { color: inherit; text-decoration: none; }
th .sortlink:hover, th .sortlink:focus-visible { text-decoration: underline; }
th[aria-sort] .sortlink { color: var(--accent-deep); }

/* The CEWales logo in the footer, on its own and legible (30 Sept). White on
   the navy footer, as in the header. */
.ft-cewlogo { display: block; max-width: 300px; margin-bottom: 16px; }
.ft-cewlogo img { display: block; width: 100%; height: auto; filter: brightness(0) invert(1); }
.ft-cewlogo:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Welsh Government's "Funded by" logo in the footer. 54px matches the cap
   height of the CEWales logo in the column opposite (300px wide, so 23px tall),
   keeping the two of equal prominence as WG's guidance asks. */
.ft-wglogo { display: block; height: 54px; width: auto; margin: 4px 0 0; }

/* The five-column footer (30 Sept): CEWales wider on the left, three link
   columns, Welsh Government wider on the right. One column on a phone; on a
   tablet the two logos take a row each with the links between. */
footer .wrap.ft-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 640px) {
  footer .wrap.ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ft-cew, .ft-wg { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  footer .wrap.ft-grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 32px; }
  .ft-cew, .ft-wg { grid-column: auto; }
}
.ft-cewlogo { margin: 4px 0 0; }
/* The copyright line sits at the foot of the CEWales column, level with the
   bottom of the tallest link column (Andy, 30 Sept). */
.ft-cew { display: flex; flex-direction: column; }
.ft-copy { margin: auto 0 0; padding-top: 12px; opacity: .65; }
/* "Initially hosted by ...as architecture" (Andy, 2 Oct 2026): "the most
   discreet words on the site". Smaller and lighter than the copyright line
   beneath it, still above 4.5:1 against the navy; the link marked by a faint
   underline rather than colour. */
.ft-host { margin: 8px 0 0; font-size: .66rem; font-weight: 200; font-style: italic; letter-spacing: .01em; opacity: .6; }
.ft-host a { font-weight: 200; }
.ft-host a { color: inherit; text-decoration: none; }
/* No underline at rest (Andy, 2 Oct); one appears on pointing or keyboard
   focus, so it can still be found as a link. */
.ft-host a:hover, .ft-host a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- TRIAL, 30 Sept: the header lockup, names first ----------
   English and Welsh at the same size (equal prominence), the Welsh in the
   pink-crimson that passes contrast on navy, the CEWales logo beneath at the
   width of the names. */
.brand2 { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 8px 0; text-decoration: none; }
/* The names as SVG text, each line stretched to the logo's width (1 Oct).
   12.3 user units is the size at which the longer English line fills 240
   with almost no added spacing; the Welsh line is letter-spaced to match. */
.brand2 .bn-svg { display: block; width: 240px; height: auto; overflow: visible; }
.brand2 .bn-svg text { font-family: var(--display); font-weight: 800; font-size: 12.3px; }
.brand2 .bn-svg .bn-l1 { fill: #fff; }
.brand2 .bn-svg .bn-l2 { fill: var(--mag-on-navy); }
@media (max-width: 759px) { .brand2 .bn-svg { width: 220px; } }
.brand2 .bn-cew { display: block; width: 250px; height: auto; filter: brightness(0) invert(1); }
@media (max-width: 1099px) { .brand2 .bn-cew { width: 210px; } .brand2 .bn-en, .brand2 .bn-cy { font-size: .8rem; } }
@media (max-width: 700px)  { .brand2 .bn-cew { display: none; } .brand2 { padding: 6px 0; } }

/* The band under the top bar: CEWales left, Welsh Government right. */
.wgband .wrap.wgband2 { justify-content: space-between; gap: 10px 24px; padding-top: 9px; padding-bottom: 9px; }
.band-cew { display: block; flex: none; }
.band-cew img { display: block; width: 240px; height: auto; filter: brightness(0) invert(1); }
.band-cew:focus-visible { outline: 2px solid var(--mag-on-navy); outline-offset: 3px; }
.band-wg { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
/* Welsh Government's "Funded by" logo, supplied as white artwork, so no filter.
   WG's 2024 guidance asks for equal prominence beside a partner logo: at 44px
   its four lines of type match the cap height of the CEWales wordmark beside it,
   rather than towering over it. Never recoloured, stretched or cropped. */
.band-wg img { display: block; height: 44px; width: auto; }
@media (max-width: 759px) {
  .wgband .wrap.wgband2 { flex-direction: column; justify-content: center; }
  .band-cew img { width: 220px; }
  .band-wg img { height: 40px; }
}
/* The Welsh button while Welsh is switched off (1 Oct): visibly off, with a
   note on pointing or tapping. Colour, not opacity, so the note stays crisp. */
.toolbtn-off { position: relative; color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.3); background: transparent; cursor: help; }
.toolbtn-off:hover { background: transparent; border-color: rgba(255,255,255,.45); }
.toolbtn-off .tip {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; width: 230px;
  background: #fff; color: var(--navy, #1E1936); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 10px; box-shadow: 0 6px 18px rgba(0,0,0,.18);
  font-family: var(--body, inherit); font-size: .8rem; line-height: 1.35; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
}
.toolbtn-off:hover .tip, .toolbtn-off:focus .tip, .toolbtn-off:focus-visible .tip { display: block; }
.drawer-cyoff { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); }

/* No one or two words left hanging on a line of their own (Andy, 1 Oct).
   Chrome and Edge rebalance the last lines of each paragraph; browsers that
   do not know the rule simply ignore it. Headings are left alone, so the
   approved home page headline keeps its line break. */
main p, main li, .hero p { text-wrap: pretty; }

/* [sector-circles] on How we define construction (1 Oct): labels beside the
   circles on a wide screen, a key under them on a phone. */
.figcircles { margin: 4px 0 18px; }
.figcircles svg { display: block; width: 100%; height: auto; }
.figcircles .fc-wide { max-width: 640px; }
.figcircles .fc-narrow { display: none; max-width: 340px; margin: 0 auto; }
@media (max-width: 599px) {
  .figcircles .fc-wide { display: none; }
  .figcircles .fc-narrow { display: block; }
}

/* Page titles (Andy, 1 Oct): the crimson box above every title, which only
   repeated the footer group or the site name, is replaced by a short crimson
   bar UNDER the title, sitting visually mid-way between the title's baseline
   and the top of the capitals in the line beneath.
   The arithmetic, for Hanken Grotesk 800 at line-height 1.15: the title's
   baseline sits .23125em above the bottom of its box, and a 16.8px lede's
   capitals start 7px below the top of its box. The gap is set to 40px
   (baseline to capitals): the 6px bar starts 17px under the baseline, leaving
   17px above the next line. Pages with no line beneath keep the same bar. */
.hero .lozenge { display: none; }
.hero h1 { position: relative; margin-bottom: calc(33px - .23125em); }
.hero h1::after {
  content: ""; position: absolute; left: 0; top: calc(100% + 17px - .23125em);
  width: 78px; height: 6px; background: var(--accent);   /* 56px + 40% (Andy, 1 Oct) */
}

/* The Wales Digital Steering Group credit in the footer (14 Oct 2026). It wears
   the "Delivered by:" heading's clothes, so the two credits read as a pair, but
   it is a paragraph: see the note in layout.php. The link underlines on its own
   rather than only on hover, because uppercase monospace hides a link otherwise
   and this one is the whole point of the line. */
.ft-credit { margin: 14px 0 0; color: #fff; font-size: .78rem; font-family: var(--mono);
             letter-spacing: .1em; text-transform: uppercase; font-weight: 600; line-height: 1.6; }
.ft-credit-l { display: block; }
/* The name sits on its own row under the label. Slightly tighter tracking than
   the label so the whole group name fits one line in this column; it still
   wraps rather than overflowing if a browser disagrees. */
.ft-credit-n { display: block; letter-spacing: .04em; color: inherit;
               text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ft-credit-n:hover, .ft-credit-n:focus-visible { text-decoration-thickness: 2px; }