/* CareerDNA, one look.
   ---------------------------------------------------------------------------
   Every page of the site links this file first and adds only what is its own:
   the puzzles add their gears and tiles, the admin its tables, the report its
   charts. Colour, type, shape, spacing, the bar across the top and every
   button on the site are decided here, once.

   Cream paper and forest green, with four soft colours that each do a job:
   sun for what you said about yourself, terracotta for a caution, lagoon for
   what was observed, plum for the rest. Nothing is ever signalled by colour
   alone; every state carries a word as well.

   Dark mode follows the phone's own setting, and a page may pin itself with
   data-theme="light" or "dark" on <html>. */

:root {
  color-scheme: light;

  --paper: #F3F1F6; --surface: #FBFAFD; --sunken: #E8E5EE;
  --ink: #201D2E; --ink-soft: #615C74;
  --brand: #2E2A4A; --brand-deep: #211E38; --brand-soft: #DEDAEA; --on-brand: #F7F5FB;
  --accent: #565080; --accent-soft: #DEDAEA;
  --hot: #A8687E; --hot-deep: #6E3B4C; --hot-soft: #EDDCE2;
  --sun: #B8973F; --sun-deep: #66521A; --sun-soft: #EEE5CC;
  --lagoon: #5B7FA6; --lagoon-deep: #33506E; --lagoon-soft: #DCE4EE;
  --plum: #7A6BA8; --plum-deep: #453B68; --plum-soft: #E2DDEF;
  --danger: #93304A; --danger-soft: #F0DCE3;
  --line: #DBD6E4; --ring: #5B7FA6;

  --shadow: 0 1px 2px rgba(32,29,46,.05), 0 14px 30px -20px rgba(32,29,46,.28);
  --shadow-lift: 0 2px 4px rgba(32,29,46,.06), 0 22px 44px -24px rgba(32,29,46,.34);
  --radius: 18px; --radius-sm: 14px; --radius-lg: 24px;
  --measure: 44rem;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* The two soft washes behind every page, named so dark mode can dim them. */
  --wash-a: var(--lagoon-soft); --wash-b: var(--sun-soft);
}

/* Dark: the same colours at night. The soft tints become deep ones and the
   "deep" inks become light, so a tinted card keeps its meaning either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #131120; --surface: #1A1729; --sunken: #211D33;
    --ink: #E8E5F0; --ink-soft: #A39FB5;
    --brand: #DEDAEA; --brand-deep: #C9C4DC; --brand-soft: #292541; --on-brand: #131120;
    --accent: #A79FD0; --accent-soft: #292541;
    --hot: #D49AAB; --hot-deep: #EDDCE2; --hot-soft: #38222B;
    --sun: #D6B86A; --sun-deep: #EEE5CC; --sun-soft: #322A16;
    --lagoon: #8FAECE; --lagoon-deep: #DCE4EE; --lagoon-soft: #1C2838;
    --plum: #A99AD4; --plum-deep: #E2DDEF; --plum-soft: #272138;
    --danger: #E09BAE; --danger-soft: #35161F;
    --line: #2F2A45; --ring: #8FAECE;

    --shadow: 0 1px 2px rgba(0,0,0,.24), 0 14px 30px -20px rgba(0,0,0,.62);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.28), 0 22px 44px -24px rgba(0,0,0,.72);
    --wash-a: #1B2A3D; --wash-b: #2E2714;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #131120; --surface: #1A1729; --sunken: #211D33;
  --ink: #E8E5F0; --ink-soft: #A39FB5;
  --brand: #DEDAEA; --brand-deep: #C9C4DC; --brand-soft: #292541; --on-brand: #131120;
  --accent: #A79FD0; --accent-soft: #292541;
  --hot: #D49AAB; --hot-deep: #EDDCE2; --hot-soft: #38222B;
  --sun: #D6B86A; --sun-deep: #EEE5CC; --sun-soft: #322A16;
  --lagoon: #8FAECE; --lagoon-deep: #DCE4EE; --lagoon-soft: #1C2838;
  --plum: #A99AD4; --plum-deep: #E2DDEF; --plum-soft: #272138;
  --danger: #E09BAE; --danger-soft: #35161F;
  --line: #2F2A45; --ring: #8FAECE;

  --shadow: 0 1px 2px rgba(0,0,0,.24), 0 14px 30px -20px rgba(0,0,0,.62);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.28), 0 22px 44px -24px rgba(0,0,0,.72);
  --wash-a: #1B2A3D; --wash-b: #2E2714;
}

/* --- base ----------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0; padding: 0 0 4rem; color: var(--ink);
  background:
    radial-gradient(22rem 22rem at 100% 8rem, var(--wash-a) 0 55%, transparent 56%),
    radial-gradient(18rem 18rem at 0% 16rem, var(--wash-b) 0 55%, transparent 56%),
    var(--paper);
  background-attachment: fixed;
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* One column, one measure. A page that wants a narrower or wider one sets
   --measure on itself rather than inventing another container. */
