/* ============================================================
   TeacherCreate — "The Teacher's Desk"
   Warm paper, chalkboard green, red pen, gold stars.
   ------------------------------------------------------------
   1  Tokens
   2  Base + typography
   3  Textures & hand-drawn bits
   4  Top bar / footer
   5  Buttons, forms, components (shared with signed-in pages)
   6  Landing page
   7  The worksheet itself (print-critical — keep black on white)
   8  Responsive
   ============================================================ */

/* Self-hosted web fonts. Subset to latin + latin-ext, variable weight.
   Downloaded from Google Fonts; all three are licensed under the SIL Open Font License. */

/* ------------------------------------------------------------------
   DejaVu Serif — the printed sheet's face, and the reason the PDF
   matches the preview.

   Dompdf can only use the fonts bundled with it, and DejaVu Serif is
   the one it reaches for. While the screen used Century Schoolbook and
   the PDF used DejaVu, the same sentence wrapped at different points in
   the two engines, so the same worksheet paginated differently and the
   download never quite matched what a teacher had just approved.

   Same font, same point sizes, same line breaks. Subset to Latin plus
   the maths signs a worksheet actually uses — under 25KB for all three
   weights, which is less than one of the display faces.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'DejaVu Serif';
  font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dejavuserif-normal.woff2') format('woff2');
}
@font-face{
  font-family:'DejaVu Serif';
  font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/dejavuserif-bold.woff2') format('woff2');
}
@font-face{
  font-family:'DejaVu Serif';
  font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/dejavuserif-italic.woff2') format('woff2');
}
/* ------------------------------------------------------------------
   Outfit — the interface face.

   A geometric block sans: square-ish counters, flat terminals, and
   heavy weights that read as solid blocks of type rather than as bold
   text. It replaced Fraunces, which was a lovely editorial serif and
   made a site for elementary teachers look like a quarterly review.

   Variable, so one file covers 300 to 800 and the headings can be
   properly heavy without a second download.
   ------------------------------------------------------------------ */
@font-face{
  font-family:'Outfit';
  font-style:normal;font-weight:300 800;font-display:swap;
  src:url('fonts/outfit-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;font-weight:300 800;font-display:swap;
  src:url('fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------
   The worksheet faces.

   A sheet bought on Teachers Pay Teachers is not a serif document with
   a picture in the corner. It is set in a hand-printed or rounded
   letter, and that lettering is most of why it reads as made by a
   person rather than generated. wk_fonts() in includes/worksheet.php
   names five sets and the teacher picks one; each names a display face
   for the title and headings and a text face for the questions, since
   a letter that is charming at 19pt is tiring at 11.5pt forty times.

   Both a .woff2 and a .ttf of each ship in fonts/ — the browser reads
   the woff2, dompdf can only read the ttf, and they have to be the same
   outlines or the PDF would not match the preview.

   All SIL Open Font License.
   ------------------------------------------------------------------ */
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/patrick-hand-400.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/baloo2-400.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/baloo2-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/nunito-400.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/nunito-700.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:italic;font-weight:400;font-display:swap;
  src:url('fonts/nunito-400i.woff2') format('woff2')}
@font-face{font-family:'Chewy';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/chewy-400.woff2') format('woff2')}
@font-face{font-family:'Short Stack';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/shortstack-400.woff2') format('woff2')}

@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/caveat-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('fonts/caveat-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:italic;
  font-weight:400 600;
  font-display:swap;
  src:url('fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('fonts/karla-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:300 800;
  font-display:swap;
  src:url('fonts/karla-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------- 1 tokens */

:root{
  /* paper */
  --paper:#fbf7f0;
  --paper-warm:#f6eee1;
  --paper-deep:#f1e6d4;
  --card:#ffffff;

  /* ink */
  --ink:#231f1a;
  --ink-2:#5d554a;
  --ink-3:#8d8477;
  --rule:#e5dbc9;
  --rule-soft:#f0e8db;

  /* chalkboard green — the brand */
  --board:#1d3a30;
  --board-2:#2a5546;
  --board-3:#37705c;
  --board-lt:#d5e5dd;
  --board-wash:#eaf3ee;
  --chalk:#eef4f0;

  /* red pen */
  --apple:#b93a29;
  --apple-2:#9c2f20;
  --apple-wash:#fbeee9;

  /* the bright set — the landing page and nothing else.
     Signed-in pages stay on the quiet paper-and-chalkboard palette on
     purpose: a teacher is looking at their own worksheet there, and it
     should not have to compete with the furniture. */
  --sky:#2f7fd4;
  --sky-wash:#e7f1fc;
  --grape:#7b4bc7;
  --grape-wash:#f0eafb;
  --tangerine:#ef7c2b;
  --tangerine-wash:#fdeee2;
  --mint:#18a07a;
  --mint-wash:#e3f6ef;
  --bubble:#e8508d;
  --bubble-wash:#fdeaf2;

  /* gold star / highlighter */
  --gold:#d99a2b;
  --gold-2:#b87e18;
  --gold-wash:#fbf0d8;

  /* status */
  --green:var(--board-2);
  --green-wash:var(--board-wash);
  --red:var(--apple);
  --red-wash:var(--apple-wash);
  --amber:var(--gold-2);
  --amber-wash:var(--gold-wash);

  /* legacy aliases so signed-in pages keep working */
  --violet:var(--board);
  --violet-deep:var(--board-2);
  --wash:var(--board-wash);
  --wash-edge:#cfe0d7;
  --slate:var(--ink-2);
  --slate-lt:var(--ink-3);

  /* type */
  --display:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display-serif:"Fraunces","Century Schoolbook",Georgia,serif;   /* kept for anything that still wants it */
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Bradley Hand","Segoe Script",cursive;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* the printed worksheet keeps schoolbook type — it prints better */
  /* DejaVu Serif first because that is what dompdf prints with — see the
     @font-face note at the top. The old stack stays behind it as a fallback
     if the web font ever fails to load. */
  --sheet-serif:"DejaVu Serif","Century Schoolbook","New Century Schoolbook","Palatino Linotype",Palatino,Georgia,serif;

  --r:10px;
  --r-lg:16px;
  --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(35,31,26,.05),0 6px 16px -10px rgba(35,31,26,.18);
  --shadow:0 2px 4px rgba(35,31,26,.05),0 14px 34px -18px rgba(35,31,26,.3);
  --shadow-lift:0 4px 8px rgba(35,31,26,.06),0 26px 56px -26px rgba(35,31,26,.38);
  --maxw:1160px;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fraunces is a variable font — dial in the bookish, slightly quirky cut */
@supports (font-variation-settings:normal){
  h1,h2,h3,h4,.display{font-variation-settings:"SOFT" 24,"WONK" 1,"opsz" 72;}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------ 2 base + type */

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
/* the paper grain that sits under everything */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
  opacity:.028;mix-blend-mode:multiply;
}
body > *{position:relative;z-index:1}

img{max-width:100%;height:auto}
svg{display:block}

a{color:var(--board-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}

:focus-visible{outline:2.5px solid var(--apple);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.wrap-wide{max-width:1280px}
.wrap-narrow{max-width:780px}

/* Outfit is a block face, so headings want real weight behind them —
   at 600 it reads like a UI label, at 700/800 it reads like a headline. */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;line-height:1.1;
  margin:0 0 .45em;letter-spacing:-.022em;
  text-wrap:balance;
}
p,li,.lede{text-wrap:pretty}
h1{font-size:clamp(30px,5vw,42px)}
h2{font-size:clamp(25px,3.6vw,34px)}
h3{font-size:19px;letter-spacing:-.01em}
p{margin:0 0 1em}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 14px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:var(--apple);flex:0 0 auto;
}
.eyebrow-plain::before{display:none}

.lede{font-size:18.5px;color:var(--ink-2);max-width:62ch;line-height:1.62}
.muted{color:var(--ink-2)}
.small{font-size:13.5px}
.tiny{font-size:12.5px;color:var(--ink-3)}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.hand{font-family:var(--hand);font-size:1.42em;line-height:1.25;color:var(--apple)}

/* section headings used across the landing page */
.sec-head{max-width:66ch;margin:0 0 38px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{margin:0 0 12px}
.sec-head p{font-size:17.5px;color:var(--ink-2);margin:0}

/* --------------------------------------- 3 textures & hand-drawn */

/* a marker stroke under a phrase in a headline */
.hl{position:relative;white-space:nowrap;display:inline-block}
.hl-mark{
  position:absolute;left:-2%;bottom:-.055em;width:104%;height:.3em;
  fill:none;stroke:var(--apple);stroke-linecap:round;stroke-linejoin:round;
  opacity:.92;overflow:visible;
}
/* keep the marker stroke an even weight however far the box is stretched */
.hl-mark path{vector-effect:non-scaling-stroke;stroke-width:4.5px}
@media (max-width:700px){.hl-mark path{stroke-width:3.4px}}
.hl-mark.gold{stroke:var(--gold)}
.hl-mark.chalk{stroke:rgba(238,244,240,.85)}

/* highlighter swipe behind a phrase */
.mark-hi{
  background:linear-gradient(180deg,transparent 55%,var(--gold-wash) 55%,var(--gold-wash) 94%,transparent 94%);
  padding:0 .1em;
}

/* ruled-paper backdrop */
.ruled{
  background-image:repeating-linear-gradient(180deg,transparent 0 30px,var(--rule-soft) 30px 31px);
}
/* graph-paper backdrop */
.gridded{
  background-image:
    linear-gradient(var(--rule-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--rule-soft) 1px,transparent 1px);
  background-size:26px 26px;
}

/* a strip of washi tape */
.tape{
  position:absolute;z-index:4;width:118px;height:30px;
  background:
    linear-gradient(180deg,rgba(217,154,43,.34),rgba(217,154,43,.20)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.30) 0 5px,transparent 5px 10px);
  box-shadow:0 1px 3px rgba(35,31,26,.10);
  clip-path:polygon(3% 0,97% 4%,100% 96%,4% 100%,0 52%);
}
.tape-l{left:-26px;top:26px;transform:rotate(-32deg)}
.tape-r{right:-24px;top:20px;transform:rotate(26deg)}
.tape-t{left:50%;top:-14px;transform:translateX(-50%) rotate(-1.6deg)}

/* gold foil star sticker */
.sticker{
  position:absolute;z-index:5;width:58px;height:58px;
  filter:drop-shadow(0 3px 5px rgba(35,31,26,.22));
}
.sticker svg{width:100%;height:100%}
.sticker-br{bottom:-22px;right:-20px;transform:rotate(-12deg)}
@media (max-width:560px){.sticker-br{bottom:-10px;right:2px;width:48px;height:48px}}

/* torn / deckled bottom edge for banded sections */
.torn-b{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v1176c-40 8-80-6-120-2s-80 14-120 10-80-16-120-12-80 16-120 12-80-14-120-10-80 12-120 8-80-14-120-10-80 12-120 8-80-12-120-8Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v1176c-40 8-80-6-120-2s-80 14-120 10-80-16-120-12-80 16-120 12-80-14-120-10-80 12-120 8-80-14-120-10-80 12-120 8-80-12-120-8Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}

/* punch holes down the left of a sheet */
.holes{position:absolute;left:12px;top:0;bottom:0;width:12px;z-index:3}
.holes i{
  position:absolute;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--paper-deep);box-shadow:inset 0 1px 2px rgba(35,31,26,.22);
}
.holes i:nth-child(1){top:16%}
.holes i:nth-child(2){top:49%}
.holes i:nth-child(3){top:82%}

/* the chalkboard */
.board-bg{
  background:
    radial-gradient(90% 120% at 18% 0%,rgba(255,255,255,.075),transparent 62%),
    radial-gradient(80% 100% at 88% 100%,rgba(255,255,255,.05),transparent 60%),
    var(--board);
  color:var(--chalk);position:relative;overflow:hidden;
}
.board-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.11;mix-blend-mode:overlay;
}
.board-bg > *{position:relative;z-index:2}
.board-bg h2,.board-bg h3{color:#fff}
.board-bg p{color:rgba(238,244,240,.82)}
/* :not(.btn) matters — buttons keep their own colour, or gold text lands on a gold button */
.board-bg a:not(.btn){color:var(--gold)}
/* faint chalk smudges, like a board wiped in a hurry */
.board-bg .smudge{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent 72%);
  filter:blur(6px);
}

/* stroke icons — drawn a touch imperfectly */
.ico{
  width:26px;height:26px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.ico-lg{width:32px;height:32px;stroke-width:1.6}
.ico-sm{width:17px;height:17px;stroke-width:2}

/* ------------------------------------------------- 4 top bar */

.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(251,247,240,.86);
  backdrop-filter:saturate(170%) blur(14px);
  -webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{display:flex;align-items:center;gap:16px;height:70px}

.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-mark{
  width:36px;height:36px;border-radius:10px;flex:0 0 auto;
  background:var(--board);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 2px 0 var(--board-2),0 5px 12px -6px rgba(29,58,48,.7);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)}
.brand-mark svg{width:21px;height:21px}
.brand-name{font-family:var(--display);font-size:21px;letter-spacing:-.03em;font-weight:800;line-height:1}
.brand-name em{font-style:normal;color:var(--apple)}

.nav-desk{display:none;gap:26px;margin-left:22px;flex:1}
.nav-desk a{
  color:var(--ink-2);font-size:15px;font-weight:600;position:relative;padding:4px 0;
}
.nav-desk a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--apple);transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.nav-desk a:hover{color:var(--ink);text-decoration:none}
.nav-desk a:hover::after{transform:scaleX(1)}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

.credit-chip{
  display:inline-flex;align-items:baseline;gap:6px;
  padding:6px 13px;border:1px solid var(--wash-edge);background:var(--board-wash);
  border-radius:999px;color:var(--board-2);
}
.credit-chip:hover{text-decoration:none;border-color:var(--board-3)}
.credit-num{font-weight:800;font-size:14.5px;font-variant-numeric:tabular-nums}
.credit-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}

.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:block}
.menu summary::-webkit-details-marker{display:none}
.avatar{
  display:grid;place-items:center;width:37px;height:37px;border-radius:50%;
  background:var(--board);color:#fff;font-weight:700;font-size:15px;
  box-shadow:0 2px 0 var(--board-2);
}
.menu-pop{
  position:absolute;right:0;top:calc(100% + 12px);min-width:236px;
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:7px;z-index:50;
}
.menu-who{margin:0;padding:11px 12px 13px;border-bottom:1px solid var(--rule-soft);font-weight:700;font-size:14.5px}
.menu-who span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3);margin-top:2px;word-break:break-all}
.menu-pop a{display:block;padding:10px 12px;border-radius:8px;color:var(--ink);font-size:15px;font-weight:500}
.menu-pop a:hover{background:var(--paper-warm);text-decoration:none}
.menu-out{border-top:1px solid var(--rule-soft);margin-top:4px;color:var(--apple) !important}

.main{padding:30px 22px 80px;min-height:60vh}
.main-flush{padding:0 0 0;max-width:none}

/* ------------------------------------------------ 4b footer */

.site-foot{
  border-top:1px solid var(--rule);
  padding:52px 0 40px;margin-top:0;
  background:var(--paper-warm);
  position:relative;
}
.site-foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--board),var(--board-3) 34%,var(--gold) 68%,var(--apple));
  opacity:.75;
}
.foot-in{display:grid;grid-template-columns:1fr;gap:30px}
.foot-brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-size:20px;margin:0 0 10px;font-weight:700;letter-spacing:-.02em;
}
.foot-brand .brand-mark{box-shadow:0 2px 0 var(--board-2)}
.foot-brand em{font-style:normal;color:var(--apple)}
.foot-note{margin:0;font-size:14.5px;color:var(--ink-2);max-width:34ch}
.foot-col h4{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;font-weight:800;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{color:var(--ink-2);font-size:14.5px}
.foot-col a:hover{color:var(--apple)}
.foot-bottom{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--ink-3);
}
.foot-nav{display:flex;flex-wrap:wrap;gap:20px;font-size:14px}

/* ------------------------------------------------ 5 flashes */

