/* ══ WORKSHEET SHEET STYLES ══
   Shared by every printable worksheet, generated by build-worksheets.js.
   Loaded after ns.css, so it inherits the site palette and Archivo and only
   adds what a printable sheet needs. Print rules force black on white. */
/* The worksheet wears the site's palette and typeface. The green belongs to
   Kolten's lesson page, which is his own theme, not the site's.
   ns.css supplies --bg/--panel/--line/--fg/--dim/--a, Archivo, and .btn. */
:root{ --line-ink:#5b636c; }   /* the ruled writing lines */

body{margin:0;background:var(--bg);color:var(--fg)}

.bar{
  max-width:880px;margin:0 auto;padding:18px 20px 0;
  display:flex;gap:12px;align-items:center;font-size:13px;
}
.bar .back{color:var(--dim);text-decoration:none;font-weight:600;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .back:hover{color:var(--fg)}
/* Actions stay together, top right, at every width. */
.acts{margin-left:auto;display:flex;gap:8px;flex:none}
.bar .btn{font-size:13px;padding:9px 14px;gap:7px;text-decoration:none;line-height:1}

.sheet{
  max-width:880px;margin:18px auto 70px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:38px 44px;
}
.head{border-bottom:2px solid var(--fg);padding-bottom:14px;margin-bottom:8px}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin:0}
.sheet h1{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.12;margin:9px 0 6px}
.dek{margin:0;color:var(--dim);font-size:.95rem}
.namebar{display:flex;gap:26px;flex-wrap:wrap;font-size:13px;
  border-bottom:1px solid var(--line);padding:13px 0;margin-bottom:26px}
.namebar span{display:flex;gap:8px;align-items:baseline}
.namebar u{text-decoration:none;border-bottom:1px solid var(--line-ink);
  min-width:150px;display:inline-block}
.sheet h2{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);
  max-width:none}
.sheet h2:first-of-type{margin-top:0}
.sheet p{margin:0 0 14px}
.passage{font-size:1rem;line-height:1.75;color:var(--fg)}

