/* Start the Bag: Career Guides. Built on style.css tokens.
   Made to be skimmed: bold section bands, big numbers, short bullets,
   and the detail tucked into expandable panels. Prints cleanly on A4 and Letter. */

/* dark panels stay dark in both themes */
:root { --gi: #131A35; --gp: #F3F5FB; }

/* ---------- guide hero ---------- */
.g-hero { background: var(--sun); color: var(--on-sun); border-bottom: 3px solid var(--ink); }
.g-hero .wrap { padding-block: clamp(32px, 6vw, 64px) clamp(28px, 4vw, 44px); display: grid; gap: 1rem; }
.g-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.4vw, 3.8rem); max-width: 20ch; color: var(--on-sun); }
.g-hero .lede { color: var(--on-sun); opacity: .85; max-width: 58ch; font-size: var(--step-1); line-height: 1.5; }
.g-badges { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.g-rank {
  display: inline-flex; align-items: center; gap: .4rem; background: var(--gi); color: var(--sun);
  font: 800 .9rem/1 var(--f-display); padding: .55rem .85rem; border-radius: 10px;
  transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--cobalt);
}
.g-hero .pill { border: 2px solid var(--ink); font-size: .8rem; }
.g-cat { font: 700 .8rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }
.g-checked { font: 600 .8rem/1.3 var(--f-mono); }
.g-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.g-actions .btn { border-width: 2px; box-shadow: 4px 4px 0 var(--ink); }
.g-actions .btn:hover { box-shadow: 6px 6px 0 var(--ink); }
.g-actions .btn.primary { box-shadow: 4px 4px 0 var(--ink); }

.g-share { position: relative; }
.g-hero { position: relative; z-index: 45; }
.g-share-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 55; min-width: 200px; display: grid; gap: .15rem; padding: .4rem;
  background: var(--surface); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 5px 5px 0 var(--ink); }
.g-share-menu a, .g-share-menu button { display: block; text-align: left; min-height: 44px; padding: .7rem .8rem; border-radius: 8px; border: 0; background: none;
  color: var(--ink); text-decoration: none; font: 700 .95rem/1.2 var(--f-body); cursor: pointer; }
.g-share-menu a:hover, .g-share-menu button:hover { background: var(--surface-2); }
.g-share-to { display: grid; gap: .35rem; padding: .5rem .5rem .7rem; border-bottom: 1.5px dashed var(--line); margin-bottom: .2rem; font: 700 .8rem/1.2 var(--f-body); color: var(--ink); }
.g-share-to input { font-size: 1rem; }
.g-share-menu { min-width: 260px; }
@media (max-width: 560px) {
  .g-share-menu { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-width: 0; max-height: 80vh; overflow-y: auto; z-index: 80; }
}

/* ---------- sticky jump bar ---------- */
.g-jump { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 40; background: var(--surface); border-bottom: 2px solid var(--ink); }
.g-jump .wrap { overflow-x: auto; scrollbar-width: none; }
.g-jump .wrap::-webkit-scrollbar { display: none; }
.g-jump ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; white-space: nowrap; }
.g-jump li { margin: 0; }
.g-jump a { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .35rem .8rem; border-bottom: 3px solid transparent; color: var(--ink); text-decoration: none; font: 700 .82rem/1 var(--f-body); }
.g-jump a:hover { border-bottom-color: var(--cobalt); background: var(--surface-2); }
.g-jump li + li a { box-shadow: inset 1px 0 0 var(--line); }
.g-jump a span { font-family: var(--f-mono); color: var(--cobalt); }

