/* ==========================================================
   Casen — handmade notebook aesthetic
   paper + pencil + red-ink + typewriter monospace
   ========================================================== */

:root{
  --paper:       #f3ecd8;
  --paper-soft:  #efe6cd;
  --paper-dark:  #d8cfb4;
  --ink:         #1d1a16;
  --ink-soft:    #3a342b;
  --pencil:      #5a564c;
  --red:         #b52d2d;
  --red-soft:    #d96363;
  --teal:        #2d6f71;
  --mustard:     #c88a20;
  --olive:       #6a6a2a;
  --rule-blue:   #7c9cbf;
  --tab-1:       #e7c7a1;
  --tab-2:       #c7d9b8;
  --tab-3:       #ead29c;
  --tab-4:       #b8c5d8;
  --tab-5:       #e3b4b0;
  --tab-6:       #c2c2a3;
  --tab-7:       #dcc2d2;
  --tab-8:       #e8bda8;
  --shadow:      0 2px 0 rgba(29,26,22,0.55);
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Spectral', Georgia, serif;
  font-size: 16.5px;
  line-height: 1.55;
  /* graph paper */
  background-image:
    linear-gradient(rgba(124,156,191,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,156,191,0.14) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1.5px);
  background-size: 22px 22px, 22px 22px, 5px 5px;
  background-position: 0 0, 0 0, 0 0;
}

::selection{ background: var(--red); color: var(--paper); }

/* ============== header / masthead ============== */
.masthead{
  position: relative;
  padding: 54px 42px 24px;
  border-bottom: 2px solid var(--ink);
  background:
    repeating-linear-gradient(
      transparent 0 30px,
      rgba(29,26,22,0.04) 30px 31px
    );
}
.brand{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.brand-title{
  font-family:'Architects Daughter', 'Caveat', cursive;
  font-size: 58px;
  margin: 0;
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 rgba(181,45,45,0.22);
}
.brand-dot{ color: var(--red); }
.brand-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  margin:0;
  letter-spacing: 1px;
  text-transform: lowercase;
}
.stamp{
  position:absolute;
  right: 56px; top: 40px;
  width: 138px; height: 138px;
  display: grid; place-items:center;
  transform: rotate(-11deg);
  opacity: 0.75;
  pointer-events:none;
}
.stamp-ring{
  width: 100%; height: 100%;
  border: 3px double var(--red);
  border-radius: 50%;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--red);
  text-align:center;
  line-height: 1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: radial-gradient(transparent 40%, rgba(181,45,45,0.07) 70%);
}
.stamp-ring span:nth-child(2){ font-size: 14px; font-weight: 700; letter-spacing: 2px; }

/* ============== file-folder style tabs ============== */
.file-tabs{
  display:flex;
  gap: 2px;
  padding: 18px 28px 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
  flex-wrap: wrap;
}
/* jobs / news / behaviorals live on this page but are reached through the
 * top nav, not the notebook tab strip — hide the tabs so they don't imply
 * the section is part of the 9-chapter study flow. */
body[data-active-sheet="jobs"] .file-tabs,
body[data-active-sheet="news"] .file-tabs,
body[data-active-sheet="behaviorals"] .file-tabs {
  display: none;
}
.tab{
  all: unset;
  cursor: pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px 14px;
  background: var(--tab-1);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-bottom: none;
  border-radius: 14px 16px 0 0 / 24px 22px 0 0;
  position: relative;
  margin-right: -6px;
  margin-bottom: -2px;
  transform: translateY(4px);
  transition: transform 0.1s;
}
.file-tabs .tab:nth-child(1){ background: var(--tab-1); }
.file-tabs .tab:nth-child(2){ background: var(--tab-2); }
.file-tabs .tab:nth-child(3){ background: var(--tab-3); }
.file-tabs .tab:nth-child(4){ background: var(--tab-4); }
.file-tabs .tab:nth-child(5){ background: var(--tab-5); }
.file-tabs .tab:nth-child(6){ background: var(--tab-6); }
.file-tabs .tab:nth-child(7){ background: var(--tab-7); }
.file-tabs .tab:nth-child(8){ background: var(--tab-8); }
.tab:hover{ transform: translateY(1px); }
.tab--active{
  transform: translateY(-2px);
  z-index: 2;
  box-shadow: 0 -3px 0 var(--red);
}

/* ============== sheets ============== */
.sheet{
  display:none;
  padding: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
.sheet--active{ display:block; }

.sheet-margin{
  position:relative;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 36px 44px 44px 68px;
  border-radius: 3px;
}
.sheet-margin::before{
  content:"";
  position:absolute;
  left: 40px; top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
  opacity: 0.55;
}
.sheet-margin::after{
  content:"";
  position:absolute;
  left: 20px; top: 22px;
  bottom: 22px;
  width: 14px;
  background-image: radial-gradient(circle, var(--ink) 2px, transparent 2.5px);
  background-size: 14px 32px;
  background-repeat: repeat-y;
  opacity: 0.22;
}

h2.pencil{
  font-family:'Caveat', cursive;
  font-size: 40px;
  margin: 0 0 4px;
  color: var(--ink);
  transform: rotate(-0.6deg);
  display:inline-block;
}
h2.pencil::after{
  content:"";
  display:block;
  width: 64%;
  height: 6px;
  background: var(--red);
  opacity: 0.6;
  margin-top: -4px;
  transform: skewX(-8deg);
  border-radius: 3px;
}
.kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  margin: 6px 0 28px;
  max-width: 720px;
}

/* ============== module grid (learn) ============== */
.module-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.mod-card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 16px 18px;
  cursor: pointer;
  position: relative;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mod-card:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.mod-card.mod--done{ background: var(--tab-2); }
.mod-card.mod--done::after{
  content: "✓ done";
  position: absolute;
  right: 10px; top: 8px;
  font-family:'Caveat', cursive;
  color: var(--red);
  font-size: 18px;
  transform: rotate(-6deg);
}
.mod-num{ font-family:'IBM Plex Mono', monospace; font-size: 11px; color: var(--pencil); }
.mod-title{ font-family:'Caveat', cursive; font-size: 22px; line-height: 1.1; margin: 4px 0; }
.mod-est{ font-family:'IBM Plex Mono', monospace; font-size: 11px; color: var(--pencil); }

.learn-stage{
  margin-top: 20px;
  border-top: 1.5px dashed var(--ink);
  padding-top: 18px;
}
.learn-stage.hidden{ display:none; }
.learn-step{ margin-bottom: 20px; }
.learn-step h3{
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--teal);
}
.learn-step p{ margin: 4px 0; }
.learn-step pre{
  background: var(--paper);
  border: 1px dashed var(--ink);
  padding: 10px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: pre;
}
.check-box{
  background: var(--tab-3);
  border: 1.5px solid var(--ink);
  padding: 14px 16px;
  margin-top: 14px;
}
.check-box h4{
  font-family:'Caveat', cursive;
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--red);
}
.check-opts{ display: flex; flex-direction: column; gap: 4px; }
.check-opts label{ cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size: 14px; }
.check-opts input{ margin-right: 8px; }
.check-feedback{ margin-top: 10px; font-family:'Caveat', cursive; font-size: 20px; }
.check-feedback.ok{ color: var(--olive); }
.check-feedback.bad{ color: var(--red); }

/* ============== flashcards ============== */
.deck-bar{
  display:flex; flex-wrap:wrap; gap: 8px;
  margin-bottom: 18px;
  align-items: center;
}
.deck-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  border: 1.5px solid var(--ink);
  padding: 4px 10px;
  cursor: pointer;
  background: var(--paper);
  user-select:none;
}
.deck-chip:has(input:checked){ background: var(--tab-3); box-shadow: inset 0 -3px 0 var(--red); }
.deck-chip input{ display:none; }