.art{margin:0 0 26px;padding:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.art img{display:block;width:100%;height:auto}

.vocab{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.vocab li{display:flex;gap:12px;align-items:baseline;font-size:.95rem}
.vocab b{font-weight:800;min-width:118px}
.vocab u{text-decoration:none;flex:1;border-bottom:1px solid var(--line-ink);min-height:1.5em}

ol{padding-left:22px;margin:0}
ol.qs>li{margin-bottom:20px;font-size:.95rem;line-height:1.55}
.lines{display:block;margin-top:7px}
.lines i{display:block;border-bottom:1px solid var(--line-ink);height:1.6em}

.note{font-size:.85rem;color:var(--dim);background:var(--panel-2);
  border-left:3px solid var(--a);padding:12px 15px;border-radius:0 var(--r) var(--r) 0;margin:18px 0 0}
.note b{color:var(--fg)}

.key{margin-top:46px;padding-top:22px;border-top:2px solid var(--fg)}
.key h2{margin-top:0}
.key ol{font-size:.9rem}
.key ol li{margin-bottom:9px;line-height:1.5}
.key .kv{font-size:.88rem;color:var(--fg)}
.key .kv b{font-weight:800}

@media print{
  /* Printed sheets are black on white whatever the screen is doing. */
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .bar{display:none}
  @page{margin:14mm}
  .sheet{max-width:none;margin:0;border:0;border-radius:0;padding:0;background:#fff}
  .sheet h1{font-size:19pt}
  .sheet h2,.eyebrow,.dek,.passage,.key .kv,.note{color:#000}
  .sheet h2{border-color:#000}
  .head,.key{border-color:#000}
  .note{background:transparent;border-left:2px solid #000}
  .art{border:1px solid #999;page-break-inside:avoid}
  .art img{max-height:150mm;width:auto;margin:0 auto}
  .lines i,.vocab u,.namebar u{border-bottom:1px solid #000}
  .namebar{border-bottom:1px solid #000}
  .key{page-break-before:always;border-top:0}
  ol.qs>li,.vocab li{page-break-inside:avoid}
}
@media (max-width:560px){
  .sheet{padding:24px 19px;margin:12px 10px 46px}
  .sheet h1{font-size:1.5rem}
  .vocab li{flex-direction:column;gap:5px}
  .vocab u{width:100%}
  .bar{padding:14px 14px 0;gap:10px}
}
@media (max-width:470px){
  /* Icons only. title and aria-label still name each button. */
  .btn .lbl{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .bar .btn{padding:9px 11px}
}

/* ══ PAID PRODUCT PAGE ══
   Buy bar, unit list, faded preview and the locked panel. The locked panel
   describes what is behind the paywall; it never contains it. */
.buybar{display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);
  padding:18px 20px;margin:22px 0 6px}
.buybar.bottom{margin:34px 0 0}
.buyleft{display:flex;flex-direction:column;gap:3px;flex:1;min-width:190px}
.buyleft .price{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--paid)}
.buyleft .pricenote{font-size:.78rem;color:var(--dim)}
.buyright{display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:330px}
.btn.buy{font-size:15px;padding:14px 26px;background:var(--paid);color:#2b0a02;font-weight:800}
.btn.buy.is-off{background:var(--panel);color:var(--dim);
  box-shadow:inset 0 0 0 1px var(--line);cursor:not-allowed}
.buynote{font-size:.73rem;line-height:1.45;color:var(--dim);margin:0}

.gets{margin:0;padding-left:20px;color:var(--dim);font-size:.92rem;line-height:1.6}
.gets li{margin-bottom:5px}
.gets li::marker{color:var(--free)}

.units{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.units li{display:flex;gap:14px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:9px;font-size:.94rem}
.units li:last-child{border-bottom:0}
.units b{font-weight:800;min-width:58px;color:var(--fg)}
.units span{color:var(--dim)}

/* the sample fades out rather than stopping dead */
.passage.preview{position:relative;max-height:none}
.passage.preview p:last-child{
  -webkit-mask-image:linear-gradient(#000 45%,transparent 100%);
  mask-image:linear-gradient(#000 45%,transparent 100%)}

.locked{border:1px dashed var(--line);border-radius:var(--r);
  background:var(--panel-2);padding:20px 22px;margin-top:6px}
.lockhead{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paid);margin:0 0 9px}
.locked p{font-size:.9rem;color:var(--dim);margin:0 0 12px;line-height:1.6}
.locked ul{margin:0;padding-left:20px;font-size:.88rem;color:var(--dim);line-height:1.6}
.locked li{margin-bottom:4px}

@media(max-width:560px){
  .buybar{padding:15px 16px}
  .buyright{max-width:none;width:100%}
  .btn.buy{width:100%;justify-content:center}
}

/* ══ BIBLICAL CONNECTION ══
   The verse sits between the reading and the vocabulary, the same place the
   Leif booklets put it. Styled as a quotation, not as a decorated box, so it
   reads as source material rather than a sidebar to skip. */
.verse{margin:0 0 14px;padding:0 0 0 20px;border-left:3px solid var(--a)}
.verse p{margin:0 0 7px;font-size:1.02rem;line-height:1.65;font-style:italic;color:var(--fg)}
.verse cite{font-style:normal;font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.verse-note{font-size:.93rem;line-height:1.65;color:var(--dim);margin:0}
@media print{
  .verse{border-left:2px solid #000}
  .verse p,.verse cite,.verse-note{color:#000}
  .verse,.verse-note{page-break-inside:avoid}
}

/* ══ BLANK SHEET ══
   A reusable sheet with nothing written on it: the parent supplies the words,
   the student fills the lines. No passage, no vocabulary, no answer key.

   Line heights are set to fill a Letter page rather than to be compact. A
   spelling test is written on by hand, often by a student whose handwriting
   is the reason for the test, so the lines are deliberately generous. */

/* A section heading can carry its own points box, so a block of answers is
   scored where it is written instead of at the foot of the page. */
.sheet h2.scored{display:flex;align-items:center;gap:14px}
.pts{
  margin-left:auto;display:inline-flex;align-items:baseline;gap:6px;flex:none;
  font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:none;color:var(--fg);
}
.pts u{text-decoration:none;border-bottom:1px solid var(--line-ink);
  display:inline-block;min-width:40px}

/* Numbered ruled lines, two columns on paper, one column on a phone. */
.words{
  display:grid;grid-template-columns:1fr 1fr;column-gap:46px;row-gap:0;
  margin:0;padding:0;list-style:none;
}
.words li{display:flex;gap:12px;align-items:baseline;font-size:1rem;padding:22px 0 0}
.words li b{font-weight:800;min-width:26px;text-align:right;color:var(--fg)}
.words li u{text-decoration:none;flex:1;border-bottom:1px solid var(--line-ink);min-height:2.5em}

/* The bonus word gets a box so it reads as its own thing, not one more word
   on a longer list. It is scored on its own, because a miss on a bonus must
   never cost a point off the ten that count. */
.bonus{border:2px solid var(--line);border-radius:var(--r);padding:18px 24px 20px;margin:26px 0 0}
.bonus .top{display:flex;align-items:baseline;gap:14px;margin-bottom:2px}
.bonus h3{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg);margin:0}
.bonus .why{font-size:.83rem;color:var(--dim);margin:0 0 14px}
.bonus .row{display:flex;gap:12px;align-items:baseline}
.bonus .row b{font-weight:800;min-width:26px;text-align:right}
.bonus .row u{text-decoration:none;flex:1;border-bottom:1px solid var(--line-ink);min-height:2.5em}

.notes{margin:30px 0 0}
.notes b{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.notes .lines{margin-top:10px}
.notes .lines i{height:2.3em}

/* One footer row: the encouragement on the left, the copyright on the right.
   One row rather than two lines, so the footer costs the page no extra height. */
.signoff{
  display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;
  margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:.83rem;color:var(--dim);
}
.signoff em{font-style:italic}
.signoff small{margin-left:auto;font-size:.83rem}

@media print{
  .words li u,.bonus .row u,.pts u{border-bottom-color:#000}
  .bonus{border-color:#000;page-break-inside:avoid}
  /* Grey reads as ink-saver on paper. Everything on a printed sheet is black. */
  .bonus h3,.bonus .why,.notes b,.pts,.words li b,.bonus .row b{color:#000}
  .signoff{border-top-color:#000;color:#000}
  .notes{page-break-inside:avoid}
}
@media (max-width:560px){
  .words{grid-template-columns:1fr;column-gap:0}
  .sheet h2.scored{flex-wrap:wrap;gap:8px}
  .pts{margin-left:0}
}

/* ══ CUT-OUT FLASHCARDS ══
   Twelve cards on a Letter page: a label card, ten words, one bonus. Cut on
   the dashed lines.

   The label card is card one on purpose. A cut stack then carries its own
   week and pattern, so week 1 and week 14 cannot end up shuffled together in
   a drawer - which is exactly what happens to loose cards with only a word
   on them.

   One page holds all 36 weeks and shows one. The picker chooses which, and
   Print gives that single sheet. The PDF is built with ?print=all, which
   shows every week with a page break between, so the download is the whole
   year and the button is still one page. */

.weekpick{
  display:grid;grid-template-columns:repeat(12,1fr);gap:6px;
  margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid var(--line);
}
.weekpick button{
  font-family:inherit;font-size:13px;font-weight:800;padding:9px 0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);
  background:transparent;color:var(--dim);transition:color .18s,border-color .18s;
}
.weekpick button[aria-pressed="true"]{background:var(--a);color:var(--a-ink);border-color:var(--a)}
/* The hover colour must not reach the button that is already chosen. It is
   white-on-white if it does, and the week you just picked is exactly the
   button the mouse is sitting on. */
@media(hover:hover){
  .weekpick button:not([aria-pressed="true"]):hover{color:var(--fg);border-color:var(--fg)}
}

.wk[hidden]{display:none}
.wkhead{margin:0 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.wkfocus{margin:0;color:var(--dim);font-size:.9rem}

.cards{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:0;
  margin:20px 0 0;
  border-top:1px dashed var(--line-ink);border-left:1px dashed var(--line-ink);
}
.fc{
  border-right:1px dashed var(--line-ink);border-bottom:1px dashed var(--line-ink);
  min-height:172px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:14px 10px;text-align:center;
}
.fc>span{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  overflow-wrap:anywhere}
.fc.label{background:var(--panel-2)}
.fc.label b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.fc.label span{font-size:.78rem;font-weight:600;color:var(--dim);letter-spacing:0}
.fc.is-bonus em{font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-style:normal;color:var(--dim)}
.cutnote{margin:14px 0 0;font-size:.8rem;color:var(--dim);text-align:center}

@media print{
  .weekpick{display:none}
  /* The page title and the week title say the same thing. On screen the page
     title is the page; on paper it is a duplicate that pushed the twelfth
     card onto a second sheet. */
  .head.is-flash{display:none}
  .cards,.fc{border-color:#000}
  /* The label card is a tint on screen and plain paper in print. A block of
     solid ink on every sheet is not a thing to hand a parent's printer. */
  .fc.label{background:transparent}
  .fc>span,.fc.label b,.wkhead{color:#000}
  .fc.label span,.fc.is-bonus em,.cutnote,.wkfocus{color:#000}
  /* 🚨 DO NOT put page-break-inside:avoid on .cards or .wk.
     It was here and it is what makes a printer spit out a blank sheet. The
     grid is most of a page tall; tell the browser it may not be split and
     any small loss of room - a printer with bigger hardware margins, a scale
     above 100%, A4 instead of Letter - makes it move the WHOLE grid to page
     two and hand you an empty page one. Kept only on the individual card,
     which is small enough to always fit, so the worst case is now a grid
     that breaks between rows rather than a blank sheet. */
  .fc{page-break-inside:avoid}
}
/* Every week at once, one page each. Only the PDF build asks for this. */
body.print-all .weekpick,
body.print-all>.sheet>.head{display:none}
body.print-all .wk{display:block!important}
body.print-all .wk+.wk{page-break-before:always}

@media (max-width:560px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .weekpick{grid-template-columns:repeat(6,1fr)}
}

/* The whole-year download, offered as a line rather than a second button, so
   Download stays one obvious thing: the week you are looking at. */
.allyear{font-size:.85rem;color:var(--dim);margin:-8px 0 24px}
.allyear a{color:var(--fg)}
@media print{ .allyear{display:none} }

/* ══ TEACHING NOTE ON A FLASHCARD SHEET ══
   The cards themselves stay PLAIN. The marks live here, in the heading, as a
   key the parent works from - they mark the card by hand, in front of the
   student, as each word is taught. That was Paul's call, 2026-08-25, and it is
   the right one twice over: printed marks would clutter a card a buyer may not
   want them on, and marking by hand turns the mark into the lesson.

   🚨 ALL THREE MARKS ARE DRAWN, NEVER TYPED. The site font carries the long
   bar but NOT the short cup - the browser silently swaps another font in for
   it, which the "does this font have this character" check reports as fine.
   It lies; it only confirms the family loaded. Measured widths caught it. */
.teach{border:1px solid var(--line);border-radius:var(--r);padding:9px 12px;margin:0 0 4px}
.teach h3{margin:0 0 3px;font-size:.76rem;font-weight:800;color:var(--fg)}
.teach>p{margin:0 0 7px;font-size:.72rem;line-height:1.4;color:var(--dim)}
.teach>p b{color:var(--fg)}
/* Three marks across, not stacked: the note is a key, not a lesson, and every
   line it costs comes straight off the height of the cards. */
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;padding:0;list-style:none}
.keys li{display:flex;align-items:baseline;gap:8px;font-size:.7rem;line-height:1.35;color:var(--dim)}
.keys li b{color:var(--fg);display:block}
/* Big enough that a drawn mark actually reads. At body size it rendered
   sub-pixel and vanished entirely. */
.eg{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  min-width:0;display:inline-block;flex:none;color:var(--fg)}

.mk{position:relative;display:inline-block}
/* Measured UP FROM THE BASELINE, not down from the top of the box. The box top
   is the font's full ascent, so on a letter with no riser - e, a, o - the mark
   floated far above, and on "theme" it left the sheet altogether. */
.mk::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:0.80em;width:0.42em}
.long::before{height:0;border-top:0.09em solid currentColor}
.short::before{height:0.18em;border:0.09em solid currentColor;border-top:0;
  border-radius:0 0 50% 50%/0 0 100% 100%}

/* The silent-letter slash. A BORDER WITH REAL HEIGHT.
   🚨 It was first drawn as the top edge of a zero-height box, then rotated -
   which collapses to nothing. It measured 0px tall and was invisible even
   blown up five times, while I described it as working. A filled background
   would show, but browsers drop backgrounds when printing, and this sheet
   exists to be printed. A border does both. */
.sil{position:relative;display:inline-block}
.sil::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:0.80em;
  border-left:0.085em solid currentColor;
  transform:translateX(-50%) rotate(26deg);transform-origin:bottom center}

@media print{
  .teach{border-color:#000;page-break-inside:avoid}
  .teach h3,.teach>p,.teach>p b,.keys li,.keys li b,.eg{color:#000}
}