/* NURTURE-2027 — the one design language for Leela's Nurture (Asa, 1 Oct 2026). The skill
   .claude/skills/nurture-2027/SKILL.md carries the rules and the method; the approved mockups are in docs/nurture-2027/.

   Every class here starts with n7- and nothing else in the app uses that prefix, so this file never collides with
   the old sheets. It is meant to be loaded UNLAYERED while the old sheets sit in `@layer legacy`, so it wins without
   !important. It is NOT linked from index.html yet: the shell phase wires it, page by page.

   Stream skins:  body.n7-nur  Picture book (nursery)  ·  body.n7-sch  Living data (schools)  ·  .n7-ai  Glass garden,
   lighter (AI apps — injected into their shadow roots). The parts are the same; only the skin changes. */

/* ── tokens ─────────────────────────────────────────────────────────────────────────────────────────────────── */
:root{
  --n7-ink:#16211C; --n7-ink70:#4A5852; --n7-ink45:#7C8A83; --n7-line:#E2E8E4; --n7-line2:#EEF1EE; --n7-card:#fff;
  --n7-green:#1D9E75; --n7-green-s:#E1F5EE;   /* people, done, healthy */
  --n7-blue:#2E6BA8;  --n7-blue-s:#E7EEF7;    /* menus, information */
  --n7-amber:#B07300; --n7-amber-s:#FBF0D9;   /* money, waiting, not captured */
  --n7-red:#BD2424;   --n7-red-s:#F6E0E0;     /* Save / Confirm, alarm */
  --n7-ai:#3E36A8;    --n7-ai-s:#EEEDFE;      /* AI and nothing else */
  --n7-safe:#B4432F;  --n7-safe-s:#FBE9E4;    /* allergies, medical */
  --n7-work:#3F3A35;  --n7-work-s:#F1EFEC;    /* kitchen work */
  --n7-sun:#FFD84D;
  /* less curvy (Asa, 1 Oct 2026): nothing above 16px */
  --n7-r-block:16px; --n7-r-card:14px; --n7-r-sheet:14px; --n7-r-btn:10px; --n7-r-chip:999px;
  --n7-disp:Nunito,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;
  --n7-body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* one layer order: a confirm never opens under anything */
  --n7-z-sticky:10; --n7-z-menu:100; --n7-z-drawer:150; --n7-z-sheet:200; --n7-z-nuri:300; --n7-z-confirm:400; --n7-z-toast:500;
  /* default skin = nursery */
  --n7-ground:#F6F4EC; --n7-accent:#117A5E; --n7-accent-ink:#0E5A43; --n7-tint:#E3F1E9;
}
body.n7-sch{--n7-ground:#EFF5F1; --n7-accent:#2E9E7B; --n7-accent-ink:#14614A; --n7-tint:#D9EDE4}
.n7-ai{--n7-ground:#FBFCFA; --n7-accent:#3E36A8; --n7-accent-ink:#2E2880; --n7-tint:#EEEDFE}
body.n7-nur,body.n7-sch{background:var(--n7-ground);color:var(--n7-ink);font-family:var(--n7-body)}
.n7-num{font-variant-numeric:tabular-nums}

/* ── tab rows: sections, sub-tabs; a sliding indicator; swipe, no scrollbar ─────────────────────────────────── */
.n7-tabs{position:relative;display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.n7-tabs::-webkit-scrollbar{display:none}
.n7-tabs > button{position:relative;z-index:1;border:0;background:none;padding:8px 12px;font:500 13px/1.3 var(--n7-body);color:var(--n7-ink70);white-space:nowrap;scroll-snap-align:start;cursor:pointer}
.n7-tabs > button.on,.n7-tabs > button.active{color:var(--n7-accent-ink);font-weight:600}
.n7-tabs > .n7-ind{position:absolute;z-index:0;left:0;top:0;height:100%;border-radius:var(--n7-r-btn);background:var(--n7-tint);
  transition:transform .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1)}
.n7-sub > .n7-ind{top:auto;bottom:0;height:3px;border-radius:3px;background:var(--n7-accent)}
body.n7-nur .n7-tabs:not(.n7-sub) > .n7-ind{background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.06)}
body.n7-nur .n7-sub > .n7-ind{height:4px;background:#E9A800}
.n7-tabrow{position:relative}
.n7-tabrow::after{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--n7-ground));opacity:0}

/* ── the slim band on top: the data is the hero ─────────────────────────────────────────────────────────────── */
.n7-top{position:relative;overflow:hidden;isolation:isolate;background:var(--n7-card);border:1px solid var(--n7-line);border-radius:var(--n7-r-block);padding:8px 12px;display:grid;gap:6px}
.n7-top-row{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-width:0}
.n7-top-row + .n7-top-row{border-top:1px dashed var(--n7-line);padding-top:6px}
.n7-top h2{margin:0;font:900 18px/1.15 var(--n7-disp);letter-spacing:-.3px}
.n7-meta{font-size:11.5px;color:var(--n7-ink45)} .n7-meta b{color:var(--n7-ink70);font-weight:600}
.n7-right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.n7-code{font:900 13px/1 var(--n7-disp);background:var(--n7-accent);color:#fff;border-radius:8px;padding:4px 9px}
body.n7-nur .n7-top{border-width:2px;border-color:color-mix(in srgb,var(--n7-accent) 14%,var(--n7-line))}
body.n7-nur .n7-top::before{content:"";position:absolute;right:-30px;top:-46px;width:110px;height:110px;border-radius:50%;background:var(--n7-sun);opacity:.45;z-index:-1;animation:n7bob 9s ease-in-out infinite}
body.n7-sch .n7-top::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 140% at 6% -30%,rgba(46,158,123,.12),transparent 60%),radial-gradient(40% 140% at 96% -40%,rgba(46,107,168,.07),transparent 60%);animation:n7drift 20s ease-in-out infinite alternate}