.card-stage{
  display: grid; place-items:center;
  perspective: 1400px;
  margin: 10px 0 18px;
}
.card{
  width: 100%;
  max-width: 640px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.2,.7,.3,1.2);
  cursor: pointer;
}
.card.flipped{ transform: rotateY(180deg); }
.card-face{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow: 6px 6px 0 var(--ink);
  border-radius: 2px;
}
.card-front{
  background:
    repeating-linear-gradient(
      transparent 0 28px,
      rgba(124,156,191,0.18) 28px 29px
    ),
    var(--paper);
}
.card-back{
  background:
    repeating-linear-gradient(
      transparent 0 28px,
      rgba(181,45,45,0.12) 28px 29px
    ),
    var(--paper-soft);
  transform: rotateY(180deg);
}
.card-corner{
  position: absolute; top: 10px; left: 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: 2px;
  color: var(--pencil); text-transform: uppercase;
}
.card-body{
  font-family:'Spectral', serif;
  font-size: 22px;
  max-width: 90%;
  line-height: 1.4;
}
.card-front .card-body{
  font-family:'Architects Daughter', cursive;
  font-size: 30px;
  color: var(--ink);
}
.card-controls{
  display:flex; gap: 10px; align-items:center; flex-wrap:wrap;
  justify-content:center;
}
.counter{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  padding: 0 8px;
}

.mini-btn{
  all:unset;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  border: 1.5px solid var(--ink);
  padding: 6px 14px;
  background: var(--paper);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
}
.mini-btn:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.mini-btn:active{ transform: translate(1px,1px); box-shadow: 0 0 0 var(--ink); }
.mini-btn--ok{ background: var(--tab-2); }
.mini-btn--bad{ background: var(--tab-5); }

/* ============== quiz ============== */
.quiz-picker{
  display:flex; gap: 6px; flex-wrap:wrap;
  margin-bottom: 20px;
}
.tabline{
  all:unset;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.tabline.active{ background: var(--ink); color: var(--paper); }

.q-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}
.q-head{
  display:flex; gap: 8px; align-items:baseline;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--pencil);
  margin-bottom: 6px;
}
.q-tag{
  background: var(--tab-4);
  border: 1px solid var(--ink);
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.q-prompt{
  font-family:'Spectral', serif;
  font-size: 16px;
  margin: 4px 0 10px;
  white-space: pre-wrap;
}
.q-opts{ display: flex; flex-direction: column; gap: 4px; }
.q-opts label{ cursor:pointer; padding: 3px 6px; border-radius: 3px; font-family:'IBM Plex Mono', monospace; font-size: 13.5px; }
.q-opts label:hover{ background: rgba(0,0,0,0.04); }
.q-feedback{
  margin-top: 10px; display:none;
  font-family:'Caveat', cursive;
  font-size: 20px;
}
.q-feedback.show{ display:block; }
.q-feedback.ok{ color: var(--olive); }
.q-feedback.bad{ color: var(--red); }
.q-explain{
  font-family:'Spectral', serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--tab-3);
  border-left: 3px solid var(--ink);
}

.score-slip{
  margin-top: 24px;
  background: var(--tab-3);
  border: 2px solid var(--ink);
  padding: 16px 20px;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 var(--ink);
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
}
.score-slip.hidden{ display:none; }

/* ============== practice ============== */
.prob{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 18px 22px;
  margin-bottom: 18px;
  box-shadow: 3px 3px 0 var(--ink);
}
.prob-head{
  display:flex; gap:10px; align-items:baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.prob-num{
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  color: var(--red);
}
.prob-src{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--pencil);
  background: var(--tab-6);
  border: 1px solid var(--ink);
  padding: 1px 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prob-body{ font-family:'Spectral', serif; font-size: 15.5px; }
.prob-body pre{
  background: var(--paper-soft);
  border: 1px dashed var(--ink);
  padding: 10px 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: pre;
}
.prob-tools{ margin-top: 10px; }
.prob-sol{
  display: none;
  margin-top: 12px;
  background: var(--paper-soft);
  border-top: 2px dashed var(--red);
  padding: 12px 14px;
  font-family:'Spectral', serif;
  font-size: 15px;
}
.prob-sol.show{ display: block; }
.prob-sol h4{ font-family:'Caveat', cursive; color: var(--red); font-size: 22px; margin: 0 0 6px; }

/* ============== glossary ============== */
.search{
  font-family:'IBM Plex Mono', monospace;
  font-size: 14px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  width: 100%;
  max-width: 420px;
  margin-bottom: 16px;
}
.alpha-jump{
  display: flex; flex-wrap: wrap; gap: 4px;
  font-family:'IBM Plex Mono', monospace;
  margin-bottom: 12px;
}
.alpha-jump span{
  padding: 2px 6px;
  border: 1px solid var(--ink);
  cursor: pointer;
  font-size: 11px;
}
.alpha-jump span:hover{ background: var(--tab-3); }
.alpha-jump span.disabled{ color: var(--paper-dark); pointer-events:none; }

.glossary{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 4px;
}
@media (max-width: 720px){ .glossary{ grid-template-columns: 1fr; } }
.glossary dt{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--red);
  margin-top: 10px;
}
.glossary dd{
  margin: 0;
  font-family:'Spectral', serif;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ============== formulas ============== */
.formula-card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: 2px 2px 0 var(--ink);
}
.formula-card h4{
  font-family:'Architects Daughter', cursive;
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--teal);
}
.formula-card .eq{
  font-family:'IBM Plex Mono', monospace;
  font-size: 14.5px;
  background: var(--paper-soft);
  padding: 6px 10px;
  border-left: 3px solid var(--red);
  white-space: pre-wrap;
}
.formula-card p{
  margin: 6px 0 0;
  font-size: 13px;
  font-family:'Spectral', serif;
  color: var(--ink-soft);
}
.formula-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px){ .formula-grid{ grid-template-columns: 1fr; } }

/* ============== cheat sheet ============== */
#cheat-printable{
  display: none;
}
.cs-page{
  background: #fff;
  color: #000;
  width: 10.5in;
  height: 7.8in;
  padding: 0.4in;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7.5pt;
  line-height: 1.25;
}
.cs-col{
  column-count: 3;
  column-gap: 0.25in;
  column-rule: 1px solid #999;
}
.cs-h{
  font-family:'Architects Daughter', cursive;
  font-size: 11pt;
  color: #b52d2d;
  margin: 6pt 0 2pt;
  border-bottom: 1px solid #000;
  break-inside: avoid;
}
.cs-sub{
  font-weight: 700;
  margin-top: 3pt;
  break-inside: avoid;
}
.cs-page pre{
  white-space: pre-wrap;
  font-size: 7pt;
  margin: 2pt 0;
}
.cs-title{
  font-family:'Architects Daughter', cursive;
  font-size: 14pt;
  color: #b52d2d;
  margin: 0 0 4pt;
}
.cs-sub2{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 7.5pt;
  color: #555;
  margin-bottom: 6pt;
}

/* print mode = only cheat sheet visible */
@media print{
  @page { size: landscape; margin: 0; }
  body{ background: #fff !important; background-image: none !important; }
  .masthead, .file-tabs, .footer, .sheet,
  .cw-fab, .cw-panel, [class^="cw-"]{ display: none !important; }
  #cheat-printable{ display: block !important; }
  .cs-page{ page-break-after: always; }
  .cs-page:last-child{ page-break-after: auto; }
}

/* ============== footer ============== */
.footer{
  max-width: 1100px;
  margin: 10px auto 40px;
  padding: 8px 32px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--pencil);
  text-align: center;
}

