/* iPlan front-end styles — scoped to .eplan-root (plus body-level toast/modal). */
/* Tokens taken from the Zambales ePortal theme, so the app and the site it is
   embedded in are one thing rather than two that nearly match. Names are the
   plugin's own; the values are the theme's:

     theme --paper   #F5F8FC  -> --bg
     theme --ink     #0A2540  -> --ink and --navy
     theme --gov     #0B3D91  -> --blue
     theme --gov-700 #092E6E  -> --blue-2
     theme --gov-050 #EAF0FB  -> --blue-soft
     theme --gold    #F4B31C  -> --gold
     theme --sea     #0E5F86  -> --sea, used where a second accent is wanted

   The fonts are the theme's too. It already loads Libre Franklin, Source Sans
   3 and IBM Plex Mono, so naming them here costs nothing; where the theme is
   not active the same fallbacks it uses take over, which is why the stacks are
   copied whole rather than trimmed. */
.eplan-root{
  --bg:#F5F8FC;--surface:#fff;--surface-2:#F9FBFD;--ink:#0A2540;--muted:#586A83;--faint:#8496AD;
  --line:#D9E2F0;--line-2:#E6EDF7;--navy:#0A2540;--blue:#0B3D91;--blue-2:#092E6E;--blue-soft:#EAF0FB;
  --sea:#0E5F86;
  --gold:#F4B31C;--gold-deep:#7A5B00;--gold-soft:#FEF4DA;--ok:#1E874B;--ok-bg:#E6F3EC;--warn:#A96A08;--warn-bg:#FDF0D8;--danger:#B3341F;--danger-bg:#F9E6E1;
  --serif:"Libre Franklin","Franklin Gothic Medium","Segoe UI",system-ui,sans-serif;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --shadow:0 1px 2px rgba(10,37,64,.05),0 10px 34px rgba(10,37,64,.09);
  font-family:var(--sans);color:var(--ink);line-height:1.5;
}
.eplan-root *{box-sizing:border-box}
.eplan-root h1,.eplan-root h2,.eplan-root h3,.eplan-root h4{margin:0;font-weight:600;line-height:1.25}
.eplan-root a{color:var(--blue);text-decoration:none;cursor:pointer}
.eplan-root a:hover{text-decoration:underline}
.eplan-root svg{display:block}
.eplan-root code{font-family:var(--mono);font-size:.86em;background:var(--blue-soft);color:var(--blue-2);padding:1px 5px;border-radius:5px}