/* figures in a row, hairline between each */
.n7-facts{display:flex;flex-wrap:wrap;align-items:stretch}
.n7-fact{padding:2px 16px;min-width:0}
.n7-fact:first-child{padding-left:0}
.n7-fact + .n7-fact{border-left:1px solid var(--n7-line)}
.n7-fact .l{font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--n7-ink45)}
.n7-fact .v{font:800 17px/1.25 var(--n7-disp);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── buttons, pills, chips ──────────────────────────────────────────────────────────────────────────────────── */
.n7-btn{border:1px solid var(--n7-line);background:#fff;color:var(--n7-ink);border-radius:var(--n7-r-btn);padding:6px 13px;font:500 13px/1.2 var(--n7-body);min-height:36px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:transform .15s}
.n7-btn:active{transform:scale(.97)}
.n7-btn.sm{min-height:30px;padding:3px 10px;font-size:12px}
.n7-btn.go{background:var(--n7-accent);border-color:var(--n7-accent);color:#fff}
.n7-btn.commit{background:var(--n7-red);border-color:var(--n7-red);color:#fff;font-weight:600}
.n7-btn.ai{background:var(--n7-ai-s);border-color:#CFCBF2;color:var(--n7-ai)}
.n7-btn.quiet{border-color:transparent;background:none;color:var(--n7-ink70)}
.n7-btn[disabled]{opacity:.5;cursor:not-allowed}
body.n7-nur .n7-btn{border-width:2px;font-weight:600}
body.n7-nur .n7-btn:hover{transform:translateY(-1px)}
.n7-pill{border:1px solid var(--n7-line);background:#fff;border-radius:var(--n7-r-chip);padding:4px 11px;font:600 12.5px/1.2 var(--n7-body);color:var(--n7-ink70);min-height:32px;cursor:pointer}
.n7-pill:hover{border-color:var(--n7-accent);color:var(--n7-accent)}
.n7-pill.on{background:var(--n7-accent);border-color:var(--n7-accent);color:#fff}
body.n7-nur .n7-pill{border-width:2px}
.n7-chip{display:inline-flex;align-items:center;gap:6px;background:var(--n7-tint);color:var(--n7-accent-ink);border:0;border-radius:var(--n7-r-chip);padding:3px 6px 3px 11px;font:600 12px/1.3 var(--n7-body)}
.n7-chip i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:10px}
.n7-tag{display:inline-block;font:600 11px/1.6 var(--n7-body);border-radius:var(--n7-r-chip);padding:0 9px;background:var(--ts,var(--n7-line2));color:var(--t,var(--n7-ink70));white-space:nowrap}
.n7-input{border:1px solid var(--n7-line);border-radius:var(--n7-r-btn);padding:5px 12px;min-height:34px;font:13px var(--n7-body);background:#fff}

/* ── the Signals-style filter: labelled rows of pills, the calendar, one line saying what it applies to ───── */
.n7-filter{background:#fff;border:1px solid var(--n7-line);border-radius:var(--n7-r-card);padding:14px;display:grid;gap:14px}
.n7-frow{display:grid;gap:6px}
.n7-fkey{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--n7-ink45)}
.n7-fvals{display:flex;flex-wrap:wrap;gap:6px}
.n7-applies{font-size:11.5px;color:var(--n7-ink45);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.n7-applies .c{background:var(--n7-tint);color:var(--n7-accent-ink);border-radius:var(--n7-r-chip);padding:2px 9px;font-weight:500}
.n7-cal{border:1px solid var(--n7-line);border-radius:12px;padding:9px;background:#fff}
.n7-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.n7-cal-d{border:0;background:none;border-radius:7px;height:28px;font-size:11.5px;font-weight:500;padding:0;cursor:pointer}
.n7-cal-d:hover{background:var(--n7-tint)}
.n7-cal-d.mid{background:var(--n7-tint);color:var(--n7-accent-ink);border-radius:0}
.n7-cal-d.on{background:var(--n7-accent);color:#fff;font-weight:600}

/* ── the card: icon tile, title, one grey purpose line, a line in its colour under the heading ───────────── */
.n7-card{position:relative;background:var(--n7-card);border:1px solid var(--n7-line);border-radius:var(--n7-r-card);min-width:0;overflow:hidden}
.n7-ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px 0}
.n7-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--ts,var(--n7-work-s));color:var(--t,var(--n7-work));font-size:14px}
.n7-ch h3,.n7-ch h4{margin:0;font:800 15.5px/1.2 var(--n7-disp)}
.n7-ch .p{display:block;font:12px var(--n7-body);color:var(--n7-ink45)}
.n7-ch .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.n7-line{display:block;height:2px;border-radius:2px;margin:10px 16px 4px;transform-origin:left;animation:n7draw 1s .15s cubic-bezier(.2,.8,.2,1) both;
  background:linear-gradient(90deg,var(--t,var(--n7-work)) 0%,var(--t,var(--n7-work)) 24%,var(--ts,var(--n7-work-s)) 64%,transparent 100%)}
.n7-line{position:relative;overflow:hidden;transition:height .2s}
/* the glint: the line catches the light every 7s (gosomewhere's "dynamic striping") */
.n7-line::after{content:"";position:absolute;top:0;bottom:0;left:-70px;width:70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:n7glint 7s 1.6s ease-in-out infinite}
.n7-card:hover .n7-line{height:3px}
.n7-cb{padding:8px 16px 16px}
.n7-t-green{--t:var(--n7-green);--ts:var(--n7-green-s)} .n7-t-blue{--t:var(--n7-blue);--ts:var(--n7-blue-s)} .n7-t-amber{--t:var(--n7-amber);--ts:var(--n7-amber-s)}
.n7-t-red{--t:var(--n7-red);--ts:var(--n7-red-s)} .n7-t-ai{--t:var(--n7-ai);--ts:var(--n7-ai-s)} .n7-t-safe{--t:var(--n7-safe);--ts:var(--n7-safe-s)} .n7-t-work{--t:var(--n7-work);--ts:var(--n7-work-s)}
body.n7-nur .n7-card{border:2px solid var(--ts,var(--n7-line))}
body.n7-nur .n7-ic{border-radius:50%}
.n7-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.n7-two > .n7-full{grid-column:1/-1}

/* figures that matter: Picture book makes them blocks of colour */
.n7-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--n7-r-block);padding:20px 22px;min-height:150px;display:flex;flex-direction:column;color:#fff;background:var(--n7-accent)}
.n7-hero .v{font:900 44px/1.05 var(--n7-disp);letter-spacing:-1.4px;font-variant-numeric:tabular-nums}
body.n7-nur .n7-hero::before{content:"";position:absolute;z-index:-1;width:200px;height:200px;border-radius:50%;right:-50px;top:-70px;background:rgba(255,255,255,.14);animation:n7bob 10s ease-in-out infinite}
body.n7-sch .n7-hero{background:#fff;color:var(--n7-ink);border:1px solid var(--n7-line)}

/* ── tables: list tables become cards on a phone; true grids stay grids ───────────────────────────────────── */
.n7-table{width:100%;border-collapse:collapse;font-size:13px}
.n7-table th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--n7-ink45);padding:8px 10px;border-bottom:1px solid var(--n7-line);white-space:nowrap}
.n7-table td{padding:9px 10px;border-bottom:1px solid var(--n7-line2);vertical-align:middle}
.n7-table tr.n7-band td{background:var(--n7-tint);color:var(--n7-accent-ink);font-weight:600;font-size:12px;padding:6px 10px}
.n7-gridwrap{position:relative;background:#fff;border:1px solid var(--n7-line);border-radius:var(--n7-r-card);overflow:hidden}
.n7-gridscroll{overflow:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.n7-gridscroll::-webkit-scrollbar{display:none}
.n7-grid{border-collapse:separate;border-spacing:0;font-size:12.5px}
.n7-grid th,.n7-grid td{padding:7px 9px;border-bottom:1px solid var(--n7-line2);white-space:nowrap}
.n7-grid thead th{position:sticky;top:0;z-index:3;background:#FBFAF6}
.n7-grid .n7-pin{position:sticky;left:0;z-index:2;background:#fff;box-shadow:6px 0 8px -8px rgba(0,0,0,.28)}
.n7-grid thead .n7-pin{z-index:4;background:#FBFAF6}
.n7-fade{position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,#fff);pointer-events:none;transition:opacity .2s}

/* the Super Filter heading and its pop-over */
.n7-colf{border:0;background:none;padding:3px 6px;margin:-3px -6px;border-radius:8px;font:600 11px var(--n7-body);letter-spacing:.04em;text-transform:uppercase;color:var(--n7-ink45);display:inline-flex;gap:5px;align-items:center;cursor:pointer}
.n7-colf::after{content:"▾";font-size:9px;opacity:.6}
.n7-colf:hover{background:var(--n7-tint);color:var(--n7-accent-ink)}
.n7-colf.on{background:var(--n7-accent);color:#fff}
.n7-pop{position:absolute;z-index:var(--n7-z-sheet);width:270px;background:#fff;border:1px solid var(--n7-line);border-radius:var(--n7-r-sheet);box-shadow:0 18px 40px rgba(0,0,0,.18);padding:10px;display:grid;gap:8px;animation:n7rise .2s both}

/* ── drawers, sheets, confirm, toast ────────────────────────────────────────────────────────────────────────── */
.n7-shade{position:fixed;inset:0;background:rgba(20,17,14,.32);z-index:calc(var(--n7-z-drawer) - 1)}
.n7-drawer{position:fixed;z-index:var(--n7-z-drawer);top:0;right:0;bottom:0;width:min(560px,92vw);background:#fff;box-shadow:-14px 0 30px rgba(0,0,0,.16);overflow:auto;animation:n7slide .3s both}
.n7-sheet{position:fixed;z-index:var(--n7-z-sheet);left:0;right:0;bottom:0;max-height:86vh;overflow:auto;background:#fff;border-radius:var(--n7-r-sheet) var(--n7-r-sheet) 0 0;
  padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(0,0,0,.18);animation:n7up .3s both}
.n7-sheet::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--n7-line);margin:0 auto 12px}
.n7-confirm{position:fixed;z-index:var(--n7-z-confirm);left:50%;top:22vh;transform:translateX(-50%);width:min(460px,92vw);background:#fff;border:1px solid var(--n7-line);border-radius:var(--n7-r-block);padding:18px;box-shadow:0 20px 50px rgba(0,0,0,.2);display:grid;gap:10px}
.n7-toast{position:fixed;z-index:var(--n7-z-toast);left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:var(--n7-ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;box-shadow:0 10px 26px rgba(0,0,0,.2)}

/* ── working on it: the Leela emblem, four sizes ────────────────────────────────────────────────────────────── */
.n7-emb{display:inline-block;vertical-align:-3px;animation:n7turn 2.4s cubic-bezier(.45,.05,.55,.95) infinite}
.n7-load{display:grid;justify-items:center;gap:12px;padding:34px 10px;text-align:center;color:var(--n7-ink70)}
.n7-halo{position:relative;width:84px;height:84px;display:grid;place-items:center}
.n7-halo::before,.n7-halo::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--n7-accent) 35%,transparent);animation:n7halo 2.4s ease-out infinite}
.n7-halo::after{animation-delay:1.2s}
.n7-steps{display:grid;gap:7px;text-align:left;font-size:13px}
.n7-step{display:flex;gap:9px;align-items:center;color:var(--n7-ink45)}
.n7-step i{width:18px;height:18px;border-radius:50%;border:2px solid var(--n7-line);display:grid;place-items:center;font-style:normal;font-size:10px;flex:none}
.n7-step.now{color:var(--n7-ink)} .n7-step.now i{border-color:var(--n7-accent)}
.n7-step.done i{background:var(--n7-accent);border-color:var(--n7-accent);color:#fff}

/* ── AI apps: Glass garden, lighter ─────────────────────────────────────────────────────────────────────────── */
.n7-ai .n7-card,.n7-ai .n7-top,.n7-ai .n7-filter{background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(20,40,30,.04),0 8px 24px rgba(20,60,45,.06)}

/* ── tablet and phone ───────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){ .n7-two{grid-template-columns:1fr} }
@media (max-width:760px){
  .n7-tabrow::after{opacity:1}
  .n7-tabs > button{min-height:44px}
  .n7-right{margin-left:0;width:100%}
  .n7-facts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .n7-facts::-webkit-scrollbar{display:none}
  .n7-fact{flex:none;padding:0 10px}
  .n7-table.n7-cards thead{display:none}
  .n7-table.n7-cards,.n7-table.n7-cards tbody,.n7-table.n7-cards tr,.n7-table.n7-cards td{display:block;width:100%}
  .n7-table.n7-cards tr{border:1px solid var(--n7-line);border-radius:12px;padding:8px 12px;margin-bottom:8px;background:#fff}
  .n7-table.n7-cards td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px}
  .n7-table.n7-cards td::before{content:attr(data-l);font-size:11px;color:var(--n7-ink45);font-weight:500}
  .n7-pop{left:8px!important;right:8px;width:auto}
  /* filters come in from the right on tablet and phone, full height, never a bottom sheet */
  .n7-filter.n7-panel{position:fixed;z-index:var(--n7-z-sheet);top:0;bottom:0;right:0;width:min(340px,90vw);border-radius:var(--n7-r-sheet) 0 0 var(--n7-r-sheet);overflow:auto;animation:n7slide .3s both}
  .n7-drawer{width:100vw;top:auto;height:92vh;border-radius:var(--n7-r-sheet) var(--n7-r-sheet) 0 0;animation:n7up .3s both}
}

@keyframes n7bob{50%{transform:translate(-14px,10px) rotate(8deg)}}
@keyframes n7drift{to{transform:translate(-5%,4%)}}
@keyframes n7draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes n7rise{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes n7slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes n7up{from{transform:translateY(100%)}to{transform:none}}
@keyframes n7glint{0%{left:-70px}35%,100%{left:100%}}
@keyframes n7turn{to{transform:rotate(360deg)}}
@keyframes n7halo{from{transform:scale(.7);opacity:1}to{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){
  [class*="n7-"],[class*="n7-"]::before,[class*="n7-"]::after{animation:none!important;transition:none!important}
}

/* ══ THE SHELL SKIN (Phase 3) ═══════════════════════════════════════════════════════════════════════════════════
   Live only while body has n7-on (n27shell.js sets it from ?look=new / localStorage n7.look; default is today's look).
   It restyles the existing shell in place — header, section tabs, sub-tabs, the ☰ drawer, sign in, the doors and the
   AI apps grid — and adds no structure. Old sheets are NOT layered yet: the ~26 style blocks the app injects from JS
   would start winning over them and change pages nobody asked to touch, so this skin is scoped under body.n7-on and
   wins by specificity instead (never !important). */
body.n7-on{--n7-ground:#F6F4EC}
body.n7-on.on-schools{--n7-ground:#EFF5F1;--n7-accent:#2E9E7B;--n7-accent-ink:#14614A;--n7-tint:#D9EDE4}
body.n7-on header{padding:8px var(--gutter);gap:12px;border-bottom:1px solid var(--n7-line);font-family:var(--n7-body)}
body.n7-on header .who{font-size:12.5px;color:var(--n7-ink70)}
body.n7-on header #logout{border-radius:var(--n7-r-btn);font-weight:500}
body.n7-on header #impersonate{border-radius:var(--n7-r-btn)}

/* section tabs: a tinted pill for the one you are in, a quiet tint on hover — no underline bar */
body.n7-on nav#tabs{gap:2px;padding-top:6px;padding-bottom:6px;font-family:var(--n7-body);border-bottom:1px solid var(--n7-line)}
body.n7-on nav#tabs button{border:0;border-radius:var(--n7-r-btn);padding:8px 13px;font-weight:500;font-size:13.5px;color:var(--n7-ink70);background:transparent;transition:background .25s,color .25s}
body.n7-on nav#tabs button:hover{background:color-mix(in srgb,var(--n7-tint) 60%,#fff);color:var(--n7-ink)}
body.n7-on nav#tabs button.active,body.n7-on nav#tabs button.active:hover{background:var(--n7-tint);color:var(--n7-accent-ink);font-weight:600}
body.n7-on.n7-nur:not(.on-schools) nav#tabs button.active{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 0 0 1px color-mix(in srgb,var(--n7-accent) 18%,transparent)}

/* sub-tabs: the active one gets a line that draws in under it; nursery's line is the Picture-book yellow */
body.n7-on .subnav{gap:2px;border-bottom:1px solid var(--n7-line);font-family:var(--n7-body);scrollbar-width:none}
body.n7-on .subnav::-webkit-scrollbar{display:none}
body.n7-on .subnav button{position:relative;border:0;border-radius:0;background:transparent;color:var(--n7-ink70);font-weight:500;padding:10px 12px 12px}
body.n7-on .subnav button:hover{background:transparent;color:var(--n7-ink)}
body.n7-on .subnav button.active{color:var(--n7-ink);font-weight:600;background:transparent}
body.n7-on .subnav button.active::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px;background:var(--n7-accent);transform-origin:left;animation:n7draw .45s cubic-bezier(.2,.8,.2,1) both}
body.n7-on:not(.on-schools) .subnav button.active::after{background:#E9A800}
body.n7-on .subnav button.wip{background:transparent;color:var(--n7-accent-ink);border-radius:0}
body.n7-on .subnav button.wip::before{content:"◇ ";font-size:10px;color:var(--n7-amber)}
body.n7-on .scope-settings .subnav button{border:0;border-radius:0;background:transparent;color:var(--n7-ink70)}
body.n7-on .scope-settings .subnav button.active{background:transparent;color:var(--n7-ink)}
/* Schools' third row (Canteens › Analytics) as pills */
body.n7-on #schnav3 button{border-radius:var(--n7-r-chip);font-family:var(--n7-body)}

/* the ☰ drawer on a phone: same tabs, tinted where you are */
@media (max-width:760px){
  body.n7-on nav#tabs{padding-bottom:0;border-bottom:0}
  body.n7-on nav#tabs button{border-radius:0;border-bottom:1px solid var(--n7-line2);padding:14px 20px;font-size:15px}
  body.n7-on nav#tabs button.active{background:var(--n7-tint);box-shadow:none}
  body.n7-on .subnav{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  body.n7-on .subnav button{min-height:44px}
}

/* ── sign in: a living ground in both streams' colours, a frosted card, the emblem on top ── */
body.n7-on .login{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,#F6F4EC,#F3F6EE 55%,#EFF5F1);font-family:var(--n7-body)}
body.n7-on .login::before,body.n7-on .login::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(50px);pointer-events:none}
body.n7-on .login::before{width:420px;height:420px;left:-100px;top:-120px;background:rgba(255,216,77,.45);animation:n7float 24s ease-in-out infinite alternate}
body.n7-on .login::after{width:460px;height:460px;right:-140px;bottom:-140px;background:rgba(46,158,123,.32);animation:n7float 30s ease-in-out infinite alternate-reverse}
body.n7-on .login-card{position:relative;width:min(380px,calc(100vw - 32px));padding:34px 26px 22px;border-radius:var(--n7-r-block);background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 4px rgba(20,40,30,.05),0 24px 60px rgba(20,60,45,.14);animation:n7rise .6s cubic-bezier(.2,.8,.2,1) both}
body.n7-on .login-card::before{content:"";position:absolute;left:50%;top:-34px;width:68px;height:68px;margin-left:-34px;border-radius:50%;
  background:#fff url(brand/assets/logos/leelas-emblem.png) center/46px no-repeat;box-shadow:0 8px 20px rgba(20,60,45,.16)}
body.n7-on .login .welcome{font-family:var(--n7-disp);font-weight:800;letter-spacing:0;color:var(--n7-ink45);opacity:1;margin-top:6px}
body.n7-on .login-card input{border:2px solid var(--n7-line);border-radius:var(--n7-r-btn);padding:11px 14px;font-size:15px;min-height:48px;transition:border-color .2s,box-shadow .2s}
body.n7-on .login-card input:focus{outline:0;border-color:var(--n7-accent);box-shadow:0 0 0 4px rgba(17,122,94,.12)}
body.n7-on #loginBtn{background:#117A5E;border-radius:var(--n7-r-btn);min-height:48px;font-size:15px;font-weight:700;box-shadow:0 8px 18px rgba(17,122,94,.25)}
body.n7-on .login .google-btn{border:2px solid var(--n7-line);border-radius:var(--n7-r-btn);min-height:48px;font-weight:600}
body.n7-on #forgotLink{color:var(--n7-ink70)!important;text-align:center;text-decoration:underline;text-underline-offset:2px}
/* Show / Hide sits over the right end of the password box (the box is not moved; the button follows it in the card) */
body.n7-on .n7-peek{align-self:flex-end;margin:-59px 10px 11px 0;position:relative;z-index:1;border:0;background:none;color:var(--n7-ink45);font-size:12px;font-weight:600;padding:6px;height:36px}
body.n7-on .n7-peek:hover{background:none;color:var(--n7-ink)}

/* ── the doors: each one previews its world ── */
body.n7-on .lp-wrap{max-width:1100px;font-family:var(--n7-body)}
body.n7-on .lp-eyebrow{font-family:var(--n7-disp);font-weight:800;letter-spacing:0;text-transform:none;font-size:14px;color:var(--n7-ink45)}
body.n7-on .lp-sub{font-family:var(--n7-body);font-style:normal;font-size:15px;color:var(--n7-ink70)}
body.n7-on .lp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
body.n7-on .lp-tile{position:relative;isolation:isolate;overflow:hidden;align-items:flex-start;text-align:left;border-radius:var(--n7-r-block);padding:20px;min-height:220px;
  border:1px solid var(--n7-line);transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .3s;animation:n7rise .55s cubic-bezier(.2,.8,.2,1) both}
body.n7-on .lp-tile:nth-child(2){animation-delay:.07s} body.n7-on .lp-tile:nth-child(3){animation-delay:.14s} body.n7-on .lp-tile:nth-child(4){animation-delay:.21s}
body.n7-on .lp-tile:hover{transform:translateY(-6px)}
body.n7-on .lp-ico{border-radius:12px}
body.n7-on .lp-title{font-family:var(--n7-disp);font-weight:800;font-size:23px;letter-spacing:-.4px;margin-top:10px}
body.n7-on .lp-desc{font-size:13.5px}
body.n7-on .lp-state{margin-top:auto;font-size:13.5px;font-weight:700}
/* nursery: Picture book — a block of deep green with the sun behind it */
body.n7-on .lp-tile[data-door="nurseries"]{background:#117A5E;border-color:#117A5E;color:#fff}
body.n7-on .lp-tile[data-door="nurseries"]::before{content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-60px;top:-60px;background:var(--n7-sun);opacity:.85;animation:n7bob 9s ease-in-out infinite}
body.n7-on .lp-tile[data-door="nurseries"] .lp-ico{background:rgba(255,255,255,.18);color:#fff}
body.n7-on .lp-tile[data-door="nurseries"] .lp-title,body.n7-on .lp-tile[data-door="nurseries"] .lp-state{color:#fff}
body.n7-on .lp-tile[data-door="nurseries"] .lp-desc{color:rgba(255,255,255,.85)}
body.n7-on .lp-tile[data-door="nurseries"]:hover{background:#117A5E}
/* schools: Living data — white, the green accent, a live dot */
body.n7-on .lp-tile[data-door="schools"]{background:#fff}
body.n7-on .lp-tile[data-door="schools"] .lp-ico{background:#D9EDE4;color:#2E9E7B}
body.n7-on .lp-tile[data-door="schools"] .lp-state{color:#2E9E7B}
body.n7-on .lp-tile[data-door="schools"] .lp-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--n7-green);margin-right:4px;animation:n7ping 2.4s infinite}
/* AI apps: Glass garden, lighter */
body.n7-on .lp-tile[data-door="ai"]{background:rgba(255,255,255,.78);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(62,54,168,.07)}
body.n7-on .lp-tile[data-door="ai"]::before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(circle at 30% 30%,rgba(62,54,168,.10),transparent 45%),radial-gradient(circle at 75% 70%,rgba(46,158,123,.10),transparent 45%);animation:n7spin 30s linear infinite}
body.n7-on .lp-tile[data-door="ai"] .lp-ico{background:var(--n7-ai-s);color:var(--n7-ai)}
body.n7-on .lp-tile[data-door="ai"] .lp-state{color:var(--n7-ai)}
/* settings: quiet graphite */
body.n7-on .lp-tile[data-door="settings"]{background:#F1EFEC;border-color:#E1DCD7}
body.n7-on .lp-tile[data-door="settings"] .lp-ico{background:#fff;color:#3F3A35}
body.n7-on .lp-tile[data-door="settings"] .lp-state{color:#3F3A35}
@media (max-width:640px){
  body.n7-on .lp-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.n7-on .lp-tile{min-height:150px;padding:14px}
  body.n7-on .lp-title{font-size:19px}
  body.n7-on .lp-desc{font-size:12px}
}

/* ── the AI apps grid: Glass garden, lighter ── */
body.n7-on .va-stage{position:relative;isolation:isolate}
body.n7-on .va-tile{border-radius:var(--n7-r-block);background:rgba(255,255,255,.8);backdrop-filter:blur(18px) saturate(1.1);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(20,40,30,.04),0 8px 24px rgba(20,60,45,.06);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;animation:n7rise .55s both}
body.n7-on .va-tile:hover,body.n7-on .va-tile:focus-visible{transform:translateY(-5px);box-shadow:0 2px 4px rgba(20,40,30,.06),0 22px 44px rgba(20,60,45,.12)}
body.n7-on .va-tile-name{font-family:var(--n7-disp);font-weight:800;font-size:20px;background:linear-gradient(120deg,var(--n7-ai),#1D9E75);-webkit-background-clip:text;background-clip:text;color:transparent}
body.n7-on .va-tile-ico{border-radius:12px;background:var(--n7-ai-s);color:var(--n7-ai)}
body.n7-on .va-tile-foot{border-top:0}
body.n7-on .va-open{opacity:1;color:var(--n7-ai)}
body.n7-on.on-aiapp{background:#FBFCFA}

@keyframes n7float{to{transform:translate(70px,50px) scale(1.12)}}
@keyframes n7ping{0%{box-shadow:0 0 0 0 rgba(29,158,117,.5)}70%,100%{box-shadow:0 0 0 7px rgba(29,158,117,0)}}
@keyframes n7spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  body.n7-on .login::before,body.n7-on .login::after,body.n7-on .login-card,body.n7-on .lp-tile,body.n7-on .lp-tile::before,body.n7-on .va-tile,body.n7-on .subnav button.active::after{animation:none!important}
}

/* ══ PAGE · Leela's Kitchen › Roster Panel (Picture book) — rosterPanelN7() in app.js ══════════════════════════ */
body.n7-on #tabbody > h2{font:900 21px/1.2 var(--n7-disp);letter-spacing:-.4px;margin:4px 0 0}
body.n7-on #tabbody > h2 + p.sub{margin:2px 0 10px;font-size:12.5px;color:var(--n7-ink45)}
body.n7-on .n7-btn:not(.go):not(.commit):not([disabled]):hover{background:var(--n7-line2);color:var(--n7-ink)}
body.n7-on .n7-btn.go:not([disabled]):hover{background:var(--n7-accent-ink);color:#fff}
body.n7-on .n7-btn[disabled]{background:#fff;color:var(--n7-ink45)}
.n7-rp{display:grid;gap:14px;font-family:var(--n7-body);color:var(--n7-ink)}
.n7-rp .muted{color:var(--n7-ink45)} .n7-rp .sm{font-size:12px}
.n7-rp-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px;align-items:start}
.n7-rp-main{display:grid;gap:14px;min-width:0}
.n7-rp-side{position:sticky;top:12px;z-index:5}
.n7-rp-sideh{display:flex;align-items:center;gap:8px;font:800 15px var(--n7-disp)}
.n7-rp-done,.n7-rp-fbtn,.n7-rp-shade{display:none}
body.n7-nur .n7-rp-side{border:2px solid color-mix(in srgb,var(--n7-accent) 18%,var(--n7-line))}
.n7-rp-side .n7-input{width:100%}
/* the two progress blocks: colour by progress, as today (green complete, amber from 25%, red below) */
.n7-rp-heroes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.n7-rp-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--n7-r-block);padding:18px 20px;color:#fff;display:flex;flex-direction:column;gap:2px;min-height:140px;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.n7-rp-hero:hover{transform:translateY(-3px)}
.n7-rp-hero.ok{background:#117A5E} .n7-rp-hero.mid{background:#C98500} .n7-rp-hero.low{background:#B83A2E}
.n7-rp-hero::before{content:"";position:absolute;z-index:-1;width:190px;height:190px;border-radius:50%;right:-50px;top:-70px;background:rgba(255,255,255,.14);animation:n7bob 10s ease-in-out infinite}
.n7-rp-hero .v{font:900 42px/1.05 var(--n7-disp);letter-spacing:-1.3px;font-variant-numeric:tabular-nums}
.n7-rp-hero .v small{font-size:19px;font-weight:800;opacity:.85;letter-spacing:0}
.n7-rp-hero .lab{font-size:14px;font-weight:600}
.n7-rp-hero .bar{margin-top:auto;height:10px;border-radius:10px;background:rgba(255,255,255,.25);overflow:hidden}
.n7-rp-hero .bar i{display:block;height:100%;width:var(--p);border-radius:10px;background:#fff;animation:n7grow 1.2s .2s cubic-bezier(.2,.8,.2,1) both}
.n7-rp-hero .pc{font-size:12px;opacity:.85}
/* one card per nursery, folded with a tap (details/summary), two across */
.n7-rp-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.n7-rp-nbox{background:#fff;border:2px solid var(--n7-line);border-radius:var(--n7-r-card);overflow:hidden;animation:n7rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 30ms)}
.n7-rp-nbox.warn{border-color:color-mix(in srgb,var(--n7-red) 35%,var(--n7-line))}
.n7-rp-nbox.warn .n7-code{background:var(--n7-red)}
.n7-rp-nbox.done{border-color:color-mix(in srgb,var(--n7-green) 40%,var(--n7-line))}
.n7-rp-nbox > summary{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;background:color-mix(in srgb,var(--n7-ground) 70%,#fff)}
.n7-rp-nbox > summary::-webkit-details-marker{display:none}
.n7-rp-nbox .nn{font-weight:600;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n7-rp-nbox .r{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px;flex:none}
.n7-rp-nbox .chev{color:var(--n7-ink45);transition:transform .25s}
.n7-rp-nbox:not([open]) .chev{transform:rotate(-90deg)}
.n7-rp-bc{padding:12px 14px 14px;display:grid;gap:10px}
.n7-rp-bc hr{border:0;border-top:1px dashed var(--n7-line);margin:2px 0}
.n7-rp-batch{display:grid;gap:7px}
.n7-rp-batch .bh{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center}
.n7-rp-batch .bh h4{margin:0;font:800 15px var(--n7-disp)}
.n7-rp-dc{display:flex;gap:5px;flex-wrap:wrap}
.n7-rp-dc span{font:600 11.5px var(--n7-body);border-radius:999px;padding:2px 9px;background:var(--n7-line2);color:var(--n7-ink45)}
.n7-rp-dc span.n{background:#FDE6DE;color:#A8442A}
.n7-rp-alert{background:var(--n7-red-s);color:var(--n7-red);border-radius:10px;padding:7px 10px;font-size:12.5px;font-weight:500}
.n7-rp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.n7-rp-ok{font-size:12.5px;color:var(--n7-green);font-weight:600}
.n7-rp-xl{font-size:12px;font-weight:600;color:var(--n7-accent-ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.n7-rp-detail{overflow:hidden;border-radius:12px}
body.n7-on .n7-rp .reval{border:2px solid var(--n7-line);background:#fff;border-radius:999px;padding:1px 9px;font:600 11.5px var(--n7-body);color:var(--n7-ink70);min-height:26px;cursor:pointer}
body.n7-on .n7-rp .reval.ok{background:var(--n7-green-s);border-color:var(--n7-green-s);color:var(--n7-green)}
body.n7-on .n7-rp .reval.bad{background:var(--n7-red-s);border-color:var(--n7-red-s);color:var(--n7-red)}
/* review sections */
.n7-rp-sec .n7-table td{vertical-align:middle}
.n7-rp-prow{cursor:pointer}
.n7-rp-rej{color:var(--n7-red);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-size:12.5px}
.n7-rp-plus{color:var(--n7-green)} .n7-rp-minus{color:var(--n7-red)}
.n7-rp-pdet{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;padding:6px 2px}
.n7-rp-pdet label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n7-ink45)}
.n7-rp-att{flex-basis:100%}
@keyframes n7grow{from{width:0}}
/* tablet and phone: the filter slides in from the right behind "Filters · N" */
@media (max-width:1000px){
  .n7-rp-body{grid-template-columns:minmax(0,1fr)}
  .n7-rp-fbtn{display:inline-flex}
  .n7-rp-side{position:fixed;top:0;bottom:0;right:0;width:min(340px,90vw);z-index:var(--n7-z-sheet);border-radius:var(--n7-r-sheet) 0 0 var(--n7-r-sheet);overflow:auto;
    transform:translateX(104%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s;box-shadow:-14px 0 30px rgba(0,0,0,.14)}
  .n7-rp.fopen .n7-rp-side{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .n7-rp-done{display:flex;justify-content:center;width:100%}
  .n7-rp.fopen .n7-rp-shade{display:block;position:fixed;inset:0;z-index:calc(var(--n7-z-sheet) - 1);background:rgba(20,17,14,.32)}
}
@media (max-width:760px){
  .n7-rp-heroes,.n7-rp-boxes{grid-template-columns:1fr}
  .n7-rp-hero .v{font-size:36px}
}

/* chips and pills on hover (Asa, 2 Oct 2026: "hover effect on chips is wrong"): the app's old rule paints EVERY button
   dark green on hover, so a pill showed green text on dark green. Every chip-like button in the new look says what its
   hover is, so the old rule never shows through. */
body.n7-on .n7-pill:hover{background:#fff;color:var(--n7-accent-ink);border-color:var(--n7-accent)}
body.n7-on .n7-pill.on,body.n7-on .n7-pill.on:hover{background:var(--n7-accent);color:#fff;border-color:var(--n7-accent)}
body.n7-on .n7-pill.on:hover{background:var(--n7-accent-ink);border-color:var(--n7-accent-ink)}
body.n7-on .n7-rp .reval:hover{background:var(--n7-tint);color:var(--n7-accent-ink);border-color:var(--n7-tint)}
body.n7-on .n7-rp .reval.ok:hover{background:#CDEFE2;color:var(--n7-green);border-color:#CDEFE2}
body.n7-on .n7-rp .reval.bad:hover{background:#F1CACA;color:var(--n7-red);border-color:#F1CACA}
body.n7-on .n7-chip:hover{background:color-mix(in srgb,var(--n7-tint) 70%,#fff);color:var(--n7-accent-ink)}
/* the Roster Panel filter, the Signals way: a header with Clear all, labelled pill rows, one line saying what it applies to */
.n7-rp-side{gap:14px}
.n7-rp-sideh{justify-content:space-between}
body.n7-on .n7-rp-clear{border:0;background:none;padding:0;color:var(--n7-ink45);font:500 12px var(--n7-body);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
body.n7-on .n7-rp-clear:hover{background:none;color:var(--n7-ink)}
.n7-rp-side .n7-pill{font-size:12.5px;padding:4px 11px;min-height:32px}

/* ══ PAGE · Nursery Portal › View Roster (Picture book) — the grid is the hero ═══════════════════════════════════
   renderRosterView() draws the slim band when n7On(); applyRoster() and the Super Filter are unchanged and restyled
   here. Phone: the grid swipes sideways with the name pinned, Ref month / Show slide in from the right, and the edit or
   add row rises from the bottom as a sheet (it stays the same row, so its save and wiring never change). */
body.n7-on .n7-np-head h2{font:900 21px/1.2 var(--n7-disp);letter-spacing:-.4px}
body.n7-on .n7-np-head #np_nur{border:2px solid var(--n7-line);border-radius:var(--n7-r-btn);padding:5px 10px;font-weight:600;min-height:34px}
body.n7-on .n7-np-sub{margin:2px 0 6px;font-size:12px;color:var(--n7-ink45)}
body.n7-on .monthsw{background:var(--n7-tint);border-radius:999px;padding:3px}
body.n7-on .msw{border-radius:999px;color:var(--n7-accent-ink);font-weight:600;padding:5px 12px}
body.n7-on .msw:hover:not(.on){background:color-mix(in srgb,var(--n7-tint) 40%,#fff);color:var(--n7-accent-ink)}
body.n7-on .msw.on,body.n7-on .msw.on:hover{background:var(--n7-accent);color:#fff}
.n7-rg{display:grid;gap:10px;font-family:var(--n7-body)}
.n7-rg-top{border-width:2px;border-color:color-mix(in srgb,var(--n7-accent) 14%,var(--n7-line))}
.n7-rg-q{width:220px;min-height:32px;padding:3px 12px}
.n7-rg-fp{display:inline-flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.n7-rg-f{display:inline-flex;align-items:center;gap:6px}
.n7-rg-f .n7-pill{min-height:26px;padding:0 9px;font-size:11.5px}
.n7-rg-fph,.n7-rg-fbtn,.n7-rg-shade{display:none}
/* the grid */
body.n7-on .n7-rg-grid{border:2px solid var(--n7-line);border-radius:var(--n7-r-card);padding:0;margin:0;max-height:max(520px,calc(100vh - 250px));overflow:auto;position:relative}
body.n7-on .n7-rg-grid table.grid{font-size:12.5px;border-collapse:separate;border-spacing:0}
body.n7-on .n7-rg-grid table.grid th,body.n7-on .n7-rg-grid table.grid td{border-bottom:1px solid var(--n7-line2)}
body.n7-on .n7-rg-grid table.grid thead th{background:#FBFAF6;border-bottom:2px solid var(--n7-line);padding:7px 9px}
body.n7-on .n7-rg-grid table.grid th.sticky,body.n7-on .n7-rg-grid table.grid td.sticky{box-shadow:6px 0 8px -8px rgba(0,0,0,.28);min-width:170px}
body.n7-on .n7-rg-grid table.grid th.day{background:#FBFAF6;font-size:10px;color:var(--n7-ink45)}
body.n7-on .n7-rg-grid table.grid th.day .dnum{font-size:12px;font-weight:600;color:var(--n7-ink)}
body.n7-on .n7-rg-grid table.grid th.day.weekend{background:#F1EEE4}
body.n7-on .n7-rg-grid td.att.yes{background:transparent;color:var(--n7-green);font-weight:800}
body.n7-on .n7-rg-grid td.att.no{background:transparent}
body.n7-on .n7-rg-grid td.att.weekend{background:#F3F1EA}
body.n7-on .n7-rg-grid table.grid td.att.yes.frozen{background:#F7F6F2;color:color-mix(in srgb,var(--n7-green) 70%,#fff)}
body.n7-on .n7-rg-grid table.grid td.att.no.frozen{background:#F7F6F2}
body.n7-on .n7-rg-grid tbody tr:hover td{background:#FCFBF7}
body.n7-on .n7-rg-grid tbody tr:hover td.att.weekend{background:#EFECE3}
/* Super Filter headings and their pop-over */
body.n7-on .colf-b{font:600 11px var(--n7-body);letter-spacing:.04em;text-transform:uppercase;color:var(--n7-ink45);padding:3px 6px;border-radius:8px}
body.n7-on .colf-b::after{content:"▾";font-size:9px;opacity:.6}
body.n7-on .colf-b:hover{background:var(--n7-tint);color:var(--n7-accent-ink)}
body.n7-on .colf-b.on,body.n7-on .colf-b.on:hover{background:var(--n7-accent);color:#fff}
body.n7-on .colf-b.on .colf-n{background:#fff;color:var(--n7-accent-ink)}
body.n7-on .colf-b.on .car{color:#fff}
body.n7-on .cfp{border-radius:var(--n7-r-card);border:2px solid var(--n7-line);box-shadow:0 18px 40px rgba(0,0,0,.18);padding:10px;font-family:var(--n7-body)}
body.n7-on .cfp .srt button{border-radius:10px;border:2px solid var(--n7-line);background:#fff;font-weight:600}
body.n7-on .cfp .srt button:hover{background:var(--n7-tint);border-color:var(--n7-accent);color:var(--n7-accent-ink)}
body.n7-on .cfp-q{border:2px solid var(--n7-line);border-radius:10px;padding:7px 10px}
body.n7-on .cfo{border-radius:9px}
body.n7-on .cfo:hover{background:var(--n7-tint);color:var(--n7-accent-ink)}
body.n7-on .cfo.on{background:var(--n7-accent);color:#fff}
body.n7-on .cfo.on .n{color:#fff}
body.n7-on .colf-chips{margin:0}
body.n7-on .fchip{background:var(--n7-tint);color:var(--n7-accent-ink);border:0;border-radius:999px;font-weight:600;padding:3px 10px}
body.n7-on .fchip-clr:hover{background:none;color:var(--n7-ink)}
/* row parts */
body.n7-on .statustog{border-radius:999px;font-weight:600;padding:2px 11px}
body.n7-on .statustog.on,body.n7-on .statustog.on:hover{background:var(--n7-green-s);color:var(--n7-green)}
body.n7-on .statustog.off,body.n7-on .statustog.off:hover{background:#ECEBE6;color:var(--n7-ink45)}
body.n7-on .notechip{background:var(--n7-amber-s);border:0;border-radius:8px;color:#7A5200}
body.n7-on .n7-rg-grid tr.addstrip td{background:#FFFBEA}
body.n7-on .n7-rg-grid tr.addstrip input,body.n7-on .n7-rg-grid tr.addstrip select{border:2px solid #EDE1B5;border-radius:8px}
body.n7-on .dup-drawer.open{border:2px solid var(--n7-amber-s);border-radius:var(--n7-r-card);background:#fff;margin:0}
@media (max-width:760px){
  .n7-lg{display:none}
  .n7-rg-q{flex:1;width:auto;min-width:0}
  .n7-rg-fbtn{display:inline-flex}
  .n7-rg-top .n7-right{margin-left:0;width:100%}
  .n7-rg-top .n7-right .n7-btn{flex:1;justify-content:center}
  /* Ref month and Show slide in from the right */
  .n7-rg-fp{position:fixed;top:0;bottom:0;right:0;width:min(320px,88vw);z-index:var(--n7-z-sheet);background:#fff;flex-direction:column;align-items:stretch;gap:16px;
    padding:16px;border-radius:var(--n7-r-sheet) 0 0 var(--n7-r-sheet);box-shadow:-14px 0 30px rgba(0,0,0,.14);overflow:auto;
    transform:translateX(104%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s .35s}
  .n7-rg.fopen .n7-rg-fp{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .n7-rg-fph{display:flex;align-items:center;justify-content:space-between;font:800 15px var(--n7-disp)}
  .n7-rg-f{flex-direction:column;align-items:flex-start}
  .n7-rg-f .n7-pill{min-height:34px;padding:0 12px;font-size:12.5px}
  .n7-rg.fopen .n7-rg-shade{display:block;position:fixed;inset:0;z-index:calc(var(--n7-z-sheet) - 1);background:rgba(20,17,14,.32)}
  body.n7-on .n7-rg-grid{max-height:calc(100vh - 230px)}
  /* the edit / add row rises as a sheet — the same row, so Save and its wiring are unchanged */
  body.n7-on .n7-rg:has(tr[data-editrow])::before{content:"";position:fixed;inset:0;z-index:calc(var(--n7-z-sheet) - 1);background:rgba(20,17,14,.32)}
  body.n7-on .n7-rg-grid tr[data-editrow]{position:fixed;left:0;right:0;bottom:0;z-index:var(--n7-z-sheet);display:flex;flex-wrap:wrap;gap:4px;max-height:86vh;overflow:auto;
    background:#fff;border-radius:var(--n7-r-sheet) var(--n7-r-sheet) 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 30px rgba(0,0,0,.18)}
  body.n7-on .n7-rg-grid tr[data-editrow] td{display:block;position:static;width:100%;min-width:0;border:0;padding:4px 0;background:#fff!important;box-shadow:none;max-width:none!important}
  body.n7-on .n7-rg-grid tr[data-editrow] td::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--n7-ink45);margin-bottom:3px}
  body.n7-on .n7-rg-grid tr[data-editrow] td:empty{display:none}
  body.n7-on .n7-rg-grid tr[data-editrow] td input:not([type=checkbox]),body.n7-on .n7-rg-grid tr[data-editrow] td select{width:100%!important;min-height:42px;font-size:14px!important}
  body.n7-on .n7-rg-grid tr[data-editrow] td.att{width:auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;height:52px;border:1px solid var(--n7-line2);border-radius:10px;padding:2px}
  body.n7-on .n7-rg-grid tr[data-editrow] td.att::before{margin:0;letter-spacing:0;font-size:11px;color:var(--n7-ink)}
  body.n7-on .n7-rg-grid tr[data-editrow] td.n7-rg-saverow{order:-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  body.n7-on .n7-rg-grid tr[data-editrow] td.n7-rg-saverow::before{display:none}
}
/* phone: the grid starts high — the header and band compress to the essentials */
@media (max-width:760px){
  body.n7-on .n7-np-sub{display:none}
  body.n7-on .n7-np-head{gap:6px!important}
  body.n7-on .n7-np-head h2{font-size:18px}
  body.n7-on .n7-np-head label{flex:1;min-width:0;font-size:0!important}
  body.n7-on .n7-np-head #np_nur{min-width:0!important;width:100%;font-size:13px}
  body.n7-on .monthsw{display:flex;width:100%}
  body.n7-on .msw{flex:1 1 0;min-width:0;padding:5px 4px;font-size:11.5px;white-space:normal;line-height:1.15}
  .n7-rg-top{padding:6px 8px;gap:4px}
  .n7-rg-top .n7-top-row:first-child .n7-meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:11px}
  .n7-rg-top .n7-top-row:last-child span:nth-child(2){display:none}
  .n7-rg-top .n7-top-row + .n7-top-row{padding-top:4px}
}
@media (max-width:760px){
  .n7-rg-top .n7-top-row:nth-child(2) > .n7-meta{flex-basis:100%;font-size:11.5px}
  .n7-rg-top .n7-right{width:auto;margin-left:0;flex-wrap:nowrap}
  .n7-rg-top .n7-right .n7-btn{flex:none;padding:3px 9px;min-height:32px}
  .n7-rg-q{min-height:32px}
}

/* ══ SHARED · the range calendar (n7RangeCal) and the multi-picker (n7MultiPick) ═══════════════════════════════ */
.n7-cal{border:2px solid var(--n7-line);border-radius:12px;padding:9px;background:#fff;width:268px;max-width:100%;font-family:var(--n7-body)}
.n7-cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:13px}
body.n7-on .n7-cal-nav{border:1px solid var(--n7-line);background:#fff;color:var(--n7-ink70);border-radius:8px;width:26px;height:26px;padding:0;display:grid;place-items:center;font-size:15px;line-height:1}
body.n7-on .n7-cal-nav:hover{background:var(--n7-tint);color:var(--n7-accent-ink);border-color:var(--n7-accent)}
.n7-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.n7-cal-w{font-size:9.5px;font-weight:600;color:var(--n7-ink45);text-align:center;padding-bottom:3px}
body.n7-on .n7-cal-d{border:0;background:none;color:var(--n7-ink);border-radius:8px;height:30px;padding:0;font:600 12px var(--n7-body)}
body.n7-on .n7-cal-d.we{color:var(--n7-ink45);font-weight:400}
body.n7-on .n7-cal-d.now{text-decoration:underline;text-underline-offset:2px}
body.n7-on .n7-cal-d:hover{background:var(--n7-tint);color:var(--n7-accent-ink)}
body.n7-on .n7-cal-d.mid,body.n7-on .n7-cal-d.mid:hover{background:var(--n7-tint);color:var(--n7-accent-ink);border-radius:0}
body.n7-on .n7-cal-d.on,body.n7-on .n7-cal-d.on:hover{background:var(--n7-accent);color:#fff}
.n7-cal-f{margin-top:7px;padding-top:6px;border-top:1px solid var(--n7-line2);font-size:12px;color:var(--n7-ink70)}
.n7-cal-hint{color:var(--n7-ink45)}
.n7-mp{position:fixed;inset:0;z-index:var(--n7-z-sheet);font-family:var(--n7-body)}
.n7-mp-shade{position:absolute;inset:0;background:transparent}
.n7-mp-p{position:absolute;width:320px;max-height:min(460px,80vh);display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid var(--n7-line);border-radius:var(--n7-r-card);
  box-shadow:0 18px 40px rgba(0,0,0,.18);padding:12px;animation:n7rise .2s both}
.n7-mp-h{display:flex;align-items:center;justify-content:space-between;font:800 15px var(--n7-disp)}
.n7-mp-r{display:flex;gap:6px;align-items:center}
.n7-mp-r .n7-meta{margin-left:auto}
.n7-mp-l{overflow:auto;display:grid;gap:2px;min-height:0}
body.n7-on .n7-mp-o{display:flex;gap:9px;align-items:center;border:0;background:none;color:var(--n7-ink);text-align:left;border-radius:9px;padding:7px 8px;font:500 13px var(--n7-body)}
body.n7-on .n7-mp-o:hover{background:var(--n7-tint);color:var(--n7-accent-ink)}
.n7-mp-o i{width:18px;height:18px;border-radius:5px;border:2px solid var(--n7-line);display:grid;place-items:center;font-style:normal;font-size:11px;flex:none}
.n7-mp-o.on i{background:var(--n7-accent);border-color:var(--n7-accent);color:#fff}
@media (max-width:760px){
  .n7-mp-shade{background:rgba(20,17,14,.32)}
  .n7-mp-p{top:0;bottom:0;right:0;left:auto!important;width:min(340px,90vw);max-height:none;border-radius:var(--n7-r-sheet) 0 0 var(--n7-r-sheet);animation:n7slide .3s both}
}

/* ══ PAGE · Leela's Kitchen › Assignments (Picture book) — mmTopN7(); the table and its colour chips are unchanged ══ */
.n7-mm-asg{margin-bottom:14px}
.n7-mm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 22px;align-items:start}
.n7-mm-dates{grid-row:span 2}
.n7-mm-dates #n7_mm_cal{margin-top:8px}
.n7-mm-go{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.n7-mm-go #mm_asg_res{flex:1;min-width:0;font-size:13px}
.n7-chip i{cursor:pointer}
.n7-mm-f{margin-bottom:10px}
.n7-mm-f .n7-top-row{gap:8px 12px;align-items:center}
.n7-mm-f .n7-fkey{margin-left:4px}
.n7-mm-f .n7-pill{min-height:28px;padding:0 10px;font-size:12px}
.n7-mm-seg{display:inline-flex;gap:2px;background:var(--n7-line2);border-radius:999px;padding:2px}
.n7-mm-seg .n7-pill{border:0}
.n7-mm-count{color:var(--n7-accent-ink);font:800 14px var(--n7-disp)}
@media (max-width:760px){
  .n7-mm-grid{grid-template-columns:1fr}
  .n7-mm-dates{grid-row:auto}
  .n7-mm-f .n7-top-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .n7-mm-f .n7-top-row::-webkit-scrollbar{display:none}
  .n7-mm-f .n7-fvals{flex-wrap:nowrap}
  .n7-mm-f .n7-pill{white-space:nowrap}
}