/* margin-doodles on the red rail */
.sheet-margin .doodle{
  position:absolute;
  left: 14px;
  font-family:'Caveat', cursive;
  color: var(--red);
  font-size: 15px;
  transform: rotate(-90deg);
  transform-origin: left top;
}

/* ============== Grammar-block helper (reused across sheets) ============== */
.gr-block{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 20px;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--ink);
}
.gr-title{
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  color: var(--teal);
  margin: 0 0 2px;
}
.gr-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--pencil);
  margin-bottom: 10px;
}
.gr-block table{
  width: 100%;
  border-collapse: collapse;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
}
.gr-block th{
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10.5px;
  color: var(--pencil);
}
.gr-block td{
  padding: 6px 8px;
  border-bottom: 1px dashed var(--paper-dark);
}
.gr-block tr:last-child td{ border-bottom: none; }
.gr-block td.hl{ color: var(--red); font-weight: 600; }
.gr-block td.ex{
  color: var(--ink-soft);
  font-family:'Spectral', serif;
  font-style: italic;
  font-size: 13.5px;
}

.vocab-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.vocab-card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 4px solid var(--teal);
  padding: 10px 14px;
  box-shadow: 2px 2px 0 var(--ink);
}
.vocab-card-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.vocab-de{
  font-family:'Architects Daughter', cursive;
  font-size: 18px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.vocab-en{
  font-family:'Spectral', serif;
  font-size: 14px;
  color: var(--ink-soft);
}
.vocab-note{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--pencil);
  margin-top: 4px;
  font-style: italic;
}

.k8-section{ margin-bottom: 24px; }
.k8-section h3{
  font-family:'Caveat', cursive;
  font-size: 26px;
  color: var(--red);
  margin: 0 0 10px;
  transform: rotate(-0.4deg);
}
.k8-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.k8-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-left: 4px solid var(--mustard);
  padding: 10px 14px;
  box-shadow: 2px 2px 0 var(--ink);
}
.k8-item.purple{ border-left-color: var(--red); }
.k8-de{
  font-family:'Architects Daughter', cursive;
  font-size: 17px;
}
.k8-en{
  font-family:'Spectral', serif;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.k8-note{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--pencil);
  margin-top: 4px;
  font-style: italic;
}

/* learn mode - MC/write stages */
.learn-mc-opts, .learn-opts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}
@media (max-width: 600px){
  .learn-mc-opts, .learn-opts{ grid-template-columns: 1fr; }
}
.learn-opt{
  all: unset;
  cursor: pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
}
.learn-opt:hover{ transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.learn-opt.correct{ background: var(--tab-2); color: var(--olive); }
.learn-opt.wrong{ background: var(--tab-5); color: var(--red); }
.learn-opt.reveal{ background: var(--tab-2); opacity: 0.55; }

.learn-input{
  width: 100%;
  max-width: 420px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 15px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  margin-top: 10px;
  box-shadow: inset 0 -2px 0 var(--red);
}

.learn-prog{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 16px;
}
.learn-prog-bar{
  flex: 1;
  height: 10px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
}
.learn-prog-fill{
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0 6px,
    var(--red-soft) 6px 12px
  );
  transition: width 0.4s;
}
.learn-prog-txt{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  min-width: 100px;
  text-align: right;
}

.done-screen{
  text-align: center;
  padding: 40px 20px;
}
.done-icon{
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border: 3px double var(--red);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family:'Architects Daughter', cursive;
  font-size: 36px;
  color: var(--red);
  transform: rotate(-6deg);
}
.done-title{
  font-family:'Caveat', cursive;
  font-size: 34px;
  color: var(--ink);
}
.done-sub{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  margin: 6px 0 16px;
}

/* stack card contents vertically so badge/note don't sit inline */
.card-face{
  flex-direction: column;
  gap: 12px;
}

/* fc badge (chapter tag on flashcard front) */
.fc-badge{
  display: inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  padding: 2px 10px;
  background: var(--tab-4);
  border: 1px solid var(--ink);
  color: var(--ink);
  text-transform: uppercase;
}
.fc-note{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  font-style: italic;
  max-width: 80%;
  text-align: center;
}

/* ============== Match-mode grid ============== */

/* match mode grid */
.match-bar{
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin-bottom: 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
}
.match-timer{
  background: var(--tab-5);
  border: 1.5px solid var(--ink);
  padding: 2px 10px;
  font-weight: 600;
  color: var(--ink);
}
.match-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.match-tile{
  all: unset;
  cursor: pointer;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 14px;
  min-height: 90px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family:'Spectral', serif;
  font-size: 14px;
  line-height: 1.3;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.match-tile.is-term{
  font-family:'Architects Daughter', cursive;
  font-size: 17px;
  background: var(--tab-4);
}
.match-tile:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.match-tile.selected{
  background: var(--tab-3);
  box-shadow: inset 0 -4px 0 var(--red), 3px 3px 0 var(--ink);
}
.match-tile.correct{
  background: var(--tab-2);
  opacity: 0.45;
  pointer-events: none;
  box-shadow: 2px 2px 0 var(--ink);
}
.match-tile.wrong{
  animation: shake 0.35s;
  background: var(--tab-5);
}
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-4px); }
  75%{ transform: translateX(4px); }
}

/* category badge */
.cat-badge{
  display: inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  padding: 2px 10px;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  background: var(--tab-4);
}
.cat--voting    { background: var(--tab-1); }
.cat--ethnicity { background: var(--tab-2); }
.cat--parties   { background: var(--tab-4); }

/* essay accordion */
.essay-list{ display: flex; flex-direction: column; gap: 12px; }
.essay-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.essay-head{
  all: unset;
  cursor: pointer;
  display: flex; gap: 12px; align-items: baseline;
  padding: 14px 18px;
  width: 100%;
}
.essay-num{
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  color: var(--red);
  flex-shrink: 0;
}
.essay-q{
  font-family:'Spectral', serif;
  font-size: 16px;
  flex: 1;
}
.essay-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
}
.essay-body{
  display: none;
  padding: 0 18px 16px 44px;
  border-top: 1px dashed var(--ink);
}
.essay-body.open{ display: block; }
.essay-hint{
  font-family:'Spectral', serif;
  font-size: 14.5px;
  color: var(--ink-soft);
  white-space: pre-wrap;
  padding: 12px 14px;
  margin-top: 12px;
  background: var(--tab-3);
  border-left: 3px solid var(--red);
}

/* match-win slip */
.match-win{
  margin-top: 18px;
  background: var(--tab-2);
  border: 2px solid var(--ink);
  padding: 16px 20px;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 var(--ink);
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  display: none;
}
.match-win.show{ display: block; }

/* ============== Darden / Consulting additions ============== */

/* ---------- Flashcards: session mode ---------- */
.fc-prog{
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
}
.fc-prog-bar{
  flex: 1;
  height: 10px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.fc-prog-fill{
  height: 100%;
  background: var(--olive);
  transition: width 0.3s ease-out;
}
.fc-prog-txt{ color: var(--ink); font-weight: 600; white-space: nowrap; }
.fc-prog-queue{ color: var(--pencil); white-space: nowrap; }

.fc-hint-toggle{
  all: unset;
  display: inline-block;
  margin-top: 14px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1px;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--pencil);
  text-transform: uppercase;
}
.fc-hint-toggle:hover{ background: var(--tab-3); color: var(--ink); }

