/* ---------- tokens: committed single-theme palette, taken from the reference ---------- */
:root{
  --progress-green:#287A45;
  --progress-blue:#DCECF3;
  --ground:#A2C3C7;        /* dusty teal page ground */
  --ground-deep:#8FB3B8;
  --card:#F7F1E6;          /* warm cream */
  --card-sunk:#EFE7D8;     /* cream, one step down */
  --ink:#16130E;           /* near-black, warm bias */
  --ink-soft:#6E6656;
  --ink-faint:#70664E;
  --olive:#4E5522;
  --lime:#D8F58C;
  --rust:#C25B2C;
  --rust-deep:#A94A20;   /* small text on rust: the bright one only reaches 3.9:1 */
  --lilac:#B9A6E0;
  --pink:#F2A5BE;
  --navy:#2F3E8F;
  --line:#E2D8C5;

  --r-lg:34px;  --r-md:22px;  --r-sm:14px;
  --pad:20px;
  --shadow:0 2px 0 rgba(22,19,14,.06), 0 10px 24px -12px rgba(22,19,14,.28);
  --shadow-lift:0 18px 40px -14px rgba(22,19,14,.45);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:Nunito,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:30px 20px 150px;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--olive);outline-offset:3px;border-radius:8px;}
h1,h2,h3{margin:0;text-wrap:balance;}
.wrap{max-width:472px;margin:0 auto;}
.wrap.wide{max-width:1080px;}

/* ---------- type roles ---------- */
.wordmark{font-family:Fredoka,Nunito,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:.9;}
.display{font-family:Fredoka,Nunito,sans-serif;font-weight:600;letter-spacing:-.01em;}
.h-lg{font-size:30px;font-weight:900;letter-spacing:-.02em;line-height:1.12;}
.h-md{font-size:21px;font-weight:800;letter-spacing:-.01em;}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.muted{color:var(--ink-soft);}
.tnum{font-variant-numeric:tabular-nums;}

/* ---------- shared bits ---------- */
.sheet{background:var(--card);border-radius:var(--r-lg);padding:28px 24px;box-shadow:var(--shadow);}
.pill{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:999px;background:var(--lime);color:var(--olive);font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;transition:transform .12s ease;}
.pill:active{transform:scale(.97);}
.pill.ghost{background:transparent;border:2px solid var(--line);color:var(--ink);}
.pill.dark{background:var(--ink);color:var(--card);}
.pill.sm{padding:9px 16px;font-size:12px;}
.chip{display:inline-block;padding:4px 11px 5px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}
.chip.math{background:var(--navy);color:#fff;}
.chip.reading{background:var(--pink);color:#4A1526;}
.chip.science{background:var(--lime);color:var(--olive);}
.chip.history{background:var(--lilac);color:#2E2145;}
.chip.art{background:#B4501F;color:#FFF1E7;}
.chip.life{background:var(--olive);color:var(--lime);}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 4px 24px;}
.back{width:44px;height:44px;border-radius:999px;background:var(--card);display:grid;place-items:center;box-shadow:var(--shadow);}
.screen{display:none;}
.screen.on{display:block;animation:fade .28s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* ---------- picker ---------- */
.hero{background:var(--olive);border-radius:var(--r-lg);padding:46px 30px 36px;color:var(--lime);margin-bottom:22px;}
.hero .wordmark{font-size:62px;color:var(--lime);}
.hero p{margin:14px 0 0;color:#CFE0A8;font-weight:600;max-width:20ch;}
.namegrid{display:grid;gap:14px;}
.namecard{display:flex;align-items:center;gap:18px;background:var(--card);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);text-align:left;width:100%;transition:transform .14s ease;}
.namecard:active{transform:scale(.985);}
.avatar{width:62px;height:62px;border-radius:21px;display:grid;place-items:center;font-family:Fredoka,sans-serif;font-weight:600;font-size:23px;letter-spacing:-.01em;flex:none;}
.namecard .n{font-size:24px;font-weight:900;letter-spacing:-.02em;}
.namecard .s{font-size:13px;color:var(--ink-soft);font-weight:600;}
.momrow{margin-top:26px;text-align:center;}

/* ---------- pin ---------- */
.pinwrap{text-align:center;padding:14px 0 6px;}
.dots{display:flex;gap:16px;justify-content:center;margin:30px 0 34px;}
.dot{width:16px;height:16px;border-radius:999px;border:2.5px solid var(--olive);background:transparent;transition:transform .15s ease,background .15s ease;}
.dot.full{background:var(--olive);transform:scale(1.12);}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto;}
.key{height:66px;border-radius:24px;background:var(--card);font-size:26px;font-weight:800;box-shadow:var(--shadow);transition:transform .1s ease;}
.key:active{transform:scale(.94);}
.key.flat{background:transparent;box-shadow:none;font-size:15px;font-weight:800;color:var(--ink-soft);}
.shake{animation:shake .4s;}
@keyframes shake{10%,90%{transform:translateX(-4px);}30%,70%{transform:translateX(6px);}50%{transform:translateX(-6px);}}

/* ---------- kid workspace ---------- */
.greet{padding:10px 4px 26px;}
.greet .hi{font-size:34px;font-weight:900;letter-spacing:-.025em;}
.progress{margin-top:22px;background:var(--card);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow);}
.progress .row{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:14px;}
.bar{height:10px;border-radius:999px;background:var(--card-sunk);margin-top:12px;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:999px;background:var(--lime);transition:width .5s cubic-bezier(.4,1.3,.5,1);}
.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:42px 6px 16px;}
.list{display:flex;flex-direction:column;gap:16px;position:relative;}
.card{position:relative;display:flex;gap:17px;align-items:flex-start;background:var(--card);border-radius:var(--r-md);padding:19px 18px;box-shadow:var(--shadow);will-change:transform;touch-action:pan-y;cursor:grab;}
.card:active{cursor:grabbing;}
body.arranging .card{touch-action:none;}
.card.dayless{border-left:4px solid var(--line);}
.card.shift{transition:transform .2s cubic-bezier(.3,1,.4,1);}
.card.lifted{z-index:30;box-shadow:var(--shadow-lift);touch-action:none;transition:none;}
.card.locked{background:var(--card-sunk);}
.tile{width:56px;height:56px;border-radius:16px;flex:none;display:grid;place-items:center;position:relative;overflow:hidden;}
.tile.wide{width:96px;height:54px;border-radius:12px;}
.tile.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 60%);}
.tile .play{position:relative;z-index:1;width:30px;height:30px;border-radius:999px;background:rgba(22,19,14,.82);display:grid;place-items:center;}
.tile .play svg{width:14px;height:14px;color:#fff;}
.daytag{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--card-sunk);padding:3px 8px;border-radius:999px;}
.tile svg{width:24px;height:24px;}
.cbody{flex:1;min-width:0;}
.ctitle{font-weight:800;font-size:16px;line-height:1.3;letter-spacing:-.01em;margin:9px 0 5px;}
.cdesc{font-size:13.5px;color:var(--ink-soft);font-weight:600;line-height:1.35;}
.chost{font-size:11.5px;color:var(--ink-faint);font-weight:700;margin-top:8px;letter-spacing:.02em;}
.circle{position:relative;overflow:visible;width:36px;height:36px;flex:none;border-radius:999px;border:2.5px solid #8E8471;color:#8E8471;align-self:center;display:grid;place-items:center;transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;}
.circle:active{transform:scale(.88);}
.circle .tick{grid-area:1/1;width:19px;height:19px;opacity:.55;transform:scale(.86);transition:opacity .2s ease,transform .25s cubic-bezier(.3,1.6,.5,1);}
.circle:hover{border-color:var(--olive);color:var(--olive);}
.card.done .circle{background:var(--olive);border-color:var(--olive);color:var(--lime);}
.card.done .circle .tick{opacity:1;transform:none;}
.card.settle{animation:settle .45s cubic-bezier(.3,1.4,.5,1);}
@keyframes settle{40%{transform:scale(1.025) rotate(-.5deg);}100%{transform:none;}}
.badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.tag{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.tag.new{color:var(--rust-deep);}
.arrows{display:none;flex-direction:column;gap:4px;align-self:center;}
body.arranging .arrows{display:flex;}
body.arranging .circle{display:none;}
.arrow{width:34px;height:26px;border-radius:9px;background:var(--card-sunk);display:grid;place-items:center;}
.arrow:disabled{opacity:.3;}
.cfoot{display:flex;gap:9px;margin-top:14px;}
.mini{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:6px 12px;border-radius:999px;background:var(--card-sunk);}
.mini.on{background:var(--rust-deep);color:#FFF1E7;}
.doneshelf .card{opacity:.62;padding:14px 16px;}
.doneshelf .ctitle{font-size:14.5px;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ink-faint);margin:0;}
.doneshelf .tile{width:40px;height:40px;border-radius:12px;}
.doneshelf .tile svg{width:18px;height:18px;}
.empty{background:var(--card-sunk);border-radius:var(--r-md);padding:34px 24px;text-align:center;color:var(--ink-soft);font-weight:700;font-size:14px;}

.seg{display:flex;gap:4px;background:var(--card-sunk);border-radius:999px;padding:5px;margin-top:4px;}
.seg button{flex:1;padding:12px 0;border-radius:999px;font-weight:800;font-size:13.5px;letter-spacing:.02em;transition:background .18s ease;}
.seg button.on{background:var(--card);box-shadow:var(--shadow);}
.days{display:flex;gap:9px;margin-top:20px;overflow-x:auto;padding-bottom:2px;}
.day{flex:1;min-width:56px;border-radius:18px;background:var(--card);padding:14px 6px 13px;text-align:center;box-shadow:var(--shadow);}
.day.on{background:var(--ink);color:var(--card);}
.day .dl{font-size:11px;font-weight:900;letter-spacing:.1em;}
.day .dn{font-size:11px;font-weight:700;opacity:.6;margin-top:2px;}
.day.today .dl::after{content:"\2022";margin-left:3px;color:var(--rust);}
.rangebar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--card);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow);margin-bottom:20px;}
.rangebar input[type=date]{font:inherit;font-weight:700;font-size:13px;background:var(--card-sunk);border:2px solid transparent;border-radius:12px;padding:8px 10px;color:var(--ink);}

/* ---------- mom ---------- */
.tabs{display:flex;gap:10px;padding:4px 0 22px;flex-wrap:wrap;}
.tab{padding:10px 18px;border-radius:999px;background:var(--card);font-weight:800;font-size:14px;box-shadow:var(--shadow);}
.tab.on{color:var(--card);}
.nav{width:38px;height:38px;border-radius:999px;background:var(--card-sunk);display:grid;place-items:center;}
.momtools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.adminrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;background:var(--card);border-radius:var(--r-md);padding:17px 16px;box-shadow:var(--shadow);}
.adminrow .cbody{padding-right:4px;}
.state{display:flex;gap:6px;align-items:center;font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;}
.led{width:8px;height:8px;border-radius:999px;background:var(--ink-faint);}
.led.opened{background:var(--navy);}
.led.done{background:var(--olive);}
.iconbtn{width:34px;height:34px;border-radius:11px;background:var(--card-sunk);display:grid;place-items:center;flex:none;}
.pinrow{display:flex;gap:10px;align-items:center;}
.pinrow input{flex:1;min-width:0;}
.rowacts{display:grid;grid-template-columns:repeat(2,34px);gap:6px;flex:none;align-self:center;}
/* Now a member of the header row: navigation sits with navigation. It is a
   scrolling strip, not a wrapping block - and its 300px basis is what makes
   it drop to its own full-width line on a phone instead of being squeezed
   into the 110px left over after the name and the stepper. */
