/* Layout: a control panel beside (or above, on phones) a wall of true-to-size Letter page previews. */
:root{
  /* Pip Pages brand palette (brand kit web/brand-tokens.css) */
  --pip-cream:#F9E0BA; --pip-light:#FFF0D8; --pip-sand:#E8C99F; --pip-blue:#2451DC; --pip-navy:#142052; --pip-mint:#91DFB8; --pip-pink:#F48DA4;
  --bg:#FFFBF3; --panel:#ffffff; --ink:var(--pip-navy); --muted:#5b6387; --line:#eadfc9; --soft:#FFF5E4;
  --accent:var(--pip-blue); --accent-ink:#ffffff; --warn:#a13d2d;
  --font-display:"Fredoka","Trebuchet MS",sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",Helvetica,Arial,sans-serif;
}
/* light is the default; dark is a choice (js/theme.js sets data-theme on <html>) */
:root[data-theme="dark"]{ --bg:#0b1130; --panel:#131c47; --ink:#FFF0D8; --muted:#aab3d8; --line:#2b3875; --soft:#1a2558; --accent:#8fa8ff; --accent-ink:#0b1130; --warn:#f0907f; color-scheme:dark; }
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.4}
[hidden]{display:none !important}
.muted{color:var(--muted);font-weight:400}

