/* The night before (/interview/<role>/night-before.html, courses/build-interview.js): the role's folder card, then
   index cards like a lesson's "remember" cards, a fold on each number. Cards follow the theme; the opening card keeps
   its tint and dark ink in both. Phones: the cards stack. Print: no chrome, two columns, one or two pages. */
body[data-page="interview-night"] { background-image: radial-gradient(rgba(28, 27, 25, .10) 1px, transparent 1.2px); background-size: 22px 22px; }
:root[data-theme="dark"] body[data-page="interview-night"] { background-image: radial-gradient(rgba(238, 235, 228, .06) 1px, transparent 1.2px); }
.nb { --ic-bg: #FFFEFB; --ic-line: rgba(29, 28, 26, .09); --ic-edge: rgba(29, 28, 26, .07); max-width: 1060px; }
:root[data-theme="dark"] .nb { --ic-bg: #252420; --ic-line: rgba(238, 235, 228, .08); --ic-edge: rgba(238, 235, 228, .07); }

/* The opening: the role's folder card */
.nb-open { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 52px; align-items: center; padding: 44px 56px 46px; background: var(--tint); border-radius: 30px; color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
.nb-open-art .st-folder { display: block; width: 200px; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 18px 20px rgba(60, 48, 30, .22)); }
.nb-open-art .st-folder-face > svg { display: block; width: 100%; height: 100%; }
.nb-k { margin: 0 0 12px; font: 500 15px/1.4 var(--sans); color: rgba(29, 28, 26, .62); }
.nb-h1 { margin: 0; font: 360 clamp(44px, 5.2vw, 72px)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.025em; }
.nb-h1 i { font-style: italic; }
.nb-sub { margin: 16px 0 0; font-size: 19px; line-height: 1.45; color: rgba(29, 28, 26, .72); text-wrap: pretty; }
.nb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 26px 0 0; }
.nb-print.st-btn.dark { height: 48px; padding: 0 22px; border-radius: 14px; background: #1D1C1A; border-color: #1D1C1A; color: #FCFBF8; font-size: 15px; }
.nb-back { color: #1D1C1A; font-size: 15px; border-bottom: 1px solid rgba(29, 28, 26, .28); }
.nb-back:hover { border-color: #1D1C1A; }

/* The cards: two columns, each card a little askew, straight on hover */
.nb-cards { columns: 2; column-gap: 28px; margin-top: 34px; }
.nb-card { break-inside: avoid; display: block; margin: 0 0 28px; padding: 18px 28px 20px; background: var(--ic-bg); border-radius: 4px; box-shadow: 0 0 0 1px var(--ic-edge), var(--lift-2); transition: transform .26s var(--ease); }
.nb-card:nth-child(4n + 1) { transform: rotate(-.7deg); }
.nb-card:nth-child(4n + 2) { transform: rotate(.5deg); }
.nb-card:nth-child(4n + 3) { transform: rotate(.4deg); }
.nb-card:nth-child(4n + 4) { transform: rotate(-.5deg); }
.nb-card:hover { transform: none; }
.nb-t { display: flex; gap: 12px; align-items: baseline; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 2px solid var(--orange); font: 400 24px/1.3 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; color: var(--ink); }
.nb-n { font: 700 16px/1 var(--sans); color: var(--orange-ink); font-variant-numeric: lining-nums tabular-nums; }
.nb-card ol, .nb-card ul { list-style: none; margin: 0; padding: 0; }
.nb-card li { font-size: 15.5px; line-height: 1.55; }

/* The day: the rounds in order, one line each */
.nb-day { counter-reset: nb; }
.nb-day li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 6px; padding: 9px 0; border-top: 1px solid var(--ic-line); }
.nb-day li:first-child { border-top: 0; padding-top: 2px; }
.nb-day li::before { counter-increment: nb; content: counter(nb); grid-row: span 2; font: 400 19px/1.3 var(--serif); font-variant-numeric: lining-nums; color: var(--ink-3); }
.nb-day b { font-weight: 600; color: var(--ink); }
.nb-day span { color: var(--ink-2); }

/* How to answer: each method's stages and minutes */
.nb-m + .nb-m { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ic-line); }
.nb-mh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-size: 15.5px; font-weight: 600; }
.nb-mh a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.nb-mh a:hover { border-color: var(--ink-3); }
.nb-mh span { flex: none; font: 500 13px var(--mono); color: var(--ink-3); }
.nb-st { counter-reset: st; }
.nb-st li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.nb-st li span:first-child::before { counter-increment: st; content: counter(st) "  "; white-space: pre; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nb-st li span:last-child { flex: none; font-variant-numeric: tabular-nums; color: var(--ink); }

/* Numbers to have ready: the prompt, the answer under a fold */
.nb-hint { margin: -4px 0 8px; font-size: 14.5px; color: var(--ink-3); }
.nb-nums li { border-top: 1px solid var(--ic-line); }
.nb-nums li:first-child { border-top: 0; }
.nb-nums summary { position: relative; display: block; padding: 11px 30px 11px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.nb-nums summary::-webkit-details-marker { display: none; }
.nb-nums summary::after { content: ""; position: absolute; right: 4px; top: 17px; width: 8px; height: 8px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s var(--ease); }
.nb-nums details[open] summary::after { transform: rotate(225deg); top: 21px; }
.nb-nums summary:hover::after { border-color: var(--ink); }
.nb-nums summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.nb-a { margin: -2px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--card-2); font: 500 15px/1.55 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.nb-from { margin-left: 4px; font-weight: 400; font-size: 13.5px; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); }
.nb-from:hover { color: var(--ink-2); }
.nb-a .iv-lock { margin-left: 4px; color: var(--ink-3); } .nb-a .iv-lock svg { width: 12px; height: 12px; }

/* Traps and the day itself */
.nb-traps li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--ic-line); }
.nb-traps li:first-child { border-top: 0; padding-top: 2px; }
.nb-traps q { font: 400 17px/1.4 var(--serif); font-variation-settings: "opsz" 48; color: var(--ink); quotes: "\201C" "\201D"; }
.nb-traps span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.nb-list li { position: relative; padding: 7px 0 7px 22px; color: var(--ink); }
.nb-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 11px; border: 1.5px solid var(--ink-3); border-radius: 3px; }