.fc-mastery-badge{
  position: absolute;
  top: 10px; right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.2px;
  color: var(--olive);
  text-transform: uppercase;
  background: var(--tab-2);
  border: 1px solid var(--olive);
  padding: 1px 6px;
}

/* session-complete screen */
.fc-done{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 10px;
  text-align: center;
}
.fc-done-icon{
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border: 2px solid var(--olive);
  border-radius: 50%;
  color: var(--olive);
  font-family: 'Architects Daughter', cursive;
  font-size: 38px;
  background: var(--tab-2);
  box-shadow: 3px 3px 0 var(--ink);
}
.fc-done-title{
  font-family: 'Caveat', cursive;
  font-size: 38px;
  color: var(--ink);
  line-height: 1;
}
.fc-done-stats{
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  justify-content: center;
}
.fc-done-score{
  font-family: 'Architects Daughter', cursive;
  font-size: 44px;
  color: var(--ink);
  line-height: 1;
}
.fc-done-score span{
  color: var(--pencil);
  font-size: 24px;
  margin-left: 2px;
}
.fc-done-pct{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--pencil);
}
.fc-done-missed{
  width: 100%;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--red);
}
.fc-done-missed--clean{ color: var(--olive); }
.fc-done-actions{
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}

/* category badges — paper palette cycles per group */
.cat--fundamentals        { background: var(--tab-1); }
.cat--finance-and-math    { background: var(--tab-3); }
.cat--consumer-retail     { background: var(--tab-5); }
.cat--energy              { background: var(--tab-4); }
.cat--transportation      { background: var(--tab-2); }
.cat--manufacturing-ag    { background: var(--tab-6); }
.cat--financial-services  { background: var(--tab-7); }
.cat--information-technology{ background: var(--tab-4); }
.cat--media-and-entertainment{ background: var(--tab-5); }
.cat--healthcare          { background: var(--tab-2); }
.cat--telecommunications  { background: var(--tab-3); }

/* ---------- Frameworks accordion ---------- */
.fw-list{ display: flex; flex-direction: column; gap: 12px; }
.fw-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.fw-head{
  all: unset;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
}
.fw-num{
  font-family:'Architects Daughter', cursive;
  font-size: 22px; color: var(--red);
  flex-shrink: 0;
}
.fw-name{
  font-family:'Caveat', cursive;
  font-size: 26px;
  flex: 1 1 160px;
  min-width: 0;
  line-height: 1.1;
}
.fw-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.fw-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--pencil);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  transition: background 0.1s, color 0.1s;
}
.fw-head:hover .fw-toggle{
  background: var(--tab-3);
  color: var(--ink);
}
.fw-item:has(.fw-body.open) .fw-toggle{
  background: var(--tab-2);
  color: var(--ink);
}
.fw-body{
  display: none;
  padding: 4px 24px 18px 48px;
  border-top: 1px dashed var(--ink);
}
.fw-body.open{ display: block; }
.fw-buckets{
  font-family:'Spectral', serif;
  font-size: 15px;
  padding-left: 22px;
  margin: 12px 0 10px;
}
.fw-buckets li{ padding: 3px 0; line-height: 1.4; }
.fw-note{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--pencil);
  background: var(--tab-3);
  border-left: 3px solid var(--red);
  padding: 8px 12px;
  margin-top: 10px;
}

/* ---------- Cases: progress bar + filters + bulk actions ---------- */
.case-toolbar{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.case-progress{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-bar-track{
  height: 12px;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.cp-bar-fill{
  height: 100%;
  background: var(--olive);
  transition: width 0.4s ease-out;
}
.cp-bar-stats{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.cp-bar-stats strong{
  color: var(--ink);
  font-size: 14px;
}
.cp-sep{ color: var(--paper-dark); }
.cp-reset{
  all: unset;
  margin-left: auto;
  cursor: pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  background: var(--paper-soft);
  color: var(--pencil);
  text-transform: uppercase;
}
.cp-reset:hover{ background: var(--tab-5); color: var(--ink); }

.case-filters{
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper-soft);
  border: 1px dashed var(--ink);
  padding: 10px 14px;
}
.case-filter-group{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.case-filter-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--pencil);
  text-transform: uppercase;
  min-width: 58px;
}
.case-filter-chip{
  all: unset;
  cursor: pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 3px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
}
.case-filter-chip:hover{ background: var(--tab-3); }
.case-filter-chip--on{
  background: var(--tab-2);
  box-shadow: inset 0 -3px 0 var(--red);
  font-weight: 600;
}

.case-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.case-empty{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  padding: 24px;
  text-align: center;
  background: var(--paper-soft);
  border: 1.5px dashed var(--ink);
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

/* ---------- Cases accordion ---------- */
.case-list{ display: flex; flex-direction: column; gap: 14px; }
.case-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.case-head{
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: flex; gap: 16px; align-items: center;
  padding: 14px 20px;
  width: 100%;
  text-align: left;
}
.case-num{
  font-family:'Architects Daughter', cursive;
  font-size: 28px;
  color: var(--red);
  flex-shrink: 0;
  line-height: 1;
  width: 42px;
  text-align: center;
  position: relative;
}
.case-num-txt{
  display: inline-block;
}
.case-num-check{
  display: none;
  position: absolute;
  top: -4px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--olive);
  color: var(--paper);
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.case-item--completed .case-num-check{ display: block; }
.case-item--completed .case-num-txt{ opacity: 0.55; }
.case-item--opened:not(.case-item--completed){
  box-shadow: 2px 2px 0 var(--pencil);
}

.case-star{
  all: unset;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--paper-dark);
  padding: 4px 6px;
  flex-shrink: 0;
  transition: transform 0.1s, color 0.1s;
}
.case-star:hover{ transform: scale(1.15); color: var(--mustard); }
.case-star--on{ color: var(--mustard); text-shadow: 0 0 0 var(--mustard); }
.case-title{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.case-name{
  font-family:'Caveat', cursive;
  font-size: 26px;
  line-height: 1.05;
  color: var(--ink);
}
.case-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--pencil);
  text-transform: uppercase;
  line-height: 1;
}
.case-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  margin-left: auto;
}
.case-item:hover .case-toggle{ background: var(--tab-3); }
.case-body{
  display: none;
  padding: 6px 22px 22px 22px;
  border-top: 1px dashed var(--ink);
}
.case-body.open{ display: block; }
.case-section{ margin-top: 14px; }
.case-section-h{
  all: unset;
  display: block;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.case-section-body{
  font-family:'Spectral', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.case-section-body ul{
  padding-left: 22px;
  margin: 4px 0;
}
.case-section-body li{ padding: 2px 0; }
.case-section-body em{ color: var(--pencil); }

/* ---------- Case section banner (Darden vs Practice Pack divider) ---------- */
.case-section-banner{
  position: relative;
  margin: 8px 0 16px;
  padding: 18px 22px 16px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.case-section-banner--darden{
  background: var(--tab-3);
}
.case-section-banner--practice{
  background: var(--tab-4);
  margin-top: 36px;
}
.case-section-banner--practice::before{
  content: "supplemental";
  position: absolute;
  top: -12px; left: 22px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
}
.case-section-banner--tuck{
  background: var(--tab-2);
  margin-top: 36px;
}
.case-section-banner--tuck::before{
  content: "dartmouth";
  position: absolute;
  top: -12px; left: 22px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--ink);
  text-transform: uppercase;
}
.case-section-banner--mbb{
  background: var(--tab-5);
  margin-top: 36px;
}
.case-section-banner--mbb::before{
  content: "mckinsey · bcg · bain";
  position: absolute;
  top: -12px; left: 22px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2px 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
}
.case-section-banner-main{
  font-family:'Caveat', cursive;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
}
.case-section-banner-sub{
  margin-top: 6px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  letter-spacing: 0.8px;
}

/* ---------- Source badge on each case head ---------- */
.case-source-badge{
  flex-shrink: 0;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  color: var(--pencil);
  background: var(--paper-soft);
}
.case-source-badge--darden{ background: var(--tab-3); color: var(--ink); }
.case-source-badge--practice{ background: var(--tab-4); color: var(--ink); border-color: var(--red); }
.case-source-badge--tuck{ background: var(--tab-2); color: var(--ink); border-color: var(--ink); }
.case-source-badge--mbb{ background: var(--tab-5); color: var(--ink); border-color: var(--red); }
.case-item--practice{
  border-left: 4px solid var(--red);
}
.case-item--tuck{
  border-left: 4px solid var(--tab-2);
}
.case-item--mbb{
  border-left: 4px solid var(--tab-5);
}

/* ---------- Exhibits (tables, bars, lines) ---------- */
.case-exhibit{
  margin: 10px 0 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
  color: var(--ink);
}
.case-exhibit-title{
  font-family:'Caveat', cursive;
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}
.case-exhibit-note{
  margin-top: 10px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--pencil);
  font-style: italic;
  line-height: 1.45;
}
.case-exhibit-empty{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--pencil);
  padding: 12px 0;
}

