/* Digital Construction Wales — site skin.
   Design tokens and chrome lifted from the CEWales concept demo v3 and adapted
   for a real multi-page site: links replace the demo's JS buttons, and the
   demo-only pieces (pitch notes, walkthrough, demo flag) are gone.
   Colours are the live cewales.org.uk navy and magenta. */

:root{
  --navy:#1E1936;
  --navy-lift:#2C2450;
  --mag:#CC3366;
  --mag-deep:#A82550;
  --on-mag:#FFFFFF;
  --mag-on-navy:#F2769F; /* the accent, lightened for the permanently-navy hero and chrome */
  --ground:#F7F6F9;
  --surface:#FFFFFF;
  --surface-2:#F1EFF5;
  --ink:#1B1A22;
  --muted:#55525F;
  --line:#C9C5D6;
  --line-soft:#E4E1EC;
  --note:#0F766E;
  --note-bg:#E6F4F1;
  --warn:#835700;
  --display:"Geologica","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Code","Consolas",monospace;
  --r:4px;
  --tap:44px;
}
/* Polarity is set by the `brand_skin` setting, stamped onto <html> as
   data-theme. It is deliberately NOT taken from prefers-color-scheme: the
   parent CEWales site is light, so the default has to be a decision rather
   than whatever the visitor's laptop happens to be set to. */
:root[data-theme="dark"]{
  --navy:#0E0B1A;--navy-lift:#241D42;--mag:#F2769F;--mag-deep:#CC3366;--on-mag:#160A10;
  --ground:#141221;--surface:#1D1A2C;--surface-2:#262238;
  --ink:#EFEDF5;--muted:#ABA6BE;--line:#4A4463;--line-soft:#332E48;
  --note:#5EEAD4;--note-bg:#12332F;--warn:#E0B050;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
h1,h2,h3,h4{font-family:var(--display);font-weight:650;line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(1.75rem,7vw,3rem);letter-spacing:-.02em}
h2{font-size:clamp(1.3rem,4.5vw,1.85rem);letter-spacing:-.01em}
h3{font-size:1.05rem}
p{margin:0}
img,svg{max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--mag)}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mag);font-weight:600}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
/* Single-column pages. A 68ch measure inside a 1120px wrap leaves the whole
   right-hand side of a wide screen empty; this brings the container in so the
   heading and the text share one column and the margins are even. */
.wrap-narrow{max-width:660px}
/* On a narrow page the wrap IS the measure, so the text fills it and the
   margins stay even at any width. Elsewhere .prose keeps its own 68ch cap. */
.wrap-narrow .prose{max-width:none}
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:40px}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.tiny{font-size:.78rem}
.row{display:flex;gap:12px;flex-wrap:wrap}
/* Vertical only. Setting `padding` outright would zero the side padding
   .wrap sets, and the text would run to the edge of a phone screen. */
.section{padding-top:36px;padding-bottom:36px}
@media(min-width:760px){ .wrap{padding:0 24px} .g48{gap:48px} .section{padding-top:48px;padding-bottom:48px} }

/* Visually hidden, still read by screen readers. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--mag);color:var(--on-mag);padding:10px 16px;border-radius:0 0 var(--r) 0;font-weight:650}
.skiplink:focus{left:0}

/* ---------- chrome ---------- */
.previewflag{background:#9A6700;color:#fff;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;padding:6px 12px;line-height:1.4}
.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:40}
.topbar .wrap{display:flex;align-items:center;gap:12px;min-height:58px}
/* min-width:0 on both, or the brand refuses to shrink and pushes the sign-in
   button and the menu off the right of a narrow phone. */
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;padding:0;margin-right:auto;text-decoration:none;min-width:0}
.brand-mark{width:28px;height:28px;flex:none;position:relative;background:var(--mag);border-radius:3px;overflow:hidden}
.brand-mark::after{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 1.1px,transparent 1.2px);background-size:6px 6px;background-position:1px 1px;opacity:.85}
.brand-name{font-family:var(--display);font-weight:650;font-size:.9rem;letter-spacing:-.01em;line-height:1.15;text-align:left;min-width:0}
.brand-name span{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500;margin-top:1px}