main, .wrap { max-width: var(--measure); margin: 0 auto; padding: 1.5rem 1.1rem; position: relative; }

h1 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 8vw, 2.5rem);
  line-height: 1.04; letter-spacing: -.015em; margin: .5rem 0 .8rem; text-wrap: balance;
}
h1 em { color: var(--hot); font-style: italic; }

/* The small green signpost above a section, in every page's own words. */
h2 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin: 1.9rem 0 .6rem; font-weight: 800;
}
h3 { font-size: 1.05rem; margin: .6rem 0 .3rem; }

/* A serif headline anywhere: the one thing to do, a door, a room. */
.display {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem); line-height: 1.1; margin: .1rem 0 .35rem;
}

p { margin: .5rem 0; text-wrap: pretty; }
a { color: var(--accent); }
.muted, .lede { color: var(--ink-soft); font-size: .9rem; }
.lede { font-size: 1rem; }
ul { margin: .3rem 0; padding-left: 1.15rem; }
li { margin: .18rem 0; }

/* --- the bar across the top ----------------------------------------------- */

.sitebar {
  position: sticky; top: 0; z-index: 5; padding: .8rem 1.2rem; color: var(--brand);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
}
/* The same bar, in the flow of a page that scrolls its own content. */
.sitebar.flat {
  position: static; background: none; border: 0; backdrop-filter: none;
  padding: .1rem 0 .2rem;
}
.sitebar .brand {
  cursor: pointer; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .5rem; color: var(--brand); text-decoration: none;
}
.sitebar .chip, .chip {
  font-size: .78rem; color: var(--ink-soft); font-weight: 600;
  border: 1px solid var(--line); background: var(--surface);
  padding: .25rem .7rem; border-radius: 99px; white-space: nowrap;
}
/* A chip is a chip even when it is a button: it never takes the width of
   the page the way the buttons people are meant to press do. */
button.chip { width: auto; display: inline-block; margin: 0; }
button.chip:hover:not(:disabled) { background: var(--sunken); color: var(--ink); transform: none; }

/* --- cards ---------------------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem; margin: .65rem 0;
  box-shadow: var(--shadow); transition: border-color .14s, transform .14s, background .14s;
}
.card.pick { cursor: pointer; position: relative; }
.card.pick:hover { border-color: var(--lagoon); transform: translateY(-1px); }
.card.on {
  border: 2px solid var(--lagoon); background: var(--lagoon-soft); color: var(--lagoon-deep);
  font-weight: 600; padding: calc(1.05rem - 1px) calc(1.15rem - 1px);
}

/* --- buttons -------------------------------------------------------------- */

button, .btn {
  font: inherit; font-weight: 700; color: var(--on-brand); border: 0; cursor: pointer;
  background: var(--brand); border-radius: 999px; padding: .9rem 1.3rem;
  width: 100%; margin-top: .6rem; text-align: center; text-decoration: none; display: block;
  transition: background .14s, transform .14s, box-shadow .14s;
}
button:hover:not(:disabled), .btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
button.ghost, .btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--brand-soft); }
button.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
button.tiny { width: auto; display: inline-block; padding: .45rem .85rem; margin: 0; font-size: .88rem; }
button:disabled, .btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }

/* A button that is really a link: for the quiet way out of a form, where a
   third pill would read as a third thing to do. */
.linky {
  width: auto; display: inline-block; margin: .6rem 0 0; padding: 0;
  background: none; color: var(--accent); font-weight: 700; font-size: .9rem;
  text-align: left; text-decoration: underline; text-underline-offset: 3px;
}
.linky:hover:not(:disabled) { background: none; color: var(--ink); transform: none; }

.row { display: flex; gap: .5rem; flex-wrap: wrap; }
.row > button, .row > .btn { width: auto; flex: 1 1 13rem; }

/* Two ways into the same form - not two things to do. A segmented switch
   reads as a choice of tab; two filled buttons read as two front doors, and
   people click the wrong one. */
.segmented {
  display: flex; gap: .25rem; padding: .25rem; margin: 1rem 0 .2rem;
  background: var(--sunken); border-radius: 999px; border: 1px solid var(--line);
}
.segmented button {
  flex: 1; width: auto; margin: 0; padding: .6rem .9rem; border-radius: 999px;
  background: transparent; color: var(--ink-soft); font-weight: 700; font-size: .95rem;
  box-shadow: none;
}
.segmented button:hover:not(:disabled) { background: transparent; color: var(--ink); transform: none; }
.segmented button[aria-selected="true"] {
  background: var(--surface); color: var(--brand); box-shadow: var(--shadow);
}

/* --- fields --------------------------------------------------------------- */

input, select, textarea {
  font: inherit; width: 100%; padding: .8rem 1rem; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); margin-top: .5rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--lagoon); }
