/* The Job Hunting Toolkit: native site design; tokens from site.css */

/* hero */
.tk-hero { padding-block: 72px 40px; }
.toolkit .kicker { font-family: var(--display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cobalt); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.toolkit .kicker span { color: var(--mute); }
.tk-hero h1 { font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 700; line-height: 0.98; margin-top: 16px; font-variation-settings: "opsz" 96; max-width: 12ch; }
.tk-hero .lede { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--ink); margin-top: 22px; max-width: 34ch; }
.tk-hero .note { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); margin-top: 14px; max-width: 62ch; }
.tk-hero .alt { font-family: var(--display); font-size: 0.92rem; margin-top: 16px; }
.tk-hero .alt a { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule); }
.tk-hero .alt a:hover { color: var(--cobalt); }
.map { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.map a { display: block; height: 100%; padding: 14px 14px 16px; border-top: 2px solid var(--ink); font-family: var(--display); font-weight: 600; font-size: 0.98rem; line-height: 1.25; color: var(--ink); text-decoration: none; transition: border-color .15s, color .15s; }
.map a span { display: block; font-size: 0.8rem; color: var(--mute); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.map a:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* part headers */
.part-head { display: flex; align-items: baseline; gap: 18px; }
.part-head .pn { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--cobalt); font-variant-numeric: tabular-nums; }
.part-head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; line-height: 1.02; }

/* diagnosis funnel */
.tk-diag { padding-block: 48px 24px; border-top: 1px solid var(--rule); scroll-margin-top: 80px; }
.diag-note { font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); margin-top: 12px; max-width: 64ch; }
.diag-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--cobalt); }
.funnel { list-style: none; margin: 28px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.funnel li { display: grid; grid-template-columns: 90px minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.3fr); gap: 24px; align-items: start; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.funnel .bar { padding-top: 7px; }
.funnel .bar span { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--cobalt); opacity: 0.85; }
.funnel .sym { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); line-height: 1.3; }
.funnel .cause { color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.funnel .go { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; font-family: var(--display); font-size: 0.86rem; font-weight: 600; color: var(--ink); text-decoration: none; padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; transition: border-color .15s, color .15s; }
.chip:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* body with contents rail */
.tk-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; padding-block: 24px 64px; }
.rail { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; font-family: var(--display); padding-top: 40px; }
.rail > p { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail .rp { display: flex; gap: 10px; padding: 7px 0; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); text-decoration: none; border-top: 1px solid var(--rule); }
.rail .rp span { color: var(--mute); font-variant-numeric: tabular-nums; }
.rail .rp.on, .rail .rp:hover { color: var(--cobalt); }
.rail ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 30px; }
.rail ul a { display: block; padding: 3px 0; font-size: 0.84rem; color: var(--mute); text-decoration: none; line-height: 1.3; }
.rail ul a:hover { color: var(--cobalt); }

/* parts and sections */
.toolkit section.part { padding-top: 40px; scroll-margin-top: 80px; }
.toolkit section.part + section.part { margin-top: 40px; border-top: 1px solid var(--rule); }
.toolkit .sec { margin-top: 36px; scroll-margin-top: 90px; }
.toolkit .sec h3 { font-size: 1.7rem; font-weight: 700; line-height: 1.12; color: var(--ink); margin-bottom: 14px; }
.toolkit .sec > p, .toolkit .cell > p, .toolkit .fb > p { font-size: 1.06rem; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }
.toolkit .sec p + p, .toolkit .cell p + p, .toolkit .fb p + p { margin-top: 0.7em; }
.toolkit p.aside { font-size: 0.98rem; color: var(--mute); }
.toolkit strong { color: var(--ink); font-weight: 600; }
.toolkit .tk-main a:not(.chip):not(.rp) { color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cobalt) 55%, transparent); }
.toolkit .tk-main a:hover { color: var(--cobalt); }
.toolkit h4 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 26px 0 8px; line-height: 1.3; }
.toolkit h4.tools::before { content: "Links"; display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); border: 1px solid color-mix(in srgb, var(--cobalt) 45%, transparent); border-radius: 4px; padding: 1px 6px; margin-right: 10px; vertical-align: 2px; }
.toolkit .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 44px; }
.toolkit .cell > :first-child { margin-top: 12px; }

/* context notes */
.toolkit .context { margin: 4px 0 8px; padding-left: 20px; border-left: 3px solid var(--cobalt); max-width: 68ch; }
.toolkit .context .ck { font-family: var(--display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--cobalt); }
.toolkit .context p:not(.ck) { font-size: 1.16rem; line-height: 1.55; color: var(--ink); margin-top: 6px; }