.mainnav{display:none}
.mainnav a{background:none;border:0;color:rgba(255,255,255,.94);padding:9px 12px;border-radius:var(--r);font-size:.88rem;font-weight:500;position:relative;text-decoration:none;display:inline-block}
.mainnav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .14s}
.mainnav a:hover{color:#fff}
.mainnav a:hover::after{transform:scaleX(1)}
.mainnav a[aria-current="page"]{color:#fff;font-weight:700}
.mainnav a[aria-current="page"]::after{transform:scaleX(1)}

.chrome-tools{display:flex;align-items:center;gap:8px;flex:none}
.toolbtn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);color:#fff;border-radius:var(--r);padding:6px 10px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;min-height:34px;text-decoration:none;display:inline-flex;align-items:center}
.toolbtn:hover{background:rgba(255,255,255,.2);border-color:#fff}
.btn-login{background:#fff;color:#1E1936;border:0;border-radius:var(--r);padding:8px 14px;font-size:.85rem;font-weight:700;min-height:38px;text-decoration:none;display:inline-flex;align-items:center}
.btn-login:hover{background:var(--mag);color:var(--on-mag)}
.menubtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.42);border-radius:var(--r);color:#fff;flex:none}
.menubtn span{display:block;width:16px;height:2px;background:#fff;position:relative}
.menubtn span::before,.menubtn span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#fff}
.menubtn span::before{top:-5px}.menubtn span::after{top:5px}
.hide-sm{display:none}
/* Small phones: give the brand less to carry so the header fits on one row. */
@media(max-width:430px){
  .brand-name{font-size:.82rem}
  .brand-name span{font-size:.5rem}
  .btn-login{padding:8px 11px;font-size:.8rem}
  .topbar .wrap{gap:8px}
}

.drawer{display:none;background:var(--navy);border-top:1px solid rgba(255,255,255,.14);padding:10px 0 16px}
.drawer.open{display:block}
.drawer .wrap{flex-direction:column;gap:2px;display:flex}
.drawer a.dnav{background:none;border:0;color:#fff;text-align:left;padding:13px 4px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.1);min-height:var(--tap);text-decoration:none;display:flex;align-items:center}
.drawer a.dnav[aria-current="page"]{color:var(--mag);font-weight:700}
.drawer .drawer-tools{display:flex;gap:8px;padding-top:14px;flex-wrap:wrap}
@media(min-width:760px){ .hide-sm{display:inline-flex} }
@media(min-width:960px){
  .menubtn{display:none}
  .drawer{display:none!important}
  .mainnav{display:flex;gap:2px}
  .topbar .wrap{min-height:64px;gap:18px}
  .brand-name{font-size:.98rem}
}

/* WG support band */
.wgband{background:var(--navy-lift);color:rgba(255,255,255,.9);font-family:var(--mono);font-size:.62rem;letter-spacing:.04em}
.wgband .wrap{display:flex;align-items:center;gap:8px 12px;justify-content:center;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;text-align:center}
.wg-lozenge{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:3px 9px;color:#fff}
.wg-lozenge b{font-family:var(--display);font-weight:650;letter-spacing:0}
.wgband .sep{display:none}
@media(min-width:760px){ .wgband{font-size:.68rem} .wgband .sep{display:inline;opacity:.5} }

/* ---------- buttons ---------- */
.btn{border:0;border-radius:var(--r);padding:12px 20px;font-weight:650;font-size:.92rem;display:inline-flex;align-items:center;gap:9px;justify-content:center;min-height:var(--tap);text-decoration:none}
.btn-p{background:var(--mag);color:var(--on-mag)}
.btn-p:hover{background:var(--mag-deep);color:var(--on-mag)}
.btn-s{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-s:hover{border-color:var(--mag);color:var(--mag)}
.btn-ghost{background:none;border:0;color:var(--mag);font-weight:650;padding:6px 0;font-size:.9rem;text-align:left;text-decoration:none}
.btn-ghost:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--mag);outline-offset:2px}
@media(max-width:559px){ .row .btn{width:100%} }

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r)}
.pad{padding:18px}
.pad-lg{padding:20px}
@media(min-width:760px){ .pad{padding:24px} .pad-lg{padding:32px} }

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;padding:36px 0 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.1px);background-size:22px 22px;opacity:.5;-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)}
.hero .wrap{position:relative}
.hero .eyebrow{color:var(--mag-on-navy)}
.hero h1{max-width:24ch}
.hero .lede{max-width:56ch;color:rgba(255,255,255,.82);font-size:1rem}
/* The home page opening ran to two paragraphs on 12 Oct 2026, so they need a
   gap between them or they read as one block. */
