/* ============================================================================
   braudit.css — the shared design layer for every Braudit widget.

   Served at /braudit.css and linked by all six pages: free-search,
   brand-audit, class-agent, class-assistant, search-bar, search-box.

   WHY THIS FILE EXISTS
   --------------------
   Until Aug 2026 each page carried its own copy of the design — 640 lines
   across the set — and they had drifted: class-agent was missing five tokens,
   class-assistant had invented four of its own, --radius was 12px on one page
   and 14px on the rest. Six copies means every change is a six-file job and
   every missed file is a widget that quietly looks wrong on a partner's site.

   WHAT BELONGS HERE
   -----------------
   Tokens, the reset, and the primitives shared by four or more of the six
   pages. Anything one page needs alone stays in that page's <style>, which
   loads after this file and therefore wins.

   Values are the design handoff of 17 Aug 2026 (Free Search Wizard.dc.html),
   with the contrast corrections noted under CONTRAST at the foot.
   ========================================================================= */

:root{
  /* ---- brand ---- */
  --pink:#E51652; --pink-hover:#c9134a; --pink-dark:#c01044;
  --navy:#2D455A; --navy-soft:#3d5a74; --navy-deep:#1c2d3b;

  /* ---- text ----
     Three weights of grey, all AA on white and on --panel:
       --ink    headings and base text
       --slate  body copy
       --quiet  secondary copy (the comp's most-used secondary, 23 uses)
       --muted  micro-copy: labels, table headers, captions, caveats */
  --ink:#1D1D1B; --slate:#3f4c58; --quiet:#617383; --muted:#667481;

  /* ---- lines and surfaces ---- */
  --line:#E6E9ED;          /* the universal hairline, 15 uses in the comp */
  --line-soft:#E1E5EA;      /* future step rule, unselected tool card */
  --field-line:#C9D2DA;     /* input borders at rest */
  --bg:#F7F8FA;             /* page background */
  --panel:#F7F8FA;          /* filled panels inside cards */
  --panel-soft:#FBFCFD;     /* the sub-dial strip */
  --white:#fff;

  /* ---- pink family ---- */
  --pink-tint:#FFF5F8;      /* selected block / row / card fill */
  --pink-line:#E9ADC1;      /* dashed borders, disabled primary */
  --pink-badge:#FDE7EE;     /* term chips */
  --pink-on-navy:#FFB3C7;   /* eyebrow on a navy panel */
  --on-navy:#c7d2dc;        /* body copy on a navy panel */
  --eg-tile-line:#F0E3CB;   /* the cream example tiles */

  /* ---- risk ----
     Two palettes on purpose. The soft triad is the split bar, where solid
     blocks read as proportion. The strong triad is text: numerals and pills. */
  --r-high:#E07A5F; --r-med:#F4D06F; --r-low:#A8D5A2; --r-neg:#D9D9D9;
  --risk-high:#C0392B; --risk-med:#9A7015; --risk-low:#1F8A5B;
  --pill-high-fg:#BE392B; --pill-high-bg:#FBE3DE;
  --pill-med-fg:#8A6A17;  --pill-med-bg:#FCF1D8;
  --pill-low-fg:#1C7E53;  --pill-low-bg:#E7F6EE;
  --pill-neg-fg:#5b6670;  --pill-neg-bg:#EEF1F3;

  /* ---- dials ----
     Read off the VALUE, never off the verdict. The engine sends the same
     three in the payload, so if you change these, change _value_colour() in
     freesearch/viability.py to match. */
  --dial-track:#E9EDF1;
  --dial-good:#1F8A5B; --dial-mid:#9A7015; --dial-poor:#C0392B;

  /* ---- shape ----
     The comp uses 10 / 12 / 14 / 16 / 99px, in that order of frequency. */
  --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-card:20px;
  --r-pill:99px;
  --radius:var(--r-lg);                      /* back-compat for older markup */
  --shadow:0 6px 26px rgba(45,69,90,.08);    /* the only shadow in the comp */
  --lift:drop-shadow(0 12px 22px rgba(45,69,90,.16));

  /* ---- type ----
     --font is body copy and stays on the system stack: instant, no third
     party, and what the visitor's OS renders best. --font-display is Public
     Sans, used only for uppercase micro-type and numerals.

     Public Sans is NOT loaded here — it degrades silently to the system
     stack. See FONT NOTE at the foot. */
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-display:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',
                 Roboto,Helvetica,Arial,sans-serif;
}

