/* =====================================================================
   Marble
   Two visual languages live here on purpose:
   1. the Marble shell  - chalk ground, heavy ink keylines, hard offset
                          shadows, DM Sans Black. Loud and physical.
   2. the .bb-* layer   - a faithful copy of Bluebook, used only while
                          answering questions so practice feels like the
                          real exam rather than like this website
   ===================================================================== */

:root{
  --chalk:#F7F6F2;
  --ink:#141414;
  --ink-mid:#1B2A4A;
  --paper:#FFFFFF;

  --marble:#0B7A56;
  --marble-dk:#085E42;
  --marble-lt:#D6EFE4;

  --mint:#C8F0D0;
  --sky:#C9E8FF;
  --peach:#FFE0CB;
  --lavender:#EDE9FF;
  --electric:#FFE135;
  --coral:#EE4E29;

  --green:#00A544;
  --red:#E40014;
  --amber:#DD7400;

  --muted:#5A5A56;
  --faint:#8A8A84;
  --rule:rgba(20,20,20,.12);

  --sh-sm:3px 3px 0 0 var(--ink);
  --sh-md:5px 5px 0 0 var(--ink);
  --sh-lg:8px 8px 0 0 var(--ink);

  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
/* author display rules outrank the UA sheet's [hidden] rule, and several
   components below set display, so make the attribute authoritative */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--chalk); color:var(--ink);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.035em;line-height:1.05}
p{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--electric);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ------------------------------------------------------------- boot ---- */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--chalk);z-index:200}
.boot.out{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.boot-mark{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:var(--marble);color:var(--chalk);border:3px solid var(--ink);
  box-shadow:var(--sh-md);font-weight:900;font-size:32px;letter-spacing:-.05em;
  animation:bootPulse 1.1s var(--ease) infinite;
}
@keyframes bootPulse{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,3px)}}

/* ------------------------------------------------------------ topbar --- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:26px;
  padding:16px 26px;background:var(--chalk);
  border-bottom:2px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--marble);color:var(--chalk);border:2px solid var(--ink);
  box-shadow:var(--sh-sm);font-weight:900;font-size:19px;letter-spacing:-.05em;
}
.brand-name{font-weight:900;font-size:27px;letter-spacing:-.045em}
.nav{display:flex;gap:4px;margin-right:auto}
.nav-link{
  padding:8px 12px;font-size:16px;font-weight:700;color:var(--ink);
  transition:color .15s var(--ease);position:relative;
}
.nav-link:hover{color:var(--marble)}
.nav-link.on{color:var(--marble)}
.nav-link.on::after{
  content:'';position:absolute;left:12px;right:12px;bottom:2px;height:3px;
  background:var(--marble);border-radius:2px;
}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.streak{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 15px;flex-shrink:0;
  border:2px solid var(--ink);border-radius:99px;background:var(--electric);
  color:var(--ink);font-size:16px;font-weight:800;box-shadow:var(--sh-sm);
}
.streak svg{flex-shrink:0;display:block}
.streak span{font-variant-numeric:tabular-nums;line-height:1}
.streak.off{background:var(--paper);color:var(--faint)}
.icon-btn{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:var(--sh-sm);font-size:20px;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.icon-btn:hover{transform:translate(3px,3px);box-shadow:none}

/* ------------------------------------------------------------ layout --- */
main{flex:1}
.view{display:none;animation:viewIn .28s var(--ease)}
.view.on{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wrap{max-width:1120px;margin:0 auto;padding:42px 26px 100px}
.wrap-narrow{max-width:780px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:28px}
.page-title{font-size:46px;letter-spacing:-.045em;margin-left:-.022em}
.page-sub{color:var(--muted);font-size:17px;font-weight:500;margin-top:8px}

/* ------------------------------------------------------------ buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:99px;border:2px solid var(--ink);
  font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:var(--sh-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:none}
.btn-primary{background:var(--marble);color:#fff}
.btn-primary:hover{background:var(--marble-dk)}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:var(--chalk)}
.btn-danger{background:var(--red);color:#fff}
.btn-lg{padding:17px 34px;font-size:19px;box-shadow:var(--sh-md)}
.btn-lg:hover{transform:translate(5px,5px)}
.btn-sm{padding:8px 15px;font-size:14px}
.btn:disabled{opacity:.4;pointer-events:none}

/* --------------------------------------------------------- onboarding -- */
.onboard{max-width:640px;margin:0 auto;padding:78px 26px 100px;text-align:center}
.onboard-mark{
  width:72px;height:72px;border-radius:18px;margin:0 auto 30px;
  display:grid;place-items:center;font-weight:900;font-size:38px;letter-spacing:-.05em;
  background:var(--marble);color:var(--chalk);border:3px solid var(--ink);box-shadow:var(--sh-md);
}
.onboard-title{font-size:58px;letter-spacing:-.05em;line-height:.95;margin-left:-.022em}
.onboard-sub{color:var(--muted);margin-top:18px;font-size:18px;font-weight:500;line-height:1.55}
.goal-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:38px 0 22px}
.goal-opt{
  padding:20px 8px;border-radius:16px;background:var(--paper);
  border:2px solid var(--ink);box-shadow:var(--sh-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .15s;
}
.goal-opt:hover{transform:translate(3px,3px);box-shadow:none}
.goal-opt.on{background:var(--electric)}
.goal-opt b{display:block;font-size:34px;font-weight:900;letter-spacing:-.05em;line-height:1}
.goal-opt span{font-size:13px;color:var(--muted);font-weight:700}
.goal-opt.on span{color:var(--ink)}
.goal-custom{display:flex;align-items:center;justify-content:center;gap:11px;font-size:16px;font-weight:600;color:var(--muted)}
.goal-custom input{
  width:84px;padding:10px;text-align:center;border-radius:12px;
  border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh-sm);
  font-weight:800;font-size:18px;color:var(--ink);
}
.goal-custom input:focus{outline:none;background:var(--electric)}
#onboardStart{margin-top:36px;min-width:250px}
.onboard-foot{margin-top:20px;font-size:15px;font-weight:500;color:var(--faint)}

