/* Interview Field Manual — matches cdsmith.dev (Poppins, brand green, dark header from /css/site.css).
   Layout: sticky question index on the left, one reading column on the right. */
:root{
  color-scheme:light;
  --bg-color:#ffffff; --card:#f7f8f7; --hl-color:#60d937; --hl-text:#0f6b00; --hl-soft:#60d93722;
  --text-color:#111111; --body-text:#1f1f1f; --secondary-text-color:#555555; --grey:#d9dcd9; --grey-2:#c4c8c4;
  --note:#8a5300; --note-soft:#fbf1e1; --bad:#b23a2e; --bad-soft:#f8e3e0; --good:#0f6b00; --good-soft:#e3f5dc;
  --jr:#2f8f17; --md:#b06a10; --sr:#6a3f8f;
  --code-bg:#101010; --code-ink:#e8e8e8;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background-color:var(--bg-color)}
body{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16.5px;color:var(--text-color);line-height:1.7}
::selection{background-color:var(--hl-color);color:#000}
a{color:var(--hl-text)}
:focus-visible{outline:3px solid var(--hl-color);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
code{font-family:var(--mono);font-size:.86em;background:var(--card);border:1px solid var(--grey);padding:.05em .35em;border-radius:5px}

.app{display:grid;grid-template-columns:290px minmax(0,1fr);max-width:var(--page-max,1440px);margin:0 auto;padding-left:var(--gutter,16px)}
.rail{position:sticky;top:var(--site-header-h);height:calc(100vh - var(--site-header-h));overflow-y:auto;border-right:1px solid var(--grey);padding:22px 16px 40px}
.rail-title{font-weight:700;font-size:17px;line-height:1.3;text-decoration:none;color:var(--text-color);display:block;margin-bottom:12px}
.rail-title span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hl-text);font-weight:600}
.rail-links{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.rail-links a{font-size:14px;font-weight:600;text-decoration:none;color:var(--hl-text)}
.rail-links a:hover{text-decoration:underline;text-underline-offset:3px}
.rank{margin-top:18px}
.rank-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--secondary-text-color);padding:0 6px 6px;border-bottom:1px solid var(--grey)}
.rank-h .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:1px}
.rank-h i{font-style:normal;font-family:var(--mono);letter-spacing:0;font-weight:400}
.mlist{list-style:none;margin-top:6px}
.mlist a{display:grid;grid-template-columns:24px 1fr 14px;gap:6px;align-items:start;padding:6px;border-radius:8px;text-decoration:none;color:var(--text-color);font-size:14px;line-height:1.35}
.mlist a:hover{background:var(--card)}
.mlist a[aria-current="page"]{background:var(--hl-soft)}
.mlist .num{font-family:var(--mono);font-size:12px;color:var(--secondary-text-color);padding-top:1px}
.mlist .tick{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--grey-2);margin-top:3px}
.mlist .tick.done{background:var(--hl-color);border-color:var(--hl-color)}
.rail-kind{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--note);font-weight:600}
.menu-btn{display:none}
.scrim{display:none}