.momdays{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow-x:auto;margin:0;
  flex:1 1 300px;min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;}
.momdays::-webkit-scrollbar{display:none;}
.abbr{display:none;}
@media(max-width:440px){
  .momdays .full{display:none;}
  .momdays .abbr{display:inline;}
  .momdays button{padding:0 14px;}
}
/* 40px, the same as the stepper. Centring items of different heights is how
   they end up looking almost-but-not-quite aligned; equal heights cannot. */
.momdays button{flex:none;display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:var(--card);font-weight:800;font-size:13px;box-shadow:var(--shadow);white-space:nowrap;}
.momdays button.on{background:var(--ink);color:var(--card);}
.momdays button .c{opacity:.55;font-weight:700;margin-left:6px;}
.grid3{display:grid;gap:16px;}
@media(min-width:900px){.grid3{grid-template-columns:repeat(3,1fr);align-items:start;}}

/* ---------- add sheet ---------- */
.scrim{position:fixed;inset:0;background:rgba(22,19,14,.42);backdrop-filter:blur(3px);z-index:60;display:none;align-items:flex-end;justify-content:center;}
.scrim.on{display:flex;}
.modal{background:var(--card);width:100%;max-width:472px;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:30px 24px 36px;max-height:88vh;overflow:auto;animation:up .3s cubic-bezier(.3,1.1,.4,1);}
@keyframes up{from{transform:translateY(30px);opacity:0;}to{transform:none;opacity:1;}}
label.f{display:block;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin:24px 0 10px;}
input.f,textarea.f,select.f{width:100%;font:inherit;font-weight:700;background:var(--card-sunk);border:2px solid transparent;border-radius:var(--r-sm);padding:13px 14px;color:var(--ink);}
input.f:focus,textarea.f:focus,select.f:focus{outline:none;border-color:var(--olive);}
textarea.f{resize:vertical;min-height:64px;}
.choices{display:flex;gap:8px;flex-wrap:wrap;}
.choice{padding:10px 16px;border-radius:999px;background:var(--card-sunk);font-weight:800;font-size:13.5px;border:2px solid transparent;}
.choice.on{background:var(--ink);color:var(--card);}
.choice.kid.on{color:var(--card);}
.modalfoot{display:flex;gap:12px;margin-top:32px;}
.modalfoot .pill{flex:1;justify-content:center;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,90px);z-index:80;background:var(--ink);color:var(--card);border-radius:999px;padding:12px 14px 12px 20px;display:flex;align-items:center;gap:14px;font-weight:700;font-size:14px;box-shadow:var(--shadow-lift);transition:transform .3s cubic-bezier(.3,1.2,.4,1);max-width:calc(100vw - 28px);}
.toast.on{transform:translate(-50%,0);}
.toast button{color:var(--lime);font-weight:900;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(216,245,140,.14);}