.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 16px;max-width:1500px;margin:0 auto}
.brand{display:block;line-height:0;position:relative;text-decoration:none}
.brand .tagline{position:absolute;left:37%;top:75%;line-height:1;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--muted)}
.nav{display:flex;align-items:center;gap:8px}
.mode{width:38px;height:38px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.mode svg{width:18px;height:18px;display:block}
.mode:hover{color:var(--accent)}
.brand img{display:block;width:270px;height:auto;max-width:62vw}
.tabs{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px}
.tabs button{border:0;background:none;padding:8px 16px;min-height:38px;border-radius:7px;font-weight:700;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.tabs .tablink{display:flex;align-items:center;padding:8px 16px;min-height:38px;border-radius:7px;font-weight:700;background:var(--accent);color:var(--accent-ink);text-decoration:none}

.app{display:grid;gap:20px;padding:0 16px 16px;max-width:1500px;margin:0 auto}
.ui{background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-width:0}
.ui-body{padding:16px;display:flex;flex-direction:column;gap:14px}
#panel-today,#panel-browse{display:flex;flex-direction:column;gap:14px}
@media (min-width:900px){
  .app{grid-template-columns:390px 1fr;align-items:start}
  .ui{position:sticky;top:12px;max-height:calc(100vh - 24px)}
  .ui-body{overflow:auto;flex:1 1 auto}
}
.dock{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:10px 16px 14px;border-radius:0 0 12px 12px;display:flex;flex-direction:column;gap:8px}

button{font:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:9px 12px;min-height:40px}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700;flex:1 1 120px;font-size:17px;min-height:46px}
button.small{min-height:38px;padding:6px 10px;font-size:14px;align-self:flex-end}
button.danger{color:var(--warn);align-self:flex-start}
button.icon{width:40px;padding:0;font-size:24px;line-height:1;flex:none}
button.link{border:0;background:none;padding:0;min-height:0;color:var(--accent);text-decoration:underline;font-weight:700}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.status{font-size:13.5px;color:var(--muted);min-height:1.4em;margin:0}
.status.warn{color:var(--ink);background:color-mix(in srgb,var(--accent) 16%,transparent);padding:8px 10px;border-radius:8px}

.row{display:flex;gap:8px;align-items:flex-end}
.grow{flex:1 1 auto;min-width:0}
.field{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px}
select,input[type=text],input[type=search]{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 8px;min-height:38px;width:100%}
details>summary{cursor:pointer;font-weight:700;padding:4px 0}
details.edit{font-size:14px}
details.edit[open]{display:flex;flex-direction:column;gap:10px;background:var(--soft);border-radius:10px;padding:8px 12px 12px}
details.edit summary{font-weight:400;color:var(--muted);font-size:13px}

.card{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.day-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.day-title{text-align:center;display:flex;flex-direction:column;line-height:1.2}
#day-num{font-family:var(--font-display);font-size:26px}
.bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
/* draggable day bar */
#day-range{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:none;cursor:pointer;touch-action:none}
#day-range::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--accent) var(--fill,0%),var(--line) var(--fill,0%))}
#day-range::-moz-range-track{height:10px;border-radius:5px;background:var(--line)}
#day-range::-moz-range-progress{height:10px;border-radius:5px;background:var(--accent)}
#day-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-7px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}
#day-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:3px solid var(--panel);box-shadow:0 0 0 1px var(--accent)}
.today{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.today li{display:flex;gap:8px;align-items:baseline}
.tag{flex:none;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border-radius:5px;padding:2px 6px;background:var(--panel);border:1px solid var(--line);color:var(--muted);min-width:58px;text-align:center}
.tag.new{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.card h2{font-size:17px;margin:0;line-height:1.25}
.card p{margin:0;font-size:14px}
.stepper{display:flex;align-items:center;gap:8px}
#pg-step{margin-top:12px;flex-wrap:wrap}
#pg-reset[hidden]{display:none}
.stepper output{min-width:2ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* color / black-and-white switch */
.seg{display:flex;border:1px solid var(--line);border-radius:10px;padding:3px;gap:3px;margin:2px 0 6px}
.seg label{flex:1;min-height:0;display:block}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;flex:1;text-align:center;padding:7px 8px;border-radius:7px;cursor:pointer;font-weight:700;color:var(--muted)}
.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.major{color:#d99a00;font-weight:700}
fieldset.checks{border:0;border-top:1px solid var(--line);margin:0;padding:10px 0 0;display:flex;flex-direction:column;gap:2px}
fieldset.checks legend{font-size:12px;color:var(--muted);padding:0 6px 0 0}
.checks label{display:flex;align-items:center;gap:8px;min-height:32px}
.checks input{width:18px;height:18px;accent-color:var(--accent);flex:none}
.tip{font-size:13px;color:var(--muted);margin:0}

.plan ol{list-style:none;margin:6px 0 0;padding:0;max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.plan li button,.skills button{display:flex;gap:10px;width:100%;text-align:left;border:0;border-radius:0;background:none;padding:8px 10px;min-height:38px;align-items:baseline}
.plan li+li,.skills li+li{border-top:1px solid var(--line)}
.plan .days{flex:none;width:76px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.plan li.done button{color:var(--muted)}
.plan li.done .days::after{content:" \2713"}
.plan li.now button,.skills li.on button{background:color-mix(in srgb,var(--accent) 18%,transparent);font-weight:700}
.plan li button:hover,.skills li button:hover{background:var(--soft)}

.skills{display:flex;flex-direction:column;gap:6px;max-height:44vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.skills details+details{border-top:1px solid var(--line)}
.skills summary{display:flex;align-items:center;gap:8px;padding:8px 0}
.skills summary::before{content:"";width:12px;height:12px;border-radius:3px;background:var(--dot,#ccc);flex:none;border:1px solid rgba(0,0,0,.15)}
.skills summary .muted{margin-left:auto;font-size:12px}
.skills ul{list-style:none;margin:0 0 8px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.skills .std{margin-left:auto;font-size:11px;color:var(--muted);flex:none}
.empty{color:var(--muted);padding:40px 0;text-align:center}
.empty img{display:block;margin:0 auto 10px;width:150px;height:auto}
.empty strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:20px;margin-bottom:2px}

.tag.sub{min-width:68px}
#all-subs{display:flex;flex-direction:column;gap:2px}

/* ---------- landing page ---------- */
.home{max-width:1180px;margin:0 auto;padding:4px 16px 40px;display:flex;flex-direction:column;gap:28px}
.home h1,.home h2{font-family:var(--font-display);font-weight:600;margin:0;line-height:1.08;letter-spacing:-.01em}
.home p{margin:0}
.hero{display:grid;gap:8px 32px;align-items:center;background:var(--hero);border-radius:28px;padding:32px 24px 0;overflow:hidden;position:relative}
:root{--hero:var(--pip-light);--hero-line:var(--pip-sand)}
:root[data-theme="dark"]{--hero:#131c47;--hero-line:#2b3875}
.hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;padding-bottom:32px;min-width:0}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.home h1{font-size:clamp(34px,5.4vw,60px);text-wrap:balance}
.home h1 span{color:var(--accent);white-space:nowrap}
.lead{font-size:clamp(16px,1.5vw,19px);max-width:34em;color:var(--ink)}
.pick{font-weight:700;margin-top:6px !important}
.grades{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:520px}
.grades button{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 2px 7px;border:2px solid var(--pip-navy);border-radius:14px;background:var(--panel);box-shadow:0 4px 0 var(--pip-navy);transition:transform .08s,box-shadow .08s}
.grades button b{font-family:var(--font-display);font-size:28px;line-height:1.1;color:var(--accent)}
.grades button span{font-size:11px;color:var(--muted);white-space:nowrap}
.grades button:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--pip-navy)}
.grades button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--pip-navy)}
:root[data-theme="dark"] .grades button{border-color:var(--accent);box-shadow:0 4px 0 var(--accent)}
:root[data-theme="dark"] .grades button:hover{box-shadow:0 6px 0 var(--accent)}
:root[data-theme="dark"] .grades button:active{box-shadow:0 1px 0 var(--accent)}
.or{color:var(--muted)}
.hero-art{position:relative;height:300px;min-width:0}
.fan{position:absolute;inset:0}
.fan svg.sheet{position:absolute;width:190px;bottom:-60px;left:50%;border-radius:6px;box-shadow:0 10px 24px rgba(20,32,82,.22);transform-origin:50% 100%}
.fan svg.sheet:nth-child(1){transform:translateX(-108%) rotate(-10deg)}
.fan svg.sheet:nth-child(2){transform:translateX(-50%) translateY(-22px) rotate(-1deg)}
.fan svg.sheet:nth-child(3){transform:translateX(8%) rotate(9deg)}
.hero-pip{position:absolute;right:max(0px,calc(50% - 300px));bottom:-6px;width:150px;height:auto;filter:drop-shadow(0 6px 10px rgba(20,32,82,.25))}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding:44px 0 0 48px}
  .hero-copy{padding-bottom:48px}
  .hero-art{height:100%;min-height:440px}
  .fan svg.sheet{width:235px;bottom:-60px}
  .hero-pip{width:170px;right:10px}
}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 8px;border-radius:16px;border:1px solid var(--line);background:var(--panel)}
.stats b{font-family:var(--font-display);font-size:34px;line-height:1.1;color:var(--accent)}
.stats span{font-size:13.5px;color:var(--muted)}
.ways{display:grid;gap:16px}
@media (min-width:700px){.ways{grid-template-columns:1fr 1fr}}
.ways article{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.ways h2{font-size:28px}
.ways p{color:var(--muted);font-size:16px;flex:1}
.ways button{flex:none;min-width:190px;font-weight:700;font-size:16px;min-height:46px;padding:9px 18px}
.way-tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}
.way-tag.mint{background:var(--pip-mint);color:var(--pip-navy)}
.why{display:flex;flex-direction:column;gap:16px}
.why h2{font-size:clamp(24px,3vw,32px)}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:14px 28px}
@media (min-width:700px){.why ul{grid-template-columns:1fr 1fr}}
.why li{padding-left:16px;border-left:4px solid var(--pip-mint);color:var(--muted)}
.why strong{display:block;color:var(--ink);font-size:17px}
.closing{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;background:var(--pip-navy);color:var(--pip-light);border-radius:28px;padding:24px}
.closing img{width:130px;height:auto}
.closing div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.closing h2{font-size:clamp(26px,3.4vw,38px)}
.closing p{color:#c9d2f5}
.closing button.primary{flex:none;background:var(--pip-mint);border-color:var(--pip-mint);color:var(--pip-navy);padding:9px 22px}
.fine{font-size:12.5px;color:var(--muted);text-align:center}
@media (prefers-reduced-motion: reduce){.grades button{transition:none}}

/* how it works, pricing, questions, footer */
.steps,.faq,.pricing{display:flex;flex-direction:column;gap:16px}
.steps h2,.faq h2,.pricing h2{font-size:clamp(24px,3vw,32px)}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.steps ol{grid-template-columns:repeat(3,1fr)}}
.steps li{position:relative;padding:22px 20px 20px;border-radius:22px;background:var(--hero);color:var(--muted);font-size:16px}
.steps li b{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-size:22px;margin-bottom:10px}
.steps li strong{display:block;color:var(--ink);font-family:var(--font-display);font-weight:600;font-size:21px;margin-bottom:2px}
.plans{display:grid;gap:14px}
@media (min-width:700px){.plans{grid-template-columns:repeat(3,1fr);align-items:end}}
.plans article{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:22px;border-radius:22px;background:var(--panel);border:1px solid var(--line);color:var(--muted)}
.plans article.best{border:2px solid var(--accent);padding-top:18px}
.plans h3{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink)}
.plans .price b{font-family:var(--font-display);font-size:40px;color:var(--accent);line-height:1}
.plans .buy{margin-top:6px;display:inline-block;padding:10px 18px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:4px 18px}
.faq details+details{margin-top:-6px}
.faq summary{font-size:17px;padding:12px 0}
.faq details p{color:var(--muted);padding:0 0 14px;max-width:70ch}
.foot{border-top:1px solid var(--line);padding-top:18px}
.foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14.5px}
.foot a,.doc a{color:var(--accent);font-weight:700}
.foot button.link{font-weight:700}

