/* JenPlanner. Original design system: friendly pastel stationery feel, mobile first. */
:root{
  --ink:#332f3b; --ink-soft:#6c6678; --paper:#fffdfa; --bg:#eee9f6;
  --accent:#7c6bb8; --accent-deep:#5c4a9e; --mint:#79c7a2; --coral:#e88a8a;
  --sun:#f2c14e; --sky:#7aa7d9; --line:#e5dff0; --radius:14px;
  --tap:44px;
}
*{box-sizing:border-box}
/* No global smooth scrolling: it turns every programmatic scroll into an
   interruptible animation, which broke long month-rail jumps entirely. */
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer;border:0;background:none;min-height:var(--tap)}
input,textarea,select{font:inherit;color:inherit}
.boot{padding:40vh 20px 0;text-align:center;color:var(--ink-soft)}

/* ---------- Landing ---------- */
.landing{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 60px}
/* Cover / login hero: Jen & Jon's own dog artwork + dynamic year + customizable grade badge */
.cover-hero{width:min(560px,96vw);border-radius:16px;position:relative;overflow:hidden;margin:4vh auto 0;
  box-shadow:0 12px 32px rgba(92,74,158,.22);line-height:0}
.cover-full{display:block;width:100%;height:auto}
/* dynamic grade badge overlays the artwork's baked badge, only for non-3rd-grade teachers */
.grade-cover{position:absolute;left:2%;bottom:3%;width:31%;min-height:28%;background:#fff;border:3px solid #2d2a33;
  border-radius:12px;transform:rotate(-3deg);box-shadow:2px 3px 0 rgba(0,0,0,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5% 1%;line-height:1}
.grade-cover span{font-family:"Marker Felt","Comic Sans MS",cursive;color:#2d2a33;font-size:clamp(.8rem,3.2vw,1.15rem)}
.grade-cover b{font-family:"Marker Felt","Comic Sans MS",cursive;color:var(--coral);text-transform:capitalize;
  font-size:clamp(1.1rem,5vw,1.7rem);text-align:center;line-height:1.05;margin-top:2px}
.pagecard .cover-hero{margin:0;width:100%}
.auth{width:min(420px,94vw);background:var(--paper);border-radius:var(--radius);margin-top:22px;
  padding:22px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.auth h2{margin:0 0 4px;font-size:1.15rem}
.auth p.sub{margin:0 0 16px;color:var(--ink-soft);font-size:.88rem}
.field{margin:10px 0}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:4px}
.field input{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;min-height:var(--tap)}
.field input:focus{outline:2px solid var(--accent);border-color:transparent}
.btn{display:block;width:100%;padding:13px;border-radius:12px;background:var(--accent);color:#fff;font-weight:700;margin-top:14px}
.btn:active{background:var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.authswitch{text-align:center;margin-top:12px;font-size:.85rem;color:var(--ink-soft)}
.authswitch a{color:var(--accent);font-weight:700;text-decoration:none}
.formerr{color:#b23b3b;font-size:.85rem;margin-top:8px;min-height:1.2em}

/* ---------- App chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex;align-items:center;gap:6px;padding:6px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.topbar::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;padding:8px 13px;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap}
.tab{background:var(--accent-deep)} /* fallback: a tab must never be invisible */
.tab[data-s="all"]{background:var(--ink)}
.tab[data-s="classinfo"]{background:var(--mint)}.tab[data-s="grades"]{background:var(--coral)}
.tab[data-s="attendance"]{background:var(--sky)}.tab[data-s="data"]{background:var(--sun);color:var(--ink)}
.tab[data-s="planning"]{background:var(--accent)}.tab[data-s="todo"]{background:#67b7ae}
.tab[data-s="notes"]{background:#d98ab5}.tab[data-s="calendars"]{background:#8f7ad1}
.tab.settingsbtn{background:var(--ink);margin-left:auto}
.monthrail{position:fixed;right:0;top:64px;bottom:0;z-index:39;display:flex;flex-direction:column;gap:2px;
  padding:6px 2px;overflow-y:auto;background:transparent}
.monthrail button{writing-mode:vertical-rl;font-size:.62rem;font-weight:700;color:var(--accent-deep);
  background:var(--paper);border-radius:8px 0 0 8px;padding:8px 4px;min-height:0;box-shadow:-1px 1px 3px rgba(0,0,0,.12)}
.monthrail button.now{background:var(--accent);color:#fff}
main.pages{max-width:840px;margin:0 auto;padding:10px 30px 80px 10px}
.tab.viewtab.active{outline:2px solid #fff;box-shadow:0 0 0 2px var(--accent-deep)}
.viewbar{position:sticky;top:52px;z-index:37;display:flex;align-items:center;gap:8px;padding:6px 12px;
  background:rgba(255,253,250,.96);backdrop-filter:blur(4px);box-shadow:0 1px 4px rgba(0,0,0,.06);font-size:.82rem}
.viewbar .viewname{font-weight:800;color:var(--accent-deep)}
.viewbar .spacer{flex:1}
.viewbar .dot-sep{color:var(--ink-soft)}
.linkbtn{background:none;color:var(--accent);font-weight:700;font-size:.82rem;min-height:0;padding:4px 2px}
.linkbtn:active{color:var(--accent-deep)}
/* collapse */
.pagecollapse{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;
  border-radius:8px;background:#f1edfa;color:var(--accent-deep);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pagecollapse svg{transition:transform .15s}
.pagecard.collapsed .pagecollapse svg{transform:rotate(-90deg)}
.pagecard.collapsed{min-height:0}
.pagecard.collapsed .pagebody{display:none}
.pagecard.collapsed .ptitle{margin-bottom:0}
.phtitle{display:block;font-weight:700;color:var(--accent-deep);padding:2px 76px 2px 2px}

/* ---------- Page cards ---------- */
/* NOTE: no content-visibility here. It makes off-screen page heights permanently
   unstable (estimates), which made month-rail jumps land a month off. Lazy
   hydration alone keeps first paint fast; once hydrated, geometry is final. */
.pagecard{background:var(--paper);border-radius:var(--radius);box-shadow:0 3px 10px rgba(0,0,0,.07);
  margin:16px 0;padding:14px;min-height:220px;scroll-margin-top:96px}
.pagecard h3.ptitle{margin:2px 0 12px;color:var(--accent-deep);font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.pagecard h3.ptitle small{color:var(--ink-soft);font-weight:400;font-size:.72rem}
.divider-card{display:flex;flex-direction:column;min-height:0;overflow:hidden;
  background:#e3d7fc;color:#fff;border-radius:var(--radius);margin:22px 0;padding:0}
.divider-dogs{display:block;width:100%;height:auto}
.divider-card .dv-title{letter-spacing:.18em;font-size:1.3rem;text-align:center;margin:0;padding:18px 12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep))}
/* section header bar matches its nav tab color */
.sec-classinfo .dv-title{background:var(--mint)}
.sec-grades .dv-title{background:var(--coral)}
.sec-attendance .dv-title{background:var(--sky)}
.sec-data .dv-title{background:var(--sun);color:var(--ink)}
.sec-planning .dv-title{background:var(--accent)}
.sec-todo .dv-title{background:#67b7ae}
.sec-notes .dv-title{background:#d98ab5}
.sec-calendars .dv-title{background:#8f7ad1}
.placeholder{min-height:200px;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:.85rem}

/* editable grids */
.egrid{width:100%;border-collapse:collapse;font-size:.85rem}
.egrid th{background:#f4f0fb;color:var(--accent-deep);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;padding:7px 6px;text-align:left;border:1px solid var(--line)}
.egrid td{border:1px solid var(--line);padding:0;min-width:70px}
.egrid td .cellinput{width:100%;border:0;background:transparent;padding:9px 8px;min-height:var(--tap);resize:none;display:block}
.egrid td .cellinput:focus{outline:2px solid var(--accent);background:#faf8ff}
.gridwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* labeled boxes (emergency etc.) */
.boxes{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:640px){.boxes{grid-template-columns:1fr 1fr}}
.lbox label{font-size:.78rem;font-weight:700;color:var(--accent-deep)}
.lbox textarea{width:100%;min-height:84px;border:1.5px solid var(--line);border-radius:10px;padding:9px;background:#fff}

/* month calendar */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:.72rem}
.mcal .dow{text-align:center;font-weight:700;color:var(--accent-deep);padding:4px 0;font-size:.66rem}
.mcal .mday{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:74px;padding:3px;position:relative}
.mcal .mday.out{opacity:.35}
.mcal .mday .dnum{font-weight:700;font-size:.7rem;color:var(--ink-soft);cursor:pointer;display:inline-block;
  min-width:20px;min-height:20px;border-radius:6px;padding:1px 4px}
.mcal .mday .dnum:hover{background:var(--soft);color:var(--accent-deep)}
.mcal .mday .dnum:active{background:var(--accent);color:#fff}
.mcal .mday.today{outline:2px solid var(--accent)}
.chip{display:block;font-size:.6rem;font-weight:700;border-radius:6px;padding:1px 4px;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.no_school,.chip.break{background:#fde2e2;color:#a12626}
.chip.early_release{background:#fdeed9;color:#a35c14}
.chip.milestone{background:#e0f0e1;color:#276b2d}
.chip.event{background:#e2ecfa;color:#274f8a}
.chip.userevent{background:#efe6fb;color:#5c4a9e}
.chip.bday{background:#ffe6f2;color:#b03a72}
.chip.bday .cake{vertical-align:-1px;margin-right:2px}
.bdaylist{margin-top:6px}
.bmonth{margin:14px 0 4px;color:var(--accent-deep);font-size:.9rem;border-bottom:1px solid var(--line);padding-bottom:3px}
.brow{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px dashed var(--line);font-size:.9rem}
.brow .cake{flex:0 0 auto}
.brow b{min-width:96px}
.brow .bname{color:var(--ink)}
.chip .x{float:right;opacity:.6;padding:0 2px}
.addevt{position:absolute;bottom:1px;right:3px;color:var(--accent);font-weight:800;font-size:.85rem;opacity:.5;min-height:0;padding:2px 4px}
.mday:hover .addevt,.mday:focus-within .addevt{opacity:1}

/* weekly lessons */
.weekgrid{display:grid;gap:8px}
.wk-day{border:1.5px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.wk-day .dhead{font-weight:800;color:var(--accent-deep);font-size:.85rem;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.wk-day .dhead .marks{font-weight:400}
.slot{margin:7px 0}
.slot .shead{font-size:.7rem;font-weight:700;color:var(--ink-soft);display:flex;justify-content:space-between}
.slot textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;min-height:52px;background:#fdfcff;resize:vertical}
.slot textarea:focus{outline:2px solid var(--accent)}
.slot .attachrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.att{font-size:.66rem;background:#f1edfa;color:var(--accent-deep);border-radius:8px;padding:2px 7px;text-decoration:none;display:inline-flex;gap:4px;align-items:center}
.att button{min-height:0;padding:0 2px;opacity:.6}
.addatt{font-size:.66rem;color:var(--accent);font-weight:700;min-height:0;padding:2px 6px}
.dayacts{margin-left:auto;display:inline-flex;gap:6px}
.dayact{font-size:.64rem;font-weight:700;color:var(--accent-deep);background:#f1edfa;border-radius:8px;
  padding:3px 8px;min-height:24px}
.dayact:active{background:var(--accent);color:#fff}
.searchbtn{background:#4a4458}
.search-results{max-height:320px;overflow-y:auto;margin-top:8px}
.sres{display:block;width:100%;text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);min-height:0}
.sres:active{background:var(--soft)}
.sres .rtype{font-size:.64rem;font-weight:800;color:#fff;border-radius:6px;padding:1px 6px;margin-right:6px}
.sres .rtype.lesson{background:var(--accent)}.sres .rtype.event{background:var(--sky)}.sres .rtype.cell{background:var(--mint)}
.sres .rwhere{font-weight:700;font-size:.78rem;color:var(--accent-deep)}
.sres .rsnip{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px}
.saving button{background:none;color:#ffd75e;font-weight:800;min-height:0;padding:0 0 0 10px;font-size:.75rem}
@media(min-width:900px){
  .weekgrid.desktop{display:block;overflow-x:auto}
}

/* year at a glance */
.yaag{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
@media(min-width:760px){.yaag{grid-template-columns:repeat(3,1fr)}}
.mini{border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.mini h4{margin:0 0 8px;font-size:1.05rem;color:var(--accent-deep);text-align:center;font-weight:800}
.mini .mg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.mini .mg>span:nth-child(-n+7){font-size:.7rem;font-weight:800;color:var(--ink-soft);padding-bottom:2px}
.mday-mini{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.9rem;
  border-radius:8px;cursor:pointer;position:relative;user-select:none;transition:background .12s;min-height:30px}
.mday-mini:hover{background:var(--soft)}
.mday-mini:active{background:var(--accent);color:#fff}
.mday-mini.mark{background:#fde2e2;color:#a12626;font-weight:700}
.mday-mini.tdy{outline:2px solid var(--accent);font-weight:800}
.mday-mini.dot::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--accent)}
.mday-mini.mark.dot::after{background:#a12626}
@keyframes dayflash{0%,100%{background:transparent}30%{background:#fff3c4}}
.wk-day.day-flash{animation:dayflash 1.4s ease;outline:2px solid var(--sun);border-radius:12px}

/* checklist */
.check{display:flex;align-items:center;gap:10px;border-bottom:1px dashed var(--line);padding:4px 0}
.check input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.check input[type=text]{flex:1;border:0;padding:10px 4px;background:transparent;min-height:var(--tap)}

/* lined notes */
.lines textarea{width:100%;min-height:420px;border:0;background:repeating-linear-gradient(#fff 0 27px,#e8e3f2 27px 28px);line-height:28px;padding:0 6px;font-size:.95rem;resize:vertical}
.lines textarea:focus{outline:none}

/* upload + toolbars */
.toolrow{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.toolrow .btn{width:auto;padding:9px 14px;margin:0;font-size:.8rem}
.hint{font-size:.75rem;color:var(--ink-soft)}

/* modal */
.modal-wrap{position:fixed;inset:0;background:rgba(40,30,60,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.modal-wrap{align-items:center}}
.modal{background:var(--paper);border-radius:18px 18px 0 0;width:min(560px,100vw);max-height:88vh;overflow-y:auto;padding:18px}
@media(min-width:640px){.modal{border-radius:18px}}
.modal h3{margin:0 0 10px;color:var(--accent-deep)}
.modal .close{float:right;font-size:1.3rem;color:var(--ink-soft)}
.saving{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:.75rem;padding:6px 14px;border-radius:999px;z-index:70;opacity:0;transition:opacity .2s}
.saving.show{opacity:.92}

/* ---------- print controls ---------- */
.tab.printbtn{background:#5c8fb8}
.pagecard{position:relative}
.pagetools{position:absolute;top:8px;right:10px;z-index:5;display:flex;align-items:center;gap:6px}
.ptitle{padding-right:76px}
.pageprint,.pageshare{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:32px;
  border-radius:8px;background:#f1edfa;color:var(--accent-deep);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pageprint:active,.pageshare:active{background:var(--accent);color:#fff}
.pageshare.busy{opacity:.5;pointer-events:none}
.pagecard.capturing .pagetools,.pagecard.capturing .addevt{visibility:hidden}
.pagepick{display:none;align-items:center}
.pagepick input{width:22px;height:22px;accent-color:var(--accent)}
body.selectmode .pagepick{display:inline-flex}
body.selectmode .pageprint{display:none}
body.selectmode .pagecard{outline:2px dashed transparent}
body.selectmode .pagecard:has(.pickbox:checked){outline:2px solid var(--accent);outline-offset:2px}
.print-actionbar{position:sticky;top:52px;z-index:38;display:flex;align-items:center;gap:12px;justify-content:center;
  background:var(--ink);color:#fff;padding:10px;flex-wrap:wrap}
.print-actionbar[hidden]{display:none !important}
.print-actionbar #pickcount{font-size:.85rem;font-weight:700}

@media print {
  @page { margin: 12mm; }
  .topbar,.monthrail,.saving,.print-actionbar,.pagetools,.addevt,.delevt,.delatt,.addatt,
  .uploadxlsx,.no-print,.slot .attachrow button,.check input[type=checkbox]{display:none !important}
  html,body{background:#fff !important}
  main.pages{max-width:none;margin:0;padding:0}
  .pagecard{box-shadow:none !important;border:0 !important;margin:0 !important;border-radius:0 !important;
    content-visibility:visible !important;contain:none !important;break-inside:avoid;page-break-after:always}
  textarea,input,.cellinput{border-color:#ccc !important}
  /* single page */
  body.print-one .pagecard{display:none !important}
  body.print-one .pagecard.print-target{display:block !important}
  /* selected pages */
  body.print-selected .pagecard{display:none !important}
  body.print-selected .pagecard.psel{display:block !important}
  /* whole planner = print-all: all cards show (default) */
}

/* last-year ghost view: faint, non-editable, tap to reuse */
.ghostline{margin-top:3px;padding:6px 8px;border:1px dashed var(--line);border-radius:8px;background:transparent;
  color:var(--ink-soft);opacity:.62;font-size:.78rem;font-style:italic;white-space:pre-wrap;cursor:pointer}
.ghostline::before{content:"last year: ";font-weight:700;font-style:normal;opacity:.8}
.ghostline:hover{opacity:.9;background:#faf8ff}

/* voice notes */
.att.voicenote{display:flex;align-items:center;gap:6px;max-width:100%;flex-wrap:wrap}
.att.voicenote audio{height:30px;max-width:190px}
.att.voicenote .vtxt{font-style:italic;color:var(--ink-soft);font-size:.75rem;max-width:100%}