/* ---------- sections: alternating bands ---------- */
.g-sec { padding-block: clamp(36px, 6vw, 64px); scroll-margin-top: 120px; }
.g-sec.band-paper { background: var(--paper); }
.g-sec.band-white { background: var(--surface); border-block: 1px solid var(--line); }
.g-sec.band-ink { background: var(--gi); color: var(--gp); }
.g-sec.band-sun { background: var(--sun); color: var(--on-sun); }
.g-sec.band-sun .g-head .g-num { color: var(--on-sun); }
.g-sec.band-ink h2, .g-sec.band-ink h3 { color: var(--gp); }
.g-sec.band-ink p, .g-sec.band-ink li { color: color-mix(in srgb, var(--gp) 88%, transparent); }
.g-sec.band-ink a { color: var(--sun); }
.g-sec.band-sun p, .g-sec.band-sun li, .g-sec.band-sun h2, .g-sec.band-sun h3 { color: var(--on-sun); }
.g-sec.band-sun a { color: var(--on-sun); font-weight: 700; }
/* cards sitting on a band use the card's own colors */
.g-sec .g-age li, .g-sec .g-age a, .g-sec .g-card li, .g-sec .g-card p, .g-sec .g-route li { color: var(--ink); }
.g-sec .g-card a, .g-sec .g-age a { color: var(--cobalt); }
.g-sec .g-card .muted { color: var(--muted); }
.g-sec.band-sun a.btn, .g-sec.band-ink a.btn { color: var(--ink); }
.g-sec.band-sun a.btn.primary, .g-sec.band-ink a.btn.primary { color: var(--on-cobalt); }
.g-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.3rem; }
.g-ico {
  flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--cobalt); color: var(--on-cobalt); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.band-ink .g-ico { background: var(--sun); color: var(--on-sun); box-shadow: 4px 4px 0 var(--cobalt); border-color: var(--sun); }
.band-sun .g-ico { background: var(--gi); color: var(--sun); }
.g-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-head h2 { font-size: var(--step-3); }
.g-head .g-num { display: block; font: 700 .75rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt); margin-bottom: .3rem; }
.band-ink .g-head .g-num { color: var(--sun); }
.band-sun .g-head .g-num { color: var(--ink); }