main{min-width:0;padding:32px var(--gutter,16px) 96px}
.col{max-width:860px;margin:0 auto}
.crumbs{margin-bottom:14px}
.eyebrow{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary-text-color);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tier-tag{font-weight:600;padding:1px 10px;border-radius:20px;color:#fff}
.t-junior{background:var(--jr)}.t-mid{background:var(--md)}.t-senior{background:var(--sr)}
h1{font-size:clamp(30px,5vw,44px);line-height:1.2;font-weight:700;text-wrap:balance;border-bottom:4px solid var(--hl-color);padding-bottom:12px;margin:8px 0 16px}
h1.q{font-size:clamp(24px,3.4vw,32px);border-bottom:0;padding-bottom:0}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--secondary-text-color);margin-bottom:22px}
.kind{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:1px 10px;border-radius:20px;border:1.5px solid currentColor}
.k-code{color:var(--hl-text)}.k-platform{color:var(--note)}
.btn{display:inline-flex;align-items:center;gap:8px;color:#000;background-color:var(--hl-color);border:none;font-size:15px;font-weight:600;padding:10px 20px;border-radius:20px;cursor:pointer;text-decoration:none}
.btn:hover{background-color:#017100;color:#f9f9f9}
.btn.outline{background:transparent;border:2px solid var(--hl-color);padding:8px 18px;color:var(--text-color)}
.btn.outline:hover{background:#017100;border-color:#017100;color:#f9f9f9}
.done-btn{border:2px solid var(--hl-color);background:transparent;border-radius:20px;padding:4px 14px;font-weight:600;font-size:13.5px;cursor:pointer}
.done-btn[aria-pressed="true"]{background:var(--hl-color);color:#000}
.steps{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 30px}
.steps a{font-size:13.5px;font-weight:500;text-decoration:none;color:var(--secondary-text-color);border:1px solid var(--grey-2);border-radius:20px;padding:2px 12px}
.steps a:hover{color:var(--hl-text);border-color:var(--hl-color)}

section.block{margin-bottom:44px;scroll-margin-top:calc(var(--site-header-h) + 16px)}
section.block>h2{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px;margin-bottom:14px}
section.block>h2::after{content:"";flex:1;height:1px;background:var(--grey)}
section.block>h2 small{font-size:12px;font-weight:400;color:var(--secondary-text-color);letter-spacing:.04em}
.probe{background:var(--hl-soft);border-radius:12px;padding:18px 20px;color:var(--body-text)}
.lesson{border-top:1px solid var(--grey);padding-top:18px;margin-top:22px}
.lesson:first-child{border-top:0;padding-top:0;margin-top:0}
.lesson h3{font-size:18px;font-weight:600;margin-bottom:8px}
.lesson p,.lesson ul,.lesson ol{margin-bottom:12px;color:var(--body-text)}
.lesson ul,.lesson ol{padding-left:22px}
.lesson li{margin-bottom:6px}
.code{position:relative;margin:12px 0 16px;border-radius:10px;background:var(--code-bg);overflow:hidden}
.code pre{padding:16px 18px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--code-ink);tab-size:4}
.code .lang{position:absolute;top:6px;right:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a}
.lens{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;background:var(--card);border:1px solid var(--grey);border-radius:12px;padding:18px 20px}
.lens h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary-text-color);margin-bottom:6px;font-weight:600}
.lens p{font-size:15.5px;color:var(--body-text)}
.lens-say{grid-column:1/-1;border-top:1px solid var(--grey);padding-top:14px}
.lens-say p{font-style:italic}
.trench{background:var(--note-soft);border-radius:12px;padding:18px 20px}
.trench .who{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--note);font-weight:600;margin-bottom:6px}
.trench p{font-style:italic;color:var(--body-text)}
.flags{list-style:none;display:grid;gap:8px}
.flags li{display:grid;grid-template-columns:20px 1fr;gap:8px;color:var(--body-text)}
.flags li::before{content:"";width:11px;height:11px;margin-top:8px;border-radius:2px;background:var(--bad);transform:rotate(45deg)}
.qz{background:var(--card);border:1px solid var(--grey);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.qz .qq{font-weight:600;margin-bottom:12px;line-height:1.45}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;text-align:left;border:1.5px solid var(--grey);background:#fff;border-radius:10px;padding:9px 12px;cursor:pointer;font-size:15.5px;line-height:1.45}
.opt:hover:not([disabled]){border-color:var(--hl-color)}
.opt .k{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--secondary-text-color);border:1px solid var(--grey);border-radius:5px;text-align:center}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.explain{margin-top:12px;font-size:15px;padding-left:12px;border-left:3px solid var(--grey);color:var(--body-text)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.score{font-size:14px;color:var(--secondary-text-color)}
.model{position:relative;background:var(--card);border:1px solid var(--grey);border-radius:12px;padding:20px 22px}
.model.locked .model-body{filter:blur(6px);user-select:none;pointer-events:none;max-height:170px;overflow:hidden}
.model .unlock{position:absolute;inset:0;display:grid;place-items:center}
.model:not(.locked) .unlock{display:none}
.model-body p{margin-bottom:12px;color:var(--body-text)}
.rubric{margin-top:6px;font-size:15px;color:var(--body-text)}
.rubric summary{cursor:pointer;font-weight:600}
.rubric ul{margin:8px 0 0 20px}
.fu{list-style:none;display:grid;gap:8px}
.fu li{background:var(--card);border:1px solid var(--grey);border-radius:10px;padding:10px 14px;color:var(--body-text)}
.pager{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--grey);padding-top:20px}
.pager a{text-decoration:none;color:var(--text-color);max-width:48%;display:flex;flex-direction:column}
.pager small{font-size:12px;color:var(--secondary-text-color);letter-spacing:.06em;text-transform:uppercase}
.pager b{font-weight:600;line-height:1.35}
.pager a:hover b{color:var(--hl-text)}
.pager .next{text-align:right;margin-left:auto}

.lead{font-size:19px;color:var(--body-text);margin-bottom:12px}
.muted{color:var(--secondary-text-color)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
a.card{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--card);border:1px solid var(--grey);border-radius:12px;color:inherit;text-decoration:none;transition:border-color .2s ease-in,transform .2s ease-in,box-shadow .2s ease-in}
a.card:hover{border-color:var(--hl-color);transform:translateY(-2px);box-shadow:0 6px 18px #0000000f}
.card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.card .type{color:var(--hl-text);font-weight:600}
.card h3{font-size:19px;font-weight:600;line-height:1.3}
.card p{font-size:14.5px;color:var(--secondary-text-color)}
.card .go{margin-top:auto;padding-top:4px;font-size:14.5px;font-weight:600;color:var(--hl-text)}
.bar{height:6px;border-radius:3px;background:#e8ebe8;overflow:hidden}
.bar i{display:block;height:100%}
.how{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px;list-style:none}
.how b{display:block;font-weight:600}
.how li{font-size:15px;color:var(--secondary-text-color)}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.kinds p{margin-top:6px;font-size:15px;color:var(--body-text)}
.home-sec{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.home-sec>h2{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px}
.home-sec>h2::after{content:"";flex:1;height:1px;background:var(--grey)}
.note{font-size:13.5px;color:var(--secondary-text-color);border-left:3px solid var(--grey);padding-left:12px}
footer.foot{margin-top:56px;padding-top:16px;border-top:1px solid var(--grey);font-size:14px;color:var(--secondary-text-color)}
.fade{animation:fade .2s ease}
@keyframes fade{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade{animation:none}a.card{transition:none}a.card:hover{transform:none}}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);padding-left:0}
  .rail{position:fixed;top:0;left:0;bottom:0;height:auto;width:min(86vw,320px);z-index:60;background:#fff;transform:translateX(-102%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .rail.open{transform:none}
  .menu-btn{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--grey-2);background:#fff;border-radius:20px;padding:5px 14px;font-size:14px;font-weight:600;cursor:pointer;margin-bottom:14px}
  .scrim.on{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:55}
  .lens,.how,.kinds{grid-template-columns:minmax(0,1fr)}
  main{padding-top:20px}
}