/* ═══════════════════════════════════════════════════════════════════
   ITI GUIDE — interface layer
   ───────────────────────────────────────────────────────────────────
   This app replaces a paper attendance register and a shelf of lesson
   files. So it is built like good workshop equipment: everything
   labelled, everything within reach, nothing decorative.

   Loaded last so it settles arguments with app.css.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── surface ── */
  --u-paper:#FFFFFF;
  --u-floor:#F4F6FA;        /* page behind the cards */
  --u-sunk:#EDF1F7;         /* wells, table headers */

  /* ── ink: four steps, no more ── */
  --u-ink:#12203A;          /* headings, numbers that matter */
  --u-text:#3D4A61;         /* body */
  --u-soft:#6B7A93;         /* labels, secondary */
  --u-faint:#9AA7BC;        /* placeholders, disabled */

  /* ── line ── */
  --u-rule:#E2E8F1;
  --u-rule-firm:#CBD5E3;

  /* ── the one bright thing: action ── */
  --u-act:#F7941D;
  --u-act-deep:#DE7C09;
  --u-act-tint:#FFF5E7;
  --u-act-ink:#6B3E00;

  /* ── structure ── */
  --u-navy:#1B3A6B;
  --u-navy-deep:#12294D;
  --u-navy-tint:#EDF3FB;

  /* ── status: only on data ── */
  --u-yes:#0E7A56;   --u-yes-tint:#E8F6F0;
  --u-no:#C0392B;    --u-no-tint:#FDF0EE;
  --u-wait:#9A6207;  --u-wait-tint:#FFF6E5;

  /* ── depth: two levels only ── */
  --u-lift:0 1px 2px rgba(18,32,58,.06), 0 2px 8px -4px rgba(18,32,58,.10);
  --u-lift-2:0 8px 28px -12px rgba(18,32,58,.28);

  /* ── radius: three sizes, each with a job ── */
  --u-r-in:8px;      /* inputs, small controls */
  --u-r-card:14px;   /* cards, panels */
  --u-r-sheet:20px;  /* sheets, dialogs */

  --u-tap:44px;      /* smallest comfortable touch target */
}

/* ═══════════════ TYPE ═══════════════
   Two families already in place. What was missing is a scale —
   sizes that relate to each other instead of drifting. */
.u-app, body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--u-text);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.u-h1{font-family:'Poppins',sans-serif;font-size:27px;font-weight:800;line-height:1.2;letter-spacing:-.5px;color:var(--u-ink)}
.u-h2{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.3px;color:var(--u-ink)}
.u-h3{font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;line-height:1.3;color:var(--u-ink)}
.u-num{font-family:'Poppins',sans-serif;font-weight:800;letter-spacing:-.5px;color:var(--u-ink);font-variant-numeric:tabular-nums}
.u-lab{font-size:12px;font-weight:700;color:var(--u-soft)}
.u-sub{font-size:13px;color:var(--u-soft);line-height:1.55}

/* numbers in tables line up */
table td,table th,.u-num,input[type=number]{font-variant-numeric:tabular-nums}

/* ═══════════════ BUTTONS ═══════════════
   One shape. Weight signals importance, not colour alone. */
.u-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--u-tap);padding:0 18px;
  border:1.5px solid var(--u-rule-firm);border-radius:var(--u-r-in);
  background:var(--u-paper);color:var(--u-navy);
  font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:border-color .14s, background .14s, color .14s;
}
.u-btn:hover{border-color:var(--u-navy);background:var(--u-navy-tint)}
.u-btn:active{transform:translateY(.5px)}
.u-btn:focus-visible{outline:2px solid var(--u-act);outline-offset:2px}

.u-btn-go{background:var(--u-act);border-color:var(--u-act);color:var(--u-act-ink)}
.u-btn-go:hover{background:var(--u-act-deep);border-color:var(--u-act-deep);color:#fff}

.u-btn-quiet{border-color:transparent;background:transparent;color:var(--u-soft)}
.u-btn-quiet:hover{background:var(--u-sunk);color:var(--u-ink);border-color:transparent}

.u-btn-risk{border-color:#E4B5AE;color:var(--u-no)}
.u-btn-risk:hover{background:var(--u-no-tint);border-color:var(--u-no)}

.u-btn-sm{min-height:34px;padding:0 12px;font-size:13px}
.u-btn[disabled],.u-btn:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════ FIELDS ═══════════════ */
.u-field{display:block;margin-bottom:16px}
.u-field>span{display:block;font-size:12.5px;font-weight:700;color:var(--u-ink);margin-bottom:6px}
.u-field>span em{font-style:normal;color:var(--u-no)}
.u-input,.u-select,.u-area{
  display:block;width:100%;box-sizing:border-box;
  min-height:var(--u-tap);padding:11px 13px;
  border:1.5px solid var(--u-rule-firm);border-radius:var(--u-r-in);
  background:var(--u-paper);
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:600;color:var(--u-ink);
  transition:border-color .14s, box-shadow .14s;
}
.u-input:hover,.u-select:hover,.u-area:hover{border-color:var(--u-faint)}
.u-input:focus,.u-select:focus,.u-area:focus{
  outline:none;border-color:var(--u-act);
  box-shadow:0 0 0 3px rgba(247,148,29,.16);
}
.u-input::placeholder,.u-area::placeholder{color:var(--u-faint);font-weight:500}
.u-area{min-height:96px;resize:vertical;line-height:1.65;font-weight:500}
.u-help{display:block;font-size:12px;color:var(--u-soft);margin-top:5px;line-height:1.5}
.u-input.is-bad,.u-select.is-bad{border-color:var(--u-no);box-shadow:0 0 0 3px rgba(192,57,43,.13)}

/* ═══════════════ CARDS ═══════════════
   A card means "this is one thing". Not used as wallpaper. */
.u-card{
  background:var(--u-paper);
  border:1px solid var(--u-rule);
  border-radius:var(--u-r-card);
  box-shadow:var(--u-lift);
}
.u-card-hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--u-rule);
}
.u-card-hd h3{margin:0;font-family:'Poppins',sans-serif;font-size:15.5px;font-weight:700;color:var(--u-ink)}
.u-card-bd{padding:18px}

/* ═══════════════ STATUS ═══════════════ */
.u-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;
  font-size:12px;font-weight:700;white-space:nowrap;
}
.u-tag-yes{background:var(--u-yes-tint);color:var(--u-yes)}
.u-tag-no{background:var(--u-no-tint);color:var(--u-no)}
.u-tag-wait{background:var(--u-wait-tint);color:var(--u-wait)}
.u-tag-off{background:var(--u-sunk);color:var(--u-soft)}