/* --------------------------------------------------------- goal card --- */
.goal-card{
  background:var(--marble);color:#fff;border:3px solid var(--ink);border-radius:24px;
  padding:30px 32px;box-shadow:var(--sh-lg);margin-bottom:22px;
}
.goal-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.goal-card-top>div{min-width:0}
.goal-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.85}
.goal-count{
  font-size:66px;font-weight:900;letter-spacing:-.05em;line-height:.95;
  margin-top:6px;white-space:nowrap;
}
/* Negative tracking subtracts space after the final glyph too, so the ink
   ends to the right of the inline box and the last digit gets sliced. Clear
   the tracking on the trailing run and give it room to breathe. */
.goal-count>span:last-child{letter-spacing:normal;padding-right:.18em;display:inline-block}
.goal-of{font-size:28px;opacity:.7;font-weight:800;margin-left:4px;letter-spacing:normal}
.goal-badge{
  padding:7px 15px;border-radius:99px;font-size:14px;font-weight:800;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);flex-shrink:0;
}
.goal-badge.done{background:var(--electric)}
.bar{height:16px;border-radius:99px;background:rgba(255,255,255,.28);border:2px solid var(--ink);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--electric);transition:width .8s var(--ease)}
.goal-card-foot{display:flex;justify-content:space-between;gap:14px;margin-top:14px;font-size:16px;font-weight:600;opacity:.92}