/* panel: more options, own word list, extras */
details.more{border-top:1px solid var(--line);padding-top:6px}
details.more[open]{display:flex;flex-direction:column;gap:12px}
details.more summary{color:var(--muted);font-weight:700;font-size:14px}
details.more fieldset.checks{border-top:0;padding-top:0}
.extras{display:flex;flex-wrap:wrap;gap:8px}
.extras button{align-self:auto}
.extras button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.mylist{display:flex;align-items:center;gap:8px;text-align:left;font-weight:700;border-style:dashed;border-color:var(--accent);color:var(--accent)}
.mylist b{font-size:20px;line-height:1}
.mylist.on{background:color-mix(in srgb,var(--accent) 18%,transparent)}
textarea{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 8px;width:100%;resize:vertical}
textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.card .field{font-size:12px}

/* plain pages: about, privacy, terms, standards, worksheet lists */
.doc{max-width:860px;margin:0 auto;padding:8px 16px 48px;display:flex;flex-direction:column;gap:14px;font-size:16.5px;line-height:1.55}
.doc h1,.doc h2,.doc h3{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:14px 0 0}
.doc h1{font-size:clamp(30px,4.6vw,44px)}
.doc h2{font-size:25px}.doc h3{font-size:19px}
.doc p,.doc ul{margin:0}
.doc ul{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.doc .crumbs{font-size:14px;color:var(--muted)}
.doc .muted{font-size:14.5px}
.doc .cols{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 22px}
.doc .std{color:var(--muted);font-size:13px;font-weight:400}
.doc .cta{display:inline-block;align-self:flex-start;padding:12px 22px;border-radius:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:17px;text-decoration:none}
.doc .pv{max-width:420px}
.doc .pv svg.sheet{border:1px solid var(--line)}
.doc table{border-collapse:collapse;width:100%;font-size:15px}
.doc td:first-child{width:38%}
.doc th,.doc td{text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--line);vertical-align:top}