/* ═══════════════ TABLES ═══════════════
   Instructors read 30-row lists every day. Rows stay tight,
   the header stays put, and the eye has a rule to follow. */
.u-table{width:100%;border-collapse:collapse;font-size:14px}
.u-table th{
  position:sticky;top:0;z-index:2;
  background:var(--u-sunk);color:var(--u-ink);
  text-align:left;padding:10px 13px;font-size:12.5px;font-weight:700;
  border-bottom:1px solid var(--u-rule-firm);white-space:nowrap;
}
.u-table td{padding:11px 13px;border-bottom:1px solid var(--u-rule);color:var(--u-text)}
.u-table tbody tr:last-child td{border-bottom:none}
.u-table tbody tr:hover td{background:#FAFCFF}
.u-table td b,.u-table td strong{color:var(--u-ink);font-weight:700}

/* ═══════════════ EMPTY & LOADING ═══════════════
   An empty screen says what to do next, not "no data". */
.u-empty{padding:44px 24px;text-align:center}
.u-empty-ic{font-size:34px;line-height:1;margin-bottom:12px;opacity:.85}
.u-empty h4{margin:0 0 6px;font-family:'Poppins',sans-serif;font-size:16px;font-weight:700;color:var(--u-ink)}
.u-empty p{margin:0 auto 16px;font-size:13.5px;color:var(--u-soft);line-height:1.6;max-width:38ch}

.u-skel{
  background:linear-gradient(90deg,var(--u-sunk) 25%,#F7F9FC 50%,var(--u-sunk) 75%);
  background-size:200% 100%;
  animation:uShimmer 1.4s ease-in-out infinite;
  border-radius:6px;height:13px;margin-bottom:9px;
}
.u-skel:nth-child(2){width:82%}
.u-skel:nth-child(3){width:64%}
@keyframes uShimmer{to{background-position:-200% 0}}

/* ═══════════════ SHEETS & DIALOGS ═══════════════ */
.u-sheet-bg{
  position:fixed;inset:0;z-index:9000;
  background:rgba(12,18,32,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.u-sheet{
  width:100%;max-width:520px;max-height:90vh;overflow:auto;
  background:var(--u-paper);border-radius:var(--u-r-sheet);
  box-shadow:var(--u-lift-2);
}

/* ═══════════════ MOBILE ═══════════════
   Trainees are on phones with small data budgets. The four things
   they actually open get a permanent home at the bottom. */
@media (max-width:820px){
  .u-card{border-radius:12px}
  .u-card-bd{padding:15px}
  .u-h1{font-size:23px}
  .u-h2{font-size:18px}
  .u-table{font-size:13.5px}
  .u-table th,.u-table td{padding:10px}
}

/* ═══════════════ QUALITY FLOOR ═══════════════ */
*:focus-visible{outline:2px solid var(--u-act);outline-offset:2px;border-radius:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}
::selection{background:var(--u-act-tint);color:var(--u-act-ink)}

/* scrollbars that don't shout */
.u-card ::-webkit-scrollbar,.u-sheet ::-webkit-scrollbar{width:9px;height:9px}
.u-card ::-webkit-scrollbar-thumb,.u-sheet ::-webkit-scrollbar-thumb{
  background:var(--u-rule-firm);border-radius:99px;
}
.u-card ::-webkit-scrollbar-thumb:hover,.u-sheet ::-webkit-scrollbar-thumb:hover{background:var(--u-faint)}
.u-card ::-webkit-scrollbar-track,.u-sheet ::-webkit-scrollbar-track{background:transparent}

/* ═══════════════════════════════════════════════════════════════════
   TODAY STRIP — the one bold element
   The instructor's first question every morning is "what do I owe
   today?". This answers it before anything else on the screen.
   ═══════════════════════════════════════════════════════════════════ */
.u-today{
  background:linear-gradient(118deg,var(--u-navy-deep) 0%,var(--u-navy) 68%,#22508F 100%);
  border-radius:var(--u-r-card);
  padding:20px 22px;margin-bottom:18px;
  position:relative;overflow:hidden;color:#fff;
}
.u-today::after{
  content:'';position:absolute;right:-70px;top:-90px;width:250px;height:250px;
  border-radius:50%;background:radial-gradient(circle,rgba(247,148,29,.26),transparent 68%);
  pointer-events:none;
}
.u-today-top{position:relative;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.u-today-hi{font-family:'Poppins',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0}
.u-today-date{font-size:12.5px;color:#B9C9E2;font-weight:600}
.u-today-jobs{position:relative;z-index:1;display:flex;gap:9px;flex-wrap:wrap}
.u-job{
  display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 15px;
  background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;color:#fff;
  font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:background .14s,border-color .14s;
}
.u-job:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.36)}
.u-job.is-due{background:var(--u-act);border-color:var(--u-act);color:var(--u-act-ink)}
.u-job.is-due:hover{background:var(--u-act-deep);border-color:var(--u-act-deep);color:#fff}
.u-job.is-done{opacity:.62}
.u-job-n{
  background:rgba(255,255,255,.22);border-radius:99px;padding:1px 7px;
  font-size:11.5px;font-weight:800;
}
.u-job.is-due .u-job-n{background:rgba(107,62,0,.18)}

@media (max-width:820px){
  .u-today{padding:17px 16px}
  .u-today-hi{font-size:17px}
  .u-today-jobs{flex-direction:column}
  .u-job{width:100%;justify-content:flex-start}
}


/* ═══════════════════════════════════════════════════════════════════
   ADMIN — teacher-wise student cards
   A grid of teachers ordered by class size. Tapping one opens the
   roll list underneath, so the admin can check any class in place.
   ═══════════════════════════════════════════════════════════════════ */
.admin-teacher-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}

.atsc{
  background:var(--u-paper);border:1px solid var(--u-rule);
  border-radius:var(--u-r-card);overflow:hidden;cursor:pointer;
  transition:border-color .14s, box-shadow .14s;
}
.atsc:hover{border-color:var(--u-rule-firm);box-shadow:var(--u-lift)}
.atsc.open{border-color:var(--u-act);box-shadow:var(--u-lift)}

.atsc-top{display:flex;align-items:center;gap:12px;padding:14px 15px}
.atsc-ini{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;
  background:var(--u-navy-tint);color:var(--u-navy);
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:800;
}
.atsc-id{flex:1;min-width:0}
.atsc-id b{
  display:block;font-size:14px;font-weight:700;color:var(--u-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.atsc-id i{
  display:block;font-style:normal;font-size:12px;color:var(--u-soft);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.atsc-n{
  flex-shrink:0;min-width:36px;text-align:center;
  background:var(--u-act);color:var(--u-act-ink);border-radius:99px;padding:4px 11px;
  font-family:'Poppins',sans-serif;font-size:14px;font-weight:800;
}
.atsc-n.zero{background:var(--u-sunk);color:var(--u-faint)}

.atsc-kids{display:none;border-top:1px solid var(--u-rule);max-height:280px;overflow:auto}
.atsc.open .atsc-kids{display:block}
.atsc-tbl{width:100%;border-collapse:collapse;font-size:13px}
.atsc-tbl th{
  position:sticky;top:0;background:var(--u-sunk);color:var(--u-ink);
  text-align:left;padding:7px 12px;font-size:11.5px;font-weight:700;
}
.atsc-tbl td{padding:7px 12px;border-bottom:1px solid var(--u-rule);color:var(--u-text)}
.atsc-tbl tr:last-child td{border-bottom:none}
.atsc-tbl td.r{font-weight:700;color:var(--u-navy);width:82px}
.atsc-tbl td.n{color:var(--u-ink);font-weight:600}
.atsc-none{padding:20px;text-align:center;font-size:13px;color:var(--u-soft)}

.atsc-orph{border-style:dashed;border-color:#F0C888;background:var(--u-wait-tint)}
.atsc-orph .atsc-ini{background:#FBE8C8;color:var(--u-wait)}
.atsc-orph .atsc-n{background:var(--u-wait);color:#fff}

.admin-loading-block{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:11px;
  padding:38px 20px;color:var(--u-soft);font-size:13.5px;
}

@media (max-width:640px){
  .admin-teacher-grid{grid-template-columns:1fr}
}


/* ═══════════════════════════════════════════════════════════════════
   PROGRESSIVE ATTENDANCE CARDS
   One card per trainee, lowest attendance first. The percentage is
   the headline; the six counts underneath explain it.
   ═══════════════════════════════════════════════════════════════════ */
.pcard-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}

.pcard{
  background:var(--u-paper);border:1px solid var(--u-rule);
  border-left:4px solid var(--u-rule-firm);
  border-radius:var(--u-r-card);padding:14px 16px 12px;
  transition:border-color .14s, box-shadow .14s;
}
.pcard:hover{box-shadow:var(--u-lift)}

/* the left edge carries the verdict */
.pcard.pc-good{border-left-color:var(--u-yes)}
.pcard.pc-ok{border-left-color:var(--u-act)}
.pcard.pc-bad{border-left-color:var(--u-no);background:#FFFBFA}
.pcard.pc-none{border-left-color:var(--u-rule-firm);opacity:.72}

.pcard-top{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.pcard-roll{
  flex-shrink:0;font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:800;
  color:var(--u-navy);background:var(--u-navy-tint);
  border-radius:6px;padding:3px 8px;letter-spacing:.02em;
}
.pcard-name{
  flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--u-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcard-pct{
  flex-shrink:0;font-family:'Poppins',sans-serif;font-size:22px;font-weight:800;
  letter-spacing:-1px;line-height:1;color:var(--u-ink);
}
.pcard-pct i{font-style:normal;font-size:13px;font-weight:700;margin-left:1px;color:var(--u-soft)}
.pc-good .pcard-pct{color:var(--u-yes)}
.pc-ok   .pcard-pct{color:var(--u-act-deep)}
.pc-bad  .pcard-pct{color:var(--u-no)}
.pc-none .pcard-pct{color:var(--u-faint)}

.pcard-bar{height:5px;background:var(--u-sunk);border-radius:99px;overflow:hidden;margin-bottom:12px}
.pcard-bar i{display:block;height:100%;border-radius:99px;background:var(--u-rule-firm);transition:width .5s cubic-bezier(.2,.9,.3,1)}
.pc-good .pcard-bar i{background:var(--u-yes)}
.pc-ok   .pcard-bar i{background:var(--u-act)}
.pc-bad  .pcard-bar i{background:var(--u-no)}

.pcard-grid6{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--u-rule);
  border:1px solid var(--u-rule);border-radius:9px;overflow:hidden}
.pcard-cell{display:block;background:var(--u-paper);padding:7px 3px;text-align:center}
.pcard-cell b{
  display:block;font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;
  color:var(--u-ink);line-height:1.15;
}
.pcard-cell i{
  display:block;font-style:normal;font-size:9.5px;font-weight:700;
  color:var(--u-soft);margin-top:2px;white-space:nowrap;
}
.pcard-cell.p b{color:var(--u-yes)}
.pcard-cell.a b{color:var(--u-no)}
.pcard-note{margin-top:9px;font-size:11.5px;color:var(--u-faint);text-align:center;font-weight:600}

@media (max-width:560px){
  .pcard-grid{grid-template-columns:1fr}
  .pcard-cell b{font-size:14px}
  .pcard-cell i{font-size:9px}
}


/* ═══════════════════════════════════════════════════════════════════
   CLEAR ATTENDANCE — a destructive action, so it says what it will do
   ═══════════════════════════════════════════════════════════════════ */
.atx-btn-print.danger{border-color:rgba(255,180,170,.5);color:#FFD9D4}
.atx-btn-print.danger:hover{background:rgba(192,57,43,.28);border-color:#E4B5AE}

.clr{position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;
  background:rgba(12,18,32,.62);backdrop-filter:blur(4px);padding:20px;font-family:'Nunito',sans-serif}
.clr-box{width:100%;max-width:440px;background:var(--u-paper);border-radius:var(--u-r-sheet);
  overflow:hidden;box-shadow:var(--u-lift-2)}
.clr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:17px 20px 14px;color:#fff;background:linear-gradient(120deg,#7A1F16,#C0392B)}
.clr-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#FFD9D4}
.clr-head h3{margin:3px 0 0;font-family:'Poppins',sans-serif;font-size:19px;font-weight:800}
.clr-x{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:13px;flex-shrink:0}
.clr-x:hover{background:rgba(255,255,255,.24)}
.clr-body{padding:18px 20px 20px}
.clr-warn{background:var(--u-no-tint);border:1px solid #EFC4BE;border-radius:10px;
  padding:11px 13px;font-size:12.5px;color:#8B2318;line-height:1.6;margin-bottom:16px}
.clr-count{background:var(--u-sunk);border-radius:10px;padding:12px 14px;
  font-size:13px;color:var(--u-soft);line-height:1.6;margin-bottom:16px}
.clr-count.has{background:var(--u-no-tint);color:#8B2318;border:1px solid #EFC4BE}
.clr-count b{color:#6E1A12;font-weight:800}
.clr-actions{display:flex;gap:9px}
.clr-actions .u-btn{flex:1}
@media (max-width:480px){
  .clr{padding:0;align-items:flex-end}
  .clr-box{max-width:none;border-radius:var(--u-r-sheet) var(--u-r-sheet) 0 0}
}


/* ── calendar: keyboard focus and key legend ── */
.atx-cal-d[tabindex]{cursor:pointer;outline:none}
.atx-cal-d[tabindex]:focus{
  box-shadow:0 0 0 2px var(--u-act), 0 0 0 5px rgba(247,148,29,.2);
  position:relative;z-index:3;
}
.atk{
  display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--u-rule);
  font-size:11.5px;color:var(--u-soft);font-weight:600;max-width:520px;
}
.atk b{
  display:inline-block;min-width:19px;text-align:center;margin-right:5px;
  background:var(--u-sunk);border:1px solid var(--u-rule-firm);border-radius:5px;
  padding:2px 6px;font-family:'Poppins',sans-serif;font-size:10.5px;
  font-weight:800;color:var(--u-ink);
}


/* ── the register header's primary action ── */
.atx-btn-print.primary{
  background:var(--u-act);
  border-color:var(--u-act);
  color:var(--u-act-ink);
  font-weight:800;
  padding:8px 16px;
}
.atx-btn-print.primary:hover{
  background:var(--u-act-deep);
  border-color:var(--u-act-deep);
  color:#fff;
}

/* ═══════════════════════════════════════════════════════════════════
   NOTE GALLERY — Lesson Plan / Demonstration Plan
   One card per note, coloured so a class of 30+ notes reads at a
   glance. The colour is decoration only — every card behaves the same.
   ═══════════════════════════════════════════════════════════════════ */
.ngal-head{
  display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  gap:8px;margin:22px 0 12px;
}
.ngal-head h4{
  margin:0;font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;color:var(--u-ink);
}
.ngal-hint{font-size:12px;color:var(--u-soft)}

.ngal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;margin-bottom:6px;
}
.ngal-loading{grid-column:1/-1;display:flex;gap:12px}
.ngal-loading .u-skel{flex:1;height:90px;border-radius:12px}

.ngal-card{
  --edge:#F7941D; --tint:#FFF6EA; --ink:#9A5B08;
  position:relative;background:var(--tint);
  border:1px solid color-mix(in srgb, var(--edge) 30%, transparent);
  border-top:3px solid var(--edge);
  border-radius:13px;padding:14px 15px 13px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .14s, box-shadow .14s;
}
.ngal-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--edge) 45%, transparent);
}

.ngal-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ngal-badge{
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  border-radius:99px;padding:2px 9px;
}
.ngal-ready{
  font-size:10.5px;font-weight:800;color:var(--u-yes);background:var(--u-yes-tint);
  border-radius:99px;padding:2px 8px;white-space:nowrap;
}

.ngal-title{
  margin:0;font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:700;
  color:var(--u-ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ngal-sub{margin:0;font-size:12px;color:var(--ink);opacity:.8;font-weight:600}
.ngal-file{
  font-size:11px;font-weight:700;color:var(--ink);opacity:.85;
  display:inline-flex;align-items:center;gap:4px;
}

.ngal-actions{display:flex;gap:7px;margin-top:auto;padding-top:4px}
.ngal-btn{
  flex:1;min-height:36px;padding:0 10px;border:none;border-radius:9px;
  background:var(--edge);color:#fff;font-family:'Nunito',sans-serif;
  font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;
  transition:filter .12s;
}
.ngal-btn:hover{filter:brightness(1.08)}
.ngal-btn:active{transform:translateY(1px)}
.ngal-btn-ghost{
  flex:0 0 auto;background:#fff;color:var(--ink);
  border:1px solid color-mix(in srgb, var(--edge) 40%, transparent);
}

.ngal-div{height:1px;background:var(--u-rule);margin:18px 0 20px}

/* the matching generated-plan card blinks briefly when jumped to */
@keyframes ngalFlash{
  0%,100%{box-shadow:none}
  30%{box-shadow:0 0 0 3px var(--u-act)}
}
.ngal-flash{animation:ngalFlash 1.4s ease}

@media (max-width:640px){
  .ngal-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .ngal-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   LESSON PLAN / DEMONSTRATION PLAN — card list
   These classes (.lp-card, .lp-head, .lp-badge…) had no styling
   anywhere in the codebase — the browser was laying them out with
   plain defaults, which is why the header row looked cramped and
   unevenly spaced. This is the first real stylesheet for them.
   ═══════════════════════════════════════════════════════════════════ */
.lp-scope{font-family:'Nunito',sans-serif}

.lpc-card{
  background:var(--u-paper,#fff);
  border:1px solid var(--u-rule,#E2E8F1);
  border-radius:13px;
  margin-bottom:11px;
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.lpc-card:hover{box-shadow:0 4px 14px -8px rgba(18,32,58,.18)}
.lpc-card.open{border-color:var(--u-act,#F7941D)}

.lpc-head{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  min-height:64px;
}
.lpc-head:hover{background:#FAFBFD}

.lpc-badge{
  flex:0 0 auto;
  min-width:64px;
  padding:8px 10px;
  border-radius:10px;
  text-align:center;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.25;
}
.lpc-badge small{
  display:block;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.85;
  margin-top:1px;
}

.lpc-head .lpc-f1{
  flex:1 1 auto;
  min-width:0;
}
.lpc-title{
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  font-weight:700;
  color:var(--u-ink,#12203A);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lpc-sub{
  font-size:12px;
  color:var(--u-soft,#6B7A93);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px;
}

.lpc-saved{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:800;
  padding:4px 11px;
  border-radius:99px;
  background:var(--u-yes-tint,#E8F6F0);
  color:var(--u-yes,#0E7A56);
  white-space:nowrap;
}
.lpc-saved.draft{
  background:var(--u-wait-tint,#FFF6E5);
  color:var(--u-wait,#9A6207);
}

.lpc-btn{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:38px;
  height:34px;
  padding:0 10px;
  border-radius:9px;
  border:1px solid var(--u-rule-firm,#CBD5E3);
  background:#fff;
  font-size:12.5px;
  font-weight:700;
  color:var(--u-navy,#1B3A6B);
  white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.lpc-btn:hover{background:var(--u-navy-tint,#EDF3FB);border-color:var(--u-navy,#1B3A6B)}

.lpc-chev{
  flex:0 0 auto;
  width:26px;
  text-align:center;
  color:var(--u-faint,#9AA7BC);
  font-size:13px;
  transition:transform .18s;
}
.lpc-card.open .lpc-chev{transform:rotate(180deg)}

.lpc-body{
  border-top:1px solid var(--u-rule,#E2E8F1);
  padding:16px;
  background:#FBFCFE;
}

.lpc-actions{
  display:flex !important;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--u-rule,#E2E8F1);
}

@media (max-width:640px){
  .lpc-head{
    flex-wrap:wrap;
    padding:12px;
  }
  .lpc-head .lpc-f1{
    order:1;
    flex-basis:100%;
    margin-top:6px;
  }
  .lpc-badge{order:0}
  .lpc-saved{order:2}
  .lpc-btn{order:3}
  .lpc-chev{order:4;margin-left:auto}
}

/* ═══════════════════════════════════════════════════════════════════
   ASSIGN TO — picking specific students for a Theory/Practical note
   ═══════════════════════════════════════════════════════════════════ */
.assign-box{
  border:1px solid var(--u-rule,#E2E8F1);border-radius:12px;
  padding:14px;margin-bottom:16px;background:var(--u-sunk,#EDF1F7);
}
.assign-lbl{font-size:12.5px;font-weight:800;color:var(--u-ink,#12203A);margin-bottom:9px}
.assign-toggle{display:flex;gap:8px;margin-bottom:10px}
.assign-opt{
  flex:1;min-height:38px;border:1.5px solid var(--u-rule-firm,#CBD5E3);border-radius:9px;
  background:var(--u-paper,#fff);color:var(--u-soft,#6B7A93);
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;
  transition:all .14s;
}
.assign-opt.on{
  background:var(--u-act,#F7941D);border-color:var(--u-act,#F7941D);color:var(--u-act-ink,#6B3E00);
}
.assign-opt:not(.on):hover{border-color:var(--u-navy,#1B3A6B);color:var(--u-navy,#1B3A6B)}

.assign-picker{margin-top:4px}
.assign-search{margin-bottom:9px}
.assign-list{
  max-height:220px;overflow:auto;border:1px solid var(--u-rule,#E2E8F1);
  border-radius:9px;background:var(--u-paper,#fff);
}
.assign-row{
  display:flex;align-items:center;gap:10px;padding:8px 11px;cursor:pointer;
  border-bottom:1px solid var(--u-rule,#E2E8F1);
}
.assign-row:last-child{border-bottom:none}
.assign-row:hover{background:var(--u-sunk,#EDF1F7)}
.assign-row.on{background:var(--u-act-tint,#FFF5E7)}
.assign-row input{flex-shrink:0;width:16px;height:16px;cursor:pointer}
.assign-roll{
  flex-shrink:0;font-family:'Poppins',sans-serif;font-size:11px;font-weight:800;
  color:var(--u-navy,#1B3A6B);background:var(--u-navy-tint,#EDF3FB);
  border-radius:6px;padding:2px 7px;
}
.assign-name{font-size:13px;font-weight:600;color:var(--u-ink,#12203A)}
.assign-loading{padding:20px;text-align:center;font-size:12.5px;color:var(--u-soft,#6B7A93)}
.assign-count{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--u-soft,#6B7A93)}

/* ═══════════════════════════════════════════════════════════════════
   THEORY / PRACTICAL NOTE CARDS
   ═══════════════════════════════════════════════════════════════════ */
.ntc-loading{display:flex;gap:12px;padding:6px 0}
.ntc-loading .u-skel{flex:1;height:90px;border-radius:12px}

.ntc-sum{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ntc-chip{
  font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:99px;
  background:var(--u-sunk,#EDF1F7);color:var(--u-soft,#6B7A93);
}
.ntc-chip.ok{background:var(--u-yes-tint,#E8F6F0);color:var(--u-yes,#0E7A56)}
.ntc-chip.wait{background:var(--u-wait-tint,#FFF6E5);color:var(--u-wait,#9A6207)}

.ntc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}

.ntc-card{
  --edge:#F7941D;--tint:#FFF6EA;--ink:#9A5B08;
  background:var(--tint);
  border:1px solid color-mix(in srgb, var(--edge) 28%, transparent);
  border-left:4px solid var(--edge);
  border-radius:13px;padding:14px 15px 13px;
  display:flex;flex-direction:column;gap:8px;
  transition:transform .14s, box-shadow .14s;
}
.ntc-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px -10px color-mix(in srgb, var(--edge) 45%, transparent);
}

.ntc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ntc-badge{
  font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  border-radius:99px;padding:2px 9px;
}
.ntc-status{font-size:10.5px;font-weight:800;border-radius:99px;padding:2px 9px;white-space:nowrap}
.ntc-status.live{background:var(--u-yes-tint,#E8F6F0);color:var(--u-yes,#0E7A56)}
.ntc-status.draft{background:#F1F4F9;color:#69748A}
.ntc-status.wait{background:var(--u-wait-tint,#FFF6E5);color:var(--u-wait,#9A6207)}

.ntc-title{
  margin:0;font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:700;
  color:var(--u-ink,#12203A);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ntc-date{margin:0;font-size:11px;color:var(--ink);opacity:.75;font-weight:600}

.ntc-mid{display:flex;gap:6px;flex-wrap:wrap}
.ntc-assign{
  font-size:11px;font-weight:800;border-radius:99px;padding:3px 10px;cursor:default;
}
.ntc-assign.all{background:#fff;color:var(--ink);border:1px solid color-mix(in srgb, var(--edge) 35%, transparent)}
.ntc-assign.some{
  background:var(--edge);color:#fff;cursor:pointer;
}
.ntc-assign.some:hover{filter:brightness(1.08)}
.ntc-file{
  font-size:11px;font-weight:700;color:var(--ink);opacity:.85;
  background:#fff;border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  border-radius:99px;padding:3px 10px;
}

.ntc-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.ntc-btn{
  flex:1;min-width:64px;min-height:32px;padding:0 8px;border:none;border-radius:8px;
  background:#fff;color:var(--ink);border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:all .12s;
}
.ntc-btn:hover{background:var(--edge);color:#fff}
.ntc-btn.go{background:var(--edge);color:#fff}
.ntc-btn.go:hover{filter:brightness(1.1)}
.ntc-btn.danger{flex:0 0 auto;min-width:36px;color:var(--u-no,#C0392B);border-color:#E4B5AE}
.ntc-btn.danger:hover{background:var(--u-no,#C0392B);color:#fff}

@media (max-width:560px){
  .ntc-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   QUICK ASSIGN MODAL — change a note's audience from its card
   ═══════════════════════════════════════════════════════════════════ */
.qa-bg{
  position:fixed;inset:0;z-index:99998;display:flex;align-items:center;justify-content:center;
  background:rgba(12,18,32,.55);backdrop-filter:blur(3px);padding:20px;font-family:'Nunito',sans-serif;
}
.qa-box{
  width:100%;max-width:440px;max-height:88vh;overflow:auto;
  background:var(--u-paper,#fff);border-radius:18px;box-shadow:var(--u-lift-2,0 28px 64px -22px rgba(8,12,26,.65));
}
.qa-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:17px 20px 14px;color:#fff;background:linear-gradient(120deg,#12294D,#1B3A6B);
}
.qa-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#F7941D}
.qa-head h3{margin:3px 0 0;font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa-x{
  width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:13px;flex-shrink:0;
}
.qa-x:hover{background:rgba(255,255,255,.24)}
.qa-body{padding:18px 20px 20px}
.qa-toggle{display:flex;gap:8px;margin-bottom:14px}
.qa-opt{
  flex:1;min-height:40px;border:1.5px solid var(--u-rule-firm,#CBD5E3);border-radius:10px;
  background:var(--u-paper,#fff);color:var(--u-soft,#6B7A93);
  font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:all .14s;
}
.qa-opt.on{background:var(--u-act,#F7941D);border-color:var(--u-act,#F7941D);color:var(--u-act-ink,#6B3E00)}
.qa-opt:not(.on):hover{border-color:var(--u-navy,#1B3A6B);color:var(--u-navy,#1B3A6B)}
.qa-actions{display:flex;gap:9px;margin-top:16px}
.qa-actions .u-btn{flex:1}
@media (max-width:480px){
  .qa-bg{padding:0;align-items:flex-end}
  .qa-box{max-width:none;border-radius:18px 18px 0 0}
}

/* ═══════════════════════════════════════════════════════════════════
   STUDENT ASSIGNMENT CARDS
   The description used to be one grey run-on paragraph. Every point
   now gets its own line, and the card itself is built to feel worth
   opening — colour, a due-date urgency chip, a clear call to action.
   ═══════════════════════════════════════════════════════════════════ */
.asn-loading{display:flex;gap:12px;padding:6px 0}
.asn-loading .u-skel{flex:1;height:120px;border-radius:16px}

.asn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

.asn-card{
  --edge:#7C5CFC;--tint:#F3F1FE;--ink:#5533C4;
  background:var(--u-paper,#fff);
  border:1px solid var(--u-rule,#E2E8F1);
  border-top:4px solid var(--edge);
  border-radius:16px;padding:17px 18px 16px;
  display:flex;flex-direction:column;gap:11px;
  box-shadow:0 1px 3px rgba(18,32,58,.05);
  transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s;
}
.asn-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 30px -14px color-mix(in srgb, var(--edge) 40%, transparent);
}

.asn-top{display:flex;align-items:flex-start;gap:12px}
.asn-ic{
  flex-shrink:0;width:42px;height:42px;border-radius:12px;
  background:var(--tint);display:flex;align-items:center;justify-content:center;
  font-size:20px;
}
.asn-f1{flex:1;min-width:0}
.asn-title{
  margin:0;font-family:'Poppins',sans-serif;font-size:15.5px;font-weight:800;
  color:var(--u-ink,#12203A);line-height:1.3;
}
.asn-subject{
  display:inline-block;margin-top:3px;font-size:11px;font-weight:800;
  color:var(--ink);background:var(--tint);border-radius:99px;padding:2px 10px;
}

.asn-status{
  flex-shrink:0;font-size:10.5px;font-weight:800;border-radius:99px;
  padding:4px 10px;white-space:nowrap;
}
.asn-status.pending{background:var(--u-wait-tint,#FFF6E5);color:var(--u-wait,#9A6207)}
.asn-status.submitted{background:var(--u-navy-tint,#EDF3FB);color:var(--u-navy,#1B3A6B)}
.asn-status.resubmit{background:#FFEBEE;color:#c62828}
.asn-status.graded{background:var(--u-yes-tint,#E8F6F0);color:var(--u-yes,#0E7A56)}

.asn-points{
  margin:0;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:6px;
}
.asn-points li{
  position:relative;padding-left:20px;font-size:13px;line-height:1.5;color:var(--u-text,#3D4A61);
}
.asn-points li::before{
  content:'';position:absolute;left:2px;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--edge);
}

.asn-resub-note{
  background:#FFF3F3;border:1px solid #ffd6d6;border-left:3px solid #e53935;
  border-radius:9px;padding:9px 12px;font-size:12px;color:#c62828;line-height:1.5;
}

.asn-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--u-rule,#E2E8F1);
}
.asn-meta{display:flex;gap:7px;flex-wrap:wrap}
.asn-chip{
  font-size:11px;font-weight:700;color:var(--u-soft,#6B7A93);
  background:var(--u-sunk,#EDF1F7);border-radius:99px;padding:3px 10px;
  display:inline-flex;align-items:center;gap:3px;
}
.asn-chip.asn-due-far{color:var(--u-soft,#6B7A93)}
.asn-chip.asn-due-soon{background:var(--u-wait-tint,#FFF6E5);color:var(--u-wait,#9A6207);font-weight:800}
.asn-chip.asn-due-today{background:#FFE9D6;color:#C2410C;font-weight:800}
.asn-chip.asn-due-late{background:#FFEBEE;color:#c62828;font-weight:800;animation:asnPulse 1.6s ease-in-out infinite}
@keyframes asnPulse{0%,100%{opacity:1}50%{opacity:.6}}

.asn-action .btn{border-radius:10px;font-weight:800}

@media (max-width:560px){
  .asn-grid{grid-template-columns:1fr}
  .asn-card{padding:15px}
}

/* ═══════════════════════════════════════════════════════════════════
   VIEW / GRADE SUBMISSIONS
   ═══════════════════════════════════════════════════════════════════ */
.subm-bg{
  position:fixed;inset:0;z-index:99997;display:flex;align-items:center;justify-content:center;
  background:rgba(12,18,32,.55);backdrop-filter:blur(3px);padding:20px;font-family:'Nunito',sans-serif;
}
.subm-box{
  width:100%;max-width:760px;max-height:88vh;overflow:auto;
  background:var(--u-paper,#fff);border-radius:18px;box-shadow:var(--u-lift-2,0 28px 64px -22px rgba(8,12,26,.65));
}
.subm-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:17px 20px 12px;color:#fff;background:linear-gradient(120deg,#12294D,#1B3A6B);
  position:sticky;top:0;z-index:2;
}
.subm-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#F7941D}
.subm-head h3{margin:3px 0 0;font-family:'Poppins',sans-serif;font-size:17px;font-weight:800;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subm-x{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:13px;flex-shrink:0}
.subm-x:hover{background:rgba(255,255,255,.24)}
.subm-sub{padding:10px 20px 0;font-size:12px;font-weight:700;color:var(--u-soft,#6B7A93)}
.subm-list{padding:12px 20px 20px}
.subm-row{
  display:grid;grid-template-columns:70px 1fr 130px 110px 220px;gap:10px;align-items:center;
  padding:9px 6px;border-bottom:1px solid var(--u-rule,#E2E8F1);font-size:12.5px;
}
.subm-row.subm-hd{
  font-size:10.5px;font-weight:800;text-transform:uppercase;color:var(--u-soft,#6B7A93);
  letter-spacing:.04em;border-bottom:2px solid var(--u-rule-firm,#CBD5E3);position:sticky;top:0;background:#fff;
}
.subm-roll{font-family:'Poppins',sans-serif;font-weight:800;color:var(--u-navy,#1B3A6B)}
.subm-name{font-weight:600;color:var(--u-ink,#12203A)}
.subm-grade{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

@media (max-width:700px){
  .subm-row{grid-template-columns:1fr;gap:4px;padding:12px 6px}
  .subm-row.subm-hd{display:none}
  .subm-box{max-width:none;border-radius:18px 18px 0 0}
  .subm-bg{padding:0;align-items:flex-end}
}

/* ═══════════════════════════════════════════════════════════════════
   ASSIGNMENT MANAGEMENT — reuse note-card action button look
   ═══════════════════════════════════════════════════════════════════ */
.asn-card .asn-actions .ntc-btn{
  flex:1;min-width:90px;min-height:32px;padding:0 10px;border-radius:8px;
  background:#fff;color:var(--ink);border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  font-family:'Nunito',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;transition:all .12s;
}
.asn-card .asn-actions .ntc-btn:hover{background:var(--edge);color:#fff}
.asn-card .asn-actions .ntc-btn.go{background:var(--edge);color:#fff}
.asn-card .asn-actions .ntc-btn.go:hover{filter:brightness(1.1)}
.asn-card .asn-actions .ntc-btn.danger{flex:0 0 auto;min-width:36px;color:var(--u-no,#C0392B);border-color:#E4B5AE}
.asn-card .asn-actions .ntc-btn.danger:hover{background:var(--u-no,#C0392B);color:#fff}

.asn-rich-desc{font-size:13px;line-height:1.6;color:var(--u-text,#3D4A61)}
.asn-rich-desc img{max-width:100%;border-radius:6px}
.asn-rich-desc table{border-collapse:collapse;max-width:100%}
.asn-rich-desc td{border:1px solid var(--u-rule-firm,#CBD5E3);padding:4px 7px}
.asn-rich-desc p{margin:0 0 6px}

/* ═══════════════════════════════════════════════════════════════════
   LEARNING OUTCOMES & ASSESSMENT CRITERIA — full-screen manager
   ═══════════════════════════════════════════════════════════════════ */
.lo-bg{
  position:fixed;inset:0;z-index:99996;display:flex;align-items:center;justify-content:center;
  background:rgba(12,18,32,.6);backdrop-filter:blur(4px);padding:16px;font-family:'Nunito',sans-serif;
}
.lo-page{
  width:100%;max-width:960px;max-height:92vh;overflow:auto;
  background:var(--u-paper,#fff);border-radius:20px;box-shadow:var(--u-lift-2,0 28px 64px -22px rgba(8,12,26,.65));
}
.lo-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:20px 24px 16px;color:#fff;position:sticky;top:0;z-index:3;
  background:linear-gradient(120deg,#12294D,#1B3A6B 60%,#3A2E7C);
}
.lo-eyebrow{font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#F7941D}
.lo-head h2{margin:4px 0 0;font-family:'Poppins',sans-serif;font-size:21px;font-weight:800}
.lo-head-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.lo-head-actions .u-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
.lo-head-actions .u-btn:hover{background:rgba(255,255,255,.22)}
.lo-x{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:14px;flex-shrink:0}
.lo-x:hover{background:rgba(255,255,255,.24)}

.lo-body{padding:22px 24px 26px}

.lo-tabs{display:flex;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--u-rule,#E2E8F1);padding-bottom:2px}
.lo-tab{
  border:none;background:none;padding:10px 6px;cursor:pointer;
  font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:800;color:var(--u-soft,#6B7A93);
  border-bottom:2.5px solid transparent;margin-right:14px;
}
.lo-tab.on{color:var(--u-navy,#1B3A6B);border-bottom-color:#F7941D}
.lo-tab:hover{color:var(--u-navy,#1B3A6B)}

.lo-pane{margin-bottom:22px}
.lo-form{background:var(--u-sunk,#EDF1F7);border-radius:14px;padding:18px}

.lo-import-box{background:var(--u-sunk,#EDF1F7);border-radius:14px;padding:18px}
.lo-import-drop{
  border:2px dashed var(--u-rule-firm,#CBD5E3);border-radius:12px;padding:26px;text-align:center;
  cursor:pointer;background:var(--u-paper,#fff);transition:border-color .15s, background .15s;
}
.lo-import-drop:hover{border-color:#F7941D;background:var(--u-act-tint,#FFF5E7)}
.lo-import-ic{font-size:30px;margin-bottom:8px}
.lo-import-t{font-size:14px;font-weight:800;color:var(--u-ink,#12203A)}
.lo-import-s{font-size:11.5px;color:var(--u-soft,#6B7A93);margin-top:4px}
.lo-import-status{font-size:12.5px;color:var(--u-soft,#6B7A93);margin-top:10px;font-weight:700}
.lo-import-note{
  font-size:12px;color:#9A5B08;background:var(--u-wait-tint,#FFF6E5);
  border-radius:9px;padding:9px 12px;margin:12px 0;line-height:1.5;
}
.lo-preview-wrap{max-height:280px;overflow:auto;border:1px solid var(--u-rule,#E2E8F1);border-radius:10px;margin-top:8px}
.lo-preview-table{width:100%;border-collapse:collapse;font-size:12.5px}
.lo-preview-table th{
  position:sticky;top:0;background:var(--u-sunk,#EDF1F7);color:var(--u-ink,#12203A);
  text-align:left;padding:8px 10px;font-size:11px;font-weight:800;
}
.lo-preview-table td{padding:5px 6px;border-bottom:1px solid var(--u-rule,#E2E8F1)}
.lo-prev-in{
  width:100%;border:1px solid transparent;border-radius:6px;padding:6px 8px;
  font-family:'Nunito',sans-serif;font-size:12.5px;background:transparent;
}
.lo-prev-in:focus{border-color:#F7941D;background:#fff;outline:none}
.lo-prev-del{border:none;background:none;color:var(--u-no,#C0392B);cursor:pointer;font-size:13px;padding:4px}
.lo-import-actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.lo-import-count{font-size:12px;font-weight:700;color:var(--u-soft,#6B7A93)}

.lo-lib-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.lo-lib-head h3{margin:0;font-family:'Poppins',sans-serif;font-size:15px;font-weight:800;color:var(--u-ink,#12203A)}
.lo-lib-count{font-size:12px;color:var(--u-soft,#6B7A93);font-weight:700}

.lo-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.lo-card{
  --edge:#7C5CFC;--tint:#F3F1FE;--ink:#5533C4;
  position:relative;background:var(--tint);
  border:1px solid color-mix(in srgb, var(--edge) 28%, transparent);
  border-left:4px solid var(--edge);border-radius:13px;padding:16px 15px 13px;
  transition:transform .14s, box-shadow .14s;
}
.lo-card:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px color-mix(in srgb, var(--edge) 45%, transparent)}
.lo-card-badge{
  display:inline-block;font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  border-radius:99px;padding:2px 9px;margin-bottom:8px;
}
.lo-card-lo{font-size:13.5px;font-weight:700;color:var(--u-ink,#12203A);line-height:1.45;margin-bottom:6px}
.lo-card-crit{font-size:12px;color:var(--ink);line-height:1.5}
.lo-card-crit-empty{color:var(--u-faint,#9AA7BC);font-style:italic}
.lo-card-actions{display:flex;gap:6px;margin-top:11px}
.lo-card-actions .ntc-btn{
  flex:1;min-height:30px;padding:0 9px;border-radius:8px;background:#fff;color:var(--ink);
  border:1px solid color-mix(in srgb, var(--edge) 35%, transparent);
  font-family:'Nunito',sans-serif;font-size:11px;font-weight:800;cursor:pointer;
}
.lo-card-actions .ntc-btn:hover{background:var(--edge);color:#fff}
.lo-card-actions .ntc-btn.go{background:var(--edge);color:#fff}
.lo-card-actions .ntc-btn.danger{flex:0 0 auto;min-width:34px;color:var(--u-no,#C0392B);border-color:#E4B5AE}
.lo-card-actions .ntc-btn.danger:hover{background:var(--u-no,#C0392B);color:#fff}
.lo-edit-in{margin-bottom:8px}
.lo-empty-sm{padding:20px;text-align:center;font-size:12.5px;color:var(--u-soft,#6B7A93)}

@media (max-width:640px){
  .lo-bg{padding:0;align-items:flex-end}
  .lo-page{max-width:none;max-height:94vh;border-radius:20px 20px 0 0}
  .lo-head{padding:16px 16px 14px}
  .lo-body{padding:16px}
  .lo-lib-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════
   LEARNING OUTCOMES — one outcome, several criteria each with marks
   ═══════════════════════════════════════════════════════════════════ */
.lo-new-crit-lbl{font-size:12.5px;font-weight:800;color:var(--u-ink,#12203A);margin:14px 0 8px}
.lo-new-crit-lbl span{font-weight:600;color:var(--u-soft,#6B7A93);font-size:11px}
.lo-new-crit-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.lo-new-crit-text{flex:1}
.lo-add-crit-row{
  border:1.5px dashed var(--u-rule-firm,#CBD5E3);background:none;border-radius:9px;
  padding:8px 14px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:700;
  color:var(--u-soft,#6B7A93);cursor:pointer;margin-bottom:6px;
}
.lo-add-crit-row:hover{border-color:#F7941D;color:#9A5B08}

.lo-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.lo-card-lo{
  font-size:13.5px;font-weight:700;color:var(--u-ink,#12203A);line-height:1.45;
  margin-bottom:10px;cursor:pointer;
}
.lo-card-lo:hover{text-decoration:underline;text-decoration-color:var(--edge)}

.lo-crit-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.lo-crit-row, .lo-crit-edit-row{
  display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;
  padding:6px 8px;font-size:12px;
}
.lo-crit-text{flex:1;color:var(--u-ink,#12203A)}
.lo-crit-marks{
  flex-shrink:0;font-family:'Poppins',sans-serif;font-size:10.5px;font-weight:800;color:var(--ink);
  background:var(--tint);border-radius:99px;padding:1px 8px;
}
.lo-crit-mini{
  flex-shrink:0;width:22px;height:22px;border:none;background:none;cursor:pointer;
  font-size:11px;color:var(--u-soft,#6B7A93);border-radius:6px;
}
.lo-crit-mini:hover{background:var(--u-sunk,#EDF1F7);color:var(--u-ink,#12203A)}
.lo-crit-edit-row input{flex:1}
.lo-crit-edit-row{display:none}

.lo-crit-add-row{display:flex;gap:6px;margin-top:2px}
.lo-crit-add-text{flex:1;font-size:12px;padding:6px 9px}
.lo-crit-mini-add{
  width:30px;height:30px;flex-shrink:0;background:var(--edge);color:#fff;
  border-radius:8px;font-size:15px;font-weight:800;
}
.lo-crit-mini-add:hover{filter:brightness(1.1)}