/* --------------------------------------------------------- stat row ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:30px}
.stat{
  background:var(--paper);border:2px solid var(--ink);border-radius:16px;
  padding:18px 20px;box-shadow:var(--sh-sm);
}
.stat-k{font-size:13px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.stat-v{font-size:36px;font-weight:900;letter-spacing:-.045em;margin-top:4px;line-height:1}
.stat-v em{font-style:normal;font-size:17px;color:var(--faint);font-weight:800;margin-left:3px}

/* ------------------------------------------------------------- cards --- */
.cards{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-bottom:30px}
.card{
  background:var(--paper);border:3px solid var(--ink);border-radius:24px;
  box-shadow:var(--sh-md);display:flex;flex-direction:column;overflow:hidden;
}
.card-lead{background:var(--sky)}
.card-mistake{background:var(--peach)}
.card-body{padding:28px 30px 10px;flex:1}
.card-eyebrow{
  display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border:2px solid var(--ink);
  border-radius:99px;background:var(--paper);margin-bottom:14px;
}
.card-title{font-size:34px;letter-spacing:-.045em}
.card-text{color:var(--ink);opacity:.78;font-size:16px;font-weight:500;margin-top:10px;line-height:1.5}
.card-foot{padding:20px 30px 28px;display:flex;gap:11px;flex-wrap:wrap}
.pool-list{margin-top:20px;display:flex;flex-direction:column;gap:0}
.pool-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-top:2px solid rgba(20,20,20,.13);font-size:15px;font-weight:600}
.pool-row:first-child{border-top:0}
.pool-row b{font-size:20px;font-weight:900;letter-spacing:-.03em}
.mistake-preview{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.mp-row{display:flex;align-items:center;gap:11px;font-size:14px}
.mp-name{width:150px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-bar{flex:1;height:12px;border-radius:99px;background:var(--paper);border:2px solid var(--ink);overflow:hidden}
.mp-bar i{display:block;height:100%;background:var(--coral)}
.mp-n{width:28px;text-align:right;font-weight:900;font-variant-numeric:tabular-nums}
.mp-empty{font-size:15px;font-weight:600;opacity:.7;padding:6px 0}

/* -------------------------------------------------------------- weak --- */
.weak,.result-skills,.an-block{
  background:var(--paper);border:3px solid var(--ink);border-radius:24px;
  box-shadow:var(--sh-md);overflow:hidden;margin-bottom:20px;
}
.weak-head,.an-head{padding:24px 28px 18px;border-bottom:2px solid var(--ink)}
.weak-head h2,.an-head h2{font-size:26px;letter-spacing:-.04em}
.weak-head p,.an-head p{font-size:15px;font-weight:500;color:var(--muted);margin-top:6px}
.skill-row{
  display:flex;align-items:center;gap:16px;padding:15px 28px;
  border-bottom:2px solid rgba(20,20,20,.1);transition:background .15s;
}
.skill-row:last-child{border-bottom:0}
.skill-row:hover{background:var(--chalk)}
.skill-name{flex:1;min-width:0}
.skill-name b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}
.skill-name span{font-size:13px;color:var(--faint);font-weight:600}
.skill-bar{width:180px;height:14px;border-radius:99px;background:var(--chalk);border:2px solid var(--ink);overflow:hidden;flex-shrink:0}
.skill-bar i{display:block;height:100%;transition:width .7s var(--ease)}
.skill-pct{width:64px;text-align:right;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;flex-shrink:0}
.skill-n{width:78px;text-align:right;font-size:13px;color:var(--faint);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}

/* ------------------------------------------------------------- panel --- */
.panel{
  background:var(--paper);border:2px solid var(--ink);border-radius:18px;
  padding:22px 24px;margin-bottom:16px;box-shadow:var(--sh-sm);
}
.panel-title{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:15px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:9px 16px;border-radius:99px;font-size:15px;font-weight:700;
  border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  white-space:nowrap;box-shadow:2px 2px 0 0 var(--ink);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s;
}
.chip:hover{transform:translate(2px,2px);box-shadow:none}
.chip.on{background:var(--electric)}
.chip i{font-style:normal;opacity:.6;margin-left:6px;font-size:13px;font-variant-numeric:tabular-nums}
.toggle-row{display:flex;align-items:center;gap:12px;margin-top:18px;cursor:pointer;user-select:none}
.toggle-row input,.sheet-row-btn input{position:absolute;opacity:0;width:0;height:0}
.toggle{
  width:52px;height:28px;border-radius:99px;background:var(--paper);
  border:2px solid var(--ink);position:relative;flex-shrink:0;transition:background .2s var(--ease);
}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--ink);transition:transform .2s var(--ease);
}
input:checked+.toggle{background:var(--marble)}
input:checked+.toggle::after{transform:translateX(24px);background:var(--electric)}
.toggle-text{font-size:16px;font-weight:600}
.setup-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:26px}
.setup-summary{font-size:16px;font-weight:600;color:var(--muted)}
.setup-summary b{color:var(--ink);font-weight:900}

/* ----------------------------------------------------------- results --- */
.result-hero{text-align:center;padding:36px 0 30px}
.result-ring{
  position:relative;width:178px;height:178px;margin:0 auto 28px;
  border-radius:50%;background:var(--paper);border:3px solid var(--ink);
  box-shadow:var(--sh-md);display:grid;place-items:center;
}
.result-ring svg{width:150px;height:150px;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--chalk);stroke-width:14;stroke-linecap:round}
.ring-fg{fill:none;stroke:var(--marble);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1s var(--ease)}
.result-pct{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:900;letter-spacing:-.05em;line-height:1;
}
.result-pct em{font-style:normal;font-size:26px;font-weight:800;color:var(--muted);margin-left:1px}
.result-title{font-size:46px;letter-spacing:-.045em;margin-left:-.022em}
.result-sub{color:var(--muted);margin-top:12px;font-size:18px;font-weight:500}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px}
.result-foot{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}