.ip-shell{background:var(--bg);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ip-top{height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;
  background:linear-gradient(100deg,#08203A,#0A2540 44%,#123763);border-bottom:3px solid var(--gold)}
.ip-brand{display:flex;align-items:center;gap:9px;font-family:var(--serif)}
.ip-brand b{font-size:20px} .ip-brand .i{color:var(--gold)}
.ip-spacer{flex:1}
.ip-who{font-size:13px;color:#cbd6e8}.ip-who b{color:#fff}
.ip-burger{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;width:36px;height:36px;border-radius:9px;cursor:pointer;place-items:center}

.ip-bodyrow{display:flex;min-height:560px}
/* The nav has grown past a screen's height, so it scrolls on its own and stays
   put while the page beside it scrolls. */
.ip-side{width:230px;flex:0 0 230px;background:var(--surface);border-right:1px solid var(--line);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;align-self:flex-start;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
/* In a column flex box the children are squeezed to fit before the box
   overflows, so overflow-y:auto above had nothing to scroll: with a full menu
   the rows were compressed until their text clipped and the last entries could
   not be reached at all. Holding every child at its natural height is what
   makes the container overflow, and therefore scroll. .ip-grow keeps its
   flex-grow further down the sheet, and being a later rule of equal weight it
   keeps its flex-shrink too — which is what we want for a spacer: it pushes
   the footer down when there IS spare room and collapses to nothing when
   there is not. Do not "tidy" it into this rule. */
.ip-side>*{flex-shrink:0}
.ip-side::-webkit-scrollbar{width:8px}
.ip-side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.ip-side::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.ip-side::-webkit-scrollbar-track{background:transparent}
.ip-sgroup{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 12px 6px;font-weight:600}
.ip-nav{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;border:1px solid transparent;color:var(--ink)}
.ip-nav svg{color:var(--muted)}
.ip-nav:hover{background:var(--surface-2)}
.ip-nav.active{background:var(--blue-soft);color:var(--blue);border-color:#d3e2f4}
.ip-nav.active svg{color:var(--blue)}
.ip-grow{flex:1}
.ip-sfoot{font-size:11px;color:var(--faint);padding:10px 12px;border-top:1px solid var(--line-2)}
.ip-main{flex:1;min-width:0;padding:24px 28px 48px;background:var(--bg)}

.ip-head{margin-bottom:20px}
.ip-eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-bottom:6px}
.ip-head h1{font-family:var(--serif);font-size:27px;color:var(--navy)}
.ip-head p{color:var(--muted);margin:8px 0 0;max-width:70ch;font-size:14px}

.ip-grid{display:grid;gap:16px}.ip-grid.c3{grid-template-columns:repeat(3,1fr)}.ip-grid.c2{grid-template-columns:repeat(2,1fr)}
.ip-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.ip-card.dash{border-top:3px solid var(--blue);padding:18px 20px;display:flex;flex-direction:column}
.ip-card.dash.gold{border-top-color:var(--gold)}
.ip-card.dash h3{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--navy)}
.ip-card.dash h3 .ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue)}
.ip-card.dash.gold h3 .ic{background:var(--gold-soft);color:var(--gold-deep)}
.ip-card.dash p{color:var(--muted);font-size:13px;margin:12px 0 14px;flex:1}
.ip-card.dash .links{display:flex;flex-direction:column;gap:7px}
.ip-card.dash .links a{font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}

.ip-stats{display:flex;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.ip-stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:130px;box-shadow:var(--shadow)}
.ip-stat .n{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--navy);line-height:1}
.ip-stat .l{font-size:12px;color:var(--muted);margin-top:5px}
.ip-stat.warn .n{color:var(--warn)}.ip-stat.ok .n{color:var(--ok)}

.ip-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;font-size:14px;font-family:inherit}
.ip-btn:hover{background:var(--surface-2)}
.ip-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}.ip-btn.primary:hover{background:#1a457b}
.ip-btn.gold{background:var(--gold);border-color:var(--gold);color:#3a2c05}.ip-btn.gold:hover{background:var(--gold-deep);color:#fff}
.ip-btn.ghost{background:transparent;border-color:transparent;color:var(--blue)}.ip-btn.ghost:hover{background:var(--blue-soft)}
.ip-btn.danger{color:var(--danger)}.ip-btn.ghost.danger{color:var(--danger)}.ip-btn.danger:hover{background:var(--danger-bg)}
.ip-btn.sm{padding:6px 11px;font-size:13px;border-radius:8px}
.ip-btn:disabled{opacity:.5;cursor:not-allowed}
.ip-btn svg{width:16px;height:16px}
.ip-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:16px}
.ip-bar.end{justify-content:flex-end}

.ip-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.ip-field{margin-bottom:14px}.ip-field.wide{margin-bottom:14px}
.ip-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.ip-field label .hint{font-size:12px;color:var(--faint);font-weight:400}
.ip-inp{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);outline:none;font-size:16px;font-family:inherit;color:var(--ink)}
.ip-inp:focus{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(43,108,176,.15)}
textarea.ip-inp{resize:vertical;min-height:64px;line-height:1.45}
select.ip-inp{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%235b6675' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.ip-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ip-mapgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.ip-filters .ip-field{margin-bottom:0;min-width:150px}

.ip-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.ip-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
table.ip-data{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
table.ip-data th{background:var(--surface-2);text-align:left;padding:11px 14px;font-size:12px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
table.ip-data td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.ip-data tr:last-child td{border-bottom:none}
table.ip-data tr:hover td{background:var(--surface-2)}
.ip-code{font-family:var(--mono);font-size:12px;background:#eef2f8;color:var(--navy);padding:2px 7px;border-radius:6px;white-space:nowrap}
.ip-muted{color:var(--muted)}.ip-small{font-size:12.5px}
.ip-ul{margin:8px 0 0;padding-left:20px;font-size:13.5px;color:var(--muted)}.ip-ul li{margin:3px 0}

.ip-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;text-transform:capitalize}
.ip-pill.pending{background:#eef2f8;color:var(--muted)}
.ip-pill.approved{background:var(--ok-bg);color:var(--ok)}
/* A method pill that disagrees with its own stem. Red because the card is
   reporting a fault, not decorating a label. */
.ip-pill.bad{background:var(--danger-bg);color:var(--danger);font-weight:700}
/* ILAW lesson plan builder (DO 016 s. 2026) */
.eplan-root .ilaw-box{margin:0 0 16px}
.eplan-root .ilaw-box label{display:block;font-weight:700;font-size:13px;margin-bottom:2px}
.eplan-root .ilaw-box p{margin:0 0 6px}
.eplan-root .ilaw-prompts{margin:0 0 8px 18px;padding:0;font-size:12px;color:var(--muted)}
.eplan-root .ilaw-prompts li{margin:1px 0}
.eplan-root .ilaw-block h4{margin-bottom:2px}
.eplan-root .ilaw-rubric{width:100%;border-collapse:collapse;font-size:12.5px}
.eplan-root .ilaw-rubric th,.eplan-root .ilaw-rubric td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.eplan-root .ilaw-rubric th{background:var(--blue-soft);font-size:12px}
.eplan-root .ilaw-rubric td.c,.eplan-root .ilaw-rubric th.c{text-align:center;width:64px}
.eplan-root .ip-choices{display:flex;flex-direction:column;gap:8px}
.eplan-root .ip-btn.wide{width:100%;justify-content:flex-start;text-align:left;white-space:normal;line-height:1.35;padding:10px 12px;height:auto}
/* Backup screen: a plain count table, nothing decorative. */
.eplan-root .ip-table{width:100%;border-collapse:collapse;font-size:13px}
.eplan-root .ip-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
.eplan-root .ip-table td.n{text-align:right;font-variant-numeric:tabular-nums;width:6em}
.eplan-root .ip-table tfoot td{border-top:2px solid var(--line);border-bottom:0}
/* Data analysis */
.eplan-root .an-vars td,.eplan-root .an-vars th{font-size:12.5px}
.eplan-root .an-res th{text-align:left;width:34%;font-weight:600}
.eplan-root .an-res td.n,.eplan-root .an-res th.n{text-align:right;font-variant-numeric:tabular-nums}
.eplan-root .an-advice{margin-top:12px}
.eplan-root .an-sug{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-bottom:8px}
.eplan-root .an-reading{margin-top:12px;padding:12px 14px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 8px 8px 0}
.eplan-root .an-reading p{margin:0 0 8px;font-size:13.5px;line-height:1.55}
.eplan-root select[multiple]{min-height:120px;padding:4px}
.eplan-root .an-chart{margin:16px 0 8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.eplan-root .an-chart svg{display:block;max-width:100%;height:auto}
.eplan-root .an-chart p{margin:6px 2px 0}
.eplan-root .an-chart .ip-bar{margin-top:6px}
.eplan-root .an-role{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.eplan-root .an-role select{flex:1}
.eplan-root .an-res td.faint{opacity:.4}
.eplan-root .an-res tr.kept td{background:var(--blue-soft)}
/* A Bayes factor is the answer, not a footnote, so it is given room. */
.eplan-root .an-bf{border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:8px;padding:12px 14px;margin:0 0 12px;background:var(--card)}
.eplan-root .an-bf.strong{border-left-color:var(--gold);background:var(--gold-soft)}
.eplan-root .an-bf .v{font-size:22px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.eplan-root .an-bf .w{font-size:14px;font-weight:600;margin:2px 0 4px}
.eplan-root .an-bf sub{font-size:.62em}
/* The rows, said plainly. */
.eplan-root .an-rowstats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.eplan-root .an-rowstat{flex:1 1 150px;border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:8px;padding:8px 11px;background:var(--card)}
.eplan-root .an-rowstat.ok{border-left-color:var(--ok,#2fbfb6)}
.eplan-root .an-rowstat.warn{border-left-color:var(--warn)}
.eplan-root .an-rowstat.bad{border-left-color:var(--danger)}
.eplan-root .an-rowstat b{display:block;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.15}
.eplan-root .an-rowstat span{display:block;font-size:11px;color:var(--muted);line-height:1.3}

/* Sideways scrolling for anything wider than the screen.
   overscroll-behavior-x stops a swipe that runs out of table from turning
   into the browser's back gesture, which is the thing that makes a scrollable
   table feel broken on a phone. The fades are the only sign a table is cut
   off rather than simply finished. */
.eplan-root .an-scroll{position:relative;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.eplan-root .an-scroll.is-over{background-image:linear-gradient(to right,var(--card),transparent 24px),linear-gradient(to left,var(--card),transparent 24px);background-attachment:local,local}
.eplan-root .an-scroll.is-over::before,.eplan-root .an-scroll.is-over::after{content:"";position:sticky;top:0;display:block;width:22px;height:100%;pointer-events:none;z-index:3;transition:opacity .15s}
.eplan-root .an-scroll.is-over::before{float:left;left:0;margin-right:-22px;background:linear-gradient(to right,var(--card),transparent)}
.eplan-root .an-scroll.is-over::after{float:right;right:0;margin-left:-22px;background:linear-gradient(to left,var(--card),transparent)}
.eplan-root .an-scroll.at-start::before{opacity:0}
.eplan-root .an-scroll.at-end::after{opacity:0}
.eplan-root .an-scroll table{min-width:100%}

/* The data grid: header stays put going down, row number stays put going
   across, so neither axis loses its labels. */
.eplan-root .an-grid-wrap{max-height:420px;overflow-y:auto}
.eplan-root .an-grid{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%}
.eplan-root .an-grid th,.eplan-root .an-grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:5px 9px;white-space:nowrap;text-align:left;background:var(--card)}
.eplan-root .an-grid thead th{position:sticky;top:0;z-index:2;background:var(--blue-soft);border-bottom:2px solid var(--line);vertical-align:top}
.eplan-root .an-grid .cn{display:block;font-weight:700}
.eplan-root .an-grid .ct{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.eplan-root .an-grid .rn{position:sticky;left:0;z-index:1;background:var(--blue-soft);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;min-width:44px}
.eplan-root .an-grid thead th.rn{z-index:4}
.eplan-root .an-grid td.n{text-align:right;font-variant-numeric:tabular-nums}
.eplan-root .an-grid td.empty{color:var(--muted)}
.eplan-root .an-grid tbody tr:hover td{background:var(--blue-soft)}
.eplan-root .an-grid tbody tr:hover td.rn{background:var(--blue-soft)}

@media print{
  .eplan-root .an-scroll{overflow:visible}
  .eplan-root .an-grid-wrap{max-height:none}
}
@media print{
  .eplan-root .an-chart{break-inside:avoid;page-break-inside:avoid;border:0}
  .eplan-root .an-chart .ip-bar{display:none}
}
/* A field ILAW just drafted: marked until the teacher touches it, so what was
   machine-written and what was hand-written stay tellable apart. */
.eplan-root .ip-inp.ai-filled{background:var(--gold-soft);border-color:var(--gold)}
.ip-pill.flagged{background:var(--warn-bg);color:var(--warn)}

.ip-empty{text-align:center;padding:48px 24px;color:var(--muted)}
.ip-empty .ic{width:54px;height:54px;border-radius:16px;background:var(--surface-2);color:var(--faint);display:grid;place-items:center;margin:0 auto 16px;border:1px solid var(--line)}
.ip-empty .ic.err{color:var(--danger);border-color:#eccfc8}
.ip-empty h3{color:var(--ink);font-size:17px;margin-bottom:6px}
.ip-empty p{max-width:44ch;margin:0 auto 18px;font-size:14px}

.ip-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.ip-panel.warn{border-left:4px solid var(--warn)}.ip-panel.ok{border-left:4px solid var(--ok)}
.ip-panel h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;font-weight:700;display:flex;align-items:center;gap:8px}

.ip-drop{border:2px dashed var(--line);border-radius:12px;padding:34px;text-align:center;background:var(--surface-2);cursor:pointer}
.ip-drop:hover,.ip-drop.over{border-color:var(--blue-2);background:var(--blue-soft)}
.ip-drop .ic{width:46px;height:46px;margin:0 auto 12px;color:var(--blue)}
.ip-drop h3{color:var(--navy);margin-bottom:6px}
.ip-preview{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:8px}

.ip-check{border:1px solid var(--line);border-radius:8px;max-height:300px;overflow:auto}
.ip-crow{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;align-items:flex-start}
.ip-crow:last-child{border-bottom:none}.ip-crow:hover{background:var(--surface-2)}
.ip-crow input{margin-top:3px;width:17px;height:17px;flex:0 0 auto}
.ip-crow .t{font-size:13.5px}.ip-crow .t .c{font-size:12px;color:var(--faint)}

.ip-gen{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:var(--surface);box-shadow:var(--shadow)}
.ip-gen .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:8px}
.ip-gen .obj{font-weight:600;font-size:15px}
.ip-gen .meta{font-size:12px;color:var(--faint);margin-top:2px}
.ip-gen .qa{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.ip-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;padding:30px 4px}
.ip-spin{width:16px;height:16px;border:2px solid rgba(29,78,137,.25);border-top-color:var(--blue);border-radius:50%;display:inline-block;animation:ipspin .7s linear infinite}
@keyframes ipspin{to{transform:rotate(360deg)}}

/* body-level overlays (appended outside .eplan-root) */
.ip-overlay{position:fixed;inset:0;background:rgba(15,24,44,.5);z-index:100000;display:grid;place-items:center;padding:20px}
.ip-modal{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(20,40,75,.28);width:min(680px,100%);max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#182338}
/* The same column-flex trap as the sidebar: with a long body the head and the
   footer are squeezed before the body is asked to scroll, so a tall item
   editor pushed the Save button off its own dialog. Both hold their height;
   the body is the only part that gives. */
.ip-mhead{padding:18px 22px;border-bottom:1px solid #dce1ea;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.ip-mhead h3{font-family:"Iowan Old Style",Palatino,Georgia,serif;font-size:20px;color:#14284b;margin:0}
.ip-mbody{padding:20px 22px;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex:1 1 auto;min-height:0}
.ip-mfoot{padding:14px 22px;border-top:1px solid #dce1ea;display:flex;justify-content:flex-end;gap:10px;background:#f7f9fc;border-radius:0 0 16px 16px;flex:0 0 auto}
.ip-mbody .ip-field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.ip-mbody .ip-inp{width:100%;padding:10px 12px;border:1px solid #dce1ea;border-radius:9px;font-size:16px;font-family:inherit;color:#182338}
.ip-mbody textarea.ip-inp{resize:vertical;min-height:64px}
.ip-mbody .ip-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ip-mbody .hint{font-size:12px;color:#8a94a6;font-weight:400}
.ip-mbody .ip-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid #dce1ea;background:#fff;color:#182338;font-weight:600;cursor:pointer;font-size:14px}
.ip-mbody .ip-btn.primary,.ip-mfoot .ip-btn.primary{background:#1d4e89;border-color:#1d4e89;color:#fff}
.ip-x{background:none;border:none;cursor:pointer;color:#8a94a6;padding:4px;border-radius:8px}
.ip-x:hover{background:#f0f2f6;color:#182338}

.ip-toasts{position:fixed;bottom:20px;right:20px;z-index:100001;display:flex;flex-direction:column;gap:10px}
.ip-toast{background:#14284b;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 12px 40px rgba(20,40,75,.28);font-size:13.5px;display:flex;align-items:center;gap:9px;max-width:340px;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.ip-toast.ok{background:#1f6b4b}.ip-toast.err{background:#9c3826}.ip-toast.info{background:#1d4e89}

.eplan-gate{max-width:420px;margin:40px auto;text-align:center;padding:30px;border:1px solid #dce1ea;border-radius:14px;background:#fff}

/* Print DLL (rendered client-side by the ported renderDLL) */
/* What prints, decided in one place.
   ------------------------------------------------------------------
   There are two print surfaces: a document rendered into #eplan-print
   (a lesson log, an ILAW plan, a Budget of Work) and an open modal (the
   lesson plan preview). Both are direct children of <body>.

   These rules used to be split across two @media print blocks, and the
   second set `body * { visibility: hidden }` while un-hiding only the
   modal. That made every document print come out blank: #eplan-print
   was displayed and invisible at the same time, and no modal was open
   to take its place. It also named `.ip-modal-foot` and `.ip-modal-x`,
   which the markup stopped using long ago.

   Now: nothing prints unless it has content in it. #eplan-modal is
   emptied on close, so :not(:empty) is a reliable test for whether a
   modal is actually open. */
@media print{
  @page{size:A4 portrait;margin:12mm 10mm}

  /* Let the page grow. In fullscreen mode the app pins html and body to the
     viewport with overflow:hidden so the shell can scroll inside itself — and
     that clipped every printed document at the first page. Everything after
     page one simply was not there, with no sign that anything had been cut.
     The same rule set also hides body children by a whitelist that never
     included the print surface. */
  html,body,html.eplan-fs,html.eplan-fs body{
    height:auto!important;max-height:none!important;
    overflow:visible!important;position:static!important}
  html.eplan-fs #eplan-root{position:static!important;height:auto!important}

  body>*{display:none!important}
  #eplan-print:not(:empty){display:block!important;overflow:visible!important;
    height:auto!important;max-height:none!important}
  #eplan-modal:not(:empty){display:block!important;position:static}
  #eplan-modal .ip-overlay{position:static;display:block;background:none;padding:0}
  #eplan-modal .ip-modal{position:static;width:auto;max-width:none;max-height:none;
    box-shadow:none;border:0;border-radius:0;margin:0}
  #eplan-modal .ip-mbody{overflow:visible;max-height:none;padding:0}
  #eplan-modal .ip-mhead .ip-x,#eplan-modal .ip-mfoot{display:none!important}

  /* A table longer than a page repeats its heading on each one and never
     splits a row down the middle. Without the first, page two of a Budget of
     Work is a column of numbers with nothing saying what they are. */
  #eplan-print thead,#eplan-modal thead{display:table-header-group}
  #eplan-print tfoot,#eplan-modal tfoot{display:table-footer-group}
  #eplan-print tr,#eplan-modal tr{page-break-inside:avoid;break-inside:avoid}
  #eplan-print table,#eplan-modal table{page-break-inside:auto;break-inside:auto}
  #eplan-print h2,#eplan-print h3{page-break-after:avoid;break-after:avoid}

  /* Shaded heading rows are structure, not decoration, so keep them when the
     browser would otherwise drop backgrounds to save ink. */
  #eplan-print,#eplan-print *,#eplan-modal,#eplan-modal *{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Every printed document sits in a frame, and every cell keeps its rule —
     including the cells either side of a page break, where a collapsed border
     is otherwise the first thing to go. */
  #eplan-print .eplan-dll,#eplan-print .eplan-dll-week,#eplan-print .eplan-ilaw,
  #eplan-print .eplan-bow,#eplan-print .eplan-chk,#eplan-print .eplan-tos-doc{
    border:1.2pt solid #111;padding:5mm;box-sizing:border-box}
  #eplan-print table{border:1pt solid #333}
  #eplan-print th,#eplan-print td{border:0.75pt solid #333}
}
#eplan-print{display:none}
.eplan-dll{font-family:"Times New Roman",Georgia,serif;color:#111;font-size:12px;line-height:1.3;background:#fff}
.eplan-dll table{width:100%;border-collapse:collapse}
.eplan-dll td,.eplan-dll th{border:1px solid #333;padding:4px 6px;vertical-align:top}

@media (max-width:960px){.eplan-root .ip-grid.c3{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .eplan-root .ip-burger{display:grid}
  .eplan-root .ip-who{display:none}
  .eplan-root .ip-bodyrow{position:relative}
  /* The drawer is measured against the screen, not against the view beside it.
     It used to be position:absolute with top:0 and bottom:0 inside .ip-bodyrow,
     which made its height the height of that row — and the row grows with
     whatever .ip-main is showing. On a long view the row runs to two or three
     thousand pixels, so the drawer was that tall too: the menu never came close
     to overflowing it, overflow-y:auto had nothing to scroll, and everything
     below the fold was simply off the screen with no way to reach it. Fixing it
     to the viewport gives it a real height, and then it scrolls. */
  .eplan-root .ip-side{position:fixed;top:0;left:0;bottom:auto;
    height:100vh;height:100dvh;max-height:none;width:250px;z-index:99992;
    transform:translateX(-100%);visibility:hidden;
    transition:transform .22s,visibility 0s .22s;
    box-shadow:0 12px 40px rgba(20,40,75,.2);
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
  /* Hidden until opened, so a drawer parked off the left edge cannot be tapped
     through or drag the page sideways. */
  .eplan-root .ip-side.open{transform:none;visibility:visible;transition:transform .22s,visibility 0s}
  .eplan-root .ip-scrim{position:fixed;inset:0;background:rgba(15,24,44,.3);z-index:99991;display:none}
  .eplan-root .ip-scrim.show{display:block}
  .eplan-root .ip-main{padding:18px 16px 40px}
  .eplan-root .ip-grid.c3,.eplan-root .ip-grid.c2,.eplan-root .ip-fgrid,.eplan-root .ip-mapgrid{grid-template-columns:1fr}
  .ip-mbody .ip-fgrid{grid-template-columns:1fr}
}

/* ============================================================
   iAssess — item bank, assessment builder, quiz-taking, results
   (main-app components render inside .eplan-root, so var() tokens
   resolve; the item editor lives in .ip-mbody and the print paper
   in #eplan-print — both body-level — so those use literal colors.)
   ============================================================ */

/* Item bank — choices preview on a bank item (reuses .ip-gen shell) */
.ip-choices{list-style:none;margin:8px 0 2px;padding:0;counter-reset:ch}
.ip-choices li{counter-increment:ch;position:relative;padding:5px 10px 5px 32px;margin:3px 0;border-radius:7px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.ip-choices li::before{content:counter(ch,upper-alpha) ".";position:absolute;left:11px;top:5px;font-weight:700;color:var(--faint)}
.ip-choices li.correct{background:var(--ok-bg);color:var(--ok);font-weight:600}
.ip-choices li.correct::before{color:var(--ok)}
.ip-choices li.correct svg{color:var(--ok)}

/* Item editor (inside the modal → body-level, layout only) */
.ip-mbody .ip-choice-row{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.ip-mbody .ip-choice-row input[type=radio]{width:18px;height:18px;flex:0 0 auto}
.ip-mbody .ip-choice-row .ip-inp{margin:0}
.ip-mbody .ip-field.wide>label{margin-bottom:8px}

/* Assessment + available cards */
.ip-acard{padding:16px 18px;display:flex;flex-direction:column}
.ip-acard-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.ip-acard .qa{margin-top:13px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Builder */
.ip-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.ip-checks{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.ip-check-inline{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;font-weight:500;cursor:pointer}
.ip-check-inline input{width:17px;height:17px;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
.ip-chosen-item{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:9px 12px;margin-bottom:8px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface-2)}
.ip-chosen-item.bad{border-color:var(--danger);background:var(--danger-bg)}
.ip-chosen-item .txt{font-size:13.5px;line-height:1.45}
.ip-bank-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:9px 12px;margin-bottom:8px;border:1px solid var(--line-2);border-radius:9px}
.ip-bank-item.bad{border-color:var(--danger);background:var(--danger-bg)}
.ip-bank-item .txt{font-size:13.5px;min-width:0}

/* Section subhead (results / review) */
.ip-subhead{font-family:var(--serif);font-size:16px;color:var(--navy);margin:24px 0 12px}

/* Quiz-taking */
.ip-quizbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);position:sticky;top:8px;z-index:6}
.ip-timer{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--navy);background:var(--blue-soft);padding:6px 12px;border-radius:8px;min-width:66px;text-align:center;flex:0 0 auto}
.ip-timer.low{color:var(--danger);background:var(--danger-bg);animation:ippulse 1s ease-in-out infinite}
@keyframes ippulse{50%{opacity:.55}}
.ip-qcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow)}
.ip-qcard .qn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:9px}
.ip-qcard .qn b{color:var(--navy);font-size:15px}
.ip-qcard .qtext{font-size:15.5px;font-weight:500;line-height:1.5;margin-bottom:13px}
.ip-qcard.right{border-left:4px solid var(--ok)}
.ip-qcard.wrong{border-left:4px solid var(--danger)}
.ip-qcard .ip-small{margin-top:5px}
.ip-qcard .ip-small.ok{color:var(--ok);font-weight:600}
.ip-opts{display:flex;flex-direction:column;gap:9px}
.ip-opt{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:14.5px;transition:background .12s,border-color .12s}
.ip-opt:hover{background:var(--surface-2);border-color:var(--blue-2)}
.ip-opt input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--blue)}
.ip-opt:has(input:checked){background:var(--blue-soft);border-color:var(--blue-2);font-weight:600}

/* Result scorecard */
.ip-scorecard{background:linear-gradient(135deg,#12213f,#1a3763);color:#fff;border-radius:16px;padding:32px 24px;text-align:center;box-shadow:var(--shadow)}
.ip-scorecard .big{font-family:var(--serif);font-size:54px;font-weight:600;line-height:1;color:var(--gold)}
.ip-scorecard .sub{font-size:15px;color:#cbd6e8;margin-top:8px}

@media (max-width:760px){
  .eplan-root .ip-scorecard .big{font-size:44px}
  .eplan-root .ip-quizbar{position:static}
}

/* ============================================================
   Budget of Work — row editor (in .eplan-root) + print table (#eplan-print)
   ============================================================ */
.ip-bowrow{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--surface-2)}
.ip-bowrow .bw-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ip-bowrow .bw-n{flex:0 0 auto;width:24px;height:24px;border-radius:6px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.ip-bowrow .bw-term{flex:1 1 100px}
.ip-bowrow .bw-week{flex:1 1 120px}
.ip-bowrow .bw-weeks{flex:0 0 84px}
.ip-bowrow .bw-top .bw-rm{margin-left:auto}
.ip-bowrow .bw-code{margin-bottom:8px}
.ip-bowrow .bw-comp{margin-bottom:8px;min-height:52px}
.ip-bowrow .ip-fgrid{gap:0 10px}

/* Printable Budget of Work (rendered in #eplan-print) */
.eplan-bow{font-family:"Times New Roman",Georgia,serif;color:#111;font-size:11.5px;line-height:1.35;background:#fff}
.eplan-bow h2{text-align:center;font-size:16px;margin:0 0 2px;letter-spacing:1px}
.eplan-bow .sub{text-align:center;font-size:11px;color:#333;margin-bottom:2px}
.eplan-bow .ttl{text-align:center;font-size:11px;font-style:italic;color:#444;margin-bottom:4px}
.eplan-bow .meta{font-size:10.5px;color:#333;margin-bottom:10px}
.eplan-bow h3.term{font-size:12px;background:#eee;padding:4px 8px;margin:12px 0 0;border:1px solid #999;border-bottom:none}
.eplan-bow h3.term span{font-weight:400;color:#555;font-size:10.5px}
.eplan-bow table{width:100%;border-collapse:collapse;margin:0 0 4px}
.eplan-bow th,.eplan-bow td{border:1px solid #999;padding:4px 6px;vertical-align:top;text-align:left}
.eplan-bow th{background:#f3f3f3;font-size:10.5px}
.eplan-bow th.w,.eplan-bow td:first-child{width:70px}
.eplan-bow th.n{width:74px;text-align:center}
.eplan-bow td.n{text-align:center}
.eplan-bow tr{page-break-inside:avoid}
.eplan-bow .head{text-align:center;font-size:11px;line-height:1.4;margin-bottom:6px;color:#111}
.eplan-bow tr.std td{background:#f1f1f1;font-size:10.5px;line-height:1.35}
.eplan-bow table.sig{margin-top:28px;border:0;page-break-inside:avoid}
.eplan-bow table.sig td{border:0;width:50%;padding:0 14px;font-size:11px;text-align:left}
.eplan-bow table.sig span{display:block;color:#555;font-size:10px;margin-bottom:20px}
.eplan-bow table.sig b{display:block;border-top:1px solid #111;padding-top:2px;text-transform:uppercase;min-height:14px}
.eplan-bow table.sig i{display:block;font-style:normal;color:#555;font-size:10px}
/* ILAW lesson plan, printed in the shape of the issued template. */
.eplan-ilaw{font-family:"Times New Roman",Georgia,serif;color:#111;font-size:11.5px;line-height:1.35;background:#fff}
.eplan-ilaw .head{text-align:center;font-size:11px;line-height:1.4;margin-bottom:6px}
.eplan-ilaw h2{text-align:center;font-size:15px;letter-spacing:1px;margin:0 0 8px}
.eplan-ilaw h3{font-size:12px;margin:16px 0 4px;text-align:center;letter-spacing:.5px}
.eplan-ilaw table{width:100%;border-collapse:collapse;margin:0 0 10px}
.eplan-ilaw th,.eplan-ilaw td{border:1px solid #444;padding:5px 7px;vertical-align:top;text-align:left}
.eplan-ilaw table.hd th{width:30%;font-style:italic;background:#f4f4f4}
.eplan-ilaw table.blk th{width:34%;background:#f4f4f4}
.eplan-ilaw tr.lead th{background:#e6e6e6;font-size:12px}
.eplan-ilaw tr.lead td{font-style:italic;color:#333}
.eplan-ilaw .sub{font-weight:400;font-style:italic;font-size:10px;color:#444;margin-top:2px}
.eplan-ilaw table.rub th{background:#f4f4f4;font-size:10.5px}
.eplan-ilaw table.rub td.c,.eplan-ilaw table.rub th.c{text-align:center;width:52px}
.eplan-ilaw tr{page-break-inside:avoid}

/* The signature block on a printed document: the name, when it was signed,
   the code in text for anyone who cannot scan, and the QR that opens the
   record. Kept whole across a page break — a signature split in half is worse
   than none, because it looks like one. */
.eplan-sig{display:flex;gap:10mm;align-items:flex-start;margin-top:8mm;padding-top:4mm;
  border-top:0.75pt solid #333;page-break-inside:avoid;break-inside:avoid}
.eplan-sig .qr{flex:0 0 auto;width:26mm}
.eplan-sig .qr svg{width:26mm;height:26mm;display:block}
.eplan-sig .txt{font-size:10px;line-height:1.5;color:#111}
.eplan-sig .txt b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
.eplan-sig .txt i{display:block;font-style:normal;color:#444}
.eplan-sig .txt span{display:block;color:#444}
.eplan-sig .txt .code{font-family:ui-monospace,Menlo,monospace;letter-spacing:.6px;margin-top:2px}
.eplan-sig .txt .hint{font-size:8.5px;color:#666;margin-top:2px}
.eplan-sig.unsigned{border-top-style:dashed}
.eplan-sig.blank{border-top-style:dashed}
.eplan-sig.blank .txt b{color:#7a5c00}

/* ============================================================
   School Head Checklist — editor (in .eplan-root) + print (#eplan-print)
   ============================================================ */
.ip-chk-block{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.ip-chk-bhead{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;background:linear-gradient(180deg,#fff,#f7f9fc);border-bottom:1px solid var(--line)}
.ip-chk-bhead .bh-l{display:flex;align-items:center;gap:8px;min-width:0}
.ip-chk-bhead h4{margin:0;font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-chk-chev{background:none;border:0;padding:0;color:var(--muted);display:grid;place-items:center;cursor:pointer;transform:rotate(90deg);transition:transform .18s}
.ip-chk-block.collapsed .ip-chk-chev{transform:rotate(0deg)}
.ip-chk-block.collapsed .ip-chk-body{display:none}
.ip-chk-bhead .bh-r{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.ip-chk-prog{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.ip-chk-prog b{color:var(--navy)}
.ip-chk-track{width:120px;height:7px;border-radius:6px;background:var(--line-2);overflow:hidden}
.ip-chk-track.big{width:200px;height:9px}
.ip-chk-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue-2),var(--ok));transition:width .25s}
.ip-chk-body{padding:6px 8px}
.ip-chk-sec{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);padding:12px 8px 6px;border-top:1px solid var(--line-2);margin-top:4px}
.ip-chk-body .ip-chk-sec:first-child{border-top:0;margin-top:0}
.ip-chk-row{display:grid;grid-template-columns:16px 1fr 152px 220px;gap:10px;align-items:center;padding:7px 8px;border-radius:8px}
.ip-chk-row:hover{background:var(--surface-2)}
.cx-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:#cfd6e2}
.cx-dot.none{background:#cfd6e2}
.cx-dot.prog{background:var(--warn)}
.cx-dot.done{background:var(--ok)}
.cx-label{font-size:13.5px;color:var(--ink);line-height:1.35}
.cx-status,.cx-notes{margin:0}
.ip-chk-overall{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;flex-wrap:wrap}
.ip-chk-overall .ov-l{display:flex;align-items:center;gap:8px}
.ip-chk-overall .ov-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.ip-fgrid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){
  .eplan-root .ip-fgrid.c3{grid-template-columns:1fr}
  .eplan-root .ip-chk-row{grid-template-columns:14px 1fr;gap:6px 8px}
  .eplan-root .ip-chk-row .cx-status,.eplan-root .ip-chk-row .cx-notes{grid-column:2}
  .eplan-root .ip-chk-track{width:90px}
  .eplan-root .ip-chk-track.big{width:120px}
}

/* Printable School Head Checklist (rendered in #eplan-print) */
.eplan-chk{font-family:"Times New Roman",Georgia,serif;color:#111;font-size:11px;line-height:1.35;background:#fff}
.eplan-chk h2{text-align:center;font-size:16px;margin:0 0 2px;letter-spacing:1px}
.eplan-chk .sub{text-align:center;font-size:11px;color:#333;margin-bottom:2px}
.eplan-chk .meta{text-align:center;font-size:10.5px;color:#333;margin-bottom:10px}
.eplan-chk h3.blk{font-size:12px;background:#eee;padding:4px 8px;margin:12px 0 0;border:1px solid #999;border-bottom:none}
.eplan-chk h3.blk span{font-weight:400;color:#555;font-size:10.5px}
.eplan-chk table{width:100%;border-collapse:collapse;margin:0 0 4px}
.eplan-chk th,.eplan-chk td{border:1px solid #999;padding:3px 6px;vertical-align:top;text-align:left}
.eplan-chk th{background:#f3f3f3;font-size:10px}
.eplan-chk th.st,.eplan-chk td.st{width:82px;text-align:center}
.eplan-chk tr.sec td{background:#f7f7f7;font-weight:700;font-size:10px}
.eplan-chk tr{page-break-inside:avoid}

/* ============================================================
   Table of Specifications + Item analysis (screen)
   ============================================================ */
.ip-tos td,.ip-tos th{white-space:nowrap;text-align:center}
.ip-tos td:first-child,.ip-tos th:first-child{text-align:left;white-space:normal;min-width:150px}
.ip-tos tr.ip-tfoot td{border-top:2px solid var(--line);background:var(--surface-2);font-weight:700}
.ia-table td{vertical-align:middle}
/* The tracking number is a column of its own in item analysis, not a tag
   trailing a line of text, so it does not want the inline left margin. */
.eplan-root .ia-table .ip-track.sm{margin-left:0}
.ia-badge{display:inline-block;font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;line-height:1.7;white-space:nowrap;vertical-align:middle}
.ia-badge.ok{background:var(--ok-bg);color:var(--ok)}
.ia-badge.warn{background:var(--warn-bg);color:var(--warn)}
.ia-badge.bad{background:var(--danger-bg);color:var(--danger)}
.ia-badge.muted{background:var(--surface-2);color:var(--muted)}
.ia-tally{display:flex;gap:8px;margin:2px 0 12px;flex-wrap:wrap}
.ia-tally .ia-badge{font-size:12px;padding:3px 12px}
.ia-opts{display:flex;gap:4px;flex-wrap:wrap}
.ia-opt{font-size:11px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ia-opt.key{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:700}
.ia-opt.dead{opacity:.5;text-decoration:line-through}

/* Printable Table of Specifications / Item analysis (rendered in #eplan-print) */
.eplan-tos-doc{font-family:"Times New Roman",Georgia,serif;color:#111;font-size:11px;line-height:1.35;background:#fff}
.eplan-tos-doc h2{text-align:center;font-size:16px;margin:0 0 2px;letter-spacing:1px}
.eplan-tos-doc .sub{text-align:center;font-size:11px;color:#333;margin-bottom:8px}
.eplan-tos-doc .ia-legend{text-align:center;font-size:11px;margin:6px 0}
.eplan-tos-doc .sign{display:flex;justify-content:space-between;margin-top:26px;font-size:11px}
.eplan-tos-doc .note{font-size:10px;color:#444;margin-top:8px}
.eplan-tos{width:100%;border-collapse:collapse;margin:8px 0 6px;font-family:"Times New Roman",Georgia,serif;color:#111;font-size:10.5px}
.eplan-tos th,.eplan-tos td{border:1px solid #999;padding:4px 6px;text-align:center;vertical-align:top}
.eplan-tos th:first-child,.eplan-tos td:first-child{text-align:left}
.eplan-tos th{background:#f3f3f3}
.eplan-tos tr{page-break-inside:avoid}

/* Competencies bulk-select checkboxes */
.ip-data td.ip-check,.ip-data th.ip-check{width:34px;text-align:center;padding-left:10px;padding-right:6px}
.ip-data td.ip-check input,.ip-data th.ip-check input{width:16px;height:16px;cursor:pointer;margin:0;vertical-align:middle;accent-color:var(--blue)}

/* User management — multi-role listbox */
.ip-multi{width:100%;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;outline:none}
.ip-multi:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,108,176,.15)}
.ip-multi option{padding:5px 8px;border-radius:5px;margin:1px 0}
.ip-multi option:checked{background:var(--blue);color:#fff}

/* Floating support widget (Telegram-backed) */
.eplan-support{position:fixed;right:20px;bottom:20px;z-index:99998}
.eplan-support-btn{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(20,40,75,.35);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.eplan-support-btn:hover{background:var(--blue);transform:translateY(-1px)}
.eplan-support-panel{position:absolute;right:0;bottom:70px;width:330px;max-width:calc(100vw - 40px);background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 48px rgba(20,40,75,.28);overflow:hidden;display:none}
.eplan-support-panel.open{display:block;animation:eplanSupIn .16s ease-out}
@keyframes eplanSupIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eplan-support-head{background:var(--navy);color:#fff;padding:13px 16px;font-weight:600;display:flex;align-items:center;gap:8px}
.eplan-support-head span{flex:1}
.eplan-support-x{background:transparent;border:0;color:#fff;cursor:pointer;opacity:.75;padding:0;display:flex}
.eplan-support-x:hover{opacity:1}
.eplan-support-body{padding:14px 16px}
.eplan-support-body textarea{width:100%;box-sizing:border-box;min-height:92px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:var(--surface);color:var(--ink);resize:vertical;outline:none}
.eplan-support-body textarea:focus{border-color:var(--blue-2)}
.eplan-support-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
.eplan-support-tg{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 16px 16px;padding:9px;border:1px solid var(--line);border-radius:10px;color:var(--blue);text-decoration:none;font-size:13px;font-weight:600}
.eplan-support-tg:hover{background:var(--blue-soft)}

/* ---------- Objective item types ---------- */
/* Authoring: multi checkbox in the choice row */
.ip-mbody .ip-choice-row input[type=checkbox]{width:18px;height:18px;flex:0 0 auto;accent-color:var(--blue)}
/* Authoring: True/False */
.ip-tf{display:inline-flex;align-items:center;gap:8px;margin-right:18px;font-size:14.5px;cursor:pointer}
.ip-tf input{width:18px;height:18px;accent-color:var(--blue)}
/* Authoring: matching pairs */
.ip-pair-row{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.ip-pair-row .ip-inp{margin:0}
.ip-pair-arrow{color:var(--faint);font-weight:700;flex:0 0 auto}
/* Authoring: accepted answers (fill) */
.ip-accept-row{margin-bottom:9px}
.ip-accept-row .ip-inp{margin:0}
/* Authoring: ordering rows */
.ip-order-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.ip-order-row .ip-inp{margin:0}
.ip-order-num{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue-soft);color:var(--navy);font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center}
.ip-check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);cursor:pointer}
.ip-check input{width:16px;height:16px;accent-color:var(--blue)}

/* Item-card previews */
.ip-pairs{list-style:none;margin:8px 0 2px;padding:0}
.ip-pairs li{padding:5px 10px;margin:3px 0;border-radius:7px;font-size:13.5px;color:var(--muted);background:var(--surface-2)}
.ip-choices.ordered{counter-reset:ord}
.ip-choices.ordered li{counter-increment:ord}
.ip-choices.ordered li::before{content:counter(ord) "."}
.ip-ans-line{margin:8px 0 2px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ip-ans-line b{color:var(--ink)}

/* Student taking: shared hint */
.ip-hintline{font-size:12.5px;color:var(--faint);margin-bottom:2px}
/* Student taking: matching */
.ip-match{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.ip-match-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ip-match-l{flex:1 1 200px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);font-size:14px}
.ip-match-row .qmatch{flex:1 1 200px;margin:0}
/* Student taking: fill / numeric */
.ip-fillwrap{margin-top:4px;max-width:340px}
/* Student taking: ordering */
.ip-order-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ip-order-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:14.5px}
.ip-order-txt{flex:1 1 auto;min-width:0}
.ip-order-btns{flex:0 0 auto;display:inline-flex;gap:4px}
.ip-order-btns button{width:30px;height:30px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;cursor:pointer;color:var(--muted);font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background .12s,color .12s,border-color .12s}
.ip-order-btns button:hover{background:var(--blue-soft);color:var(--navy);border-color:var(--blue-2)}

/* ============================================================
   TOS planner (screen)
   ============================================================ */
.tos-bar{display:flex;align-items:center;gap:12px;margin:-2px 0 14px;flex-wrap:wrap}
.tos-bar>.ip-small{flex:1 1 260px}
.tos-setup{display:grid;grid-template-columns:1.1fr 1fr 1.5fr;gap:14px;margin-bottom:14px}
.tos-total-row{display:flex;gap:8px;align-items:center}
.tos-total-row .ip-inp{max-width:120px}
.tos-ks-box{padding:10px 12px;border:1px dashed var(--line);border-radius:9px;background:var(--surface-2);font-size:13.5px;color:var(--ink);min-height:42px;display:flex;flex-direction:column;justify-content:center}
.tos-distwrap{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:14px;background:var(--surface)}
.tos-disthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.tos-disthead label{font-weight:600;font-size:13.5px;color:var(--ink)}
.tos-preset-sel{max-width:230px;font-size:13px;padding:7px 28px 7px 10px}
.tos-distgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.tos-dist-cell{display:flex;flex-direction:column;gap:3px}
.tos-dist-cell label{font-size:11px;color:var(--muted);font-weight:600;text-align:center}
.tos-dist-cell .ip-inp{padding:8px 6px;text-align:center;font-size:16px}
.tos-distsum{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:right}
.tos-compwrap{margin-bottom:6px}
.tos-comphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.tos-comphead label{font-weight:600;font-size:13.5px;color:var(--ink)}
.tos-comphead-btns{display:flex;gap:8px}
.tos-rows-tbl{display:flex;flex-direction:column;gap:7px}
.tos-rows-head,.tos-row{display:grid;grid-template-columns:1fr 150px 84px 38px;gap:8px;align-items:center}
.tos-rows-head{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;padding:0 2px}
.tos-row .ip-inp{margin:0;padding:9px 11px}
.tos-r-days{text-align:center}
.tos-sub{font-weight:700;font-size:13px;color:var(--gold-deep);margin:18px 0 8px;letter-spacing:.02em}
.tos-alloc td:last-child,.tos-alloc th:last-child{text-align:center;white-space:nowrap}
.ip-tos tr.tos-target td{background:var(--blue-soft);color:var(--navy);font-weight:600;border-top:1px solid var(--line)}
.tos-lh{margin:12px 0 4px}
.tos-lh-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);margin-bottom:6px}
.tos-lh-lots{background:var(--blue);height:100%}
.tos-lh-hots{background:var(--gold);height:100%}
.tos-cov{margin:8px 0}
.tos-cov table{width:100%}
.tos-cov td,.tos-cov th{text-align:left}
.tos-cov td:nth-child(2),.tos-cov td:nth-child(3),.tos-cov th:nth-child(2),.tos-cov th:nth-child(3){text-align:center;width:70px}
.tos-warn{display:flex;align-items:center;gap:6px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:600;padding:8px 11px;border-radius:8px;margin:6px 0 2px}
@media (max-width:760px){
  .eplan-root .tos-setup{grid-template-columns:1fr}
  .eplan-root .tos-distgrid{grid-template-columns:repeat(3,1fr)}
  .eplan-root .tos-rows-head{display:none}
  .eplan-root .tos-row{grid-template-columns:1fr 84px 38px}
  .eplan-root .tos-r-code{grid-column:1/2}
}

/* TOS print document additions */
.eplan-tos-doc .sub2{text-align:center;font-size:10px;color:#555;margin-bottom:8px;font-style:italic}
.eplan-tos-doc .lh{font-size:10px;color:#222;margin-top:8px;text-align:center}
.eplan-tos .c{font-size:9px;color:#555}
.eplan-tos tr.tot td{background:#eee;font-weight:700}
.eplan-tos tr.tgt td{font-style:italic;color:#444}

.tos-off{color:var(--danger)}

/* ============================================================
   Night mode — palette matched to the CRLA dark theme
   ============================================================ */
.ip-theme{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;width:36px;height:36px;border-radius:9px;cursor:pointer;display:grid;place-items:center;flex:0 0 auto;padding:0}
.ip-theme:hover{background:rgba(255,255,255,.18)}
.eplan-root.eplan-dark{
  /* The same hues carried down, not a second palette. The theme has no dark
     mode of its own, so this stays the plugin's — but built from the
     theme's navy and gold so the two do not look unrelated when it is on. */
  --bg:#061423;--surface:#0E2036;--surface-2:#132A44;--ink:#EAF0FB;--muted:#9DB0C8;--faint:#62789A;
  --line:#20395A;--line-2:#18304F;--navy:#04101D;--blue:#5B8FE8;--blue-2:#7CA6EF;--blue-soft:#132A44;
  --sea:#3B93BC;
  --gold:#F4B31C;--gold-deep:#F4B31C;--gold-soft:#2B2208;--ok:#37A667;--ok-bg:#0F2A1C;--warn:#D08A22;--warn-bg:#2C220E;--danger:#D9584A;--danger-bg:#2E1714;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 30px rgba(0,0,0,.45);
  color-scheme:dark;
}
.eplan-root.eplan-dark code,
.eplan-root.eplan-dark .ip-code,
.eplan-root.eplan-dark .ip-pill.pending{background:#0F1626;color:var(--ink)}
.eplan-root.eplan-dark .ip-nav.active{border-color:#2b3a5e}
.eplan-root.eplan-dark .ip-data thead th{background:var(--surface-2);color:var(--muted)}
.eplan-root.eplan-dark .ip-empty .ic.err{border-color:#5a2a2a}
.eplan-root.eplan-dark .ip-code{border:1px solid var(--line)}
/* modal chrome -> dark
   The dialog host is a child of <body>, not of .eplan-root, so the old
   .eplan-root.eplan-dark prefix could never match and every one of these rules
   was dead: dark-theme users got a white flash on each dialog. openModal now
   mirrors the theme onto the host itself, and these key off that. */
#eplan-modal.eplan-dark .ip-modal{background:#131A2C;color:#EEF1F8}
#eplan-modal.eplan-dark .ip-mhead,
#eplan-modal.eplan-dark .ip-mfoot{border-color:#243150}
#eplan-modal.eplan-dark .ip-mfoot{background:#0E1322}
#eplan-modal.eplan-dark .ip-mhead h3{color:#EEF1F8}
#eplan-modal.eplan-dark .ip-mbody{color:#EEF1F8}
#eplan-modal.eplan-dark .ip-mbody .ip-inp{background:#0F1626;border-color:#243150;color:#EEF1F8}
#eplan-modal.eplan-dark .ip-mbody .hint{color:#8B96B0}
#eplan-modal.eplan-dark .ip-mbody .ip-btn{background:#182138;border-color:#243150;color:#EEF1F8}
#eplan-modal.eplan-dark .ip-mbody .ip-btn.primary,
#eplan-modal.eplan-dark .ip-mfoot .ip-btn.primary{background:#5B8CFF;border-color:#5B8CFF;color:#0A0E18}
#eplan-modal.eplan-dark .ip-mfoot .ip-btn{background:#182138;border-color:#243150;color:#EEF1F8}
#eplan-modal.eplan-dark .ip-x{color:#9AA4BE}
#eplan-modal.eplan-dark .ip-x:hover{background:#182138;color:#EEF1F8}

/* Item tracking number */
.ip-track{font-family:var(--mono);font-size:11px;letter-spacing:.02em;background:var(--blue-soft);color:var(--blue);border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}

/* Learner result review (expandable rows) */
.ip-rrow{cursor:pointer}
.ip-rrow:hover{background:var(--surface-2)}
.ip-rchev{width:26px}
.ip-rchev svg{transition:transform .18s;color:var(--faint)}
.ip-rrow.open .ip-rchev svg{transform:rotate(90deg);color:var(--blue)}
.ip-rdetail>td{background:var(--surface-2);padding:14px 16px}
.ip-review-hd{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ip-review-hd.ok{color:var(--ok);display:flex;align-items:center;gap:7px;text-transform:none;font-size:13px;letter-spacing:0}
.ip-wrong{border:1px solid var(--line);border-left:3px solid var(--danger);border-radius:10px;padding:11px 13px;margin-bottom:9px;background:var(--surface)}
.ip-wrong-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ip-qnum{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--danger);background:var(--danger-bg);border-radius:5px;padding:2px 7px}
.ip-wrong-q{font-size:14px;color:var(--ink);margin-bottom:8px;line-height:1.45}
.ip-wrong-a{font-size:13.5px;color:var(--ink);background:var(--surface-2);border-radius:8px;padding:7px 10px}
.ip-wrong-a span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:2px}
.ip-wrong-a.blank{color:var(--muted);font-style:italic}

/* Autosave indicator in the quiz bar */
.ip-savestate{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  letter-spacing:.03em;color:var(--muted);padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.ip-savestate .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.ip-savestate .dot.ok{background:var(--ok)}
.ip-savestate .dot.busy{background:var(--gold);animation:ipPulse 1s ease-in-out infinite}
.ip-savestate .dot.off{background:var(--danger)}
.ip-savestate.offline{color:var(--danger);border-color:var(--danger)}
@keyframes ipPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Sittings (per-venue exam sessions) */
.ip-sitrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;margin-bottom:8px;background:var(--surface)}
.ip-sitmain{flex:1;min-width:0}
.ip-sitmain b{display:block;font-size:14px}
.ip-sitrow .ip-pill.danger{border-color:var(--danger);color:var(--danger)}

/* DO 3 s.2026 lesson plan */
.lp-doc h2{font-family:var(--serif);font-size:20px;margin:0 0 14px}
.lp-doc h3{font-family:var(--serif);font-size:16px;margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.lp-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.lp-tbl th{width:31%;text-align:left;vertical-align:top;padding:10px 12px;border:1px solid var(--line);
  background:var(--surface-2);font-weight:600;color:var(--ink)}
.lp-tbl td{vertical-align:top;padding:10px 12px;border:1px solid var(--line);line-height:1.55}
.lp-hint{font-weight:400;font-size:11px;color:var(--faint);margin-top:3px;line-height:1.4}
.lp-sub{margin-top:7px;font-size:12.5px;color:var(--muted)}
.lp-acts{margin:0;padding-left:18px}
.lp-acts li{margin:3px 0}
.lp-blank{min-height:52px;background:repeating-linear-gradient(180deg,transparent,transparent 25px,var(--line-2) 25px,var(--line-2) 26px)}
.lp-todo{font-size:12px;color:var(--faint);font-style:italic}
.lp-ai{font-size:12.5px;color:var(--muted)}
@media print{
  .lp-tbl th{background:#f4f6fa}
  .lp-todo{color:#999}
}

/* Generate Lesson Plans — coverage at a glance */
.ip-crow .gc-top{font-size:14px;line-height:1.45}
.ip-crow .gc-tags{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px}
.ip-crow.done{opacity:.62}
.ip-crow.done:hover{opacity:1}
.ip-crow.done .gc-top{color:var(--muted)}

/* Pick-list of competencies (Generate lesson plans).
   Deliberately not .ip-check: that name is used twice in this stylesheet — once
   as a bordered list box, and later as an inline-flex checkbox label. The second
   wins, which laid every row out side by side in a narrow column. */
.ip-picklist{display:block;border:1px solid var(--line);border-radius:8px;
  max-height:420px;overflow-y:auto;overscroll-behavior:contain;background:var(--surface)}
.ip-picklist .ip-crow{display:flex;width:100%;box-sizing:border-box;align-items:flex-start;
  gap:11px;padding:11px 13px;border-bottom:1px solid var(--line-2);cursor:pointer}
.ip-picklist .ip-crow:last-child{border-bottom:none}
.ip-picklist .ip-crow .t{flex:1;min-width:0}
.ip-picklist .ip-crow .gc-top{font-size:14px;line-height:1.45;overflow-wrap:anywhere}

/* ============================================================
   Phones — Android & iOS
   The layout already stacks under 760px; what was missing was the
   platform behaviour. iOS zooms into any control under 16px and never
   zooms back; 100vh counts the space behind the toolbars, so a panel
   sized to it hides its own last row; a fixed bar sits under the home
   indicator on a notched iPhone; and :hover sticks after a tap on both
   platforms, leaving buttons looking pressed. Each is handled here so
   the fixes stay together rather than scattered through the sheet.
   ============================================================ */

/* Landscape on iOS inflates text unless told not to. */
.eplan-root,.ip-overlay,.eplan-support{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* No grey flash box on tap; :active carries the feedback instead. */
.eplan-root,.ip-overlay,.eplan-support{-webkit-tap-highlight-color:transparent}
.ip-btn:active,.ip-nav:active,.ip-opt:active,.ip-x:active{transform:translateY(1px)}

/* Every control reaches the 16px floor, so focusing one never zooms the page. */
input.ip-inp,select.ip-inp,textarea.ip-inp,.ip-mbody input.ip-inp,.ip-mbody select.ip-inp,
.ip-mbody textarea.ip-inp,.eplan-root input,.eplan-root select,.eplan-root textarea,
.eplan-support-body textarea,.eplan-auth-wrap input,.eplan-auth-wrap select,
.eplan-auth-wrap textarea{font-size:16px}

/* A tap has no cursor to hover with: without this the last thing touched
   keeps its hover styling until something else is touched. */
@media (hover:none){
  .eplan-root .ip-btn:hover,.eplan-root .ip-nav:hover,.eplan-root .ip-x:hover,
  .eplan-root .ip-opt:hover,.eplan-root table.ip-data tbody tr:hover{background:inherit;color:inherit;border-color:inherit}
  .eplan-root .ip-btn.primary:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
  .eplan-root .ip-btn.gold:hover{background:var(--gold);border-color:var(--gold)}
}

/* Fixed furniture clears the notch and the home indicator. */
.ip-toasts{bottom:calc(20px + env(safe-area-inset-bottom));right:calc(20px + env(safe-area-inset-right));left:calc(12px + env(safe-area-inset-left));align-items:flex-end;pointer-events:none}
.ip-toasts>*{pointer-events:auto}
.eplan-support{right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom))}
.ip-overlay{padding:20px;padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}

@media (max-width:760px){
  /* The soft keyboard covers a centred dialog; pin it to the top and let it
     scroll so the field being typed into and the buttons both stay reachable. */
  .ip-overlay{place-items:start center;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ip-modal{max-height:none;width:100%;margin:0 0 24px}
  .ip-mbody{overflow:visible}
  .ip-mfoot{position:sticky;bottom:0;z-index:1}

  /* Thumb-sized targets. 44px is the figure both platforms publish. */
  .eplan-root .ip-btn,.eplan-root .ip-inp{min-height:44px}
  .eplan-root .ip-btn.sm{min-height:40px;padding:9px 14px}
  .eplan-root .ip-x{min-width:44px;min-height:44px}
  .eplan-root .ip-opt{padding:12px 14px}
  .eplan-root .ip-opt input[type=radio],.eplan-root .ip-opt input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}

  /* Wide tables scroll sideways without stealing the page's vertical drag —
     the trap is letting the browser guess the gesture's axis. */
  .eplan-root .ip-tscroll{touch-action:pan-x pan-y;overscroll-behavior-x:contain}

  /* The paper's own furniture, clear of the home indicator. */
  .eplan-root .ip-main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  .eplan-root .ip-side{max-height:none}
}

/* A phone held sideways has very little height; give the dialog the room. */
@media (max-height:480px){
  .ip-overlay{place-items:start center}
  .ip-modal{max-height:none}
}

/* Lost-signal notice on the exam bar — visible without taking the paper away. */
.eplan-root .ip-geowarn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;border-radius:8px;background:#fdf1e3;color:#8a5220;border:1px solid #f0d3ae}
@media (max-width:760px){.eplan-root .ip-geowarn{width:100%;justify-content:center}}

/* ============================================================
   Full screen on a phone
   The app is moved to be a child of <body> (see initFullscreen in
   app.js) and given the viewport. Everything here assumes that has
   happened, so nothing below fires while the app sits in the page.
   ============================================================ */
html.eplan-fs,html.eplan-fs body{height:100%;overflow:hidden;overscroll-behavior:none}
/* The theme is still in the document, just not on screen — hiding it rather
   than removing it means the page is intact the moment the screen widens. */
/* The print surface belongs on this list. It is a part of the app like the
   others, and leaving it off hid it in fullscreen mode — invisibly, because
   :not(#id) carries that id's specificity, so this selector counts four IDs
   and outranks any single-ID rule trying to show it back. Printing therefore
   came out blank on exactly the setups that use fullscreen, and correct
   everywhere else. */
html.eplan-fs body>*:not(#eplan-root):not(#eplan-modal):not(#eplan-chat):not(#eplan-print):not(#wpadminbar):not(script):not(style):not(noscript){display:none !important}

html.eplan-fs #eplan-root{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;z-index:99990;margin:0;padding:0;background:var(--bg)}
html.eplan-fs.admin-bar-on #eplan-root{top:46px;height:calc(100vh - 46px);height:calc(100dvh - 46px)}

html.eplan-fs .ip-shell{height:100%;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden}
html.eplan-fs .ip-top{flex:0 0 auto;padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
html.eplan-fs .ip-bodyrow{flex:1 1 auto;min-height:0;position:relative}
/* One scroller, inside the app, so there is no page scrolling behind it and
   the iOS toolbars stop appearing and disappearing as you read. */
html.eplan-fs .ip-main{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-left:calc(16px + env(safe-area-inset-left));padding-right:calc(16px + env(safe-area-inset-right));
  padding-bottom:calc(40px + env(safe-area-inset-bottom))}
html.eplan-fs.admin-bar-on .ip-side{top:46px;height:calc(100vh - 46px);height:calc(100dvh - 46px)}
html.eplan-fs .ip-side .ip-nav[href]{text-decoration:none;color:var(--ink)}

/* The chat bubble and the toasts sit above the app, as they do in the page. */
html.eplan-fs #eplan-chat{z-index:99997}


/* ============================================================
   Portal polish — deliberate dismissal, keyboard, motion
   ============================================================ */

/* A dialog that has been typed into refuses a backdrop tap and says so with a
   small shake — the phone gesture for putting the keyboard away lands on the
   backdrop constantly, and it should not cost anyone their work. */
@keyframes ip-guard{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}55%{transform:translateX(6px)}80%{transform:translateX(-3px)}}
.ip-modal.guarded{animation:ip-guard .3s ease}

/* Keyboard users get the same gold ring everywhere. Literal colour, because
   the dialog host sits outside .eplan-root and the tokens do not resolve there. */
.eplan-root .ip-btn:focus-visible,.eplan-root .ip-nav:focus-visible,.eplan-root .ip-inp:focus-visible,
.eplan-root .ip-theme:focus-visible,.eplan-root .ip-burger:focus-visible,
.ip-mbody .ip-btn:focus-visible,.ip-mfoot .ip-btn:focus-visible,.ip-mbody .ip-inp:focus-visible,.ip-x:focus-visible{
  outline:3px solid #e2a017;outline-offset:2px}

/* Anyone who has asked the OS for less motion gets less motion. */
@media (prefers-reduced-motion:reduce){
  .eplan-root .ip-side{transition:none}
  .ip-modal.guarded{animation:none}
  .eplan-root .ip-rchev svg{transition:none}
  .ip-toast{transition:none}
}

/* ============================================================
   Daily Lesson Log — builder and printed sheet
   ============================================================ */

/* Day tabs. A filled day carries a dot, so a glance across the week shows what
   is still to write rather than making the teacher open each day to find out. */
.eplan-root .ip-daytabs{display:flex;gap:6px;margin:16px 0 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.eplan-root .ip-daytab{position:relative;flex:1 0 auto;min-width:78px;min-height:44px;padding:10px 14px;border:1px solid var(--line);
  background:var(--surface);color:var(--muted);border-radius:10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.eplan-root .ip-daytab.on{background:var(--blue-soft);border-color:#d3e2f4;color:var(--blue)}
.eplan-root .ip-daytab .dot{position:absolute;top:7px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--ok, #2f8f66)}
.eplan-root .ip-daytab:focus-visible{outline:3px solid #e2a017;outline-offset:2px}
.eplan-root.eplan-dark .ip-daytab{background:#131A2C;border-color:#243150;color:#9AA4BE}
.eplan-root.eplan-dark .ip-daytab.on{background:#182138;border-color:#5B8CFF;color:#9EC0FF}

/* The printed weekly sheet. Landscape, rows are the parts, columns are the
   days — the layout the log is checked against. */
.eplan-dll-week{font-family:"Times New Roman",Georgia,serif;color:#000;font-size:8.5px;line-height:1.25;background:#fff}
.eplan-dll-week .doc-h{text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:5px}
.eplan-dll-week table{width:100%;border-collapse:collapse;table-layout:fixed}
.eplan-dll-week td,.eplan-dll-week th{border:.6px solid #000;padding:3px 4px;vertical-align:top;text-align:left;word-wrap:break-word}
.eplan-dll-week .hdr td{padding:3px 5px}
.eplan-dll-week .hdr span{display:block;font-size:7px;text-transform:uppercase;letter-spacing:.05em;color:#444}
.eplan-dll-week .grid{margin-top:5px}
.eplan-dll-week .grid thead th{text-align:center;font-size:8px;letter-spacing:.04em;background:#eee}
.eplan-dll-week .grid .lbl{width:17%;font-weight:400;background:#f6f6f6}
.eplan-dll-week .grid .lbl.sub{padding-left:14px;font-style:italic}
.eplan-dll-week .grid .lbl .sub{font-style:italic;color:#444}
.eplan-dll-week .part th{background:#ddd;font-weight:700;letter-spacing:.05em;font-size:8.5px}
/* A part must not be split across pages if it can be helped. */
.eplan-dll-week .grid tr{page-break-inside:avoid}
.eplan-dll-week .sign{margin-top:8px;border:0}
.eplan-dll-week .sign td{border:0;padding:10px 6px 0;width:50%}
.eplan-dll-week .sign span{display:block;font-size:7.5px;text-transform:uppercase;letter-spacing:.06em;color:#444;margin-bottom:16px}
.eplan-dll-week .sign b{display:block;border-top:.6px solid #000;padding-top:3px;font-size:9px;text-transform:uppercase}
.eplan-dll-week .sign i{font-size:7.5px;color:#333}

/* Item tracking number on a review card — how a learner names an item they
   want to query, and how the teacher finds it again in the bank. */
.eplan-root .ip-qcard .qhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.eplan-root .ip-code.tn{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.02em;
  background:var(--surface-2,#eef2f7);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.eplan-root.eplan-dark .ip-code.tn{background:#0F1626;border-color:#243150;color:#9AA4BE}

/* Invigilation. The learner sees what is being recorded — a measure people
   know about deters, one they do not only catches. */
.eplan-root .ip-proctor{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:5px 10px;
  border-radius:8px;background:#fdf1e3;color:#8a5220;border:1px solid #f0d3ae}
.eplan-root.eplan-dark .ip-proctor{background:#2a1f12;color:#e7c64a;border-color:#4a3a1e}
.eplan-root .ip-away{color:#8a5220;font-weight:600}
.eplan-root.eplan-dark .ip-away{color:#E7C64A}
@media (max-width:760px){.eplan-root .ip-proctor{width:100%;justify-content:center}}

/* Copy friction on the question area. Answer boxes stay fully usable, or a
   learner could not select or correct their own typing. */
.eplan-root .ip-noselect .qtext,
.eplan-root .ip-noselect .ip-opt,
.eplan-root .ip-noselect .ip-qcard,
.eplan-root .ip-noselect .ip-qhead{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.eplan-root .ip-noselect input,.eplan-root .ip-noselect textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Bank check findings. A blocker is an item that cannot be answered correctly
   as stored; a note reads oddly but is answerable. */
.eplan-root .ip-gen.bad{border-left:3px solid var(--danger,#bf4530)}
.eplan-root .ip-findings{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.5}
.eplan-root .ip-findings li{margin:3px 0}
.eplan-root .ip-findings li.blocker{color:var(--danger,#bf4530)}
.eplan-root .ip-findings li.note{color:var(--muted)}
.eplan-root .ip-bad{color:var(--danger,#bf4530)}
.eplan-root.eplan-dark .ip-findings li.blocker,.eplan-root.eplan-dark .ip-bad{color:#E5484D}

/* Submission timestamps: the date and its time belong on one line, or a narrow
   column wraps them apart and they read as two separate facts. */
.eplan-root td.ip-when{white-space:nowrap;font-variant-numeric:tabular-nums}

/* A fault on the item's own card in the bank, so an unanswerable item does not
   have to be looked for. */
.eplan-root .ip-fault{display:flex;align-items:flex-start;gap:7px;margin:8px 0 0;padding:8px 10px;border-radius:8px;
  font-size:12.5px;line-height:1.45;background:#f8e5e0;color:#8d3324;border:1px solid #eec6bc}
.eplan-root .ip-fault b{font-weight:700}
.eplan-root.eplan-dark .ip-fault{background:#2a1618;color:#F2A9A2;border-color:#4a2320}
.eplan-root .ip-track.sm{font-size:10px;padding:1px 6px;margin-left:8px;vertical-align:middle}

/* The week column on the competency list: narrow, numeric, and out of the way
   of the text columns beside it. */
.eplan-root .ip-wk{width:58px;text-align:center;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px}

/* ============================================================
   The video shelf
   ------------------------------------------------------------
   A shelf, not a feed. The cards are ordered by the curriculum
   rather than by what was uploaded last, so what carries the eye
   is the competency label, not the thumbnail.

   The one warm note is Khan Academy's own green, used only where
   something is theirs — the channel link and the search fallback.
   Everywhere else this is the ePortal's navy and gold, because
   the shelf belongs to the division, not to the channel.
   ============================================================ */
.eplan-root{--ka:#14BF96;--ka-deep:#0E8E70}
.eplan-root.eplan-dark{--ka:#2FD3AC;--ka-deep:#14BF96}

.vs-head{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:2px}
.vs-head .sp{flex:1}
.vs-chan{display:inline-flex;align-items:center;gap:7px;background:var(--ka);color:#04231B;
  border:0;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.vs-chan:hover{background:var(--ka-deep);color:#fff}

.vs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:14px}

.vs-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);animation:vsIn .42s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes vsIn{to{opacity:1;transform:none}}
.vs-card:focus-within,.vs-card:hover{border-color:var(--blue);
  box-shadow:0 2px 4px rgba(10,37,64,.07),0 14px 34px rgba(10,37,64,.13);transform:translateY(-2px)}
.vs-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}

.vs-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--blue-soft);overflow:hidden}
.vs-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.vs-card:hover .vs-thumb img{transform:scale(1.045)}
.vs-play{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(10,37,64,0) 40%,rgba(10,37,64,.55));opacity:.9}
.vs-play i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;transition:transform .2s ease}
.vs-play i::after{content:"";border-left:14px solid var(--ink);border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:4px}
.vs-card:hover .vs-play i{transform:scale(1.12)}
.vs-mins{position:absolute;right:8px;bottom:8px;background:rgba(10,37,64,.86);color:#fff;
  font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:5px}

.vs-body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.vs-comp{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);font-weight:700}
.vs-title{font-size:14px;font-weight:600;line-height:1.3}
.vs-meta{font-size:11.5px;color:var(--muted);margin-top:auto}
.vs-note{font-size:12px;color:var(--muted);line-height:1.45}

/* Nothing shelved for a competency yet: a working search rather than a blank.
   The competency's own words make the query, so it is useful before anybody
   has curated anything. */
.vs-empty{border:1.5px dashed var(--line);border-radius:12px;padding:14px;display:flex;
  flex-direction:column;gap:7px;background:var(--surface-2)}
.vs-empty .vs-comp{color:var(--muted)}
.vs-search{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:transparent;
  border:1px solid var(--ka);color:var(--ka-deep);border-radius:999px;padding:5px 12px;
  font:inherit;font-size:12.5px;cursor:pointer}
.vs-search:hover{background:var(--ka);color:#04231B}
.eplan-root.eplan-dark .vs-search{color:var(--ka)}

.vs-player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vs-player iframe{width:100%;height:100%;border:0;display:block}

@media (prefers-reduced-motion:reduce){
  .vs-card{animation:none;opacity:1;transform:none;transition:none}
  .vs-card:hover{transform:none}
  .vs-thumb img,.vs-card:hover .vs-thumb img{transition:none;transform:none}
}

/* The shelf inside a lesson plan's Learning Resources box.
   Quiet by design: it is a suggestion beside what somebody is writing, not a
   second thing competing with it. */
.eplan-root .ilaw-shelf-in{margin-top:9px;border-left:2px solid var(--ka);padding-left:11px}
.eplan-root .ilaw-shelf-h{font-size:11.5px;color:var(--ka-deep);font-weight:650;
  display:flex;align-items:center;gap:5px;margin-bottom:6px}
.eplan-root.eplan-dark .ilaw-shelf-h{color:var(--ka)}
.eplan-root .ilaw-shelf-v{display:block;width:100%;text-align:left;background:var(--surface-2);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-bottom:5px;
  font:inherit;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.eplan-root .ilaw-shelf-v:hover{border-color:var(--ka);background:var(--surface)}
.eplan-root .ilaw-shelf-v b{display:block;font-size:12.5px;font-weight:600}
.eplan-root .ilaw-shelf-v span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.eplan-root .ilaw-shelf-v.on{border-color:var(--ok);opacity:.6;cursor:default}
.eplan-root .ilaw-shelf-v.on b::after{content:" \2713";color:var(--ok)}

/* A strand targeted this cycle, among the ones that are not. */
.eplan-root tr.ip-hi td{background:var(--gold-soft)}
.eplan-root tr.ip-hi td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.eplan-root.eplan-dark tr.ip-hi td{background:rgba(244,179,28,.10)}

/* Choosing strands for a training needs instrument. */
.eplan-root .tnb-pick{display:flex;gap:8px;align-items:flex-start;padding:5px 8px;border-radius:7px;
  font-size:12.5px;line-height:1.4;cursor:pointer}
.eplan-root .tnb-pick:hover{background:var(--surface-2)}
.eplan-root .tnb-pick input{margin-top:2px;flex:none}
.eplan-root .tnb-pick b{font-family:var(--mono);font-size:11.5px;flex:none}
.eplan-root .tnb-pick.tgt{background:var(--gold-soft)}

/* The QR for a public instrument link. */
.eplan-root .tn-qr{display:flex;justify-content:center;padding:14px;background:#fff;
  border:1px solid var(--line);border-radius:12px;margin:10px 0}
.eplan-root .tn-qr svg{width:208px;height:208px;display:block}

/* Writing your own questions for an instrument. */
.eplan-root .tnb-q{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.eplan-root .tnb-q span{flex:none;width:22px;text-align:right;font-family:var(--mono);
  font-size:12px;color:var(--muted)}

/* A written question and the answers its author gave it. */
.eplan-root .tnb-qb{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:9px;
  background:var(--surface)}
.eplan-root .tnb-opts{margin:7px 0 0 30px;display:flex;flex-direction:column;gap:5px}
.eplan-root .tnb-opt{display:flex;gap:8px;align-items:center}
.eplan-root .tnb-opt input[type=checkbox]{flex:none}
.eplan-root .tnb-opt .ip-inp{padding:5px 8px;font-size:12.5px}

/* The one scale every question on an instrument is answered with. */
.eplan-root .tnb-scale{display:flex;flex-direction:column;gap:3px;padding:9px 12px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:9px;font-size:12.5px}
.eplan-root .tnb-scale b{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-right:6px}

/* ============================================================
   Tabs
   ------------------------------------------------------------
   These were being used on three screens with no styling behind
   them at all, so they rendered as the browser's own grey
   buttons — the one place in the app that looked unfinished.

   Built as a pill row rather than an underline, matching the
   dashboards inside the frames so a programme page and the board
   it sits beside do not use two different idioms. The chosen one
   is the theme's DepEd blue; the rest recede.
   ============================================================ */
.eplan-root .tabs{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 0}

.eplan-root .tab{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:7px 15px;
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
  -webkit-appearance:none;appearance:none;
}
.eplan-root .tab:hover{
  background:var(--surface);
  border-color:var(--blue);
  color:var(--blue);
}
/* The keyboard ring is the app's own, not the browser's, and sits
   outside the pill so a round edge does not clip it. */
.eplan-root .tab:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.eplan-root .tab[aria-selected="true"]{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  font-weight:650;
}
.eplan-root .tab[aria-selected="true"]:hover{
  background:var(--blue-2);
  border-color:var(--blue-2);
  color:#fff;
}

.eplan-root.eplan-dark .tab{background:var(--surface-2);border-color:var(--line);color:var(--muted)}
.eplan-root.eplan-dark .tab:hover{color:var(--blue);border-color:var(--blue)}
.eplan-root.eplan-dark .tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#04101D}

/* Narrow screens: the row scrolls sideways rather than stacking into
   a column, which turns three tabs into three lines of nothing. */
@media (max-width:560px){
  .eplan-root .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:3px;
    scrollbar-width:none;-ms-overflow-style:none}
  .eplan-root .tabs::-webkit-scrollbar{display:none}
  .eplan-root .tab{flex:none}
}

@media (prefers-reduced-motion:reduce){
  .eplan-root .tab{transition:none}
}

/* An option on a professional assessment. */
.eplan-root .td-opt{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;
  border-radius:8px;font-size:13.5px;line-height:1.4;cursor:pointer}
.eplan-root .td-opt:hover{background:var(--surface-2)}
.eplan-root .td-opt input{margin-top:3px;flex:none}

/* ============================================================
   The sign-in gate
   ------------------------------------------------------------
   The buttons here were the app's ordinary ones: 14px type, 10px
   padding, and a --line border that is nearly the colour of the
   panel behind it. That is right in a dense admin screen where
   they sit among other controls, and wrong here, where two
   buttons are the only things on the page and one of them is the
   whole reason somebody came.

   Bigger, and the secondary given a border that can actually be
   seen. On a narrow screen they go full width and stack, because
   two buttons side by side on a phone are two half-width targets.
   ============================================================ */
.eplan-gate .ip-panel{
  padding:26px 22px;
  border-radius:14px;
}
.eplan-gate h3{font-size:20px;line-height:1.25}

.eplan-gate .ip-bar{gap:10px;margin-top:4px}

.eplan-gate .ip-btn{
  font-size:15.5px;
  font-weight:650;
  padding:13px 22px;
  border-radius:10px;
  min-height:48px;
  /* A border of --line is a whisper against --surface. The secondary
     action has to look like something you can press. */
  border:1.5px solid var(--blue);
  color:var(--blue);
  background:var(--surface);
}
.eplan-gate .ip-btn:hover{background:var(--blue-soft)}

.eplan-gate .ip-btn.primary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 2px 4px rgba(10,37,64,.10),0 8px 22px rgba(11,61,145,.22);
}
.eplan-gate .ip-btn.primary:hover{background:var(--blue-2);border-color:var(--blue-2)}

.eplan-gate .ip-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

@media (max-width:560px){
  /* Two buttons side by side on a phone are two half-width targets. */
  .eplan-gate .ip-bar{flex-direction:column;align-items:stretch}
  .eplan-gate .ip-btn{width:100%}
}

/* A brief is read and copied, not edited: monospace so its structure shows,
   and tall enough that scrolling is not the first thing somebody does. */
.eplan-root .dk-brief{font-family:var(--mono);font-size:12.5px;line-height:1.5;white-space:pre}


/* ── PPST ────────────────────────────────────────────────────────────────
   This section used to be a table of codes. It is the page a teacher opens
   when deciding what to work on for a year, so it is given the weight of a
   reference somebody reads rather than a grid they scan past. */
.pp-hero{background:linear-gradient(100deg,#08203A,#0A2540 44%,#123763);color:#EAF0FB;border:0}
.pp-hero__k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9DB0C8}
.pp-hero__h{font-family:var(--serif);font-size:23px;line-height:1.2;margin:8px 0 0;color:#fff;font-weight:700}
.pp-hero__p{color:#B9C8DE;margin:9px 0 0;max-width:64ch;font-size:14.5px}
.pp-figs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.pp-fig b{display:block;font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--gold)}
.pp-fig span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#9DB0C8}
.pp-cycle{margin:16px 0 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#D8E4F5}
.pp-cycle .ip-small{color:#9DB0C8}

.pp-care{border-left:3px solid var(--gold)}
.pp-clar{display:grid;gap:10px;margin-top:8px}
.pp-clar__i{display:grid;gap:2px;padding-left:14px;position:relative}
.pp-clar__i::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.pp-clar__i b{font-size:14px}
.pp-clar__i span{font-size:13.5px;color:var(--muted)}

.pp-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:10px}
.pp-stage{display:flex;gap:11px;background:var(--card-2,var(--surface-2,#F9FBFD));border:1px solid var(--line);border-radius:10px;padding:13px}
.pp-stage__n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700}
.pp-stage__b b{display:block;font-size:15px}
.pp-stage__who{display:block;font-size:12.5px;color:var(--blue);margin-top:1px}
.pp-stage__b p{margin:7px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.pp-stage__cot{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);background:var(--blue-soft);border-radius:5px;padding:2px 7px}

.pp-doms{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:10px}
.pp-dom{display:grid;gap:3px;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:12px 13px;cursor:pointer;font:inherit;color:inherit;transition:border-color .14s,background .14s}
.pp-dom:hover{border-color:var(--blue)}
.pp-dom.is-on{border-color:var(--gold);background:var(--gold-soft,#FEF4DA)}
.pp-dom__n{font-family:var(--mono);font-size:11px;color:var(--gold-deep,#7A5B00);font-weight:700}
.pp-dom__t{font-weight:640;font-size:14.5px;line-height:1.25}
.pp-dom__a{font-size:13px;color:var(--muted);line-height:1.45}
.pp-dom__c{font-family:var(--mono);font-size:11px;color:var(--faint,var(--muted));margin-top:3px}

.pp-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pp-q{flex:1 1 240px;min-width:0}

.pp-list{display:grid;gap:6px;margin-top:8px}
.pp-item{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.pp-item.is-tg{border-left:3px solid var(--gold)}
.pp-item.is-mine{border-left:3px solid var(--ok)}
.pp-item__h{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;
  text-align:left;background:transparent;border:0;padding:11px 13px;cursor:pointer;font:inherit;color:inherit}
.pp-item__h:hover{background:var(--card-2,var(--surface-2,#F9FBFD))}
.pp-item__k{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--blue)}
.pp-item__t{font-size:14.5px;line-height:1.35}
.pp-item__tags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.ip-pill.mine{background:var(--ok-bg,#E6F3EC);color:var(--ok)}
.pp-item__d{padding:0 13px 13px 13px;border-top:1px dashed var(--line)}
.pp-codes{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0}
.pp-code{background:var(--blue-soft);border-radius:7px;padding:6px 10px;min-width:104px}
.pp-code b{display:block;font-family:var(--mono);font-size:13.5px;color:var(--blue-2,var(--blue))}
.pp-code span{font-size:11px;color:var(--muted)}
.pp-mine{margin-top:9px;padding:9px 11px;background:var(--ok-bg,#E6F3EC);border-radius:8px;font-size:13px}

@media(max-width:640px){
  .pp-item__h{grid-template-columns:48px minmax(0,1fr)}
  .pp-item__tags{grid-column:1 / -1;justify-content:flex-start;margin-top:4px}
}

.pp-origin{background:var(--gold-soft,#FEF4DA);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;padding:10px 13px;margin-bottom:10px;font-size:13.5px;color:var(--muted)}
.pp-origin .ip-pill{vertical-align:1px}

.pp-edit{background:var(--blue-soft);border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:10px}
.pp-edit__h{display:grid;gap:2px;margin-bottom:9px}
.pp-edit__h b{font-size:14.5px}
.pp-edit__h span{font-size:13px;color:var(--muted)}
.pp-edit__a{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.pp-editbtn{margin-left:auto}

.pp-pick{display:flex;gap:16px;flex-wrap:wrap;padding:9px 13px 0 13px;font-size:13px}
.pp-pick label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pp-pick label.is-off{opacity:.45;cursor:default}
.pp-item.is-pick{background:var(--blue-soft)}

.pp-edit__f{display:grid;grid-template-columns:2fr 1fr;gap:9px;margin-bottom:8px}
.pp-edit__f label{display:grid;gap:3px;font-size:12.5px;color:var(--muted)}
@media(max-width:640px){.pp-edit__f{grid-template-columns:1fr}}

/* ── PMES ─────────────────────────────────────────────────────────────── */
.pm-hero{background:linear-gradient(100deg,#08203A,#0A2540 44%,#123763);color:#EAF0FB;border:0}
.pm-hero__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9DB0C8;line-height:1.6}
.pm-hero__h{font-family:var(--serif);font-size:23px;margin:8px 0 0;color:#fff;font-weight:700}
.pm-hero__p{color:#B9C8DE;margin:8px 0 0;max-width:64ch;font-size:14.5px}
.pm-figs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.pm-fig b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--gold)}
.pm-fig span{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#9DB0C8}

.pm-pick{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px}
.pm-cos{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:10px}
.pm-co{background:var(--card-2,var(--surface-2,#F9FBFD));border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:9px;padding:12px}
.pm-co b{display:block;font-size:14.5px}
.pm-co>span{font-size:12.5px;color:var(--blue)}
.pm-co__c{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 6px}
.pm-co__c .sg-code{background:var(--blue-soft);border-radius:5px;padding:2px 7px;font-size:12.5px}
.pm-mine{background:var(--gold-soft,#FEF4DA);font-weight:700}

.pm-phases{display:grid;gap:11px;margin-top:10px}
.pm-phase{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px}
.pm-phase__n{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700}
.pm-phase b{display:block;font-size:15px}
.pm-phase__w{display:block;font-size:12.5px;color:var(--blue);margin-top:1px}
.pm-phase p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.pm-phase__t{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.pm-rules{border-left:3px solid var(--gold)}
.pm-comp{margin-top:11px}
.pm-comp b{display:block;font-size:14.5px}
.pm-comp>span{display:block;margin-bottom:6px}
.pm-comp>div{display:flex;flex-wrap:wrap;gap:5px}
tr.ip-warn td{background:var(--warn-bg,#FDF0D8)}

.pp-warn{background:var(--warn-bg,#FDF0D8);border-left:3px solid var(--warn,#A96A08);border-radius:0 8px 8px 0;
  padding:10px 12px;margin-bottom:10px;font-size:13.5px;color:var(--ink)}

/* ── COT ──────────────────────────────────────────────────────────────── */
.ct-hero{background:linear-gradient(100deg,#08203A,#0A2540 44%,#123763);color:#EAF0FB;border:0}
.ct-hero__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9DB0C8}
.ct-hero__h{font-family:var(--serif);font-size:23px;margin:8px 0 0;color:#fff;font-weight:700}
.ct-hero__p{color:#B9C8DE;margin:8px 0 0;max-width:64ch;font-size:14.5px}
.ct-figs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.ct-fig b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--gold)}
.ct-fig span{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#9DB0C8}
.ct-steps{display:grid;gap:12px;margin-top:10px}
.ct-step{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:10px;padding:13px 15px}
.ct-step__h{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.ct-step__p{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ct-step__h b{font-size:15px}
.ct-step ul{margin:0;padding-left:20px}
.ct-step li{margin-bottom:6px;font-size:13.5px;color:var(--muted);line-height:1.5}
.ct-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.ct-mode{background:var(--card-2,var(--surface-2,#F9FBFD));border:1px solid var(--line);border-radius:9px;padding:11px 13px;display:grid;gap:4px}
.ct-mode.is-def{border-color:var(--ok);background:var(--ok-bg,#E6F3EC)}
.ct-mode b{font-size:14px}
.ct-ment{margin-top:10px}
.ct-ment b{display:block;font-size:14px;margin-bottom:5px}
.ct-ment div{display:flex;flex-wrap:wrap;gap:5px}
.ct-ment .sg-code{background:var(--blue-soft);border-radius:5px;padding:3px 8px;font-size:12.5px}
.ct-resched{border-left:3px solid var(--gold)}
.ct-resched ul{margin:8px 0;padding-left:20px}
.ct-resched li{margin-bottom:6px;font-size:13.5px;color:var(--muted)}

/* ── e-IPCRF ──────────────────────────────────────────────────────────── */
.ic-hero{background:linear-gradient(100deg,#08203A,#0A2540 44%,#123763);color:#EAF0FB;border:0}
.ic-hero__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9DB0C8}
.ic-hero__h{font-family:var(--serif);font-size:23px;margin:8px 0 0;color:#fff;font-weight:700}
.ic-hero__p{color:#B9C8DE;margin:8px 0 0;max-width:62ch;font-size:14.5px}
.ic-figs{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0}
.ic-fig b{display:block;font-family:var(--mono);font-size:24px;font-weight:600;color:var(--gold)}
.ic-fig span{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#9DB0C8}
.ic-unknown{background:var(--warn-bg,#FDF0D8);border-left:3px solid var(--warn,#A96A08);border-radius:0 8px 8px 0;
  padding:10px 13px;margin:10px 0;font-size:13.5px;color:var(--muted)}
.ic-unknown b{color:var(--ink)}
.ic-m{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;width:22px;height:22px;
  line-height:22px;text-align:center;border-radius:5px;margin-right:4px}
.ic-m--q{background:var(--blue-soft);color:var(--blue)}
.ic-m--e{background:var(--gold-soft,#FEF4DA);color:var(--gold-deep,#7A5B00)}
.ic-m--t{background:var(--ok-bg,#E6F3EC);color:var(--ok)}
.ic-parts{display:grid;gap:10px;margin-top:10px}
.ic-part{display:flex;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.ic-part__n{flex:0 0 auto;min-width:64px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--blue);padding-top:2px}
.ic-part b{display:block;font-size:14.5px}
.ic-part__w{display:block;font-size:12.5px;color:var(--blue);margin-top:1px}
.ic-part p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}

.ic-prog{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:#B9C8DE;font-size:13px}
.ic-prog b{color:#fff}
.ic-prog__bar{flex:1 1 180px;max-width:260px;height:7px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.ic-prog__bar i{display:block;height:100%;background:var(--gold);border-radius:4px;transition:width .25s ease}
.ic-acts{display:flex;gap:8px;align-items:flex-end;margin-left:auto}
.ic-table td{vertical-align:top}
.ic-table tr.ic-done td{background:var(--ok-bg,#E6F3EC)}
.ic-table td.ic-kra{background:var(--blue-soft);vertical-align:middle;text-align:center}
.ic-table tfoot td{background:var(--card-2,var(--surface-2,#F9FBFD));border-top:2px solid var(--line)}
.ic-ins{min-width:190px}
.ic-in{display:inline-flex;flex-direction:column;gap:2px;margin:0 8px 4px 0}
.ic-in span{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* 16px is not a style choice. Safari on iOS zooms the page in whenever a
   focused field is smaller than that, and then does not zoom back out — so a
   teacher entering fourteen COT scores on a phone would be dragging a
   magnified page sideways after the first one. The height is 44px because that
   is the smallest thing a thumb hits reliably. */
.ic-in input,.ic-in select{width:84px;min-height:44px;padding:8px 9px;border:1px solid var(--line);
  border-radius:8px;font:inherit;font-size:16px;background:var(--surface);color:var(--ink)}
.ic-in input:focus,.ic-in select:focus{outline:2px solid var(--gold);outline-offset:1px}
.ic-in--wide{display:flex;margin-bottom:10px}
.ic-in--wide input{width:100%;max-width:240px}
.ic-tr{display:block;font-size:11.5px;color:var(--ok);margin-top:2px}
.ic-sum{margin-bottom:12px}
.ic-final td{background:var(--gold-soft,#FEF4DA);border-top:2px solid var(--gold)}
.ic-scale{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.ic-scale__i{font-family:var(--mono);font-size:12px;background:var(--blue-soft);border-radius:6px;padding:3px 8px;color:var(--muted)}
.ic-scale__i b{color:var(--blue)}
.ic-scale__i i{font-style:normal;color:var(--ink)}
.ic-note{border-left:3px solid var(--gold)}
.ic-note p{font-size:13.5px;color:var(--muted);margin:0 0 8px}
@media print{
  .ic-acts,.tabs,.pm-pick .ip-label{display:none!important}
  .ic-hero{background:none!important;color:#111!important;border:1px solid #bbb!important}
  .ic-hero__h,.ic-hero__p,.ic-hero__k,.ic-prog{color:#111!important}
  .ic-in input,.ic-in select{border:0;padding:0;min-height:0;font-size:12px}
}


/* ── Touch ────────────────────────────────────────────────────────────────
   Everything below applies only where the pointer is coarse — a finger. On a
   mouse the app keeps its density; on a phone the things you tap get big
   enough to hit.

   The minimums are not arbitrary: Apple asks for 44pt, Android for 48dp. The
   buttons here were about 30 and 36 pixels tall, which is fine to click and
   fiddly to tap, and fiddly on a form where a teacher enters fourteen figures
   is fourteen chances to hit the wrong row. */
@media (pointer: coarse) {
  .eplan-root .ip-btn,
  .eplan-root .tab,
  .eplan-root button,
  .eplan-root [role="button"],
  .eplan-root select,
  .eplan-root .ip-input,
  .eplan-root input[type="text"],
  .eplan-root input[type="search"],
  .eplan-root input[type="number"],
  .eplan-root input[type="email"],
  .eplan-root input[type="url"]{
    min-height:44px;
  }
  /* Rows that are themselves the tap target. */
  .eplan-root .pp-dom,
  .eplan-root .pp-item__h,
  .eplan-root .ct-mode,
  .eplan-root .pm-co{ min-height:48px }

  /* A checkbox or radio at its native size is a poor target, and the label
     beside it usually is not one at all. */
  .eplan-root label > input[type="checkbox"],
  .eplan-root label > input[type="radio"]{ width:20px;height:20px }
  .eplan-root .pp-pick label{ min-height:44px;display:inline-flex;align-items:center }

  /* Safari on iOS zooms in on any focused field under 16px and does not zoom
     back out. Applied here rather than everywhere so desktop keeps its scale. */
  .eplan-root input,
  .eplan-root select,
  .eplan-root textarea{ font-size:16px }

  /* Removes the old 300ms wait before a tap registers, and the grey flash. */
  .eplan-root button,
  .eplan-root .ip-btn,
  .eplan-root .tab,
  .eplan-root a{ touch-action:manipulation;-webkit-tap-highlight-color:rgba(11,61,145,.12) }
}

/* Hover styling belongs to devices that can hover. Without this a tap leaves
   the hover state stuck on until something else is tapped, which reads as a
   selection that is not there. */
@media (hover: none) {
  .eplan-root .pp-dom:hover{ border-color:var(--line);background:var(--surface) }
  .eplan-root .pp-dom.is-on:hover{ border-color:var(--gold);background:var(--gold-soft,#FEF4DA) }
  .eplan-root .pp-item__h:hover{ background:transparent }
  .eplan-root .q:hover{ border-color:var(--line);background:var(--surface) }
}

/* ── Live records ─────────────────────────────────────────────────────── */
.fm-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:10px 0;
  padding:12px;background:var(--card-2,var(--surface-2,#F9FBFD));border:1px solid var(--line);border-radius:9px}
.fm-head .ip-label{display:block;margin-bottom:2px}
.fm-head b{font-size:14.5px}
.fm-note{border-left:3px solid var(--gold);padding-left:10px;margin:0 0 12px}
.fm-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.fm-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:10px}
.fm-open h4{margin-top:10px}
.ip-pill.warn{background:var(--warn-bg,#FDF0D8);color:var(--warn,#A96A08)}