.hero .lede + .lede{margin-top:.7em}
.hero a:not(.btn){color:var(--mag-on-navy)}
@media(min-width:760px){ .hero{padding:56px 0 64px} .hero .lede{font-size:1.05rem} }

/* ---------- grids and cards ---------- */
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:560px){ .grid{gap:14px} .g-2,.g-4{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} }

.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);padding:18px;text-align:left;display:flex;flex-direction:column;gap:7px;width:100%}
a.card{border-color:var(--line);text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--mag);background:var(--surface-2)}
a.card:hover h3{color:var(--mag)}
.card h3{transition:color .12s}
.card .arrow{font-family:var(--mono);color:var(--mag);font-size:.95rem;margin-top:auto;padding-top:12px;font-weight:700;letter-spacing:.02em}
a.card:hover .arrow{transform:translateX(3px)}
.card .arrow{transition:transform .12s}
@media(min-width:760px){ .card{padding:20px} }

/* ---------- prose (page bodies from the database) ---------- */
.prose{max-width:68ch;display:flex;flex-direction:column;gap:16px}
.prose h2{margin-top:14px}
.prose h3{margin-top:10px}
.prose ul,.prose ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.prose a{color:var(--mag)}
/* A button inside page text (the [your-persona] panels, 2 Oct 2026) keeps its
   own colours: the link colour above would paint crimson text on crimson. */
.prose a.btn{text-decoration:none}
.prose a.btn-p,.prose a.btn-p:hover{color:var(--on-mag)}
.prose a.btn-s{color:var(--ink)}
.prose a.btn-s:hover{color:var(--mag)}
.prose .wayson h2{margin-top:0}
/* [your-toolkit]: the slim strip for the other pages. */
.wayson-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px}
.wayson-strip .acts{display:flex;gap:8px;flex-wrap:wrap}
.wayson-lead{font-weight:650}
.wayson-strip.is-several{flex-direction:column;align-items:stretch;gap:4px}
.wayson-strip .memberrow{padding:6px 0}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:520px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2)}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select,.field textarea{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r);padding:12px;font-family:var(--body);font-size:16px;min-height:var(--tap)}
.field label{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
.formwrap{max-width:420px}

/* ---------- notices ---------- */
.notice{border-radius:var(--r);padding:14px 16px;font-size:.9rem;border-left:3px solid var(--note);background:var(--note-bg)}
.notice-err{border-left-color:var(--mag);background:var(--surface-2)}
.notice-warn{border-left-color:var(--warn);background:var(--surface-2)}
.badge{display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:4px 11px;font-family:var(--mono);font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);align-self:flex-start}
.badge.mag{background:var(--mag);border-color:var(--mag);color:var(--on-mag)}