input[type="range"] { padding: 0; accent-color: var(--lagoon); background: none; border: 0; }
input[type="checkbox"] { width: auto; }

/* Never remove the focus ring: every page has to work from a keyboard. */
:is(a, button, input, select, textarea, summary, [data-act], [tabindex]):focus-visible {
  outline: 3px solid var(--ring); outline-offset: 2px;
}

/* --- notes, in four voices ------------------------------------------------ */

/* A note in the page's own voice, for a caveat that is not a warning. */
.note.quiet { background: var(--sunken); color: var(--ink); }
.note { background: var(--hot-soft); color: var(--hot-deep); padding: .9rem 1.05rem; margin: .65rem 0; border-radius: var(--radius-sm); }
.ok   { background: var(--brand-soft); color: var(--brand); padding: .9rem 1.05rem; margin: .65rem 0; border-radius: var(--radius-sm); font-weight: 600; }
.err  { background: var(--danger-soft); color: var(--danger); padding: .9rem 1.05rem; margin: .65rem 0; border-radius: var(--radius-sm); font-weight: 600; }
.warn { background: var(--sun-soft); color: var(--sun-deep); padding: .9rem 1.05rem; margin: .65rem 0; border-radius: var(--radius-sm); }
.note p:first-child, .ok p:first-child, .err p:first-child, .warn p:first-child { margin-top: 0; }
.note p:last-child, .ok p:last-child, .err p:last-child, .warn p:last-child { margin-bottom: 0; }

/* --- small type ----------------------------------------------------------- */

.eyebrow {
  display: inline-block; margin: .4rem 0 0; padding: .3rem .8rem; border-radius: 99px;
  background: var(--hot-soft); color: var(--hot-deep);
  font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.kicker { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* The name keeps its own shape inside type that is otherwise uppercased:
   CareerDNA, never CAREERDNA, which loses the join between the two halves. */
.wordmark { text-transform: none; letter-spacing: .01em; }

.pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1.1rem; }
.pills span { padding: .4rem .85rem; border-radius: 99px; font-size: .85rem; font-weight: 600; }
.t-sun { background: var(--sun-soft); color: var(--sun-deep); }
.t-lagoon { background: var(--lagoon-soft); color: var(--lagoon-deep); }
.t-plum { background: var(--plum-soft); color: var(--plum-deep); }
.t-hot { background: var(--hot-soft); color: var(--hot-deep); }
.t-brand { background: var(--brand-soft); color: var(--brand); }

.flag { display: inline-block; font-size: .74rem; font-weight: 700; padding: .18rem .6rem; border-radius: 99px; }
.flag.self { background: var(--sun-soft); color: var(--sun-deep); }
.flag.obs { background: var(--brand-soft); color: var(--brand); }

/* --- odds and ends shared by more than one page --------------------------- */

.bar { height: 8px; background: var(--sunken); border-radius: 99px; overflow: hidden; margin: .5rem 0; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--tone, var(--lagoon)); }

details { margin-top: 1rem; }
summary { cursor: pointer; font-size: .85rem; color: var(--accent); font-weight: 700; }

pre { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .8rem; overflow-x: auto; font-size: .72rem; font-family: var(--mono); }

.kv { display: flex; justify-content: space-between; gap: .6rem; font-weight: 700; }

.fineprint { font-size: .78rem; color: var(--ink-soft); margin-top: 1.2rem; }

/* On paper, or in a PDF saved from the phone.

   A report somebody prints is for showing to a partner, a parent or an
   adviser, so it drops everything that only works on a screen - the bar
   across the top, every button, the washes behind the page - and keeps the
   words, the numbers and enough rule lines to find your way. Ink is costly:
   the backgrounds go, the text goes black. */
@media print {
  :root { --paper: #FFF; --surface: #FFF; --sunken: #F4F4F4; --ink: #000; --ink-soft: #333;
    --line: #BBB; --brand: #000; --on-brand: #FFF; --shadow: none; --shadow-lift: none; }
  body { background: #FFF !important; padding: 0; font-size: 11pt; }
  main, .wrap { max-width: none; padding: 0; }
  .sitebar, .no-print, button, .linky, .doorway, .seed, .steps, .track, .tap-note { display: none !important; }
  .card, .role, .q { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  h2 { color: #000; }
  .hero-block { background: none !important; color: #000 !important; border: 1px solid #BBB; }
  .hero-block h1, .hero-block p, .hero-block .kicker { color: #000 !important; }
  .hero-block::before, .hero-block::after { display: none; }
  .note, .ok, .err, .warn, .card.tone, .fact { background: #F4F4F4 !important; color: #000 !important; }
  details { break-inside: auto; }
  summary { display: none; }
  a { color: #000; text-decoration: underline; }
  .legal { border-top: 1px solid #BBB; }
}

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

@media (min-width: 720px) {
  :root { --measure: 44rem; }
}