/* -- exhibit: table -- */
.case-exhibit--table table{
  width: 100%;
  border-collapse: collapse;
  font-family:'Spectral', serif;
  font-size: 14px;
}
.case-exhibit--table th,
.case-exhibit--table td{
  padding: 7px 10px;
  border: 1px solid var(--ink);
  text-align: left;
  vertical-align: top;
}
.case-exhibit--table thead th{
  background: var(--paper-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--pencil);
  text-transform: uppercase;
  font-weight: 600;
}
.case-exhibit--table tbody tr:nth-child(odd){ background: rgba(216, 207, 180, 0.18); }
.case-exhibit--table tbody tr:last-child td{ font-weight: 600; }

/* -- exhibit: bar chart -- */
.case-bars{
  display: flex; flex-direction: column; gap: 6px;
}
.case-bar-row{
  display: grid;
  grid-template-columns: minmax(110px, 22%) 1fr auto;
  gap: 10px;
  align-items: center;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12px;
}
.case-bar-label{
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.case-bar-track{
  height: 16px;
  background: var(--paper-soft);
  border: 1.5px solid var(--ink);
  overflow: hidden;
}
.case-bar-fill{
  height: 100%;
  background: var(--olive);
  transition: width 0.4s ease-out;
}
.case-bar-value{
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* -- exhibit: line chart -- */
.case-line-svg{
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  color: var(--ink);
}
.case-line-unit{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--pencil);
  text-align: right;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ---------- Progressive-reveal "think first" panel ---------- */
.case-think{
  margin-top: 14px;
  background: var(--paper-soft);
  border: 1.5px dashed var(--ink);
  padding: 14px 16px;
  position: relative;
}
.case-think::before{
  content: "🧠  your turn";
  position: absolute;
  top: -10px; left: 14px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.4px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 1px 8px;
  color: var(--red);
  text-transform: uppercase;
}
.case-think-prompt{
  font-family:'Spectral', serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
  margin: 6px 0 12px;
}
.case-think-actions{
  display: flex; gap: 8px; flex-wrap: wrap;
}
.case-reset{
  margin-top: 14px;
}

/* ---------- Vocab empty state ---------- */
.vocab-empty{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  padding: 20px;
  text-align: center;
}

/* ---------- Formulas reference ---------- */
.formula-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.formula-item{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
}
.formula-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.formula-name{
  font-family:'Caveat', cursive;
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
  flex: 1;
  min-width: 0;
}
.formula-body{
  background: var(--tab-3);
  border: 1px dashed var(--ink);
  padding: 10px 12px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  margin: 0 0 8px;
}
.formula-note{
  font-family:'Spectral', serif;
  font-size: 13.5px;
  color: var(--pencil);
  font-style: italic;
}

/* ============== Resources tab ============== */
.res-block{
  margin: 0 0 32px;
  padding: 0;
}
.res-block + .res-block{
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1.5px dashed var(--ink);
}
.res-h3{
  font-family:'Caveat', cursive;
  font-size: 32px;
  margin: 0 0 4px;
  color: var(--ink);
  transform: rotate(-0.4deg);
  display: inline-block;
  line-height: 1;
}
.res-h3::after{
  content:"";
  display:block;
  width: 70%;
  height: 5px;
  background: var(--red);
  opacity: 0.5;
  margin-top: -2px;
  transform: skewX(-8deg);
  border-radius: 2px;
}
.res-lede{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--pencil);
  margin: 6px 0 18px;
  max-width: 720px;
  line-height: 1.5;
}

/* ---------- Timeline ---------- */
.timeline-tabs{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tl-tab{
  all: unset;
  cursor: pointer;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  color: var(--pencil);
  box-shadow: 2px 2px 0 var(--ink);
}
.tl-tab:hover{ background: var(--tab-3); color: var(--ink); }
.tl-tab--active{
  background: var(--tab-8);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--red), 2px 2px 0 var(--ink);
  font-weight: 600;
}

.tl-track{ display: none; }
.tl-track--active{ display: block; }

.tl-list{
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.tl-list::before{
  content: "";
  position: absolute;
  left: 76px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--red);
  opacity: 0.35;
}
@media (max-width: 640px){
  .tl-list::before{ display: none; }
}
.tl-row{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  margin-bottom: 18px;
  position: relative;
}
.tl-row::after{
  content: "";
  position: absolute;
  left: 72px;
  top: 10px;
  width: 10px;
  height: 10px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper-soft);
}
@media (max-width: 640px){
  .tl-row{ grid-template-columns: 1fr; }
  .tl-row::after{ display: none; }
}
.tl-week{
  font-family:'Architects Daughter', cursive;
  font-size: 20px;
  color: var(--red);
  line-height: 1.1;
  padding-top: 4px;
  text-align: right;
}
.tl-phase{
  display: none;
}
.tl-body{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  padding: 12px 16px;
  font-family:'Spectral', serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tl-body > strong{
  font-family:'Architects Daughter', cursive;
  font-size: 17px;
  color: var(--teal);
  font-weight: normal;
  display: block;
  margin-bottom: 4px;
}
.tl-meta{
  margin-top: 8px;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--pencil);
  padding-top: 6px;
  border-top: 1px dashed var(--paper-dark);
  text-transform: lowercase;
}

/* ---------- Cheat sheet ---------- */
.cheat-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.cheat-card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
}
.cheat-card:nth-child(3n+1){ border-left: 4px solid var(--red); }
.cheat-card:nth-child(3n+2){ border-left: 4px solid var(--teal); }
.cheat-card:nth-child(3n+3){ border-left: 4px solid var(--mustard); }
.cheat-h{
  font-family:'Architects Daughter', cursive;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ink);
}
.cheat-list{
  list-style: none;
  padding: 0;
  margin: 0;
  font-family:'Spectral', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cheat-list li{
  padding: 3px 0 3px 16px;
  position: relative;
}
.cheat-list li::before{
  content: "·";
  position: absolute;
  left: 4px;
  top: -2px;
  color: var(--red);
  font-weight: 700;
  font-size: 20px;
}
.cheat-list strong{ color: var(--ink); }
.cheat-list em{ color: var(--pencil); font-style: italic; }
.cheat-list q{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--teal);
}