.sheets{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));align-content:start}
svg.sheet{display:block;width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.25)}

/* Printing. Home and school printers cannot print to the paper's edge (the bottom strip is usually the widest dead
   zone), and people leave the print dialog on all sorts of margin settings. So each worksheet is drawn at 92% of
   whatever page area the browser gives us (vh and vw are the page box when printing) and centered. That keeps the
   whole sheet, footer included, inside the printable area on Letter or A4, with or without dialog margins. */
@page{margin:0}
@media print{
  html,body{background:#fff}
  .top,.ui,.empty{display:none}
  /* nothing but the worksheets may print: this also hides badges a host injects into the page */
  body>*:not(.app){display:none !important}
  .app{display:block;padding:0;max-width:none}
  .sheets{display:block}
  svg.sheet{display:block;height:92vh;width:auto;max-width:92vw;aspect-ratio:612/792;margin:4vh auto 0;box-shadow:none;border-radius:0;break-after:page;page-break-after:always;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  svg.sheet:last-child{break-after:auto;page-break-after:auto}
}

/* ---------- holiday season (js/holiday.js sets data-holiday and --hol on <html>) ---------- */
:root[data-holiday] body{border-top:5px solid var(--hol)}
.hol-note{display:block;width:fit-content;justify-self:start;align-self:flex-start;margin:0 0 10px;padding:4px 12px;border-radius:999px;border:2px solid var(--hol);background:#fff;color:#142052;font-weight:700;font-size:13px}
.hero-pip.pip-holiday{width:190px;bottom:-14px}
.closing img.pip-holiday{width:150px}
details.more .field{margin:10px 0}
@media print{:root[data-holiday] body{border-top:0}}
:root[data-holiday] .brand .tagline{top:70%}

/* ---------- Pip in different poses around the site (holiday.js swaps in the holiday version of each) ---------- */
.steps li{padding-right:112px;min-height:128px}
.step-pip{position:absolute;right:10px;bottom:8px;width:96px;height:96px;object-fit:contain}
h2.with-pip{display:flex;align-items:center;gap:12px}
.head-pip{width:64px;height:64px;object-fit:contain;flex:none}
.foot{position:relative}
.foot-pip{display:block;width:92px;height:62px;object-fit:contain;margin:-70px auto 8px}
.foot{margin-top:56px}
.doc-pip{float:right;width:112px;height:112px;object-fit:contain;margin:0 0 6px 16px}
.closing img{height:140px;object-fit:contain}
@media (max-width:520px){.doc-pip{width:80px;height:80px}.head-pip{width:48px;height:48px}}
@media print{.doc-pip,.foot-pip{display:none}}