@media (max-width: 900px) {
  .nb-open { grid-template-columns: 150px minmax(0, 1fr); gap: 0 32px; padding: 32px 32px 34px; }
  .nb-open-art .st-folder { width: 140px; }
}
@media (max-width: 760px) {
  .nb-cards { columns: 1; margin-top: 26px; }
  .nb-card { margin-bottom: 18px; padding: 16px 18px 16px; transform: none !important; }
}
@media (max-width: 640px) {
  .nb-open { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 26px; border-radius: 22px; }
  .nb-open-art { display: flex; justify-content: flex-start; margin-bottom: 16px; }
  .nb-open-art .st-folder { width: 96px; }
  .nb-h1 { font-size: 44px; }
  .nb-sub { font-size: 17px; }
  .nb-acts .nb-print { flex: 1 1 100%; }
  .nb-t { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .nb-card { transition: none; } }

@media print {
  @page { margin: 12mm; }
  body[data-page="interview-night"] { background: none !important; }
  .st-rail, .st-top, .st-mback, .nb-acts { display: none !important; }
  .st-shell, .st-main { display: block !important; padding: 0 !important; margin: 0 !important; }
  .nb { --ic-bg: #fff; --ic-line: rgba(29, 28, 26, .14); --ink: #1D1C1A; --ink-2: #4A4843; --ink-3: #7A766F; --card-2: #fff; --orange-ink: #B4380B; padding: 0; color: #1D1C1A; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .nb-open { display: block; padding: 0 0 3mm; background: none !important; border-radius: 0; box-shadow: none; border-bottom: 1.5pt solid #1D1C1A; }
  .nb-open-art { display: none; }
  .nb-k { margin: 0; font-size: 10pt; }
  .nb-h1 { font-size: 28pt; }
  .nb-sub { margin-top: 1mm; font-size: 11pt; }
  .nb-cards { columns: 2; column-gap: 7mm; margin-top: 5mm; }
  .nb-card { margin: 0 0 5mm; padding: 3mm 4mm; border: .6pt solid #9A968E; border-radius: 1.5mm; box-shadow: none; transform: none !important; }
  .nb-t { margin-bottom: 2mm; padding-bottom: 1.2mm; border-bottom-width: 1.2pt; font-size: 14pt; }
  .nb-n { font-size: 10pt; }
  .nb-card li, .nb-nums summary, .nb-st li { font-size: 9.8pt; line-height: 1.38; }
  .nb-day li, .nb-traps li { padding: 1.3mm 0; }
  .nb-day li::before { font-size: 10.5pt; }
  .nb-nums summary { padding: 1.3mm 0; }
  .nb-nums summary::after, .nb-hint, .nb-from, .nb-a .iv-lock { display: none; }
  .nb-a { margin: 0 0 1.5mm; padding: 0 0 0 3mm; background: none; border-left: 1.2pt solid #FF5A1F; border-radius: 0; font-size: 9.8pt; color: #4A4843; }
  .nb-traps q { font-size: 11pt; } .nb-traps span { font-size: 9.3pt; }
  .nb-m + .nb-m { margin-top: 2.5mm; padding-top: 2mm; }
  .nb-mh { margin-bottom: .8mm; font-size: 10.5pt; } .nb-mh a { border: 0; }
  .nb-st li { padding: .4mm 0; }
  .nb-list li { padding: 1mm 0 1mm 5mm; } .nb-list li::before { top: 2.2mm; width: 2.4mm; height: 2.4mm; }
}