/* ---------- record / print ---------- */
.record{background:#fff;color:#111;border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--shadow);}
.record h2{font-size:22px;font-weight:900;letter-spacing:-.02em;}
.record table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px;}
.record th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6E6656;border-bottom:2px solid #16130E;padding:0 8px 7px 0;}
.record td{padding:9px 8px 9px 0;border-bottom:1px solid #E2D8C5;vertical-align:top;}
.record td.u{font-size:11px;color:#6E6656;word-break:break-all;}
.sig{margin-top:26px;padding-top:14px;border-top:1px solid #E2D8C5;font-size:12px;color:#6E6656;}
.sigline{display:inline-block;border-bottom:1.5px solid #16130E;width:230px;margin-left:8px;}
.tableScroll{overflow-x:auto;}
@media print{
  body{background:#fff;padding:0;}
  .screen{display:none !important;}
  #screen-mom{display:block !important;}
  #screen-record .topbar,#screen-record .momtools{display:none !important;}
  .record{box-shadow:none;border-radius:0;padding:0;}
  .wrap{max-width:none;}
  .pagebreak{break-after:page;}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* ---------- added for the live app ---------- */
.netbar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--rust-deep);color:#FFF1E7;
  font-weight:800;font-size:13px;text-align:center;padding:12px;}
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(22,19,14,.18);
  border-top-color:var(--olive);border-radius:999px;animation:sp .7s linear infinite;vertical-align:-2px;}
@keyframes sp{to{transform:rotate(360deg);}}
.codebox{font-family:Fredoka,sans-serif;font-size:34px;letter-spacing:.24em;font-weight:600;
  background:var(--card-sunk);border-radius:var(--r-sm);padding:18px 10px;text-align:center;margin-top:10px;}
.busy{opacity:.55;pointer-events:none;}
input.f::placeholder,textarea.f::placeholder{color:var(--ink-faint);font-weight:600;}

.rule{height:1px;background:var(--line);margin:26px 0 22px;}


/* =========================================================================
   Responsive admin surfaces, subject color, and a stable modal.
   ========================================================================= */

/* Mom's screens are a workbench, not a phone. Give them the whole window. */
body.admin .wrap { max-width: 1240px; }

@media (min-width: 820px) {
  body.admin            { padding: 46px 40px 170px; }
  body.admin .grid3     { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
  body.admin .tabs      { gap: 12px; padding-bottom: 26px; }
  /* The 26px bottom margin that used to sit here separated the day band from
     what followed. The chips are in the header row now, and that margin was
     making the row 66px tall for a 40px control - so the chips sat 13px above
     the name and the stepper. This is what "a more specific rule, elsewhere"
     costs when an element moves. */
  body.admin .momdays   { gap: 10px; }
  body.admin .momtools  { gap: 12px; margin-bottom: 28px; }
  body.admin .tab       { padding: 12px 22px; font-size: 15px; }
  body.admin .record    { padding: 40px 36px; }
}
@media (min-width: 1240px) {
  body.admin { padding: 58px 56px 200px; }
}

/* Every card carries its subject's color as a spine, set inline as --subj.
   An inset shadow rather than a border, so nothing shifts by a pixel. */
.adminrow, .card {
  box-shadow: var(--shadow), inset 5px 0 0 var(--subj, transparent);
}
.adminrow { padding-left: 21px; }
.card     { padding-left: 22px; }
.card.lifted { box-shadow: var(--shadow-lift), inset 5px 0 0 var(--subj, transparent); }
.doneshelf .card { box-shadow: var(--shadow), inset 5px 0 0 var(--subj, transparent); }

/* The line that reports what a pasted link resolved to. It reserves its own
   height whether or not it has anything to say - otherwise appearing text
   shoves the buttons below it downward between mousedown and mouseup, and
   the browser quietly drops the click. */
#metaNote { display: block; min-height: 20px; }

/* Chips need to stay put while being tapped. */
.choices { align-items: flex-start; row-gap: 10px; }
.choice  { min-height: 44px; display: inline-flex; align-items: center; }

/* On a real screen the sheet becomes a centerd dialog. */
@media (min-width: 760px) {
  .scrim  { align-items: center; padding: 30px; }
  .modal  { max-width: 640px; border-radius: var(--r-lg); max-height: 86vh; }
}

/* Admin rows read better with room to breathe on wide screens. */
@media (min-width: 820px) {
  .adminrow .ctitle { font-size: 16.5px; }
  .rowacts { gap: 8px; }
}

/* The lookup line lives in a fixed slot and is positioned out of the flow.
   Whatever it says - a spinner, a long page title, nothing at all - the
   buttons beneath it never move, so a tap can never be lost to a reflow. */
#metaSlot { position: relative; height: 34px; margin-top: 8px; }
#metaNote {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* =========================================================================
   The whole card is the tap target.
   A link card is a real anchor - native navigation, so no popup blocker can
   swallow it. A written prompt is a button that expands in place.
   ========================================================================= */
.card { flex-wrap: wrap; }
.cardmain {
  /* basis 0, not auto: with auto a long title demands its content width and
     pushes the circle onto a line of its own. */
  flex: 1 1 0; min-width: 0; display: flex; gap: 17px; align-items: flex-start;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cardmain:active { opacity: .72; }
.cfoot { flex-basis: 100%; order: 9; }

.expander { flex: none; align-self: center; color: var(--ink-faint);
  transition: transform .28s cubic-bezier(.3,1.2,.4,1); }
.card.expanded .expander { transform: rotate(180deg); }

/* A long prompt stays folded until it is asked for. */
.cdesc.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.expanded .cdesc.clamp { display: block; overflow: visible; }
.card.expanded .cdesc { color: var(--ink); font-size: 15px; line-height: 1.55; margin-top: 4px; }

/* Nothing to open and nothing to read: no pointer, no false promise. */
.cardmain.inert { cursor: default; }
.cardmain.inert:active { opacity: 1; }

/* =========================================================================
   The week's board.
   Shared across every child, above their own list. Not a task: no checkbox,
   no drag, no progress. Each kind gets its own voice, because the typography
   should say what sort of thing it is before you read a word of it.
   ========================================================================= */
.board { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 20px 12px; margin: 0 -20px; -webkit-overflow-scrolling: touch; }
.board::-webkit-scrollbar { display: none; }
.board { scrollbar-width: none; }

.panel { scroll-snap-align: center; flex: 0 0 84%; min-width: 0;
  border-radius: var(--r-lg); padding: 30px 28px 32px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
.panel .peyebrow { font-size: 10.5px; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72; margin-bottom: 14px; }
.panel .pbody { font-size: 27px; line-height: 1.18; letter-spacing: -.015em; }
.panel .pfoot { margin-top: 16px; font-size: 14px; line-height: 1.45; opacity: .82; font-weight: 600; }

/* a word, set the way a word deserves */
.panel.word { background: var(--olive); color: var(--lime); }
.panel.word .pbody { font-family: Fredoka, Nunito, sans-serif; font-weight: 600;
  font-size: 46px; line-height: .98; letter-spacing: -.03em; }
.panel.word .pfoot { color: #E7F2C8; font-weight: 500; font-size: 15px; }

/* scripture and quotation share the serif, and are told apart by ground */
.panel.scripture { background: var(--card); color: var(--ink); }
.panel.scripture .pbody { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 25px; line-height: 1.34; }
.panel.scripture .peyebrow { color: var(--olive); opacity: 1; }

.panel.quote { background: var(--lilac); color: #241A3D; }
.panel.quote .pbody { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.3; }
.panel.quote .pfoot { font-family: Fraunces, Georgia, serif; font-style: italic; opacity: .9; }

.panel.note { background: var(--card); color: var(--ink); }
.panel.note .pbody { font-size: 21px; font-weight: 800; line-height: 1.32; }

@media (min-width: 760px) {
  .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    overflow: visible; margin: 0; padding: 4px 0 8px; gap: 20px; }
  .panel { flex: initial; padding: 36px 32px 38px; min-height: 230px; }
  .panel.word .pbody { font-size: 54px; }
}

/* ---- the same board, given a whole screen ---- */
body.bigscreen { padding: 0; }
#boardBig { display: grid; gap: 22px; padding: 0 20px 60px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
#boardBig .panel { min-height: 44vh; padding: 44px 40px; }
#boardBig .panel .pbody { font-size: 38px; }
#boardBig .panel.word .pbody { font-size: clamp(64px, 11vw, 128px); }
#boardBig .panel .pfoot { font-size: 18px; margin-top: 22px; }
#boardBig .panel .peyebrow { font-size: 12px; margin-bottom: 20px; }
@media (min-width: 900px) { #boardBig { padding: 0 44px 80px; } }

/* Mom's editor rows */
.noterow { background: var(--card-sunk); border-radius: var(--r-md); padding: 18px; margin-top: 14px; }
.noterow .rowtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---- corrections to the board ---- */
/* The big screen was still boxed to phone width, so the grid never fanned out. */
body.bigscreen .wrap { max-width: 1400px; }

/* A long word must never run past its panel. It is the headline, so on a wide
   screen give it the full row rather than shrinking it into a column. */
.pbody { overflow-wrap: anywhere; }
.panel.word .pbody { overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 760px) {
  #boardBig .panel.word { grid-column: 1 / -1; min-height: 34vh; }
}
#boardBig .panel.word .pbody { font-size: clamp(56px, 8.5vw, 116px); }
.panel.word .pbody { font-size: clamp(34px, 8vw, 46px); }
@media (min-width: 760px) { .panel.word .pbody { font-size: clamp(38px, 3.6vw, 54px); } }

/* =========================================================================
   A child's week on a real screen.
   Below 900px this is exactly the phone layout it always was. Above it, the
   week's board takes the full width, the view controls become a left rail,
   and the list keeps its single column - so dragging still works, because
   the drop maths only ever reasons about vertical distance.
   ========================================================================= */
@media (min-width: 900px) {
  body.kidview            { padding: 44px 40px 150px; }
  body.kidview .wrap      { max-width: 1180px; }
  .kidcols                { display: grid; grid-template-columns: 300px 1fr; gap: 52px; align-items: start; }
  .kidleft                { position: sticky; top: 34px; }
  .greet .hi              { font-size: 44px; }
  .kidleft .days          { flex-direction: column; gap: 10px; margin-top: 22px; }
  .kidleft .day           { text-align: left; padding: 15px 20px; display: flex;
                            align-items: baseline; justify-content: space-between; gap: 10px; }
  .kidleft .day .dn       { margin-top: 0; }
  .kidright .sectionhead  { padding-top: 4px; }
  .kidright .list .card   { padding: 22px 20px 22px 24px; }
  .kidright .ctitle       { font-size: 17.5px; }
}
@media (min-width: 1240px) {
  body.kidview { padding: 54px 56px 170px; }
}

/* The board leads the page, so it gets the whole width above the columns. */
@media (min-width: 900px) {
  #kidBoard .board { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* A quiet nudge where the board would be, on Mom's side only. */
.boardhint { background: var(--card-sunk); border-radius: var(--r-md); padding: 22px 24px;
  margin-bottom: 22px; font-weight: 700; font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.boardhint b { color: var(--ink); }

/* =========================================================================
   Board placement, corrected.
   Phone: a row across the top - first panel full, the next one peeking, so
   it reads as scrollable without needing to say so.
   Desktop: a standing column on the left, beside the week's work.
   ========================================================================= */
.boardwrap { margin-bottom: 6px; }
.boardopen { margin: 4px 0 8px; }

/* The label on each panel is a heading, not a footnote. */
.panel .peyebrow { font-size: 13px; letter-spacing: .13em; opacity: .8; margin-bottom: 16px; }
.panel.scripture .peyebrow { font-size: 14px; letter-spacing: .1em; }

@media (min-width: 900px) {
  .kidcols  { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: start; }
  #kidSidebar { align-self: start; }
  #kidBoard .board { display: flex; flex-direction: column; gap: 18px;
                     overflow: visible; margin: 0; padding: 0; }
  #kidBoard .panel { flex: initial; min-height: 0; padding: 30px 28px 32px; }
  #kidBoard .panel .peyebrow { font-size: 14px; margin-bottom: 18px; }
  #kidBoard .panel.word .pbody { font-size: clamp(40px, 3.4vw, 58px); }
  .boardopen { width: 100%; justify-content: center; }

  /* the day rail goes back above the list, since the board now holds the left */
  .kidmain .days { flex-direction: row; }
  .kidmain .day  { text-align: center; display: block; }
}
@media (min-width: 1240px) {
  .kidcols { grid-template-columns: 380px 1fr; gap: 60px; }
}
#boardBig .panel .peyebrow { font-size: 15px; letter-spacing: .14em; }

/* =========================================================================
   Button system. One primary per screen, a quiet secondary, a tertiary that
   is barely a button. Everything on the same 44px floor.
   ========================================================================= */
.pill, .pill.sm { min-height: 44px; }
.pill.quiet { background: transparent; border: 0; color: var(--ink-soft); }
.pill.quiet:hover { color: var(--ink); }
.mini { min-height: 38px; display: inline-flex; align-items: center; padding: 9px 14px; }

/* Related controls read as a group rather than a wall. */
.toolgroup { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolgroup + .toolgroup { position: relative; padding-left: 16px; }
.toolgroup + .toolgroup::before { content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 26px; background: var(--line); }
.momtools { align-items: center; }

/* Room under the last panel before its opener. */
.boardwrap { margin-bottom: 10px; }
.boardopen { margin-top: 22px; }
@media (min-width: 900px) { .boardopen { margin-top: 26px; } }

/* Reordering sits beside the list it reorders. */
.sectionhead .tools { display: flex; align-items: center; gap: 8px; }
.iconpill { min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card);
  box-shadow: var(--shadow); display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); }
.iconpill.on { background: var(--ink); color: var(--card); }

/* A child's own name is the door to their profile, so it looks like a door. */
.namebtn { display: inline-flex; align-items: center; gap: 14px; background: none; border: 0;
  padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.namebtn:hover .hi { opacity: .74; }
.namebtn .hi { font-size: 34px; font-weight: 900; letter-spacing: -.025em; transition: opacity .15s ease; }
.namebtn .pencil { width: 36px; height: 36px; border-radius: 999px; background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink-soft); flex: none; }
.avabtn .avatarsm { width: 52px; height: 52px; border-radius: 17px; flex: none; display: grid;
  place-items: center; font-family: Fredoka, sans-serif; font-size: 20px; overflow: hidden; }
.avabtn .avatarsm img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .namebtn .hi { font-size: 44px; } }

.goalrow { display: grid; gap: 12px; margin-top: 4px; }

/* =========================================================================
   Progress is an instrument, not an announcement.
   It sits on the ground rather than in a card, in low contrast, so a child
   can consult it without being chased by it.
   ========================================================================= */
.progress { background: transparent; box-shadow: none; padding: 0 2px; margin-top: 22px; }
.progress .row { font-size: 12.5px; font-weight: 800; color: var(--ink-soft); letter-spacing: .01em; }
.bar { height: 6px; background: rgba(22,19,14,.09); margin-top: 9px; }
.bar i { background: var(--progress-green); }

/* Asking for help stays on every card, but weighs nothing until it is used. */
.mini { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-faint); }
.mini.on { background: var(--rust-deep); color: #FFF1E7; box-shadow: none; }

/* Identity tones: deep and desaturated, so a person never reads as a subject. */
.avatarsm img { border-radius: inherit; }

/* =========================================================================
   The header is one object.
   Who you are, when it is, what you live by and how far along you are, on a
   single ground - with the back control on the name's line rather than
   owning a row of its own.
   ========================================================================= */
:root { --ground-sunk: #95B9BE; --tube: #C0392B; --tube-soft: #F3D9D4;
        --amber: #E9BC55; }

.headband { background: var(--card); border-radius: var(--r-lg);
  padding: 22px 26px 26px; box-shadow: var(--shadow); margin-bottom: 34px; }
/* The identity block is three lines tall now, so centring the back button and
   For fun against it put them level with the week line instead of the name.
   Both belong on the greeting's row: top. */
/* Every item on this row is the same height (~40px), so aligning them to the
   top aligns their centres too. Nudging with a margin would work only for one
   font size. */
.headrow { display: flex; align-items: flex-start; gap: 14px; }
.headband .back { width: 40px; height: 40px; flex: none; background: var(--card-sunk); box-shadow: none; }
.headband .back:hover { background: var(--line); }
.headband .eyebrow { margin-top: 16px; }
.headband .avabtn .avatarsm { width: 42px; height: 42px; border-radius: 14px; }
.headband .namebtn .hi { font-size: 29px; line-height: 1.05; }
@media (min-width: 900px) {
  .headband { padding: 28px 32px 30px; margin-bottom: 42px; }
  .headband .namebtn .hi { font-size: 38px; }
  .headband .avabtn .avatarsm { width: 42px; height: 42px; border-radius: 14px; }
}
.screen.on > .headband:first-child { margin-top: 0; }

/* The board is a group, so it sits on its own ground, set into the page. */
.boardwrap { background: var(--ground-sunk); border-radius: var(--r-lg);
  padding: 18px; margin: 0 0 34px; }
.boardwrap .board { padding: 0; margin: 0; }
@media (max-width: 759px) {
  .boardwrap .board { margin: 0 -18px; padding: 0 18px; }
}
@media (min-width: 900px) {
  .boardwrap { padding: 22px; margin-bottom: 0; }
  #kidBoard .board { gap: 16px; }
}
.boardopen { margin-top: 18px; width: 100%; justify-content: center;
  background: rgba(247,241,230,.55); border: 0; }
.boardopen:hover { background: rgba(247,241,230,.85); }

/* Scripture gets its own ground rather than borrowing the card color. */
.panel.scripture { background: #E7EFD6; }

/* The greeting must hold one line on a phone: the avatar and the pencil were
   squeezing it into two. */
@media (max-width: 520px) {
  /* Four things cannot share one row on a 390px screen: back, avatar, greeting
     and For fun left the text column about 108px, which is what crushed the
     week into three lines. The two controls take a row of their own and the
     identity block gets the full width underneath - and the date drops, the
     way the mom stepper's does. The day chips say which day; a child does not
     need the range. */
  .headrow                  { flex-wrap: wrap; }
  .headrow > .kidnav        { margin-left: auto; }
  .headband .kidnav .funpill { padding: 0 11px; font-size: 11.5px; }
  .headband .idblock        { flex-basis: 100%; order: 3; margin-top: 4px; }
  .weekline .wk i           { display: none; }
  .headband .namebtn        { gap: 11px; min-width: 0; }
  /* nowrap plus ellipsis: a greeting that breaks after "Hello," reads as a
     mistake. Better a shorter name than a second line. */
  .headband .namebtn .hi    { font-size: 24px; white-space: nowrap; overflow: hidden;
                              text-overflow: ellipsis; min-width: 0; }
  .headband .funpill        { padding: 0 14px; font-size: 12px; }
  .headband .avabtn .avatarsm { width: 44px; height: 44px; border-radius: 15px; font-size: 17px; }
  .headband .namebtn .pencil   { width: 32px; height: 32px; }
  .headband .back           { width: 38px; height: 38px; }
  .headband                 { padding: 18px 20px 22px; }
  .headrow                  { gap: 11px; }
}

/* =========================================================================
   The monthly interview.
   An invitation on the child's page, not a task on their list - it has no
   checkbox and does not count towards the week.
   ========================================================================= */
.interviewcard { display: block; width: 100%; text-align: left; background: var(--lilac);
  color: #241A3D; border: 0; border-radius: var(--r-lg); padding: 24px 26px 26px;
  box-shadow: var(--shadow); cursor: pointer; transition: transform .14s ease; }
.interviewcard:active { transform: scale(.99); }
.interviewcard .peyebrow { font-size: 12px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; opacity: .7; }
.interviewcard .ititle { font-family: Fraunces, Georgia, serif; font-style: italic;
  font-size: 25px; line-height: 1.2; margin-top: 12px; }
.interviewcard .isub { font-weight: 700; font-size: 13.5px; margin-top: 10px; opacity: .82; }
#kidInterview { margin-bottom: 30px; }
#kidInterview:empty { margin-bottom: 0; }

.answerback { margin-top: 10px; padding: 14px 16px; background: var(--card-sunk);
  border-radius: var(--r-sm); font-family: Fraunces, Georgia, serif; font-size: 15px;
  line-height: 1.5; }

/* =========================================================================
   Whose week am I looking at?
   The child's own color carries across into Mom's view as a band above
   their work, so two children's weeks can never be mistaken for each other.
   ========================================================================= */
.momhead { display: flex; align-items: center; gap: 16px; border-radius: var(--r-lg);
  padding: 18px 22px; margin-bottom: 26px; box-shadow: var(--shadow);
  background: var(--kid, var(--card)); color: var(--kidink, var(--ink)); }
.momhead .avatarsm { width: 46px; height: 46px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-family: Fredoka, sans-serif; font-size: 18px;
  overflow: hidden; background: rgba(255,255,255,.16); }
.momhead .avatarsm img { width: 100%; height: 100%; object-fit: cover; }
.momhead .who { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.momhead .when { font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; opacity: .78; margin-top: 3px; }
.momhead .mot { margin-left: auto; font-family: Fraunces, Georgia, serif; font-style: italic;
  font-size: 14.5px; opacity: .85; text-align: right; max-width: 40%; }
@media (max-width: 700px) { .momhead .mot { display: none; } }

/* Air between the week's board and the work below it. */
body.admin #momBoardHint { margin-bottom: 30px; }
body.admin #momBoardHint .boardwrap { margin-bottom: 0; }

/* YouTube is red. The spine still means the subject; the tile means the
   medium, and those are different questions. */
.tile.tube { background: var(--tube-soft) !important; }
.tile.tube .play { background: var(--tube); }
.tile.tube .play svg { color: #fff; }
.card .chost.tube { color: var(--tube); font-weight: 800; }

/* The interview is an occasion, so it stops borrowing the quote's lilac. */
.interviewcard { background: var(--amber); color: #3A2A06; }
.interviewcard .peyebrow { opacity: .68; }

/* A question that has been asked before carries its old answer, for Mom only. */
.priorans { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(78,85,34,.08); font-size: 13.5px; line-height: 1.45; }
.priorans .when { font-size: 10.5px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px; }
.priorans .said { font-family: Fraunces, Georgia, serif; }
.bankrow { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.bankrow .qtext { flex: 1; font-weight: 700; font-size: 14px; line-height: 1.4; }
.bankrow .acts { display: flex; gap: 6px; flex: none; }
.star { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 999px; background: var(--card-sunk); color: var(--ink-soft); }
.star.on { background: var(--amber); color: #3A2A06; }

/* The avatar chip is a component in its own right, not something that only
   works inside a name button. It was only ever given its centring inside
   .namebtn, so the copy in the profile sheet had its initials falling out of
   the top-left corner. */
.avatarsm { display: grid; place-items: center; overflow: hidden; flex: none;
  font-family: Fredoka, Nunito, sans-serif; font-weight: 600; line-height: 1;
  width: 52px; height: 52px; border-radius: 17px; }
.avatarsm img { width: 100%; height: 100%; object-fit: cover; }

/* Color swatches are buttons, so they must look and behave like buttons. */
.swatch { width: 58px; height: 46px; border-radius: 16px; border: 0; padding: 0;
  cursor: pointer; opacity: .5; transition: opacity .15s ease, transform .12s ease; }
.swatch:hover { opacity: .85; }
.swatch:active { transform: scale(.94); }
.swatch.on { opacity: 1; outline: 3px solid var(--ink); outline-offset: 3px; }

/* =========================================================================
   For fun.
   A separate page behind one quiet door. Deliberately not a badge: a badge on
   a fun button teaches a child to keep checking it.
   ========================================================================= */
.funpill { margin-left: auto; flex: none; min-height: 40px; padding: 0 18px;
  border-radius: 999px; border: 0; background: var(--lime); color: var(--olive);
  font-weight: 800; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: transform .12s ease; }
.funpill:active { transform: scale(.96); }

.funhead .funname { font-family: Fredoka, Nunito, sans-serif; font-weight: 700;
  font-size: 30px; letter-spacing: -.02em; line-height: 1; }
@media (min-width: 900px) { .funhead .funname { font-size: 38px; } }

.funprog { text-align: center; font-size: 11.5px; font-weight: 900; letter-spacing: .14em;
  text-transform: uppercase; color: #3E5052; margin-bottom: 16px; }

.funcard { background: var(--card); border-radius: var(--r-lg); padding: 30px 24px 34px;
  box-shadow: var(--shadow); }
.funcard .peyebrow { text-align: center; font-size: 12px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 22px; }
.funraw { font-family: Fraunces, Georgia, serif; font-size: 21px; line-height: 1.35;
  text-align: center; margin-bottom: 22px; }

.funopts { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.funopt { border: 0; border-radius: 22px; padding: 24px 22px; cursor: pointer;
  font-family: Fraunces, Georgia, serif; font-size: 20px; line-height: 1.3; text-align: left;
  transition: transform .14s ease, filter .14s ease; }
.funopt.a { background: var(--kid, var(--olive)); color: var(--kidink, var(--lime)); }
.funopt.b { background: var(--lime); color: var(--olive); }
.funopt:not(:disabled):hover { filter: brightness(1.06); }
.funopt:not(:disabled):active { transform: scale(.985); }
.funopt:disabled { cursor: default; opacity: .38; }
.funopt.picked { opacity: 1; transform: scale(1.015); box-shadow: var(--shadow-lift); }
.funor { text-align: center; font-size: 12px; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); }

.funhint { text-align: center; margin-top: 22px; font-weight: 700; font-size: 13px; color: #3E5052; }
.funend { background: var(--card); border-radius: var(--r-lg); padding: 40px 28px;
  text-align: center; box-shadow: var(--shadow); }
.funend .ftitle { font-family: Fraunces, Georgia, serif; font-size: 26px; margin: 12px 0 24px; }

@media (min-width: 760px) {
  .funopts { flex-direction: row; align-items: stretch; }
  .funopt { flex: 1; }
  .funor { display: grid; place-items: center; padding: 0 4px; }
}

/* =========================================================================
   Keyboard focus. There were two focus rules for the whole application, which
   meant most of it could be tabbed to and nothing showed where you were.
   ========================================================================= */
.pill:focus-visible, .mini:focus-visible, .choice:focus-visible, .swatch:focus-visible,
.tab:focus-visible, .day:focus-visible, .key:focus-visible, .iconbtn:focus-visible,
.iconpill:focus-visible, .nav:focus-visible, .back:focus-visible, .namebtn:focus-visible,
.cardmain:focus-visible, .circle:focus-visible, .arrow:focus-visible, .funopt:focus-visible,
.funpill:focus-visible, .interviewcard:focus-visible, .momdays button:focus-visible,
.seg button:focus-visible, .star:focus-visible, .noterow:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.funopt:focus-visible, .interviewcard:focus-visible { outline-color: var(--cream, #F7F1E6); }

/* =========================================================================
   For fun is a hub now, and writing lives in it. A journal is not a game,
   but it is also not work - and this is the page for things that are not work.
   ========================================================================= */
.hubgrid { display: grid; gap: 16px; }
@media (min-width: 720px) { .hubgrid { grid-template-columns: 1fr 1fr; } }
.hubtile { text-align: left; border: 0; border-radius: var(--r-lg); padding: 30px 26px 32px;
  cursor: pointer; box-shadow: var(--shadow); transition: transform .14s ease; }
.hubtile:active { transform: scale(.99); }
.hubtile .ht { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; font-size: 25px;
  letter-spacing: -.02em; line-height: 1.1; }
.hubtile .hb { margin-top: 12px; font-weight: 600; font-size: 14px; line-height: 1.45; opacity: .85; }
.hubtile.wyr   { background: var(--lime);  color: var(--olive); }
.hubtile.write { background: var(--kid, var(--olive)); color: var(--kidink, var(--lime)); }

.privacyline { background: var(--ground-sunk); border-radius: var(--r-md); padding: 14px 18px;
  font-weight: 700; font-size: 13.5px; color: #243436; margin-bottom: 22px; }
.privacyline.small { margin: 20px 0 0; font-size: 12.5px; }

.kindgrid { display: grid; gap: 12px; }
@media (min-width: 620px) { .kindgrid { grid-template-columns: 1fr 1fr; } }
.kindtile { text-align: left; border: 0; border-radius: var(--r-md); padding: 20px;
  background: var(--card); box-shadow: var(--shadow); cursor: pointer; }
.kindtile:active { transform: scale(.99); }
.kindtile .kt { font-weight: 900; font-size: 18px; letter-spacing: -.01em; }
.kindtile .kb { margin-top: 6px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; }

.writerow { display: block; width: 100%; text-align: left; border: 0; background: var(--card);
  border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow); cursor: pointer; }
.writerow .wmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.writerow .wtitle { font-weight: 800; font-size: 17px; margin-top: 10px; letter-spacing: -.01em; }
.writerow .wwords { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); margin-top: 5px; }

.editbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.savestate { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #3E5052; }
.kindrow { display: flex; gap: 8px; flex-wrap: wrap; }
.promptline { margin-top: 16px; background: var(--card-sunk); border-radius: var(--r-md);
  padding: 16px 18px; font-family: Fraunces, Georgia, serif; font-size: 17px; line-height: 1.4; }
.wtitleinput { margin-top: 16px; font-size: 19px; font-weight: 800; }
.wbody { margin-top: 12px; min-height: 320px; font-family: Fraunces, Georgia, serif;
  font-size: 17px; line-height: 1.65; resize: vertical; }
.writefoot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }

/* Printing: the prompt at the top and ruled lines beneath, so the page is
   worth taking to a table with a pencil. */
#printWrite { display: none; }
@media print {
  body.printing-write > .wrap { display: block !important; }
  body.printing-write > .wrap > :not(#printWrite) { display: none !important; }
  body.printing-write #printWrite { display: block !important; }
  .pw { padding: 0; color: #111; font-family: Georgia, serif; }
  .pweyebrow { font-family: system-ui, sans-serif; font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase; color: #555; }
  .pw h2 { font-size: 24px; margin: 6px 0 0; }
  .pwprompt { margin-top: 12px; font-style: italic; font-size: 15px; color: #333; }
  .pwbody { margin-top: 20px; font-size: 14px; line-height: 2; }
  .pwlines { margin-top: 24px; height: 8.4in;
    background-image: repeating-linear-gradient(to bottom, transparent 0 30px, #BBB 30px 31px); }
}

/* The five subjects Texas actually requires - reading, spelling, grammar,
   mathematics and good citizenship - plus the four we teach anyway. Color
   still means subject; these three simply extend the set. */
.chip.spelling   { background:#1F6E6E; color:#FFFFFF; }
.chip.grammar    { background:#6B3FA0; color:#FFFFFF; }
.chip.citizenship{ background:#8A6510; color:#FFFFFF; }

/* Whether the five are covered this week, at a glance. Not a compliance
   claim - just a count of what has been assigned. */
  background:var(--card); border-radius:var(--r-md); padding:14px 16px;
  box-shadow:var(--shadow); margin-bottom:22px; }
  text-transform:uppercase; color:var(--ink-soft); margin-right:4px; }
  background:var(--card-sunk); color:var(--ink-faint); }

/* ---- the coloring library ---- */
.hubtile.color { background: var(--card); color: var(--ink); }
.colorgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.colortile { background: #fff; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.colortile img { display: block; width: 100%; aspect-ratio: 8.5 / 11; object-fit: contain; background: #fff; }
.ctfoot { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--card); }
.ctname { flex: 1; font-weight: 800; font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colorlist { display: flex; flex-direction: column; gap: 10px; }
.colorrow { display: flex; align-items: center; gap: 10px; }
.colorrow img { width: 46px; height: 60px; object-fit: contain; background: #fff;
  border-radius: 8px; flex: none; }
#printColor { display: none; }
@media print {
  @page coloring { size: letter portrait; margin: .35in; }
  body.printing-color > :not(.wrap), body.printing-write > :not(.wrap) { display: none !important; }
  body.printing-color > .wrap { display: block !important; margin: 0; padding: 0; }
  body.printing-color > .wrap > :not(#printColor) { display: none !important; }
  body.printing-color #printWrite { display: none !important; }
  body.printing-color #printColor { display: block !important; page: coloring; }
  #printColor img { display: block; width: 100%; height: 9.9in; object-fit: contain; }
  @page { margin: 0.4in; }
}

/* =========================================================================
   Empty states carry their own action.
   Naming a button that lives in the opposite corner is a dead end, and an
   empty screen is the one moment with the reader's whole attention.
   ========================================================================= */
.startpanel { background: var(--card); border-radius: var(--r-lg); padding: 30px 28px 28px;
  box-shadow: var(--shadow); }
.startpanel .sp-head { font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.startpanel .sp-sub { margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft);
  line-height: 1.5; max-width: 52ch; }
.startpanel .sp-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.startpanel details { margin-top: 20px; }
.startpanel summary { cursor: pointer; font-size: 12.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); list-style: none; padding: 8px 0; }
.startpanel summary::-webkit-details-marker { display: none; }
.startpanel summary::before { content: "+ "; }
.startpanel details[open] summary::before { content: "\2212 "; }
.startpanel summary:hover { color: var(--ink); }
.kinds { display: grid; gap: 12px; margin-top: 10px; }
@media (min-width: 640px) { .kinds { grid-template-columns: repeat(3, 1fr); } }
.kindnote { background: var(--card-sunk); border-radius: var(--r-md); padding: 16px; }
.kindnote .kn { font-weight: 900; font-size: 14px; }
.kindnote .kd { margin-top: 5px; font-size: 13px; font-weight: 600; color: var(--ink-soft); line-height: 1.4; }

/* The start panel is a full-width object, not a card in the grid. Left in a
   single 340px column its explainer squeezed to one word per line. */
.grid3 > .startpanel, .grid3 > .empty { grid-column: 1 / -1; }

/* =========================================================================
   Width on the fun pages.
   Not one answer for all three. A grid of thumbnails wants the whole screen;
   a single question with two answers does not; and writing wants a wide
   PAGE with a narrow COLUMN, because the rule that governs a body of text is
   line length, not screen width.
   ========================================================================= */
@media (min-width: 900px) {
  body.widepage           { padding: 44px 40px 150px; }
  body.widepage .wrap     { max-width: 1180px; }
  body.widepage .headband { padding: 28px 32px 30px; margin-bottom: 42px; }
}
@media (min-width: 1240px) { body.widepage { padding: 54px 56px 170px; } }

/* Writing: the page is wide, the measure is not. 68 characters is the line
   length prose is comfortable at; a textarea spanning 1200px is unreadable. */
.writecol { max-width: 62ch; }
.wbody, .wtitleinput, .promptline, .editbar, .kindrow, .writefoot, .privacyline.small { max-width: 62ch; }
@media (min-width: 900px) { .wbody { min-height: 420px; } }

/* Would you rather stays deliberately narrow: it is one decision. */
#screen-wyr .wrap, .funcard { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---- a line saying what the board is, in both views ---- */
.boardsays { font-weight: 700; font-size: 13.5px; line-height: 1.5; color: #243436;
  margin: 0 0 14px; }
.boardsays b { color: var(--ink); }
#kidBoard .boardsays { background: var(--card-sunk); border-radius: var(--r-md);
  padding: 14px 16px; color: var(--ink-soft); }
.panelact { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.panelact button { font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 9px 14px; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.28); color: inherit; cursor: pointer; }
.panelact button:hover { background: rgba(255,255,255,.45); }
.panel.scripture .panelact button { background: rgba(22,19,14,.08); }

/* A request, not a lock. It has to look like a note to a person, not a
   security control - otherwise it promises something it does not do. */
.askrow { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px;
  font-weight: 700; font-size: 14px; cursor: pointer; max-width: 62ch; }
.askrow input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--olive); flex: none; }
.tag.asked { color: var(--rust); }

/* What a board slot is for, shown where the work happens rather than in a
   help page nobody opens. */
.notehelp { margin-top: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  color: var(--ink-soft); }

/* =========================================================================
   The shell.
   Mom's side gains persistent navigation: a rail on a real screen, tabs on a
   phone, the same six places either way. A toolbar was the wrong component
   for nine destinations. Children's screens are untouched.
   ========================================================================= */
.momshell { display: block; }
.momrail  { display: none; }

.mompanel { min-width: 0; }
.panelbar { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-bottom: 20px; min-width: 0; }
/* Only the day strip may take a second line, and only because its flex-basis
   says so. Nothing else in this row has a basis large enough to wrap, so the
   stepper still cannot come apart. */
.paneltitle { font-size: 26px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  flex: none; }
.panelstep { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; }
.panelacts { display: flex; gap: 8px; flex: none; margin-left: auto; }
/* An empty flex item in a wrapping row can still claim a line of its own. */
.panelacts:empty { display: none; }
.panelstep:empty { display: none; }

/* the four tiles: every one names something to act on. Never a streak,
   never a percentage, and never on a child's screen. */
/* A quiet instrument row, not five headlines. These are things to glance at on
   the way past; the week itself is what she came for. One row that scrolls,
   sized like the board strip so the two read as the same kind of object. */
.momtiles { display: flex; gap: 10px; margin: 0 0 20px; overflow-x: auto;
  flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px; }
.momtiles::-webkit-scrollbar { display: none; }
.momtile { flex: 1 0 min(60%, 178px); background: var(--card); border-radius: var(--r-sm);
  padding: 11px 14px 12px; box-shadow: none; text-align: left; border: 0; cursor: pointer;
  font: inherit; min-width: 0; }
.momtile:hover { background: var(--card-sunk); }
.momtile .n { font-size: 18px; font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.momtile .l { margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft);
  line-height: 1.3; }
.momtile.warn { background: var(--rust-deep); }
.momtile.warn:hover { background: var(--rust); }
.momtile.warn .n { color: #FFF1E7; }
.momtile.warn .l { color: #FFE0D2; }

/* bottom tabs, phone */
.momtabs { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  background: var(--olive); border-radius: 22px; padding: 6px;
  box-shadow: 0 14px 34px -18px rgba(22,19,14,.8); }
.momtabs button { border: 0; background: none; cursor: pointer; font: inherit; color: #CFE0A8;
  font-size: 10.5px; font-weight: 800; padding: 11px 2px; border-radius: 15px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 52px; }
.momtabs button.on { background: var(--lime); color: var(--olive); }
.momtabs .ic { font-size: 15px; line-height: 1; }
.momtabs .pip { position: relative; }
.momtabs .pip::after { content: ""; position: absolute; top: -3px; right: -6px; width: 7px; height: 7px;
  border-radius: 99px; background: var(--rust); }
body.admin { padding-bottom: 120px; }

@media (min-width: 900px) {
  .momshell { display: grid; grid-template-columns: 244px 1fr; gap: 20px; align-items: start; }
  .momrail  { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 30px;
    background: var(--olive); border-radius: var(--r-lg); padding: 24px 16px; min-height: 70vh; }
  .momtabs  { display: none; }
  body.admin { padding-bottom: 80px; }
}

.railmark { font-size: 30px; color: var(--lime); padding: 2px 8px 0; line-height: 1; }
.railwho { display: flex; gap: 8px; padding: 0 4px; }
.railwho button { flex: 1; border: 0; cursor: pointer; border-radius: 14px; padding: 11px 0;
  font-family: Fredoka, sans-serif; font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,.10); color: #CFE0A8; }
.railwho button.on { color: #fff; }
.railnav { display: flex; flex-direction: column; gap: 4px; }
.railnav button { display: flex; align-items: center; gap: 10px; border: 0; background: none;
  cursor: pointer; font: inherit; font-weight: 800; font-size: 14.5px; color: #CFE0A8;
  text-align: left; padding: 13px 12px; border-radius: 14px; width: 100%; min-height: 46px; }
.railnav button:hover { background: rgba(255,255,255,.08); color: #EAF3D6; }
.railnav button.on { background: var(--lime); color: var(--olive); }
.railnav .pip { width: 8px; height: 8px; border-radius: 99px; background: var(--rust);
  margin-left: auto; flex: none; }
.railfoot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.railfoot .pill.quiet { color: #CFE0A8; justify-content: center; }
.railfoot .pill.quiet:hover { color: #fff; }
.railtiny { font-size: 11.5px; font-weight: 700; color: #A9BE85; line-height: 1.4; padding: 0 6px 4px; }

/* printing now targets the export panel rather than a screen that no longer exists */
@media print {
  body.admin { padding: 0; }
  .momrail, .momtabs, .panelbar, .rangebar, #momPanelWeek, #momPanelCalendar,
  #phoneWho, .netbar, .toast { display: none !important; }
  .momshell { display: block !important; }
  #momPanelExport { display: block !important; }
}

/* =========================================================================
   The shelf and the calendar.
   Something found but not scheduled has no week. It sits under the week it
   is waiting to join, so placing it happens where you are already planning.
   ========================================================================= */
#momShelf:empty { display: none; }
.shelfrow { opacity: .92; }
.shelfrow .rowacts { grid-template-columns: 1fr; gap: 8px; align-items: stretch; }
.shelfrow .rowacts .pill { width: 100%; justify-content: center; white-space: nowrap; }
@media (min-width: 620px) {
  .shelfrow .rowacts { grid-template-columns: auto auto auto; align-items: center; }
  .shelfrow .rowacts .pill { width: auto; }
}

.calnav { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 20px 0 14px; }
.calmonth { font-weight: 900; font-size: 17px; letter-spacing: -.01em; }

.calhead, .calgrid { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 6px; }
.calhead { margin-bottom: 6px; }
.calhead span { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; }
.calhead span:first-child { text-align: left; padding-left: 4px; }

.calweek, .calday { border: 0; cursor: pointer; font: inherit; border-radius: 14px;
  background: var(--card-sunk); color: var(--ink); padding: 10px 6px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.calweek { align-items: flex-start; text-align: left; padding-left: 12px; }
.calweek .cw { font-size: 12.5px; font-weight: 900; letter-spacing: -.01em; }
.calweek .cn { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.calweek.now { box-shadow: inset 0 0 0 2px var(--olive); }
.calday .cd { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.calday .cdots { font-size: 9px; line-height: 1; color: var(--olive); letter-spacing: 1px; min-height: 9px; }
.calday.off { opacity: .34; }
.calday.today { box-shadow: inset 0 0 0 2px var(--rust); }
.calweek:hover, .calday:hover { background: var(--line); }
.calweek.on, .calday.on { background: var(--olive); color: var(--lime); }
.calweek.on .cn, .calday.on .cdots { color: #CFE0A8; }

.whenbtn { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: 0; background: var(--card-sunk); border-radius: var(--r-sm);
  padding: 15px 16px; font: inherit; font-weight: 800; cursor: pointer; text-align: left;
  min-height: 52px; }
.whenbtn .sub { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.whenbtn:hover { background: var(--line); }

/* =========================================================================
   One header per panel.
   The week used to be named in the bar and again in a block directly below
   it. Now it is said once, in the bar, with its arrows either side - and the
   same component carries the month on the interviews panel.
   ========================================================================= */
/* The period stepper is ONE control - a joined pill, not three loose circles.
   Three separate round buttons wrapped independently, which is how a lone
   forward arrow ended up on its own line on a phone. The dates are a nested
   span so a narrow screen drops the detail and keeps the line. */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--card);
  border-radius: 999px; box-shadow: var(--shadow); padding: 3px; max-width: 100%; min-width: 0;
  height: 40px; }
.stepgo { width: 34px; height: 34px; flex: none; border: 0; background: none; cursor: pointer;
  border-radius: 999px; display: grid; place-items: center; font-size: 14px; color: var(--ink);
  font: inherit; }
.stepgo:hover { background: var(--card-sunk); }
.stepnow { padding: 0 8px; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #3E5052; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.stepnow i { font-style: normal; }
.stepnow i::before { content: " \00b7 "; }
@media (max-width: 640px) { .stepnow i { display: none; } }

.segbar { display: inline-flex; background: var(--card); border-radius: 999px; padding: 3px;
  box-shadow: var(--shadow); max-width: 100%; }
.segbar button { border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  background: none; color: var(--ink-soft); padding: 8px 14px; border-radius: 999px;
  white-space: nowrap; min-height: 32px; }
.segbar button.on { background: var(--ink); color: var(--card); }

/* Week-shaping actions live with the days they shape. */
/* The list's own header. A bulk action needs something to be the action of;
   on its own line under the day chips it read as a stray control. */
.weektools { margin: 26px 0 14px; }
.weektools:empty { display: none; }
.listhead { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.listhead .lh { font-size: 17px; font-weight: 900; letter-spacing: -.015em; display: flex;
  align-items: baseline; gap: 8px; }
.listhead .lh .c { font-size: 12.5px; font-weight: 800; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.listhead .lt { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* =========================================================================
   Interviews, as a place.
   Setting questions is occasional; reading answers is the daily job, so the
   setup collapses and the answers get the room.
   ========================================================================= */
.setupcard { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow);
  overflow: hidden; }
/* The month arrows belong here, not in the page header: the month governs
   which questions are being SET. The answers below span every month there
   has ever been, so a header stepper implied a filter that never existed. */
.setuptop { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; }
.setupname { flex: 1; min-width: 0; border: 0; background: none; font: inherit; cursor: pointer;
  text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 44px; }
.setupname .st { font-weight: 900; font-size: 16px; letter-spacing: -.01em; }
.setupname .ss { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.setupnav { display: flex; gap: 4px; flex: none; }
.setupnav .stepgo { background: var(--card-sunk); }
.setupnav .stepgo:hover { background: var(--line); }
.setupcard .setupbody { display: none; padding: 0 20px 22px; }
.setupcard.open .setupbody { display: block; }

.anstools { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  margin-bottom: 16px; }
.anstools .tg { display: flex; gap: 8px; align-items: center; }
/* The filters scroll sideways instead of wrapping: on a phone they were four
   stacked rows of pills before the first card. */
.anstools .tg.scroll { flex: 1 1 220px; min-width: 0; overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.anstools .tg.scroll::-webkit-scrollbar { display: none; }
.anstools .tg.scroll .pill { flex: none; }
.anstools .tg.acts { margin-left: auto; flex: none; flex-wrap: wrap; }
.tgsep { width: 1px; height: 20px; background: var(--line); flex: none; margin: 0 2px; }
#momPanelInterviews .sectionhead { padding-top: 26px; }
/* The writing tab opens straight onto its list, so its heading does not need
   the separating space a heading further down the page does. */
#momPanelInterviews > .sectionhead:first-child { padding-top: 4px; }

.ansgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px)  { .ansgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .ansgrid { grid-template-columns: repeat(3, 1fr); } }

.ansrow { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow);
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: 0 4px; padding: 6px; align-content: start; }
.ansrow.picked { box-shadow: var(--shadow), inset 0 0 0 2px var(--olive); }

.chk { display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer; }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk span { width: 21px; height: 21px; border-radius: 7px; background: var(--card-sunk);
  box-shadow: inset 0 0 0 2px var(--line); display: block; }
.chk input:checked + span { background: var(--olive); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6EDA1' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-size: 17px; background-repeat: no-repeat; background-position: center; }
.chk input:focus-visible + span { outline: 3px solid var(--olive); outline-offset: 3px; }

.ansmain { border: 0; background: none; font: inherit; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 5px; padding: 10px 4px 12px; min-width: 0; }
.ansmonth { font-weight: 900; font-size: 15.5px; letter-spacing: -.01em; }
.anscount { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ansbadge { align-self: flex-start; font-size: 10px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; border-radius: 999px; padding: 4px 9px; }
.ansbadge.new     { background: var(--rust-deep); color: #FFF1E7; }
.ansbadge.changed { background: var(--olive);     color: var(--lime); }
.ansbadge.sent    { background: var(--card-sunk); color: var(--ink-faint); }
.anspeek { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.anspeek .pk { font-family: Fraunces, Georgia, serif; font-size: 14px; line-height: 1.45;
  color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ansmain:hover .ansmonth { text-decoration: underline; text-underline-offset: 3px; }

.anschev { border: 0; cursor: pointer; font: inherit; font-size: 16px; color: var(--ink-soft);
  width: 42px; height: 42px; border-radius: 999px; background: var(--card-sunk); }
.anschev:hover { background: var(--line); color: var(--ink); }

.ansfold { grid-column: 1 / -1; display: none; }
.ansrow.open .ansfold { display: block; padding: 4px 12px 12px; }
.ansfold .qa { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.ansfold .qa .q { font-weight: 800; font-size: 13.5px; line-height: 1.35; }
.ansfold .qa .a { font-family: Fraunces, Georgia, serif; font-size: 15px; line-height: 1.55;
  margin-top: 6px; }
.ansfold .qa.blank { font-size: 12.5px; font-weight: 700; color: var(--ink-faint); }
.ansfold .foldfoot { margin-top: 16px; }

.pickedchip { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px;
  font-weight: 800; background: var(--card-sunk); border-radius: 999px; padding: 7px 8px 7px 14px; }
.pickedchip button { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800;
  background: var(--olive); color: var(--lime); border-radius: 999px; padding: 6px 12px; }

@media print {
  #momPanelInterviews { display: none !important; }
}

/* ---- their writing, read from Mom's side --------------------------------
   Same cards as the interviews. Two differences, both deliberate: a piece the
   child asked be left alone is never previewed and never swept up by Select
   all - it is readable, because a caretaker cannot be locked out, but reading
   it has to be a decision. And a long story is capped when expanded in place,
   because a 4,000-word card is not a card. */
.askedline { font-size: 12.5px; font-weight: 800; color: var(--rust-deep); margin-top: 4px;
  line-height: 1.4; }
.wrbody { white-space: pre-wrap; }
.ansrow.open .ansfold .wrbody { max-height: 320px; overflow: auto; }
.ansrow.asked .anschev { color: var(--rust-deep); }

/* ---- Mom's board: one row, always -------------------------------------
   The shared grid put three cards into two columns on a wide screen and left
   a hole beside the third. One scrolling row is honest about its shape at
   every width: what fits, fits; what does not, peeks over the edge and can
   be pushed. The children's board keeps the grid - it is a narrow column
   there, and it never overflows. */
.boardtop { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.boardtop .boardsays { margin: 0; flex: 1; min-width: 0; }
.boardtop .pill { flex: none; }

body.admin #momBoardHint .board {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 14px; margin: 0 -4px; padding: 4px 4px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
body.admin #momBoardHint .board::-webkit-scrollbar { display: none; }
body.admin #momBoardHint .panel {
  /* grow to fill a wide row, never shrink: shrinking would swallow the peek
     that tells you there is a card past the edge */
  flex: 1 0 min(80%, 300px); scroll-snap-align: start; max-width: 480px;
  min-height: 176px; padding: 24px 24px 26px;
}
body.admin #momBoardHint .panel .pbody { font-size: 23px; }
body.admin #momBoardHint .panel.word .pbody { font-size: 38px; }
body.admin #momBoardHint .panel.scripture .pbody,
body.admin #momBoardHint .panel.quote .pbody { font-size: 21px; }
body.admin #momBoardHint .panel .pfoot { font-size: 13px; margin-top: 12px; }


/* The five subjects, named only when she asks. */
.subjlist { margin-top: 20px; display: flex; flex-direction: column; gap: 2px; }
.subjrow { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  border-radius: var(--r-sm); background: var(--card-sunk); }
.subjrow .mk { width: 22px; height: 22px; flex: none; border-radius: 999px; display: grid;
  place-items: center; background: var(--line); color: var(--ink); font-size: 12px; font-weight: 900; }
.subjrow.has .mk { background: var(--olive); color: var(--lime); }
.subjrow .nm { font-weight: 800; font-size: 14.5px; flex: 1; min-width: 0; }
.subjrow .ct { font-size: 12px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }

/* ---- three more kinds on the board ------------------------------------
   Each ground says what sort of thing it is before a word is read, and the
   typography follows the standing rule: Fraunces for anything a person said,
   Nunito for anything operational. A figure of speech is something people
   say, so it takes the serif at a weight neither scripture nor quote uses. */
.panel.figure { background: var(--pink); color: #2A1420; }
.panel.figure .pbody { font-family: Fraunces, Georgia, serif; font-weight: 500;
  font-size: 26px; line-height: 1.2; }
.panel.figure .pfoot { font-weight: 700; }

.panel.fact { background: var(--amber); color: #3A2A06; }
.panel.fact .pbody { font-size: 23px; font-weight: 800; line-height: 1.28; }

.panel.survival { background: var(--navy); color: #EAF0FF; }
.panel.survival .pbody { font-size: 23px; font-weight: 800; line-height: 1.28; }
.panel.survival .pfoot { color: #D3DEFA; }

/* One thing to go and look at, and one way for Mom to change the card. */
.panel { position: relative; }
.panellink { display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.28); color: inherit; }
.panellink:hover { background: rgba(255,255,255,.45); }
/* An inline SVG with no width attribute fills its flex line. Size it here so
   no icon can ever arrive without one. */
.panellink svg { flex: none; width: 17px; height: 17px; }
.panelpen svg { width: 16px; height: 16px; }
.panellink.tube { background: var(--tube); color: #fff; }
.panellink.tube:hover { background: #A6301F; }
.panel.scripture .panellink:not(.tube),
.panel.fact .panellink:not(.tube),
.panel.figure .panellink:not(.tube) { background: rgba(22,19,14,.08); }

.panelpen { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0;
  border-radius: 999px; background: rgba(255,255,255,.30); color: inherit; cursor: pointer;
  display: grid; place-items: center; }
.panelpen:hover { background: rgba(255,255,255,.55); }
.panel.scripture .panelpen, .panel.fact .panelpen, .panel.figure .panelpen {
  background: rgba(22,19,14,.07); }
.panel.scripture .panelpen:hover, .panel.fact .panelpen:hover,
.panel.figure .panelpen:hover { background: rgba(22,19,14,.14); }
.panelpen:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
body.admin #momBoardHint .panel .peyebrow { padding-right: 40px; }

/* ---- the kid header does the work the page used to -----------------------
   The week toggle, the day/week toggle and the day chips were three bands
   stacked under the header. They are navigation; navigation belongs with the
   name and the week. One scrolling strip each, inside the one card. */

.headband .days { margin-top: 12px; scrollbar-width: none; -ms-overflow-style: none; }
.headband .days::-webkit-scrollbar { display: none; }
.headband .days:empty { display: none; }
.headband .day { min-width: 68px; }
.headband .progress { margin-top: 18px; }

/* ---- the gold star -------------------------------------------------------
   A tick is confirmation. A star is a reward, and a child can tell the
   difference. It bursts out past the ring and goes; nothing is left behind to
   turn the list into a scoreboard. */
:root { --gold: #F5C244; --gold-deep: #C98A10; }
.starburst { position: absolute; inset: -15px; grid-area: 1/1; display: grid; place-items: center;
  pointer-events: none; opacity: 0; }
.starburst svg { width: 100%; height: 100%; color: var(--gold); stroke: var(--gold-deep); }
.card.settle .starburst { animation: starpop .6s cubic-bezier(.2,1.05,.3,1) both; }
@keyframes starpop {
  0%   { opacity: 0; transform: scale(.25) rotate(-45deg); }
  35%  { opacity: 1; transform: scale(1.35) rotate(10deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.9) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) { .starburst { animation: none !important; } }

/* On a phone the card was giving its title about 150px: a 96px thumbnail, two
   17px gaps, an arrow and a 36px circle all came out of the same 350px. The
   words are the point of the card, so everything else gives ground first. */
@media (max-width: 520px) {
  .card { gap: 12px; padding: 16px 14px; }
  .cardmain { gap: 12px; }
  .card .tile { width: 46px; height: 46px; border-radius: 13px; }
  .card .tile.wide { width: 76px; height: 43px; border-radius: 10px; }
  .card .tile .play { width: 26px; height: 26px; }
  .expander svg { width: 15px; height: 15px; }
  .ctitle { font-size: 15.5px; }
}

/* ---- the child's identity block ------------------------------------------
   Avatar on the left; greeting, week and motto share one left edge beside it.
   The week line used to start at the card's edge, under the back button, so it
   never lined up with the name it described. Two left edges in one card is one
   too many.
   The week also carries its own control. A "This week / Next week" toggle
   under a line that already read "THIS WEEK" was the same sentence twice —
   the mistake the mom header was rebuilt to stop making. */
.idblock { display: flex; align-items: flex-start; gap: 13px; flex: 1; min-width: 0; }
.idtext { min-width: 0; display: flex; flex-direction: column; }
.avabtn { border: 0; background: none; padding: 0; margin: 0; flex: none; cursor: pointer;
  border-radius: 17px; line-height: 0; }
.avabtn:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }

.headband .namebtn { align-self: flex-start; }

/* Name and week on one line. The week is a single 40px chip - the same height
   as every control in Mom's header - so a 38px name does not have a loose
   11px label floating beside it. Wraps to its own line when the row runs out,
   which is what happens on a phone. */
.idtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.weekline { display: inline-flex; align-items: center; gap: 6px; height: 40px; flex: none;
  background: var(--card-sunk); border-radius: 999px; padding: 0 5px 0 16px; }
.weekline .wk { font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap; }
.weekline .wk:last-child { padding-right: 11px; }
.weekline .wk i { font-style: normal; }
.weekline .wk i::before { content: " \00b7 "; }
.peekbtn { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  background: var(--card); box-shadow: var(--shadow); border-radius: 999px; padding: 0 13px;
  min-height: 32px; display: inline-flex; align-items: center; }
.peekbtn:hover { background: var(--line); box-shadow: none; }
.peekbtn:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }

.kidmotto { margin-top: 10px; font-family: Fraunces, Georgia, serif; font-style: italic;
  font-weight: 500; font-size: 14.5px; color: var(--ink-soft); line-height: 1.4; }

.headband .days { margin-top: 20px; }

/* A field the database cannot yet accept must look unavailable, not empty. */
.f:disabled { opacity: .55; cursor: not-allowed; }

/* ---- the last bit of setup, explained where it is mentioned --------------
   "Needs the setup step first" named nothing, so it was reasonably read as
   nonsense. A message about something the owner has to do says what the thing
   is, and carries a way to read the steps from wherever it appears. */
.linky { border: 0; background: none; padding: 0; font: inherit; font-weight: 900;
  color: var(--olive); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linky:hover { color: var(--ink); }
.linky:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 4px; }

.setupsteps { margin-top: 22px; display: flex; flex-direction: column; gap: 2px; }
.setupsteps .step { display: flex; gap: 13px; align-items: flex-start; padding: 13px 14px;
  border-radius: var(--r-sm); background: var(--card-sunk); }
.setupsteps .n { flex: none; width: 24px; height: 24px; border-radius: 999px; background: var(--olive);
  color: var(--lime); display: grid; place-items: center; font-size: 12.5px; font-weight: 900; }
.setupsteps .t { font-size: 14px; font-weight: 600; line-height: 1.5; min-width: 0; }
.setupsteps .t b { font-weight: 900; }

/* ---- the family calendar -------------------------------------------------
   Events are not work, and this is where that has to be visible before it is
   read. No card shadow, no subject colour, no checkbox, no drag handle. A
   time-led row on a quiet ground, so a child can tell at a glance that this is
   something happening TO the day rather than something asked OF them. */
.dayplan { background: var(--ground-sunk); border-radius: var(--r-md);
  padding: 16px 18px 14px; margin-bottom: 14px; }
.dphead { font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: #243436; margin-bottom: 10px; }
.dprow { display: flex; gap: 14px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid rgba(22,19,14,.09); }
.dprow:first-of-type { border-top: 0; }
.dprow .t { flex: none; min-width: 62px; font-size: 12.5px; font-weight: 900;
  font-variant-numeric: tabular-nums; color: #243436; }
.dprow .w { min-width: 0; }
.dprow .w b { font-weight: 800; font-size: 15px; }
.dprow .w i { display: block; font-style: normal; font-size: 12.5px; font-weight: 700;
  color: #2E4144; margin-top: 1px; }

/* A calendar strip, separate from assigned work. */
.comingup { background: var(--card-sunk); color: var(--ink); border-radius: var(--r-sm); margin: 0 0 18px; padding: 14px 16px; }
.comingup h3 { font-size: 14px; margin: 0 0 10px; font-weight: 800; }
.upcoming-event { display:flex; align-items:center; gap:14px; padding:8px 0; }
.event-date { flex:0 0 48px; text-align:center; border-right:1px solid var(--line); padding-right:12px; }
.event-date span { display:block; font-size:12px; }
.event-date strong { display:block; font-size:24px; line-height:1.1; }
.event-copy { min-width:0; font-size:13px; overflow-wrap:anywhere; }
.event-copy b { display:block; font-size:16px; margin-bottom:3px; }
.event-location { margin-top:3px; }
.comingup summary { cursor:pointer; min-height:44px; display:list-item; padding:12px 0; font-size:13px; font-weight:800; }
.comingup summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

/* a day with something on says so without touching the "n more" count */
.evdot { display: inline-block; width: 5px; height: 5px; border-radius: 999px;
  background: var(--olive); margin-left: 5px; vertical-align: 2px; }
.day.on .evdot { background: var(--lime); }

/* Mom's month: an agenda, not a grid. A grid is stage two. */
.agenda { display: flex; flex-direction: column; }
.agday { display: flex; align-items: baseline; gap: 10px; padding: 22px 4px 8px; }
.agday .dn { font-size: 19px; font-weight: 900; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.agday .dw { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); }
.agrow { display: flex; align-items: baseline; gap: 14px; width: 100%; border: 0; cursor: pointer;
  font: inherit; text-align: left; background: var(--card); border-radius: var(--r-sm);
  padding: 14px 16px; margin-top: 6px; min-height: 52px; }
.agrow:hover { background: var(--card-sunk); }
.agrow .t { flex: none; min-width: 66px; font-size: 12.5px; font-weight: 900;
  font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.agrow .w { flex: 1; min-width: 0; }
.agrow .w b { font-weight: 800; font-size: 15px; }
.agrow .w i { display: block; font-style: normal; font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); margin-top: 2px; }
.agrow .k { flex: none; font-size: 10.5px; font-weight: 900; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); }
@media (max-width: 520px) { .agrow .k { display: none; } }

.timerow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* The family code is a secret in plain sight otherwise: it sat uncovered on a
   page that gets screenshotted, and a screenshot carries it away. */
.codebox.hidden { cursor: pointer; color: var(--ink-faint); }
.codebox.hidden:hover { background: var(--line); }
.codebox .tapshow { font-family: Nunito, sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }

/* The rail's child switcher, repeated above the panel on a phone where the
   rail does not exist. Found by the audit: Mom could not change child on her
   phone at all. */
.phonewho { display: flex; gap: 8px; margin-bottom: 14px; }
.phonewho:empty { display: none; }
.phonewho button { flex: 1; border: 0; cursor: pointer; border-radius: 14px; padding: 11px 0;
  font-family: Fredoka, sans-serif; font-weight: 600; font-size: 14px;
  background: var(--card); color: var(--ink-soft); min-height: 42px; }
.phonewho button.on { color: #fff; }
@media (min-width: 900px) { .phonewho { display: none; } }

/* ---- the child's three doors, on the name's row --------------------------
   Interview, Journal, For fun. The interview used to be a card in the list and
   the journal a tile under For fun; both are now one tap from the top. The
   board column remains beside the work (owner correction September 12). */
.kidnav { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.kidnav .funpill { margin-left: 0; position: relative; }
.kidnav .funpill .pip { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px;
  border-radius: 999px; background: var(--rust); border: 2px solid var(--card); }
body.noboard .kidcols { grid-template-columns: 1fr; }
body.noboard #kidBoard { display: none; }

/* Optional activities: compact navigation, printable preview and family ideas. */
.kidnav .interview-button { background: var(--gold); color: var(--ink); }
.suggestion-tab { position:fixed; right:12px; bottom:24px; z-index:45; display:flex; align-items:center; gap:8px; padding:12px 16px; min-height:44px; border:2px solid var(--ink); border-radius:var(--r-sm); background:var(--card); color:var(--ink); font:800 14px Nunito,sans-serif; cursor:pointer; }
.suggestion-tab[hidden] { display:none; }
.suggestion-tab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.suggestion-tab:focus-visible,.print-open:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.print-filters { display:flex; gap:14px; flex-wrap:wrap; margin:16px 0; }
.print-filters label { flex:1; min-width:140px; font-weight:800; }
.print-open { display:block; width:100%; border:0; padding:0; background:var(--card); color:var(--ink); cursor:pointer; min-height:44px; }
.print-open img { width:100%; object-fit:contain; }
.print-preview { display:block; width:100%; max-height:65vh; object-fit:contain; border:0; margin:12px 0; }
iframe.print-preview { height:60vh; }
.pdf-tile { min-height:160px; display:grid; place-items:center; background:var(--card-sunk); font-weight:800; }
.preview-error { display:block; padding:18px; }
.preview-error[hidden] { display:none; }
.mini-preview { flex:0 0 60px; width:60px; }
.mini-preview .pdf-tile { min-height:60px; }
.colorrow { flex-wrap:wrap; padding:10px 0; border-bottom:1px solid var(--line); }
.colorrow > .f { flex:1; min-width:140px; }
.suggestion-list { margin-top:24px; }
.suggestion-card { background:var(--card-sunk); border-radius:var(--r-sm); padding:16px; margin:12px 0; overflow-wrap:anywhere; }
.suggestion-card p { white-space:normal; line-height:1.5; }
.suggestion-by,.suggestion-status { font-weight:800; font-size:13px; }
@media(max-width:600px){ .suggestion-tab { bottom:calc(76px + env(safe-area-inset-bottom)); right:10px; padding:10px; } .suggestion-tab span { display:none; } }
@media print { .suggestion-tab { display:none !important; } }

/* Child calendar: seven-day read-only month view, colors follow profiles. */
.event-dots { display:flex; justify-content:center; align-items:center; gap:4px; min-height:10px; }
.child-event-dot { display:inline-block; flex:none; width:8px; height:8px; border-radius:999px; }
.day .event-dots { width:fit-content; margin:4px auto; padding:3px 5px; border-radius:999px; background:var(--card); }
#kidCalendarSidebar { background:var(--card); border-radius:var(--r-md); padding:14px; margin-bottom:18px; }
#kidCalendarSidebar .kid-calendar-head h2 { font-size:18px; }
#kidCalendarSidebar .kid-calendar-grid { gap:0; }
#kidCalendarSidebar .kid-calendar-head .back { background:var(--card-sunk); }
#kidSidebar { min-width:0; }
.kidmain { min-width:0; }
#progWrap { background:var(--progress-blue); margin:0 0 14px; padding:16px 20px; border-radius:var(--r-md); }
#progWrap .row { color:var(--ink); }
.kid-calendar-head { display:flex; align-items:center; gap:6px; }
.kid-calendar-head h2 { flex:1; min-width:0; margin:0; font-size:22px; }
.kid-calendar-head .back { flex:0 0 44px; min-width:44px; height:44px; }
.kid-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:20px; }
.calendar-weekday { text-align:center; padding:8px 0; font-weight:800; font-size:13px; }
.kid-calendar-day { min-height:54px; min-width:0; border-radius:var(--r-sm); background:transparent; color:var(--ink); padding:6px 1px; font-size:16px; font-weight:800; }
.kid-calendar-day.outside { color:var(--ink-soft); }
.kid-calendar-day.has-events { background:var(--card-sunk); }
.kid-calendar-day.selected { outline:2px solid var(--ink); outline-offset:-2px; }
.kid-calendar-day[aria-current="date"] > span:first-child { text-decoration:underline; text-underline-offset:4px; }
.kid-calendar-day:focus-visible { outline:3px solid var(--olive); outline-offset:0; }
.kid-calendar-legend { display:flex; flex-wrap:wrap; gap:14px; margin:16px 0; font-size:13px; font-weight:800; }
.kid-calendar-legend > span { display:flex; align-items:center; gap:6px; }
.kid-calendar-detail { border-top:1px solid var(--line); padding-top:12px; }
.kid-calendar-detail h3 { font-size:16px; margin:0 0 10px; }
.kid-calendar-detail article { padding:10px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.kid-calendar-detail p { margin:5px 0; font-size:14px; }
@media(max-width:400px){ .kid-calendar-head h2 { font-size:18px; } .kid-calendar-head { gap:2px; } }

/* Family ideas: short preview, full attributed list on request. */
.suggestion-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.suggestion-heading h2 { margin:0; }
.suggestion-heading .back { flex:none; }
.suggestion-preview { position:relative; max-height:180px; overflow:hidden; padding-bottom:65px; }
.suggestion-preview ol { margin:0; padding-left:28px; }
.suggestion-preview li { padding:8px 0; line-height:1.5; overflow-wrap:anywhere; }
.suggestion-overlay { position:absolute; inset:auto 0 0; width:100%; min-height:76px; background:rgb(247 241 230 / 85%); color:var(--ink); display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); }
.suggestion-overlay span { background:var(--card); padding:10px 16px; border-radius:999px; font-weight:800; }
.suggestion-overlay:focus-visible { outline:3px solid var(--ink); outline-offset:-3px; }

/* Task controls occupy their own full-width footer, never the icon rail. */
.task-actions { grid-column:1 / -1; display:flex; align-items:flex-start; flex-wrap:wrap; gap:10px; border-top:1px solid var(--card-sunk); padding-top:12px; }
.task-primary-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex:1 1 220px; min-width:0; }
.task-library { min-height:44px; padding:10px 12px; font-size:14px; font-weight:800; white-space:nowrap; border-radius:999px; }
.task-library:hover { background:var(--card-sunk); }
.task-icon-actions { display:flex; gap:6px; margin-left:auto; }
.task-icon-actions .iconbtn { width:44px; height:44px; border-radius:var(--r-sm); }
.task-more { position:relative; }
.task-more summary { cursor:pointer; list-style:none; }
.task-more-options { position:absolute; right:0; bottom:calc(100% + 6px); z-index:20; width:200px; padding:8px; background:var(--card); box-shadow:var(--shadow); border-radius:var(--r-sm); }
.task-more-options button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; text-align:left; border-radius:var(--r-sm); font-size:14px; font-weight:800; }
.task-more-options button:hover { background:var(--card-sunk); }
.task-more-options svg { width:18px; height:18px; flex:none; }
.task-library:focus-visible,.task-more-options button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
.adminrow .ctitle { overflow-wrap:anywhere; }
/* Assignment sharing and mobile task-first order. */
.assign-menu { position:relative; }
.assign-menu summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:10px 14px; font-weight:800; font-size:14px; white-space:nowrap; background:var(--card-sunk); border-radius:999px; list-style:none; }
.assign-menu summary::-webkit-details-marker,.task-more summary::-webkit-details-marker { display:none; }
.assign-menu > div { position:absolute; left:0; bottom:calc(100% + 6px); z-index:20; min-width:180px; padding:14px; border-radius:var(--r-sm); background:var(--card); box-shadow:var(--shadow); }
.assign-menu label { display:flex; align-items:center; gap:8px; min-height:44px; }
.assign-menu input { width:22px; height:22px; }
.calendar-expand { display:none; }
@media(max-width:899px){
 .kidcols { display:flex; flex-direction:column; }
 .kidmain { order:0; width:100%; }
 #kidSidebar { order:1; width:100%; margin-top:28px; }
 #kidCalendarSidebar:not(.expanded) .kid-calendar-crop { max-height:180px; overflow:hidden; }
 .calendar-expand { display:flex; margin:10px auto; }
}

.resource-filters { display:flex; flex-wrap:wrap; gap:12px; margin:16px 0; }
.resource-filters label { flex:1 1 130px; font-weight:800; }
.resource-folders { display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.assign-menu summary:focus-visible,.calendar-expand:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }

/* Persistent project workspace, beneath school work. Read DESIGN before edits. */
.project-section { margin-top:28px; }
.project-card { background:var(--card); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow); }
.project-card h3 { font-family:Fredoka,Nunito,sans-serif; font-size:26px; margin:0 0 18px; }
.project-focus { font-size:18px; font-weight:800; margin:6px 0 20px; }
.project-next,.project-mom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:16px; border-radius:var(--r-sm); }
.project-next { background:var(--card-sunk); }
.project-next > div,.project-mom > div { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.project-next p,.project-mom p { margin:6px 0 0; }
.project-mom { margin-top:12px; border:1px solid var(--card-sunk); }
.project-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin:16px 0; }
.project-links button { background:var(--card-sunk); border:2px solid var(--line); min-height:44px; padding:10px 4px; font-size:14px; border-radius:var(--r-sm); font-weight:800; }
.project-links button:hover { border-color:var(--olive); }
.project-links button[aria-current] { background:var(--olive); color:var(--lime); border-color:var(--olive); }
.project-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.project-dialog-head .iconbtn { width:44px; height:44px; }
.project-step,.project-decision { padding:16px; margin:12px 0; background:var(--card-sunk); border-radius:var(--r-sm); overflow-wrap:anywhere; }
.project-step p,.project-decision p { white-space:pre-wrap; }
.project-step-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.project-group { margin:24px 0 12px; }
.project-check { display:flex; align-items:center; gap:10px; min-height:44px; margin-top:12px; }
.project-check input { width:22px; height:22px; }
.project-links button:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
@media(max-width:520px){ .project-card { padding:18px; } }

.project-card .pill:not(.ghost) { background:var(--olive); color:var(--lime); }

.project-form textarea.f { min-height:100px; line-height:1.5; }
.project-form input.f { min-height:48px; }
.project-export-row { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }