/* Career Guides article template: the header/nav bridge and the article layout shared by
   every guide in public/content/. Linked after content.css, before each page's own <style>,
   which holds only that guide's interactive widget. */
/* ── Full landing page nav/brand/button CSS — overrides content.css conflicts ── */

/* Brand mark: content.css .orb = fixed+blurred background blob; scope to .brand to restore gold */
.brand .orb {
  position: relative; filter: none; pointer-events: none; z-index: 1;
  width: 21px; height: 21px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, var(--gold-core) 0%, var(--gold-bright) 20%, var(--gold) 48%, #C97E00 74%, var(--gold-deep) 100%);
  box-shadow: 0 0 16px 1px rgba(240,165,0,.5), 0 0 40px 5px rgba(240,165,0,.24),
              inset 0 -4px 11px rgba(120,72,0,.45), inset 0 4px 9px rgba(255,246,224,.55);
}
.sq { background: var(--ink-sq); border-radius: 28%; display: grid; place-items: center; flex: none; position: relative; overflow: hidden; }
.sq::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(240,165,0,.22), transparent 62%); }
.wordmark { font-family: "Sora", sans-serif; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
.wordmark b { color: var(--gold-text); font-weight: 700; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 999px; font-family: "Sora", sans-serif; font-size: .95rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--grad-gold); color: #3A2600; box-shadow: 0 8px 24px rgba(240,165,0,.30); }
.btn-primary:hover { box-shadow: 0 14px 34px rgba(240,165,0,.42); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--border-hi); }
.btn-outline:hover { border-color: var(--text-dim); background: var(--tint-neutral); }
.btn-sm { padding: 10px 18px; font-size: .85rem; }

/* Container width: content.css uses 1160px / 40px gutter; landing page is 1180px / 44px */
:root { --container: 1180px; }
.container { width: min(calc(100% - 44px), var(--container)); margin-inline: auto; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--border); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; gap: 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand .sq { width: 34px; height: 34px; }
.brand .wordmark { font-size: 1.18rem; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: .9rem; font-weight: 600; color: var(--text-dim); }
.nav-links a { transition: color .18s ease; }
.nav-links a:hover { color: var(--text); }
.nav-right { display: inline-flex; align-items: center; gap: 14px; }
.nav-auth { display: inline-flex; align-items: center; gap: 14px; }
.nav-login { color: var(--text-dim); font-weight: 600; font-size: .9rem; transition: color .18s; }
.nav-login:hover { color: var(--text); }
.theme-toggle { width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; background: var(--tint-neutral); border: 1px solid var(--border); color: var(--text-mid); transition: color .2s, border-color .2s, background-color .2s; }
.theme-toggle:hover { color: var(--text); border-color: var(--border-hi); }
.theme-toggle svg { width: 20px; height: 20px; }

/* Footer */
.site-footer { padding: 64px 0 40px; }

/* Body typography */
body { line-height: 1.6; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.03em; }

/* Light mode: content.css :root dark vars load after styles.css, overriding [data-theme="light"] */
[data-theme="light"] {
  --navy: #F6F8FF; --navy-mid: #ECEFFB; --surface: #FFFFFF; --surface2: #F4F6FC;
  --ink-sq: #0A1026; --text: #0A1026; --text-mid: #34406A; --muted: rgba(10,16,38,0.55);
  --border: rgba(16,24,56,0.10); --border-hi: rgba(16,24,56,0.18);
  --tint-cyan: rgba(46,107,255,0.08); --tint-cyan-line: rgba(31,95,224,0.28);
}

