/* Shared shell for the department pages (ms/, later hs/ and es/): account bar in the header, collapsible tools sidebar, loading panel and the
   progress dialog. Built by shared/js/lia-shell.js. Uses the colour variables of styles.css / evaluation-base.css, so dark mode just works. */

/* ---------- account bar (first row of the header banner) ---------- */
.lia-account { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: -8px 0 10px; position: relative; }
.lia-actions { display: contents; }
.lia-account .lia-more-btn { display: none; }
/* on a computer the buttons keep their old order: help, theme, the person, school shortcuts, home, sign out */
.lia-menu-btn { order: 0; } #liaHelpBtn { order: 1; } .lia-theme-btn { order: 2; } .lia-user { order: 3; } .lia-short { order: 4; } #liaHomeLink { order: 5; } #liaSignOut { order: 6; }
.lia-user { text-align: right; line-height: 1.25; margin-right: 6px; min-width: 0; }
.lia-user-name { display: block; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.lia-user-role { display: block; color: #cbd5e1; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.lia-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; text-decoration: none; transition: background .15s; }
.lia-icon-btn:hover, .lia-icon-btn:focus-visible { background: rgba(255,255,255,.22); outline: none; }
.lia-pill { width: auto; min-width: 36px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.lia-icon-btn svg, .lia-side svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lia-menu-btn { display: none; margin-right: auto; }
.lia-theme-btn .lia-sun { display: none; }
body.dark-mode .lia-theme-btn .lia-sun { display: block; }
body.dark-mode .lia-theme-btn .lia-moon { display: none; }
/* the page's old text button (Dark / Light) is never shown: the account bar has its own light/dark button, and hiding it only once that bar exists made it flash on every load */
.theme-toggle-btn { display: none !important; }

/* ---------- sidebar: icons only until opened ---------- */
.lia-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1500; width: 60px; display: flex; flex-direction: column; gap: 4px; padding: 12px 8px; overflow-y: auto; overflow-x: hidden;
  background: var(--card-bg); border-right: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: width .18s ease; }
.lia-side-item, .lia-side-toggle { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px; border-radius: 10px; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; text-align: left; }
.lia-side-item:hover, .lia-side-toggle:hover, .lia-side-item:focus-visible, .lia-side-toggle:focus-visible { background: var(--bg-main); color: var(--text-dark); outline: none; }
.lia-side-item.active { background: var(--accent-blue); color: #fff; }
.lia-side-label { opacity: 0; transition: opacity .12s; }
.lia-side-toggle { margin-bottom: 6px; }
.lia-side-toggle svg { transition: transform .18s; }
.lia-side-sep { height: 1px; margin: 6px 4px; background: var(--border-color); }
body.has-shell { padding-left: 76px; }
body.lia-side-open { padding-left: 236px; }
body.lia-side-open .lia-side { width: 220px; }
body.lia-side-open .lia-side-label { opacity: 1; }
body.lia-side-open .lia-side-toggle svg { transform: rotate(180deg); }
.lia-side-backdrop { display: none; }

@media (max-width: 900px) {
  body.has-shell, body.lia-side-open { padding-left: 10px; }
  .lia-side { width: 250px; transform: translateX(-105%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .lia-side .lia-side-label { opacity: 1; }
  .lia-side-toggle { display: none; }
  body.lia-drawer .lia-side { transform: none; }
  body.lia-drawer .lia-side-backdrop { display: block; position: fixed; inset: 0; z-index: 1400; background: rgba(15, 23, 42, .45); }
  .lia-menu-btn { display: inline-flex; }
  .lia-user-name { max-width: 150px; }
}

/* Phones: one slim row (menu, the person, a "more" button). Help, light / dark, the other schools, Administration, All tools and Sign out sit in the
   panel the "more" button opens. The school header under it is smaller too (logo, title, no subtitle). */
@media (max-width: 640px) {
  .lia-account { justify-content: flex-start; margin: 0 0 8px; gap: 8px; }
  .lia-menu-btn { margin-right: 0; }
  .lia-user { flex: 1 1 0; min-width: 0; margin: 0; text-align: left; }
  .lia-user-name { max-width: none; }
  .lia-account .lia-more-btn { display: inline-flex; order: 9; }
  .lia-actions { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 260px; padding: 10px;
    background: rgba(15, 23, 42, .97); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, .35); }
  .lia-account.lia-more-open .lia-actions { display: flex; }
  header .school-logo { max-height: 34px; width: auto; }
  header .header-text .subtitle { display: none; }
  header .header-text h1 { font-size: 19px; }
  header .header-content { gap: 6px; }
}

@media print {
  .lia-account, .lia-side, .lia-side-backdrop, .lia-busy, .lia-dialog, .lia-help-bg { display: none !important; }
  body.has-shell, body.lia-side-open { padding-left: 0 !important; }
}

/* ---------- loading panel ---------- */
.lia-spin { display: inline-block; width: 34px; height: 34px; border: 3px solid rgba(128,128,128,.25); border-top-color: var(--accent-blue, #2563eb); border-radius: 50%; animation: liaspin .8s linear infinite; flex: none; }
.lia-spin-sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes liaspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lia-spin { animation-duration: 2.5s; } }
.lia-busy { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(248, 250, 252, .62); backdrop-filter: blur(1.5px); }
body.dark-mode .lia-busy { background: rgba(15, 23, 42, .6); }
.lia-busy[hidden], .lia-dialog[hidden] { display: none !important; }
.lia-busy-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 360px; padding: 24px 28px; text-align: center; background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--shadow-lg); }
.lia-busy-msg { margin: 0; font-size: 14px; font-weight: 600; }
.lia-busy-sub { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.lia-busy-card.is-error .lia-busy-msg { color: #b91c1c; }
body.dark-mode .lia-busy-card.is-error .lia-busy-msg { color: #fca5a5; }
.lia-busy-actions { display: flex; gap: 8px; }

/* ---------- progress dialog (Sync roster) ---------- */
.lia-dialog { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .5); }
.lia-dialog-card { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 24px; }
.lia-dialog-card h2 { margin: 0 0 4px; font-size: 18px; color: var(--text-dark); }
.lia-dialog-lead { margin: 0 0 16px; font-size: 13px; color: var(--text-muted); }
.lia-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.lia-step { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-main); }
.lia-step-icon { display: flex; align-items: flex-start; justify-content: center; padding-top: 1px; font-size: 18px; font-weight: 800; line-height: 1; }
.lia-step-name { font-size: 14px; font-weight: 700; }
.lia-step-detail { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.lia-step ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.lia-step.ok .lia-step-icon { color: #059669; }
.lia-step.error { border-color: #fca5a5; }
.lia-step.error .lia-step-icon, .lia-step.error .lia-step-detail { color: #b91c1c; }
body.dark-mode .lia-step.error .lia-step-icon, body.dark-mode .lia-step.error .lia-step-detail { color: #fca5a5; }
.lia-step.wait { opacity: .55; }
.lia-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lia-btn { padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.lia-btn:hover { border-color: var(--accent-blue); }
.lia-btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.lia-btn[disabled] { opacity: .5; cursor: default; }

/* ---------- "done" card ---------- */
.lia-notice { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2700; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 20px; background: var(--card-bg); color: var(--text-dark); border: 1px solid #6ee7b7; border-left: 5px solid #059669; border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; cursor: pointer; animation: lianotice .18s ease-out; }
.lia-notice[hidden] { display: none; }
.lia-notice-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #059669; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
@keyframes lianotice { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media print { .lia-notice { display: none !important; } }

/* edit dialog: below the saving / error panel so those stay visible on top of it */
.lia-modal { z-index: 2400; }
.lia-modal .lia-dialog-card { max-width: 460px; }
.lia-modal-body { display: grid; gap: 12px; }
.lia-modal-body label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.lia-modal-body label.hub-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-dark); }
.lia-modal-body select, .lia-modal-body input[type=text], .lia-modal-body input[type=email] { padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-dark); font: inherit; }
.lia-modal-body .dn-hint { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.lia-modal-body form { display: grid; gap: 12px; }
.lia-modal-body input[type=date], .lia-modal-body input[type=url], .lia-modal-body input[type=search], .lia-modal-body input[type=text], .lia-modal-body input[type=email], .lia-modal-body select { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-dark); font: inherit; font-size: 14px; }
.lia-modal-body input:focus, .lia-modal-body select:focus { outline: 2px solid var(--accent-blue); outline-offset: 1px; }

/* ---------- help guide (shared/js/lia-help.js) ---------- */
.lia-help-bg { position: fixed; inset: 0; z-index: 2700; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.lia-help { width: 100%; max-width: 760px; max-height: 90vh; display: flex; flex-direction: column; background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px 24px 16px; }
.lia-help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lia-help-head h2 { margin: 0; font-size: 20px; color: var(--primary-blue, #1e3a8a); }
body.dark-mode .lia-help-head h2 { color: var(--accent-light); }
.lia-help-x { border: 0; background: none; color: var(--text-muted); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lia-help-intro { margin: 6px 0 12px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.lia-help-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lia-help-tab { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lia-help-tab.active { background: var(--accent-blue, #2563eb); border-color: var(--accent-blue, #2563eb); color: #fff; }
.lia-help-body { overflow-y: auto; padding-right: 4px; font-size: 14px; line-height: 1.6; }
.lia-help-body h3 { margin: 18px 0 8px; font-size: 15px; font-weight: 800; color: var(--text-dark); }
.lia-help-body h3:first-child { margin-top: 4px; }
.lia-help-body p { margin: 0 0 10px; }
.lia-help-list, .lia-help-steps { margin: 0 0 8px; padding-left: 22px; }
.lia-help-list li, .lia-help-steps li { margin-bottom: 8px; }
.lia-help-q { margin-bottom: 16px; }
.lia-help-question { font-weight: 800; font-size: 14.5px; margin-bottom: 4px; }
.lia-help-answer { margin: 0; color: var(--text-muted); }
.lia-help-foot { display: flex; justify-content: flex-end; padding-top: 12px; }
@media (max-width: 600px) { .lia-help { padding: 16px; max-height: 94vh; } .lia-help-tab { flex: 1 1 auto; text-align: center; } }
/* the pieces of a guide (lia-help.js): small copies of the page (inert pictures), numbered markers and one line per marker */
.lia-help { max-width: 900px; }
.lh-lead { font-size: 14px; }
.lh-shot { margin: 10px 0 16px; border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; background: var(--bg-main); }
.lh-shot > figcaption { padding: 8px 12px 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.lh-screen { display: grid; gap: 8px; padding: 10px 12px 12px; pointer-events: none; user-select: none; font-size: 13px; line-height: 1.35; }
.lh-screen * { cursor: default !important; }
.lh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lh-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; align-items: start; }
.lh-col { display: grid; gap: 6px; min-width: 0; }
.lh-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f59e0b; color: #1f2937; font-style: normal; font-size: 11.5px; font-weight: 800; box-shadow: 0 0 0 2px var(--card-bg); }
.lh-notes { margin: 0; padding: 10px 12px; list-style: none; display: grid; gap: 6px; border-top: 1px solid var(--border-color); background: var(--card-bg); }
.lh-notes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; font-size: 13px; line-height: 1.45; }
.lh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.lh-card { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); font-size: 13px; line-height: 1.45; }
.lh-card > b { font-size: 13.5px; color: var(--accent-blue); }
body.dark-mode .lh-card > b { color: var(--accent-light); }
.lh-mini { pointer-events: none; }
.lh-steps { list-style: none; counter-reset: lh; margin: 6px 0 12px; padding: 0; display: grid; gap: 6px; }
.lh-steps li { counter-increment: lh; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0; font-size: 13.5px; line-height: 1.45; }
.lh-steps li::before { content: counter(lh); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-blue); color: #fff; font-size: 12px; font-weight: 800; }
.lh-tip { margin: 8px 0 14px; padding: 9px 12px; border-left: 4px solid var(--accent-blue); border-radius: 8px; background: color-mix(in srgb, var(--accent-blue) 7%, var(--card-bg)); font-size: 13px; line-height: 1.5; }
.lh-phone { margin: 8px 0 12px; padding: 9px 12px; border: 1px dashed var(--border-color); border-radius: 10px; font-size: 13px; }
.lh-phone > b:first-child { display: inline-block; margin-right: 4px; color: var(--accent-blue); }
/* plain stand-ins for the parts of a page that are not shared pieces */
.lh-input { display: inline-flex; align-items: center; min-height: 32px; min-width: 150px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--card-bg); color: var(--text-muted); font-size: 12.5px; box-sizing: border-box; }
.lh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); font-size: 11.5px; font-weight: 700; }
.lh-chip.ok { background: #dcfce7; border-color: #86efac; color: #166534; }
.lh-chip.bad { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.lh-chip.warn { background: #ffedd5; border-color: #fdba74; color: #9a3412; }
body.dark-mode .lh-chip.ok { background: #052e16; border-color: #166534; color: #bbf7d0; }
body.dark-mode .lh-chip.bad { background: #450a0a; border-color: #991b1b; color: #fecaca; }
body.dark-mode .lh-chip.warn { background: #431407; border-color: #9a3412; color: #fed7aa; }
.lh-name { font-size: 14px; }
.lh-text { font-size: 12.5px; color: var(--text-muted); }
.lh-k { min-width: 96px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.lh-tile { min-width: 120px; }
.lh-mcard { padding: 7px 10px; width: auto; }
.lh-mcard b { display: block; font-size: 13px; }
.lh-mcard small { font-size: 11.5px; color: var(--text-muted); }
.lh-mcard.on { box-shadow: inset 4px 0 0 var(--accent-blue), 0 0 0 1px var(--accent-blue); }
.lh-free { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 700; border: 1px dashed #86efac; }
.lh-plus { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; min-width: 44px; padding: 0 8px; border-radius: 8px; border: 1px dashed var(--border-color); color: var(--text-muted); font-weight: 800; }
.lh-closed { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 8px; border-radius: 8px; background: repeating-linear-gradient(45deg, var(--bg-main), var(--bg-main) 6px, var(--border-color) 6px, var(--border-color) 7px); color: var(--text-muted); font-size: 11.5px; font-weight: 700; }
.lh-tag { display: inline-flex; padding: 4px 10px; border-radius: 8px; background: var(--accent-blue); color: #fff; font-size: 12px; font-weight: 800; }
.lh-grid { display: grid; grid-template-columns: 70px repeat(3, minmax(0, 1fr)); gap: 4px; align-items: stretch; }
.lh-cell { position: relative; display: grid; }
.lh-cell > .lh-n { position: absolute; top: -6px; right: -6px; }
.lh-anchor { position: relative; overflow: visible !important; }
.lh-n.lh-pin { position: absolute; top: -9px; right: -6px; z-index: 2; margin: 0; }
.lh-gh { font-size: 11px; font-weight: 800; color: var(--text-muted); }
.lh-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.lh-switch i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--accent-blue); }
.lh-switch i::after { content: ''; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.lh-go { display: inline-flex; align-self: flex-start; margin-top: 4px; padding: 5px 12px; border-radius: 8px; background: #fff; color: var(--accent-dark, var(--accent-blue)); font-size: 12.5px; font-weight: 800; }
.lh-go.off { background: rgba(255, 255, 255, .25); color: #fff; }
.lh-flag { justify-self: start; padding: 3px 9px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 11.5px; font-weight: 700; }
.lh-bday { display: inline-flex; gap: 4px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.lh-cal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.lh-day { display: grid; gap: 2px; min-height: 44px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); font-size: 12px; font-weight: 800; }
.lh-day i { font-style: normal; font-weight: 600; font-size: 10.5px; padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--accent-blue) 14%, var(--card-bg)); }
.lh-day.ed { border-style: dashed; border-color: #b45309; }
.lh-day.off { background: #fef9c3; }
body.dark-mode .lh-day.off { background: #422006; }
.lh-day.today { box-shadow: inset 0 0 0 2px var(--accent-blue); }
.lh-ym { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.lh-bar { height: 8px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.lh-bar i { display: block; height: 100%; background: #16a34a; }
.lh-annc { display: grid; gap: 6px; max-width: 360px; padding: 0 12px 12px; border-radius: 12px; overflow: hidden; background: var(--card-bg); border: 1px solid var(--border-color); }
.lh-annc-head { display: flex; align-items: center; gap: 8px; margin: 0 -12px 4px; padding: 8px 12px; background: var(--primary-blue, #1e3a8a); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.lh-annc > span { font-size: 12px; color: var(--text-muted); }
@media (max-width: 600px) {
  .lh-split { grid-template-columns: minmax(0, 1fr); }
  .lh-grid { grid-template-columns: 56px repeat(3, minmax(0, 1fr)); }
  .lh-k { min-width: 0; flex-basis: 100%; }
}

/* ---------- icons in front of action buttons and tabs (decorated by the shell; the Hub's .nav-btn rule in hub.css sets its own size) ---------- */
.lia-ico { display: inline-flex; vertical-align: -3px; margin-right: 6px; }
.lia-ico svg { width: 1.15em; height: 1.15em; min-width: 15px; min-height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-btn .lia-ico { vertical-align: -4px; }
.nav-btn .lia-ico svg { width: 17px; height: 17px; }
button.nav-btn .lia-ico { vertical-align: middle; }   /* tabs that are buttons (the Hub's tabs are links and keep their own alignment) */

/* Buttons used by the shared dialogs (help, notices) on pages that do not load evaluation.css */
.dn-btn {
    font: inherit; font-size: 12px; font-weight: 600; padding: 9px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border-color); background: var(--bg-main); color: var(--text-dark);
}
.dn-btn:hover { border-color: var(--accent-blue); color: var(--accent-blue); }
.dn-btn-primary { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.dn-btn-primary:hover { color: #fff; filter: brightness(1.1); }
.dn-btn-big { font-size: 14px; padding: 13px 14px; }
.dn-btn-danger:hover { border-color: #dc2626; color: #dc2626; }

/* a page that could not start: the message under its header (the person stays signed in) */
.lia-load-error { max-width: var(--page-max, 1200px); margin: 16px auto; padding: 14px 18px; border-radius: 10px; background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-weight: 600; font-size: 14px; text-align: center; }
body.dark-mode .lia-load-error { background: #3f1d1d; color: #fca5a5; border-color: #7f1d1d; }

/* the footer platform.js adds to a page that had none (the same look as the tool pages' footer); never printed */
footer.lia-footer { max-width: var(--page-max, 1200px); margin: 32px auto 0; padding: 18px 20px; text-align: center; font-size: 12px; font-weight: 500;
  color: var(--text-muted, #64748b); border-top: 1px solid var(--border-color, #e2e8f0); letter-spacing: 0.02em; }
body.dark-mode footer.lia-footer { color: #94a3b8; border-top-color: #334155; }
@media print { footer.site-footer { display: none !important; } }

/* ---------- header of every tool: the logo, the tool name with the school under it, the buttons; the tabs along the bottom edge like
   folder tabs (the open one has the colour of the page). Help and light / dark stay in view; the other schools, Administration, All tools
   and Sign out are in the "more" menu. ---------- */
:root { --page-max: 1200px; }
body:not(.no-shell) header { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 16px; padding: 22px 26px 0; margin-bottom: 18px; }
body:not(.no-shell) header > * { order: 3; flex: 1 1 100%; min-width: 0; max-width: 100%; }
body:not(.no-shell) header > .header-content { order: 1; flex: 1 1 auto; justify-content: flex-start; margin: 0; gap: 14px; max-width: none; min-width: 0; }
body:not(.no-shell) header > .lia-account { order: 2; flex: 0 0 auto; margin: 0; }
body:not(.no-shell) header .school-logo { max-height: 58px; }
body:not(.no-shell) header .header-text h1, body:not(.no-shell) header h1 { font-size: 23px; margin: 0 0 3px; color: #fff; }
body:not(.no-shell) header .subtitle { display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .78); margin: 0; }
/* folder tabs */
body:not(.no-shell) header .nav-tabs { border-top: 0; padding: 0; margin: 0; gap: 2px; justify-content: flex-start; align-items: flex-end; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body:not(.no-shell) header .nav-btn { flex: 0 0 auto; max-width: none; min-width: 0; padding: 10px 18px; font-size: 13px; border: 0; border-radius: 10px 10px 0 0; background: transparent; color: rgba(255, 255, 255, .86); box-shadow: none; transform: none; }
body:not(.no-shell) header .nav-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
body:not(.no-shell) header .nav-btn.active { background: var(--bg-main); color: var(--primary-blue); }
body.dark-mode:not(.no-shell) header .nav-btn.active { background: var(--bg-main); color: #fff; }
body:not(.no-shell) header .nav-btn svg, body:not(.no-shell) header .nav-btn .lia-ico { color: inherit; }
body:not(.no-shell) header:not(:has(.nav-tabs:not([hidden]))) { padding-bottom: 22px; }
/* one toolbar: filters, the day type, Print and the like */
body:not(.no-shell) .controls { padding: 12px 16px; gap: 10px 14px; margin-bottom: 12px; align-items: flex-end; }
body:not(.no-shell) .control-group { min-width: 170px; }
body:not(.no-shell) .control-group label { font-size: 10.5px; margin-bottom: 4px; }
body:not(.no-shell) .view-toolbar { margin-bottom: 10px; }
body:not(.no-shell) .view-toolbar .es-dismissal-toggle { margin-right: auto; }
body:not(.no-shell) #scheduleModeNote { display: none; }
.lia-account .lia-more-btn { display: inline-flex; order: 9; }
.lia-actions { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 4px; min-width: 200px; padding: 8px;
  background: rgba(15, 23, 42, .97); border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; box-shadow: 0 10px 25px rgba(0, 0, 0, .35); }
.lia-account.lia-more-open .lia-actions { display: flex; }
.lia-actions .lia-icon-btn { width: auto; height: 38px; justify-content: flex-start; gap: 10px; padding: 0 12px; border-color: transparent; background: none; font-size: 13px; font-weight: 600; letter-spacing: 0; }
.lia-actions .lia-icon-btn:hover, .lia-actions .lia-icon-btn:focus-visible { background: rgba(255, 255, 255, .12); }
.lia-actions .lia-icon-btn, .lia-actions .lia-icon-btn .lia-act-label { color: #fff; }
.lia-actions .lia-code { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 1px 6px; margin-left: auto; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; font-weight: 800; font-size: 10.5px; letter-spacing: .04em; }
.lia-act-label { white-space: nowrap; }
.lia-actions .lia-actas-item { flex-wrap: wrap; height: auto; padding: 8px 12px; cursor: default; }
.lia-actions .lia-actas-item select { flex: 1 1 100%; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; }
.lia-actions .lia-actas-item select option, .lia-actions .lia-actas-item select optgroup { color: #0f172a; background: #fff; }
.lia-actions #liaHomeLink { order: 1; } .lia-actions .lia-short { order: 2; } .lia-actions #liaSignOut { order: 3; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 0 8px 8px; }
@media (max-width: 640px) {
  body:not(.no-shell) header { padding: 12px 12px 0; row-gap: 10px; column-gap: 8px; flex-wrap: wrap; }
  body:not(.no-shell) header > .header-content { order: 1; flex: 1 1 0; flex-direction: row; text-align: left; gap: 10px; }
  body:not(.no-shell) header > .lia-account { order: 2; flex: 0 0 auto; gap: 6px; }
  body:not(.no-shell) header .lia-account:has(.lia-more-btn) .lia-user, body:not(.no-shell) header .lia-account:has(.lia-more-btn) > #liaHelpBtn, body:not(.no-shell) header .lia-account:has(.lia-more-btn) > .lia-theme-btn { display: none; }
  body:not(.no-shell) header .lia-account .lia-menu-btn { order: 8; }
  body:not(.no-shell) header .school-logo { display: none; }
  body:not(.no-shell) header .header-text, body:not(.no-shell) header > .header-content > div { min-width: 0; text-align: left; }
  body:not(.no-shell) header .header-text h1, body:not(.no-shell) header h1 { font-size: 17px; line-height: 1.2; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.no-shell) header .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:not(.no-shell) header .subtitle { font-size: 11.5px; }
  body:not(.no-shell) header .nav-btn { flex: 1 0 auto; padding: 9px 12px; font-size: 12.5px; }
  body:not(.no-shell) .control-group { min-width: 100%; }
}

/* the warning of an editor closed with unsaved changes */
.lia-unsaved { margin: 6px 0; padding: 8px 12px; border-radius: 8px; background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 600; }
body.dark-mode .lia-unsaved { background: #422006; color: #fde68a; }
/* Schedules: no "Showing schedule for..." card (the grid says it; the instructions are in Help) */
body:not(.no-shell) #teacherBanner, body:not(.no-shell) #roomBanner, body:not(.no-shell) #gradeBanner { display: none !important; }

/* a load in progress: a thin moving line at the top of the window (the page stays usable) */
.lia-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2600; overflow: hidden; background: color-mix(in srgb, var(--accent-blue, #2563eb) 20%, transparent); pointer-events: none; }
.lia-progress::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent-blue, #2563eb); animation: lia-progress 1s ease-in-out infinite; }
.lia-progress[hidden] { display: none; }
@keyframes lia-progress { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .lia-progress::after { animation: none; left: 0; width: 100%; opacity: .6; } }

/* tabs are links in some tools (the Hub): never underlined, and never stretched to the full width on a phone */
body:not(.no-shell) header .nav-btn { text-decoration: none; width: auto; }

/* items of the more menu shown on a phone only: who is signed in, Help, light / dark */
.lia-actions .lia-phone-only { display: none; }
.lia-actions .lia-menu-who { display: none; padding: 6px 12px 8px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lia-actions .lia-menu-who small { display: block; color: #cbd5e1; font-weight: 600; font-size: 11.5px; }
@media (max-width: 640px) { .lia-actions .lia-phone-only { display: inline-flex; } .lia-actions .lia-menu-who { display: block; order: 0; } }

/* the header is its own layer (it keeps its place between pages), so it sits above the page content: its menu is never covered */
body:not(.no-shell) header { position: relative; z-index: 40; }

/* ---------- Announcements: the pop-up notice (LiaShell announceNotices). Above every editor, under the "done" card and the Help. ---------- */
.lia-annc { z-index: 2650; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); }
.lia-annc-card { max-width: 520px; padding: 0 0 20px; border-top: 0; overflow: hidden auto; animation: liaannc .2s ease-out; }
.lia-annc-card.stacked { box-shadow: 0 8px 0 -4px var(--card-bg, #fff), 0 8px 0 -3px var(--border-color, #cbd5e1), 0 16px 0 -8px var(--card-bg, #fff), 0 16px 0 -7px var(--border-color, #cbd5e1), var(--shadow-lg, 0 20px 40px rgba(15, 23, 42, .25)); margin-bottom: 16px; }
.lia-annc-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 20px; background: var(--primary-blue, #1e3a8a); color: #fff; }
.lia-annc-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .16); flex: none; }
.lia-annc-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lia-annc-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.lia-annc-count { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .2); white-space: nowrap; }
.lia-annc-x { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: 0; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; flex: none; }
.lia-annc-count + .lia-annc-x { margin-left: 0; }
.lia-annc-x:hover, .lia-annc-x:focus-visible { background: rgba(255, 255, 255, .18); outline: none; }
.lia-annc-card h2 { margin: 18px 20px 4px; font-size: 20px; line-height: 1.3; color: var(--primary-blue, #1e3a8a); overflow-wrap: anywhere; }
body.dark-mode .lia-annc-card h2 { color: var(--accent-light, #93c5fd); }
.lia-annc-meta { margin: 0 20px 12px; font-size: 12.5px; color: var(--text-muted, #64748b); }
.lia-annc-body { margin: 0 20px 16px; padding: 14px 16px; border-radius: 12px; background: var(--tint-1, #f1f5f9); font-size: 15px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto; }
body.dark-mode .lia-annc-body { background: rgba(148, 163, 184, .12); }
.lia-annc-err { margin: 0 20px 12px; font-size: 13px; font-weight: 600; color: #b45309; }
body.dark-mode .lia-annc-err { color: #fbbf24; }
.lia-annc-card .lia-dialog-actions { padding: 0 20px; align-items: center; flex-wrap: wrap; }
.lia-annc-all { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--accent-blue, #2563eb); text-decoration: none; }
body.dark-mode .lia-annc-all { color: var(--accent-light, #93c5fd); }
.lia-annc-all:hover { text-decoration: underline; }
.lia-annc-ok { min-height: 42px; padding: 10px 22px; font-size: 14px; }
@keyframes liaannc { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 520px) {
  .lia-annc { padding: 12px; }
  .lia-annc-card { max-height: calc(100vh - 24px); border-radius: 16px; }
  .lia-annc-card .lia-dialog-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .lia-annc-ok { width: 100%; }
  .lia-annc-all { margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .lia-annc-card { animation: none; } }

/* ---------- super admin mode and "Viewing as": one slim strip at the top of the header card (platform.js), in the colours of the
   header, so it follows the school theme and dark mode. It scrolls with the header (it never covers the page) and is never printed. ---------- */
.lia-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 5px 6px 5px 6px; border-radius: 10px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; }
body:not(.no-shell) header > .lia-mode { order: 0; flex: 1 1 100%; margin: 0 0 -4px; }
body:not(.no-shell) header:has(> .lia-mode) { padding-top: 12px; }
.lia-mode-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; color: var(--primary-blue, #1e3a8a);
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.lia-mode-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lia-mode-text { flex: 1 1 auto; min-width: 0; color: rgba(255, 255, 255, .88); }
.lia-mode-text b { color: #fff; font-weight: 800; }
.lia-mode-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.lia-mode-ctl { display: inline-flex; align-items: center; gap: 6px; height: 32px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lia-mode-ctl:hover, .lia-mode-ctl:focus-visible, .lia-mode-ctl:focus-within { background: rgba(255, 255, 255, .2); outline: none; }
.lia-mode-ctl:focus-visible, .lia-mode-check:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
select.lia-mode-ctl { max-width: 300px; min-width: 0; text-overflow: ellipsis; }
.lia-mode select option, .lia-mode select optgroup { color: #0f172a; background: #fff; }
.lia-mode-check input { margin: 0; width: 15px; height: 15px; accent-color: #fff; cursor: pointer; }
/* viewing as someone: a yellow badge (look only); red when changes are allowed */
.lia-mode-view { background: rgba(253, 230, 138, .14); border-color: rgba(253, 230, 138, .55); }
.lia-mode-view .lia-mode-badge { background: #fde68a; color: #78350f; }
.lia-mode-view.viewas-live { background: rgba(254, 202, 202, .16); border-color: rgba(252, 165, 165, .7); }
.lia-mode-view.viewas-live .lia-mode-badge { background: #fecaca; color: #7f1d1d; }
/* a page with no header: the strip on its own, as wide as the page */
.lia-mode-alone { max-width: var(--page-max, 1200px); margin: 0 auto 12px; background: linear-gradient(135deg, #0f172a 0%, var(--primary-blue, #1e3a8a) 100%); }
@media (max-width: 640px) {
  .lia-mode { gap: 6px 8px; }
  .lia-mode-long { display: none; }
  .lia-mode-tools { flex: 1 1 100%; margin-left: 0; }
  .lia-mode-tools select.lia-mode-ctl { flex: 1 1 0; max-width: none; }
  body:not(.no-shell) header:has(> .lia-mode) { padding-top: 10px; }
}
@media print { .lia-mode { display: none !important; } }

/* ---------- moving between pages and tabs: the content fades in, the header and the side menu stay in place (lia-shell.js adds .lia-enter
   once a page has started and after a click on a tab of the header). Off for people who ask for less motion. ---------- */
@keyframes lia-fade-in { from { opacity: .55; } to { opacity: 1; } }
.lia-enter { animation: lia-fade-in .15s ease-out both; }
/* the room of the scrollbar is always kept, so a tab that is short (or still loading) never makes the page jump sideways */
@media (min-width: 641px) { html { scrollbar-gutter: stable; } }
@media (prefers-reduced-motion: reduce) {
  .lia-enter { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Phones: the shared layout ----------
   No empty band above the header (the old theme button of the Hub forms kept 56px for itself); tab strips sized to their text that scroll
   sideways with a fade on the edge that has more (lia-shell.js adds lia-fade-l / lia-fade-r); filters two to a row; tap targets of 36px. */
@media (max-width: 1000px) { body:not(.no-shell) { padding-top: 16px; } }
.lia-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.lia-fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent); }
.lia-fade-l.lia-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
@media (max-width: 640px) {
  body:not(.no-shell) header .nav-btn { flex: 0 0 auto; padding: 9px 14px; }
  body:not(.no-shell) header .nav-tabs { scroll-snap-type: x proximity; }
  body:not(.no-shell) header .nav-btn { scroll-snap-align: start; }
  /* filters: two to a row, a search box on its own row */
  body:not(.no-shell) .controls { padding: 10px 12px; gap: 8px 10px; }
  body:not(.no-shell) .control-group { min-width: 0; flex: 1 1 calc(50% - 5px); max-width: 100%; }
  body:not(.no-shell) .control-group:has(input[type=search]), body:not(.no-shell) .control-group:has(.es-dismissal-toggle) { flex-basis: 100%; }
  body:not(.no-shell) .control-group label { font-size: 11px; }
  body:not(.no-shell) .control-group select, body:not(.no-shell) .control-group input:not([type=checkbox]):not([type=radio]) { width: 100%; min-height: 38px; }
  /* small buttons a finger can hit */
  .tu-mini, .ad-btn, .sc-chip, .ep-view, .att-link, .hub-chip[href], a.email-btn { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ---------- Phones: one way for every tool (lia-shell.js marks the tables and the filter bars) ----------
   Tables are lists of compact cards (title, then "label  value" lines), filter bars fold behind one Filters button, editors fill the
   screen with their title on top and their buttons at the end, and the cards and tiles of every tool are smaller. */
.lia-filters { display: none; }
@media (max-width: 640px) {
  /* tables as cards */
  table.lia-cards, table.lia-cards tbody, table.lia-cards tfoot, table.lia-cards tr { display: block; width: auto; min-width: 0 !important; }
  table.lia-cards { border: 0 !important; background: transparent !important; box-shadow: none !important; }
  table.lia-cards thead { display: none; }
  table.lia-cards tr { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 7px 11px; margin: 0 0 7px; box-shadow: none; }
  table.lia-cards td, table.lia-cards th { display: flow-root; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    padding: 2px 0 !important; border: 0 !important; background: transparent !important; text-align: right !important; font-size: 13px; line-height: 1.35; white-space: normal !important; position: static !important; }
  table.lia-cards td::before, table.lia-cards th::before { content: attr(data-label); float: left; max-width: 48%; margin-right: 10px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
  table.lia-cards td:first-child, table.lia-cards th:first-child { display: block; text-align: left !important; font-size: 14px; font-weight: 700; color: var(--text-dark); padding-bottom: 4px !important; }
  table.lia-cards td:first-child::before, table.lia-cards th:first-child::before, table.lia-cards td[data-label=""]::before { content: none; }
  table.lia-cards td[data-label=""] { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding-top: 6px !important; }
  table.lia-cards td:empty { display: none; }
  table.lia-cards tr > [colspan] { display: block; text-align: left; }
  table.lia-cards tr > [colspan]::before { content: none; }
  /* the box around a table that is now cards is no longer needed */
  :is(.table-responsive, .tu-table-wrap, .hub-table-wrap, .att-table-wrap, .dn-table-scroll, .ep-table-wrap, .ad-table-wrap, .ls-table-wrap, .report-wrap):has(> table.lia-cards) { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }

  /* filters behind one button */
  body:not(.no-shell) .lia-filters:not([hidden]) { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 8px; padding: 9px 12px; min-height: 40px; box-sizing: border-box;
    font: inherit; font-size: 13.5px; text-align: left; color: var(--text-dark); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; }
  .lia-filters-name { font-weight: 800; color: var(--accent-blue); flex: none; }
  .lia-filters-what { flex: 1 1 auto; min-width: 0; color: var(--text-muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lia-filters-caret { flex: none; color: var(--text-muted); transition: transform .15s; }
  .lia-filters[aria-expanded="true"] .lia-filters-caret { transform: rotate(180deg); }
  body:not(.no-shell) .controls.lia-fold:not(.lia-open) > .control-group:not(.lia-keep) { display: none !important; }
  body:not(.no-shell) .controls.lia-fold:not(.lia-open):not(:has(> .lia-keep:not([hidden]))) { display: none !important; }

  /* editors fill the screen: title on top, buttons at the end (a short question stays a small box) */
  .lia-dialog:has(form), .tu-modal-bg, .tc-modal-bg:has(form) { padding: 0 !important; align-items: stretch !important; }
  .lia-dialog:has(form) .lia-dialog-card, .tu-modal, .tc-modal-bg:has(form) .tc-modal { max-width: none !important; width: 100% !important; min-height: 100%; max-height: none !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)) !important; box-sizing: border-box; overflow-y: auto; }
  dialog.ad-dialog { max-width: 100vw !important; width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  dialog.ad-dialog form { max-height: none; min-height: 100%; box-sizing: border-box; }
  /* an editor marked as a sheet rises from the bottom instead (rounded top, the page still showing above it) */
  .lia-dialog.lia-sheet:has(form) { align-items: flex-end !important; }
  .lia-dialog.lia-sheet:has(form) .lia-dialog-card { min-height: 0; max-height: 92vh !important; border-radius: 20px 20px 0 0 !important; }
  .tu-modal-head, .lia-dialog:has(form) .lia-dialog-card > h2:first-child { position: sticky; top: -14px; z-index: 2; margin: -14px -16px 10px !important; padding: 14px 16px 10px; background: var(--card-bg); border-bottom: 1px solid var(--border-color); }

  /* every tool's cards: less padding, smaller titles */
  .tu-card, .hub-formcard, .dn-card, .hub-card, .ad-card, .ep-card, .lists-card, .att-card, .sc-card, .annc-card, .tc-card, .bday-card, .pass-card, .card { padding: 10px 12px; border-radius: 12px; }
  .tu-card b, .hub-formcard h3, .dn-card h2, .dn-card h3 { font-size: 14px; }
  .tu-cards, .hub-cards { gap: 8px; }
  .tu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tu-kpis div { padding: 8px 10px; }
  .tu-kpis b { font-size: 19px; }
  /* the home page: three small tiles to a row */
  .portal-tools.portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .portal-tools .portal-card { min-height: 88px !important; padding: 10px 4px !important; border-radius: 12px; }
  .portal-tools .portal-card-icon { width: 40px !important; height: 40px !important; margin: 0 0 6px !important; border-radius: 12px !important; }
  .portal-tools .portal-card-icon svg { width: 22px !important; height: 22px !important; }
  .portal-tools .portal-card h2 { font-size: 12px !important; line-height: 1.2; overflow-wrap: anywhere; }
}
/* Phones: a timetable shows one day per screen: the time column stays on the left, a swipe moves one day */
@media (max-width: 640px) {
  .timetable-container { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .timetable-container table { min-width: 0 !important; width: max-content !important; table-layout: fixed; }
  .timetable-container tr > :first-child:not([colspan]) { width: 74px; min-width: 74px; max-width: 74px; position: sticky; left: 0; z-index: 3; background: var(--card-bg); box-shadow: 1px 0 0 var(--border-color); }
  .timetable-container thead tr > :first-child { background: var(--primary-blue); }
  .timetable-container tr > :not(:first-child):not([colspan]) { width: calc(100vw - 20px - 2px - 74px); min-width: calc(100vw - 20px - 2px - 74px); scroll-snap-align: end; }
}
/* Phones: the months of the Official Calendar are one row that scrolls; the English Points panel is one line until a student is chosen */
@media (max-width: 640px) {
  #scMonths { display: flex; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  #scMonths::-webkit-scrollbar { display: none; }
  #scMonths .sc-chip { flex: 0 0 auto; }
  .ep-give { padding: 10px 12px; gap: 8px; margin-top: 10px; }
  .ep-give.ep-none { padding: 8px 12px; }
  .ep-give.ep-none > :not(.ep-give-top), .ep-give.ep-none .ep-give-top > :not(.ep-count) { display: none; }
  .ep-give .ep-give-top { gap: 8px 14px; }
}
/* Phones: the Hub's filter row matches the other tools (two to a row, the search on its own row) */
@media (max-width: 640px) {
  .hub-filters { gap: 8px 10px !important; }
  .hub-filters label:not(.hub-check) { flex: 1 1 calc(50% - 5px) !important; max-width: none !important; min-width: 0; }
  .hub-filters label:not(.hub-check):has(input[type=search], input[name=q], input[placeholder="Name"]) { flex-basis: 100% !important; }
  .hub-filters select, .hub-filters input:not([type=checkbox]) { width: 100%; }
}
/* Phones: the Directory's leadership and coordinators are one short row each (initials, name and title, Email), like the teachers */
@media (max-width: 640px) {
  .leadership-grid { grid-template-columns: 1fr !important; gap: 6px !important; margin-bottom: 16px !important; }
  .leadership-card { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0 !important; align-items: center; padding: 9px 10px 8px !important; min-height: 0; }
  .leadership-card::before { height: 3px !important; }
  .leadership-card .leadership-avatar { grid-column: 1; grid-row: 1 / 4; width: 36px !important; height: 36px !important; font-size: 12.5px !important; margin: 0 !important; }
  .leadership-card .leadership-name { grid-column: 2; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
  .leadership-card .leadership-position, .leadership-card .leadership-birthday { grid-column: 2; font-size: 12px !important; margin: 0 !important; line-height: 1.3; }
  .leadership-card .email-btn { grid-column: 3; grid-row: 1 / 4; margin: 0 !important; padding: 6px 12px !important; font-size: 12px !important; min-height: 32px; }
  .leadership-intro, #directoryContent h2, .directory-section-title { margin-top: 10px !important; margin-bottom: 8px !important; font-size: 13px !important; }
}
@media (max-width: 640px) { #directoryPage.select-mode .leadership-card { padding-right: 40px !important; } }

/* ---------- Shared pieces of the redesigned pages (Test Calendar, Schedules, and every tool moved to the new look) ----------
   Pills to pick one thing (.lia-pills / .lia-pill, .on = chosen), a two-way switch (.lia-seg), a removable chip (.lia-chip, coloured by
   LiaColors), the "Now" card of a phone page (.lia-now), a card of a phone list (.lia-mcard, the colour bar from --c) and a dialog that is a
   bottom sheet on a phone (.lia-dialog.lia-sheet). Subject colours always come from shared/legacy/lia-colors.js, never from a page. */
.lia-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lia-pills.lia-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.lia-pills.lia-scroll::-webkit-scrollbar { display: none; }
.lia-pill { flex: none; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; min-height: 34px; border-radius: 999px; border: 1px solid var(--border-color);
  background: var(--card-bg); color: var(--text-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; }
.lia-pill:hover, .lia-pill:focus-visible { border-color: var(--accent-blue); }
.lia-pill.on { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.lia-pill.lia-add { border-style: dashed; }
.lia-pill small { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; opacity: .85; }
.lia-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(15, 23, 42, .15); }
.lia-seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--card-bg); flex: none; }
.lia-seg > button { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; min-height: 34px; border: 0; background: transparent; color: var(--text-dark); cursor: pointer; }
.lia-seg > button + button { border-left: 1px solid var(--border-color); }
.lia-seg > button.on { background: var(--accent-blue); color: #fff; }
.lia-chip { font: inherit; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 34px; border-radius: 999px; border: 0; cursor: pointer; box-sizing: border-box; }
.lia-chip span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .8; }
.lia-now { background: var(--accent-blue); color: #fff; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.lia-now small { font-size: 11px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.lia-now b { font-size: 16px; }
.lia-now span { font-size: 12.5px; font-weight: 600; opacity: .9; }
.lia-mcard { font: inherit; text-align: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-bg);
  color: var(--text-dark); border: 1px solid var(--border-color); box-shadow: inset 4px 0 0 var(--c, var(--accent-blue)); box-sizing: border-box; }
button.lia-mcard { cursor: pointer; }
@media (max-width: 640px) {
  .lia-dialog.lia-sheet { align-items: flex-end; padding: 0; }
  .lia-dialog.lia-sheet .lia-dialog-card { max-width: none; border-radius: 20px 20px 0 0; max-height: 85vh; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
}
/* A tile (a class, a test, a meeting): a light fill with a bar of its colour on the left, a bold first line and a plain second one.
   Its colours come as --fill / --bar / --ink (LiaColors.tile(course) for a subject; the Test Calendar sets them from its hue).
   A week grid (.lia-week): light day heads, the day in bold and its date under it, today underlined. Both the Test Calendar and the
   Schedules use these; a page only adds its own sizes. */
.lia-tile { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 1px; min-width: 0; box-sizing: border-box; padding: 6px 9px;
  border: 0; border-left: 4px solid var(--bar, var(--accent-blue)); border-radius: 8px; background: var(--fill, color-mix(in srgb, var(--accent-blue) 12%, var(--card-bg)));
  color: var(--ink, var(--text-dark)); }
.lia-tile b { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lia-tile span, .lia-tile small { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
button.lia-tile { cursor: pointer; }
button.lia-tile:hover { filter: brightness(.96); }
button.lia-tile:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 1px; }
.lia-week { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--card-bg); color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.lia-week th, .lia-week td { border: 0; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.lia-week tr > :last-child { border-right: 0; }
.lia-week tbody tr:last-child > * { border-bottom: 0; }
.lia-week thead th { background: color-mix(in srgb, var(--accent-blue) 10%, var(--card-bg)); color: var(--text-dark); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; padding: 8px 4px; text-align: center; vertical-align: middle; }
.lia-week thead th b { display: block; font-size: 13.5px; font-weight: 800; }
.lia-week thead th b + span { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.lia-week thead th.today { box-shadow: inset 0 -4px 0 var(--accent-dark, var(--accent-blue)); }

/* ---------- Notifications: the bell in the header and its panel (a dropdown on a computer, a sheet from the bottom on a phone) ---------- */
.lia-bell { order: 1; position: relative; }
.lia-bell-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #dc2626; color: #fff; border: 2px solid var(--primary-blue, #1e3a8a); font-size: 10.5px; font-weight: 800; line-height: 14px; text-align: center; box-sizing: border-box; }
.lia-bell-n[hidden] { display: none; }
.lia-nt-scrim { position: fixed; inset: 0; z-index: 2590; background: rgba(15, 23, 42, .35); }
.lia-nt { position: fixed; z-index: 2600; top: 64px; right: 16px; width: 400px; max-width: calc(100vw - 24px); max-height: calc(100vh - 90px); display: flex; flex-direction: column; background: var(--card-bg, #fff); color: var(--text-dark, #0f172a); border: 1px solid var(--border-color, #d5dde8); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 36px rgba(15, 23, 42, .28)); overflow: hidden; }
.lia-nt-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-color, #d5dde8); }
.lia-nt-head b { flex: 1; font-size: 15px; }
.lia-nt-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 14px 4px; }
.lia-nt-sec h3 { margin: 10px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.lia-nt-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 10px; margin-bottom: 7px; border: 1px solid var(--border-color, #d5dde8); border-radius: 10px; cursor: pointer; }
.lia-nt-item.unread { background: var(--tint-1, #eff6ff); border-color: var(--accent-light, #93c5fd); }
.lia-nt-item:focus-visible { outline: 2px solid var(--accent-blue, #2563eb); outline-offset: 1px; }
.lia-nt-ic { display: inline-flex; width: 34px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; font-size: 10px; font-weight: 800; color: var(--accent-blue, #2563eb); background: var(--card-bg, #fff); border: 1px solid var(--border-color, #d5dde8); }
.lia-nt-tx b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.lia-nt-tx small { color: var(--text-muted, #64748b); }
.lia-nt-tag { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #fff; }
.lia-nt-tag.new { background: var(--accent-blue, #2563eb); } .lia-nt-tag.edit { background: #d97706; }
.lia-nt-x { border: 0; background: none; color: var(--text-muted, #64748b); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.lia-nt-x:hover { color: var(--accent-blue, #2563eb); }
.lia-nt-empty { padding: 26px 8px; text-align: center; color: var(--text-muted, #64748b); }
.lia-nt-look { margin: 8px 14px 0; font-size: 12px; color: var(--text-muted, #64748b); }
.lia-nt-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border-color, #d5dde8); }
.lia-nt-foot span { margin-left: auto; font-size: 12px; color: var(--text-muted, #64748b); }
.lia-nt-pref { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-color, #d5dde8); cursor: pointer; }
.lia-nt-pref span { flex: 1; } .lia-nt-pref small { display: block; color: var(--text-muted, #64748b); }
.lia-nt-pref input { width: 18px; height: 18px; accent-color: var(--accent-blue, #2563eb); }
.lia-nt-lab { margin: 14px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted, #64748b); }
.lia-nt-note { margin: 12px 0 8px; font-size: 12px; color: var(--text-muted, #64748b); }
@media (max-width: 640px) {
  .lia-nt { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 82vh; border-radius: 18px 18px 0 0; }
}
@media print { .lia-bell, .lia-nt, .lia-nt-scrim { display: none !important; } }
.lia-nt-tag.phone { background: #059669; margin-left: 6px; }