/* ---- reset + page ---------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:30px 24px 80px}
.hidden{display:none !important}
a{color:var(--pink)} a:hover{color:var(--pink-hover)}

/* ---- typography ------------------------------------------------------ */
h1{font-size:33px;font-weight:800;letter-spacing:-.9px;margin:0 0 12px;
   text-wrap:balance}
h2{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0 0 10px}
h3{font-size:23px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px}
h4{font-size:18.5px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px}
.lead{font-size:16.5px;line-height:1.62;color:var(--slate);margin:0 0 26px;
  max-width:680px;text-wrap:pretty}
.sub{font-size:15px;line-height:1.5;color:var(--quiet);margin:0}
.eyebrow{font-family:var(--font-display);font-size:11px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--pink);
  margin-bottom:8px}
.micro{font-family:var(--font-display);font-size:10.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}

/* ---- surfaces -------------------------------------------------------- */
.card{background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow);overflow:hidden;
  padding:44px 40px 48px}
.panel{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px 20px}
.panel-navy{background:var(--navy);border-radius:var(--r-lg);
  padding:18px 20px;color:#fff;display:flex;gap:14px;align-items:flex-start}
.panel-navy .eyebrow{color:var(--pink-on-navy)}
.panel-navy p{font-size:14px;line-height:1.6;color:var(--on-navy);margin:0}

/* ---- buttons --------------------------------------------------------- */
/* display + text-decoration are here because .btn is used on <a> as well as
   <button> — an anchor styled as a button was arriving underlined (found on
   the results page Book a Free Call, 31 Aug). */
.btn{appearance:none;border:0;border-radius:var(--r-sm);padding:15px 28px;
  font-family:var(--font);font-size:15.5px;font-weight:700;cursor:pointer;
  display:inline-block;text-align:center;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
a.btn:hover{text-decoration:none}
.btn.primary{background:var(--pink);color:#fff}
.btn.primary:hover:not(:disabled){background:var(--pink-hover)}
/* Disabled keeps the hover colour identical — the button must not appear to
   respond to a pointer it is going to ignore. */
.btn.primary:disabled,.btn.primary:disabled:hover{background:var(--pink-line);
  cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.ghost:hover:not(:disabled){background:var(--navy);color:#fff}
.btn.block{width:100%}
.btn:disabled{cursor:not-allowed}
.link{background:none;border:0;padding:12px 4px;font-family:var(--font);
  font-size:15px;font-weight:700;color:var(--quiet);cursor:pointer;
  transition:color .15s ease}
.link:hover{color:var(--navy)}
.link.pink{color:var(--pink)} .link.pink:hover{color:var(--pink-hover)}

/* ---- form fields ----------------------------------------------------- */
.fld{display:block;font-size:14px;font-weight:700;color:var(--navy);
  margin:14px 0 6px}
.fld .opt{font-weight:600;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=search],textarea,select{
  width:100%;font-family:inherit;font-size:16px;padding:15px 16px;
  border:1.5px solid var(--field-line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);outline:none;
  transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:120px;line-height:1.6;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(229,22,82,.14)}
/* Keyboard users must be able to see where they are. The comp only styled
   focus on hand-written inputs and left the generated ones with outline:none,
   which is the one accessibility gap worth closing on the way in. */
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.err{color:#C0392B;font-size:14px;font-weight:700;margin-top:8px}

/* ---- step bar -------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;
  margin-bottom:22px}
.steps i{display:block;height:4px;border-radius:var(--r-pill);
  margin-bottom:10px;background:var(--line-soft)}
.steps b{font-family:var(--font-display);font-size:12.5px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.steps .done i{background:var(--navy)} .steps .done b{color:var(--navy)}
.steps .now i{background:var(--pink)}  .steps .now b{color:var(--pink)}

/* ---- the option block (steps 2 and 4) -------------------------------- */
.opt-list{display:flex;flex-direction:column;gap:14px;max-width:820px}
.opt-block{background:#fff;border:2px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color .15s ease,background .15s ease}
.opt-block.on{background:var(--pink-tint);border-color:var(--pink)}
.opt-row{display:grid;grid-template-columns:26px 104px 1fr;gap:18px;
  align-items:center;width:100%;background:transparent;border:0;
  padding:18px 22px;cursor:pointer;font-family:inherit;text-align:left}
.opt-row.no-tile{grid-template-columns:26px 1fr}
.tick{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:#fff;border:1.5px solid var(--field-line);color:transparent;
  font-size:15px;line-height:1;transition:background .15s ease,
  border-color .15s ease,color .15s ease}
.opt-block.on .tick{background:var(--navy);border-color:var(--navy);color:#fff}
.opt-row h4{margin:0}
.opt-row h4 span{font-weight:600;color:var(--quiet)}
.opt-row .sub{margin-top:4px}
.eg{width:104px;height:104px;border-radius:var(--r-md);
  border:1px solid var(--eg-tile-line);object-fit:cover;display:block}
.opt-drawer{padding:0 22px 20px}

/* ---- pills ----------------------------------------------------------- */
.pill{border-radius:var(--r-pill);padding:11px 17px;font-family:inherit;
  font-size:14.5px;font-weight:700;cursor:pointer;background:#fff;
  color:var(--navy);border:1.5px solid var(--line);
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.pill.on{background:var(--pink);color:#fff;border-color:var(--pink)}
.pill.navy.on{background:var(--navy);border-color:var(--navy)}
.pills{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:9px;background:#fff;
  border:1px solid var(--line);color:var(--navy);border-radius:var(--r-pill);
  padding:8px 13px;font-size:14.5px;font-weight:700}
.chip .x{color:var(--pink);font-weight:800;cursor:pointer}
.chip.term{background:var(--pink-badge);border-color:transparent;
  font-weight:600;padding:7px 13px;font-size:14px}

/* ---- risk pills ------------------------------------------------------ */
.band{display:inline-block;border-radius:var(--r-pill);padding:6px 13px;
  font-family:var(--font-display);font-size:13px;font-weight:800}
.band.High{color:var(--pill-high-fg);background:var(--pill-high-bg)}
.band.Medium{color:var(--pill-med-fg);background:var(--pill-med-bg)}
.band.Low{color:var(--pill-low-fg);background:var(--pill-low-bg)}
.band.Negligible{color:var(--pill-neg-fg);background:var(--pill-neg-bg)}

/* ---- stat tiles + split bar ------------------------------------------ */
.summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;
  margin-bottom:16px}
.stat{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 16px;text-align:center;background:#fff}
.stat .v{font-family:var(--font-display);font-size:30px;font-weight:800;
  line-height:1;color:var(--navy)}
.stat .k{font-family:var(--font-display);font-size:10.5px;font-weight:800;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  margin-top:7px}
.stat.high .v{color:var(--risk-high)}
.stat.med .v{color:var(--risk-med)}
.stat.low .v{color:var(--risk-low)}
.riskbar{display:flex;height:9px;border-radius:var(--r-pill);overflow:hidden;
  margin-bottom:10px}
.riskbar i{display:block}

/* ---- dials ----------------------------------------------------------- */
/* Pure conic-gradient: no canvas, no charting library, survives print-to-PDF,
   which matters because the same markup goes into the emailed report. --v is
   0-100 and --dc is the colour; BOTH come from the engine payload. Nothing
   here derives, rounds or re-bands anything client-side. */
.dial{border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--dc,var(--navy)) calc(var(--v,0)*3.6deg),
                            var(--dial-track) 0)}
.dial:before{content:'';position:absolute;border-radius:50%;
  background:var(--hole,#fff);inset:var(--ring,12px)}
.dial .val,.dial .cap{position:relative;z-index:1;
  font-family:var(--font-display);font-weight:800}
.dial-master{width:150px;height:150px;--ring:15px;flex-direction:column}
.dial-master .val{font-size:31px;color:var(--navy);line-height:1}
/* The hole is 112px across (150 less the 19px ring, twice). "BRAND STRENGTH"
   sets at 116px on one line, so it was spilling out over the ring on both the
   results screen and the report — max-width forces it to wrap inside the hole
   instead. Found 30 Aug while rebuilding the report; the defect was on the
   wizard all along. */
.dial-master .cap{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--muted);margin-top:2px;max-width:66px;line-height:1.25;text-align:center;
  font-size:9px;letter-spacing:1px}
.dial-sub{width:78px;height:78px;--ring:10px;--hole:var(--panel-soft)}
.dial-sub .val{font-size:19px;color:var(--navy)}

/* ---- disclaimers ----------------------------------------------------- */
.disc{border:1px solid var(--line);border-left:4px solid var(--navy);
  border-radius:var(--r-md);padding:16px 20px;font-size:15px;line-height:1.6;
  color:var(--slate);margin:0 0 12px;background:#fff}

/* ---- loader (Jonathan's spec, 10 Aug 2026) ---------------------------- */
/* Pure CSS, no images, no JS. The timing rules — when it may show at all —
   live in each page's busyOn(), not here. */
.tmh-loader{display:inline-flex;gap:9px;align-items:center}
.tmh-loader i{width:20px;height:23px;display:block;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:tmh-hexpulse 1.15s ease-in-out infinite}
.tmh-loader i:nth-child(1){background:var(--pink);animation-delay:0s}
.tmh-loader i:nth-child(2){background:var(--navy);animation-delay:.16s}
.tmh-loader i:nth-child(3){background:var(--pink);animation-delay:.32s}
@keyframes tmh-hexpulse{0%,80%,100%{transform:scale(.55);opacity:.25}
  40%{transform:scale(1);opacity:1}}

/* ---- the waiting carousel ----
   Copied from the Industry Report's build screen, retimed. Theirs is a pure
   CSS carousel on fixed nth-child delays because Python is blocked mid-build
   in Streamlit; here rotation is driven in the browser, so it runs exactly as
   long as the work takes and loops if it needs to. Only the presentation
   lives here — the copy is in freesearch/nuggets.py. */
.nug{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:22px 20px;max-width:520px;margin:0 auto;text-align:center}
.nug .msg{font-family:var(--font-display);font-weight:800;font-size:16px;
  color:var(--navy)}
.nug .bar{width:100%;height:8px;background:var(--line);border-radius:5px;
  overflow:hidden}
.nug .bar i{display:block;height:100%;width:8%;background:var(--pink);
  border-radius:5px;animation:nug-bar 12s linear forwards}
@keyframes nug-bar{from{width:8%}to{width:92%}}
.nug .card{display:flex;flex-direction:column;gap:7px;min-height:118px;
  justify-content:center;animation:nug-in .35s ease}
@keyframes nug-in{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.nug .card .tag{font-family:var(--font-display);font-size:10px;font-weight:800;
  letter-spacing:.7px;text-transform:uppercase;color:var(--pink)}
.nug .card .t{font-weight:800;font-size:16px;color:var(--navy);line-height:1.25}
.nug .card .b{font-size:13.5px;color:var(--slate);line-height:1.5}
.nug .dots{display:flex;gap:6px}
.nug .dots i{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:background .3s ease}
.nug .dots i.on{background:var(--pink)}
@media (prefers-reduced-motion:reduce){
  .nug .card{animation:none} .nug .bar i{animation:none;width:50%}
}

/* ---- illustrations --------------------------------------------------- */
.ill{display:block;height:auto;filter:var(--lift)}

/* ---- footer / trust strip -------------------------------------------- */
.actions{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding-top:24px;margin-top:26px;
  border-top:1px solid var(--line)}
.trust{display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap;margin-top:22px;font-size:13.5px;color:var(--muted)}
.trust s{width:4px;height:4px;border-radius:50%;background:var(--field-line);
  display:block}

/* ---- RESPONSIVE ------------------------------------------------------
   The comp is desktop-only at 1080px with zero media queries: every
   repeat(N,1fr) and every fixed-column grid in it would overflow on a phone.
   More than half of TMH's traffic is mobile and the widget is embedded in
   other people's pages at whatever width they give us, so the breakpoints
   are authored here rather than left to the browser. */
@media (max-width:880px){
  .card{padding:32px 24px 36px}
  .summary{grid-template-columns:repeat(3,1fr)}
  .steps{gap:8px}
  .steps b{font-size:10.5px;letter-spacing:.6px}
}
@media (max-width:640px){
  .wrap{padding:18px 14px 56px}
  .card{padding:26px 18px 30px;border-radius:var(--r-xl)}
  h1{font-size:26px;letter-spacing:-.6px}
  h2{font-size:21px} h3{font-size:19px}
  .lead{font-size:15.5px}
  .summary{grid-template-columns:repeat(2,1fr)}
  .opt-row{grid-template-columns:26px 1fr;gap:12px;padding:16px}
  .eg{display:none}          /* the example tile is decorative; the copy isn't */
  .dial-master{width:118px;height:118px;--ring:15px}
  .dial-master .val{font-size:25px}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .tmh-loader i{animation:none;opacity:.85}
  *{transition-duration:.01ms !important}
}

/* ============================================================================
   CONTRAST — four values changed from the comp, and why

   Measured against WCAG 2.1 AA. Everything else is carried over untouched.

     #96A2AC -> --muted #667481    2.61:1 -> 4.79:1
        The comp's micro-copy grey. It carries stat-tile labels, table
        headers, the opinion caveat paragraph and the privacy line — all real
        text, all failing badly. This is the one visible change.
     #E0A72B -> --risk-med #9A7015  2.16:1 -> 4.6:1
        The medium-risk numeral and the uniqueness dial arc. At 2.16 it failed
        even the large-text threshold, and the dial arc was 1.83:1 against its
        own track, i.e. the ring was barely visible.
     #C0392B -> --pill-high-fg #BE392B   4.44 -> 4.50 on its tint
     #1F8A5B -> --pill-low-fg  #1C7E53   3.88 -> 4.52 on its tint
        Both a hair under on the pill tints. Imperceptible shifts.

   Hue is preserved in every case — these were darkened in HLS, not replaced.

   FONT NOTE — read before loading Public Sans

   The obvious move is a <link> to fonts.googleapis.com. Don't, without
   deciding it deliberately:

     * these widgets run in iframes on PARTNER sites, so that link makes every
       partner's visitor issue a third-party request to Google from our frame
     * Google Fonts served from Google's own origin transmits the visitor's IP;
       LG Munich I held in Jan 2022 that doing so without consent breached the
       GDPR, and it has driven warning letters since. We are a UK legal
       business embedding on other people's sites
     * it is render-blocking on a page whose selling point is being one
       self-contained file

   Self-host: drop the .woff2 files in freesearch/web/fonts/ and add an
   @font-face here pointing at /fonts/. The engine's static route already
   serves that directory. Until then --font-display falls back to the system
   stack and every page renders correctly.
   ========================================================================= */