/* --------------------------------------------------------- analytics --- */
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.an-body{padding:6px 0}
.spark{display:flex;align-items:flex-end;gap:7px;height:140px;padding:26px 28px 0}
.spark-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;min-width:0}
.spark-bar{
  width:100%;max-width:40px;border:2px solid var(--ink);border-radius:7px 7px 3px 3px;
  background:var(--paper);position:relative;transition:height .7s var(--ease);min-height:6px;
}
.spark-bar.none{border:0;background:rgba(20,20,20,.14);border-radius:99px}
.spark-bar i{position:absolute;left:-2px;right:-2px;bottom:-2px;border:2px solid var(--ink);border-radius:5px 5px 3px 3px;background:var(--marble);display:block}
.spark-lbl{font-size:12px;color:var(--muted);font-weight:700}
.spark-foot{display:flex;justify-content:space-between;padding:14px 28px 22px;font-size:14px;font-weight:600;color:var(--muted)}
.empty{padding:44px 28px;text-align:center;color:var(--muted);font-size:16px;font-weight:500}
.empty b{display:block;color:var(--ink);font-weight:900;font-size:22px;letter-spacing:-.03em;margin-bottom:8px}

/* ------------------------------------------------------------ review --- */
.rev-list{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.rev-item{
  background:var(--paper);border:2px solid var(--ink);border-radius:16px;
  padding:18px 20px;box-shadow:var(--sh-sm);cursor:pointer;text-align:left;width:100%;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.rev-item:hover{transform:translate(3px,3px);box-shadow:none}
.rev-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:800;padding:4px 10px;border-radius:99px;border:2px solid var(--ink);background:var(--chalk)}
.tag-red{background:var(--red);color:#fff}
.tag-green{background:var(--mint)}
.tag-amber{background:var(--electric)}
.rev-stem{font-size:16px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ============================== BLUEBOOK ============================== */
/* Deliberately plain and system-native: this must read as the exam app. */
.bb{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:#fff;color:#1e1e1e;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;
  animation:bbIn .28s var(--ease);
}
@keyframes bbIn{from{opacity:0;transform:scale(.995)}to{opacity:1;transform:none}}

.bb-head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 22px;border-bottom:1px dashed #b9b9b9;background:#f7f7f7;flex-shrink:0;
}
.bb-head-l{min-width:0}
.bb-module{font-size:15px;font-weight:700;color:#1e1e1e}
.bb-directions{display:inline-flex;align-items:center;gap:2px;font-size:14px;color:#1e1e1e;padding:2px 0;text-decoration:underline}
.bb-directions:hover{color:#324dc7}
.bb-head-c{text-align:center}
.bb-timer{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bb-timer.hid{visibility:hidden}
.bb-timer-btn{
  margin-top:2px;font-size:12.5px;padding:2px 12px;border:1px solid #6b6b6b;
  border-radius:99px;color:#1e1e1e;background:#fff;
}
.bb-timer-btn:hover{background:#eee}
.bb-head-r{display:flex;justify-content:flex-end;gap:16px}
.bb-tool{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11.5px;color:#1e1e1e;padding:2px 6px;border-radius:6px}
.bb-tool:hover{background:#ececec}
.bb-tool.on{color:#c0392b}

.bb-body{flex:1;display:flex;min-height:0;overflow:hidden}
.bb-pane{overflow-y:auto;padding:26px 30px 60px;min-width:0;scroll-behavior:smooth}
.bb-left{flex:1 1 50%}
.bb-right{flex:1 1 50%}
.bb-split{width:1px;background:#c8c8c8;cursor:col-resize;flex-shrink:0;position:relative}
.bb-split::after{content:'';position:absolute;top:0;bottom:0;left:-4px;right:-4px}
.bb-split:hover{background:#324dc7}

.bb-passage{font-size:16.5px;line-height:1.62;color:#1e1e1e;max-width:60ch}
.bb-passage p{margin:0 0 15px}
.bb-passage p:last-child{margin-bottom:0}
.bb-passage u{text-decoration:underline;text-underline-offset:2.5px}
.bb-notes{margin:0 0 15px;padding-left:22px}
.bb-notes li{margin-bottom:6px}
.bb-quote{margin:0 0 15px;padding-left:22px}
.bb-fig{margin:0 0 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bb-fig-frame{
  width:100%;border:1px solid #ddd;border-radius:2px;background:#fff;
  overflow:auto;display:flex;justify-content:center;align-items:flex-start;
}
.bb-fig img{
  display:block;height:auto;transform-origin:top center;
  max-width:100%;max-height:var(--fig-max,38vh);width:auto;
}
.bb-fig.zoomed .bb-fig-frame{max-height:60vh}
.bb-fig.zoomed img{max-height:none;max-width:none;width:var(--fig-w,100%)}
.bb-fig-tools{display:flex;align-items:center;gap:6px;font-size:12px;color:#4a4a4a}
.bb-zoom{
  width:26px;height:26px;border:1px solid #6b6b6b;border-radius:5px;background:#fff;
  font-size:15px;font-weight:700;line-height:1;display:grid;place-items:center;color:#1e1e1e;
}
.bb-zoom:hover{background:#ececec}
.bb-zoom:disabled{opacity:.35;cursor:default}
.bb-zoom-lvl{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}

.bb-qhead{display:flex;align-items:center;gap:12px;padding-bottom:9px;border-bottom:1px dashed #b9b9b9;margin-bottom:16px}
.bb-qnum{
  width:28px;height:28px;border-radius:3px;background:#1e1e1e;color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700;flex-shrink:0;
}
.bb-mark{display:flex;align-items:center;gap:6px;font-size:14px;color:#1e1e1e;padding:3px 7px;border-radius:5px}
.bb-mark:hover{background:#ececec}
.bb-mark svg{color:#8a8a8a}
.bb-mark.on svg{color:#c0392b}
.bb-mark.on{font-weight:600}
.bb-abc{
  margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.02em;
  border:1px solid #6b6b6b;border-radius:99px;padding:3px 11px;text-decoration:line-through;
}
.bb-abc:hover{background:#ececec}
.bb-abc.on{background:#1e1e1e;color:#fff;border-color:#1e1e1e}

.bb-stem{font-size:16.5px;line-height:1.6;margin-bottom:18px;color:#1e1e1e}
.bb-stem u{text-underline-offset:2.5px}

.bb-choices{display:flex;flex-direction:column;gap:11px}
.bb-choice{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
  padding:12px 14px;border:2px solid #cfcfcf;border-radius:9px;background:#fff;
  font-size:16px;line-height:1.5;color:#1e1e1e;position:relative;
  transition:border-color .14s,background .14s,transform .1s var(--ease);
}
.bb-choice:hover{border-color:#8a8a8a;background:#fbfbfb}
.bb-choice:active{transform:scale(.995)}
.bb-letter{
  width:25px;height:25px;border-radius:50%;border:1.5px solid #6b6b6b;
  display:grid;place-items:center;font-size:13.5px;font-weight:700;flex-shrink:0;
  margin-top:1px;transition:background .14s,border-color .14s,color .14s;
}
.bb-choice-text{flex:1;min-width:0}
.bb-choice.sel{border-color:#324dc7;background:#eef1fc}
.bb-choice.sel .bb-letter{background:#324dc7;border-color:#324dc7;color:#fff}
.bb-choice.ok{border-color:#1e7a4c;background:#eaf7ef}
.bb-choice.ok .bb-letter{background:#1e7a4c;border-color:#1e7a4c;color:#fff}
.bb-choice.bad{border-color:#c0392b;background:#fdeeec}
.bb-choice.bad .bb-letter{background:#c0392b;border-color:#c0392b;color:#fff}
.bb-choice.out .bb-choice-text{text-decoration:line-through;opacity:.45}
.bb-choice.out .bb-letter{opacity:.45}
.bb-choice.locked{cursor:default}
.bb-choice.locked:hover{border-color:inherit;background:inherit}
.bb-choice.pulse{animation:bbPulse .42s var(--ease)}
@keyframes bbPulse{0%{transform:scale(1)}45%{transform:scale(1.014)}100%{transform:scale(1)}}
.bb-row{display:flex;align-items:center;gap:10px}
.bb-row .bb-choice{flex:1;min-width:0}
.bb-cross{
  width:25px;height:25px;border-radius:50%;border:1px solid #6b6b6b;flex-shrink:0;
  font-size:11px;font-weight:700;color:#1e1e1e;background:#fff;
  display:grid;place-items:center;text-decoration:line-through;
}
.bb-cross:hover{background:#ececec}

.bb-why{margin-top:26px;padding-top:20px;border-top:1px dashed #b9b9b9;animation:whyIn .34s var(--ease)}
@keyframes whyIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bb-why-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6b6b6b;margin-bottom:13px}
.bb-why-item{display:flex;gap:11px;padding:12px 0;border-top:1px solid #ececec}
.bb-why-item:first-of-type{border-top:0}
.bb-why-b{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#fff;background:#9a9a9a;margin-top:1px;
}
.bb-why-item.ok .bb-why-b{background:#1e7a4c}
.bb-why-item.bad .bb-why-b{background:#c0392b}
.bb-why-t{flex:1;font-size:14.5px;line-height:1.6;color:#3a3a3a}
.bb-why-t b{color:#1e1e1e;font-weight:600}

.bb-foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:11px 22px;border-top:1px dashed #b9b9b9;background:#f7f7f7;flex-shrink:0;
}
.bb-foot-l{font-size:14px;font-weight:600;color:#1e1e1e}
.bb-foot-c{display:flex;justify-content:center}
.bb-nav-btn{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:7px;
  background:#1e1e1e;color:#fff;font-size:14px;font-weight:600;
}
.bb-nav-btn:hover{background:#333}
.bb-foot-r{display:flex;justify-content:flex-end;gap:10px}
.bb-btn{padding:9px 22px;border-radius:99px;font-size:15px;font-weight:700;transition:background .16s,transform .1s var(--ease),opacity .16s}
.bb-btn:active{transform:translateY(1px)}
.bb-btn-primary{background:#324dc7;color:#fff;min-width:104px}
.bb-btn-primary:hover{background:#2a41ab}
.bb-btn-primary:disabled{background:#a9b3e0;cursor:default}
.bb-btn-ghost{background:#fff;color:#324dc7;border:1px solid #c3c3c3}
.bb-btn-ghost:hover{background:#eee}
.bb-btn-ghost:disabled{opacity:.4;cursor:default}

.bb-pop{
  position:absolute;bottom:62px;left:50%;transform:translateX(-50%);
  width:min(430px,92vw);background:#fff;border:1px solid #c8c8c8;border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.22);z-index:12;padding:14px 16px 16px;
  animation:popIn .2s var(--ease);
}
@keyframes popIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.bb-pop-head{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;padding-bottom:9px;border-bottom:1px solid #e4e4e4}
.bb-pop-close{font-size:22px;line-height:1;color:#6b6b6b;padding:0 4px}
.bb-pop-legend{display:flex;gap:15px;padding:10px 0;font-size:12px;color:#4a4a4a}
.bb-pop-legend span{display:flex;align-items:center;gap:5px}
.lg{width:11px;height:11px;border-radius:3px;display:block}
.lg-cur{border:2px solid #324dc7}
.lg-ans{background:#324dc7}
.lg-flag{background:#c0392b}
.bb-pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:7px;max-height:230px;overflow-y:auto;padding-top:4px}
.bb-cell{
  height:36px;border-radius:5px;border:1px dashed #9a9a9a;background:#fff;
  font-size:13.5px;font-weight:650;color:#1e1e1e;position:relative;
  transition:background .14s,color .14s,border-color .14s;
}
.bb-cell:hover{background:#eee}
.bb-cell.ans{background:#324dc7;color:#fff;border:1px solid #324dc7}
.bb-cell.cur{border:2px solid #1e1e1e;border-style:solid}
.bb-cell.flag::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#c0392b;border:1.5px solid #fff}
.bb-scrim{position:fixed;inset:0;background:transparent;z-index:11}

.bb-modal{position:fixed;inset:0;z-index:14;display:grid;place-items:center;background:rgba(0,0,0,.35);animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.bb-modal-card{background:#fff;border-radius:10px;padding:28px 30px;max-width:560px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.bb-modal-card h2{font-size:20px;margin-bottom:12px}
.bb-modal-card p{font-size:15px;line-height:1.62;color:#3a3a3a;margin-bottom:12px}
.bb-modal-card .bb-btn{margin-top:8px}


/* ------------------------------------------------------------ sheet ---- */
.sheet-scrim{position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:110;animation:fadeIn .2s}
.sheet{
  position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:111;
  background:var(--chalk);border-left:3px solid var(--ink);
  display:flex;flex-direction:column;animation:sheetIn .28s var(--ease);
}
@keyframes sheetIn{from{transform:translateX(100%)}to{transform:none}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:2px solid var(--ink)}
.sheet-head h2{font-size:30px;letter-spacing:-.04em}
.sheet-body{padding:10px 24px 30px;overflow-y:auto}
.sheet-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-bottom:2px solid rgba(20,20,20,.1)}
.sheet-row-btn{cursor:pointer;user-select:none}
.sheet-label{font-size:17px;font-weight:800;letter-spacing:-.02em}
.sheet-hint{font-size:14px;font-weight:500;color:var(--muted);margin-top:3px}
.mini-input{width:82px;padding:9px;text-align:center;border-radius:11px;border:2px solid var(--ink);background:var(--paper);box-shadow:var(--sh-sm);font-weight:900;font-size:17px}
.mini-input:focus{outline:none;background:var(--electric)}
.sheet-sep{height:16px}
.sheet-actions{display:flex;gap:10px;padding-top:18px;flex-wrap:wrap}
.sheet-foot{margin-top:22px;font-size:14px;font-weight:500;color:var(--muted);line-height:1.55}

/* ------------------------------------------------------------ toast ---- */
.toast-wrap{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{
  background:var(--ink);color:var(--chalk);padding:13px 22px;border-radius:99px;
  font-size:16px;font-weight:700;box-shadow:var(--sh-md);border:2px solid var(--ink);
  animation:toastIn .25s var(--ease);max-width:88vw;
}
.toast.out{animation:toastOut .25s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* ---------------------------------------------------------- responsive - */
/* The look is fixed; only the scale and the flow change. The one structural
   difference is the practice view, which collapses from two independently
   scrolling panes into a single column on phones - two scrollers inside a
   500px-tall viewport is unusable, and it is not how the exam behaves on a
   small screen either. */

@media (max-width:1080px){
  .wrap{padding:34px 20px 90px}
  .page-title{font-size:40px}
  .goal-count{font-size:56px}
}

/* tablets and small laptops: keep the split practice view, tighten the shell */
@media (max-width:980px){
  .cards{grid-template-columns:1fr}
  .stat-row,.an-grid{grid-template-columns:repeat(2,1fr)}
  .result-stats{grid-template-columns:1fr}
  .card-title{font-size:30px}
  .bb-pane{padding:22px 22px 44px}
  .bb-passage,.bb-stem{font-size:16px}
  .bb-choice{font-size:15.5px}
}

/* ------------------------------------------------------------- phones -- */
@media (max-width:760px){
  body{font-size:15px}

  .topbar{padding:10px 14px;gap:8px;flex-wrap:nowrap}
  .brand{gap:0}
  .brand-mark{width:32px;height:32px;font-size:17px;border-radius:8px}
  .brand-name{display:none}
  .nav{gap:0;margin-left:4px;min-width:0}
  .nav-link{padding:7px 9px;font-size:14px}
  .nav-link.on::after{left:9px;right:9px}
  .topbar-right{gap:6px}
  .icon-btn{width:34px;height:34px;border-radius:9px;font-size:18px}
  /* the toolbar cannot fit three nav links and the streak; the dashboard
     already reports the streak as a stat, so it goes rather than collide */
  .streak{display:none}

  .wrap{padding:24px 14px 80px}
  /* the title, its caption and the action stack rather than crowd each other */
  .page-head{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:20px}
  .page-head>div{min-width:0}
  .page-head .btn{align-self:flex-start}
  .page-title{font-size:34px}
  .page-sub{font-size:15px;margin-top:6px}

  .goal-card{padding:22px 20px;border-radius:20px}
  .goal-count{font-size:48px}
  .goal-of{font-size:21px}
  .goal-label{font-size:11.5px}
  .goal-badge{font-size:13px;padding:6px 12px}
  .goal-card-foot{font-size:14px;gap:10px}
  .bar{height:14px}

  .stat{padding:14px 15px;border-radius:14px}
  .stat-k{font-size:11.5px}
  .stat-v{font-size:28px}
  .stat-v em{font-size:14px}

  .card{border-radius:20px}
  .card-body{padding:22px 20px 8px}
  .card-title{font-size:28px}
  .card-text{font-size:15px}
  .card-foot{padding:16px 20px 22px;gap:9px}
  .card-foot .btn-lg{width:100%;padding:15px 20px;font-size:17px}
  .mp-name{width:118px}

  .panel{padding:16px 16px;border-radius:14px}
  .chip{padding:8px 13px;font-size:14px}
  .setup-foot{flex-direction:column;align-items:stretch;gap:14px}
  .setup-foot .btn{width:100%}

  .weak-head,.an-head{padding:18px 18px 14px}
  .weak-head h2,.an-head h2{font-size:22px}
  .skill-row{padding:13px 18px;gap:10px}
  .skill-bar{display:none}
  .skill-pct{width:52px;font-size:17px}
  .skill-n{width:60px;font-size:12px}
  .spark{height:112px;padding:20px 16px 0;gap:4px}
  .spark-lbl{font-size:10px}
  .spark-foot{padding:12px 18px 18px;font-size:12.5px}

  .result-ring{width:150px;height:150px}
  .result-ring svg{width:126px;height:126px}
  .result-pct{font-size:40px}
  .result-pct em{font-size:22px}
  .result-title{font-size:34px}
  .result-foot{flex-direction:column}
  .result-foot .btn{width:100%}

  .onboard{padding:44px 18px 80px}
  .onboard-title{font-size:38px}
  .onboard-sub{font-size:16px}
  .goal-picker{grid-template-columns:repeat(2,1fr);gap:10px}
  .goal-opt b{font-size:30px}
  #onboardStart{width:100%}

  .sheet{width:100vw;border-left:0}
  .sheet-actions .btn{flex:1}
  .toast{font-size:15px}
  .toast-wrap{bottom:calc(20px + env(safe-area-inset-bottom))}

  /* ---------------------------------------------------- practice view -- */
  .bb{height:100vh;height:100dvh}

  .bb-head{
    grid-template-columns:1fr auto auto;gap:10px;
    padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));
  }
  .bb-head-l{min-width:0}
  .bb-module{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bb-directions{font-size:12px}
  .bb-head-c{display:flex;align-items:center}
  .bb-timer{font-size:16px}
  .bb-timer-btn{display:none}
  .bb-head-r{gap:10px}
  .bb-tool span{display:none}
  .bb-tool{padding:4px}

  /* one scroll context instead of two */
  .bb-body{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .bb-split{display:none}
  .bb-left,.bb-right{
    flex:none;max-height:none;overflow:visible;
    padding:16px 16px 0;
  }
  .bb-left{padding-bottom:18px}
  .bb-right{border-top:1px dashed #b9b9b9;padding-bottom:30px}
  .bb-passage{font-size:16px;max-width:none}
  .bb-stem{font-size:16px}
  .bb-choice{font-size:15.5px;padding:13px 12px}
  .bb-letter{width:24px;height:24px;font-size:13px}
  .bb-fig{--fig-max:32vh}
  .bb-cross{margin-left:auto}
  .bb-why-t{font-size:14px}

  .bb-foot{
    grid-template-columns:auto 1fr;gap:10px;
    padding:9px 12px;padding-bottom:calc(9px + env(safe-area-inset-bottom));
  }
  .bb-foot-l{display:none}
  .bb-foot-c{justify-content:flex-start}
  .bb-nav-btn{padding:9px 12px;font-size:13px}
  .bb-foot-r{gap:8px}
  .bb-btn{padding:11px 18px;font-size:15px}
  .bb-btn-primary{min-width:92px}

  .bb-pop{width:calc(100vw - 24px);bottom:70px;max-height:60vh;overflow-y:auto}
  .bb-modal-card{padding:22px 20px}
  .bb-modal-card h2{font-size:20px}
  .bb-modal-card p{font-size:14.5px}
}

/* very small phones */
@media (max-width:380px){
  .nav-link{padding:7px 7px;font-size:13.5px}
  .page-title{font-size:30px}
  .goal-count{font-size:42px}
  .stat-v{font-size:25px}
  .card-title{font-size:25px}
  .bb-btn{padding:10px 14px;font-size:14px}
  .bb-nav-btn{font-size:12px;padding:9px 10px}
}

/* phone in landscape: very little height, so trim the vertical chrome */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .bb-head{padding:5px 12px}
  .bb-foot{padding:6px 12px}
  .bb-module{font-size:12px}
  .bb-timer{font-size:14px}
  .bb-fig{--fig-max:52vh}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}