/* plain lists */
.toolkit ul.list, .toolkit ol.list { margin: 6px 0 10px; padding-left: 20px; }
.toolkit ul.list li, .toolkit ol.list li { font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); }
.toolkit .list li + li { margin-top: 0.45em; }
.toolkit ul.list li::marker, .toolkit ol.list li::marker { color: var(--cobalt); }

/* link lists */
.toolkit ul.links { list-style: none; margin: 6px 0 12px; padding: 0; }
.toolkit ul.links li { padding: 9px 0; border-top: 1px solid var(--rule); }
.toolkit ul.links li:last-child { border-bottom: 1px solid var(--rule); }
.toolkit ul.links a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border: 0 !important; }
.toolkit ul.links .t { font-family: var(--display); font-weight: 600; font-size: 0.98rem; color: var(--ink); }
.toolkit ul.links a:hover .t { color: var(--cobalt); }
.toolkit ul.links .h { font-family: var(--display); font-size: 0.78rem; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.toolkit ul.links .d { display: block; font-size: 0.94rem; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

/* the ten points */
.toolkit ol.points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.toolkit ol.points li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 16px 0; border-top: 1px solid var(--rule); }
.toolkit ol.points .n { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--cobalt); font-variant-numeric: tabular-nums; line-height: 1.2; }
.toolkit ol.points p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.toolkit ol.points p strong { font-family: var(--display); font-weight: 700; font-size: 1.04rem; }

/* formula, weak and strong */
.toolkit blockquote.formula { margin: 12px 0 18px; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--ink); max-width: 30ch; }
.toolkit blockquote.formula strong { font-weight: inherit; }
.toolkit .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.toolkit .cmp { padding: 14px 16px; border-radius: 10px; border: 1px solid var(--rule); }
.toolkit .cmp span { font-family: var(--display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.toolkit .cmp.strong { border-color: color-mix(in srgb, var(--cobalt) 60%, transparent); }
.toolkit .cmp.strong span { color: var(--cobalt); }
.toolkit .cmp p { margin-top: 6px; font-size: 1.04rem; line-height: 1.5; color: var(--ink); }

/* folds: ledger rows like the Work section */
.toolkit .folds { margin: 8px 0 14px; border-top: 1px solid var(--rule); }
.toolkit details.fold { border-bottom: 1px solid var(--rule); }
.toolkit details.fold > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; align-items: baseline; padding: 13px 2px; font-family: var(--display); }
.toolkit details.fold > summary::-webkit-details-marker { display: none; }
.toolkit details.fold .ft { font-weight: 600; font-size: 1rem; color: var(--ink); }
.toolkit details.fold .fc { font-size: 0.82rem; color: var(--mute); white-space: nowrap; }
.toolkit details.fold .fi { position: relative; width: 14px; height: 14px; align-self: center; }
.toolkit details.fold .fi::before, .toolkit details.fold .fi::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--cobalt); transition: transform .2s; }
.toolkit details.fold .fi::after { transform: rotate(90deg); }
.toolkit details.fold[open] .fi::after { transform: rotate(0deg); }
.toolkit details.fold > summary:hover .ft { color: var(--cobalt); }
.toolkit details.fold .fb { padding: 0 2px 16px; }
.toolkit details.fold .fb > :first-child { margin-top: 0; }

/* prompts and code */
.toolkit ul.prompts { list-style: none; margin: 4px 0 8px; padding: 0; }
.toolkit ul.prompts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--rule); }
.toolkit ul.prompts li:first-child { border-top: 0; }
.toolkit ul.prompts strong { font-family: var(--display); font-size: 0.95rem; }
.toolkit ul.prompts p { font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); margin-top: 2px; }
.toolkit .code { position: relative; margin: 10px 0 12px; }
.toolkit .code pre { margin: 0; padding: 16px 18px; border-radius: 10px; background: color-mix(in srgb, var(--rule) 40%, transparent); overflow-x: auto; font-size: 0.8rem; line-height: 1.5; }
.toolkit .code code { font-size: inherit; line-height: inherit; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.toolkit .code pre { padding-top: 40px; }
.toolkit .code .copy { position: absolute; top: 10px; right: 10px; }
.toolkit .copy { font-family: var(--display); font-size: 0.8rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.toolkit .copy:hover { border-color: var(--cobalt); color: var(--cobalt); }

/* closing call to action */
.tk-cta { padding-block: 64px; border-top: 1px solid var(--rule); }
.tk-cta h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.05; max-width: 20ch; }
.tk-cta p { font-size: 1.08rem; color: var(--ink-2); margin: 14px 0 22px; max-width: 56ch; }

@media (max-width: 1100px) {
  .tk-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail { display: none; }
  .map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tk-hero { padding-block: 32px 24px; }
  .map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .funnel li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .funnel .bar { padding-top: 0; }
  .toolkit .grid, .toolkit ol.points, .toolkit .compare { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toolkit .compare { gap: 10px; }
  .toolkit ul.links .h { display: none; }
}