/* ---------- 30-second summary ---------- */
.g-tldr { background: var(--gi); color: var(--gp); border-radius: 16px; padding: clamp(1.1rem, 3vw, 1.6rem); box-shadow: 6px 6px 0 var(--cobalt); }
.g-tldr h2 { color: var(--sun); font-size: var(--step-2); margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.g-tldr ul { list-style: none; padding: 0; display: grid; gap: .65rem; }
.g-tldr li { margin: 0; display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; font-size: 1.05rem; line-height: 1.45; }
.g-tldr a { color: var(--sun); }
.g-tldr li::before { content: "→"; color: var(--sun); font: 800 1.1rem/1.4 var(--f-display); }

/* ---------- big number tiles ---------- */
.g-stats { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.g-stat { background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 5px 5px 0 var(--ink); display: grid; gap: .3rem; align-content: start; }
.g-stat .k { font: 700 .72rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.g-stat .v { font: 800 clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem)/1.05 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.g-stat .s { font-size: .85rem; color: var(--muted); }
.g-stat .s a { color: var(--cobalt); }

/* ---------- cards with thick outlines ---------- */
.g-card { background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; padding: 1.1rem 1.2rem; box-shadow: 5px 5px 0 var(--ink); display: grid; gap: .6rem; align-content: start; }
.g-card h3 { font-size: var(--step-1); display: flex; gap: .5rem; align-items: center; color: var(--ink); }
.g-card p, .g-card li { color: var(--ink); }
.g-card .muted { color: var(--muted); }
.g-card a { color: var(--cobalt); }
.g-tag { display: inline-block; font: 700 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .5rem; border-radius: 6px; background: var(--cobalt-soft); color: var(--cobalt); }

/* ticks and warnings */
.g-ticks, .g-warns { list-style: none; padding: 0; display: grid; gap: .55rem; }
.g-ticks li, .g-warns li { margin: 0; display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.g-ticks li::before { content: "✓"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--good); color: var(--surface); font: 800 .8rem/1 var(--f-body); margin-top: .1rem; }
.g-warns li::before { content: "!"; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 6px; background: var(--bad); color: var(--surface); font: 800 .85rem/1 var(--f-display); margin-top: .1rem; }

/* ---------- route timeline ---------- */
.g-route { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: step; }
.g-route li { margin: 0; position: relative; background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; padding: 2.4rem 1rem 1rem; box-shadow: 5px 5px 0 var(--ink); }
.g-route li::before { counter-increment: step; content: counter(step); position: absolute; top: -1rem; left: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; background: var(--sun); border: 2.5px solid var(--ink); font: 800 1.1rem/1 var(--f-display); color: var(--on-sun); }
.g-route b { display: block; font-family: var(--f-display); font-size: 1.05rem; margin-bottom: .3rem; }
.g-route .t { font: 600 .75rem/1.2 var(--f-mono); color: var(--cobalt); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- age ladder ---------- */
.g-ages { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-age { background: var(--surface); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; overflow: hidden; box-shadow: 5px 5px 0 var(--ink); display: flex; flex-direction: column; }
.g-age > header { background: var(--cobalt); color: var(--on-cobalt); padding: .8rem 1rem; font: 800 1.4rem/1 var(--f-display); display: flex; justify-content: space-between; align-items: baseline; }
.g-age:nth-child(2) > header { background: var(--sun); color: var(--on-sun); }
.g-age:nth-child(3) > header { background: var(--gi); color: var(--sun); }
.g-age > header small { font: 700 .72rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.g-age .g-ticks, .g-age .g-warns { padding: 1rem; }
@media (max-width: 860px) { .g-ages { grid-template-columns: 1fr; } }

/* ---------- country tabs ---------- */
.g-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.g-tabs button { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--surface); color: var(--ink); font: 800 .95rem/1 var(--f-display); cursor: pointer; }
.g-tabs button[aria-selected="true"] { background: var(--gi); color: var(--sun); box-shadow: 3px 3px 0 var(--cobalt); }
.band-ink .g-tabs button { border-color: var(--paper); }
.band-ink .g-tabs button[aria-selected="true"] { background: var(--sun); color: var(--on-sun); box-shadow: 3px 3px 0 var(--cobalt); }
.g-panel[hidden] { display: none !important; }
.g-panel .g-flag { font: 800 .75rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }

/* pay rows */
.g-pay { display: grid; gap: .7rem; }
.g-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1.5px dashed var(--line); }
.g-pay-row:last-child { border-bottom: 0; }
.g-pay-row .job { font-weight: 700; }
.g-pay-row .amt { font: 800 1.25rem/1.1 var(--f-display); font-variant-numeric: tabular-nums; text-align: right; }
.g-pay-row .src { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }
.g-pay-row .src a { color: var(--cobalt); }
.g-none { font-weight: 700; color: var(--warn); }

/* sources */
.g-sources { display: grid; gap: .45rem; padding-left: 1.4rem; }
.g-sources li { margin: 0; overflow-wrap: anywhere; }
.g-sources .u { font: 400 .78rem/1.3 var(--f-mono); color: var(--muted); }

/* related */
.g-related { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.g-related a.g-card { text-decoration: none; transition: transform .15s; }
.g-related a.g-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }

/* reading progress */
.g-progress { position: fixed; left: 0; top: 0; height: 4px; width: 0; background: var(--cobalt); z-index: 70; }

/* PDF-only cover (hidden on screen) */
.g-cover { display: none; }

/* buttons inside cards keep their own colors */
.g-card a.btn, .g-sec .g-card a.btn { color: var(--ink); }
.g-card a.btn.primary, .g-sec .g-card a.btn.primary { color: var(--on-cobalt); }

/* footnote-style citations: [n] jumps to the numbered source, which lights up */
a.cite { font: 700 .78em/1 var(--f-mono); text-decoration: none; vertical-align: super; padding: 0 .1em; }
a.cite:hover { text-decoration: underline; }
.g-sources li { scroll-margin-top: 130px; border-radius: 8px; padding: .2rem .4rem; transition: background .3s; }
.g-sources li:target, .g-sources li.is-target { background: var(--sun); color: var(--on-sun); }
.g-sources li:target a, .g-sources li:target .u, .g-sources li.is-target a, .g-sources li.is-target .u { color: var(--on-sun); }
.g-back { position: fixed; z-index: 60; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 4px 4px 0 var(--ink); }
@media print { .g-back { display: none !important; } }

/* ---------- hub ---------- */
.hub-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 2.2rem) / 3))), 1fr)); }
.hub-card { position: relative; }
.hub-card .g-rank { position: absolute; top: -.9rem; left: 1rem; font-size: .8rem; padding: .4rem .65rem; }
.hub-card h3 { margin-top: .9rem; }
.hub-card.coming { border-style: dashed; box-shadow: none; }
.hub-card .row .btn { border-width: 2px; }