/* ---------- disclosure ---------- */
details.disc{border:1px solid var(--line-soft);border-radius:var(--r);background:var(--surface)}
details.disc+details.disc{margin-top:10px}
details.disc summary{cursor:pointer;padding:16px 18px;font-family:var(--display);font-weight:650;font-size:1rem;display:flex;align-items:center;gap:10px;min-height:var(--tap);list-style:none}
details.disc summary::-webkit-details-marker{display:none}
details.disc summary::before{content:"+";font-family:var(--mono);color:var(--mag);font-weight:700;flex:none}
details.disc[open] summary::before{content:"\2212"}
details.disc summary:hover{color:var(--mag)}
.disc-body{padding:0 18px 18px;display:flex;flex-direction:column;gap:14px}

/* ---------- cookie notice ---------- */
/* Reserved so the fixed notice never sits on top of the last thing on the
   page. site.js replaces this with the measured height and clears it on
   dismiss; this value is the no-JS fallback. */
body.has-cookiebar{padding-bottom:150px}
@media(min-width:760px){ body.has-cookiebar{padding-bottom:110px} }
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--navy);color:rgba(255,255,255,.9);padding:14px 0;box-shadow:0 -8px 30px rgba(0,0,0,.28)}
.cookiebar .wrap{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cookiebar p{font-size:.85rem;max-width:74ch}
.cookiebar a{color:var(--mag-on-navy)}
@media(min-width:760px){ .cookiebar .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:24px} }

/* ---------- footer ---------- */
footer{background:var(--navy);color:rgba(255,255,255,.75);padding:36px 0;font-size:.85rem}
footer .wrap{display:flex;flex-direction:column;gap:26px}
@media(min-width:760px){ footer{padding:44px 0} footer .wrap{flex-direction:row;gap:32px;justify-content:space-between;flex-wrap:wrap} }
footer h4{color:#fff;font-size:.78rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
footer .btn-ghost{color:rgba(255,255,255,.85)}
footer .btn-ghost:hover{color:var(--mag-on-navy)}
.deliveredby{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.deliveredby .cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.cewlogo{display:inline-block;background:#201736;padding:9px 11px;border-radius:4px;align-self:flex-start}
.cewlogo img{display:block;width:100%;max-width:210px;height:auto}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }

/* ---------- company combobox (register) ---------- */
/* The input sits inside .combo, not .field, so it needs its own full width
   or it renders narrower than every other field on the form. */
.combo{position:relative}
.combo>input{width:100%}
.suggest{position:absolute;left:0;right:0;top:100%;z-index:30;margin:0;padding:0;list-style:none;
  background:var(--surface);border:1.5px solid var(--mag);border-top:0;border-radius:0 0 var(--r) var(--r);
  max-height:15rem;overflow:auto;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.suggest:empty{display:none}
.suggest-item{padding:11px 12px;cursor:pointer;font-size:.92rem;min-height:var(--tap);display:flex;align-items:center}
.suggest-item+.suggest-item{border-top:1px solid var(--line-soft)}
.suggest-item:hover,.suggest-item.on{background:var(--surface-2);color:var(--mag)}

/* Consent checkbox: the box keeps its size, the label wraps beside it. */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;line-height:1.5}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--mag)}

/* ---------- account area ---------- */
.memberrow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.memberrow:last-child{border-bottom:0}
.memberrow .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.memberrow .who strong{font-weight:650}
.memberrow .acts{display:flex;gap:8px;flex-wrap:wrap}
/* Smaller type, but still the full 44px target: these are the confirm,
   decline and remove actions, where a mis-tap actually costs something. */
.btn.is-busy{opacity:.8;cursor:progress}
.btn-sm{padding:8px 14px;font-size:.85rem;min-height:var(--tap)}
.btn-danger{background:var(--surface);color:var(--ink);border:1.5px solid var(--line)}
.btn-danger:hover{border-color:var(--warn);color:var(--warn)}

/* ---------- admin ---------- */
/* A second bar under the chrome, so somebody working in the admin can move
   between its sections without going back to the admin home each time. It
   scrolls sideways on a phone rather than wrapping into a tall block. */
