/* Calm, low-motion design. Brand touches: Tack and Tweed charcoal (#252528) + gold (#b18114). */
:root{
  /* Calm, muted palette: warm off-white page (no pure white), one teal action color,
     gold only for small decorations, no large bright red/neon areas, blue/amber feedback (not red/green). */
  --paper:#F8F5EE; --card:#FFFEFA; --ink:#26262B; --muted:#55535A; --line:#CFC5B2; --field:#8C8577; --focus:#26262B;
  --accent:#34587A; --accent-ink:#FFFFFF; --soft:#E6EAF1; --soft2:#F7EDD6; --gold:#A57A16; --gold-ink:#6B4E0C;
  --good:#1E5A7A; --goodbg:#E5EEF3; --bad:#8A4B12; --badbg:#F6EBDC;
  --fs:19px; --lh:1.6; --ls:0; --ws:0;
}
body.lowglare{ --paper:#1E2023; --card:#2B2E33; --ink:#E9E4DA; --muted:#B8B3A9; --line:#3A3E44; --field:#80868E; --focus:#E9E4DA;
  --accent:#9DB6D6; --accent-ink:#14191A; --soft:#2A303A; --soft2:#363127; --paper:#202226; --gold:#D2AE72; --gold-ink:#E2C690;
  --good:#9CC7E0; --goodbg:#1F2F3A; --bad:#E5B887; --badbg:#3A2E20; }
body.bigtext{ --fs:23px; }
body.spaced{ --lh:1.9; --ls:.03em; --ws:.12em; }
*,*::before,*::after{ box-sizing:border-box; animation:none !important; transition:none !important; }
html{ scroll-behavior:auto; }
body{ margin:0; background:var(--paper); color:var(--ink);
  font-family:"Figtree","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:var(--fs); line-height:var(--lh); letter-spacing:var(--ls); word-spacing:var(--ws); }
a{ color:var(--accent); text-underline-offset:3px; }
.skip{ position:absolute; left:-9999px; } .skip:focus{ left:8px; top:8px; background:var(--card); padding:8px; }
header.top{ background:var(--card); border-bottom:2px solid var(--line); }
.bar{ max-width:960px; margin:0 auto; padding:10px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.brand{ font-weight:700; font-size:1.1em; margin-right:auto; flex:1 1 0; min-width:0; color:var(--ink); text-decoration:none; }
.brand span{ color:var(--gold-ink); }
nav.tabs{ display:flex; flex-wrap:wrap; gap:6px; order:3; flex-basis:100%; }
.logout{ order:2; margin:0; font-size:1em; font-weight:600; padding:10px 22px; min-height:48px; background:var(--card); color:var(--accent); border:2px solid var(--accent); border-radius:12px; white-space:nowrap; }
.logout:hover{ background:var(--soft); }
nav.tabs a{ padding:6px 12px; border-radius:10px; text-decoration:none; color:var(--ink); border:2px solid transparent; font-size:.9em; }
nav.tabs a.on{ border-color:var(--accent); background:var(--soft); font-weight:600; }
main{ max-width:820px; margin:0 auto; padding:22px 18px 60px; }
h1{ font-size:1.6em; line-height:1.25; margin:.2em 0 .5em; } h2{ font-size:1.25em; margin:1.2em 0 .4em; } h3{ font-size:1.05em; margin:.8em 0 .3em; }
.card{ background:var(--card); border:2px solid var(--line); border-radius:16px; padding:18px 20px; margin:14px 0; box-shadow:var(--shadow); }
.card.soft{ background:var(--soft); } .card.warm{ background:var(--soft2); }
.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.stat{ text-align:center; } .stat b{ display:block; font-size:1.8em; line-height:1.1; }
.muted{ color:var(--muted); } .small{ font-size:.85em; }
button,.btn{ font:inherit; font-size:.95em; cursor:pointer; border-radius:12px; padding:10px 18px; border:2px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); text-decoration:none; display:inline-block; margin:4px 6px 4px 0; }
button.ghost,.btn.ghost{ background:transparent; color:var(--accent); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
input,select,textarea{ font:inherit; padding:10px 12px; border-radius:10px; border:2px solid var(--field); background:var(--card); color:var(--ink); width:100%; }
label{ display:block; font-weight:600; margin:10px 0 4px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; } .row>*{ flex:1 1 160px; }
.choice{ display:block; width:100%; text-align:left; background:var(--card); color:var(--ink); border:2px solid var(--field); margin:8px 0; }
.choice:disabled{ cursor:default; }
.choice.right{ border-color:var(--good); background:var(--goodbg); } .choice.wrong{ border-color:var(--bad); background:var(--badbg); }
.feedback{ border-radius:14px; padding:14px 16px; margin-top:12px; border:2px solid var(--line); }
.feedback.good{ background:var(--goodbg); border-color:var(--good); } .feedback.bad{ background:var(--badbg); border-color:var(--bad); }
.label-orig{ display:inline-block; font-size:.78em; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--soft2); color:var(--gold-ink); border:1px solid var(--gold); }
.label-off{ display:inline-block; font-size:.78em; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--soft); color:var(--accent); border:1px solid var(--accent); }
.fig{ max-width:420px; margin:10px auto; } .fig svg{ width:100%; height:auto; display:block; }
svg .f{ font-family:inherit; font-size:15px; fill:var(--ink); } svg .s{ font-size:13px; } svg .b{ font-weight:700; } svg .c{ text-anchor:middle; }
.steps{ list-style:none; padding:0; margin:0; } .steps li{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--line); }
.steps .min{ min-width:58px; font-weight:700; color:var(--accent); }
.steps li.done{ opacity:.6; } .steps li.now{ background:var(--soft); border-radius:10px; padding:10px; }
.monthpick{ display:flex; flex-wrap:wrap; gap:6px; } .monthpick button{ padding:6px 10px; font-size:.82em; background:var(--card); color:var(--ink); border-color:var(--field); }
.monthpick button.on{ border-color:var(--accent); background:var(--soft); font-weight:700; }
table{ width:100%; border-collapse:collapse; font-size:.92em; } th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
.badge{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; border:2px dashed var(--line); }
.badge.got{ border-style:solid; border-color:var(--gold); background:var(--soft2); }
.badge .ic{ font-size:1.5em; width:1.6em; text-align:center; }
.pager{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
.notice{ border-left:6px solid var(--gold); background:var(--soft2); padding:12px 16px; border-radius:10px; margin:12px 0; }
.chart svg{ width:100%; height:auto; }
.hero{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.ph{ flex:0 0 180px; height:130px; border-radius:16px; border:2px dashed var(--gold); background:var(--soft2); display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:.72em; color:var(--gold-ink); padding:8px; }
footer{ max-width:820px; margin:0 auto; padding:0 18px 40px; font-size:.78em; color:var(--muted); }
@media print{ header.top,nav,button,.btn{ display:none !important; } .card{ break-inside:avoid; } }
main:focus{ outline:none; }
.grid.stats{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .grid.stats .card{ padding:12px 8px; margin:6px 0; }
@media (max-width:520px){ .stat b{ font-size:1.4em; } .grid.stats .card{ font-size:.8em; } }
.vwrap{ position:relative; width:100%; max-width:560px; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:2px solid var(--line); }
.vwrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.monthpick a.btn{ padding:6px 12px; font-size:.82em; margin:0; }

.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal .day{ aspect-ratio:1; border-radius:8px; border:2px solid var(--field); display:flex; align-items:center; justify-content:center; font-size:.75em; color:var(--muted); }
.cal .day.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700; }
.cal .dow{ text-align:center; font-size:.75em; font-weight:700; color:var(--muted); }
.cal .day.future{ border-style:dashed; border-color:var(--line); }
.cal .day.now{ outline:3px solid var(--ink); outline-offset:1px; }
/* Touch-friendly sizing (iPhone home-screen app) */
nav.tabs a, .monthpick button, .monthpick a, button, .btn{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.choice{ display:block; }
input[type=checkbox], input[type=radio]{ width:24px; height:24px; min-width:24px; }
html{ -webkit-text-size-adjust:100%; } img, svg, iframe, table{ max-width:100%; }
.bar{ padding-top:max(10px, env(safe-area-inset-top)); }
/* Still photos: small, to the side, no motion */
.pic{ flex:0 0 auto; width:180px; height:130px; object-fit:cover; border-radius:16px; border:2px solid var(--line); margin-left:auto; }
.hero.tight{ justify-content:space-between; margin-bottom:8px; flex-wrap:nowrap; } .hero.tight > :first-child{ flex:1 1 auto; min-width:0; } .hero.tight .pic{ width:140px; height:100px; }
.login-hero{ display:flex; gap:18px; align-items:center; }
.login-star{ flex:0 0 88px; height:88px; border-radius:22px; background:var(--soft); border:2px solid var(--line); color:var(--gold-ink); font-size:48px; display:flex; align-items:center; justify-content:center; }
@media (max-width:520px){ .pic{ width:120px; height:88px; } .hero.tight .pic{ width:96px; height:70px; } }
.checklist{ list-style:none; padding:0; } .checklist li{ padding:8px 0; border-bottom:1px dashed var(--line); }
.checklist label{ display:flex; gap:12px; align-items:flex-start; min-height:44px; cursor:pointer; } .checklist input{ margin-top:4px; }
.lcard ul{ margin:.4em 0; }
textarea{ font-size:.92em; line-height:1.5; }
/* in-site panel for official resources that allow embedding (the sample-questions PDF) */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
body.noscroll{ overflow:hidden; }
.embed-wrap{ position:fixed; inset:0; background:rgba(40,36,30,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:12px; }
.embed-box{ background:var(--paper); border-radius:16px; width:min(1000px,100%); height:min(92vh,900px); display:flex; flex-direction:column; padding:12px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.embed-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.embed-actions{ display:flex; gap:8px; align-items:center; }
.embed-box iframe{ flex:1; width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; }
.bluebook-card{ border:2px solid var(--accent); }
.sample-card{ border:2px solid var(--gold); }
.steps-plain{ margin:.3em 0 .6em; padding-left:1.3em; } .steps-plain li{ margin:.25em 0; }
/* guided lesson flow: one page, 5 small steps */
.flow-bar{ height:14px; background:var(--card,#fff); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.flow-bar span{ display:block; height:100%; background:var(--accent); border-radius:999px; }
.flow-check{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px; }
.flow-check li button{ font-size:.92em; padding:6px 12px; border-radius:999px; background:var(--paper); color:var(--ink); border:1px solid var(--line); min-height:40px; }
.flow-check li.done button{ background:var(--soft); border-color:var(--accent); }
.flow-check li.now button{ border:2px solid var(--gold); font-weight:700; }
.flow-step{ padding:0; overflow:hidden; }
.flow-head{ width:100%; display:flex; align-items:center; gap:12px; text-align:left; background:transparent; color:var(--ink); border:0; border-radius:0; padding:16px 18px; font-size:1.05em; font-weight:600; min-height:56px; }
.flow-head span:nth-child(2){ flex:1; }
.flow-num{ display:inline-flex; width:34px; height:34px; border-radius:50%; align-items:center; justify-content:center; background:var(--soft2); border:1px solid var(--gold); font-weight:700; }
.flow-step.is-done .flow-num{ background:var(--soft); border-color:var(--accent); color:var(--accent); }
.flow-step.open{ border:2px solid var(--gold); }
.flow-body{ padding:0 18px 18px; }
button.big, .btn.big{ font-size:1.08em; padding:14px 22px; min-height:52px; }
.flow-next{ margin-top:1em; }
.lesson-road{ list-style:none; padding:0; display:grid; gap:8px; }
.lesson-road a{ display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card,#fff); color:var(--ink); text-decoration:none; min-height:56px; }
.lesson-road li.done a{ background:var(--soft); }
.lesson-road li.next a{ border:2px solid var(--gold); }
.lr-check{ display:inline-flex; width:30px; height:30px; flex:none; border-radius:50%; border:2px solid var(--accent); align-items:center; justify-content:center; color:var(--accent); font-weight:700; }
/* help page + focus timer (text only, no animation) */
.howto-tip p{ margin:.3em 0; }
.reading li{ margin:.6em 0; }
.ft-fab{ position:fixed; right:16px; bottom:16px; z-index:40; border-radius:999px; padding:12px 18px; min-height:48px; font-size:1em; box-shadow:0 2px 10px rgba(0,0,0,.15); }
.ft-panel{ position:fixed; right:16px; bottom:76px; z-index:41; width:min(360px, calc(100vw - 32px)); background:var(--paper); border:2px solid var(--accent); border-radius:16px; padding:14px 16px; box-shadow:0 6px 24px rgba(0,0,0,.18); }
.ft-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4em; }
.ft-phase{ font-size:1.15em; font-weight:700; margin:.2em 0; }
.ft-left{ font-size:1.6em; font-weight:700; margin:.2em 0; }
.ft-row{ display:flex; gap:8px; flex-wrap:wrap; }
.ft-opts{ display:flex; gap:16px; flex-wrap:wrap; font-size:.92em; margin-top:.4em; }
.ft-opts label{ display:flex; gap:6px; align-items:center; font-weight:400; }
.ft-opts input{ width:auto; }
@media (max-width:520px){ .ft-panel{ left:12px; right:12px; width:auto; bottom:72px; } .ft-fab{ right:12px; bottom:12px; } }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } }
body{ padding-bottom:72px; }
.ft-sound{ display:grid; grid-template-columns:auto 1fr; gap:6px 10px; align-items:center; margin-top:.5em; font-size:.92em; }
.ft-sound select, .ft-sound input{ width:100%; margin:0; }

/* ---- Box color system (Oct 2026). Low-saturation tints that sit close together in hue, so boxes stand out
   from the page without strong color contrast. Every tint keeps body text at WCAG AA (checked by regress_colors.py). ---- */
:root{ --shadow:0 2px 6px rgba(38,38,43,.10), 0 1px 2px rgba(38,38,43,.06);
  --t-prac:#E6EAF1; --b-prac:#93A3BD;   /* practice: soft slate blue */
  --t-off:#E2F0F6;  --b-off:#7EAFC8;    /* official College Board: soft blue */
  --t-tip:#F7EDD6;  --b-tip:#CDAE6A;    /* tips + notes: warm cream (Tack and Tweed gold family) */
  --t-time:#E9EAEB; --b-time:#9A9FA4;   /* focus timer: brand ink neutral (was lilac, Oct 15) */ }
body.lowglare{ --shadow:0 2px 8px rgba(0,0,0,.45);
  --t-prac:#272D37; --b-prac:#62728E; --t-off:#1F3138; --b-off:#4D8399; --t-tip:#352F22; --b-tip:#8C7542; --t-time:#25292D; --b-time:#5A646C; }
.card.soft, .practice-card, .flow-step{ background:var(--t-prac); border-color:var(--b-prac); }
.card.warm, .howto-tip, .notice{ background:var(--t-tip); border-color:var(--b-tip); }
.notice{ border:2px solid var(--b-tip); border-left:6px solid var(--gold); box-shadow:var(--shadow); }
.sample-card, .bluebook-card, .card.soft.bluebook-card, .card.warm.sample-card{ background:var(--t-off); border:2px solid var(--b-off); border-left:6px solid var(--b-off); }
.card.stat, .card.chart{ background:var(--card); border-color:var(--line); }
.flow-step.open{ border:2px solid var(--accent); }
.flow-step .flow-body{ background:var(--card); border-top:1px solid var(--b-prac); padding-top:14px; }
.embed-box{ background:var(--t-off); border:2px solid var(--b-off); }
.ft-panel{ background:var(--t-time); border:2px solid var(--b-time); box-shadow:0 6px 20px rgba(38,38,43,.18); }
.ft-fab, .ft-fab:hover{ background:#2C4459; border-color:#2C4459; color:#fff; }   /* brand slate hover/text tone */
body.lowglare .ft-fab{ background:#C1CBD3; border-color:#C1CBD3; color:#1F2A33; }
header.top{ box-shadow:var(--shadow); }
.choice{ background:var(--card); }
/* ---- Bigger icons ---- */
.ico{ display:inline-block; font-size:1.3em; line-height:1; vertical-align:-.12em; }
h1 .ico, h2 .ico, h3 .ico{ font-size:1.2em; }
.tab-ico{ display:inline-block; font-size:1.25em; line-height:1; vertical-align:-.12em; margin-right:.3em; }
.ft-fab .ico{ font-size:1.45em; }
.flow-num{ width:42px; height:42px; font-size:1.1em; flex:none; }
.lr-check{ width:38px; height:38px; font-size:1.1em; }
.login-star{ font-size:56px; }
input[type=range], input[type=checkbox]{ accent-color:var(--accent); }
/* focus timer pill: small, in the corner, with page padding so it never sits on top of the last buttons */
.ft-fab.ft-mini{ padding:8px 14px; min-height:44px; font-size:.95em; font-weight:700; }
body.has-ft main{ padding-bottom:110px; }
.ft-sound #ftPlay{ margin:0; justify-self:start; }
@media (max-width:520px){ body.has-ft main{ padding-bottom:130px; } .ft-panel{ max-height:calc(100vh - 96px); overflow:auto; } }
/* Oct 12 fix: panel never taller than the window, header stays visible, compact layout.
   Pill + panel sit bottom-LEFT so they never collide with the "Powered by Netlify" badge (bottom-right). */
.ft-fab{ right:auto; left:16px; }
.ft-panel{ right:auto; left:16px; bottom:72px; padding:0 14px 10px; width:min(340px, calc(100vw - 32px));
  max-height:calc(100vh - 84px); max-height:calc(100dvh - 84px); overflow-y:auto; overscroll-behavior:contain; }
.ft-head{ position:sticky; top:0; z-index:1; background:var(--t-time); margin:0 -14px .3em; padding:8px 14px; border-bottom:1px solid var(--b-time); }
.ft-head button{ margin:0; padding:6px 12px; min-height:40px; }
.ft-panel p{ margin:.35em 0; }
.ft-panel .ft-phase{ font-size:1.05em; margin:.1em 0; }
.ft-panel .ft-left{ font-size:1.35em; margin:.05em 0; }
.ft-panel button.big{ font-size:1em; padding:9px 16px; min-height:44px; margin:2px 6px 2px 0; }
.ft-panel .monthpick button{ min-height:40px; }
.ft-opts{ gap:6px 14px; margin-top:.2em; font-size:.88em; }
.ft-sound{ grid-template-columns:auto 1fr auto; gap:6px 8px; font-size:.88em; margin-top:.4em; }
.ft-sound #ftPlay{ padding:7px 12px; min-height:40px; font-size:.95em; white-space:nowrap; }
.ft-sound .ft-volin{ grid-column:2 / 4; }
.ft-panel .small{ font-size:.82em; }
@media (max-width:520px){ .ft-panel{ left:10px; right:10px; width:auto; bottom:68px; max-height:calc(100vh - 80px); max-height:calc(100dvh - 80px); } .ft-fab{ left:10px; right:auto; bottom:10px; } }
.goal-line{ margin:.2em 0 1em; }
.goal-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px 14px; }
.goal-row label{ font-size:.88em; }
/* practice focus window (no zoom/slide; the site has no animations at all) */
.qm-wrap{ position:fixed; inset:0; z-index:55; background:rgba(38,36,30,.55); display:flex; align-items:center; justify-content:center; padding:2vh 2vw; }
.qm-box{ background:var(--paper); border:2px solid var(--b-prac); border-radius:16px; width:min(860px,100%); max-height:96vh; max-height:96dvh; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.qm-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-bottom:2px solid var(--b-prac); background:var(--t-prac); border-radius:14px 14px 0 0; }
.qm-bar button{ margin:0; }
.qm-prog{ color:var(--muted); font-weight:600; }
.qm-body{ overflow-y:auto; padding:6px 16px 16px; outline:none; }
.qm-body .card{ margin:10px 0; }
@media (max-width:640px){ .qm-wrap{ padding:0; } .qm-box{ width:100%; height:100%; max-height:none; border-radius:0; border:0; } .qm-bar{ border-radius:0; } }
.ft-fab{ z-index:70; } .ft-panel{ z-index:71; }
/* explanations */
.explain{ background:var(--t-off); border:2px solid var(--b-off); border-radius:12px; padding:10px 14px; margin-top:10px; }
.explain p{ margin:.3em 0; }
/* stuck hint + helper */
.stuck{ margin:10px 0; } .stuck summary{ cursor:pointer; font-weight:600; color:var(--accent); padding:8px 0; min-height:44px; }
.stuck-body{ display:flex; gap:12px; align-items:flex-start; background:var(--t-tip); border:2px solid var(--b-tip); border-radius:12px; padding:10px 14px; }
.stuck-e{ font-size:2.4em; line-height:1; }
.helper-pick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.hp{ display:flex; flex-direction:column; align-items:center; gap:2px; border:2px solid var(--line); border-radius:12px; padding:8px; background:var(--card); font-weight:400; cursor:pointer; }
.hp.on{ border-color:var(--accent); background:var(--t-prac); font-weight:700; } .hp input{ width:auto; } .hp-e{ font-size:2.2em; line-height:1.1; }
button.linkish{ background:none; border:0; color:var(--accent); text-decoration:underline; padding:2px 4px; margin:0; font-size:inherit; min-height:0; }
/* check-in */
.faces{ display:flex; flex-wrap:wrap; gap:6px; } .face{ display:flex; flex-direction:column; align-items:center; background:var(--card); color:var(--ink); border:2px solid var(--line); min-width:72px; padding:6px 8px; }
.face span:first-child{ font-size:1.8em; line-height:1.1; } .face.on{ border-color:var(--accent); background:var(--t-prac); font-weight:700; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:.5em; } .chip{ background:var(--card); color:var(--ink); border:2px solid var(--line); border-radius:999px; padding:6px 12px; font-size:.9em; }
.chip.on{ border-color:var(--accent); background:var(--t-prac); font-weight:700; }
.checkin{ background:var(--t-tip); border-color:var(--b-tip); }
.trythis .tt{ border-top:1px solid var(--b-tip); padding-top:6px; } .tt-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .tt-row button,.tt-row .btn{ margin:0; }
.notice.warn{ border-left-color:var(--bad); background:var(--badbg); }
.trap-tip{ border-left:6px solid var(--gold); }
.print-head .small{ color:var(--muted); }
@media print{ header.top, footer, nav, .no-print, .ft-fab, .ft-panel, .skip, .qm-wrap{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; font-size:12pt; } main{ max-width:none; padding:0; } .card{ box-shadow:none; border:1px solid #999; break-inside:avoid; background:#fff !important; }
  .chart svg{ max-width:100%; } table{ width:100%; } }
.qm-bar button#qmClose{ white-space:nowrap; padding:10px 16px; min-height:48px; flex:0 0 auto; }
#fpq{ scroll-margin-top:90px; }
/* ---------- public landing ---------- */
body.public main{ max-width:1100px; } body.public > footer{ display:none; }
.wm{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.wm-tile{ width:40px; height:40px; border-radius:11px; background:var(--accent); color:#F7EDD6; display:inline-flex; align-items:center; justify-content:center; font-size:22px; box-shadow:inset 0 -3px 0 rgba(0,0,0,.18); }
.wm-text{ display:inline-flex; align-items:baseline; gap:6px; font-weight:800; letter-spacing:.01em; font-size:1.25em; }
.wm-sat{ color:var(--accent); } .wm-q{ color:var(--gold-ink); font-weight:600; }
.wm-big .wm-tile{ width:56px; height:56px; font-size:30px; border-radius:15px; } .wm-big .wm-text{ font-size:1.6em; }
.lp-hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; background:var(--t-prac); border:2px solid var(--b-prac); border-radius:22px; padding:28px; margin:8px 0 26px; }
.lp-hero h1{ font-size:clamp(1.7em,4vw,2.4em); line-height:1.15; margin:.5em 0 .3em; }
.lp-tag{ font-size:1.1em; color:var(--muted); max-width:34em; }
.lp-cta{ display:flex; flex-wrap:wrap; gap:10px; } .lp-cta .btn{ margin:0; text-decoration:none; }
.lp-hero-img{ margin:0; } .lp-hero-img img, .lp-comfort img{ width:100%; height:auto; border-radius:16px; display:block; border:2px solid var(--line); }
.lp-sec{ margin:0 0 30px; } .lp-sec > h2{ font-size:1.5em; margin-bottom:.4em; }
.lp-steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.lp-step{ background:var(--card); border:2px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.lp-step img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top left; border-bottom:2px solid var(--line); background:var(--paper); }
.lp-step > div{ padding:10px 14px 14px; } .lp-step h3{ margin:.2em 0 .3em; font-size:1.05em; display:flex; gap:8px; align-items:center; } .lp-step p{ margin:0; font-size:.95em; }
.lp-n{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; font-size:.85em; }
.lp-step:nth-child(2){ border-color:var(--b-prac); } .lp-step:nth-child(3){ border-color:var(--b-time); } .lp-step:nth-child(4){ border-color:var(--b-off); } .lp-step:nth-child(5){ border-color:var(--b-tip); }
.lp-diff{ border:2px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); }
.lp-row{ display:grid; grid-template-columns:1fr 1.3fr; } .lp-row > span{ padding:12px 16px; border-top:1px solid var(--line); }
.lp-hd > span{ border-top:0; font-weight:700; } .lp-hd > span:last-child{ background:var(--t-prac); }
.lp-a{ color:var(--muted); } .lp-b{ background:var(--t-prac); font-weight:600; }
.lp-comfort{ display:grid; grid-template-columns:1.3fr .7fr; gap:24px; align-items:center; background:var(--t-time); border:2px solid var(--b-time); border-radius:20px; padding:22px 26px; }
.lp-comfort ul{ padding-left:1.1em; } .lp-comfort li{ margin:.45em 0; } .lp-comfort figure{ margin:0; }
.lp-login{ max-width:560px; margin:0 auto 30px; scroll-margin-top:16px; }
.lp-links{ columns:2; padding-left:1.1em; } .lp-links li{ margin:.3em 0; break-inside:avoid; }
.lp-foot{ border-top:2px solid var(--line); padding:14px 0 6px; font-size:.92em; color:var(--muted); }
@media (max-width:760px){ .lp-hero, .lp-comfort{ grid-template-columns:1fr; padding:18px; } .lp-hero-img{ order:-1; } .lp-links{ columns:1; }
  .lp-row{ grid-template-columns:1fr; } .lp-hd{ display:none; } .lp-a::before{ content:"Typical prep: "; font-weight:700; } .lp-a{ border-top:2px solid var(--line); } .lp-b{ border-top:0 !important; } }
.session-card{ border:2px solid var(--b-prac); border-left:6px solid var(--accent); }
.session-mini{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; background:var(--t-prac); border:2px solid var(--b-prac); border-left:6px solid var(--accent); padding:12px 16px; margin-top:4px; }
.session-mini .btn{ margin:0; text-decoration:none; }
.lp-why{ margin-top:16px; background:var(--t-off); border:2px solid var(--b-off); } .lp-refs ol{ padding-left:1.3em; } .lp-refs li{ margin:.3em 0; overflow-wrap:anywhere; }
body.lowglare .wm-tile{ color:#14191A; }
.lp-steps{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }

/* AcePace wordmark: Ace bold blue + Pace gold; forward-motion chevrons in the tile */
.wm-tile{ font-weight:800; letter-spacing:-.12em; font-size:20px; padding-right:3px; }
.wm-big .wm-tile{ font-size:28px; }
.lp-stats{ display:flex; flex-wrap:wrap; gap:10px 34px; align-items:flex-end; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 4px; margin:-8px 0 28px; }
.lp-stat b{ display:block; font-size:1.7em; line-height:1.1; color:var(--accent); } .lp-stat span{ font-size:.82em; color:var(--muted); }
.lp-stats a{ font-size:.85em; margin-left:auto; }

/* ---------- Figtree + tidy menu + AcePace brand + icon set ---------- */
body{ font-feature-settings:"ss01" 0; letter-spacing:.005em; }
h1,h2,h3{ letter-spacing:-.005em; }
.brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); font-size:1.15em; }
.brand img{ border-radius:8px; display:block; } .brand .wm-text{ gap:0; font-size:1em; } .brand-sub{ color:var(--muted); font-weight:500; font-size:.8em; }
.wm-text{ gap:0 !important; } .wm-sat{ color:var(--accent); font-weight:800; } .wm-q{ color:var(--gold-ink); font-weight:700; }
.ace-logo{ display:block; flex:0 0 auto; border-radius:22%; }
nav.tabs{ gap:4px; align-items:center; flex-wrap:nowrap; }
nav.tabs a, .more > summary{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; min-height:42px; border-radius:10px; border:0; font-size:.95em; color:var(--ink); text-decoration:none; font-weight:500; background:none; position:relative; }
nav.tabs a:hover, .more > summary:hover{ background:var(--soft); }
nav.tabs a.on, .more.on > summary{ border:0; background:var(--soft); color:var(--accent); font-weight:700; box-shadow:inset 0 -3px 0 var(--accent); }
.tab-ico{ display:inline-flex; } .tab-ico .aico, .aico{ width:19px; height:19px; flex:0 0 auto; }
.more{ position:relative; margin-left:auto; } .more > summary{ cursor:pointer; list-style:none; } .more > summary::-webkit-details-marker{ display:none; }
.more > summary::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); margin-left:2px; }
.more-menu{ position:absolute; right:0; top:calc(100% + 6px); z-index:40; background:var(--card); border:2px solid var(--line); border-radius:14px; box-shadow:0 8px 24px rgba(30,35,45,.16); padding:6px; min-width:230px; display:flex; flex-direction:column; }
.more-menu a{ width:100%; justify-content:flex-start; box-sizing:border-box; } nav.tabs .more-menu a.on{ box-shadow:inset 3px 0 0 var(--accent); }
@media (max-width:700px){ nav.tabs{ gap:2px; justify-content:space-between; } nav.tabs > a, .more > summary{ flex-direction:column; gap:2px; padding:5px 6px; font-size:.74em; min-height:50px; }
  nav.tabs > a .aico, .more > summary .aico{ width:21px; height:21px; } .more{ margin-left:0; } .more > summary::after{ display:none; } .more-menu{ font-size:1.25em; } .brand-sub{ display:none; } }
.more > summary .mico{ display:inline-flex; }
/* box-type icons (masks follow theme color) */
.card.soft > h2:first-child::before, .practice-card > h2:first-child::before, .sample-card > h2:first-child::before, .bluebook-card > h2:first-child::before, .card.warm > h2:first-child::before, .ft-head::before, .session-card > h2:first-child::before{
  content:""; display:inline-block; width:1em; height:1em; margin-right:.4em; vertical-align:-.12em; background:var(--accent); -webkit-mask:var(--ico-practice) center/contain no-repeat; mask:var(--ico-practice) center/contain no-repeat; }
.sample-card > h2:first-child::before, .bluebook-card > h2:first-child::before{ -webkit-mask-image:var(--ico-official); mask-image:var(--ico-official); background:var(--good); }
.card.warm > h2:first-child::before{ -webkit-mask-image:var(--ico-tips); mask-image:var(--ico-tips); background:var(--gold-ink); }
.ft-head::before{ -webkit-mask-image:var(--ico-timer); mask-image:var(--ico-timer); background:#2C4459; }
body.lowglare .ft-head::before{ background:#C1CBD3; }
.session-card > h2:first-child::before{ -webkit-mask-image:var(--ico-timer); mask-image:var(--ico-timer); }
.lp-mark{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } .wm-tagline{ font-size:.85em; color:var(--muted); font-weight:600; margin-left:66px; margin-top:-6px; }
.lp-sub{ font-size:1.2em; font-weight:700; color:var(--accent); margin:.1em 0 .4em; }
@media (max-width:760px){ .wm-tagline{ margin-left:0; margin-top:0; } }
.brand .wm-text .wm-sat{ color:var(--accent); } .brand .wm-text .wm-q{ color:var(--gold-ink); }
.more-menu a{ justify-content:flex-start !important; flex-direction:row !important; text-align:left; }
@media (max-width:700px){ .more-menu{ min-width:240px; } .more-menu a{ font-size:.85em !important; min-height:44px; } }
.lvl{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:.78em; font-weight:700; border:1px solid; vertical-align:1px; }
.lv-e{ color:#3E5A3A; background:#EEF3EA; border-color:#9DB497; } .lv-m{ color:#34587A; background:#E6EAF1; border-color:#93A3BD; } .lv-h{ color:#6B4E0C; background:#F7EDD6; border-color:#CDAE6A; }
body.lowglare .lv-e{ color:#BFD6B8; background:#25302A; } body.lowglare .lv-m{ color:#BCD0EA; background:#272D37; } body.lowglare .lv-h{ color:#E2C690; background:#352F22; }
/* Oct 12 v2: sound dropdown gets its own full-width row so the full sound name is readable */
.ft-sound{ grid-auto-flow:row dense; }
.ft-sound #ftSnd{ grid-column:1 / -1; width:100%; min-width:0; min-height:44px; font-size:1em; padding:6px 10px; }

/* ---- Oct 15: neurodivergent support ---- */
.msg-bar{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin:0 0 14px; }
.msg-bar .ghost{ min-height:40px; }
button.armed{ border-color:#9B2C2C; color:#9B2C2C; font-weight:700; }
body.lowglare button.armed{ border-color:#F0A8A8; color:#F0A8A8; }
.step-strip{ list-style:none; padding:0; margin:.5em 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.step-strip li{ border:1.5px solid var(--line); border-radius:8px; padding:3px 8px; font-size:.85em; background:var(--card); }
.step-strip .ss-tag{ font-weight:700; }
.step-strip .ss-now{ border-color:var(--accent); border-width:2px; }
.step-strip .ss-done{ color:var(--muted); }
.step-strip .ss-min{ color:var(--muted); }
/* Sensory-friendly mode: no decorative photos or emoji, no sound controls, no countdowns */
body.sensory img.pic, body.sensory .lp-hero-img, body.sensory .lp-comfort figure, body.sensory .hero .pic, body.sensory .ico, body.sensory .ft-sound, body.sensory #ftSndNote{ display:none !important; }
body.sensory #timer, body.noclock #timer{ display:none; }
/* Oct 15: guided Today session */
.ts-say{ font-size:1.08em; }
.ts-steps li{ padding:0; } .ts-row{ display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; background:transparent; color:var(--ink); border:0; border-radius:10px; padding:10px 6px; font-weight:400; }
.ts-row:hover,.ts-row:focus-visible{ background:var(--soft); }
.step-strip .ss-go{ background:transparent; color:inherit; border:0; padding:0; font:inherit; font-weight:400; cursor:pointer; text-align:left; }
.step-strip .ss-go:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ts-choice.picked{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.feedback.hint{ background:var(--soft); border-left:4px solid var(--accent); }
.ts-next{ margin-top:1em; } .ts-done-note{ color:var(--muted); margin-top:0; }
.ts-miss{ margin:.6em 0; } .ts-off{ margin:.6em 0; } .ts-off summary{ cursor:pointer; font-weight:700; }
.ts-enter{ animation:tsIn .35s ease-out; } @keyframes tsIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .ts-enter{ animation:none; } }
body.sensory .ts-enter{ animation:none; }
/* counselor helper dialog */
.cs-wrap{ position:fixed; inset:0; background:rgba(20,28,40,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:12px; }
.cs-box{ background:var(--card); color:var(--ink); border-radius:14px; max-width:620px; width:100%; max-height:90vh; overflow:auto; padding:18px 20px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.cs-bar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:.4em; }
.cs-steps li{ margin:.45em 0; } .cs-card{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:.4em 0; } .cs-card dt{ font-weight:700; } .cs-card dd{ margin:0; overflow-wrap:anywhere; }
body.sensory .cs-wrap{ background:rgba(20,28,40,.3); } body.sensory .cs-box{ box-shadow:none; border:1px solid var(--line); }
/* Oct 15: step chips read "Done · Warm-up · about 3 min" and wrap cleanly on narrow screens */
.step-strip li{ max-width:100%; } .step-strip .ss-name{ font-weight:600; } .step-strip .ss-min,.step-strip .ss-name,.step-strip .ss-tag{ white-space:nowrap; }
.step-strip .ss-go{ display:inline; white-space:normal; }
/* Oct 15: tappable progress bar at the top of each step screen */
.step-nav{ margin:.2em 0 .6em; max-width:100%; }
.step-bar{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.step-bar li{ padding:0; border:0; background:none; flex:1 1 150px; min-width:0; }
.step-bar .ss-go{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:.1em; width:100%; min-height:48px; min-width:48px; padding:6px 10px; border:1.5px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); text-align:center; line-height:1.25; }
.step-bar .ss-done .ss-go{ color:var(--muted); }
.step-bar .ss-now .ss-go{ border:2px solid var(--accent); background:var(--soft); }
.step-bar .ss-go:hover{ border-color:var(--accent); }
.step-bar .ss-go:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
@media (max-width:520px){ .step-bar li{ flex:1 1 100%; } .step-bar .ss-go{ justify-content:flex-start; text-align:left; } }
.step-bar .ss-sep{ margin:0 .25em; } .step-bar li{ flex:1 1 100px; }
@media (max-width:520px){ .step-bar li{ flex:1 1 100%; } }
/* Oct 15: official question answer panel */
.off-list{ padding-left:1.2em; } .off-item{ margin:.7em 0; } .off-pick{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:.4em; }
.off-c{ min-width:48px; min-height:44px; } .off-c.picked{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--soft); }
/* Oct 15: tap-to-ask Help button (js/help.js): bottom-right; the Focus timer is bottom-left */
.help-fab{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:69; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 16px 0 8px; border-radius:999px; background:var(--card); color:var(--accent); border:2px solid var(--accent); font-weight:700; box-shadow:0 2px 8px rgba(31,42,51,.12); }
.help-fab .hq{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:1.05em; }
.help-fab[hidden]{ display:none; }
.help-panel{ position:fixed; right:16px; bottom:76px; z-index:72; width:min(340px,calc(100vw - 32px)); max-height:calc(100vh - 110px); overflow:auto; background:var(--paper); border:2px solid var(--accent); border-radius:16px; padding:10px 14px 12px; box-shadow:0 6px 20px rgba(38,38,43,.18); }
.hp-top{ display:flex; align-items:center; gap:8px; } .hp-top b{ flex:1; } .hp-x{ min-height:40px; padding:4px 12px; }
.hp-mark{ color:var(--accent); width:30px; height:30px; display:inline-block; } .hp-mark .hmark{ width:30px; height:30px; }
.hp-q{ display:block; width:100%; text-align:left; margin:.35em 0 0; min-height:44px; background:var(--soft); color:var(--ink); border:1px solid var(--line); border-radius:10px; font-weight:600; }
.hp-a{ margin:.3em .2em .4em; }
main{ padding-bottom:84px; }
@media (max-width:520px){ .help-fab{ right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); } .help-panel{ right:10px; left:10px; width:auto; bottom:68px; } }
/* helper line icons (helper-icons.js) */
.hm-wrap{ display:inline-block; color:var(--accent); width:1em; height:1em; vertical-align:-.15em; } .hm-wrap .hmark{ width:100%; height:100%; display:block; }
.hp-e .hm-wrap{ width:44px; height:44px; } .stuck-e .hm-wrap{ width:48px; height:48px; } h2 .hm-wrap{ width:1.1em; height:1.1em; }
body.lowglare{ --gold-line:#D2AE72; }
@media print{ .help-fab, .help-panel{ display:none !important; } }
.demo-bar{ margin:8px 16px; }
.ft-end{ position:fixed; left:50%; transform:translateX(-50%); top:12px; z-index:60; background:var(--soft2,#eef1f6); border:2px solid var(--b-tip,#5b6b8c); border-radius:10px; padding:10px 14px; box-shadow:var(--shadow); max-width:92vw; }
/* Sensory-friendly: mute bright yellow/orange badges and tip boxes */
body.sensory .label-orig, body.sensory .label-off, body.sensory .lvl{ background:transparent !important; color:inherit !important; border-color:currentColor !important; opacity:.85; }
body.sensory .card.warm, body.sensory .notice, body.sensory .trap-tip, body.sensory .try-this{ background:var(--soft2) !important; border-color:var(--line,#8a94a6) !important; }
body.sensory .logout{ border-color:currentColor !important; box-shadow:none !important; }
/* Breaks (js/breaks.js): calm, one choice at a time */
.brk-menu{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:10px 0; }
.brk-pick{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 10px; background:var(--card,#fff); color:inherit; border:2px solid var(--line,#c9cfd9); border-radius:12px; font-weight:600; }
.brk-pick .brk-ic{ font-size:1.6em; }
body.sensory .brk-pick .brk-ic{ display:none; }
.brk-ideas li{ margin:.3em 0; }
.brk-where{ margin:12px 0; }
.brk-breathe{ width:120px; height:120px; margin:10px auto; display:flex; align-items:center; justify-content:center; }
.brk-breathe span{ width:60px; height:60px; border-radius:50%; background:var(--soft2,#e6ebf2); border:2px solid var(--line,#9aa6b8); animation:brkBreathe 10s ease-in-out infinite; }
.brk-breathe.still span{ animation:none; width:90px; height:90px; }
@keyframes brkBreathe{ 0%{ transform:scale(.7);} 40%{ transform:scale(1.4);} 100%{ transform:scale(.7);} }
.brk-fade{ animation:brkFade 4s ease-in-out both; }
@keyframes brkFade{ from{ background:transparent; } to{ background:var(--soft2,#e6ebf2); } }
.brk-heads{ padding:8px 12px; border-radius:8px; border-left:4px solid var(--line,#9aa6b8); }
@media (prefers-reduced-motion: reduce){ .brk-breathe span,.brk-fade{ animation:none !important; } }
/* Oct 15: calm motion is its own control (sensory mode turns it on too) */
body.calmmotion *, body.calmmotion *::before, body.calmmotion *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
/* Test-like practice (js/testlike.js) */
.tl-pass-wrap{ display:grid; gap:16px; }
@media (min-width:1000px){ .tl-pass-wrap{ grid-template-columns:1fr 1fr; align-items:start; } .tl-passage{ position:sticky; top:12px; max-height:85vh; overflow:auto; } }
.tl-passage p{ line-height:1.7; }
.tl-passage u{ text-decoration-thickness:2px; }
.tl-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--line,#ccd); margin-bottom:8px; }
.tl-clock{ font-variant-numeric:tabular-nums; }
.tl-grid{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tl-grid .on{ outline:2px solid currentColor; }
#tlText{ width:100%; font:inherit; line-height:1.6; }

/* Oct 15: tagline next to the logo (gold-ink on the header background, AA), and the Learn group in the nav */
.brand{ flex-wrap:wrap; column-gap:9px; row-gap:0; }
.brand .brand-tag{ color:var(--gold-ink); font-weight:600; font-size:.72em; white-space:nowrap; }
@media (max-width:640px){ .brand .brand-tag{ flex-basis:100%; font-size:.68em; margin-left:41px; margin-top:-4px; } }
.nav-learn{ display:inline-flex; align-items:center; gap:2px; border-left:1px solid var(--line,#d9d2c3); border-right:1px solid var(--line,#d9d2c3); padding:0 4px; }
.nav-learn-label{ font-size:.75em; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:0 4px; }
.newtab-cue{ margin:.3em 0 0; }
.more-menu a.nav-mobile-only{ display:none; }
@media (max-width:700px){
  .nav-learn{ display:contents; } .nav-learn-label{ display:none; }
  nav.tabs .nav-learn > a{ flex-direction:column; gap:2px; padding:5px 6px; font-size:.74em; min-height:50px; }
  nav.tabs .nav-learn > a .aico{ width:21px; height:21px; }
  nav.tabs > a.nav-desktop-only{ display:none; } .more-menu a.nav-mobile-only{ display:flex; }
}
nav.tabs > a, nav.tabs .nav-learn > a{ white-space:nowrap; } @media (max-width:700px){ nav.tabs > a{ white-space:normal; } }
@media (max-width:700px){ nav.tabs > a, nav.tabs .nav-learn > a, .more > summary{ padding:5px 3px; font-size:.7em; } }
@media (max-width:360px){ nav.tabs > a .aico, nav.tabs .nav-learn > a .aico, .more > summary .aico{ width:18px; height:18px; } }

/* Oct 15: parent network */
.pn-list{ list-style:none; padding:0; } .pn-tip{ margin:.6em 0; }
.pn-badge{ display:inline-block; font-size:.78em; font-weight:700; padding:1px 8px; border-radius:999px; border:1px solid currentColor; }
.pn-example{ color:var(--gold-ink); } .pn-guidance{ color:var(--accent); } .pn-verified{ color:var(--accent); background:var(--soft); }
.pn-tag{ display:inline-block; font-size:.8em; padding:1px 8px; border-radius:999px; background:var(--soft); color:var(--ink); }
.fp-stress li{ margin:.5em 0; }

/* fresh-test fixes */
.step-strip .ss-nw{ white-space:nowrap; }
#smBreak, #tdBreak, .ss-go{ min-height:44px; font-size:.95rem; padding:8px 14px; }
.badge{ min-height:44px; font-size:1rem; } .pn-badge, .ss-tag{ font-size:.85rem; }
.step-strip li{ font-size:.92rem; }
details.trick > summary, #tips details > summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; list-style-position:inside; }
details.trick > summary h3::before{ content:""; }
#tourCard{ border-left:6px solid var(--accent); }
.flow-num{ min-width:1.6em; text-align:center; }
/* fix6: concept card extras */
.cp{ margin-top:.8em; border-top:1px solid var(--line); padding-top:.6em; font-size:.95em; }
.cp-fig{ max-width:420px; }
.cp-more summary{ cursor:pointer; color:var(--accent); font-weight:600; min-height:44px; display:list-item; padding:10px 0; }
.cp-more summary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.cp-more ol{ margin:.3em 0 .6em 1.2em; padding:0; }