/* ---------- Tips & tricks ---------- */
.tips-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px){
  .tips-cols{ grid-template-columns: 1fr; }
}
.tips-col{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 18px;
}
.tips-h{
  font-family:'Caveat', cursive;
  font-size: 24px;
  color: var(--red);
  margin: 0 0 6px;
  transform: rotate(-0.4deg);
}
.tips-ol, .tips-list{
  padding-left: 22px;
  margin: 4px 0;
  font-family:'Spectral', serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tips-ol li, .tips-list li{
  padding: 3px 0;
}
.tips-ol strong, .tips-list strong{ color: var(--ink); }
.tips-ol em, .tips-list em{ color: var(--pencil); font-style: italic; }

/* ---------- Sources ---------- */
.src-list{
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.src-item{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 14px 16px;
  align-items: start;
}
@media (max-width: 640px){
  .src-item{ grid-template-columns: 1fr; }
}
.src-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  text-align: center;
  color: var(--ink);
}
.src-badge--darden{ background: var(--tab-3); }
.src-badge--tuck{ background: var(--tab-2); }
.src-badge--mbb{ background: var(--tab-5); border-color: var(--red); }
.src-badge--practice{ background: var(--tab-4); border-color: var(--red); }
.src-title{
  font-family:'Caveat', cursive;
  font-size: 24px;
  line-height: 1.1;
  margin-bottom: 4px;
}
.src-title a{
  color: var(--ink);
  border-bottom: 1.5px solid var(--red);
  text-decoration: none;
}
.src-title a:hover{
  background: var(--tab-3);
}
.src-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--pencil);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.src-desc{
  font-family:'Spectral', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.src-extras{
  background: var(--paper-soft);
  border: 1.5px dashed var(--ink);
  padding: 14px 20px;
  position: relative;
  margin-top: 18px;
}
.src-h{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 2px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.src-extras-list{
  padding-left: 22px;
  margin: 0;
  font-family:'Spectral', serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.src-extras-list li{ padding: 3px 0; }
.src-extras-list strong{ color: var(--ink); }

.cheat-actions{
  display: flex;
  gap: 10px;
  margin: -6px 0 14px;
}
.cheat-actions .mini-btn{
  background: var(--tab-3);
  font-weight: 600;
}

/* ============== learn mode switch (vocab MC vs case math) ============== */
.learn-mode-switch{
  display: flex;
  gap: 0;
  margin: 6px 0 18px;
  border: 1.5px solid var(--ink);
  width: fit-content;
  box-shadow: 2px 2px 0 var(--ink);
}
.learn-mode-switch .mode-btn{
  all: unset;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  padding: 7px 16px;
  background: var(--paper);
  cursor: pointer;
  border-right: 1.5px solid var(--ink);
  letter-spacing: 0.03em;
}
.learn-mode-switch .mode-btn:last-child{ border-right: none; }
.learn-mode-switch .mode-btn:hover{ background: var(--paper-dark); }
.learn-mode-switch .mode-btn--on{
  background: var(--tab-3);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--red);
}

/* ============== math drill UI ============== */
.md-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 2px 10px;
  border-bottom: 1px dashed var(--pencil);
  margin-bottom: 2px;
}
.md-type-badge{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--tab-3);
  border: 1.5px solid var(--ink);
  padding: 3px 10px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.md-timer{
  font-family:'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  min-width: 76px;
  text-align: center;
}
.md-timer--warn{ background: var(--tab-8); }
.md-timer--danger{
  background: var(--red);
  color: var(--paper);
  animation: md-pulse 0.9s ease-in-out infinite;
}
@keyframes md-pulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
}

.md-box{ background: var(--paper); }

.md-prompt{
  font-family:'Spectral', serif;
  font-size: 18px;
  line-height: 1.5;
  margin: 2px 0 16px;
  color: var(--ink);
}

.md-answer-row{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.md-input{
  font-family:'IBM Plex Mono', monospace;
  font-size: 18px;
  padding: 8px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.04);
  width: 200px;
  color: var(--ink);
}
.md-input:focus{
  outline: none;
  box-shadow: 0 0 0 2px var(--tab-3), inset 2px 2px 0 rgba(0,0,0,0.04);
}
.md-input:disabled{
  background: var(--paper-dark);
  color: var(--pencil);
}
.md-unit{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
}

.md-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.md-ghost{
  background: transparent !important;
  box-shadow: none !important;
  border-style: dashed !important;
  color: var(--pencil);
}
.md-ghost:hover{
  background: var(--paper-dark) !important;
  box-shadow: 2px 2px 0 var(--pencil) !important;
}

.md-feedback{
  min-height: 24px;
  margin-top: 10px;
  font-family:'Caveat', cursive;
  font-size: 20px;
}
.md-feedback.ok{ color: var(--olive); }
.md-feedback.bad{ color: var(--red); }
.md-feedback.warn{ color: #b86a28; }

.md-solution{
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px dashed var(--pencil);
  background: var(--paper-dark);
}
.md-solution h5{
  font-family:'Caveat', cursive;
  font-size: 20px;
  margin: 0 0 4px;
  color: var(--red);
}
.md-solution p{
  font-family:'Spectral', serif;
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

.md-nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--pencil);
}

/* ============== mental math (Learn mode 3) ============== */
.mm-picker-row{
  margin-bottom: 12px;
}
.mm-picker-h{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 4px;
}
.mm-picker-lede{
  font-family:'Spectral', serif;
  font-size: 14px;
  font-style: italic;
  color: var(--pencil);
  line-height: 1.55;
  margin: 14px 0 0;
  max-width: 640px;
}
.mm-picker-lede kbd{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  font-style: normal;
  background: var(--paper-dark);
  border: 1px solid var(--pencil);
  border-radius: 3px;
  padding: 1px 6px;
  color: var(--ink);
}

.mm-head{
  gap: 10px;
  flex-wrap: wrap;
}
.mm-prompt{
  font-family:'IBM Plex Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 18px 6px 10px;
  color: var(--ink);
}

.mm-score{
  font-family:'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--pencil);
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.mm-score-ok{
  color: var(--olive);
  font-weight: 700;
  font-size: 17px;
}
.mm-score-sep{ color: var(--pencil); }
.mm-score-total{
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
}
.mm-score-q{
  margin-left: 10px;
  font-size: 12px;
  opacity: 0.85;
}

.mm-feedback{
  min-height: 28px;
  font-size: 19px;
}

.mm-breakdown{
  margin: 18px auto 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--pencil);
  max-width: 460px;
  text-align: left;
}
.mm-bd-head{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 6px;
}
.mm-bd-row{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px;
  padding: 5px 0;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  border-bottom: 1px dashed rgba(0,0,0,0.12);
}
.mm-bd-row:last-child{ border-bottom: none; }
.mm-bd-cat{
  font-weight: 600;
  color: var(--ink);
}
.mm-bd-val{
  color: var(--pencil);
  text-align: right;
}

/* =========================================================
   WORKED EXAMPLES — accordion of worked walkthroughs
   Visual style: paper card w/ a torn-edge header; "why"
   annotations rendered as red-pencil side notes; steps laid
   out like napkin math with numbered circles.
   ========================================================= */
.wx-list{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 14px;
}
.wx-card{
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.wx-head{
  all: unset;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 20px;
  background: var(--paper-soft);
  box-sizing: border-box;
  width: 100%;
}
.wx-head:hover{ background: var(--tab-1); }
.wx-head--open{
  background: var(--tab-3);
  border-bottom: 2px solid var(--ink);
}
.wx-num{
  font-family:'Architects Daughter', cursive;
  font-size: 22px;
  color: var(--red);
  flex-shrink: 0;
}
.wx-type{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pencil);
  padding: 3px 8px;
  border: 1px solid var(--pencil);
  border-radius: 2px;
  flex-shrink: 0;
}
.wx-title{
  font-family:'Caveat', cursive;
  font-size: 26px;
  flex: 1 1 200px;
  min-width: 0;
  line-height: 1.1;
  color: var(--ink);
}
.wx-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.wx-toggle{
  font-family:'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--pencil);
  text-transform: uppercase;
}
.wx-body{
  display: none;
  padding: 18px 26px 22px;
}
.wx-body.open{ display: block; }