.adminbar{background:var(--surface-2);border-bottom:1px solid var(--line-soft)}
.adminbar .wrap{display:flex;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-top:4px;padding-bottom:4px}
.adminbar a{white-space:nowrap;padding:10px 12px;font-size:.85rem;color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;min-height:var(--tap);display:inline-flex;align-items:center}
.adminbar a:hover{color:var(--mag)}
/* The current section is marked by weight and a crimson underline, not by
   colouring the text. Crimson on surface-2 measures 4.46:1, just under AA for
   text, and colour alone is a poor marker anyway. The underline only has to
   clear 3:1 as a non-text indicator, which it does comfortably. */
.adminbar a[aria-current="page"]{color:var(--ink);font-weight:700;border-bottom-color:var(--mag)}

/* The table's action buttons sit in a row that wraps on a narrow screen. */
td .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
td .acts form{margin:0}

/* Menu builder: a tick box and a position number per page. */
.menurow{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--line-soft)}
.menurow:last-child{border-bottom:0}
.ordercell{flex:none}
.ordercell input{width:4.5rem;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r);padding:8px;font-family:var(--body);font-size:16px;min-height:var(--tap);text-align:center}

/* Settings that change something visible to the public carry a marker, so the
   consequential ones do not look like the routine ones. */
.setting-warn{border-left:3px solid var(--warn)}

/* =============================================================================
   DIGITAL PROFILE, REV 3 (migration 027; approved by Andy, 1 Oct 2026)
   The Digital Environment and Digital Profile pages, the summary, the account
   card, and the picture ("the spider", drawn by includes/spider.php). Kept in
   this one section. The answer boxes and explanation box reuse the "Where
   your firm sits" classes (.optlist, .opt, .opt-detail in brand.css); the
   rules here are scoped under .dp-* so they outrank brand.css, which loads
   later.
   ============================================================================= */