.flash{
  border:1px solid var(--wash-edge);border-left:4px solid var(--board);
  background:var(--board-wash);border-radius:10px;padding:12px 16px;margin:0 0 20px;font-size:15px;
}
.flash-warn{background:var(--gold-wash);border-left-color:var(--gold-2);border-color:#eedcb4}
.flash-error{background:var(--apple-wash);border-left-color:var(--apple);border-color:#f2d5cd}

/* ------------------------------------------------ 5b buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:700 15.5px/1 var(--sans);letter-spacing:.005em;
  padding:14px 22px;border-radius:11px;border:1.5px solid var(--ink);
  background:var(--ink);color:#fff;cursor:pointer;text-decoration:none;
  box-shadow:0 2px 0 rgba(0,0,0,.28);
  transition:transform .1s ease,box-shadow .1s ease,background .18s ease,border-color .18s ease,color .18s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 3px 0 rgba(0,0,0,.28),0 10px 20px -12px rgba(35,31,26,.6)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.28)}
.btn .ico{width:19px;height:19px;stroke-width:2.1}

.btn-primary{background:var(--board);border-color:var(--board);color:#fff;box-shadow:0 2px 0 #142b23}
.btn-primary:hover{background:var(--board-2);border-color:var(--board-2);box-shadow:0 3px 0 #142b23,0 12px 24px -14px rgba(29,58,48,.9)}
.btn-primary:active{box-shadow:0 1px 0 #142b23}

.btn-apple{background:var(--apple);border-color:var(--apple);box-shadow:0 2px 0 var(--apple-2)}
.btn-apple:hover{background:var(--apple-2);border-color:var(--apple-2);box-shadow:0 3px 0 #7d2418,0 12px 24px -14px rgba(185,58,41,.8)}

.btn-gold{background:var(--gold);border-color:var(--gold);color:#3a2a06;box-shadow:0 2px 0 var(--gold-2)}
.btn-gold:hover{background:#e6a83a;border-color:#e6a83a}

.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--rule);box-shadow:0 2px 0 var(--rule-soft)}
.btn-ghost:hover{background:#fff;border-color:var(--ink-3);box-shadow:0 3px 0 var(--rule-soft),0 10px 20px -14px rgba(35,31,26,.5)}

.btn-chalk{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);box-shadow:none}
.btn-chalk:hover{background:rgba(255,255,255,.1);border-color:#fff;box-shadow:none}

.btn-quiet{background:transparent;color:var(--ink-2);border-color:transparent;padding-left:10px;padding-right:10px;box-shadow:none}
.btn-quiet:hover{background:var(--paper-warm);color:var(--ink);box-shadow:none;transform:none}
.btn-danger{background:var(--card);color:var(--apple);border-color:#eccdc5;box-shadow:0 2px 0 #f6e3de}
.btn-danger:hover{background:var(--apple-wash)}
.btn-sm{padding:10px 15px;font-size:14px;border-radius:9px}
.btn-lg{padding:17px 30px;font-size:17px;border-radius:12px}
.btn-block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* legacy alias */
.btn-primary.btn-lg{letter-spacing:.002em}

/* ------------------------------------------------ 5c forms */

.field{margin:0 0 20px}
.field > label,.field-label{
  display:block;font-size:13.5px;font-weight:700;letter-spacing:.01em;margin:0 0 7px;color:var(--ink);
}
.hint{font-size:13px;color:var(--ink-3);margin:6px 0 0}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;font:400 16px/1.5 var(--sans);color:var(--ink);
  background:var(--card);border:1.5px solid var(--rule);border-radius:10px;
  padding:12px 14px;transition:border-color .16s ease,box-shadow .16s ease;
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--board-3);box-shadow:0 0 0 3.5px rgba(55,112,92,.16);
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px;
}
.grid-2{display:grid;grid-template-columns:1fr;gap:0 20px}
.grid-3{display:grid;grid-template-columns:1fr;gap:0 20px}

.choices{display:grid;grid-template-columns:1fr;gap:10px}
.choices.cols-2{grid-template-columns:1fr 1fr}
.choice{
  position:relative;display:block;border:1.5px solid var(--rule);border-radius:11px;
  padding:14px 16px 14px 46px;cursor:pointer;background:var(--card);
  transition:border-color .14s ease,background .14s ease,transform .14s ease;
}
.choice:hover{border-color:var(--ink-3);background:#fff;transform:translateY(-1px)}
.choice input{position:absolute;left:16px;top:17px;width:18px;height:18px;accent-color:var(--board);margin:0}
.choice-t{display:block;font-weight:700;font-size:15px}
.choice-d{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.choice input:checked ~ .choice-t{color:var(--board-2)}
.choice:has(input:checked){border-color:var(--board-3);background:var(--board-wash)}

.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  border:1.5px solid var(--rule);border-radius:999px;padding:9px 15px;
  font-size:14px;cursor:pointer;background:var(--card);
}
.pill input{width:15px;height:15px;accent-color:var(--board);margin:0}
.pill:has(input:checked){border-color:var(--board-3);background:var(--board-wash);color:var(--board-2);font-weight:700}

/* ------------------------------------------ 5d cards & layout */

.card{
  background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r-lg);
  padding:24px;margin:0 0 20px;box-shadow:var(--shadow-sm);
}
.card-tight{padding:17px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:0 0 16px}
.card-head h2,.card-head h3{margin:0}

.panel{background:var(--board-wash);border:1px solid var(--wash-edge);border-radius:var(--r);padding:17px 19px;margin:0 0 20px}

.cols{display:grid;grid-template-columns:1fr;gap:22px}
.cols-side{display:grid;grid-template-columns:1fr;gap:22px}

.stack > * + *{margin-top:15px}
.divider{height:1px;background:var(--rule);border:0;margin:24px 0}

.page-head{margin:0 0 26px}
.page-head h1{margin:0 0 6px}

.badge{
  display:inline-block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;padding:5px 10px;border-radius:6px;background:var(--paper-deep);color:var(--ink-2);
}
.badge-ok{background:var(--board-wash);color:var(--board-2)}
.badge-wait{background:var(--gold-wash);color:var(--gold-2)}
.badge-no{background:var(--apple-wash);color:var(--apple)}
.badge-violet{background:var(--board-wash);color:var(--board-2)}

.meta{font-size:13px;color:var(--ink-3)}
.meta span + span::before{content:"·";margin:0 8px;color:var(--rule)}

.empty{
  border:2px dashed var(--rule);border-radius:var(--r-lg);
  padding:48px 24px;text-align:center;color:var(--ink-2);background:var(--card);
}
.empty h3{margin:0 0 6px}

/* ------------------------------------------------ 5e auth */

.auth{max-width:452px;margin:44px auto}
.auth-card{
  border:1.5px solid var(--rule);border-radius:var(--r-xl);padding:34px 32px;
  background:var(--card);box-shadow:var(--shadow);position:relative;
}
.auth-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,var(--board),var(--board-3) 45%,var(--gold));
}
.auth h1{font-size:29px;margin-bottom:6px}
.auth-alt{text-align:center;margin-top:20px;font-size:14.5px;color:var(--ink-2)}

/* the wider signup layout: form on one side, the pitch on the other */
.auth-split{
  display:grid;grid-template-columns:1fr;max-width:940px;margin:40px auto 0;
  border:1.5px solid var(--rule);border-radius:var(--r-xl);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow-lift);
}
.auth-main{padding:36px 32px}
.auth-main h1{font-size:30px;margin-bottom:8px}
.auth-side{padding:36px 32px}
.auth-side h2{font-size:22px;margin:0 0 18px;color:#fff}
.auth-perks{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.auth-perks li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(238,244,240,.86)}
.auth-perks .ico{color:var(--gold);margin-top:2px;width:21px;height:21px}
.auth-perks b{display:block;color:#fff;font-weight:700;font-size:15px;margin-bottom:1px}
.auth-side .chalk-note{font-size:23px;margin:0 0 8px}
.auth-side-foot{
  margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);
  font-size:13.5px;color:rgba(238,244,240,.6) !important;
}

/* ------------------------------------------------ 5f wizard */

.wizard{display:flex;gap:7px;list-style:none;padding:0;margin:0 0 28px;flex-wrap:wrap}
.wizard li{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);padding:7px 0;border-top:3px solid var(--rule);flex:1;min-width:88px;
}
.wizard li.on{color:var(--board-2);border-top-color:var(--board)}
.wizard li.done{color:var(--ink);border-top-color:var(--ink)}

.q-block{border:1.5px solid var(--rule);border-radius:var(--r);padding:19px;margin:0 0 15px;background:var(--card)}
.q-block h3{margin:0 0 3px;font-family:var(--sans);font-size:16.5px;font-weight:700}
.q-help{font-size:13px;color:var(--ink-3);margin:0 0 13px}

.assumptions{list-style:none;padding:0;margin:0}
.assumptions li{padding:8px 0 8px 24px;position:relative;font-size:14.5px;border-bottom:1px solid var(--rule-soft)}
.assumptions li:last-child{border-bottom:0}
.assumptions li::before{content:"✓";position:absolute;left:0;color:var(--board-3);font-weight:800}

.recipe{border:1.5px solid var(--rule);border-radius:var(--r);padding:17px 19px;background:var(--paper-warm)}
.recipe h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 13px;font-weight:800}
.recipe-list{display:grid;grid-template-columns:1fr;gap:0;margin:0;font-size:14.5px}
.recipe-list div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--rule)}
.recipe-list div:last-child{border-bottom:0}
.recipe-list dt{color:var(--ink-2);margin:0}
.recipe-list dd{margin:0;font-weight:700;text-align:right}

.sticky-actions{
  position:sticky;bottom:0;background:rgba(251,247,240,.94);
  backdrop-filter:blur(10px);border-top:1px solid var(--rule);
  padding:15px 0;margin-top:24px;z-index:20;
}

/* --------------------------------------- 5g library / market */

.tiles{display:grid;grid-template-columns:1fr;gap:16px}
.tile{
  border:1.5px solid var(--rule);border-radius:var(--r-lg);padding:20px;background:var(--card);
  display:flex;flex-direction:column;gap:11px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.tile:hover{border-color:var(--ink-3);box-shadow:var(--shadow);transform:translateY(-3px)}
.tile h3{margin:0;font-size:18.5px;line-height:1.25}
.tile h3 a{color:var(--ink)}
.tile-tags{display:flex;flex-wrap:wrap;gap:7px}
.tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;border-top:1px solid var(--rule-soft)}
.price{font-family:var(--display);font-size:21px;font-weight:700;color:var(--board-2)}
.price span{font-family:var(--sans);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-left:5px;font-weight:700}

.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 22px}
.filters .field{margin:0;flex:1;min-width:130px}

.star{color:var(--rule);font-size:15px}
.star.on{color:var(--gold)}

.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th{
  text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding:0 12px 10px 0;border-bottom:1.5px solid var(--rule);
}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.num{font-variant-numeric:tabular-nums;text-align:right}
.pos{color:var(--board-2);font-weight:700}
.neg{color:var(--apple);font-weight:700}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 22px}
.stat{border:1.5px solid var(--rule);border-radius:var(--r);padding:16px 18px;background:var(--card)}
.stat b{display:block;font-family:var(--display);font-size:29px;line-height:1.05;font-variant-numeric:tabular-nums;font-weight:700}
.stat span{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:700}

/* ============================================================
   6  LANDING PAGE
   ============================================================ */

.lp{overflow-x:clip}
.lp section{position:relative}
.sec{padding:82px 0}
.sec-sm{padding:56px 0}
.sec-warm{background:var(--paper-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-deep{background:var(--paper-deep)}

/* Reveal on scroll (only when JS is running).
   Uses the standalone `translate` property, not `transform`, so elements that
   carry a decorative `transform:rotate()` keep their tilt while sliding in. */
.js-reveal .rv{
  opacity:0;translate:0 22px;
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),translate .7s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s);
}
.js-reveal .rv.in{opacity:1;translate:none}
.main-flush > .flash{margin-top:22px}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1 !important;transform:none !important;transition:none}
}

/* ------------------------------------------------- 6a hero */

.hero{
  padding:64px 0 78px;
  background:
    radial-gradient(58% 62% at 84% 8%,rgba(217,154,43,.16),transparent 62%),
    radial-gradient(52% 55% at 6% 92%,rgba(42,85,70,.10),transparent 60%),
    linear-gradient(180deg,var(--paper-warm) 0%,var(--paper) 62%);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
/* faint ruled paper behind the hero, fading out */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(185,58,41,.055) 33px 34px);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
.hero-in{display:grid;grid-template-columns:1fr;gap:52px;align-items:center;position:relative;z-index:2}

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--card);border:1.5px solid var(--rule);
  border-radius:999px;padding:7px 16px 7px 9px;margin:0 0 22px;
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.hero-badge b{color:var(--ink);font-weight:800}
.hero-badge .hb-star{
  width:24px;height:24px;border-radius:50%;background:var(--gold-wash);
  display:grid;place-items:center;color:var(--gold-2);flex:0 0 auto;
}
.hero-badge .hb-star svg{width:14px;height:14px}

.hero h1{
  font-size:clamp(38px,6.1vw,66px);
  letter-spacing:-.032em;line-height:1.03;margin:0 0 22px;max-width:15ch;font-weight:600;
}
.hero .lede{font-size:19.5px;margin-bottom:30px;max-width:52ch}
.hero .btn-row{margin-bottom:26px}

.hero-trust{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px 22px;
  font-size:14px;color:var(--ink-2);
}
.hero-trust li{display:flex;align-items:center;gap:8px}
.hero-trust .ico{color:var(--board-3)}

/* the desk composition: what you type sits top-left, what prints sits bottom-right */
.desk{position:relative;padding:6px 0 26px}

.ask-card{
  position:relative;z-index:6;background:var(--card);
  border:1.5px solid var(--rule);border-radius:16px;
  box-shadow:var(--shadow-lift);padding:16px 18px 15px;
  max-width:392px;margin:0 auto 0 0;
}

/* the hand-drawn "and then" between what you type and what prints */
.desk-arrow{
  display:flex;align-items:flex-end;gap:11px;margin:2px 0 2px 46px;
  color:var(--ink-3);pointer-events:none;
}
.desk-arrow svg{
  /* 56×51 keeps the 64×58 viewBox's aspect ratio, so the stroke stays even */
  width:56px;height:51px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.desk-arrow span{
  font-family:var(--hand);font-size:22px;line-height:1;color:var(--ink-2);
  transform:rotate(-3deg);padding-bottom:8px;
}
.ask-top{
  display:flex;align-items:center;gap:8px;margin:0 0 11px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--ink-3);
}
.ask-top .dot{width:8px;height:8px;border-radius:50%;background:var(--board-3);flex:0 0 auto}
.ask-top .grade{margin-left:auto;letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--ink-2);font-weight:700}
.ask-text{
  font-size:16px;line-height:1.5;color:var(--ink);margin:0 0 14px;min-height:3em;
}
.ask-text b{font-weight:700;color:var(--apple);background:linear-gradient(180deg,transparent 58%,rgba(217,154,43,.34) 58%)}
.caret{
  display:inline-block;width:2px;height:1.05em;background:var(--apple);
  vertical-align:-.16em;margin-left:2px;animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.caret{animation:none}}
.ask-go{
  display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--rule-soft);
}
/* Not a mockup — this really does take you to signup. */
.ask-go .ask-btn{
  display:inline-flex;align-items:center;gap:7px;background:var(--board);color:#fff;
  border-radius:9px;padding:9px 15px;font-size:13.5px;font-weight:700;box-shadow:0 2px 0 #142b23;
  text-decoration:none;transition:transform .1s ease,background .18s ease,box-shadow .1s ease;
}
.ask-go .ask-btn:hover{
  background:var(--board-2);text-decoration:none;
  transform:translateY(-1px);box-shadow:0 3px 0 #142b23,0 10px 18px -12px rgba(29,58,48,.9);
}
.ask-go .ask-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #142b23}
.ask-go .ask-btn .ico{width:15px;height:15px;stroke-width:2.3}
.ask-go .cost{font-size:12.5px;color:var(--ink-3);margin-left:auto;font-weight:600}