@media (prefers-reduced-motion: reduce) { .g-related a.g-card:hover { transform: none; } }

/* ---------- print and PDF ---------- */
@media print {
  @page { margin: 14mm 12mm; }
  :root { --paper: #fff; --surface: #fff; }
  body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  body::before, .site-header, .site-footer, .skip-link, .g-jump, .g-actions, .g-progress, .g-tabs, .g-back,
  #site-header, #site-footer, #related, .g-sec .btn, .g-sec p:has(> .btn:only-child) { display: none !important; }

  /* every major section starts on a fresh page; the short opener sections share */
  .g-sec { break-before: page; padding-block: 0 4mm; background: #fff !important; color: #000 !important; }
  #quick, #work, #why, #pay { break-before: auto; }
  #pay { margin-top: 8mm; }
  .g-sec p.small { break-before: avoid; }
  p, li { orphans: 3; widows: 3; }
  #why { margin-top: 8mm; }
  #quick { padding-top: 6mm; }
  .g-sec h2, .g-sec h3, .g-sec p, .g-sec li, .g-sec .g-num { color: #000 !important; }

  /* headings stay with what follows them */
  .g-head { display: block; break-after: avoid; page-break-after: avoid; margin-bottom: 4mm; }
  .g-head .g-ico { display: none; }
  h2, h3, .g-flag, .g-tldr h2 { break-after: avoid; page-break-after: avoid; }

  /* cards never split: lay grids out as simple stacks or two-up rows of whole cards */
  .grid, .g-related, .g-ages, .split, .g-pay { display: block !important; }
  /* pairs line up top and bottom and reach the same edges as full-width cards */
  .g-stats, .g-route { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4mm; align-items: stretch; }
  .g-card, .g-stat, .g-route li, .g-age, .g-tldr, .g-pay-row, .callout, .g-panel, details.fold, .g-ticks li, .g-warns li, .g-sources li {
    break-inside: avoid; page-break-inside: avoid; box-shadow: none !important;
  }
  .g-card, .g-stat, .g-age, .g-route li { margin-bottom: 4mm; }
  .g-stats .g-stat, .g-route li { margin: 0; }
  .g-route li:last-child:nth-child(odd), .g-stats .g-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .g-route { padding-top: 5mm; row-gap: 9mm; }
  .g-route li { padding-top: 9mm; }
  .split > * + * { margin-top: 4mm; }

  .g-panel[hidden] { display: block !important; }
  .g-panel { margin-bottom: 5mm; padding-top: 2mm; border-top: 1px solid #999; }
  .g-flag { display: block; font-size: 10pt; margin-bottom: 2mm; }

  .g-hero { background: #fff; border-bottom: 2px solid #000; }
  .g-hero .wrap { padding-block: 0 4mm; }
  .g-hero .g-badges, .g-hero .g-checked { display: none; }
  .g-tldr { background: #fff; color: #000; border: 2px solid #000; }
  .g-tldr h2, .g-tldr li::before, .g-tldr a { color: #000 !important; }
  .g-age > header { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { color: #000 !important; text-decoration: underline; }
  a.cite { text-decoration: none; }
  details.fold .fold-body { display: grid !important; }

  .g-cover { display: flex; flex-direction: column; justify-content: space-between; height: 255mm; break-after: page; border: 3px solid #000; border-radius: 6mm; padding: 14mm; background: #FFC93C; color: #131A35; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .g-cover .logo { width: 70mm; }
  .g-cover h1 { font-size: 30pt; line-height: 1.05; margin: 0; color: #131A35; }
  .g-cover .meta { font: 700 11pt/1.4 var(--f-mono); color: #131A35; }
  .g-cover .rank { display: inline-block; background: #131A35; color: #FFC93C; padding: 3mm 5mm; border-radius: 3mm; font: 800 13pt/1 var(--f-display); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}