/* ── Article template (was repeated in every guide) ── */
/* ── organic page: instrument + reading layers ── */
.seo-main [hidden] { display: none !important; }
.seo-main { max-width: 1100px; margin: 0 auto; padding: 22px 24px 96px; position: relative; z-index: 1; }
.seo-main .eyebrow { font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.seo-main h1 { font-size: clamp(1.7rem, 3.6vw, 2.45rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.12; margin: 6px 0 10px; text-wrap: balance; }
.seo-main h2 { font-size: 1.3rem; font-weight: 700; margin: 0; text-wrap: balance; }
.seo-main h3 { font-size: .95rem; font-weight: 700; margin: 0; }
.seo-main p { margin: .45em 0; }
.lede { color: var(--text-mid); max-width: 62ch; font-size: 1.02rem; }
.head { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; margin-bottom: 18px; }
.stat { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--muted); text-align: right; line-height: 1.6; }
.stat b { color: var(--text); font-weight: 600; }
.panel { display: grid; grid-template-columns: 1.25fr .9fr; border: 1px solid var(--border-hi); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.desc { padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.g { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: center; }
.g .l { font-size: .8rem; color: var(--text-mid); font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-hi); background: transparent; color: var(--text); font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; line-height: 1.3; }
.chip:hover { border-color: var(--gold-text); }
.chip[aria-pressed="true"] { background: var(--text); color: var(--navy); border-color: var(--text); }
.read { background: var(--surface2); border-left: 1px solid var(--border); padding: 18px 20px; display: grid; align-content: start; gap: 12px; }
.gauge { display: grid; grid-template-columns: 116px 1fr; gap: 14px; align-items: center; }
.gauge svg { width: 116px; height: 116px; }
.gauge .arc { fill: none; stroke-width: 11; stroke-linecap: round; }
.gauge .track { stroke: var(--border-hi); }
.gauge .val { stroke: var(--green-text); transition: stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.num { font-family: "JetBrains Mono", monospace; font-size: 2.2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.num small { font-size: .78rem; color: var(--muted); font-family: "Plus Jakarta Sans", sans-serif; font-weight: 500; display: block; margin-top: 3px; }
.band { display: inline-block; padding: 3px 9px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.band.ok { background: rgba(34,197,94,.14); color: var(--green-text); } .band.mid { background: var(--tint-gold); color: var(--gold-text); } .band.bad { background: rgba(244,89,91,.14); color: var(--red-text); }
.vt { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.02rem; line-height: 1.3; }
.fixes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fixes li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; font-size: .86rem; align-items: start; color: var(--text-mid); }
.fixes li i { font-style: normal; font-family: "JetBrains Mono", monospace; color: var(--red-text); font-weight: 600; }
.fixes li.ok i { color: var(--green-text); }
.est { font-size: .75rem; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sec { margin-top: 44px; }
.sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sec-h span { font-size: .82rem; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tile { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.tile svg { width: 28px; height: 28px; color: var(--gold-text); }
.tile p { font-size: .8rem; color: var(--text-mid); margin: 0; }
.tile .f { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--red-text); margin-top: 4px; }
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stp { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; background: var(--surface); }
.stp .k { font-family: "JetBrains Mono", monospace; font-size: .75rem; color: var(--gold-text); letter-spacing: .1em; text-transform: uppercase; }
.stp h3 { margin: 6px 0 4px; }
.stp p { color: var(--text-mid); font-size: .88rem; margin: 0; }
.stp svg { display: block; margin: 10px 0 2px; width: 100%; height: 56px; color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.card { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; background: var(--surface); }
.card p { color: var(--text-mid); font-size: .86rem; margin: .3em 0 0; }
.card .fix { margin-top: 8px; font-size: .82rem; color: var(--green-text); font-weight: 600; }
.card code, .tile code, .read code { font-family: "JetBrains Mono", monospace; font-size: .85em; }
.tw { overflow-x: auto; }
table.cmp { border-collapse: collapse; width: 100%; font-size: .88rem; }
.cmp th, .cmp td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp th { font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cmp td:first-child { font-weight: 600; white-space: nowrap; }
.cmp td.n { color: var(--red-text); font-weight: 600; } .cmp td.y { color: var(--green-text); font-weight: 600; }
.myth { display: grid; grid-template-columns: auto 1fr; gap: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 16px; align-items: start; background: var(--surface); }
.myth .x { font-family: "JetBrains Mono", monospace; font-size: 1.3rem; color: var(--red-text); font-weight: 600; line-height: 1; }
.myth p { margin: .2em 0 0; color: var(--text-mid); font-size: .9rem; }
.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.qa details { border-bottom: 1px solid var(--border); padding: 10px 0; }
.qa summary { cursor: pointer; font-weight: 600; font-family: "Sora", sans-serif; font-size: .9rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: "JetBrains Mono", monospace; color: var(--gold-text); }
.qa details[open] summary::after { content: "–"; }
.qa p { color: var(--text-mid); font-size: .86rem; }
.trust { font-size: .78rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 36px; max-width: 72ch; }
.rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rel a { display: block; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; background: var(--surface); }
.rel a:hover { border-color: var(--gold-text); }
.rel b { display: block; font-family: "Sora", sans-serif; font-size: .92rem; }
.rel span { font-size: .8rem; color: var(--muted); }
button:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
@media (max-width: 820px) { .panel { grid-template-columns: 1fr; } .read { border-left: 0; border-top: 1px solid var(--border); } .g { grid-template-columns: 1fr; gap: 6px; } .head { grid-template-columns: 1fr; } .stat { text-align: left; } .tiles { grid-template-columns: 1fr 1fr; } .qa { grid-template-columns: 1fr; } .flow, .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiles, .flow, .cards { grid-template-columns: 1fr; } }
/* Sections under the instrument lay out only when scrolled near. */
.seo-main > .sec, .site-footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* ── One width for every guide page ──
   The header and footer use the site container (1180px, 22px gutters). Articles were 1100px
   and the hub 780px, so nothing lined up with the logo. Breadcrumb, article and hub now share
   the container; running text keeps a reading width inside it. */
.breadcrumb, .seo-main, .hub-main { width: min(calc(100% - 44px), var(--container)); max-width: none; margin-inline: auto; }
.breadcrumb { padding: 18px 0 0; }
.seo-main { padding: 14px 0 96px; }
.seo-main .sec > p { max-width: 72ch; }
/* The pill padding of the site-wide .eyebrow, without the pill, pushed the label 15px right of the headline. */
.seo-main .eyebrow { padding: 0; }
/* Date and read time under the headline (the hub's FAQ promises each guide shows its date). */
.seo-main .art-meta { font-family: "JetBrains Mono", monospace; font-size: .75rem; letter-spacing: .02em; color: var(--muted); margin: 0 0 10px; }

/* Hub: categories two-up on laptops. */
.hub-main { padding: 20px 0 100px; }
.hub-featured-excerpt { max-width: 72ch; }
.hub-featured .btn { align-self: flex-start; }
@media (min-width: 900px) {
  .hub-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .hub-main > * { grid-column: 1 / -1; }
  .hub-main > .hub-category { grid-column: auto; }
  /* Until the held-back guides are out there may be a single category: give it the full row. */
  .hub-main:not(:has(.hub-category ~ .hub-category)) > .hub-category { grid-column: 1 / -1; }
}

/* Phone: a grid track grows to fit a button that will not wrap, so panels were 5-21px wider
   than the screen and their right edge was cut off. */
@media (max-width: 820px) { .panel, .g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .cta-row .btn { white-space: normal; text-align: center; } }

/* Light mode contrast (WCAG AA 4.5:1 on the light page). Muted text was 4.0-4.2:1 and the
   hub's cyan label and badge under 2:1. --text-dim is the homepage's light value. */
[data-theme="light"] { --muted: rgba(10,16,38,0.66); --text-dim: #5A6485; --cyan: #0E7490; --sky: #0E7490; }