/* School Dashboard — aligned with Flask portal look */

:root {
  --bg: #f5f7fa;
  --ink: #1b2938;
  --muted: #617184;
  --card: #ffffff;
  --accent: #245b86;
  --accent-hover: #19486f;
  --accent-soft: #eaf2f8;
  --line: #e2e8f0;
  --ok: #059669;
  --add: #eeffee;
  --warn: #d97706;
  --err: #dd0d0d;
  --deac :#ffdfdf;
  --info: #0988c8;
  --nav: #19324d;
  --nav-muted: #c5d2df;
  --blue: #1906e9;
  --radius: 8px;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Segoe UI", system-ui, -apple-system, sans-serif;
  --shadow: 0 1px 3px rgba(26, 31, 54, .06);
  --shadow-lg: 0 10px 28px rgba(26, 31, 54, .12);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  line-height: 1.5;
}
a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease, transform .15s ease;
}
a:hover {
  color: var(--accent-hover);
  text-decoration: none;
}
p { margin: 10px 0; }
.page { padding: 0 0 1.5rem; max-width: none; margin: 0; }
.page-inner,
.content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 2rem; }

.topnav {
  display: flex; flex-wrap: wrap; gap: .50rem 1.25rem; align-items: center;
  justify-content: space-between;
  background: var(--nav);
  padding: .70rem 1.25rem;
  margin-bottom: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.brand {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
.brand:hover { color: #fff; text-decoration: none; opacity: .92; }
.topnav-right {
  display: flex; flex-wrap: wrap; gap: .70rem 1.1rem; align-items: center;
  justify-content: flex-end; margin-left: auto;
}
.nav-links { display: flex; flex-wrap: wrap; gap: .50rem 1rem; font-size: 1rem; align-items: center; }
.nav-links a {
  text-decoration: none;
  color: var(--nav-muted);
  padding: .40rem;
  font-weight: 500;
}
.nav-links a:hover { color: #fff; text-decoration: none; }

.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  color: var(--nav-muted);
  font-weight: 500;
  padding: .35rem .15rem;
  user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  display: inline-block;
  width: .35rem; height: .35rem;
  margin-left: .35rem; margin-bottom: .12rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}
.nav-menu[open] > summary,
.nav-menu > summary:hover { color: #fff; }
.nav-menu[open] > summary::after { transform: rotate(225deg); margin-bottom: -.05rem; }
.nav-menu-panel {
  position: absolute;
  left: 0; top: calc(100% + .4rem);
  min-width: 10.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: .4rem;
  z-index: 35;
  display: grid;
  gap: .1rem;
}
.nav-menu-panel a {
  color: #334155 !important;
  padding: .55rem .7rem !important;
  border-radius: 8px;
  font-weight: 600;
}
.nav-menu-panel a:hover {
  background: #f1f5f9;
  color: var(--accent) !important;
  text-decoration: none;
}
.nav-links .nav-menu:last-child .nav-menu-panel { left: auto; right: 0; }

/* On wide screens the wrapper is transparent: .nav-links flows in the header exactly as before. */
.nav-collapse { display: contents; }
.nav-burger { display: none; }

@media (max-width: 560px) {
  .topnav { padding-left: 1rem; padding-right: 1rem; }
  .brand { font-size: 1.15rem; }
}

.help-menu { position: relative; }
.help-trigger {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  user-select: none;
}
.help-trigger::-webkit-details-marker { display: none; }
.help-trigger:hover,
.help-menu[open] > .help-trigger {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.12);
}
.help-trigger-icon {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
}
.help-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .45rem);
  width: min(28rem, calc(100vw - 1.5rem));
  max-height: min(75vh, 36rem);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: .9rem 1rem;
  z-index: 40;
  color: #1e293b;
}
/* Keep mobile navigation and help panels within the viewport. */
@media (max-width: 900px) {
  .topnav { position: relative; flex-wrap: nowrap; gap: .5rem; }
  .brand { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topnav-right { flex: 0 0 auto; flex-wrap: nowrap; gap: .4rem; }
  .nav-collapse { display: block; }
  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem; height: 2.35rem;
    padding: 0;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
  }
  .nav-burger:hover,
  .nav-collapse.is-open .nav-burger {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.12);
  }
  .nav-burger-lines {
    position: relative;
    display: block;
    width: 1.15rem; height: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  .nav-burger-lines::before,
  .nav-burger-lines::after {
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .15s ease, top .15s ease;
  }
  .nav-burger-lines::before { top: -.36rem; }
  .nav-burger-lines::after { top: .36rem; }
  .nav-collapse.is-open .nav-burger-lines { background: transparent; }
  .nav-collapse.is-open .nav-burger-lines::before { top: 0; transform: rotate(45deg); }
  .nav-collapse.is-open .nav-burger-lines::after { top: 0; transform: rotate(-45deg); }

  .nav-links { display: none; }
  .nav-collapse.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .1rem;
    position: absolute;
    left: .75rem; right: .75rem;
    top: calc(100% + .35rem);
    z-index: 45;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
  }
  .nav-collapse.is-open .nav-links > a,
  .nav-collapse.is-open .nav-links .nav-menu > summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem;
    border-radius: 8px;
    font-weight: 600;
    color: #334155;
  }
  .nav-collapse.is-open .nav-links > a:hover,
  .nav-collapse.is-open .nav-links .nav-menu > summary:hover {
    background: #f1f5f9;
    color: var(--accent);
    text-decoration: none;
  }
  .nav-collapse.is-open .nav-links .nav-menu { position: static; }
  .nav-collapse.is-open .nav-links .nav-menu > summary::after { margin-left: auto; }
  .nav-collapse.is-open .nav-links .nav-menu-panel {
    position: static;
    min-width: 0;
    padding: 0 0 .3rem .9rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .help-menu { position: static; }
  .help-panel {
    left: auto;
    right: .75rem;
    width: min(28rem, calc(100vw - 1.5rem));
    top: calc(100% + .35rem);
  }
}
.help-panel-head { margin-bottom: .65rem; }
.help-panel-title {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.help-panel-summary {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: #475569;
}
.help-sections { display: grid; gap: .7rem; }
.help-section-heading {
  margin: 0 0 .35rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.help-flows {
  display: grid;
  gap: .95rem;
  margin-bottom: .7rem;
}
.help-flows-kicker { margin-bottom: .15rem; }
.help-flow-title {
  margin: 0 0 .45rem;
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
}
.help-items {
  border-top: 1px solid var(--line);
  padding-top: .75rem;
}
.help-items > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
}
.help-items > summary::-webkit-details-marker { display: none; }
.help-items > summary::after {
  content: "+";
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #334155;
  flex: 0 0 auto;
}
.help-items[open] > summary::after { content: "−"; }
.help-items > summary span {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 600;
  color: #64748b;
}
.help-items[open] > .help-item-list {
  margin-top: .65rem;
}
.help-sections:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.help-item-list { margin: 0; display: grid; gap: .55rem; }
.help-item {
  display: grid;
  gap: .15rem;
  padding: .5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.help-item dt {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  color: #0f172a;
}
.help-item dd {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  color: #475569;
}
/* Classic flowchart: boxes + arrows */
.help-fc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: .5rem;
  background:
    linear-gradient(180deg, #f8fafc 0%, #fff 40%),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(148, 163, 184, .12) 12px);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.help-fc-box {
  width: 100%;
  max-width: 18.5rem;
  box-sizing: border-box;
  text-align: center;
  background: #fff;
  border: 2px solid #64748b;
  border-radius: 4px;
  padding: .5rem;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.35;
  color: #0f172a;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.help-fc-box--start {
  border-radius: 999px;
  border-color: var(--accent);
  background: #eff6ff;
}
.help-fc-box--end {
  border-color: #0f172a;
  background: #f1f5f9;
}
.help-fc-arrow--down {
  width: 2px;
  height: 1.2rem;
  margin: .12rem 0;
  position: relative;
  background: #475569;
}
.help-fc-arrow--down::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #475569;
}
.help-fc--decision {
  align-items: stretch;
  gap: .15rem;
}
.help-fc-diamond {
  align-self: center;
  width: 7.25rem;
  height: 7.25rem;
  margin: .35rem 0 .15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  border: 2px solid #ea580c;
  transform: rotate(45deg);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  flex: 0 0 auto;
}
.help-fc-diamond-text {
  transform: rotate(-45deg);
  display: block;
  width: 5.6rem;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.25;
  color: #9a3412;
  padding: .15rem;
}
.help-fc--decision > .help-fc-arrow--down {
  align-self: center;
  height: 1rem;
  margin: .2rem 0 .05rem;
}
.help-fc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: .7rem;
  row-gap: 0;
  position: relative;
  margin: .15rem 0 0;
  padding-top: .7rem;
}
.help-fc-split::before {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 0;
  height: 2px;
  background: #475569;
}
.help-fc-split-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  position: relative;
  padding-top: .55rem;
}
.help-fc-split-col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: .55rem;
  transform: translateX(-50%);
  background: #475569;
}
.help-fc-edge-label {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: .2rem .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.help-fc-split-col--yes .help-fc-edge-label { color: #15803d; }
.help-fc-split-col--no .help-fc-edge-label { color: #c2410c; }
.help-fc-split-col .help-fc-box {
  max-width: none;
  width: 100%;
  font-size: .78rem;
  padding: .5rem;
}
.help-fc-split-col--yes .help-fc-box {
  border-color: #16a34a;
  background: #f0fdf4;
}
.help-fc-split-col--no .help-fc-box {
  border-color: #ea580c;
  background: #fff7ed;
}

.help-tips {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .4rem;
  font-size: .9rem;
  line-height: 1.4;
  color: #334155;
}
.help-tips li::marker,.dash-working { color: var(--accent); }

.profile-menu { position: relative; }
.profile-menu > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  user-select: none;
}
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu > summary:hover,
.profile-menu[open] > summary { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); }
.profile-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  flex-shrink: 0;
}
.profile-trigger-text {
  display: none; flex-direction: column; line-height: 1.15; min-width: 0;
  padding-right: .15rem;
}
.profile-trigger-name {
  font-size: .88rem; font-weight: 700; color: #fff;
  max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-trigger-role { font-size: .72rem; color: var(--nav-muted); font-weight: 600; }
.profile-caret {
  width: .4rem; height: .4rem;
  border-right: 1.5px solid var(--nav-muted);
  border-bottom: 1.5px solid var(--nav-muted);
  transform: rotate(45deg); margin: 0 .35rem .15rem 0;
  transition: transform .15s ease;
}
.profile-menu[open] .profile-caret { transform: rotate(225deg); margin-bottom: -.05rem; }
.profile-dropdown {
  position: absolute; right: 0; top: calc(100% + .45rem);
  width: min(18.5rem, calc(100vw - 2rem));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: .9rem;
  z-index: 40;
}
.profile-dropdown-head { margin-bottom: .70rem; }
.profile-dropdown-name {
  margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.profile-dropdown-role { margin: .2rem 0 0; color: var(--muted); font-size: .88rem; font-weight: 600; }
.profile-meta {
  margin: 0 0 .7rem; padding: .5rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; gap: .55rem;
}
.profile-meta div { display: grid; gap: .1rem; }
.profile-meta dt {
  margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 700;
}
.profile-meta dd {
  margin: 0; font-size: .9rem; color: var(--ink); word-break: break-word;
}
.profile-signout {
  display: block; text-align: center; text-decoration: none;
  background: transparent; color: var(--err);
  border: 1px solid #fecaca; border-radius: 8px;
  padding: .7rem; font-weight: 700; font-size: .92rem;
}
.profile-signout:hover { background: #fee2e2; text-decoration: none; }

/* ---- one parent login, several children (issue #4) ---- */
.family-switch {
  margin: .25rem 0 .5rem; padding-top: .5rem;
  border-top: 1px solid var(--line);
  display: grid; gap: .3rem;
}
.family-switch-title {
  margin: 0 0 .1rem; color: var(--muted);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.family-switch-form { margin: 0; }
.family-switch-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  width: 100%; text-align: left;
  padding: .5rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card);
  color: var(--ink); font-size: .92rem; font-weight: 600;
}
button.family-switch-item:hover { background: var(--accent-soft); border-color: var(--accent); cursor: pointer; }
.family-switch-current { background: var(--accent-soft); border-color: var(--accent); }
.family-switch-grade { color: var(--muted); font-size: .82rem; font-weight: 600; }

.child-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .65rem; }
.child-list form { margin: 0; }
.child-card {
  display: grid; gap: .2rem; width: 100%; text-align: left;
  padding: .7rem 1rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none;
}
.child-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.child-card-current { border-color: var(--accent); }
.child-card-name { font-size: 1.05rem; font-weight: 700; }
.child-card-meta { color: var(--muted); font-size: .88rem; }
.child-card-action { color: var(--accent); font-size: .88rem; font-weight: 700; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0 0 .75rem !important;
  padding: 0 !important;
  color: var(--ink);
}
h1 { color: var(--ink); }
.muted { color: var(--muted); }
label { display: block; margin: .70rem 0; font-weight: 600; font-size: .92rem; color: #334155; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}
.content-section { min-width: 0; }
.section-heading { margin-top: 1rem !important; font-size: 1.15rem; }
.card.narrow { max-width: 421px; margin: 1.5rem auto; }

.dashboard-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1rem;
  margin-top: .1rem;
}
.chart-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  padding: 1rem;
  min-width: 0;
}
.chart-panel h3 {
  margin: 0 0 .9rem !important;
  font-size: 1.05rem;
}
.school-donut-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.donut-wrap {
  display: grid;
  justify-items: center;
  gap: .55rem;
  min-width: 8.75rem;
}
.donut-chart {
  --size: 175px;
  --track: #e2e8f0;
  --value: 50;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--color) calc(var(--value) * 1%), var(--track) 0);
}
.donut-chart::before {
  content: "";
  position: absolute;
  inset: 25px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .25);
}
.donut-chart span {
  position: relative;
  z-index: 1;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.donut-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.combo-chart-wrap {
  width: 100%;
  overflow-x: auto;
  padding-top: .25rem;
}

.combo-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.combo-chart-grid {
  stroke: #cbd5e1;
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.combo-chart-axis {
  stroke: #64748b;
  stroke-width: 1.2;
}
.combo-chart-axis-text {
  fill: #475569;
  font-size: 10px;
  font-family: inherit;
}
.combo-chart-label {
  fill: #334155;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  text-anchor: middle;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .4rem;
  margin-left: .5rem;
  font-size: .8rem;
  color: var(--muted);
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.legend-box {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
}
.legend-box--blue { background: #4f7ea7; }
.legend-box--red { background: #b33a2d; }
.legend-box--green { background: #73b246; }
@media (max-width: 860px) {
  .dashboard-chart-grid {
    grid-template-columns: 1fr;
  }
}

.qa-post-head {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  align-items: flex-start;
  justify-content: space-between;
}
.qa-post-meta {
  min-width: 0;
  flex: 1 1 12rem;
  overflow-wrap: anywhere;
}
.qa-share-form {
  margin: 0;
  flex: 0 1 auto;
  max-width: 100%;
}
.qa-share-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-weight: 500;
  max-width: 100%;
}
.qa-share-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin: 0;
  margin-top: 0;
}
.qa-share-label span {
  line-height: 1.25;
}
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: .70rem 0;
  font-weight: 600;
  font-size: .92rem;
  color: #334155;
}
.checkbox-label input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--accent);
}
.qa-share-note {
  font-size: .9rem;
  flex: 0 1 auto;
}
.qa-thread {
  margin: .75rem 0;
}
.qa-post {
  padding: .5rem .7rem;
  border-radius: 10px;
}
.qa-post--tone-0 { background: #eef2ff; }
.qa-post--tone-1 { background: #ecfdf5; }
.qa-post--tone-2 { background: #fffbeb; }
.qa-post--tone-3 { background: #fce7f3; }
.qa-post--reply {
  margin-left: 1.5rem;
}
.qa-thread .qa-post + .qa-post {
  margin-top: .65rem;
}
.qa-thread-reply {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border, #e2e8f0);
}
.attachment-list {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.attachment-list-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.attachment-list-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 1.35rem;
  padding: 0 .3rem;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.attachment-list-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.attachment-remove {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  padding: .25rem .5rem;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: var(--err);
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.attachment-remove:hover { background: #fef2f2; }
.attachment-list-item:has(.attachment-remove input:checked) {
  border-color: #fca5a5;
  background: #fef2f2;
}
.attachment-list-item:has(.attachment-remove input:checked) .attachment-list-name {
  text-decoration: line-through;
  color: var(--muted);
}
.attachment-remove input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--err);
}

input, select, textarea, button {
  font: inherit; width: 100%; margin-top: .30rem;
  padding: .5rem; border-radius: 7px; border: 1px solid #cbd5e1;
  color: var(--ink);
}
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.4;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: .8em;
  padding-right: 2.1rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #7aa7d2;
  box-shadow: 0 0 0 3px rgba(37, 99, 166, .14);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(36, 91, 134, .3);
  outline-offset: 2px;
}
button, .btn, .button,
input[type="submit"], input[type="button"], input[type="reset"],
.toolbar a, .table-actions a, .field-actions a, .section-filters a,
.action-bar a, .action-row a, .detail-actions a,
.sub-head-actions a, .sub-detail-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 2rem;
  background: linear-gradient(180deg, #2a6ea9 0%, #235d8f 100%);
  color: #fff;
  border: 1px solid #b4d4ea;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  width: auto;
  padding: .42rem .8rem;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(28, 71, 101, .12);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
}
button:hover, .btn:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover,
.toolbar a:hover, .table-actions a:hover, .field-actions a:hover, .section-filters a:hover,
.action-bar a:hover, .action-row a:hover, .detail-actions a:hover,
.sub-head-actions a:hover, .sub-detail-actions a:hover {
  background: linear-gradient(180deg, #245f95 0%, #1a4b74 100%);
  border-color: #1a4b74;
  text-decoration: none;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(31, 95, 152, .18);
}
button:active, .btn:active, .button:active,
input[type="submit"]:active, input[type="button"]:active, input[type="reset"]:active,
.toolbar a:active, .table-actions a:active, .field-actions a:active, .section-filters a:active,
.action-bar a:active, .action-row a:active, .detail-actions a:active,
.sub-head-actions a:active, .sub-detail-actions a:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(15, 35, 53, .15);
}
button.secondary, .btn.secondary,
.toolbar a.secondary, .table-actions a.secondary, .field-actions a.secondary {
  min-height: 2rem;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  box-shadow: none;
  padding: .42rem .8rem;
}
button.secondary:hover, .btn.secondary:hover,
.toolbar a.secondary:hover, .table-actions a.secondary:hover, .field-actions a.secondary:hover {
  background: #f8fafc;
  color: var(--ink);
  border-color: #94a3b8;
  transform: none;
  box-shadow: none;
}
.btn-danger,
.btn-danger:visited,
button.btn-danger,
a.btn-danger {
  min-height: 2rem;
  background: var(--deac);
  color: #7f1d1d;
  border: 1px solid #f4b4b4;
  box-shadow: 0 1px 2px rgba(180, 35, 24, .06);
  padding: .42rem .8rem;
}
.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover,
.btn-danger:focus-visible,
button.btn-danger:focus-visible,
a.btn-danger:focus-visible {
  background: #f6cfcf;
  color: #7f1d1d;
  border-color: #ec9d9d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(180, 35, 24, .08);
}
.btn2 {
  background: var(--info); color: #fff; border: 1px solid var(--accent); cursor: pointer;
  font-weight: 700; text-decoration: none; display: inline-block; width: auto;padding: .2rem 1rem; border-radius: 8px;
}

.flash, .info {
  padding: .50rem 1rem; border-radius: 8px; margin: .70rem 0; border: 1px solid transparent;
  transition: opacity .35s ease, max-height .35s ease, margin .35s ease, padding .35s ease;
  max-height: 8rem;
  overflow: hidden;
}
.flash-success { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }
.flash-error { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.flash-warning { background: #fef9c3; color: #713f12; border-color: #fde047; }
.flash-info, .info { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
.hw-note {
  margin-top: .5rem;
  padding: .5rem;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  background: #f8fafc;
  max-width: 28rem;
}
.hw-note strong {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #64748b;
  margin-bottom: .25rem;
}
.hw-note p { margin: 0; white-space: pre-wrap; }
.hw-note--student { border-color: #bfdbfe; background: #eff6ff; }
.hw-note--teacher { border-color: #bbf7d0; background: #f0fdf4; }
.submission-grade-form { margin: 0; }
.table-frame .submission-grade-form { max-width: 26rem; }
.submission-grade-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: .45rem;
}
.submission-grade-row select,
.submission-grade-row input,
.submission-grade-row button {
  width: auto;
  margin-top: 0;
}
.submission-note-label {
  display: block;
  margin: 0;
  font-size: .88rem;
}
.submission-note-label textarea {
  margin-top: .3rem;
  min-width: min(100%, 15rem);
}
.table-frame .table.submissions-table { table-layout: fixed; min-width: 40rem; }
.submissions-table th:nth-child(1), .submissions-table td:nth-child(1) { width: 15%; }
.submissions-table th:nth-child(2), .submissions-table td:nth-child(2) { width: 15%; }
.submissions-table th:nth-child(3), .submissions-table td:nth-child(3) { width: 30%; }
.submissions-table th:nth-child(4), .submissions-table td:nth-child(4) { width: 30%; }
.submissions-table th:nth-child(5), .submissions-table td:nth-child(5) { width: 10%; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.email-tpl { margin-top: 1rem; }
.email-tpl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: flex-end;
  margin-bottom: .7rem;
}
.email-tpl-controls label { margin: 0; }
.email-tpl-controls input[type="text"] { width: auto; min-width: 14rem; }
.email-tpl-controls .email-tpl-address { min-width: 20rem; background: #f8fafc; }
.email-tpl-reset { margin: 0; }
.email-tpl-label { display: block; margin: 0 0 .7rem; }
.email-tpl-label textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}
.email-tpl-qr {
  margin-bottom: .7rem;
  width: 200px;
  max-width: 100%;
}
.flash.flash-hide {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

.table { width: 100%; border-collapse: collapse; }
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid #dfeaf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.table th, .table td {
  text-align: left; padding: .7rem .7rem;
  border-bottom: 1px solid #edf2f5;
  vertical-align: middle;
}
.table th {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #23414a;
  font-weight: 700;
  background: #dfeef0;
  border-bottom: 1px solid #cfe1e5;
}
.table tbody tr {
  transition: background-color .15s ease;
}
.table tbody tr:hover { background: #edf8ff; }
.table tbody tr:nth-child(even) {background-color: #fbfcfd;}

.table-frame,
.table-frame-lite {
  position: relative;
  overflow-x: auto;
  border: 1px solid #dfeaf0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.table-frame .table,
.table-frame-lite .table { border: 0; border-radius: 0; min-width: 50%; }
.table-frame .table th,
.table-frame .table td,
.table-frame-lite .table th,
.table-frame-lite .table td { white-space: normal; }
.table-frame .table .wrap,
.table-frame-lite .table .wrap { white-space: normal; word-break: break-word; }
.table-frame .table th:first-child,
.table-frame .table td:first-child,
.table-frame-lite .table th:first-child,
.table-frame-lite .table td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #fff; box-shadow: 1px 0 0 #edf2f5;
}
.table-frame .table thead th:first-child,
.table-frame-lite .table thead th:first-child { background: #edf7f8; z-index: 2; }
.table-frame .table tbody tr:hover td:first-child,
.table-frame-lite .table tbody tr:hover td:first-child { background: #edf8ff; }
.table-frame .table tbody tr:nth-child(even) td:first-child,
.table-frame-lite .table tbody tr:nth-child(even) td:first-child { background: #f5f8f9; }
.table-frame .table thead th,
.table-frame-lite .table thead th {
  background: #dfeef0;
  color: #23414a;
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .7rem .7rem;
  border-bottom: 1px solid #cfe1e5;
}
.table-frame .table tbody td,
.table-frame-lite .table tbody td {
  padding: .75rem .7rem;
  color: #1f2937;
  border-bottom: 1px solid #edf2f5;
}
.table-frame .table tbody tr,
.table-frame-lite .table tbody tr {
  transition: background-color .15s ease;
}
.table-frame .table tbody tr:hover,
.table-frame-lite .table tbody tr:hover {
  background: #edf8ff;
}
.table-frame .table tbody tr:nth-child(even),
.table-frame-lite .table tbody tr:nth-child(even) {
  background: #fbfcfd;
}

.table-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .75rem;
}
.table-search input, .table-search select { margin-top: 0; }
.table-search-input { flex: 1 1 14rem; max-width: 22rem; }
.table-sort-select { flex: 0 1 auto; max-width: 14rem; }
.table-frame .table th.is-sortable { cursor: pointer; user-select: none; }
.table-frame .table th.is-sortable:hover { color: var(--ink); }
.table-frame .table th.is-sortable .sort-arrow {
  margin-left: .35rem; opacity: .35; font-size: .75em; display: inline-block;
}
.table-frame .table th.is-sortable[aria-sort] { color: var(--ink); }
.table-frame .table th.is-sortable[aria-sort] .sort-arrow { opacity: 1; }
.table-search-empty { margin: .5rem 0 0; }

.responsive-table .cards { display: none; }
.table button {word-break: normal;}
.cards { flex-direction: column; gap: .55rem; margin: 0; }
.row-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; box-shadow: var(--shadow);
  padding: .7rem;
}
.row-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .6rem; flex-wrap: wrap;
}
.row-card-id { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.row-card-id strong { font-size: 1rem; }
.row-card-sub { color: var(--muted); font-size: .8rem; }
.row-card-body {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: .4rem;
}
.row-card .submission-grade-row { margin-top: .2rem; }
.row-card .submission-grade-row select,
.row-card .submission-grade-row input { flex: 1 1 7rem; }
.row-card .submission-note-label textarea { width: 100%; }

.badge { display: inline-block; padding: .2rem .4rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.badge-present { background: #d1fae5; color: #065f46; }
.badge-tardy { background: #fef3c7; color: #92400e; }
.badge-absent { background: #fee2e2; color: #991b1b; }
.badge-other { background: #ede9fe; color: #5b21b6; }
.dm-thread { margin-top: .35rem; }
.dm-thread > summary { color: var(--info); cursor: pointer; font-size: .85rem; font-weight: 400; }
.dm-thread-list { max-height: 20rem; overflow: auto; margin: .5rem 0 0; padding: 0 .5rem; list-style: none; }
.dm-thread-list li { padding: .4rem .7rem; border: 1px solid var(--line); margin:0 0 4px 4px;}
.dm-thread-meta { color: var(--muted); font-size: .8rem; }
.dm-thread-list p { margin: .15rem; overflow-wrap: anywhere; }
.dm-message-body--teacher { color: #041e97; background:#eaffff;}
.dm-message-body--ta { color: #000; }
.badge-ended { background: #e5e7eb; color: #374151; }
.qa-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  margin-left: .25rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.grid { display: grid; gap: 1rem; }

.form-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: .5rem;
  align-items: end;
}
.form-grid > label {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .25rem;
  min-width: 0;
}
.form-grid > label > input,
.form-grid > label > select {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}
.form-grid .form-actions {
  display: flex;
  align-items: flex-end;
  min-height: 2.5rem;
}
.form-grid .form-actions button {
  margin-top: 0;
  width: auto;
}

/* ---- Edit person (student / staff): responsive profile-style form ---- */
.person-card { max-width: 760px; margin: 1.5rem auto; }

.person-edit-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: .25rem;
}
.person-edit-head h1 { margin: .15rem 0 0 !important; }
.person-edit-head .breadcrumb { margin: 0; font-size: .88rem; }
.person-edit-head .breadcrumb a { color: var(--muted); font-weight: 600; }
.person-edit-head .breadcrumb a:hover { color: var(--accent); }

.status-pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .1rem .5rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
}
.status-pill-active { background: #d1fae5; color: #065f46; }
.status-pill-inactive { background: #fee2e2; color: #991b1b; }
.status-pill-homework-missing { background: #fce7f3; color: #9d174d; }
.hw-status-cell { text-align: center; min-width: 140px; vertical-align: middle; }
.hw-status-cell.uploaded { background: #dcfce7; }
.hw-status-cell.missing { background: #fce7f3; }

.field-grid {
  display: grid;
  gap: 1rem 1.1rem;
  margin: 1.2rem 0 0;
}
.field-grid > label,
.field-grid > .field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.field-grid input,
.field-grid select,
.field-grid textarea {
  margin-top: 0;
  width: 100%;
  box-sizing: border-box;
}
.field-full { grid-column: 1 / -1; }
.field-hint { margin: -.15rem 0 0; color: var(--muted); font-size: .7rem; font-weight: 500; }

.status-row { display: flex; flex-wrap: wrap; gap: .6rem .9rem; }
.check-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0; padding: .55rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: #f8fafc;
  font-weight: 600; font-size: .88rem; color: var(--ink); cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.check-pill input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.check-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.field-actions { display: flex; align-items: flex-end; }
.field-actions button { margin-top: 0; }

.child-list-compact {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .65rem;
}
@media (min-width: 560px) {
  .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .child-list-compact { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
@media (min-width: 900px) {
  .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.qr-card {
  text-align: center;
  padding: 1rem .2rem;
  min-width: 0;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: var(--shadow);
}
.qr-card img { width: 140px; height: 140px; }
.qr-card strong {
  display: block;
  margin-top: .35rem;
  word-break: break-word;
}
.qr-solo { max-width: 200px; margin: 1.25rem auto 0; }
.qr-solo-actions { justify-content: center; margin-top: 1rem; }

.summary { display: flex; flex-wrap: wrap; gap: .70rem; margin: 1rem 0; }
.summary span {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: .4rem .7rem; font-size: .88rem; color: #334155;
}
.summary span[data-tone="blue"] { background: #eff6ff; border-color: #bfdbfe; }
.summary span[data-tone="green"] { background: #f0fdf4; border-color: #bbf7d0; }
.summary span[data-tone="amber"] { background: #fffbeb; border-color: #fde68a; }
.summary span[data-tone="rose"] { background: #fff1f2; border-color: #fecdd3; }
.summary span[data-tone="cyan"] { background: #ecfeff; border-color: #a5f3fc; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .70rem;
  margin-top: 1rem;
}
.summary-grid .stat-featured { grid-column: 1 / -1; font-size: 200% !important; text-align:center;}
@media (min-width: 720px) {
  .profile-trigger-text { display: flex; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid.summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(120px, auto));
  }
  .summary-grid .stat-featured {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.stat-card,
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem;
  box-shadow: var(--shadow);
}
.stat-card[data-tone="blue"] { background: #eff6ff; border-color: #bfdbfe; }
.stat-card[data-tone="green"] { background: #f0fdf4; border-color: #bbf7d0; }
.stat-card[data-tone="amber"] { background: #fffbeb; border-color: #fde68a; }
.stat-card[data-tone="rose"] { background: #fff1f2; border-color: #fecdd3; }
.stat-card[data-tone="cyan"] { background: #ecfeff; border-color: #a5f3fc; }
.stat-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .70rem;
}
.stat-value {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
}
.stat-label { color: var(--muted); font-size: .9rem; font-weight: 600; margin-top: .3rem; }
.stat-sub { font-size: .9rem; margin-top: .30rem; line-height: 1.30; }
.stat-side { font-size: .95rem; font-weight: 700; white-space: nowrap; padding-top: .15rem; }

.dash-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .70rem 1.25rem;
  margin-bottom: .50rem;
}
.dash-head h1 {
  margin-bottom: 0;
  font-size: clamp(1.15rem, 2.5vw + 0.70rem, 1.5rem);
  line-height: 1.2;
}
.dash-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .65rem 1rem;
  flex: 1 1 auto;
}
.dash-head-link { font-weight: 700; font-size: 1rem; padding: 4px 8px; border-radius: 10px; border:1px solid #ddd;}
.dash-meta { margin: .25rem .50rem; font-weight: 700;}
.dash-holiday, .alert-txt { color: var(--err); }
button.del {
  background: linear-gradient(180deg, #fff0f0 0%, #fee9e9 100%);
  color: #b42318;
  border: 1px solid #f7b5b5;
  box-shadow: 0 1px 2px rgba(180, 35, 24, .06);
}
button.del:hover {
  background: linear-gradient(180deg, #fff6f6 0%, #ffe6e6 100%);
  border-color: #f29a9a;
  color: #991b1b;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(180, 35, 24, .09);
}
.pad1 { padding: .1rem .5rem; }
.dash-session {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem .70rem;
  margin: 0;
  flex: 0 1 16rem;
}
.dash-session label {
  margin: 0;
  width: 100%;
  font-size: .82rem;
}
.dash-session select {
  margin-top: .25rem;
  min-width: 7rem;
  width: 100%;
}
.dash-session-note { align-self: center; font-size: .75rem; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: .70rem;
}
.section-head h2 {
  font-size: 1.15rem;
  margin: 0;
}
.section-filters {
  margin: 0;
  font-size: .92rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.section-filters a { margin-right: 0; }
.section-filters a.is-active { font-weight: 700; color: var(--accent); }
.table-actions {
  white-space: nowrap;
  text-align: right !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  flex-wrap: wrap;
}
.table-actions > * {
  margin-top: 0;
}
.table-actions a,
.toolbar a,
.field-actions a,
.section-filters a,
.action-bar a,
.action-row a,
.detail-actions a,
.sub-head-actions a,
.sub-detail-actions a {
  min-height: 1.8rem;
  padding: .25rem .62rem;
  font-size: .8rem;
  border-radius: 6px;
}
.dashboard-action-link,
.dashboard-action-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 1.8rem;
  padding: .2rem .5rem;
  border: 1px solid #b4d4ea;
  border-radius: 5px;
  background: linear-gradient(180deg, #2a6ea9 0%, #235d8f 100%);
  color: #fff;
  font-size: .89rem;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(28, 71, 101, .12);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dashboard-action-link:hover,
.dashboard-action-link:focus-visible {
  background: linear-gradient(180deg, #245f95 0%, #1a4b74 100%);
  border-color: #1a4b74;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(31, 95, 152, .18);
}
.dashboard-action-link:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(15, 35, 53, .15);
}
.dashboard-action-link--small {
  min-height: 1.7rem;
  padding: .3rem .5rem;
  font-size: .8rem;
}
.dashboard-action-link--teal,
.dashboard-action-link--teal:visited {
  background: linear-gradient(180deg, #3b9ea7 0%, #2f818a 100%);
  border-color: #80c0c8;
}
.dashboard-action-link--teal:hover,
.dashboard-action-link--teal:focus-visible {
  background: linear-gradient(180deg, #2f8c96 0%, #236d76 100%);
  border-color: #236d76;
  color: #fff;
}
.dashboard-action-link--danger {
  background: linear-gradient(180deg, #fff0f0 0%, #fee9e9 100%);
  border-color: #f7b5b5;
  color: #b42318;
  box-shadow: 0 1px 2px rgba(180, 35, 24, .06);
}
.dashboard-action-link--danger:hover,
.dashboard-action-link--danger:focus-visible {
  background: linear-gradient(180deg, #fff6f6 0%, #ffe6e6 100%);
  border-color: #f29a9a;
  color: #991b1b;
  box-shadow: 0 4px 8px rgba(180, 35, 24, .09);
}
.checkin-big input { font-size: 1.4rem; letter-spacing: .08em; text-align: center; }
.toolbar { display: flex; flex-wrap: wrap; gap: .70rem; align-items: end; margin-bottom: 1rem; }
.toolbar label { margin: 0; flex: 1; min-width: 140px; }
.filters-bar { margin: .75rem 0 1rem; }
.add-panel {
  margin: 0 0 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--add);
  padding: .15rem .7rem;
}
.add-panel > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  padding: .25rem;
  color: var(--ink);
}
.add-panel > summary::-webkit-details-marker { display: none; }
.add-panel > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .4rem;
  transition: transform .15s ease;
}
.add-panel[open] > summary::before { transform: rotate(90deg); }
.add-panel[open] { padding-bottom: 1rem; }
.scanner-wrap { margin-bottom: 1rem; }
#qr-reader { width: 100%; max-width: 420px; margin: 0 auto .70rem; overflow: hidden; border-radius: 12px; }
#qr-reader video { border-radius: 12px; width: 100% !important; }
#qr-reader.qr-square { position: relative; aspect-ratio: 1 / 1; }
#qr-reader.qr-square video { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
.scan-status { font-size: .9rem; min-height: 1.25rem; text-align: center; margin: 0; }
.scanner-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
.result-card {
  margin-top: 1.25rem; padding: 1rem; border-radius: 12px; text-align: center;
  border: 1px solid var(--line); background: #fff;
}
.result-present { background: #f0fdf4; border-color: #bbf7d0; }
.result-tardy { background: #fef9c3; border-color: #fde047; }
.result-name { font-family: var(--display); font-size: 1.4rem; font-weight: 700; }
.checkin-search-status { margin: .25rem 0 .5rem; text-align: center; font-size: .9rem; }
.checkin-matches {
  display: flex; flex-direction: column; margin: .25rem 0 .75rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden;
}
.checkin-matches button.checkin-match {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; margin: 0; padding: .7rem .9rem; border: 0; border-radius: 0;
  border-top: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.checkin-matches button.checkin-match:first-child { border-top: 0; }
.checkin-matches button.checkin-match:hover,
.checkin-matches button.checkin-match:focus-visible { background: var(--accent-soft); color: var(--ink); }
.checkin-matches button.checkin-match:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.checkin-match-who { display: flex; flex-direction: column; min-width: 0; }
.checkin-match-name { font-weight: 700; overflow-wrap: anywhere; }
.checkin-match-detail { font-size: .85rem; }
.checkin-match-email { font-size: .8rem; overflow-wrap: anywhere; }
.checkin-match-side { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; font-size: .85rem; flex-shrink: 0; }
.checkin-match-action { color: var(--accent); font-weight: 700; }
/* display:flex above would otherwise beat the hidden attribute. */
.checkin-matches[hidden], .checkin-search-status[hidden] { display: none; }

/* Marks entry grid — aligned, color-coded groups */
.table-scroll { overflow-x: auto; margin-top: .5rem; }
.data-table { min-width: 52rem; border-collapse: separate; border-spacing: 0; }
.data-table th,
.data-table td {
  text-align: center;
  vertical-align: middle;
  padding: .3rem;
}
.data-table .table-sticky {
  text-align: left;
  min-width: 8.5rem;
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  font-weight: 600;
}
.data-table thead .table-sticky { z-index: 2; background: #f8fafc; }
.data-table .table-group {
  text-transform: none;
  letter-spacing: 0;
  font-size: .82rem;
  border-bottom: none;
  padding-top: .65rem;
  padding-bottom: .35rem;
}
.data-table .table-sub {
  font-size: .7rem;
  padding-top: .25rem;
  border-top: none;
}
.data-table .table-meta {
  min-width: 4.5rem;
  white-space: nowrap;
}
.data-table .table-total { background: #f1f5f9; }
.data-table tbody tr:hover .table-sticky { background: var(--add); }
.data-table tbody tr:hover .table-total { background: var(--add); }

.data-table .table-group-blue {
  background: #eff6ff;
  color: #1e3a8a;
  border-left: 2px solid #93c5fd;
}
.data-table thead .table-group-blue { background: #dbeafe; color: #1e40af; }
.data-table tbody tr:hover .table-group-blue { background: var(--accent-soft); }

.data-table .table-group-green {
  background: #f0fdf4;
  color: #14532d;
  border-left: 2px solid #86efac;
}
.data-table thead .table-group-green { background: #bbf7d0; color: #166534; }
.data-table tbody tr:hover .table-group-green { background: var(--add); }

.data-table .table-group-amber {
  background: #fff7ed;
  color: #9a3412;
  border-left: 2px solid #fdba74;
}
.data-table thead .table-group-amber { background: #fed7aa; color: #9a3412; }
.data-table tbody tr:hover .table-group-amber { background: var(--deac); }

.data-table .table-input {
  width: 4.25rem;
  margin: 0 auto;
  display: block;
  text-align: center;
  padding: .3rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .85);
}
.data-table .table-group-blue .table-input { border-color: #93c5fd; }
.data-table .table-group-green .table-input { border-color: #86efac; }
.data-table .table-group-amber .table-input { border-color: #fdba74; }


/* Student marks — exam scores + overall panel */
.marks-student-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 1rem;
  align-items: start;
  margin-top: .35rem;
}
@media (max-width: 820px) {
  .marks-student-grid { grid-template-columns: 1fr; }
}
.marks-exam-card,
.marks-overall-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.marks-panel-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .70rem;
  color: var(--ink);
}
.marks-exam-table { margin: 0; }
.marks-exam-table th {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
}
.marks-exam-table td:nth-child(2),
.marks-exam-table td:nth-child(3),
.marks-exam-table td:nth-child(4),
.marks-exam-table th:nth-child(2),
.marks-exam-table th:nth-child(3),
.marks-exam-table th:nth-child(4) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.marks-mid-row td:first-child { font-weight: 600; }
.marks-note {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  margin-top: .15rem;
}
.marks-info-banner {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-top: .8rem;
  padding: .7rem;
  background: #e0f2fe;
  color: #0c4a6e;
  border-radius: 10px;
  font-size: .92rem;
  line-height: 1.4;
}
.marks-info-icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #0284c7;
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: .1rem;
}
.marks-footnote { margin: .70rem 0 0; font-size: .88rem; }
.marks-overall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .70rem;
  margin-bottom: .25rem;
}
.marks-overall-head .marks-panel-title { margin-bottom: 0; }
.marks-letter {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.marks-ring-wrap {
  --marks-ring-deg: 0deg;
  position: relative;
  width: min(12.5rem, 70%);
  aspect-ratio: 1;
  margin: 1rem auto .7rem;
}
.marks-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(
      from -90deg,
      #38bdf8 0deg,
      #6366f1 var(--marks-ring-deg),
      #e2e8f0 var(--marks-ring-deg) 360deg
    );
}
.marks-ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: #fff;
}
.marks-ring-center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.marks-ring-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.marks-ring-label {
  margin-top: .2rem;
  font-size: .88rem;
  color: var(--muted);
  font-weight: 600;
}
.marks-encourage {
  text-align: center;
  margin: 0 0 1rem;
  font-size: .95rem;
  color: #334155;
  font-weight: 600;
}
.marks-weight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.marks-weight-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .70rem;
  padding: .50rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.marks-weight-list li:last-child { border-bottom: none; padding-bottom: 0; }
.marks-weight-list li:nth-child(odd) {background-color: #f5f8f9;}
.marks-weight-list strong { font-variant-numeric: tabular-nums; }

.dash-announcements { margin: .5rem; display: grid; gap: .50rem; }
.dash-announcement { margin: 0; background-color:#ffc50a50; color: #212121;border:1px solid #777;}
.dash-announcement-title { font-weight: 700; margin-bottom: .25rem; }
.dash-announcement-body { font-size: .95rem; line-height: 1.4; }

.inline-block {display:inline-block;}
.inline-block75 {display:inline-block;width: 74%; vertical-align: middle;}
.inline-block50 {display:inline-block;width: 45%; vertical-align: middle;}
.inline-block25 {display:inline-block;width: 24%; vertical-align: middle;}

.valign {vertical-align: top !important;}
.left {text-align: left;justify-content: left;}
.right {text-align: right;justify-content: right;}
.center {text-align: center;justify-content: center;}

.attachment-viewer-body {
  margin: 0;
  min-height: 100vh;
  background: #0f172a;
  display: flex;
  flex-direction: column;
}
.attachment-viewer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .7rem;
  background: #1e293b;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.attachment-viewer-title {
  font-weight: 700;
  font-size: .95rem;
  max-width: min(40rem, 70vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.attachment-viewer-actions a {
  margin: 0;
  text-decoration: none;
}
.attachment-viewer-actions a.button,
.attachment-viewer-actions a.secondary {
  display: inline-flex;
  align-items: center;
  padding: .4rem .7rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
}
.attachment-viewer-actions a.button {
  background: var(--accent, #2563eb);
  color: #fff;
  border: 1px solid transparent;
}
.attachment-viewer-actions a.secondary {
  background: transparent;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.28);
}
.attachment-viewer-actions a.button:hover,
.attachment-viewer-actions a.secondary:hover {
  opacity: .92;
  text-decoration: none;
}
.attachment-viewer-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #111827;
}
.attachment-viewer-frame {
  width: 100%;
  height: calc(100vh - 3.4rem);
  border: 0;
  background: #fff;
}
.attachment-viewer-image {
  max-width: 100%;
  max-height: calc(100vh - 3.4rem);
  object-fit: contain;
  margin: auto;
  display: block;
}
.attachment-viewer-fallback {
  margin: 2rem auto;
  align-self: center;
}

.submission-file-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
}
.submission-file-name { min-width: 0; word-break: break-word; font-weight: 700; }
.pdf-annotate-link {
  flex: none; white-space: nowrap; font-size: .78rem; font-weight: 600;
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid #cbd5e1;
  background: #fff; color: #475569; text-decoration: none; line-height: 1.2;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pdf-annotate-link:hover { background: #f8fafc; color: var(--ink); border-color: #94a3b8; text-decoration: none; }

.submission-feedback-list {
  list-style: none; margin: .3rem 0 0; padding: .2rem .2rem .2rem .7rem;
  display: flex; flex-direction: column; gap: .15rem;
  border-left: 2px solid #cbd5e1;
}
.submission-feedback-list li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; font-size: .88rem;
}
.submission-feedback-list li::before {
  content: ''; width: 6px; height: 6px; margin-top: .45em; border-radius: 50%; background: var(--ok); flex: none;
}
.submission-feedback-list li a { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.pdf-feedback-remove-form { display: inline-flex; margin: 0; flex: none; }
.pdf-feedback-remove-btn {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  padding: 0; margin: 0; border-radius: 50%; background: transparent; border: none;
  color: var(--muted); font-size: 1rem; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity .15s ease, background .12s ease, color .12s ease;
}
.submission-feedback-list li:hover .pdf-feedback-remove-btn,
.pdf-feedback-remove-btn:focus-visible {
  opacity: 1;
}
.pdf-feedback-remove-btn:hover { background: #fee2e2; color: var(--err); }
@media (hover: none) {
  .pdf-feedback-remove-btn { opacity: 1; }
}

.submission-grade-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }
.submission-grade-actions button { width: auto; margin-top: 0; }

.table-frame .submission-grade-form { max-width: none; width: 100%; }
.table-frame .submission-grade-row { flex-wrap: nowrap; }
.table-frame .submission-grade-row select,
.table-frame .submission-grade-row input { flex: 1 1 0; width: auto; }

.pdf-editor-filename { margin: .15rem 0 0; }

.pdf-editor-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .3rem;
  padding: .4rem .5rem; margin-bottom: .7rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow);
  overflow-x: auto; scrollbar-width: thin;
  position: sticky; top: 0; z-index: 10;
}
.pdf-editor-group { display: flex; align-items: center; gap: .3rem; flex: none; }
.pdf-editor-divider {
  width: 1px; align-self: stretch; margin: .3rem .15rem; background: var(--line); flex: none;
}

.pdf-editor-btn {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  width: 34px; height: 34px; padding: 0; flex: none;
  background: transparent; color: var(--muted); border: 1px solid transparent; border-radius: 8px;
  font-weight: 600; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pdf-editor-btn svg { width: 18px; height: 18px; display: block; }
.pdf-editor-btn:hover:not(:disabled) { background: var(--bg); color: var(--ink); border-color: var(--line); }
.pdf-editor-btn:disabled { opacity: .35; cursor: not-allowed; }
.pdf-editor-btn.is-active {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft);
}
.pdf-editor-btn--danger:hover:not(:disabled) { background: #fee2e2; color: var(--err); border-color: #fecaca; }

.pdf-editor-swatch-btn { border-radius: 10px; }
.pdf-editor-swatch {
  width: 17px; height: 17px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.pdf-editor-swatch--bar { width: 20px; height: 11px; border-radius: 4px; }
.pdf-editor-swatch-btn.is-active { background: var(--accent-soft); border-color: var(--accent-soft); }
.pdf-editor-swatch-btn.is-active .pdf-editor-swatch {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px #fff, 0 0 0 3.5px var(--accent);
}

.pdf-editor-zoom { gap: .1rem; background: var(--bg); border-radius: 8px; padding: 0 .15rem; }
.pdf-editor-zoom-level {
  min-width: 3rem; text-align: center; font-size: .82rem; font-weight: 700; color: var(--ink);
}

.pdf-editor-pen-size { gap: .3rem; background: var(--bg); border-radius: 8px; padding: 0 .3rem 0 .15rem; }
.pdf-editor-pen-size-dot {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none;
}
.pdf-editor-pen-size-dot span { display: block; border-radius: 50%; background: var(--ink); }
.pdf-editor-pen-size-label {
  min-width: 2rem; text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink);
}

.pdf-editor-file { margin-left: auto; }
.pdf-editor-save-btn {
  width: auto; padding: 0 .9rem; background: var(--accent); color: #fff; border-color: var(--accent);
  font-size: .88rem;
}
.pdf-editor-save-btn:hover:not(:disabled) { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.pdf-editor-save-btn:disabled { opacity: .45; }

.pdf-editor-hint { margin: 0 0 .5rem; font-size: .82rem; }
.pdf-editor-status { min-height: 1.2rem; color: var(--err); font-weight: 600; font-size: .88rem; }

.pdf-editor-pages {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1rem; background: #e7e9f2; border-radius: var(--radius);
  overflow-x: auto;
  /* Stop a stylus drag from selecting text or raising the long-press callout. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pdf-editor-page {
  position: relative; background: #fff; border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,31,54,.10), 0 8px 24px rgba(26,31,54,.14); flex: none;
}
.pdf-editor-base-canvas, .pdf-editor-overlay-canvas, .pdf-editor-ink-canvas {
  position: absolute; top: 0; left: 0; display: block;
}
/* The stroke in progress is painted here, above the committed annotations,
   so it never has to repaint them. It is purely visual — all pointer events
   belong to the overlay underneath. */
.pdf-editor-ink-canvas { pointer-events: none; }
/* While a finger can still draw, the overlay must own every touch or the
   scroller steals half the strokes. Once palm rejection is on, touch is free
   again: pinch-zoom goes back to the browser and pdf-editor.js turns a
   one-finger drag into a scroll, leaving single-pointer stylus input to us. */
.pdf-editor-overlay-canvas { touch-action: none; }
.pdf-editor.is-stylus-only .pdf-editor-overlay-canvas { touch-action: pinch-zoom; }
.pdf-editor-toolbar { touch-action: manipulation; }
.pdf-editor-input-mode { gap: .3rem; background: var(--bg); border-radius: 8px; padding: 0 .3rem; }
.pdf-editor-input-mode-icon { width: 16px; height: 16px; display: block; flex: none; color: var(--muted); }
.pdf-editor-input-mode select {
  border: 0; background: none; padding: .25rem .1rem; margin: 0;
  font: inherit; font-size: .8rem; color: var(--ink); cursor: pointer;
}
.pdf-editor-text-editor { position: fixed; z-index: 90; }
.pdf-editor-text-input {
  display: block; min-width: 8rem; min-height: 1.6rem;
  padding: .1rem .3rem; margin: 0; border: 1.5px dashed var(--accent);
  border-radius: 4px; font-family: Helvetica, Arial, sans-serif; color: #111827;
  background: rgba(255,255,255,.92); resize: both;
}
.pdf-editor-text-toolbar {
  position: absolute; bottom: 100%; left: 0; margin-bottom: 6px;
  display: flex; align-items: center; gap: .2rem; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: .25rem;
}
.pdf-editor-text-toolbar-btn {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 6px; background: transparent; border: 1px solid transparent;
  color: var(--ink); font-size: .8rem; font-weight: 700;
}
.pdf-editor-text-toolbar-btn:hover { background: var(--bg); }
.pdf-editor-text-toolbar-btn.is-active { background: var(--accent-soft); color: var(--accent); }
.pdf-editor-text-toolbar-italic { font-style: italic; }
.pdf-editor-text-toolbar-divider { width: 1px; align-self: stretch; margin: 2px 1px; background: var(--line); }
.pdf-editor-text-toolbar-size {
  min-width: 2.6rem; text-align: center; font-size: .75rem; font-weight: 700; color: var(--ink);
}
.pdf-editor-text-toolbar-colors { display: flex; gap: .15rem; }
.pdf-editor-text-toolbar-btn--swatch { border-radius: 50%; }
.pdf-editor-text-toolbar-swatch {
  width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.pdf-editor-text-toolbar-btn--swatch.is-active {
  background: transparent; box-shadow: 0 0 0 2px var(--accent);
}

body.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[hidden] { display: none !important; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 31, 54, .45);
}
.modal-card {
  position: relative;
  width: min(29rem, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1rem;
  z-index: 1;
}
.modal-card h2 { margin: 0; font-size: 1.2rem; }
.modal-card .toolbar { justify-content: flex-end; }
.modal-card .toolbar button { margin-top: 0; }

/* -- Check-in status pop-up (issue #27) -- */
.checkin-modal-card {
  text-align: center;
}
.checkin-modal-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto .75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.checkin-modal[data-status="success"] .checkin-modal-icon { background: #dcfce7; color: #14532d; }
.checkin-modal[data-status="warning"] .checkin-modal-icon { background: #fef9c3; color: #713f12; }
.checkin-modal[data-status="error"] .checkin-modal-icon { background: #fee2e2; color: #7f1d1d; }
.checkin-modal-name {
  margin: .5rem 0 .15rem;
  font-size: 1.35rem;
  font-weight: 600;
}
.checkin-modal-meta { margin: 0; font-size: .9rem; }
.checkin-modal-message { margin: .6rem 0 0; }
.checkin-modal-time { margin: .55rem 0 0; font-size: 1rem; }
.checkin-modal-time strong { font-variant-numeric: tabular-nums; }
.checkin-modal-card .badge { margin-top: .75rem; }
.checkin-modal-card .toolbar { justify-content: center; margin-top: 1rem; }
.checkin-modal .modal-card {
  animation: checkin-pop .18s ease-out;
}
@keyframes checkin-pop {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .checkin-modal .modal-card { animation: none; }
}

/* -- Combine photos into one PDF (issue #13) -- */
.photo-combine {
  margin: .6rem 0 .25rem;
}
.photo-combine-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.photo-combine-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.photo-combine-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
}
.photo-combine-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-combine-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.photo-combine-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}
.photo-combine-sub {
  font-size: .8rem;
}
.photo-combine-actions {
  flex: 0 0 auto;
  display: flex;
  gap: .3rem;
}
.photo-combine-btn {
  width: 2rem;
  min-width: 2rem;
  padding: .3rem 0;
  margin-top: 0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 700;
  line-height: 1;
}
.photo-combine-btn:hover:not(:disabled) {
  background: #f8fafc;
  color: var(--ink);
  border-color: #94a3b8;
}
.photo-combine-btn:disabled {
  opacity: .4;
  cursor: default;
}
.photo-combine-btn--remove {
  color: var(--err);
  border-color: #fecaca;
}
.photo-combine-btn--remove:hover:not(:disabled) {
  background: #fef2f2;
  color: var(--err);
  border-color: #fca5a5;
}
/* While the PDF builds the payload is frozen; grey the reorder/remove controls
   to match (the script also ignores clicks on them until the build finishes). */
.photo-combine.is-building .photo-combine-list {
  opacity: .55;
  pointer-events: none;
}
.photo-combine-note {
  margin: .5rem 0 0;
  font-size: .88rem;
}
.photo-combine-error {
  margin: .5rem 0 0;
  padding: .4rem .65rem;
  border-radius: 8px;
  background: #fee2e2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  font-size: .88rem;
}
.label { display: inline-block; align-items: left; white-space: nowrap;}
.notenrolled { color: var(--err) !important; }
.deactivate { background: var(--deac) !important; }
 
/* -- Print Media -- */
@media print {
  @page {size: Letter portrait;margin: 0.2in;}

  html, body {margin: 0 !important;padding: 0 !important;background: #fff !important;}

  .table-frame,
  .table-frame-lite { overflow: visible; border: 0; }
  .table-frame .table,
  .table-frame-lite .table,
  .table-frame .table.submissions-table,
  .table-frame-lite .table.submissions-table { min-width: 0; }
  .table-frame .table th, .table-frame .table td,
  .table-frame-lite .table th, .table-frame-lite .table td { white-space: normal; }
  .table-frame .table th:first-child, .table-frame .table td:first-child,
  .table-frame-lite .table th:first-child, .table-frame-lite .table td:first-child { position: static; box-shadow: none; }
  .table-search { display: none; }

  /* Hide screen-only controls */
  .toolbar,.card > h1,nav,header,footer,
  button {display: none !important;}

  /* Main card */
  .card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .qr-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .qr-card {
    box-sizing: border-box;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 8px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    border: 1px solid #d9dee8 !important;
    border-radius: 8px !important;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .qr-card img {
    display: block;
    width: 72% !important;
    height: auto !important;
    max-width: 145px !important;
    max-height: 145px !important;
    object-fit: contain;
    margin: 0 auto 6px !important;
  }

  .qr-card strong {
    display: block;
    margin: 0;
    font-size: 10pt;
    line-height: 1.15;
    font-weight: 700;
    color: #111827 !important;
    overflow-wrap: anywhere;
  }

  .qr-card .muted {
    display: block;
    margin-top: 2px;
    font-size: 8.5pt;
    line-height: 1.15;
    color: #64748b !important;
  }

  /* Empty state */
  .qr-grid > p.muted {
    grid-column: 1 / -1;
  }

  /* Preserve QR/image rendering */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

.sub-head { align-items: center; }
.sub-head .dash-head-main { align-items: center; }
.sub-session-pill {
  display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px;
  background: var(--accent-soft); color: #4338ca; font-size: .8rem; font-weight: 700;
}
.sub-head-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sub-head-actions .btn { margin-top: 0; }
.sub-btn-primary { display: inline-flex; align-items: center; gap: .4rem; box-shadow: 0 6px 16px rgba(79, 70, 229, .25); }
.sub-btn-primary svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sub-intro { max-width: 62rem; margin: .35rem 0 .9rem; }
.sub-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-stat {
  padding: .35rem .75rem; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line);
  color: var(--muted); font-size: .88rem;
}
.sub-stat strong { color: var(--ink); font-size: 1rem; margin-right: .15rem; }

.sub-section { margin-top: 1rem; }
.sub-section h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: 1.2rem; }
.sub-count {
  min-width: 1.6rem; padding: .05rem .5rem; border-radius: 999px; background: #eef2ff; color: #4338ca;
  font-size: .8rem; font-weight: 700; text-align: center;
}
.sub-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; text-align: center; }
.sub-table th { white-space: nowrap !important; }
.sub-table th.is-sortable { cursor: pointer; user-select: none; }
.sub-table th.is-sortable .sort-arrow { margin-left: .35rem; opacity: .35; font-size: .75em; }
.sub-table th.is-sortable[aria-sort] .sort-arrow { opacity: 1; }
.sub-table td { vertical-align: middle; }
.sub-name { font-weight: 700; }
.sub-meta { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
.sub-class {
  display: inline-block; padding: .15rem .55rem; border-radius: 8px; background: #f1f5f9;
  font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.sub-window { font-weight: 600; white-space: nowrap; }
.sub-progress { height: 4px; margin-top: .4rem; max-width: 11rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.sub-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6366f1, #22c55e); }
.sub-actions { white-space: nowrap; text-align: right; }
.sub-btn-sm { padding: .32rem .75rem !important; font-size: .85rem; margin-top: 0; }
.sub-actions .sub-btn-sm + .sub-btn-sm { margin-left: .35rem; }
.btn.sub-btn-danger-soft { color: #b91c1c; border-color: #fecaca; }
.btn.sub-btn-danger-soft:hover { background: #fef2f2; color: #991b1b; border-color: #f87171; }
.sub-card .sub-progress { max-width: none; }
.sub-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .35rem; }
.sub-card-actions .btn { text-align: center; }
.sub-card-actions--single { grid-template-columns: 1fr; }

.sub-modal .modal-backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.sub-modal-card {
  width: min(40rem, 100%); max-height: min(92vh, 52rem); padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
  animation: sub-modal-in .2s cubic-bezier(.2, .8, .2, 1);
}
.sub-modal-card--sm { width: min(32rem, 100%); }
.sub-modal:not([hidden]) .modal-backdrop { animation: sub-fade-in .2s ease-out; }
@keyframes sub-modal-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sub-fade-in { from { opacity: 0; } to { opacity: 1; } }
.sub-modal-head {
  display: flex; align-items: flex-start; gap: .85rem; padding: 1.15rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #f8f7ff 0%, #fff 100%);
}
.sub-modal-head > div { flex: 1; min-width: 0; }
.sub-modal-head h2 { margin: .1rem 0 .2rem; font-size: 1.2rem; }
.sub-modal-head p { margin: 0; color: var(--muted); font-size: .9rem; }
.sub-modal-icon {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.sub-modal-icon--danger { background: #fee2e2; color: #dc2626; }
.sub-modal-icon svg, .sub-summary-icon svg, .sub-modal-close svg {
  width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.sub-modal-close {
  flex: none; width: 2.1rem; height: 2.1rem; padding: 0; margin: 0; display: grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--muted);
}
.sub-modal-close:hover { background: #f1f5f9; border-color: var(--line); color: var(--ink); }
.sub-modal-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.sub-modal-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.sub-modal-foot {
  display: flex; justify-content: flex-end; gap: .6rem; padding: .85rem 1.25rem;
  border-top: 1px solid var(--line); background: #f8fafc;
}
.sub-modal-foot button, .sub-modal-foot .btn { margin-top: 0; min-width: 7.5rem; }
.sub-fieldset { border: 0; margin: 0 0 1.1rem; padding: 0; min-width: 0; }
.sub-fieldset:last-child { margin-bottom: .25rem; }
.sub-fieldset legend {
  padding: 0; margin-bottom: .55rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #6366f1;
}
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .9rem; }
.sub-span-2 { grid-column: 1 / -1; }
.sub-field { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.sub-field input, .sub-field select, .sub-field textarea { margin-top: 0; border-radius: 10px; padding: .6rem .7rem; }
.sub-field textarea { resize: vertical; min-height: 4.5rem; }
.sub-optional { font-weight: 500; color: var(--muted); font-size: .8rem; }
.sub-hint { margin: -.25rem 0 0; font-size: .82rem; color: var(--muted); }
.sub-hint.is-warning { color: #b45309; }
.sub-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .6rem; }
.sub-chip {
  margin: 0; padding: .3rem .75rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: #fff; color: #475569; border: 1px solid #cbd5e1;
}
.sub-chip small { font-weight: 600; color: var(--muted); margin-left: .15rem; }
.sub-chip:hover { background: #f5f3ff; color: var(--accent); border-color: #c7d2fe; }
.sub-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sub-chip.is-active small { color: #e0e7ff; }
.sub-summary {
  display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff;
}
.sub-summary-icon {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center;
  background: #fff; color: var(--accent); box-shadow: var(--shadow);
}
.sub-summary-range { font-weight: 700; color: var(--ink); }
.sub-summary-note { font-size: .84rem; color: #4f46e5; margin-top: .1rem; }
.sub-counter { text-align: right; font-size: .75rem; color: var(--muted); margin: .25rem 0 .6rem; }
.sub-email-notice {
  display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; padding: .6rem .8rem;
  border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: .86rem; font-weight: 600;
}
.sub-email-notice svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sub-switch {
  display: flex; align-items: flex-start; gap: .75rem; margin: 0; padding: .75rem .85rem;
  border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 400;
}
.sub-switch:hover { border-color: #c7d2fe; background: #fafaff; }
.sub-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sub-switch-track {
  flex: none; position: relative; width: 2.6rem; height: 1.5rem; margin-top: .1rem; border-radius: 999px;
  background: #cbd5e1; transition: background .15s;
}
.sub-switch-track::after {
  content: ""; position: absolute; top: .19rem; left: .19rem; width: 1.12rem; height: 1.12rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .15s;
}
.sub-switch input:checked + .sub-switch-track { background: var(--accent); }
.sub-switch input:checked + .sub-switch-track::after { transform: translateX(1.1rem); }
.sub-switch input:focus-visible + .sub-switch-track { box-shadow: 0 0 0 3px rgba(79, 70, 229, .3); }
.sub-switch-text { display: flex; flex-direction: column; gap: .1rem; font-size: .9rem; }
.sub-switch-text span { color: var(--muted); font-size: .82rem; }
.sub-alert {
  margin: 0 0 1rem; padding: .7rem .85rem; border-radius: 10px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-weight: 600; font-size: .9rem;
}
.sub-consequence { margin: 0; padding: .7rem .85rem; border-radius: 10px; background: #fff7ed; color: #9a3412; font-size: .9rem; }
button.sub-btn-danger { background: #dc2626; border-color: #dc2626; }

.sub-modal-card--sm .sub-modal-body { padding: 1.25rem 1.4rem 1.4rem; }
.sub-modal-card--sm .sub-modal-head { padding: 1.2rem 1.4rem 1.05rem; }
.sub-modal-card--sm .sub-modal-foot { padding: .9rem 1.4rem; }
.sub-modal-head p.sub-modal-who { color: var(--ink); font-size: .95rem; margin-bottom: .05rem; }
.sub-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.sub-stack > * { margin: 0; }
.sub-field-label { display: block; margin: 0 0 .4rem; }
.sub-days-row { display: flex; align-items: center; gap: .6rem; }
.sub-days-row input { width: 7.5rem; margin: 0; border-radius: 10px; padding: .6rem .7rem; font-weight: 700; }
.sub-days-row span { color: var(--muted); font-weight: 600; }
.sub-chips--spaced { margin: .8rem 0 0; gap: .5rem; }
.sub-change {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem 1rem;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff); border: 1px solid #e0e7ff;
}
.sub-change > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sub-change-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sub-change-value { font-weight: 700; font-size: 1rem; color: var(--ink); }
.sub-change-old .sub-change-value { color: var(--muted); font-weight: 600; }
.sub-change-new .sub-change-label { color: #6366f1; }
.sub-change-new .sub-change-value { color: #4338ca; }
.sub-change-arrow {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--accent); box-shadow: var(--shadow);
}
.sub-change-arrow svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sub-change-note { grid-column: 1 / -1; margin: .15rem 0 0; padding-top: .6rem; border-top: 1px dashed #c7d2fe; font-size: .85rem; color: #4f46e5; }
.sub-change.is-warning { background: #fffbeb; border-color: #fde68a; }
.sub-change.is-warning .sub-change-note { color: #b45309; border-top-color: #fde68a; }
button.sub-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

@media screen and (max-width: 640px) {
  .page-inner, .content { padding: .5rem; }
  .card { padding: .5rem; }
  .responsive-table .table-frame { display: none; }
  .responsive-table .cards { display: flex; }
  .sub-section .responsive-table .table-frame-lite { display: none; }
  .sub-head-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .sub-head-actions .btn {
    display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0;
  }
  .sub-head-actions .sub-btn-primary { grid-column: 1 / -1; }
  .sub-modal { align-items: flex-end; padding: 0; }
  .sub-modal-card, .sub-modal-card--sm {
    width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; border-bottom: 0;
    animation-name: sub-sheet-in;
  }
  .sub-modal-head { padding: 1rem 1rem .85rem; }
  .sub-modal-body, .sub-modal-card--sm .sub-modal-body { padding: 1rem; }
  .sub-modal-card--sm .sub-modal-head { padding: 1rem 1rem .85rem; }
  .sub-modal-card--sm .sub-modal-foot { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
  .sub-modal-foot { padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); }
  .sub-modal-foot button, .sub-modal-foot .btn { flex: 1; min-width: 0; }
  .sub-grid { grid-template-columns: 1fr; }
  .sub-detail-actions { width: 100%; }
  .sub-detail-actions .btn, .sub-detail-actions form, .sub-detail-actions button { flex: 1; text-align: center; }
  .sub-detail-head h1 { font-size: 1.35rem; }
  .sub-details > div { grid-template-columns: 1fr; gap: .15rem; }
  .sub-away-label { min-width: 0; width: 100%; }
  .cover-section .responsive-table .table-frame-lite { display: none; }
}
@keyframes sub-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sub-modal-card, .sub-modal:not([hidden]) .modal-backdrop { animation: none; }
  .sub-switch-track, .sub-switch-track::after { transition: none; }
}

.sub-brief { margin: 1rem 0; border-left: 4px solid var(--accent); }
.sub-brief-head { display: flex; align-items: center; gap: .8rem; }
.sub-brief-head h2 { margin: 0; font-size: 1.1rem; }
.sub-brief-head p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.sub-brief-note { margin-top: .85rem; padding: .8rem .95rem; border-radius: 12px; background: #f5f3ff; border: 1px solid #e0e7ff; }
.sub-brief-note span { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #6366f1; }
.sub-brief-note p { margin: .35rem 0 0; white-space: normal; }
.sub-brief-empty { margin: .75rem 0 0; }

.sub-modal-icon--record { background: #e0f2fe; color: #0369a1; }
.sub-summary.is-warning { background: #fffbeb; border-color: #fde68a; }
.sub-summary.is-warning .sub-summary-note { color: #b45309; }

.sub-detail { display: flex; flex-direction: column; gap: 1rem; }
.sub-back { font-weight: 600; font-size: .9rem; width: fit-content; }
.sub-detail-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.sub-detail-head h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0; font-size: 1.6rem; }
.sub-detail-head h1 .badge { font-size: .8rem; }
.sub-detail-actions { display: flex; gap: .5rem; align-items: center; }
.sub-detail-actions form { margin: 0; }
.sub-sentence { margin: 0; font-size: 1.1rem; line-height: 1.55; color: #334155; }
.sub-sentence strong { color: var(--ink); }
.sub-details { margin: 0; border-top: 1px solid var(--line); }
.sub-details > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.sub-details dt { color: var(--muted); font-weight: 600; }
.sub-details dd { margin: 0; color: var(--ink); }

.poster-badge { margin-left: .35rem; font-size: .72rem; vertical-align: middle; }
.poster-line { margin: .1rem 0 .6rem; font-size: .9rem; }
.poster-line strong { color: var(--ink); }

.sub-away { margin: 1rem 0; border-left: 4px solid #6366f1; }
.sub-away h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.sub-away-dates { margin: 0 0 .5rem; }
.sub-away-list { list-style: none; margin: .75rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.sub-away-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.sub-away-label { min-width: 15rem; color: #334155; font-weight: 600; }
.sub-away-attention { color: #b45309; }
.sub-away-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px;
  background: #eef2ff; border: 1px solid #e0e7ff; color: #4338ca; font-size: .86rem; font-weight: 600;
}
.sub-away-chip:hover { background: #e0e7ff; text-decoration: none; }
.sub-away-chip span { color: #6366f1; font-weight: 500; font-size: .8rem; }
.sub-away-chip--attention { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.sub-away-chip--attention span { color: #b45309; }

.cover-section { margin-top: 1rem; }
.cover-section > h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.2rem; }
.cover-booked { margin: .6rem 0; border-left: 4px solid #a78bfa; }
.cover-note { margin-top: .35rem; font-size: .88rem; }
.nav-cover-link { white-space: nowrap; }