:root{--dp-magenta:#CC3366}                       /* the site's own magenta (brand.css points --mag at the crimson) */
:root[data-theme="dark"]{--dp-magenta:#F2769F}

/* The sign-up steps: 4 since the environment check came in. */
.steps.steps-4 ol{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---- the picture ---- */
.dp-pic{display:block}
.dp-spider{display:block;width:100%;max-width:320px;height:auto;margin:0 auto;overflow:visible}
.dp-spider.is-large{max-width:420px}
.dp-spider.is-small{max-width:220px}
@media (max-width:559px){ .dp-spider:not(.is-small){max-width:335px} }
.dp-spider text{font-family:var(--display);font-weight:800}
/* Navy-grey bands, darkest at the centre; white text reaches 4.8:1 or more on each. */
.dp-spider .sp-band{stroke:#fff;stroke-width:1.5}
.dp-spider .sp-b1{fill:#3D3955}
.dp-spider .sp-b2{fill:#4F4B67}
.dp-spider .sp-b3{fill:#615D79}
.dp-spider .sp-b4{fill:#736F8B}
/* Faded by solid colour (78% toward white), never transparency. */
.dp-spider .sp-seg.is-faded .sp-b1{fill:#D4D3DA}
.dp-spider .sp-seg.is-faded .sp-b2{fill:#D8D7DE}
.dp-spider .sp-seg.is-faded .sp-b3{fill:#DCDBE2}
.dp-spider .sp-seg.is-faded .sp-b4{fill:#E0DFE5}
.dp-spider .sp-outline{fill:none;stroke:none}
.dp-spider .sp-seg.is-current .sp-outline{stroke:var(--accent);stroke-width:3}
.dp-spider .sp-ringname{fill:#fff;font-size:13px;letter-spacing:.02em}
.dp-spider .sp-seg.is-faded .sp-ringname{fill:#55525F}
.dp-spider .sp-arealabel{fill:#615D79;font-size:15px;letter-spacing:.06em}
.dp-spider .sp-seg.is-faded .sp-arealabel{fill:#55525F}
/* The firm's answers: magenta line on a white casing (4.96:1), dots with a white halo. */
.dp-spider .sp-casing{fill:none;stroke:#fff;stroke-width:7.4;stroke-linecap:round;stroke-linejoin:round}
.dp-spider .sp-line{fill:none;stroke:var(--dp-magenta);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dp-spider .sp-dot{fill:var(--dp-magenta);stroke:#fff;stroke-width:2.5;paint-order:stroke}
.dp-spider .sp-dot:not(.is-on){display:none}
/* The environment hub: Yes solid teal, No pale with a dashed edge, not answered pale grey. */
.dp-spider .sp-env-cell{stroke-width:1}
.dp-spider .sp-env[data-state="yes"] .sp-env-cell{fill:#0F766E;stroke:none}
.dp-spider .sp-env[data-state="yes"] .sp-env-icon{color:#fff}
.dp-spider .sp-env[data-state="no"] .sp-env-cell{fill:#FBE9D0;stroke:#835700;stroke-width:1.6;stroke-dasharray:4 3}
.dp-spider .sp-env[data-state="no"] .sp-env-icon{color:#6B4700}
.dp-spider .sp-env[data-state="none"] .sp-env-cell{fill:#ECEBF0;stroke:#CFCCDA}
.dp-spider .sp-env[data-state="none"] .sp-env-icon{color:#6E6B7A}
.dp-spider .sp-env.is-faded[data-state="yes"] .sp-env-cell{fill:#9FC8C5}
.dp-spider .sp-env.is-faded[data-state="yes"] .sp-env-icon{color:#0B5A54}
.dp-spider .sp-env.is-faded[data-state="no"] .sp-env-cell{fill:#FDF4E8;stroke:#B59A66}
.dp-spider .sp-env.is-faded[data-state="no"] .sp-env-icon{color:#8F7A45}
.dp-spider .sp-env.is-faded[data-state="none"] .sp-env-cell{fill:#F5F5F8;stroke:#E2E0E8}
.dp-spider .sp-env.is-faded[data-state="none"] .sp-env-icon{color:#8E8C99}

/* ---- the Digital Environment: compact rows, small Yes / No ---- */
.dp-group-h{font-size:1.3rem}
.dp-group-h:focus{outline:none}
.dp-group-h:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dp-envstep{display:flex;flex-direction:column;gap:12px}
.dp-erows{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.dp-er{display:grid;grid-template-columns:auto 26px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:10px 4px;border-top:1px solid var(--line-soft)}
.dp-er:first-child{border-top:0}
.dp-er-num{color:var(--muted);font-weight:700;font-size:.9rem;min-width:1.3em}
.dp-er-icon{width:24px;height:24px;color:var(--brand-navy);display:block}
.dp-er-icon svg{display:block;width:24px;height:24px}
.dp-er-text{margin:0;font-size:.93rem;line-height:1.38}
.dp-er-text b{font-weight:800;margin-right:4px}
.dp-er-opts{display:flex;gap:6px}
.dp-pill{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--surface);padding:5px 12px 5px 9px;min-height:var(--tap);cursor:pointer;font-weight:700;font-size:.88rem}
.dp-pill input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--accent)}
.dp-pill:hover:not(:has(input:checked)){border-color:var(--brand-navy)}
.dp-pill:has(input:checked){border-color:var(--accent);background:var(--surface-2)}
.dp-pill:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.dp-er.is-pointed{background:var(--surface-2)}
.dp-er.is-missing{box-shadow:inset 3px 0 0 var(--accent)}
@media (max-width:559px){
  .dp-er{grid-template-columns:auto 26px minmax(0,1fr)}
  .dp-er-opts{grid-column:3 / -1}
}
.dp-closing{font-size:.92rem;color:var(--muted)}

/* ---- the Digital Profile: answer boxes with the position and a short line ---- */
.dp-prof .dp-qh{font-size:clamp(1.2rem,3.4vw,1.45rem);line-height:1.25}
.dp-prof .dp-qh:focus{outline:none}
.dp-prof .dp-qh:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.dp-prompt{color:var(--muted);margin:-4px 0 14px}
form.dp-prof .optlist .opt-text em{font-style:normal;color:var(--ink)}
form.dp-prof.style-grid .panel.pad-lg{padding:12px}
form.dp-prof.style-grid .opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 8px;align-items:center;padding:9px 12px}
form.dp-prof.style-grid .opt input{margin:0;grid-column:1;grid-row:1}
form.dp-prof.style-grid .opt-text{display:contents}
form.dp-prof.style-grid .opt-text b{grid-column:2;grid-row:1;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
form.dp-prof.style-grid .opt-text em{grid-column:1 / -1;grid-row:2;display:block;font-size:.88rem;line-height:1.38}
.dp-prof .opt:has(input:checked) em, .dp-prof .opt:has(input:checked) em span{font-weight:400}
@media (max-width:559px){ form.dp-prof.style-grid .optlist{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto} }
.dp-od-answer{font-weight:600;margin-bottom:10px !important}

/* ---- the summary and the account card ---- */
.dp-panel-h{font-size:1.15rem;margin:0 0 4px}
.dp-panel-line{font-size:.86rem;color:var(--muted);margin:0 0 14px}
.dp-envgroup + .dp-envgroup{margin-top:14px}
.dp-envgroup-h{font-size:.92rem;margin:0 0 6px}
.dp-envlist{list-style:none;margin:0;padding:0}
.dp-envlist li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:.9rem;line-height:1.3}
.dp-st{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.85rem}
.dp-st svg{width:15px;height:15px;flex:none}
.dp-st-none{color:var(--muted);font-weight:400}
.dp-st-yes{color:var(--note)}
.dp-st-no{color:var(--warn)}
.dp-meaning{display:flex;flex-direction:column;gap:12px}
.dp-posdl{margin:0;display:grid;gap:12px}
.dp-posdl div{display:grid;gap:2px}
.dp-posdl dt{font-weight:800}
.dp-posdl dd{margin:0}
.dp-card-pic{display:block;margin:4px auto 0;max-width:220px}

/* =============================================================================
   YOUR ACCOUNT (redesigned with Andy, 1 Oct 2026; public/account/index.php)
   A thinner top band (the person's name, their first 3 firms, the admin link
   for those who can reach it), then one panel per firm: name and standing
   (with small Up / Down / Show controls under it), crimson notification
   lines, then two columns, each a picture with its details beneath (round 2),
   then the sections. Panels after the first fold (assets/js/account.js).
   ============================================================================= */
.hero:has(.acct-band){padding:22px 0 24px}
@media (min-width:760px){ .hero:has(.acct-band){padding:30px 0 32px} }
.acct-band h1{font-size:clamp(1.6rem,5vw,2.4rem)}
.acct-band-firms{margin:0;color:rgba(255,255,255,.86);font-size:1rem}
.acct-band-admin{margin:6px 0 0;font-size:.92rem}
.acct-band-admin a{color:var(--mag-on-navy);font-weight:700}
.acct-firm{display:flex;flex-direction:column;gap:14px}
.acct-firm-head{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:flex-start;justify-content:space-between}
.acct-firm-head h2{margin:0;flex:1 1 12rem;min-width:0}
.acct-firm-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-left:auto}
.acct-firm-side .acct-tag{align-self:flex-end}
.acct-ctl{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px}
/* The quiet controls: an icon and a small word, muted, no box. Still at least
   24px square to tap (WCAG 2.2 target size). */
.acct-mini{display:inline-flex;align-items:center;gap:4px;min-height:28px;min-width:28px;padding:2px 6px;
  background:none;border:0;border-radius:0;color:var(--muted);font:inherit;font-size:.82rem;cursor:pointer}
.acct-mini:hover{color:var(--ink);text-decoration:underline}
.acct-mini:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.acct-mini[disabled]{opacity:.35;cursor:default;text-decoration:none}
.acct-mini[disabled]:hover{color:var(--muted)}
.acct-ico{flex:none}
.acct-chev{transition:transform .15s}
.acct-toggle[aria-expanded="false"] .acct-chev{transform:rotate(-90deg)}
.acct-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.acct-notes li{border-left:4px solid var(--accent);padding:5px 0 5px 12px;font-weight:700;color:var(--accent)}
.acct-notes a{color:var(--accent)}
.acct-move{display:flex;gap:2px;margin:0}
.acct-inline{display:inline;margin:0}
.acct-btns{display:flex;flex-wrap:wrap;gap:8px}
/* Two columns, each a heading, a picture and its details. Subgrid keeps the
   headings, pictures and details on the same lines across both columns even
   when one heading wraps. Under 560px they stack. */
.acct-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:12px}
.acct-col{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start;min-width:0}
.acct-col h3{font-size:1.1rem;margin:0;align-self:end}
.acct-col-body{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.acct-col .acct-facts{grid-template-columns:1fr;gap:0}
.acct-col .acct-facts dd{margin:0 0 8px}
@media (max-width:559px){
  .acct-cols{grid-template-columns:minmax(0,1fr)}
  .acct-col + .acct-col{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
}
.acct-pic{display:block}
.acct-pic .wheel, .acct-pic .dp-spider{max-width:none;width:100%}
.acct-status{list-style:none;margin:0;padding:8px 12px;display:grid;gap:4px;width:100%;
  background:var(--surface-2);border:1px solid var(--line-soft)}
.acct-status li{display:flex;gap:6px;align-items:baseline}
.acct-status li::before{content:"";flex:none;width:.55em;height:.55em;border:1.5px solid var(--muted);border-radius:50%;transform:translateY(-.05em)}
.acct-status li.is-done::before{background:var(--note);border-color:var(--note)}
.acct-sec{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line-soft);padding-top:18px}
.acct-sec h3{font-size:1.1rem}
.acct-sec h4{font-size:.95rem}
@media (max-width:559px){ .acct-btns .btn, .acct-move .btn{width:auto} }

/* Your account (Andy, 1 Oct): each column's heading, details, status box and
   buttons centred on the centre line of its wheel. From the administrator
   advice and Join requests down, the panel stays left-aligned as before. */
.acct-col h3, .acct-col-body, .acct-col .acct-facts, .acct-col .acct-facts dt, .acct-col .acct-facts dd { text-align: center; }
.acct-col-body { align-items: center; }
.acct-col .acct-status li { justify-content: center; }
.acct-col .acct-btns { justify-content: center; }

/* Your account, 3rd round (1 Oct): each column is heading, picture, details,
   buttons; the button row lines up across both columns. The profile answers
   sit one line each, centred, mirroring the persona details. */
.acct-col { grid-row: span 4; }
.acct-col > .acct-btns { justify-content: center; align-self: start; }
.acct-dp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: center; }
/* The 6 areas with their colons in one vertical line down the middle: names
   right-aligned to its left, answers left-aligned to its right (Andy, 2 Oct).
   Each item keeps its list role (a subgrid, not display:contents). The
   environment line, shortened to "Environment" so it fits (Andy), lines up
   too, a little apart. */
.acct-dp-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .35em; width: 100%; }
.acct-dp-list li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
.acct-dp-list li > :first-child { text-align: right; }
.acct-dp-list li > :last-child { text-align: left; }
.acct-dp-list li.acct-dp-env { margin-top: 4px; }

/* Admin reporting page (public/admin/reporting.php). Counts only: the bar is
   decoration beside a number that is always shown. */
.stat{font-family:var(--display);font-size:2.2rem;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.rbar{display:block;height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden;min-width:60px}
.rbar > span{display:block;height:100%;background:var(--navy)}
:root[data-theme="dark"] .rbar > span{background:var(--mag)}
.rgrid th.num{white-space:normal;min-width:5.5rem;vertical-align:bottom}
.rgrid td:first-child,.rgrid thead th:first-child{min-width:12rem}
.rgrid th[scope="colgroup"]{text-align:left}