.wx-lede{
  font-family:'Spectral', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 18px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.4);
  border-left: 3px solid var(--pencil);
}

.wx-section{
  margin: 18px 0;
}
.wx-h4{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--pencil);
}
.wx-hint{
  font-family:'Spectral', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--pencil);
  margin-left: 6px;
}

/* "why" annotations — red-pencil side notes */
.wx-why{
  font-family:'Spectral', serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 6px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--red);
}
.wx-why-tag{
  font-family:'Caveat', cursive;
  font-size: 17px;
  font-weight: 700;
  color: var(--red);
  margin-right: 6px;
  letter-spacing: 0.5px;
}

/* Framework pick block */
.wx-framework{
  background: rgba(199,217,184,0.35);
  border: 1px solid var(--ink);
  padding: 14px 16px;
}
.wx-fw-row{ margin-bottom: 4px; }
.wx-fw-pick{
  font-family:'Caveat', cursive;
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
}

/* Assumptions list */
.wx-assumptions{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wx-assumption{
  padding: 10px 14px;
  background: var(--paper-soft);
  border: 1px dashed var(--pencil);
}
.wx-claim{
  display: block;
  font-family:'Spectral', serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.wx-assumption .wx-why{
  margin-top: 6px;
  font-size: 13.5px;
}

/* Steps — numbered napkin-math list */
.wx-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: wxstep;
}
.wx-step{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.wx-step-n{
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 2px solid var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family:'Architects Daughter', cursive;
  font-size: 18px;
  color: var(--red);
  background: var(--paper);
}
.wx-step-body{
  flex: 1 1 auto;
  min-width: 0;
}
.wx-step-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 4px;
}
.wx-step-math{
  font-family:'IBM Plex Mono', monospace;
  font-size: 15.5px;
  color: var(--ink);
  padding: 8px 12px;
  background: #fffbe9;
  border: 1px solid var(--ink);
  display: inline-block;
  max-width: 100%;
  word-break: break-word;
  line-height: 1.45;
}
.wx-step .wx-why{
  margin-top: 8px;
  font-size: 14px;
}

/* Answer panel — stamped-looking highlight */
.wx-answer{
  margin: 22px 0 18px;
  padding: 14px 18px;
  border: 2px solid var(--red);
  background: rgba(181,45,45,0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}
.wx-ans-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
}
.wx-ans-text{
  font-family:'Caveat', cursive;
  font-size: 26px;
  color: var(--ink);
  line-height: 1.15;
  flex: 1 1 260px;
}

/* Sanity check — sticky-note */
.wx-sanity{
  background: var(--tab-3);
  border-left: 4px solid var(--pencil);
  padding: 12px 16px;
}
.wx-sanity .wx-h4{ border-bottom: none; padding-bottom: 0; margin-bottom: 6px; }
.wx-sanity p{
  font-family:'Spectral', serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* Traps list */
.wx-traps ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.wx-traps li{
  font-family:'Spectral', serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  padding: 6px 0 6px 24px;
  position: relative;
}
.wx-traps li::before{
  content: "⚠";
  position: absolute;
  left: 0; top: 6px;
  color: var(--red);
  font-size: 14px;
}

/* Variations list */
.wx-variations{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wx-variation{
  padding: 8px 12px;
  border: 1px dashed var(--pencil);
  background: var(--paper-soft);
}
.wx-var-q{
  display: block;
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--pencil);
  margin-bottom: 4px;
}
.wx-var-a{
  display: block;
  font-family:'Spectral', serif;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}

/* Tag row */
.wx-tags{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--pencil);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  align-items: center;
}
.wx-tags-label{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pencil);
  margin-right: 2px;
}
.wx-tags-sep{
  color: var(--pencil);
  margin: 0 4px;
}
.wx-tag{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  padding: 2px 7px;
  border: 1px solid var(--pencil);
  background: var(--paper);
  color: var(--ink);
}
.wx-tag--f{
  border-color: var(--red);
  color: var(--red);
}

/* =========================================================
   JOBS — live consulting-postings grid
   ========================================================= */
.jobs-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 12px;
  border-bottom: 1px dashed var(--pencil);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.jobs-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--pencil);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.jobs-meta strong{ color: var(--ink); }
.jobs-stale{
  color: var(--red);
  font-style: italic;
}
.jobs-fetched{ opacity: 0.75; }

.jobs-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.jobs-empty{
  grid-column: 1 / -1;
  font-family:'Spectral', serif;
  font-style: italic;
  color: var(--pencil);
  text-align: center;
  padding: 42px 14px;
  border: 1.5px dashed var(--pencil);
  background: var(--paper-dark);
}
.jobs-error{ color: var(--red); font-style: normal; }

.job-card{
  display: block;
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
}
.job-card:hover,
.job-card:focus-visible{
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper-dark);
  outline: none;
}
.job-title{
  font-family:'Spectral', serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
}
.job-firm{
  font-family:'Caveat', cursive;
  font-size: 20px;
  color: var(--red);
  line-height: 1.1;
  margin-bottom: 8px;
}
.job-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--pencil);
  margin-bottom: 6px;
}
.job-where{ font-weight: 500; }
.jobs-badge{
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--pencil);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--paper-dark);
  color: var(--pencil);
}
.jobs-badge--remote{
  background: var(--tab-3);
  color: var(--ink);
  border-color: var(--ink);
}
.job-posted{
  font-style: italic;
  opacity: 0.85;
}
.jobs-pub{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pencil);
  opacity: 0.75;
  margin-top: 4px;
}

/* =========================================================
   NEWS — M&A deals / industry / hiring trends
   ========================================================= */
.news-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--pencil);
}
.news-chip{
  font-family:'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 5px 11px;
  background: var(--paper);
  color: var(--pencil);
  border: 1.5px solid var(--pencil);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease, color 0.08s ease;
}
.news-chip:hover{
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper-dark);
}
.news-chip.is-active{
  background: var(--tab-5);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.news-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.news-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--pencil);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.news-meta strong{ color: var(--ink); }
.news-meta em{ font-style: italic; color: var(--red); }
.news-stale{
  color: var(--red);
  font-style: italic;
}
.news-fetched{ opacity: 0.75; }

.news-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.news-empty{
  grid-column: 1 / -1;
  font-family:'Spectral', serif;
  font-style: italic;
  color: var(--pencil);
  text-align: center;
  padding: 42px 14px;
  border: 1.5px dashed var(--pencil);
  background: var(--paper-dark);
}
.news-error{ color: var(--red); font-style: normal; }