/* the printed sheet, tilted on the desk */
.sheet-stack{position:relative;margin:0 0 0 auto;max-width:414px;width:100%}
/* the demo sheet is a shrunken page, so tighten its type */
.sheet-card .sheet{font-size:13px}
.sheet-card .sheet-title{font-size:21px;white-space:nowrap}
.sheet-card .sheet-sub{font-size:12px}
.sheet-card .sheet-directions{font-size:11.5px;padding:7px 11px;margin:12px 0 15px}
.sheet-card .namebar{margin-bottom:15px;gap:16px}
.sheet-card .nb{font-size:10px}
.sheet-card .wcell{font-size:13px}
.sheet-card .wnum{font-size:10px;min-width:15px}
.sheet-card .wgrid{gap:9px 13px}
.sheet-card .sheet-foot{font-size:8.5px;margin-top:16px}
.sheet-card .scorebox{font-size:10px}
.sheet-card .scorebox .sb-r{width:46px;height:14px}
.sheet-stack .paper-back{
  position:absolute;inset:22px -7px -9px 12px;background:var(--card);
  border:1px solid var(--rule);border-radius:6px;transform:rotate(2.4deg);
  box-shadow:var(--shadow-sm);
}
.sheet-stack .paper-back2{
  position:absolute;inset:12px -2px -4px 5px;background:#fdfbf6;
  border:1px solid var(--rule);border-radius:6px;transform:rotate(-2.6deg);
}
.sheet-card{
  position:relative;z-index:3;background:#fff;border:1px solid var(--rule);
  border-radius:6px;padding:22px 20px 18px 34px;
  box-shadow:var(--shadow-lift);transform:rotate(-1.4deg);
  transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.desk:hover .sheet-card{transform:rotate(-.4deg)}
@media (prefers-reduced-motion:reduce){.desk:hover .sheet-card{transform:rotate(-1.4deg)}}
.sheet-card::before{
  content:"";position:absolute;left:25px;top:0;bottom:0;width:1.5px;background:rgba(185,58,41,.28);
}

/* red-pen margin note with an arrow */
.margin-note{
  display:none;
  position:absolute;z-index:7;font-family:var(--hand);color:var(--apple);
  font-size:23px;line-height:1.12;transform:rotate(-5deg);
  left:-16px;bottom:-66px;max-width:172px;margin:0;pointer-events:none;
}
.margin-note svg{
  position:absolute;left:calc(100% + 2px);top:-20px;
  width:58px;height:44px;fill:none;stroke:var(--apple);
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
@media (min-width:1060px){.margin-note{display:block}}

/* ------------------------------------------- 6b standards strip */

.strip{padding:34px 0;background:var(--card);border-bottom:1px solid var(--rule)}
.strip-in{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
.strip-label{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);margin:0;line-height:1.5;
}
.strip-label b{display:block;color:var(--ink);font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:700;margin-top:4px}
.std-chips{display:flex;flex-wrap:wrap;gap:9px}
.std-chip{
  display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--rule);background:var(--paper-warm);border-radius:8px;
  padding:8px 13px;font-size:13.5px;font-weight:700;color:var(--ink-2);
}
.std-chip i{
  font-style:normal;font-size:10.5px;letter-spacing:.06em;font-weight:800;
  color:var(--board-2);background:var(--board-wash);border-radius:4px;padding:2px 5px;
}

/* ------------------------------------------- 6c how it works */

/* The three steps are sticky notes: pastel paper, a peeled corner, a shadow that
   sits heavier at the bottom edge, and everything on them written by hand. */
.steps{display:grid;grid-template-columns:1fr;gap:26px;position:relative}
.step{
  position:relative;border:0;border-radius:2px;
  padding:26px 26px 24px;background:#fbf1d6;
  box-shadow:0 1px 1px rgba(35,31,26,.10),0 12px 26px -15px rgba(35,31,26,.6);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease;
}
/* the peeled bottom-right corner */
.step::after{
  content:"";position:absolute;right:0;bottom:0;
  border-width:0 0 26px 26px;border-style:solid;
  border-color:transparent transparent rgba(35,31,26,.09) transparent;
}
.step:nth-child(1){background:#fbf1d6;transform:rotate(-1.6deg)}
.step:nth-child(2){background:#e6f1e9;transform:rotate(1.2deg)}
.step:nth-child(3){background:#fbe9e3;transform:rotate(-.8deg)}
.step:hover{
  transform:rotate(0deg) translateY(-5px);
  box-shadow:0 2px 2px rgba(35,31,26,.10),0 22px 40px -18px rgba(35,31,26,.62);
}

/* the number, circled by hand */
.step-n{
  position:relative;display:inline-grid;place-items:center;
  width:58px;height:48px;margin:0 0 14px;
}
.step-n svg{
  position:absolute;inset:0;width:100%;height:100%;
  fill:none;stroke:var(--apple);stroke-width:2.1;stroke-linecap:round;opacity:.8;
}
.step-n i{
  font-family:var(--hand);font-style:normal;font-weight:700;font-size:27px;
  color:var(--apple);line-height:1;position:relative;top:1px;
}

.step h3{
  font-family:var(--hand);font-weight:700;font-size:29px;line-height:1.15;
  letter-spacing:0;margin:0 0 8px;color:var(--ink);
}
.step p{
  margin:0;font-family:var(--hand);font-size:21.5px;line-height:1.45;color:#33302a;
}
.step .step-eg{
  margin-top:14px;padding-top:13px;border-top:1.5px dashed rgba(35,31,26,.16);
  font-size:20px;color:var(--board-2);line-height:1.3;
}

/* ------------------------------------------- 6d remix (chalkboard) */

.remix{padding:88px 0}
.remix-in{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
.remix h2{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.03em;line-height:1.08;margin:0 0 18px}
.remix .lede{color:rgba(238,244,240,.84);font-size:18.5px}
.chalk-note{font-family:var(--hand);font-size:26px;color:var(--gold);transform:rotate(-2deg);display:inline-block;margin:0 0 10px}

.remix-list{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:14px}
.remix-list li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:rgba(238,244,240,.88)}
.remix-list .ico{color:var(--gold);margin-top:2px}

/* the two mini sheets + recipe */
.remix-viz{position:relative;display:grid;gap:18px}
.mini-row{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.mini{
  background:#fff;border-radius:6px;padding:15px 14px;color:#000;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  font-family:var(--sheet-serif);
}
.mini.a{transform:rotate(-2deg)}
.mini.b{transform:rotate(2deg)}
/* these sit inside .board-bg, which colours <p> chalk-white — override explicitly */
.mini .mini-t{font-size:13.5px;font-weight:700;margin:0 0 3px;line-height:1.2;color:#16130f}
.mini .mini-s{font-size:10px;font-family:var(--sans);color:#7d766a;margin:0 0 10px;letter-spacing:.03em}
.mini-q{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.mini-q li{font-size:12px;display:flex;gap:5px;align-items:baseline;color:#16130f}
.mini-q li::after{content:"";flex:1;border-bottom:1px solid #bbb;height:9px}
.mini-tag{
  display:inline-block;margin-top:10px;font-family:var(--sans);font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#8a8377;
}
.mini-arrow{display:grid;place-items:center;gap:5px;color:var(--gold);padding:0 2px}
.mini-arrow svg{width:44px;height:34px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.mini-arrow span{font-family:var(--hand);font-size:16px;white-space:nowrap;color:var(--gold)}

.spec{
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:16px 18px;
}
.spec h4{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(238,244,240,.55);margin:0 0 12px;font-weight:800;
}
.spec dl{margin:0;display:grid;gap:0;font-size:13.5px}
.spec dl > div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.spec dl > div:last-child{border-bottom:0}
.spec dt{color:rgba(238,244,240,.6);margin:0}
.spec dd{margin:0;font-weight:700;color:#fff;text-align:right}
.spec .changed{background:rgba(217,154,43,.16);margin:0 -18px;padding-left:18px;padding-right:18px;border-radius:4px}
.spec .changed dd{color:var(--gold)}
.spec .changed dd s{color:rgba(238,244,240,.4);font-weight:400;margin-right:7px;text-decoration-thickness:1px}

/* ---------------------------- 6e what's on the page (annotated) */
/* An annotated figure rather than an icon grid: these features are physical
   parts of a printed page, so they are numbered on the page itself and the
   list beside it reads as a figure key. */

.annot{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media (min-width:920px){.annot{grid-template-columns:1.04fr .96fr;gap:58px}}

.annot-fig{position:relative;max-width:430px;margin:0 auto;padding:0 0 14px}

/* the answer key sits behind, peeking out along the top so its banner shows */
.key-peek{
  position:absolute;top:0;left:4%;right:2%;padding:13px 18px 60px;
  background:#fff;border:1px solid var(--rule);border-radius:6px;
  transform:rotate(2.6deg);box-shadow:var(--shadow-sm);z-index:1;
}
.key-peek .key-banner{margin:0 0 11px;font-size:10px;letter-spacing:.17em;padding:4px}
.kp-l{display:block;height:6px;border-radius:3px;background:var(--rule-soft);margin:0 0 8px}
.kp-l:nth-of-type(2){width:78%}
.kp-l:nth-of-type(3){width:54%}

.annot-sheet{position:relative;z-index:3;margin-top:74px;transform:rotate(-1.4deg)}

.mark{
  position:absolute;z-index:8;width:31px;height:31px;border-radius:50%;
  background:var(--apple);color:#fff;display:grid;place-items:center;
  font-family:var(--hand);font-weight:700;font-size:19px;line-height:1;
  box-shadow:0 2px 7px rgba(35,31,26,.35);
}
.m1{top:110px;left:-14px}
.m2{top:8px;right:-16px}
.m3{bottom:34px;right:-15px}
.m4{top:158px;left:-14px}

.annot-key{list-style:none;margin:0;padding:0}
.annot-key li{display:flex;gap:15px;padding:19px 0;border-top:1px solid var(--rule)}
.annot-key li:last-child{border-bottom:1px solid var(--rule)}
.annot-key .k{
  flex:0 0 auto;width:27px;height:27px;border-radius:50%;
  background:var(--apple);color:#fff;display:grid;place-items:center;
  font-family:var(--hand);font-weight:700;font-size:17px;line-height:1;margin-top:2px;
}
.annot-key b{
  display:block;font-family:var(--display);font-size:18.5px;
  font-weight:600;letter-spacing:-.012em;line-height:1.25;
}
.annot-key p{margin:5px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55}

.annot-foot{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--rule)}
.annot-foot p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:78ch}
.annot-foot .hand{font-size:22px;display:block;margin-bottom:4px}
.annot-foot em{font-style:normal;font-weight:700;color:var(--ink)}

/* ------------------------------------------- 6f themes */

.theme-row{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
}
.thm{
  background:#fff;border:1.5px solid var(--rule);border-radius:10px;
  padding:14px 13px 12px;text-align:center;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,border-color .22s ease;
}
.thm:hover{transform:translateY(-5px) rotate(-1.2deg);box-shadow:var(--shadow);border-color:var(--ink-3)}
.thm-face{
  height:74px;border-radius:5px;margin:0 0 11px;background:#fff;border:1px solid var(--rule-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;position:relative;
}
.thm-motif{
  width:22px;height:22px;color:var(--ink-2);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.thm-lines{display:grid;gap:4px;width:56%}
.thm-lines i{display:block;height:2.5px;border-radius:2px;background:var(--rule)}
.thm-lines i:nth-child(2){width:78%}
.thm-lines i:nth-child(3){width:60%}
.thm-name{font-size:13.5px;font-weight:700;margin:0;line-height:1.2}
.thm-note{font-size:11.5px;color:var(--ink-3);margin:2px 0 0;line-height:1.3}
/* per-theme faces */
/* The swatch ink is the theme's real accent, passed in from worksheet_themes()
   as --thm. The section above it promises the sheet prints the way the swatch
   looks, so these must not be a second set of colours picked by eye — the
   seasonal swatch used to be blue while the printed sheet came out cranberry. */
.thm-motif{color:var(--thm,var(--ink-2))}
.thm-ditto .thm-face{background:#f4f2fd}.thm-ditto .thm-lines i{background:#cfc8f2}
.thm-plain .thm-face{background:#fff}
.thm-space .thm-face{background:#eef1f8}
.thm-ocean .thm-face{background:#e9f4f6}
.thm-jungle .thm-face{background:#ecf4ea}
.thm-candy .thm-face{background:#fdeef3}
.thm-dino .thm-face{background:#f4f1ea}
.thm-sports .thm-face{background:#fdf0e6}
.thm-seasons .thm-face{background:#f9edef}
.thm-grid .thm-face{
  background-image:linear-gradient(#e6e6e6 1px,transparent 1px),linear-gradient(90deg,#e6e6e6 1px,transparent 1px);
  background-size:11px 11px;background-color:#fff;
}

/* ------------------------------------------- 6g marketplace */

.mkt-in{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.mkt-cards{display:grid;gap:14px;position:relative}
.lst{
  background:var(--card);border:1.5px solid var(--rule);border-radius:12px;padding:17px 18px;
  box-shadow:var(--shadow-sm);display:grid;gap:9px;
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease;
}
.lst:nth-child(1){transform:rotate(-.8deg)}
.lst:nth-child(2){transform:rotate(.6deg) translateX(10px)}
.lst:nth-child(3){transform:rotate(-.4deg)}
.lst:hover{transform:rotate(0) translateY(-3px);box-shadow:var(--shadow)}
.lst-t{font-family:var(--display);font-size:17px;font-weight:700;margin:0;line-height:1.25}
.lst-m{font-size:12.5px;color:var(--ink-3);margin:0}
.lst-f{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;border-top:1px solid var(--rule-soft)}
.lst-stars{display:flex;gap:2px;color:var(--gold);font-size:13px}
.lst-p{font-family:var(--display);font-weight:700;color:var(--board-2);font-size:16px}
.lst-p span{font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-left:4px}

.earn{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0 0;
}
.earn div{
  background:var(--paper-warm);border:1.5px solid var(--rule);border-radius:11px;padding:15px 16px;
}
.earn b{display:block;font-family:var(--display);font-size:26px;line-height:1.1;color:var(--board-2);font-weight:700}
.earn span{font-size:13px;color:var(--ink-2);display:block;margin-top:3px}

/* ------------------------------------------- 6h pricing */

.price-panel{
  background:var(--card);border:1.5px solid var(--rule);border-radius:var(--r-xl);
  padding:34px 32px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.price-panel::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--board),var(--board-3),var(--gold));
}
.price-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
.price-big{font-family:var(--display);font-size:58px;line-height:1;font-weight:700;margin:0;letter-spacing:-.035em}
.price-big span{font-size:19px;font-family:var(--sans);font-weight:700;color:var(--ink-3);letter-spacing:0}
.cost-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.cost-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--rule);font-size:15px;
}
.cost-list li:last-child{border-bottom:0}
.cost-list li span:last-child{font-weight:800;color:var(--board-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-list .earn-line span:last-child{color:var(--gold-2)}

/* ------------------------------------------- 6i sticky notes */

.notes{display:grid;grid-template-columns:1fr;gap:22px}
.note{
  padding:26px 24px 22px;border-radius:2px;position:relative;
  box-shadow:0 12px 26px -16px rgba(35,31,26,.55);
  background:var(--gold-wash);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s ease;
}
.note::after{
  content:"";position:absolute;right:0;bottom:0;border-width:0 0 22px 22px;border-style:solid;
  border-color:transparent transparent rgba(35,31,26,.07) transparent;
}
.note:nth-child(1){background:#fbf0d8;transform:rotate(-1.4deg)}
.note:nth-child(2){background:#e9f3ec;transform:rotate(1deg)}
.note:nth-child(3){background:#fbeee9;transform:rotate(-.6deg)}
.note:hover{transform:rotate(0) translateY(-5px);box-shadow:0 20px 38px -18px rgba(35,31,26,.6)}
.note p{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 16px}
.note-by{display:flex;align-items:center;gap:11px;margin:0}
.note-av{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--board);color:#fff;font-weight:800;font-size:14px;line-height:1;
}
.note-who b{display:block;font-size:14px;font-weight:800;line-height:1.3}
.note-who > span{display:block;font-size:12.5px;color:var(--ink-2)}
.note-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin:0 0 12px;display:block}

/* ------------------------------------------- 6j faq */

.faq-in{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
.faq-in .sec-head{margin:0}
.faq{display:grid;gap:0;border-top:1.5px solid var(--rule)}
.faq details{border-bottom:1.5px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.012em;
  transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--apple)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2.4px solid var(--ink-3);border-bottom:2.4px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s ease,border-color .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--apple)}
.faq details[open] summary{color:var(--apple)}
.faq .faq-a{padding:0 44px 24px 0;margin:0;color:var(--ink-2);font-size:16px;max-width:74ch}
.faq .faq-a p{margin:0 0 .8em}
.faq .faq-a p:last-child{margin:0}

/* ------------------------------------------- 6k final cta */

.cta{padding:88px 0;text-align:center}
.cta h2{font-size:clamp(30px,4.6vw,50px);letter-spacing:-.032em;line-height:1.06;margin:0 auto 20px;max-width:17ch}
.cta p{font-size:19px;max-width:52ch;margin:0 auto 32px}
.cta .btn-row{justify-content:center}
.cta .cta-fine{margin:30px auto 0;font-size:14.5px;max-width:60ch;color:rgba(238,244,240,.62)}
.cta-chalk{
  font-family:var(--hand);font-size:27px;color:var(--gold);
  transform:rotate(-1.8deg);display:inline-block;margin:0 0 14px;
}

/* ============================================================
   6z  Landing page — the bright pass
   ------------------------------------------------------------
   The page above this was warm, restrained and set in a serif,
   and it read like a quarterly review that happened to be about
   worksheets. The people it is for teach seven-year-olds and buy
   from a marketplace full of colour, so it now looks like it
   belongs there: bright accents, thick rounded edges, badges
   with a bit of tilt, a hard offset shadow instead of a soft
   blur, and the block face doing the shouting.

   Everything here is an override of section 6 rather than a
   rewrite of it, so the layout and the responsive behaviour that
   were already tested stay exactly as they were.

   The signed-in pages deliberately do NOT get any of this. A
   teacher looking at their own worksheet should not have to
   compete with the furniture around it.
   ============================================================ */

/* --- the shapes ------------------------------------------- */

.lp .btn-primary,
.lp .btn-lg{
  border-radius:14px;font-weight:700;letter-spacing:-.012em;
}
/* A hard offset shadow rather than a blur: it reads as a printed sticker
   rather than as a floating pane, and it survives being screenshotted. */
.lp .btn-primary{
  background:var(--board);border:2px solid var(--board);
  box-shadow:0 4px 0 var(--board-2);
}
.lp .btn-primary:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--board-2)}
.lp .btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--board-2)}
/* Not .btn-chalk. That one is an outline button designed to sit on the dark
   closing panel: white text, white border, no fill. Giving it a card
   background painted white text onto white and the button came out blank. */
.lp .btn:not(.btn-primary):not(.btn-quiet):not(.btn-chalk):not(.btn-gold){
  border-width:2px;border-radius:14px;font-weight:700;background:var(--card);
  box-shadow:0 4px 0 var(--rule);
}
.lp .btn-chalk,.lp .btn-gold{border-radius:14px;font-weight:700}
.lp .btn-chalk{border-width:2px}

.lp .card,
.lp .tile,
.lp .thm,
.lp .mini,
.lp .price-card,
.lp .step{
  border-radius:18px;border-width:2px;
}

/* --- sections get their own colour ------------------------ */

.lp .sec-warm{background:var(--sky-wash);border-top-color:#cfe2f6;border-bottom-color:#cfe2f6}
.lp #themes{background:var(--grape-wash);border-top-color:#e0d3f5;border-bottom-color:#e0d3f5}
.lp #pricing{background:var(--gold-wash);border-top-color:#f2e0b8;border-bottom-color:#f2e0b8}
.lp #faq{background:var(--mint-wash);border-top-color:#c9ebdf;border-bottom-color:#c9ebdf}

/* --- the hero --------------------------------------------- */

.lp .hero{
  background:
    radial-gradient(40% 44% at 86% 4%,rgba(232,80,141,.26),transparent 66%),
    radial-gradient(38% 42% at 2% 84%,rgba(47,127,212,.24),transparent 64%),
    radial-gradient(34% 36% at 66% 104%,rgba(217,154,43,.28),transparent 62%),
    radial-gradient(30% 34% at 34% -6%,rgba(24,160,122,.20),transparent 62%),
    linear-gradient(180deg,#fffdf8 0%,#fdf6ec 72%);
}
.lp .hero h1{font-weight:800;letter-spacing:-.038em}

/* The marker under the last three words was a thin red line at 4.5px. On a
   page this bright it can be an actual highlighter: gold, and fat enough to
   read as a stroke someone made rather than as a rule the layout drew. */
/* Under the words, not through them. At .4em tall and bottom:-.09em the
   stroke started level with the x-height and ran across the letters; it wants
   to sit on the baseline and hang below it, the way a marker does. */
.lp .hl-mark{stroke:var(--gold);opacity:.9;height:.26em;bottom:-.13em}
.lp .hl-mark path{stroke-width:7px}
@media (max-width:700px){.lp .hl-mark path{stroke-width:5.5px}}

/* The underline under the last words of the headline was a thin red rule.
   As a fat marker stroke it does the job it was always pretending to do. */
.lp .hero h1 u,
.lp .hero h1 .mark{
  text-decoration:none;
  background:linear-gradient(180deg,transparent 62%,var(--gold-wash) 62%,#f7d98e 96%,transparent 96%);
  padding:0 .06em;
}

/* --- badges become stickers ------------------------------- */

.lp .hero-badge{
  border-radius:999px;border:2px solid var(--gold);
  background:#fff;box-shadow:0 3px 0 rgba(184,126,24,.35);
  rotate:-1.6deg;
}
.lp .eyebrow{color:var(--sky);font-weight:800;letter-spacing:.13em}
.lp .eyebrow::before{background:var(--sky);height:3px;width:20px}

.lp .pill,
.lp .std-chip{
  border-radius:999px;border:2px solid var(--rule);background:#fff;font-weight:700;
}

/* --- steps get numbered stickers -------------------------- */

.lp .steps{counter-reset:lpstep}
.lp .step{background:#fff;box-shadow:0 4px 0 var(--rule-soft)}
/* The step number is a hand-drawn circle with the digit inside it — an SVG
   scribble behind an <i>. An earlier pass replaced it with a filled square
   badge, which left the scribble drawn inside the square and the digit still
   in red pen on top of a blue fill; it read as a glitch. The original shape is
   better, so all this does now is give each step its own colour. */
.lp .steps > *:nth-child(1) .step-n svg{stroke:var(--sky)}
.lp .steps > *:nth-child(1) .step-n i{color:var(--sky)}
.lp .steps > *:nth-child(2) .step-n svg{stroke:var(--tangerine)}
.lp .steps > *:nth-child(2) .step-n i{color:var(--tangerine)}
.lp .steps > *:nth-child(3) .step-n svg{stroke:var(--grape)}
.lp .steps > *:nth-child(3) .step-n i{color:var(--grape)}

/* --- the theme swatches ----------------------------------- */

.lp .thm{box-shadow:0 4px 0 var(--rule-soft);transition:transform .16s ease}
.lp .thm:hover{transform:translateY(-3px) rotate(-1deg)}

/* --- the handwritten notes stay, but brighter ------------- */

.lp .hand,
.lp .annot{color:var(--bubble)}
.lp .annot-arrow,
.lp .arrow{color:var(--bubble)}

/* --- the closing call to action --------------------------- */

.lp .cta{background:var(--board)}
.lp .cta h2{font-weight:800;letter-spacing:-.036em}

/* --- every card gets an edge and a shadow ------------------
   Thin hairline borders and soft blurred shadows read as "software". Two
   pixels of edge and a hard offset underneath reads as something printed and
   stuck down, which is the whole visual language of the marketplace these
   teachers already buy from. */
.lp .step,
.lp .thm,
.lp .mini,
.lp .note,
.lp .lst,
.lp .price-panel,
.lp .faq,
.lp .ask-card,
.lp .annot-sheet,
.lp .earn{
  border:2px solid var(--rule);border-radius:18px;
  box-shadow:0 5px 0 var(--rule-soft);
}
.lp .note{background:#fff}
.lp .lst{background:#fff}

/* A little tilt on the things that are meant to feel handled. */
/* The three "what it is for" cards carry a drawing instead of a star rating. */
.lp .note-ico{display:block;margin:0 0 10px}
.lp .note-ico img{width:44px;height:44px;object-fit:contain;display:block}

/* Rows of cards line up along the bottom. Three cards of different heights
   with a hard shadow under each other is the thing that reads as broken. */
.lp .steps,.lp .notes{align-items:stretch}
.lp .steps > *,.lp .notes > *{display:flex;flex-direction:column;height:100%}

.lp .note:nth-of-type(1){rotate:-.7deg}
.lp .note:nth-of-type(2){rotate:.5deg}
.lp .note:nth-of-type(3){rotate:-.4deg}
.lp .thm:nth-child(odd){rotate:-.5deg}
.lp .thm:nth-child(even){rotate:.5deg}

/* --- a colour per section, carried by the heading ---------- */

.lp #how .eyebrow{color:var(--sky)}
.lp #how .eyebrow::before{background:var(--sky)}
.lp #onpage .eyebrow{color:var(--tangerine)}
.lp #onpage .eyebrow::before{background:var(--tangerine)}
.lp #themes .eyebrow{color:var(--grape)}
.lp #themes .eyebrow::before{background:var(--grape)}
.lp #marketplace .eyebrow{color:var(--mint)}
.lp #marketplace .eyebrow::before{background:var(--mint)}
.lp #pricing .eyebrow{color:var(--gold-2)}
.lp #pricing .eyebrow::before{background:var(--gold-2)}
.lp #faq .eyebrow{color:var(--mint)}
.lp #faq .eyebrow::before{background:var(--mint)}

/* The star ratings on the marketplace cards and the staff-room notes were
   the same gold as everything else; on a bright page they can be gold. */
.lp .lst-stars .star.on,
.lp .note-stars .star.on{color:var(--gold);font-size:1.05em}

/* Section headings sit on a coloured baseline rather than floating.

   text-decoration, not a positioned bar. A bar is one box, so on a heading
   that wrapped to two lines it ran the full width under the last line and out
   past the end of the words. An underline is drawn per line, always the width
   of the text, and never needs to know how the heading broke. */
.lp .sec-head h2{
  text-decoration:underline;
  text-decoration-color:var(--sky);
  text-decoration-thickness:5px;
  text-underline-offset:7px;
  text-decoration-skip-ink:none;
}
.lp #onpage .sec-head h2{text-decoration-color:var(--tangerine)}
.lp #themes .sec-head h2{text-decoration-color:var(--grape)}
.lp #marketplace .sec-head h2{text-decoration-color:var(--mint)}
.lp #pricing .sec-head h2{text-decoration-color:var(--gold)}
.lp #faq .sec-head h2{text-decoration-color:var(--mint)}

/* --- the price panel is the one that has to feel like a deal -- */
.lp .price-big{color:var(--tangerine)}
.lp .price-panel{background:#fff}

/* --- the real clip-art, on the page that sells it ---------- */

.lp .thm-art{
  width:62px;height:62px;object-fit:contain;display:block;margin:0 auto;
}
/* The three paper styles draw a glyph rather than a picture; same size, same
   place, so the row reads as ten of one thing. */
.lp .thm-motif{
  width:52px;height:52px;display:block;margin:0 auto;
  fill:none;stroke:var(--thm,var(--ink-2));stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
}
.lp .thm-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}

/* Four drawings scattered behind the hero, big and faint. They are the same
   files a worksheet uses, so the promise on this page and the thing in the box
   cannot drift apart. Hidden on a phone, where there is no room to scatter
   anything. */
.lp .hero-doodles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lp .hd{position:absolute;object-fit:contain;opacity:.34}
.lp .hd-1{width:132px;height:132px;left:1.5%;top:10%;rotate:-9deg}
.lp .hd-2{width:104px;height:104px;left:92%;top:24%;rotate:11deg}
.lp .hd-3{width:118px;height:118px;left:4%;bottom:6%;rotate:6deg}
.lp .hd-4{width:92px;height:92px;left:87%;bottom:12%;rotate:-13deg}
@media (max-width:900px){ .lp .hero-doodles{display:none} }

/* --- a few confetti shapes, drawn in CSS ------------------/* --- a few confetti shapes, drawn in CSS ------------------
   Decoration only, behind everything, and hidden from screen readers by
   being generated content rather than markup. */
.lp .sec{isolation:isolate}
.lp .confetti{
  position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}
.lp .confetti i{
  position:absolute;display:block;border-radius:4px;opacity:.5;
}
.lp .confetti i:nth-child(1){width:18px;height:18px;left:3.5%;top:16%;background:var(--sky);rotate:18deg}
.lp .confetti i:nth-child(2){width:12px;height:12px;left:93%;top:11%;background:var(--tangerine);rotate:-12deg;border-radius:50%}
.lp .confetti i:nth-child(3){width:15px;height:15px;left:9%;top:74%;background:var(--gold);rotate:32deg}
.lp .confetti i:nth-child(4){width:11px;height:11px;left:88%;top:70%;background:var(--grape);rotate:-24deg;border-radius:50%}
.lp .confetti i:nth-child(5){width:14px;height:14px;left:47%;top:5%;background:var(--bubble);rotate:8deg}
.lp .confetti i:nth-child(6){width:10px;height:24px;left:70%;top:84%;background:var(--mint);rotate:-16deg;border-radius:6px}
.lp .hero .confetti i{opacity:.62}
.lp .sec > .wrap,.lp .hero > .wrap{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .lp .thm:hover{transform:none}
  .lp .btn-primary:hover,.lp .btn-primary:active{transform:none}
}

/* ============================================================
   7  The worksheet itself — shared by preview, print and PDF
   Keep this black-on-white and schoolbook. It has to print.
   ============================================================ */

.sheet-frame{
  position:relative;background:#fff;border:1.5px solid var(--rule);border-radius:var(--r-lg);
  padding:28px 24px 28px 38px;overflow:hidden;box-shadow:var(--shadow-sm);
}
.sheet-frame::before{
  content:"";position:absolute;left:24px;top:0;bottom:0;width:1.5px;background:rgba(185,58,41,.26);
}
.sheet-frame::after{
  content:"";position:absolute;left:8px;top:14%;width:9px;height:9px;border-radius:50%;
  background:var(--paper-deep);
  box-shadow:0 0 0 1px var(--rule),0 15vh 0 0 var(--paper-deep),0 15vh 0 1px var(--rule),0 30vh 0 0 var(--paper-deep),0 30vh 0 1px var(--rule);
}

.sheet{
  font-family:var(--sheet-serif);color:#000;font-size:15px;line-height:1.5;
  max-width:7.1in;margin:0 auto;
}
.sheet h1,.sheet h2,.sheet h3{font-variation-settings:normal}
.sheet-head{margin:0 0 8px}
.namebar{display:flex;gap:22px;margin:0 0 12px;font-family:var(--sans)}
.nb{display:flex;align-items:flex-end;gap:8px;flex:1;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#333}
.nb-date{max-width:32%}
.nb-l{flex:0 0 auto;font-weight:700}
.nb-r{flex:1;border-bottom:1px solid #000;height:16px}

.sheet-title{font-family:var(--sheet-serif);font-size:25px;margin:0;text-align:center;letter-spacing:-.01em;font-weight:700}
.sheet-sub{text-align:center;font-size:14px;color:#333;margin:4px 0 0;font-style:italic}
/* No border-left. It used to be a 3px bar that themes tinted — purple on the
   default Ditto look — and on a page with no other colour it read as a stray
   red line rather than as structure. The grey block already separates the
   directions from the questions. */
.sheet-directions{
  font-family:var(--sans);font-size:13.5px;background:#f6f6f8;
  padding:9px 13px;margin:16px 0 20px;
}
.key-banner{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;text-align:center;border:1px solid #000;padding:5px;margin:0 0 16px;
}
.key-notes{font-family:var(--sans);font-size:12.5px;border-top:1px solid #ccc;padding-top:9px;margin-top:14px}

.wsec{margin:0 0 15px}
.wsec-title{font-family:var(--sheet-serif);font-size:16px;margin:0 0 4px;border-bottom:1px solid #000;padding-bottom:3px;font-weight:700}
.wsec-dir{font-family:var(--sans);font-size:13px;font-style:italic;margin:0 0 8px;color:#222}

.wgrid{list-style:none;margin:0;padding:0;display:grid;gap:8px 16px}
.wgrid.cols-1{grid-template-columns:1fr}
.wgrid.cols-2{grid-template-columns:repeat(2,1fr)}
.wgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.wgrid.cols-4{grid-template-columns:repeat(2,1fr)}
.wgrid.cols-5{grid-template-columns:repeat(2,1fr)}
.wcell{display:flex;align-items:baseline;gap:6px;font-size:15px;page-break-inside:avoid}
.wnum{font-family:var(--sans);font-size:11.5px;color:#555;min-width:20px;flex:0 0 auto;font-weight:700}
.wprob{white-space:nowrap}
.wblank{flex:1;border-bottom:1px solid #999;min-width:32px;height:15px}
.wans{color:#000;font-weight:700;border-bottom:1px solid #000;min-width:40px;text-align:center;padding:0 4px}
/* The writing space is set by the teacher's Spacing choice, in points, so it
   measures the same on screen as on paper. See wk_spacings(). */
.sheet{--wk-line:15pt;--wk-box:44pt;--wk-gap:8pt}
.workbox{display:block;width:100%;height:calc(var(--wk-box) * .72);border:1px dashed #999;border-radius:3px;margin-top:4px}
.workbox.tall{height:var(--wk-box)}
.with-work .wcell{display:block}

.wlist{list-style:none;margin:0;padding:0}
.witem{display:flex;gap:9px;margin:0 0 var(--wk-gap);page-break-inside:avoid}
.wbody{flex:1;min-width:0}
.wq{margin:0 0 5px;font-size:15px}
/* #777, not #bbb. A hairline that light is the first thing a copier drops,
   and a writing line a child cannot see is not a writing line. */
.wline{border-bottom:1px solid #777;height:var(--wk-line);margin-top:3pt}

.wchoices{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:4px}
.wchoice{font-size:14.5px;display:flex;gap:7px;align-items:baseline}
.wletter{
  font-family:var(--sans);font-size:11px;font-weight:700;border:1px solid #000;
  border-radius:50%;width:17px;height:17px;line-height:15px;text-align:center;flex:0 0 auto;
}
.wchoice.is-answer{font-weight:700}
.wchoice.is-answer .wletter{background:#000;color:#fff}
.wans-line{font-family:var(--sans);font-size:12.5px;font-weight:700;margin:5px 0 0;color:#000}

.tfbox{
  display:inline-block;font-family:var(--sans);font-size:11px;font-weight:700;
  border:1px solid #000;width:19px;height:19px;line-height:17px;text-align:center;margin-right:4px;
}

.wordbank{border:1px solid #000;padding:9px 12px;margin:0 0 14px;font-size:14px;text-align:center}
.wb-label{
  display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:800;margin-bottom:4px;
}

.wpassage{border:1px solid #ccc;padding:14px 16px;margin:0 0 14px;font-size:14.5px;line-height:1.75}
.wnote{border:1px dashed #666;border-radius:6px;padding:10px 14px;font-size:14px;font-style:italic;text-align:center}

.wmatch{display:grid;grid-template-columns:1fr;gap:16px}
.wmatch-l,.wmatch-r{list-style:none;margin:0;padding:0}
.wmatch-l li,.wmatch-r li{display:flex;gap:7px;align-items:baseline;margin:0 0 9px;font-size:14.5px}
.wmatch-blank{display:inline-block;width:34px;border-bottom:1px solid #000;height:15px;flex:0 0 auto}

.sheet-foot{
  font-family:var(--sans);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:#888;border-top:1px solid #ddd;padding-top:7px;margin-top:24px;text-align:center;
}

/* ------------------------------------------------------------
   Themes.

   Everything a theme changes hangs off two things: the accent colour,
   which render.php sets inline as --sheet-accent from the registry, and
   the drawn mark it puts beside the title and each section heading.
   So adding an eleventh theme is one entry in worksheet_themes() and
   nothing at all down here.

   The rule for all of it is a photocopier. Line art and coloured text
   only, never a filled panel — an accent that reads as teal on a colour
   printer has to still read as legible dark grey on the machine in the
   staff room, and it must not eat toner.
   ------------------------------------------------------------ */

.sheet{--sheet-accent:#000}

/* display:inline-block is load-bearing — the base reset sets svg{display:block},
   which drops the mark onto its own line above the heading. */
.wmark{
  display:inline-block;
  /* stroke follows currentColor so a mark sitting on a solid banner turns
     white with the title rather than needing a rule of its own per layout */
  color:var(--sheet-accent);
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  vertical-align:-.1em;flex:0 0 auto;
}
.wmark-lg{width:23px;height:23px;margin-right:9px;vertical-align:-.14em}
.wmark-sm{width:15px;height:15px;margin-right:7px;stroke-width:1.7}

/* A picture theme colours the headings and nothing else. Body copy, answer
   lines and boxes stay black, because those are what a child has to read. */
.style-designed .sheet-title{color:var(--sheet-accent)}
.style-designed .wsec-title{color:var(--sheet-accent);border-bottom-color:var(--sheet-accent)}
.style-designed .sheet-head{border-bottom:2px solid var(--sheet-accent);padding-bottom:12px}
.style-designed .sheet-foot{border-top-color:var(--sheet-accent)}
.style-designed .wq,.style-designed .wcell{font-size:15.5px}

/* Each theme gets its own rule treatment as well as its own colour, so the
   seven are still told apart on a black-and-white copy. */
.theme-space   .wsec-title{border-bottom-style:dotted}
.theme-ocean   .wsec-title{border-bottom-style:double;border-bottom-width:3px}
.theme-jungle  .wsec-title{border-bottom-style:dashed}
.theme-candy   .wsec-title{border-bottom-style:dashed;border-bottom-width:2px}
.theme-dino    .wsec-title{border-bottom-style:solid;border-bottom-width:2px}
.theme-sports  .wsec-title{border-bottom-style:double;border-bottom-width:3px}
.theme-seasons .wsec-title{border-bottom-style:dotted;border-bottom-width:2px}

.theme-ocean   .sheet-head{border-bottom-style:double;border-bottom-width:4px}
.theme-sports  .sheet-head{border-bottom-style:solid;border-bottom-width:3px}
.theme-space   .sheet-head{border-bottom-style:dotted;border-bottom-width:3px}
.theme-seasons .sheet-head{border-bottom-style:dotted;border-bottom-width:3px}
.theme-jungle  .sheet-head{border-bottom-style:dashed}
.theme-candy   .sheet-head{border-bottom-style:dashed}

/* the three paper styles */
.theme-ditto .sheet-title,.theme-ditto .wsec-title{color:#332592}
.theme-ditto .wsec-title{border-bottom-color:#332592}
.theme-grid .wcell,.theme-grid .workbox{
  background-image:linear-gradient(#eee 1px,transparent 1px),linear-gradient(90deg,#eee 1px,transparent 1px);
  background-size:14px 14px;
}

/* ============================================================
   7d  The build screen — one box, everything else folded away
   ============================================================ */

.build{max-width:760px;margin:0 auto}
.build .page-head{margin-bottom:30px}
.build .page-head h1{font-size:clamp(28px,4.4vw,40px);letter-spacing:-.028em}

.build-box{
  background:var(--card);border:2px solid var(--ink);border-radius:16px;
  padding:22px 22px 0;box-shadow:var(--shadow);overflow:hidden;
}
.build-label{
  display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;color:var(--ink-3);margin:0 0 12px;
}
.build-box textarea{
  border:0;padding:0;font-size:21px;line-height:1.45;min-height:96px;
  background:transparent;resize:vertical;font-family:var(--sans);
}
.build-box textarea:focus{outline:none;box-shadow:none;border:0}
.build-box textarea::placeholder{color:var(--ink-3);opacity:.72}

.build-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:end;
  margin:18px -22px 0;padding:16px 22px;
  background:var(--paper-warm);border-top:1px solid var(--rule);
}
.build-meta .field{margin:0}
.build-meta .field > label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.build-meta select{background-color:var(--card)}
.build-note{grid-column:1/-1;margin:11px 0 0;font-size:12.5px;color:var(--ink-3)}

.build-kind{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px}
.build-change{font-size:13px;color:var(--ink-3)}
.build-note-graded{
  text-align:center;margin:16px 0 0;font-size:13.5px;color:var(--apple);font-weight:600;
}
.build-eg{text-align:center;font-size:14.5px;color:var(--ink-2);margin:18px 0 26px}
.build-eg .hand{font-size:21px;white-space:nowrap}

/* the "more options" drawer — a <details>, so it needs no JavaScript */
.more{border:1.5px solid var(--rule);border-radius:14px;background:var(--card);overflow:hidden}
.more > summary{
  list-style:none;cursor:pointer;padding:17px 20px 17px 46px;position:relative;
  display:block;transition:background .15s ease;
}
.more > summary::-webkit-details-marker{display:none}
.more > summary:hover{background:var(--paper-warm)}
.more > summary::before{
  content:"";position:absolute;left:20px;top:50%;margin-top:-4px;
  width:9px;height:9px;border-right:2.4px solid var(--ink-3);border-bottom:2.4px solid var(--ink-3);
  transform:rotate(-45deg);transition:transform .2s ease;
}
.more[open] > summary::before{transform:rotate(45deg);margin-top:-6px}
.more[open] > summary{border-bottom:1.5px solid var(--rule);background:var(--paper-warm)}
.more-t{display:block;font-weight:700;font-size:16px}
.more-d{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.more-in{padding:22px 20px 6px}

.build-go{text-align:center;margin:30px 0 0}
.build-go .btn-lg{min-width:230px}
.build-cost{margin:15px 0 6px;font-size:14px;color:var(--ink-2)}
.build-cost strong{color:var(--ink)}

@media (max-width:540px){
  .build-box{padding:18px 18px 0}
  .build-box textarea{font-size:18px}
  .build-meta{grid-template-columns:1fr;gap:14px;margin:16px -18px 0;padding:16px 18px}
}

/* ============================================================
   7c  Admin console
   ============================================================ */

/* dotted-leader list — reads like an answer sheet, used on the admin tabs */

.ans-list{list-style:none;margin:0;padding:0}
.ans-list li{display:flex;align-items:baseline;gap:11px;padding:13px 0}
.ans-list li + li{border-top:1px solid var(--rule-soft)}
.ans-list .dots{flex:1;border-bottom:2px dotted var(--rule);transform:translateY(-.3em);min-width:24px}
.ans-list .ans-r{flex:0 0 auto;font-weight:800;color:var(--board-2);font-variant-numeric:tabular-nums}
.ans-list .earn .ans-r{color:var(--gold-2)}


.adm-bar{
  display:flex;flex-wrap:wrap;gap:4px;border-bottom:1.5px solid var(--rule);
  margin:0 0 26px;padding:0;list-style:none;
}
.adm-bar a{
  display:block;padding:11px 15px;font-size:14.5px;font-weight:700;color:var(--ink-2);
  border-bottom:3px solid transparent;margin-bottom:-1.5px;border-radius:8px 8px 0 0;
}
.adm-bar a:hover{background:var(--paper-warm);text-decoration:none;color:var(--ink)}
.adm-bar a.on{color:var(--board-2);border-bottom-color:var(--board);background:var(--board-wash)}
.adm-bar .count{
  display:inline-block;margin-left:7px;background:var(--apple);color:#fff;
  font-size:11px;font-weight:800;border-radius:999px;padding:1px 7px;vertical-align:1px;
}

.adm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0 0 26px}
@media (min-width:820px){.adm-grid{grid-template-columns:repeat(4,1fr)}}

/* a bar chart drawn with nothing but divs.
   The columns stretch to full height so the bar's percentage has something to
   resolve against; the bar itself is the absolutely positioned span inside. */
.spark{display:flex;align-items:stretch;gap:5px;height:132px;margin:20px 0 0}
.spark div{flex:1;position:relative;background:var(--paper-warm);border-radius:4px 4px 0 0}
.spark div span{
  position:absolute;left:0;right:0;bottom:0;min-height:3px;
  background:var(--board-3);border-radius:4px 4px 0 0;
}
.spark-x{display:flex;gap:4px;margin-top:7px;font-size:10px;color:var(--ink-3)}
.spark-x div{flex:1;text-align:center;overflow:hidden;white-space:nowrap}

.adm-search{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 20px}
.adm-search .field{margin:0;flex:1;min-width:190px}

.row-form{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.row-form input[type=number]{width:88px;padding:7px 9px;font-size:13.5px}
.row-form input[type=text]{width:150px;padding:7px 9px;font-size:13.5px}
.row-form select{width:auto;padding:7px 28px 7px 9px;font-size:13.5px;background-position:calc(100% - 14px) 15px,calc(100% - 9px) 15px}

.pill-role{
  display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:800;padding:3px 8px;border-radius:5px;background:var(--paper-deep);color:var(--ink-2);
}
.pill-role.admin{background:var(--board);color:#fff}
.pill-role.susp{background:var(--apple-wash);color:var(--apple)}

.rev-card{border:1.5px solid var(--rule);border-radius:12px;padding:18px;margin:0 0 14px;background:var(--card)}
.rev-card h3{margin:0 0 5px;font-size:18px}

/* --- the standards button says which grade it will load -----
   Every grade's wording is in the button and all of them are hidden; one rule
   per grade reveals the one whose <option> is checked, so the label follows the
   dropdown live with no JavaScript. Where :has() is missing nothing is revealed
   and the generic fallback shows instead — true whatever the dropdown says.

   The fallback is hidden by the same @supports that turns the specific ones on,
   so exactly one of the two is ever visible. */
.gs{display:none}
@supports selector(:has(*)){
  .build-form:has(#grade option[value=""]:checked)   .gs-any{display:inline}
  .build-form:has(#grade option[value="K"]:checked)  .gs-K{display:inline}
  .build-form:has(#grade option[value="1"]:checked)  .gs-1{display:inline}
  .build-form:has(#grade option[value="2"]:checked)  .gs-2{display:inline}
  .build-form:has(#grade option[value="3"]:checked)  .gs-3{display:inline}
  .build-form:has(#grade option[value="4"]:checked)  .gs-4{display:inline}
  .build-form:has(#grade option[value="5"]:checked)  .gs-5{display:inline}
  .build-form:has(#grade option[value="6"]:checked)  .gs-6{display:inline}
  .build-form:has(#grade option[value="7"]:checked)  .gs-7{display:inline}
  .build-form:has(#grade option[value="8"]:checked)  .gs-8{display:inline}
  .build-form:has(#grade option[value="9"]:checked)  .gs-9{display:inline}
  .build-form:has(#grade option[value="10"]:checked) .gs-10{display:inline}
  .build-form:has(#grade option[value="11"]:checked) .gs-11{display:inline}
  .build-form:has(#grade option[value="12"]:checked) .gs-12{display:inline}
  .gs-fallback{display:none}
}

/* --- "building your worksheet" ------------------------------
   Shown by assets/pending.js while a slow submit is in flight. It is
   progressive enhancement: without the script the form submits exactly as it
   always did, so nothing here is load-bearing.

   The dots are a CSS animation rather than a spinner image, so there is no
   request to make and nothing to load at the moment the page is busy. */
.pending{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(28,25,20,.55);backdrop-filter:blur(2px);
  animation:pending-in .18s ease both;
}
@keyframes pending-in{from{opacity:0}to{opacity:1}}
.pending-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
  padding:30px 34px 26px;max-width:400px;text-align:center;
}
.pending-dots{display:flex;gap:9px;justify-content:center;margin:0 0 16px}
.pending-dots i{
  width:11px;height:11px;border-radius:50%;background:var(--apple);
  animation:pending-bounce 1.05s ease-in-out infinite;
}
.pending-dots i:nth-child(2){background:var(--board);animation-delay:.14s}
.pending-dots i:nth-child(3){background:var(--gold);animation-delay:.28s}
@keyframes pending-bounce{
  0%,72%,100%{transform:translateY(0);opacity:.45}
  30%{transform:translateY(-8px);opacity:1}
}
.pending-msg{
  font-family:var(--display);font-size:20px;font-weight:600;
  margin:0;color:var(--ink);letter-spacing:-.012em;
}
.pending-note{font-size:14.5px;color:var(--ink-2);margin:7px 0 0;line-height:1.5}

/* Someone who has asked for less movement gets the card without the bouncing. */
@media (prefers-reduced-motion: reduce){
  .pending{animation:none}
  .pending-dots i{animation:none;opacity:.8}
}

/* ============================================================
   7e  The signed-in shell: a sidebar that holds everything
   ------------------------------------------------------------
   Big screen: a fixed vertical rail with the full Create menu.
   Phone: the same markup collapses to an app bar — brand, credits,
   account, and a horizontally scrolling chip row. The nine create
   links hide there and a single "+ New" chip points at the
   dashboard, which is the same menu at full size.
   ============================================================ */

.app{background:var(--paper)}
.shell-main{min-width:0;display:flex;flex-direction:column;min-height:100vh}
.app .main{flex:1}

.sidebar{
  background:var(--board);color:var(--chalk);border-bottom:0;
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:0 12px;padding:0 14px;
}
.sidebar .brand-name{color:#fff}
.sidebar .brand-name em{color:#f2b8ad}
.sidebar .brand-mark{background:rgba(255,255,255,.13)}
.sidebar .side-list a{background:rgba(255,255,255,.1);color:rgba(238,244,240,.85)}
.sidebar .side-list a:hover{background:rgba(255,255,255,.18);color:#fff}
.sidebar .side-list a.on{background:#fff;color:var(--board)}
.sidebar .credit-chip{background:rgba(255,255,255,.11);border-color:transparent;color:#fff}
.sidebar .credit-num{color:var(--gold)}
.sidebar .credit-label{color:rgba(238,244,240,.7)}
.sidebar .avatar{background:var(--gold);color:var(--board)}
.sidebar .side-new{background:#fff;color:var(--board)}
.sidebar .side-new .sl-plus{background:rgba(29,58,48,.14);color:var(--board)}
.sidebar .menu-pop{color:var(--ink)}
.sidebar .menu-pop a{color:var(--ink-2)}
.side-brand{padding:12px 0;gap:10px}
.side-brand .brand-name{font-size:19px}

.side-scroll{
  grid-column:1 / -1;order:3;
  display:flex;align-items:center;gap:7px;
  padding:0 0 11px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.side-scroll::-webkit-scrollbar{display:none}
.side-h{
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  color:var(--ink-3);margin:16px 0 6px;padding:0 10px;
}
/* the create menu itself only exists on the rail */
.side-scroll > .side-h,.side-scroll > .side-create{display:none}

.side-new{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:7px 13px 7px 9px;border-radius:999px;
  background:var(--board);color:#fff;font-size:14px;font-weight:700;
}
.side-new:hover{background:var(--board-2);text-decoration:none}
.side-new .sl-plus{background:rgba(255,255,255,.22);color:#fff}

.side-list{display:flex;gap:7px}
.side-list a{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink-2);background:var(--paper-warm);position:relative;white-space:nowrap;
}
.side-list a:hover{color:var(--ink);text-decoration:none}
.side-list a.on{background:var(--board-wash);color:var(--board-2);font-weight:700}

.sl-plus{
  width:19px;height:19px;border-radius:6px;flex:0 0 auto;
  display:grid;place-items:center;font-size:14px;font-weight:700;line-height:1;
  background:var(--paper-deep);color:var(--ink-3);
}

.side-foot{order:2;display:flex;align-items:center;gap:8px}
.side-foot .credit-chip{padding:6px 12px}
.acct-who,.acct-caret{display:none}
.side-acct{position:relative}
.side-acct > summary{list-style:none;cursor:pointer;display:block;border-radius:10px}
.side-acct > summary::-webkit-details-marker{display:none}
.side-acct .menu-pop{right:0;left:auto}

.app-foot{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between;
  padding:18px 22px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-3);background:var(--paper-warm);
}
.app-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.app-foot a{color:var(--ink-3)}
.app-foot a:hover{color:var(--apple)}

@media (min-width:960px){
  .shell{display:grid;grid-template-columns:252px minmax(0,1fr);align-items:start}
  /* A dark chalkboard rail. Beige on beige on beige read as one flat wall of
     nothing; the rail is the one place on a signed-in page that can carry the
     brand colour without competing with a worksheet, which has to stay black
     on white. */
  .sidebar{
    position:sticky;top:0;height:100vh;overflow:visible;
    display:flex;flex-direction:column;gap:0;padding:0;
    border-bottom:0;border-right:0;background:var(--board);color:var(--chalk);
  }
  .side-brand{padding:18px 20px}
  .side-brand .brand-name{color:#fff}
  .side-brand .brand-name em{color:#f2b8ad}
  .side-brand .brand-mark{background:rgba(255,255,255,.13)}
  .sidebar .side-h{color:rgba(238,244,240,.5)}
  .sidebar .side-list a{color:rgba(238,244,240,.82)}
  .sidebar .side-list a:hover{background:rgba(255,255,255,.09);color:#fff}
  .sidebar .side-list a.on{background:rgba(255,255,255,.14);color:#fff}
  .sidebar .side-list a.on::before{background:var(--gold)}
  .sidebar .sl-plus{background:rgba(255,255,255,.13);color:rgba(238,244,240,.75)}
  .sidebar .side-foot{border-top:1px solid rgba(255,255,255,.14)}
  .sidebar .credit-chip{
    background:rgba(255,255,255,.11);border-color:transparent;color:#fff;
  }
  .sidebar .credit-chip:hover{background:rgba(255,255,255,.18)}
  .sidebar .credit-num{color:var(--gold)}
  .sidebar .credit-label{color:rgba(238,244,240,.7)}
  .sidebar .acct-who{color:#fff}
  .sidebar .side-acct > summary:hover{background:rgba(255,255,255,.09)}
  .sidebar .acct-caret{border-color:rgba(238,244,240,.8)}
  .sidebar .avatar{background:var(--gold);color:var(--board)}
  /* the popover is a white card again — it sits over the page, not the rail */
  .sidebar .menu-pop{color:var(--ink)}
  .sidebar .menu-pop a{color:var(--ink-2)}

  .side-scroll{
    order:0;display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
    padding:6px 12px 10px;
  }
  .sidebar{background-clip:padding-box}
  .side-scroll > .side-h,.side-scroll > .side-create{display:block}
  .side-new{display:none}

  .side-scroll > .side-h:first-of-type{margin-top:2px}

  .side-list{display:grid;gap:1px}
  .side-list a{
    padding:8px 11px;border-radius:9px;background:transparent;font-size:14.5px;white-space:normal;
  }
  .side-list a:hover{background:var(--card)}
  .side-list a.on::before{
    content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;
    border-radius:0 3px 3px 0;background:var(--board);
  }
  .side-list a:hover .sl-plus,.side-list a.on .sl-plus{background:var(--board);color:#fff}
  .side-assess   a:hover .sl-plus{background:var(--apple)}
  .side-practice a:hover .sl-plus{background:var(--board)}
  .side-review   a:hover .sl-plus{background:var(--gold-2)}
  .side-main-nav a{padding-left:12px}

  .side-foot{
    order:0;margin-top:auto;padding:12px;border-top:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:9px;
  }
  .side-foot .credit-chip{justify-content:center;padding:9px 13px}
  .acct-who{
    display:block;font-size:14px;font-weight:700;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* The caret points the way the menu will move: up to open, down to close. */
  .acct-caret{
    display:block;margin-left:auto;width:8px;height:8px;flex:0 0 auto;
    border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
    transform:rotate(-135deg) translateY(-1px);
  }
  .side-acct[open] .acct-caret{transform:rotate(45deg) translateY(-3px)}
  .side-acct > summary{display:flex;align-items:center;gap:10px;padding:7px 9px}
  .side-acct > summary:hover{background:var(--card)}
  .side-acct .menu-pop{
    position:absolute;bottom:calc(100% + 8px);left:0;right:0;top:auto;
    min-width:0;background:var(--card);box-shadow:var(--shadow);z-index:60;
  }
}

/* ============================================================
   7f  The Create menu — thumbnails shaped like the document
   ============================================================ */

.create-grid{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 8px}
@media (min-width:620px){.create-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1180px){.create-grid{grid-template-columns:repeat(3,1fr)}}

.ct{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--card);border:1.5px solid var(--rule);border-radius:14px;
  padding:16px 17px;color:var(--ink);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.ct:hover{
  text-decoration:none;border-color:var(--ink-3);
  box-shadow:var(--shadow-sm);transform:translateY(-2px);
}
.ct b{display:block;font-family:var(--display);font-size:17.5px;font-weight:600;letter-spacing:-.014em}
.ct span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.45}

/* the thumbnail is the shape of the thing you are about to make */
.dt-thumb{
  flex:0 0 auto;width:46px;height:58px;position:relative;
  background:#fff;border:1px solid var(--rule);border-radius:3px;
  padding:7px 6px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
  box-shadow:0 1px 2px rgba(35,31,26,.06);
}
.dt-thumb i{display:block;height:3px;border-radius:2px;background:var(--rule);width:100%}
.dt-thumb i:nth-child(even){width:72%}

/* graded things carry a score mark in the corner */
.dt-quiz::after,.dt-test::after{
  content:"";position:absolute;top:5px;right:5px;width:11px;height:11px;border-radius:50%;
  background:var(--apple-wash);border:1.5px solid var(--apple);
}
.dt-quiz i,.dt-test i{width:78%}
.dt-test{padding-top:16px}
.dt-test::before{
  content:"";position:absolute;top:5px;left:6px;right:20px;height:6px;
  border-radius:2px;background:var(--paper-deep);
}
/* an exit ticket is half a page */
.dt-exit_ticket{height:34px;align-self:center}
/* homework opens with a worked example box */
.dt-homework::before{
  content:"";display:block;height:13px;border:1px dashed var(--rule);border-radius:2px;margin-bottom:2px;
}
/* a warm-up is small and short */
.dt-warmup{height:44px;align-self:center}
/* a study guide leads with a block of reading */
.dt-study_guide::before{
  content:"";display:block;height:17px;border-radius:2px;background:var(--board-wash);margin-bottom:2px;
}
/* vocabulary runs in two columns */
.dt-vocabulary{flex-direction:row;flex-wrap:wrap;gap:3px 4px;align-content:flex-start}
.dt-vocabulary i{width:calc(50% - 2px)}
.dt-vocabulary i:nth-child(even){width:calc(50% - 2px)}
/* flash cards are a cut-out grid */
.dt-flashcards{flex-direction:row;flex-wrap:wrap;gap:4px;align-content:flex-start;padding:6px}
.dt-flashcards i{
  width:calc(50% - 2px);height:calc(50% - 2px);border:1px dashed var(--rule);
  background:transparent;border-radius:2px;
}

/* the type badge used on the library and the build screen */
.type-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  padding:4px 9px;border-radius:6px;background:var(--paper-deep);color:var(--ink-2);
}
.type-tag.assess{background:var(--apple-wash);color:var(--apple)}
.type-tag.practice{background:var(--board-wash);color:var(--board-2)}
.type-tag.review{background:var(--gold-wash);color:var(--gold-2)}

/* score box on a graded printed page */
.scorebox{
  display:flex;align-items:flex-end;gap:8px;justify-content:flex-end;
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#333;margin:10px 0 0;
}
.scorebox .sb-l{font-weight:700}
.scorebox .sb-r{width:62px;border-bottom:1px solid #000;height:17px}
.scorebox .sb-t{font-weight:700;letter-spacing:0;text-transform:none}
.wpts{
  font-family:var(--sans);font-size:10.5px;font-weight:700;color:#666;
  letter-spacing:.04em;white-space:nowrap;
}

/* ============================================================
   7g  Home — deliberately quiet
   ------------------------------------------------------------
   A lot of the people using this are not fast readers of dense
   interfaces. So: two things on the page, large type, big click
   targets, no badge colours competing for attention.
   ============================================================ */

.home-in{max-width:900px;margin:0 auto;padding:8px 0 0}
.home-greet{font-size:16.5px;color:var(--ink-2);margin:0 0 6px}
.home-h1{font-size:clamp(30px,4.2vw,40px);letter-spacing:-.028em;margin:0 0 30px}

/* Three tinted columns rather than one white panel. The page was beige on
   beige and read as a flat wall; each family now has its own colour, which is
   also the fastest way to tell them apart at a glance. */
.make{
  display:grid;grid-template-columns:1fr;gap:14px;
  background:none;border:0;border-radius:0;padding:0;
}
@media (min-width:760px){.make{grid-template-columns:repeat(3,1fr)}}

.make-col{
  border:1.5px solid var(--rule);border-radius:14px;padding:6px 8px 12px;
  background:var(--card);
}
.make-col.assess  {background:var(--apple-wash); border-color:#f0d5cc}
.make-col.practice{background:var(--board-wash); border-color:#cfe0d7}
.make-col.review  {background:var(--gold-wash);  border-color:#eedcb4}

.make-h{
  font-family:var(--sans);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;margin:10px 0 4px;padding:0 10px;
}
.make-col.assess   .make-h{color:var(--apple-2)}
.make-col.practice .make-h{color:var(--board-2)}
.make-col.review   .make-h{color:var(--gold-2)}
.make-row{
  display:block;padding:11px 12px;border-radius:10px;color:var(--ink);
  transition:background .14s ease;
}
.make-row:hover,.make-row:focus-visible{background:rgba(255,255,255,.75);text-decoration:none}
.make-t{
  display:block;font-family:var(--display);font-size:19.5px;font-weight:600;
  letter-spacing:-.014em;line-height:1.2;
}
.make-row:hover .make-t{color:var(--board-2)}
.make-d{display:block;font-size:14px;color:var(--ink-2);margin-top:2px;line-height:1.45}

.home-note{
  margin:16px 2px 0;font-size:15px;color:var(--ink-2);
}
.home-note strong{color:var(--ink)}

.home-todo{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;
  margin:26px 0 0;padding:18px 20px;
  background:var(--gold-wash);border:1.5px solid #eedcb4;border-radius:12px;
}
.home-todo p{margin:0;font-size:15.5px;max-width:60ch}

.home-recent{margin:44px 0 0}
.home-recent-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:0 0 4px;padding-bottom:10px;border-bottom:1.5px solid var(--rule);
}
.home-recent-head h2{margin:0;font-size:22px}
.home-recent-head a{font-size:15px;font-weight:600;white-space:nowrap}
.home-empty{margin:20px 0 0;font-size:16px;color:var(--ink-2)}

.rlist{list-style:none;margin:0;padding:0}
.rlist li{
  display:flex;align-items:center;gap:16px;
  padding:16px 2px;border-bottom:1px solid var(--rule-soft);
}
.rlist li:last-child{border-bottom:0}
.rl-body{flex:1;min-width:0}
.rl-title{
  display:block;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.012em;color:var(--ink);line-height:1.25;
}
.rl-title:hover{color:var(--board-2)}
.rl-meta{display:block;font-size:14.5px;color:var(--ink-2);margin-top:3px}
.rlist .btn{flex:0 0 auto}

/* ------------------------------------------------------------
   7h  Library — the same list, with filters above it
   ------------------------------------------------------------ */

.lib-filters{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 14px;
  margin:0 0 26px;padding:16px 18px;
  background:var(--card);border:1.5px solid var(--rule);border-radius:14px;
}
.lib-filters .field{margin:0;flex:1 1 128px;min-width:0}
.lib-filters .field:first-child{flex:1.6 1 176px}
.lib-filters .field-label{font-size:12.5px;margin-bottom:5px}
.lib-filters input,.lib-filters select{padding-left:12px;padding-right:12px}
.lib-filters .btn{flex:0 0 auto}
.lib-clear{flex:0 0 auto;font-size:14.5px;color:var(--ink-2);padding-bottom:11px}

.lib-count{
  font-size:14.5px;color:var(--ink-3);margin:0 2px 2px;
  padding-bottom:10px;border-bottom:1.5px solid var(--rule);
}
.lib-list li{padding:18px 2px}
.lib-list .rl-title{font-size:20px}
.rl-draft{font-weight:700;color:var(--gold-2)}
.lib-remix{white-space:nowrap}

@media (max-width:860px){
  .lib-remix{display:none}
}

@media (max-width:560px){
  .rlist li{flex-wrap:wrap;gap:10px}
  .rlist .btn{width:100%}
  .home-todo .btn{width:100%}
  .lib-filters{padding:14px}
  .lib-filters .field,.lib-filters .field:first-child{flex:1 1 100%}
  .lib-filters .btn{width:100%}
  .lib-clear{padding:0 0 4px;width:100%;text-align:center}
}

/* --- charm ------------------------------------------------
   The things that make a bought sheet feel handmade rather than generated.
   All of it is line work, so it costs nothing extra to print and survives a
   photocopier — which rules out the obvious tricks (drop shadows, gradients,
   filled panels) and leaves the ones that actually read on paper: a doubled
   edge, a scalloped rule, a dotted tail, a tilt of half a degree. */

/* The title banner gets a second line just inside the first, the way a
   hand-drawn box does when someone goes round it twice. */
.decor-cute .wbanner{
  position:relative;
  box-shadow:inset 0 0 0 1pt #fff, inset 0 0 0 2.2pt var(--sheet-accent);
}

/* Section tabs get a dotted tail running out to the margin, so the eye is
   carried across the page instead of stopping at the label. */
.decor-cute .wsec{position:relative}
.decor-cute .wsec > .wsec-title{position:relative}
.decor-cute .wsec > .wsec-title::after{
  content:"";position:absolute;left:100%;top:50%;width:100vw;max-width:220pt;
  height:0;border-top:1.2pt dotted var(--sheet-edge);
  margin-left:7pt;
}

/* The directions block reads as a note someone stuck on, not a callout panel. */
.decor-cute .sheet-directions{position:relative}

/* A written page is nicer with a little air under the last line of a question
   than a hard stop, so the ruled lines get rounded ends. */
.wline{border-radius:2pt}

/* Numbers lean, very slightly, and not all the same way — the single cheapest
   thing that stops a column of badges looking machine-set. */
.decor-cute .wcell:nth-child(3n+1) .wnum{rotate:-3deg}
.decor-cute .wcell:nth-child(3n+2) .wnum{rotate:2deg}
.decor-cute .wcell:nth-child(3n)   .wnum{rotate:-1.5deg}
.decor-cute .witem:nth-child(odd)  .wnum{rotate:-2.5deg}
.decor-cute .witem:nth-child(even) .wnum{rotate:2deg}

/* Word banks and notes get a scalloped top edge rather than a plain rule. */
.decor-cute .wordbank{position:relative;padding-top:11pt}
.decor-cute .wordbank::before{
  content:"";position:absolute;left:8pt;right:8pt;top:4pt;height:4pt;
  background:radial-gradient(circle at 4pt 0,transparent 3.4pt,var(--sheet-accent) 3.4pt 3.9pt,transparent 3.9pt) 0 0/8pt 8pt repeat-x;
}

/* The name and date rules are what a child touches first. Dotted, so there is
   somewhere obvious to start writing. */
.decor-cute .nb-r{border-bottom-style:dotted;border-bottom-width:1.2pt}

@media print{
  .decor-cute .wsec > .wsec-title::after{max-width:180pt}
}

/* --- the one-pager ----------------------------------------
   The page a student makes: empty labelled areas they fill with everything
   they know about a topic, and decorate. There is not a single writing line in
   here on purpose — a ruled line tells a child to write one sentence and stop,
   which is the opposite of what a one-pager is for.

   The areas are deliberately uneven. A page of equal boxes is a grid, and a
   grid is a worksheet; two big drawing areas and several small ones is the
   thing that reads as something to make. */
.wcanvas{
  display:flex;flex-wrap:wrap;gap:9pt;align-content:flex-start;margin:0;
}
.wzone{
  position:relative;box-sizing:border-box;
  border:1.4pt dashed var(--sheet-accent);border-radius:10pt;
  padding:7pt 9pt;background:#fff;
  page-break-inside:avoid;break-inside:avoid;
}
/* widths add up allowing for the 9pt gaps */
.z-w1{width:calc(33.33% - 6pt)}
.z-w2{width:calc(50% - 4.5pt)}
.z-w3{width:calc(66.66% - 3pt)}
.z-w4{width:100%}
/* Sized so eight areas plus a checklist fill one page and no more. A
   one-pager that runs to two pages is not a one-pager. */
.z-h1{min-height:0.84in}
.z-h2{min-height:1.36in}
.z-h3{min-height:2.06in}

.wzone-t{
  margin:0;font-family:var(--sheet-display);font-size:11pt;line-height:1.15;
  color:var(--sheet-accent);
}
.wzone-h{
  margin:2pt 0 0;font-family:var(--sans);font-size:8.5pt;line-height:1.35;
  color:#666;font-style:italic;
}
/* An area meant for a picture says so, quietly, in its own corner. */
.z-draw{background:var(--sheet-wash);border-style:solid;border-width:1.2pt}

/* A one-pager is decoration by design, so the decorated version leans in: the
   labels sit on a tinted tab rather than floating. */
.decor-cute .wzone-t{
  display:inline-block;background:var(--sheet-wash-2);
  border-radius:0 8pt 8pt 0;border-left:3pt solid var(--sheet-accent-2);
  padding:1.5pt 8pt 2pt 6pt;margin:-1pt 0 0 -4pt;
}

/* --- what a finished piece has to have --------------------- */
.wcheck{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4pt 18pt}
.wcheck-i{display:flex;align-items:flex-start;gap:7px;width:calc(50% - 9pt);font-size:10pt}
.wcheck-b{
  flex:0 0 auto;width:11pt;height:11pt;margin-top:1pt;
  border:1.2pt solid var(--sheet-accent);border-radius:3pt;background:#fff;
}
.wcheck-t{line-height:1.35}

@media (max-width:520px){
  .z-w1,.z-w2,.z-w3{width:100%}
  .wcheck-i{width:100%}
}
.page .z-w1{width:calc(33.33% - 6pt)}
.page .z-w2{width:calc(50% - 4.5pt)}
.page .z-w3{width:calc(66.66% - 3pt)}
.page .wcheck-i{width:calc(50% - 9pt)}

/* --- cut-apart cards, recording sheets, rubrics, steps -----/* --- cut-apart cards, recording sheets, rubrics, steps -----
   Task cards and scoot cards print several to a page and are cut apart, so a
   card carries its number, its question and nothing else — no working space,
   because the answers go on the recording sheet, and no directions, because
   the card is about to be separated from them. */
.wcards{list-style:none;margin:0;padding:0;display:grid;gap:0}
.wcards.cols-1{grid-template-columns:1fr}
.wcards.cols-2{grid-template-columns:1fr 1fr}
.wcards.cols-3{grid-template-columns:repeat(3,1fr)}
.wcard{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:1.6in;padding:13pt 14pt 13pt 32pt;
  border:1pt dashed #777;margin:-0.5pt 0 0 -0.5pt;   /* shared cut lines */
  page-break-inside:avoid;break-inside:avoid;
}
.wcard-n{
  position:absolute;left:12pt;top:12pt;
  font-family:var(--sans);font-weight:700;font-size:12pt;
  color:var(--sheet-accent);
}
.wcard-q{font-size:13pt;line-height:1.45}
.wcard-a{margin-top:8pt;font-family:var(--sans);font-weight:700;font-size:10.5pt}
.decor-cute .wcard-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17pt;height:17pt;border-radius:50%;
  border:1pt solid var(--sheet-accent);background:#fff;font-size:9pt;
}

/* The sheet the answers are written on while the cards move round the room. */
.wrecord{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.wrec{display:flex;align-items:stretch;border:0.8pt solid #777;margin:-0.4pt 0 0 -0.4pt;min-height:32pt}
.wrec-n{
  flex:0 0 22pt;display:flex;align-items:center;justify-content:center;
  background:var(--sheet-wash);border-right:0.8pt solid #777;
  font-family:var(--sans);font-weight:700;font-size:9pt;color:var(--sheet-accent);
}
.wrec-box{flex:1;padding:4pt 6pt;font-family:var(--sans);font-weight:700;font-size:10pt}

/* A marking rubric. Written for the student to read, so it prints on both. */
.wrubric{width:100%;border-collapse:collapse;font-size:10pt;margin:0}
.wrubric th,.wrubric td{border:0.8pt solid #777;padding:5pt 6pt;vertical-align:top;text-align:left}
.wrubric th{width:22%;font-family:var(--sans);font-size:9.5pt;background:var(--sheet-wash)}

/* Steps on a one-pager. No writing space at all — a ruled line under every
   step is what turns a reference sheet back into a worksheet. */
.wsteps{list-style:none;margin:0;padding:0}
.wstep{display:flex;gap:10px;margin:0 0 7pt;align-items:baseline}
.wstep-n{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16pt;height:16pt;border-radius:50%;
  border:1pt solid var(--sheet-accent);color:var(--sheet-accent);
  font-family:var(--sans);font-weight:700;font-size:8.5pt;
}
.wstep-t{font-size:11.5pt;line-height:1.5}

@media (max-width:520px){
  .wcards.cols-2,.wcards.cols-3{grid-template-columns:1fr}
  .wrecord{grid-template-columns:repeat(2,1fr)}
}
.page .wcards.cols-2{grid-template-columns:1fr 1fr}
.page .wrecord{grid-template-columns:repeat(4,1fr)}

/* --- two questions to a row --------------------------------
   Short prompts do not need the full measure, and one under another they cost
   twice the paper for the same writing space. See render_prompt_list(). */
.wlist.two-up{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.wlist.three-up{display:grid;grid-template-columns:repeat(3,1fr);column-gap:16px}
.wlist.two-up .witem,.wlist.three-up .witem{margin-bottom:var(--wk-gap)}
.wlist.three-up .wq{font-size:11pt}
@media (max-width:520px){
  .wlist.two-up,.wlist.three-up{grid-template-columns:1fr}
}
.page .wlist.two-up{grid-template-columns:1fr 1fr}
.page .wlist.three-up{grid-template-columns:repeat(3,1fr)}

/* The line under the brief box that says a standard will do instead. */
.build-alt{
  margin:8px 0 0;font-family:var(--sans);font-size:13.5px;color:var(--ink-2);
}
.build-alt b{color:var(--ink)}

/* --- the answer key ----------------------------------------
   A key, not a second copy of the worksheet. Three columns of answers, and a
   full-width block only where the answer is long enough to need its question
   above it. See render_key_answers(). */
.keygrid{
  list-style:none;margin:0 0 10pt;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4pt 16pt;
}
.keycell{display:flex;align-items:baseline;gap:6px;font-size:11.5pt}
.keycell .wans{font-weight:700}
.keylong{list-style:none;margin:0;padding:0}
.keylong .witem{margin:0 0 8pt}
.keyq{margin:0;font-size:10pt;color:#444;font-style:italic}
.keylong .wans-line{margin-top:2pt}

@media (max-width:520px){ .keygrid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   7i  Cute — the decorated sheet
   ------------------------------------------------------------
   The look a teacher recognises from a bought worksheet: a frame
   round the page, a banner behind the title, section headings as
   pills, numbers in circles, clip-art in two corners.

   This is the one place the "line art and coloured text only"
   rule is relaxed, because a light tint behind a heading is the
   whole point of the style. Everything is still a hairline or a
   very pale wash — never a solid panel a child has to read
   through, and never anything over the space they write in.

   All sizes are in points. The print view sets the sheet's type
   in points too, so a decorated sheet measures the same on screen
   as on paper and the page breaks land in the same place.
   ============================================================ */

/* --- the lettering ------------------------------------------
   Five sets, chosen by the teacher, each naming a display face for the
   title and headings and a text face for the questions. The class comes
   from wk_font_key(); pdf.css restates the same five so the paper matches.
   The size nudges are because the faces are drawn to different x-heights —
   Patrick Hand at 19pt reads smaller than Nunito at 19pt. */
.sheet{--sheet-display:var(--sheet-serif);--sheet-text:var(--sheet-serif);--sheet-dscale:1}
.font-teacher   {--sheet-display:'Patrick Hand','Comic Sans MS',cursive;--sheet-text:'Nunito',system-ui,sans-serif;--sheet-dscale:1.10}
.font-chunky    {--sheet-display:'Baloo 2',system-ui,sans-serif;--sheet-text:'Nunito',system-ui,sans-serif;--sheet-dscale:1.02}
.font-marker    {--sheet-display:'Chewy',system-ui,cursive;--sheet-text:'Short Stack','Comic Sans MS',cursive;--sheet-dscale:1.04}
.font-clean     {--sheet-display:'Nunito',system-ui,sans-serif;--sheet-text:'Nunito',system-ui,sans-serif}
.font-schoolbook{--sheet-display:var(--sheet-serif);--sheet-text:var(--sheet-serif)}

.sheet{font-family:var(--sheet-text)}
.sheet .sheet-title,.sheet .wsec-title,.sheet .wbanner .sheet-sub{font-family:var(--sheet-display)}
.sheet .sheet-title{font-size:calc(19pt * var(--sheet-dscale))}
.font-marker .sheet-title,.font-chunky .sheet-title{letter-spacing:.01em}
.font-teacher .wq,.font-marker .wq{letter-spacing:.004em}

/* The bottom strip belongs to the corner art. Nothing flows into it, so a
   question can never end up printed underneath an octopus. */
.decor-cute{position:relative;padding-bottom:54pt}

/* --- the art and the themed edge --------------------------- */

.wdecor{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.wd-art{
  position:absolute;width:100pt;height:100pt;object-fit:contain;
}
.wd-tr{top:7pt;right:8pt}
.wd-bl{bottom:7pt;left:8pt;width:70pt;height:70pt}

/* A repeating pattern along the top and bottom of the paper, in the theme's
   second colour. It is drawn in the margin, outside the type area, so it is
   decoration rather than a container — which is what was wrong with the plain
   rule box that used to be here. render_edge_pattern() generates the tile in
   the sheet's own colour and hands it over as a data URI, so the same picture
   works in a browser and in dompdf, which cannot fetch an image over http. */
.wd-edge{position:absolute;left:0;right:0;height:12pt;width:auto;opacity:.92}
.wd-e-t{top:0}
.wd-e-b{bottom:0}

/* Content clears the art. The top-right cluster is the widest thing on the
   page, so the header gets the most room. */
.decor-cute > *:not(.wdecor){position:relative;z-index:1}
.decor-cute .sheet-head{padding:6pt 84pt 4pt 14pt;border-bottom:0}
.decor-cute .sheet-directions,
.decor-cute .wsec,
.decor-cute .key-banner,
.decor-cute .key-notes{margin-left:14pt;margin-right:14pt}
.decor-cute .sheet-foot{margin:16pt 68pt 0 68pt}

/* --- the title banner --------------------------------------
   Solid colour with the title reversed out of it. A pale wash behind dark
   text was the safe choice and it is not what a bought worksheet looks like;
   the ink this costs is why the blackline version exists. */

.wbanner{
  margin:5pt 0 0;padding:7pt 14pt 8pt;text-align:center;
  background:var(--sheet-accent);border-radius:10pt;
  border:0;box-shadow:0 1.5pt 0 var(--sheet-accent-2);
}
.wbanner .sheet-title{color:#fff;margin:0}
.wbanner .sheet-sub{margin:3pt 0 0;color:#fff;opacity:.92}
.wbanner .wmark{color:#fff}
.wbanner .wmark:last-child{margin:0 0 0 9pt}

/* --- section headings become tabs -------------------------- */

/* Tabs are a tint with the heading in ink, not white type on a colour.
   Most teachers print on a mono copier, and a mid-tone fill turns into mid
   grey — white letters on it are the first thing to disappear. A wash with a
   solid edge survives that, and costs a fraction of the toner. The one solid
   block of colour on the page is the title banner, whose type is big enough to
   read out of grey. */
.decor-cute .wsec-title{
  display:inline-block;border:0;border-radius:0 12pt 12pt 0;
  padding:3pt 15pt 3.5pt 9pt;
  background:var(--sheet-wash-2);
  border-left:4pt solid var(--sheet-accent-2);
  color:var(--sheet-accent);
}
.decor-cute .wsec-dir{margin-top:2pt}

/* The picture beside a section heading. Floated, so the heading and its
   directions set alongside it and nothing is pushed down the page; small
   enough that a section of four questions still fits where it did. */
.wsec-spot{float:right;width:50pt;height:50pt;object-fit:contain;margin:-6pt 2pt 2pt 10pt}
.lay-poster .wsec-spot,.lay-band .wsec-spot{width:44pt;height:44pt}

/* --- numbers become filled circles ------------------------- */

/* An outlined badge, not a filled one. A filled circle is 8pt white type on a
   grey disc once it has been through a copier, which is the smallest and least
   readable thing on the page. */
.decor-cute .wnum{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:15pt;height:15pt;border-radius:50%;padding:0 2pt;
  background:#fff;border:1pt solid var(--sheet-accent);color:var(--sheet-accent);
  font-family:var(--sans);font-weight:700;
  font-size:8pt;line-height:1;
}
.decor-cute .wcell .wnum,.decor-cute .witem .wnum{margin-right:3pt}

/* --- the blocks a child reads or writes in ------------------
   These keep the pale-wash rule: a tint light enough to write over, with the
   colour carried by the border rather than the fill. */

.decor-cute .sheet-directions{
  background:var(--sheet-wash-2);
  border:0;border-left:4pt solid var(--sheet-accent-2);
  border-radius:4pt 8pt 8pt 4pt;
}
.decor-cute .wnote,.decor-cute .wpassage,.decor-cute .wordbank{
  border:1.4pt dashed var(--sheet-accent);border-radius:8pt;
  background:var(--sheet-wash);
}
.decor-cute .workbox{
  border:1.2pt dashed #999;border-radius:6pt;
}
.decor-cute .key-banner{
  background:var(--sheet-accent);color:#fff;border:0;border-radius:6pt;
}
.decor-cute .sheet-foot{border-top:0;color:var(--sheet-accent)}


/* ============================================================
   7j  Layouts
   ------------------------------------------------------------
   A theme decides colour and pictures. A layout decides the
   architecture: where the title sits, what shape the section
   headings are, how the numbers read, where the art goes.

   Six of them, picked from the sheet's own title and creation
   time, so two worksheets on the same theme are still two
   different-looking pages. That is the point — a marketplace of
   identical sheets reads as one template with the words swapped.

   Everything here is in points, like the rest of the printed
   sheet, so screen and paper agree.
   ============================================================ */

/* ---- classic: the familiar one, and the base the rest vary from ---- */
/* nothing to add — sections 7 and 7i already describe it */

/* ---- band: a colour strip across the top, title reversed out ---- */

.lay-band .sheet-head{
  background:var(--sheet-accent);color:#fff;
  padding:14pt 16pt 13pt;border-bottom:0;margin:0 0 14pt;
  border-radius:6pt;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.lay-band .sheet-title,.lay-band .wbanner .sheet-title{color:#fff}
.lay-band .sheet-sub{color:#fff;opacity:.92}
.lay-band .namebar{margin-bottom:9pt}
.lay-band .nb-l{color:#fff;opacity:.85}
.lay-band .nb-r{border-bottom-color:rgba(255,255,255,.7)}
.lay-band .wbanner{background:none;border:0;padding:0;margin:0;box-shadow:none}
.lay-band .sheet-head .wmark{color:#fff}
/* A layout that takes the filled tab away has to give the heading its colour
   back — .decor-cute sets the text white to sit on the tab, and white on white
   is an invisible heading. */
.lay-band .wsec-title{
  border:0;border-left:3pt solid var(--sheet-accent);border-radius:0;
  padding:1pt 0 1pt 8pt;background:none;color:var(--sheet-accent);
}
.lay-band .wd-tr{display:none}         /* the band is the decoration up there */

/* ---- rail: a narrow themed column down the left ---- */

.lay-rail{padding-left:52pt}
.lay-rail::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:30pt;
  background:var(--sheet-accent);border-radius:0 6pt 6pt 0;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.lay-rail .sheet-head{padding-right:0;border-bottom:1.5pt solid var(--sheet-accent)}
/* the padding goes on the title itself, not the header: left-aligned, the
   title box still spans the full width and runs under the corner art */
.lay-rail .sheet-title,.lay-rail .wbanner .sheet-title{text-align:left;margin-right:88pt}
.lay-rail .sheet-sub{margin-right:88pt}
.lay-rail .sheet-sub{text-align:left}
.lay-rail .wbanner{background:none;border:0;padding:0;text-align:left;box-shadow:none}
.lay-rail .wbanner .sheet-title{color:var(--sheet-accent)}
.lay-rail .wbanner .sheet-sub{color:var(--ink-2);opacity:1}
.lay-rail .wbanner .wmark{color:var(--sheet-accent)}
.lay-rail .wsec-title{background:none;border:0;border-bottom:1.5pt dotted var(--sheet-accent);border-radius:0;padding:0 0 2pt;color:var(--sheet-accent)}
.lay-rail .wd-bl{left:auto;right:10pt}
.lay-rail .sheet-foot{margin-left:0}

/* ---- cards: each question in its own box ---- */

.lay-cards .wcell,.lay-cards .witem{
  border:1pt solid var(--rule);border-radius:7pt;
  padding:7pt 9pt;background:#fff;
}
.lay-cards .wgrid{gap:7pt 8pt}
.lay-cards .wlist .witem{margin-bottom:8pt}
.lay-cards .wsec-title{
  background:none;border:0;border-radius:0;padding:0 0 2pt;
  border-bottom:2pt solid var(--sheet-accent);color:var(--sheet-accent);
}
.lay-cards .sheet-head{border-bottom:0}
.lay-cards .wbanner{border-radius:7pt}

/* ---- label: title on a tilted label, taped to the page ---- */

.lay-label .sheet-head{border-bottom:0;padding-top:4pt}
.lay-label .wbanner,.lay-label .sheet-title:not(.wbanner .sheet-title){
  display:inline-block;
  border:1.5pt solid var(--sheet-accent);border-radius:3pt;border-style:solid;
  padding:7pt 20pt 8pt;rotate:-1.4deg;
  background:var(--sheet-wash);
}
.lay-label .wbanner .sheet-title,.lay-label .wbanner .sheet-sub{color:var(--sheet-accent);opacity:1}
.lay-label .wbanner .wmark{color:var(--sheet-accent)}
.lay-label .wbanner{box-shadow:none}
.lay-label .sheet-head{text-align:center}
.lay-label .wsec-title{
  background:none;border:0;border-radius:0;padding:0 0 1pt;
  border-bottom:1.5pt dashed var(--sheet-accent);color:var(--sheet-accent);
}
.lay-label .wnum{border-radius:3pt}

/* ---- poster: big left-aligned title block, art beside it ---- */

.lay-poster .sheet-head{
  border-bottom:0;padding:0 84pt 10pt 0;text-align:left;
}
/* margin-right, not padding-right: a left-aligned title whose box still spans
   the full width runs under the corner art even though the ink does not, and
   the collision check reads boxes. Padding would not shrink the box. */
.lay-poster .sheet-title,.lay-poster .wbanner .sheet-title{
  text-align:left;font-size:26pt;line-height:1.05;letter-spacing:-.01em;
  margin-right:100pt;
}
.lay-poster .sheet-sub{text-align:left;margin-top:4pt;margin-right:100pt}
.lay-poster .wbanner{
  background:none;border:0;border-bottom:3pt solid var(--sheet-accent);
  border-radius:0;padding:0 0 8pt;text-align:left;box-shadow:none;
}
.lay-poster .wbanner .sheet-title{color:var(--sheet-accent)}
.lay-poster .wbanner .sheet-sub{color:var(--ink-2);opacity:1}
.lay-poster .wbanner .wmark{color:var(--sheet-accent)}
.lay-poster .wbanner .wmark:last-child{display:none}
.lay-poster .wsec-title{
  background:none;border:0;border-radius:0;padding:0;color:var(--sheet-accent);
  font-size:13.5pt;text-transform:uppercase;letter-spacing:.06em;
}
.lay-poster .wsec-dir{border-top:1pt solid var(--rule);padding-top:3pt}

/* Plain paper styles have no accent to build a band or a rail out of, so the
   two layouts that depend on one fall back to the classic arrangement rather
   than drawing a black slab down the side of the page. */
.style-clean.lay-band .sheet-head{background:none;color:inherit;border-bottom:1.5pt solid #000;border-radius:0;padding:0 0 8pt}
.style-clean.lay-band .sheet-title,.style-clean.lay-band .sheet-sub{color:inherit}
.style-clean.lay-band .nb-l{color:#333}
.style-clean.lay-band .nb-r{border-bottom-color:#000}
.style-clean.lay-band .sheet-head .wmark{color:var(--sheet-accent)}
.style-clean.lay-rail{padding-left:0}
.style-clean.lay-rail::before{display:none}

/* ============================================================
   7k  Real pages
   ------------------------------------------------------------
   Shared by the print view and the on-page previews. Everything
   is in inches and points, and the same values apply on screen
   and on paper, so a page on screen is 8.5in x 11in with 0.6in
   margins — exactly what comes out of the printer. The preview
   is not an approximation of the sheet, it is the sheet.

   Before this, a preview was one box that grew with its content,
   so a teacher could not see where the pages would break until
   they opened the print view.
   ============================================================ */

.doc{padding:0}
.page{
  width:8.5in;height:11in;background:#fff;margin:0 auto 22px;
  box-shadow:0 2px 16px rgba(0,0,0,.13);position:relative;
}
.page-in{height:100%;padding:0.6in;box-sizing:border-box;overflow:hidden}
/* The bottom margin holds the themed edge at 10pt from the paper, and one
   line of furniture at 33pt: the footer centred, the page number out to the
   right of it. Stacking them on separate lines needed 10pt more than the
   margin has, and the page number ended up printed over the waves. */
.page-num{
  position:absolute;left:auto;right:0.6in;bottom:0.46in;text-align:right;
  font-family:var(--sans);font-size:8pt;letter-spacing:.08em;color:#999;
}

/* The sheet keeps its own type scale, in points, on screen as well as in
   print — print.css sets the same numbers, so nothing shifts between the
   two and a break measured here lands in the same place on paper. */
.page .sheet{max-width:none;font-size:11.5pt}
.page .sheet-title{font-size:19pt}
.page .sheet-sub{font-size:10.5pt}
.page .wsec-title{font-size:12.5pt}
.page .wq,.page .wcell,.page .wchoice{font-size:11.5pt}
.page .sheet-directions{font-size:10.5pt}
.page .wnum{font-size:9pt}

/* Inside a real page the decoration belongs to the page, not to the sheet.

   The sheet's height changes with its content; a page's never does. While the
   art was pinned to the sheet, the bottom-left clip-art sat at the bottom of
   whatever text happened to be on the page — halfway up the last one — and the
   strip of padding held clear for it was measured against the sheet too, so a
   full page pushed that padding past the bottom of the paper.

   Anchored to the page instead, the art sits in the paper margin the way a
   printed worksheet's does, and the only room the text has to give up is the
   part of the bottom corner that reaches back into the type area. 20pt from the
   paper edge keeps it inside the unprintable border of a home printer. */
.page .decor-cute{position:static;padding-bottom:28pt}
.page .wdecor{position:absolute;inset:0}
/* Bigger, and pushed into the corners rather than floating near them. The art
   is coloring-book line art now — outline only, no fill — so at this size it
   reads as decoration a child could colour in rather than as a smudge, and it
   still costs almost nothing to print. */
.page .wd-tr{top:12pt;right:43.2pt;width:132pt;height:132pt}
.page .wd-bl{bottom:14pt;left:22pt;width:88pt;height:88pt}

/* the edges sit in the paper margin, inside a home printer's unprintable border */
.page .wd-e-t{top:15pt;left:26pt;right:26pt}
.page .wd-e-b{bottom:10pt;left:26pt;right:26pt}
/* Wide enough that the header's box — and so the title's box inside it —
   stops before the corner art starts. The ink cleared it at 96pt; the boxes
   did not, and a box overlap is what the collision check reads, correctly:
   a longer title would have run under the drawing. */
.page .decor-cute .sheet-head{padding-right:138pt}

/* The footer sits in the paper margin, under the type area and above the page
   number, on every page. See the note in render.php. */
.page .sheet-foot{
  position:absolute;left:1in;right:1in;bottom:0.46in;margin:0;
  border-top:0;padding:0;font-size:8.5pt;
}

/* A page is 8.5in wide whatever the phone showing it is, so the column counts
   inside one are not a responsive decision. Without this a teacher previewing
   on a phone saw a two-column sheet and printed a four-column one. */
.page .wgrid.cols-3{grid-template-columns:repeat(3,1fr)}
.page .wgrid.cols-4{grid-template-columns:repeat(4,1fr)}
.page .wgrid.cols-5{grid-template-columns:repeat(5,1fr)}
.page .wchoices{grid-template-columns:1fr 1fr}
.page .wmatch{grid-template-columns:1fr 1fr;gap:26px}

/* A continued section says so, rather than looking like a new one. */
.page .wsec-cont > .wsec-title::after{
  content:" (continued)";font-weight:400;font-style:italic;font-size:.8em;color:#777;
}

/* The preview shrinks to fit its column; the printed page never does. */
/* min-width:0 matters as much as the overflow. A .page is a fixed 8.5in box,
   and a grid or flex column sizes to its content by default, so without this
   the whole layout stretched to 816px and a phone scrolled sideways. */
.doc-scaled{overflow:hidden;min-width:0}
.cols-side > *{min-width:0}
.doc-scaled .page{transform-origin:top center}

@media print{
  /* margin:0 because the 0.6in lives in .page-in — otherwise the browser
     adds its own on top and every page shrinks by that much. */
  @page{size:letter portrait;margin:0}
  .doc{padding:0}
  .page{margin:0;box-shadow:none;page-break-after:always;break-after:page}
  .doc:last-of-type .page:last-child{page-break-after:auto;break-after:auto}
  .doc-scaled .page{transform:none !important}
}

/* ------------------------------------------------------------
   Blackline, last on purpose.

   These are mode overrides, and a mode override has to be able to beat every
   layout rule above it. While they lived up in section 7i, `.lay-band .wbanner
   .sheet-title{color:#fff}` in 7j tied with them on specificity and won on
   order, so a band-layout sheet printed its title white on white paper.
   ------------------------------------------------------------ */
/* Blackline. The palette arrives already resolved to greys — wk_palette() does
   that server-side so the PDF gets the same numbers — but a grey slab still
   spends toner a teacher running a class set does not want to spend. So the
   filled shapes become outlined ones: white with a black edge, which is what a
   blackline master off Teachers Pay Teachers looks like. */
.ink-bw .wbanner{background:#fff;border:1.8pt solid #000;box-shadow:none}
.ink-bw .wbanner .sheet-title,.ink-bw .wbanner .sheet-sub{color:#000;opacity:1}
.ink-bw .wbanner .wmark{color:#000}
.ink-bw.decor-cute .wsec-title,.ink-bw .decor-cute .wsec-title{
  background:#fff;border:1.2pt solid #000;color:#000;
}
.ink-bw.decor-cute .wnum{background:#fff;border:1pt solid #000;color:#000}
.ink-bw.decor-cute .sheet-directions{background:#fff;border-left:3.5pt solid #000}
.ink-bw.decor-cute .wnote,.ink-bw.decor-cute .wpassage,.ink-bw.decor-cute .wordbank{
  background:#fff;border-color:#000;
}
.ink-bw.decor-cute .key-banner{background:#fff;border:1pt solid #000;color:#000}
.ink-bw .wmark{color:#333}
.ink-bw.lay-band .sheet-head{background:#fff;border:1.8pt solid #000;color:#000}
.ink-bw.lay-band .sheet-title,.ink-bw.lay-band .sheet-sub,
.ink-bw.lay-band .nb-l{color:#000;opacity:1}
.ink-bw.lay-band .nb-r{border-bottom-color:#000}
.ink-bw.lay-band .sheet-head .wmark{color:#000}
/* An outlined rail, not a black slab. The whole point of the blackline sheet
   is that a class set does not drink a toner cartridge, and a 30pt column of
   solid black down every page is the single most expensive thing on it. */
.ink-bw.lay-rail::before{background:#fff;border:1.4pt solid #000;border-left:0}

/* A decorative highlighter stroke sits slightly wider than the word it marks,
   which on a narrow phone is one pixel past the edge and enough to make the
   whole page scroll sideways. It is decoration, so it can be clipped. */
@media (max-width:520px){
  html,body{overflow-x:hidden}
}

/* ============================================================
   8  Responsive
   ============================================================ */

/* small phones: the top bar has to fit a wordmark and two buttons */
@media (max-width:540px){
  .topbar-in{height:60px;gap:8px}
  .brand-mark{width:31px;height:31px;border-radius:9px}
  .brand-mark svg{width:18px;height:18px}
  .brand-name{font-size:17.5px}
  .topbar-right{gap:6px}
  .btn{white-space:nowrap}
  .topbar-right .btn-sm{padding:8px 11px;font-size:13px;border-radius:8px}
  .hero .btn-row .btn,.cta .btn-row .btn{width:100%}
  .hero{padding:40px 0 56px}
  .sec{padding:58px 0}
  .remix,.cta{padding:64px 0}
  .price-panel,.auth-card{padding:26px 22px}
  .auth-main,.auth-side{padding:28px 24px}
  .hb-more{display:none}
}

@media (min-width:600px){
  .theme-row{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .choices{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:repeat(4,1fr)}
  .wgrid.cols-3{grid-template-columns:repeat(3,1fr)}
  .wgrid.cols-4{grid-template-columns:repeat(4,1fr)}
  .wgrid.cols-5{grid-template-columns:repeat(5,1fr)}
  .wchoices{grid-template-columns:1fr 1fr}
  .wmatch{grid-template-columns:1fr 1fr;gap:26px}
  .recipe-list{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .notes{grid-template-columns:repeat(3,1fr)}
  .foot-in{grid-template-columns:1.6fr 1fr 1fr}
  .strip-in{grid-template-columns:auto 1fr;gap:34px}
  .price-grid{grid-template-columns:.85fr 1.15fr;gap:44px}
}

@media (min-width:820px){
  .auth-split{grid-template-columns:1.06fr .94fr}
  .auth-main{padding:44px 40px}
  .auth-side{padding:44px 38px}
  .hero-in{grid-template-columns:1.02fr .98fr;gap:46px}
  .remix-in{grid-template-columns:1fr 1fr;gap:56px}
  .mkt-in{grid-template-columns:1fr 1fr;gap:56px}
  .theme-row{grid-template-columns:repeat(5,1fr)}
}

@media (min-width:900px){
  .faq-in{grid-template-columns:.72fr 1.28fr;gap:60px}
  .faq-in .sec-head{position:sticky;top:104px}
  .nav-desk{display:flex}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .cols-side{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
  .cols-side .side{position:sticky;top:90px}
  .main{padding-top:36px}
  .foot-in{grid-template-columns:1.7fr 1fr 1fr 1fr}
}

@media (min-width:1060px){
  .hero{padding:62px 0 84px}
  .hero-in{gap:60px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .js-reveal .rv{opacity:1 !important;translate:none !important}
}