.news-card{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.08s ease;
  /* keep long unbreakable strings (pasted URLs, RSS hashes) inside the card */
  min-width: 0;
  overflow: hidden;
}
.news-card:hover,
.news-card:focus-visible{
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper-dark);
  outline: none;
}
.news-title{
  font-family:'Spectral', serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.news-snip{
  font-family:'Spectral', serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pencil);
  margin: 2px 0 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
  /* Cap to a few lines in case the snippet is unusually long. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-family:'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--pencil);
  letter-spacing: 0.04em;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--pencil);
}
.news-src{
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--red);
  font-weight: 600;
}
.news-when{
  font-style: italic;
  opacity: 0.85;
}

/* ============== BEHAVIORALS ============== */
.beh-step{
  margin: 26px 0 34px;
  padding: 18px 20px 22px;
  background: var(--paper-soft);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
}
.beh-step-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 6px;
}
.beh-step-num{
  font-family:'Caveat',cursive;
  font-size: 28px;
  color: var(--red);
  line-height: 1;
}
.beh-step-h{
  font-family:'Architects Daughter',cursive;
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.5px;
}
.beh-hint{
  font-size: 13.5px;
  color: var(--pencil);
  margin: 0 0 12px;
  font-style: italic;
}
.beh-textarea{
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  font-family:'IBM Plex Mono',monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
}
.beh-textarea:focus{ outline: 2px solid var(--red); outline-offset: -2px; }

.beh-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.beh-btn-ghost{
  background: transparent;
  border-color: var(--pencil);
  color: var(--pencil);
}
.beh-btn-ghost:hover{ color: var(--ink); border-color: var(--ink); }
.mini-btn:disabled{ opacity: 0.5; cursor: wait; }

.beh-status{
  font-family:'IBM Plex Mono',monospace;
  font-size: 11.5px;
  color: var(--pencil);
  letter-spacing: 0.5px;
}
.beh-status--ok{ color: #4d6a1d; }
.beh-status--err{ color: var(--red); }
.beh-status--info{ color: var(--pencil); font-style: italic; }

/* profile editor */
.beh-id-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--pencil);
}
.beh-id-label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family:'IBM Plex Mono',monospace;
  font-size: 11px;
  color: var(--pencil);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1 1 auto;
}
.beh-inline{
  font-family:'Spectral',serif;
  font-size: 15px;
  padding: 5px 8px;
  background: var(--paper);
  border: none;
  border-bottom: 1.5px dashed var(--pencil);
  color: var(--ink);
  min-width: 80px;
}
.beh-inline:focus{ outline: none; border-bottom-color: var(--red); border-bottom-style: solid; }
.beh-inline--role{ font-weight: 600; flex: 1 1 180px; font-size: 16px; }
.beh-inline--co{ font-family:'Caveat',cursive; font-size: 22px; color: var(--red); flex: 1 1 160px; }
.beh-inline--wide{ flex: 1 1 300px; }
.beh-inline--date{ width: 90px; font-family:'IBM Plex Mono',monospace; font-size: 12px; }

.beh-group{ margin-bottom: 20px; }
.beh-group-h{
  font-family:'IBM Plex Mono',monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pencil);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.beh-card{
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
  box-shadow: 3px 3px 0 var(--ink);
}
.beh-card-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  padding-right: 30px;
}
.beh-at, .beh-dash{ color: var(--pencil); font-family:'Caveat',cursive; font-size: 20px; }
.beh-when{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-left: auto;
}
.beh-x{
  position: absolute;
  top: 6px; right: 8px;
  width: 22px; height: 22px;
  background: transparent;
  border: 1.5px solid var(--pencil);
  color: var(--pencil);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}
.beh-x:hover{ color: var(--red); border-color: var(--red); }
.beh-x--small{
  position: static;
  width: 18px; height: 18px;
  font-size: 13px;
  margin-left: 6px;
  flex-shrink: 0;
}

.beh-bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.beh-bullets li{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}
.beh-bullets li::before{
  content: "•";
  color: var(--red);
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
  margin-left: 2px;
}
.beh-bullet{
  flex: 1;
  padding: 6px 8px;
  border: 1px dashed var(--pencil);
  background: var(--paper-soft);
  font-family:'Spectral',serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  resize: vertical;
  min-height: 40px;
}
.beh-bullet:focus{ outline: none; border-color: var(--red); border-style: solid; }
.beh-add-bullet{ font-size: 11px; padding: 4px 10px; }
.beh-empty{
  font-family:'IBM Plex Mono',monospace;
  font-size: 12px;
  color: var(--pencil);
  font-style: italic;
  padding: 10px 0;
}

/* story cards */
.beh-story{
  position: relative;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 16px 18px 14px;
  margin-bottom: 16px;
  box-shadow: 4px 4px 0 var(--ink);
}
.beh-story-head{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
  padding-right: 30px;
}
.beh-story-head .beh-inline{
  font-family:'Architects Daughter',cursive;
  font-size: 20px;
  flex: 1;
  border-bottom-style: solid;
}
.beh-story-src{
  font-family:'Caveat',cursive;
  font-size: 17px;
  color: var(--red);
  margin-bottom: 8px;
}
.beh-themes{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.beh-theme{
  font-family:'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: lowercase;
  padding: 2px 8px;
  background: var(--tab-2);
  border: 1px solid var(--ink);
  color: var(--ink);
}
.beh-star-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.beh-star-grid label{ display: flex; flex-direction: column; gap: 4px; }
.beh-star-k{
  font-family:'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pencil);
  font-weight: 600;
}
.beh-star-grid textarea{
  padding: 8px 10px;
  border: 1px solid var(--pencil);
  background: var(--paper-soft);
  font-family:'Spectral',serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  resize: vertical;
}
.beh-star-grid textarea:focus{ outline: none; border-color: var(--red); }

/* question picker + answer */
.beh-q-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.beh-select{
  flex: 1 1 340px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  font-family:'Spectral',serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.beh-custom-q{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.beh-or{
  font-family:'Caveat',cursive;
  font-size: 17px;
  color: var(--pencil);
  flex-shrink: 0;
}
.beh-input{
  flex: 1;
  padding: 7px 11px;
  background: var(--paper);
  border: 1.5px solid var(--pencil);
  font-family:'Spectral',serif;
  font-size: 14px;
  color: var(--ink);
}
.beh-input:focus{ outline: none; border-color: var(--red); }

#beh-answer-out{
  margin-top: 16px;
  padding: 18px 20px 16px;
  background: var(--paper);
  border: 2px dashed var(--ink);
}
.beh-used-story{
  font-family:'IBM Plex Mono',monospace;
  font-size: 11.5px;
  color: var(--pencil);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--pencil);
}
.beh-used-label{
  letter-spacing: 2px;
  text-transform: uppercase;
}
.beh-used-story strong{ color: var(--ink); }
.beh-used-story .beh-story-src{ display: inline; margin-left: 8px; font-size: 15px; }
.beh-answer-text p{
  font-family:'Spectral',serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
}
.beh-answer-text p:last-child{ margin-bottom: 0; }

@media (min-width: 720px){
  .beh-star-grid{
    grid-template-columns: 1fr 1fr;
  }
  .beh-star-grid label:nth-child(3){ grid-column: 1 / -1; }
}

/* ============== brain teasers (Learn mode 4) ============== */
.bt-prompt{
  font-family:'Spectral', serif;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  margin: 2px 0 18px;
  max-width: 640px;
}

.bt-walk{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--pencil);
}
.bt-walk h5{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 0 0 8px;
}
.bt-walk-steps{
  margin: 0 0 10px;
  padding-left: 22px;
  font-family:'Spectral', serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
}
.bt-walk-steps li{
  margin: 4px 0;
  padding-left: 4px;
}
.bt-walk-steps li::marker{
  color: var(--red);
  font-family:'IBM Plex Mono', monospace;
  font-weight: 700;
}
.bt-anchor{
  font-style: italic;
  font-size: 14.5px;
  color: var(--pencil);
  margin: 10px 0 12px;
  padding-left: 12px;
  border-left: 2px solid var(--mustard);
  line-height: 1.5;
}

.bt-rate{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(0,0,0,0.15);
}
.bt-rate-h{
  font-family:'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-right: 4px;
}