:root{
  --isb-blue:#1a73c1;
  --isb-dark:#0e3b5e;
  --isb-darker:#0a2c47;
  --isb-green:#4ea84a;
  --isb-gold:#d4a437;
  --bg:#f4f5f7;
  --paper:#ffffff;
  --ink:#1c1c1c;
  --muted:#6b6b6b;
  --line:#e0e0e0;
  --warn:#c0392b;
  --ok:#2e7d32;
  --danger-bg:#fbe1de;
  --success-bg:#dff2d8;
  --radius:6px;
  --radius-lg:10px;
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 4px 12px rgba(0,0,0,.1);
  --sidebar-w:248px;
  --topbar-h:64px;
  --sidebar-grad:linear-gradient(180deg,var(--isb-dark, #0e3b5e) 0%,var(--isb-darker, #0a2c47) 100%);
  --sidebar-active:linear-gradient(135deg,var(--isb-blue, #1a73c1) 0%,var(--isb-dark, #0e3b5e) 100%);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;font-size:14px}
a{color:var(--isb-blue);text-decoration:none;transition:color .15s}
a:hover{text-decoration:underline;color:var(--isb-dark)}

/* ── App shell (with sidebar) ────────────────────────────── */
body.layout-app{min-height:100vh;min-height:100dvh}
.app-shell{margin-left:var(--sidebar-w);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:margin-left .25s var(--ease)}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:var(--sidebar-grad);color:rgba(255,255,255,.78);display:flex;flex-direction:column;z-index:30;transition:transform .25s var(--ease);box-shadow:4px 0 24px rgba(14,59,94,.08);border-right:1px solid rgba(255,255,255,.06)}

.sidebar__brand{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.sidebar__logo{width:42px;height:42px;border-radius:8px;background:rgba(255,255,255,.95);display:grid;place-items:center;flex-shrink:0;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.sidebar__logo img{width:100%;height:100%;object-fit:contain}
.sidebar__brand-text{flex:1;min-width:0}
.sidebar__brand-text strong{display:block;color:#fff;font-size:14px;font-weight:700;letter-spacing:-0.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__brand-text small{color:rgba(255,255,255,.55);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px}
.sidebar__close{display:none;background:none;border:none;color:rgba(255,255,255,.75);padding:6px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}
.sidebar__close:hover{background:rgba(255,255,255,.1);color:#fff}

/* The menu scrolls down and never sideways. Declaring only overflow-y makes the
   other axis automatic, which is why a long label was dragging the whole menu
   left and right. And the bar itself is hidden: it sat on top of the labels. */
.sidebar__nav{flex:1;min-width:0;padding:8px 10px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.sidebar__nav::-webkit-scrollbar{width:0;height:0;display:none}
/* Nothing inside may be wider than the menu: a flex child defaults to its own
   content width, and one long word is enough to push the lot. */
.sidebar__nav > *,.sidebar__link,.sidebar__module{min-width:0;max-width:100%}
.sidebar__link{overflow:hidden}
.sidebar__link > span,.sidebar__link > strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__group-title{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.42);padding:14px 12px 4px;margin-top:6px;border-top:1px solid rgba(255,255,255,.08);font-weight:600}
.sidebar__group-title:first-child{margin-top:0;border-top:0;padding-top:6px}

.sidebar__link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;color:rgba(255,255,255,.78);font-size:13px;font-weight:500;margin-bottom:2px;text-decoration:none;position:relative;transition:background .15s var(--ease),color .15s var(--ease);min-height:40px;text-transform:none}
.sidebar__link:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.sidebar__link.is-active{background:var(--sidebar-active);color:#fff;box-shadow:0 4px 14px rgba(26,115,193,.35)}
/* ── Un compito aperto nel menu, non una sezione ──────────────────────────
   Il contratto della scuola non firmato e' l'unica voce di questo menu che
   tiene in sospeso il posto di un bambino: il rosso la stacca da tutto il
   resto, e il pallino pulsa piano perche' si veda anche con la coda
   dell'occhio. Sparisce da sola quando il contratto torna firmato. */
.sidebar__link--todo{background:rgba(168,52,31,.9);color:#fff}
.sidebar__link--todo:hover{background:#a8341f;color:#fff}
.sidebar__link--todo .sidebar__label{display:flex;align-items:center;gap:8px}
.sidebar__todo-dot{width:7px;height:7px;border-radius:50%;background:#ffd9d2;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,217,210,.7);animation:isbTodoPulse 2.2s ease-out infinite}
@keyframes isbTodoPulse{
  0%{box-shadow:0 0 0 0 rgba(255,217,210,.55)}
  70%{box-shadow:0 0 0 7px rgba(255,217,210,0)}
  100%{box-shadow:0 0 0 0 rgba(255,217,210,0)}
}
@media (prefers-reduced-motion:reduce){.sidebar__todo-dot{animation:none}}
.sidebar__icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.85;flex-shrink:0}
.sidebar__icon svg{width:18px;height:18px;display:block}
.sidebar__link.is-active .sidebar__icon{opacity:1}
.sidebar__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.sidebar__footer{padding:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:6px}
.sidebar__user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:rgba(255,255,255,.04)}
.sidebar__avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--isb-blue) 0%,var(--isb-dark) 100%);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(26,115,193,.35)}
.sidebar__user-info{min-width:0;flex:1}
.sidebar__user-info strong{display:block;color:#fff;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__user-info small{color:rgba(255,255,255,.55);font-size:10px;text-transform:uppercase;letter-spacing:.4px}
.sidebar__logout{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;color:rgba(255,255,255,.7);font-size:12.5px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;min-height:38px}
.sidebar__logout:hover{background:rgba(192,57,43,.25);color:#fff;text-decoration:none}
.sidebar__logout .sidebar__icon{opacity:.85}

.sidebar-overlay{position:fixed;inset:0;background:rgba(10,44,71,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:25;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
body.is-sidebar-open .sidebar-overlay{opacity:1;pointer-events:auto}

/* ── Unified collapsible sidebar (v9) ───────────────────── */
.sidebar__module{margin-bottom:2px}
.sidebar__parent-row{display:flex;align-items:center;gap:2px}
.sidebar__parent-row .sidebar__link--parent{flex:1;margin-bottom:0}
.sidebar__chevron{flex-shrink:0;width:30px;height:40px;display:grid;place-items:center;background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;border-radius:8px;transition:color .15s,background .15s}
.sidebar__chevron:hover{color:#fff;background:rgba(255,255,255,.07)}
.sidebar__chevron svg{transition:transform .2s var(--ease)}
.sidebar__module.is-expanded .sidebar__chevron svg{transform:rotate(90deg)}
.sidebar__children{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s var(--ease)}
.sidebar__module.is-expanded .sidebar__children{grid-template-rows:1fr}
.sidebar__children-inner{overflow:hidden;min-height:0}
.sidebar__child{padding-left:34px;font-size:12.5px;color:rgba(255,255,255,.66);min-height:36px;margin-bottom:1px}
.sidebar__child .sidebar__icon{width:16px;height:16px;opacity:.7}
.sidebar__child:hover .sidebar__icon,.sidebar__child.is-active .sidebar__icon{opacity:1}
.sidebar__subgroup-title{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.32);padding:8px 12px 2px 34px;font-weight:600}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--paper);border-bottom:1px solid var(--line);min-height:var(--topbar-h);box-shadow:var(--shadow)}
.topbar__menu{display:none;width:40px;height:40px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--isb-dark);align-items:center;justify-content:center;cursor:pointer;transition:background .15s,transform .1s;flex-shrink:0;padding:0}
.topbar__menu:hover{background:var(--bg)}
.topbar__menu:active{transform:scale(.96)}
.topbar__menu svg{width:22px;height:22px}
.topbar__title{flex:1;min-width:0}
.topbar__title h1{margin:0;font-size:20px;font-weight:700;color:var(--isb-dark);letter-spacing:-0.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__title p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar__meta{display:flex;align-items:center;gap:10px;flex-shrink:0}
.topbar__location{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:600}
/* Badge scanner shortcut. Sits in the top bar itself, not in .topbar__meta,
   because that block is hidden on small screens — and a phone at the door is
   where scanning a badge matters most. Below 640px it keeps the icon only. */
.topbar__scan{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:8px 14px;border-radius:8px;border:1px solid var(--line);background:var(--paper);color:var(--isb-dark);font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
.topbar__scan:hover{background:var(--bg);border-color:var(--isb-blue);color:var(--isb-blue)}
.topbar__scan:active{transform:scale(.97)}
.topbar__scan svg{width:18px;height:18px}
@media (max-width:640px){.topbar__scan span{display:none}.topbar__scan{padding:8px 10px}}

/* ── Public topbar (login pages, no sidebar) ─────────────── */
.public-topbar{background:var(--paper);border-bottom:2px solid var(--isb-dark);padding:16px 24px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}
.public-topbar__brand{display:flex;align-items:center;gap:14px}
.public-topbar__logo{width:56px;height:56px;display:grid;place-items:center;flex-shrink:0}
.public-topbar__logo img{width:100%;height:100%;object-fit:contain}
.public-topbar__text strong{display:block;color:var(--isb-dark);font-size:18px;font-weight:700;letter-spacing:.2px;line-height:1.2}
.public-topbar__text small{color:var(--muted);font-size:12px}

/* ── Layout ──────────────────────────────────────────────── */
.container{max-width:1320px;margin:24px auto;padding:0 24px 40px;width:100%;flex:1 0 auto}
.container--public{max-width:560px}
.app-shell .page-footer{margin-top:0}
.section{font-size:22px;color:var(--isb-dark);font-weight:700;letter-spacing:.3px;border-bottom:2px solid var(--line);padding-bottom:10px;margin:0 0 18px}
.lead{color:var(--muted);font-size:13px;margin:0 0 16px;font-style:italic}
.section-block{margin-bottom:4px}

/* ── Cards ───────────────────────────────────────────────── */
.card,.form-card,.panel-card,.table-card,.stat-card,.info-box,.fee-summary{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ── Stats ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:0 0 18px}
.stat-card{border-left:4px solid var(--isb-blue);border-radius:var(--radius)}
.stat-card .num{font-size:28px;color:var(--isb-dark);font-weight:700}
.stat-card .lab{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
/* A strip of six small counters on one line (office's Weekly Reports). */
.lb-stats-row .stats{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.lb-stats-row .stat-card{padding:12px 14px}
.lb-stats-row .stat-card .num{font-size:22px}
.lb-stats-row .stat-card .lab{font-size:10px}
@media (max-width:900px){.lb-stats-row .stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ── Forms ────────────────────────────────────────────────── */
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--isb-dark);margin:14px 0 4px;font-weight:600}
/* Every kind of field the browser draws as a box gets the same box. time,
   datetime-local, month and week were missing here, so they came out in the
   browser's own bare style (small, square, no padding) next to styled ones. */
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week],input[type=number],input[type=search],input[type=tel],input[type=url],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fafbfc;font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s;touch-action:manipulation}
/* WebKit draws search fields with its own metrics and a rounded pill border;
   reset that so a search box matches every other field in a filter row. */
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ── Buttons ─────────────────────────────────────────────── */
/* Buttons (2026-09-28): sentence case, soft corners, a quiet secondary —
   the uppercase, letter-spaced dark blocks read as an older generation of the
   portal next to the email and cases screens. One rule, every page. */
button,.btn{display:inline-block;vertical-align:middle;background:var(--isb-dark);color:#fff;border:1px solid transparent;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.35;text-transform:none;letter-spacing:0;cursor:pointer;border-radius:8px;transition:background .15s,border-color .15s,box-shadow .15s,color .15s;white-space:nowrap;box-shadow:0 1px 2px rgba(14,59,94,.12)}
button:hover,.btn:hover{background:var(--isb-blue);text-decoration:none;box-shadow:0 3px 10px rgba(26,115,193,.22)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--isb-blue);outline-offset:2px}
.btn-secondary{background:var(--paper);color:var(--isb-dark);border:1px solid #d6dde6;box-shadow:none}
.btn-secondary:hover{background:#eef3f8;color:var(--isb-dark);border-color:#bcd3ea;box-shadow:none}
.btn-danger{background:#a8341f}
.btn-danger:hover{background:#c0392b;box-shadow:0 3px 10px rgba(168,52,31,.25)}
.btn-gold{background:var(--isb-gold);color:#25190a}
.btn-gold:hover{background:#e5b64a;color:#25190a}
.btn-sm{padding:5px 11px;font-size:12px;letter-spacing:0}
.btn-sm svg{width:13px;height:13px;vertical-align:-2px}
/* Icon-only buttons: square, compact, SVG inherits color via currentColor.
   vertical-align:middle so they sit perfectly aligned next to each other
   even when one is an <a> and the other is wrapped in a <form>. */
.btn.btn-icon{padding:6px 8px;line-height:1;min-height:0;vertical-align:middle}
.btn.btn-icon svg{display:block;width:14px;height:14px}
/* Inline SVG icons inside text buttons + tabs. ui_icon() returns a viewBox-only
   SVG with no width/height; without this it renders huge in a plain .btn
   (only .btn-icon was sized). .btn-icon keeps its own 14px rule (more specific). */
.btn svg{width:16px;height:16px;vertical-align:-3px;flex-shrink:0}
.tabs-inline a svg,.tabs-inline button svg{width:15px;height:15px;vertical-align:-3px;flex-shrink:0}
/* Higher specificity wins over td.actions-cell .btn padding override below. */
td.actions-cell .btn.btn-icon,td.actions-cell button.btn-icon{padding:6px 8px}
/* Danger icon variant: red tint at rest, full red bg on hover */
.btn.btn-icon-danger{color:#872d2d}
.btn.btn-icon-danger:hover{background:#872d2d;border-color:#872d2d;color:#fff}
.inline-form{display:inline}

/* ── Alerts ──────────────────────────────────────────────── */
.alert{padding:14px 16px;border-left:4px solid var(--isb-blue);border-radius:var(--radius);margin:0 0 16px;background:#eaf4fb}
.alert-error{background:var(--danger-bg);border-left-color:var(--warn)}
.alert-success{background:var(--success-bg);border-left-color:var(--ok)}
.info-box{background:#eaf4fb;border-left:4px solid var(--isb-blue);margin-bottom:18px;border-radius:var(--radius)}
.info-box ol,.info-box ul{margin:8px 0 0 18px}
.fee-summary{background:#fdf6e3;border-color:var(--isb-gold);margin:10px}
.fee-summary .total{font-size:20px;color:var(--isb-dark);font-weight:bold;margin-top:6px}

/* ── Utility ─────────────────────────────────────────────── */
.is-hidden{display:none !important}

/* ── Modal (used by data-confirm) ─────────────────────────── */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(14,59,94,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .18s ease, visibility .18s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-backdrop.is-open{ opacity:1; visibility:visible }
.modal{
  background:var(--paper, #fff);
  border-radius:10px;
  max-width:460px; width:100%;
  box-shadow:0 14px 48px rgba(0,0,0,.28);
  transform:translateY(-8px) scale(.97);
  transition:transform .2s ease;
  overflow:hidden;
  font-family:inherit;
}
.modal-backdrop.is-open .modal{ transform:translateY(0) scale(1) }
.modal-header{
  padding:18px 22px 14px;
  border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.modal-title{
  font-size:17px; font-weight:600; margin:0;
  color:var(--isb-dark);
}
.modal-close{
  background:none; border:none; font-size:22px; cursor:pointer;
  color:var(--muted); line-height:1; padding:0 4px;
  transition:color .15s;
}
.modal-close:hover{ color:var(--ink) }
.modal-body{
  padding:18px 22px;
  font-size:14px; line-height:1.55; color:var(--ink);
  white-space:pre-line;
}
.modal-footer{
  padding:14px 22px 18px;
  display:flex; justify-content:flex-end; gap:10px;
  background:#fafafa;
  border-top:1px solid #eee;
}
.modal-warning .modal-title::before{ content:"⚠️ "; }
/* Form/edit modal variant (wider, scrollable body) — reused by "table + modal" pages */
.modal--form{ max-width:620px }
.modal--form .modal-body{ white-space:normal; max-height:72vh; overflow-y:auto }
.modal--form .modal-body label{ margin-top:10px }
.modal--form .modal-body > .grid:first-child > div > label:first-child{ margin-top:0 }
@media (max-width:520px){
  .modal-footer{ flex-direction:column-reverse }
  .modal-footer .btn{ width:100% }
}

/* Wide modal variant — a whole page (e.g. a lesson) loaded by fetch and shown
   without leaving the grid it was opened from. No footer: whatever the page
   needs to submit, it submits itself, to its own real URL. */
.modal--wide{ max-width:1040px }
.modal--wide .modal-body{
  white-space:normal; max-height:82vh; overflow-y:auto; padding:22px 26px;
}
.modal--wide .modal-body > .form-actions:first-child{ display:none } /* "Back to the week" — the × already does that */
.modal--wide .lb-ajax-loading{
  display:flex; align-items:center; gap:10px; padding:40px 10px; color:var(--muted); font-size:14px;
}
.modal--wide .lb-ajax-loading .aia-spinner{ width:16px; height:16px; min-width:16px }
.modal--wide .lb-ajax-error{ padding:20px; color:var(--warn) }
@media (max-width:1080px){ .modal--wide{ max-width:96vw } }

/* ── Tables ──────────────────────────────────────────────── */
.table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--paper);font-size:13px;border-radius:var(--radius);overflow:hidden}
/* Table headings (2026-09-28): light and quiet, as in the email and cases
   screens — the dark navy bar was the other half of the older look. */
th{background:#f4f7fa;color:#5b6b7c;padding:10px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border-bottom:1px solid #e3e8ee}
th a{color:#5b6b7c}
th a:hover{color:var(--isb-dark);text-decoration:none}
/* Sortable column headers: a faded sort glyph signals "click to sort"; the active column turns gold */
th .sort-link{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:inherit;text-decoration:none}
th .sort-link__ico{display:inline-flex;opacity:.5;transition:opacity .15s,color .15s}
th .sort-link:hover{text-decoration:underline}
th .sort-link:hover .sort-link__ico{opacity:.9}
th .sort-link.is-active{color:var(--isb-dark)}
th .sort-link.is-active .sort-link__ico{opacity:1;color:var(--isb-blue)}
td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:break-word}
tr:nth-child(even) td{background:#fafbfc}
tr:hover td{background:#f0f4f8}
tr.active-row td{background:#dfeefb !important}
tr.row-complete td{background:#eaf7e4 !important}
/* A row already on the year roster.
   The fill and the left bar MUST be set on the cells, not on the <tr>: with
   border-collapse the row's own background and box-shadow are painted
   underneath the cells, so the zebra rule above (nth-child(even)) covered them.
   The highlight then appeared only when an enrolled row happened to land on an
   odd position — the same three enrolled families looked like three different
   states depending on where they sat in the list.
   Declared after .row-complete on purpose: a row that is both reads as
   enrolled, which is the later of the two states. */
tr.row-enrolled td{background:#eafaf1 !important}
tr.row-enrolled td:first-child{box-shadow:inset 5px 0 0 #1e7e34}
/* On the roster, but the signed contract never came back. Still the enrolled
   green — the child IS in class — with an amber edge instead of the green one,
   because something in the file is missing. Declared after .row-enrolled so the
   edge wins; the "No contract" chip in the Progress grid carries the words, the
   colour only confirms them. */
tr.row-enrolled--nocontract td:first-child{box-shadow:inset 5px 0 0 #d69e2e}

/* Cell utilities: truncate with ellipsis instead of growing tall */
td.cell-truncate,th.cell-truncate{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.cell-nowrap,th.cell-nowrap{white-space:nowrap}
td.cell-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Actions cell: keep buttons inline, never wrap text inside them.
   Reduced horizontal padding so 2 icon buttons fit in narrow columns. */
td.actions-cell{white-space:nowrap;text-align:right;padding-left:8px;padding-right:8px;vertical-align:middle}
td.actions-cell .btn,td.actions-cell button{padding:6px 10px;font-size:11px;letter-spacing:.5px;min-height:0;vertical-align:middle}
/* Forms inside actions cell must be inline-block so the button inside
   shares the same baseline/middle as the sibling <a class="btn">.
   Without this, a default <form> creates an inline anonymous box that
   shifts the button vertically. */
td.actions-cell form{display:inline-block;vertical-align:middle;margin:0}
td.actions-cell>*+*,td.actions-cell form+*{margin-left:4px}
/* Catalog: fixed layout so colgroup widths + ellipsis are respected.
   No min-width: the table always fits its container at every viewport,
   and columns are progressively hidden via media queries below.
   Higher specificity (.table-card table.catalog-table) defeats the
   mobile fallback rule that forces min-width:560 on other tables. */
.table-card table.catalog-table{table-layout:fixed;width:100%;min-width:0}

/* Catalog: responsive column hiding. Title + Actions always visible.
   Breakpoints picked so title column always has at least ~130px of
   ellipsis space — never collapses to overlap with the next header. */
@media (max-width:1320px){
  .catalog-table th.c-section,.catalog-table td.c-section,
  .catalog-table th.c-copies,.catalog-table td.c-copies,
  .catalog-table col.c-section,.catalog-table col.c-copies{display:none}
}
@media (max-width:1200px){
  .catalog-table th.c-isbn,.catalog-table td.c-isbn,
  .catalog-table th.c-shelf,.catalog-table td.c-shelf,
  .catalog-table col.c-isbn,.catalog-table col.c-shelf{display:none}
}
@media (max-width:960px){
  .catalog-table th.c-genre,.catalog-table td.c-genre,
  .catalog-table col.c-genre{display:none}
}
@media (max-width:560px){
  .catalog-table th.c-age,.catalog-table td.c-age,
  .catalog-table th.c-author,.catalog-table td.c-author,
  .catalog-table col.c-age,.catalog-table col.c-author{display:none}
}

/* ── Reusable responsive hide utilities ─────────────────────────────
   Apply to any th/td/col in any module to hide it below a breakpoint.
   Pair the same class on the matching <col>, <th>, AND every <td> in
   that column. Example for a "phone" column on a leads list:
       <col class="hide-md-down" style="width:120px">
       <th  class="hide-md-down">Phone</th>
       <td  class="hide-md-down"><?= e($lead['phone']) ?></td> */
@media (max-width:1320px){
  th.hide-xl-down,td.hide-xl-down,col.hide-xl-down{display:none}
}
@media (max-width:1200px){
  th.hide-lg-down,td.hide-lg-down,col.hide-lg-down{display:none}
}
@media (max-width:960px){
  th.hide-md-down,td.hide-md-down,col.hide-md-down{display:none}
}
@media (max-width:720px){
  th.hide-sm-down,td.hide-sm-down,col.hide-sm-down{display:none}
}
@media (max-width:480px){
  th.hide-xs-down,td.hide-xs-down,col.hide-xs-down{display:none}
}

/* ── Auto-style for ANY table cell that holds action buttons ────────
   Modern browsers support :has(), so every <td> in every list/module
   gets compact buttons and nowrap without per-file edits. */
td .btn,td button{padding:6px 10px;font-size:11px;letter-spacing:.5px;min-height:0;line-height:1.4}
td:has(.btn),td:has(button){white-space:nowrap}
td:last-child:has(.btn),td:last-child:has(button){text-align:right}
td:has(.btn):not(.actions-cell) form,td:has(button):not(.actions-cell) form{display:inline}
td:has(.btn) form+a,td:has(.btn) a+form,td:has(.btn) form+form,td:has(button) form+button{margin-left:4px}
/* Common short-data columns: keep on one line so cells don't grow tall */
td.col-isbn,td.col-date,td.col-id,td.col-num,td.col-money,td.col-phone{white-space:nowrap}
/* Generic helper: any data-like cell that should never wrap inside long IDs/numbers */
td .nowrap{white-space:nowrap;display:inline-block}

/* ── Key/value detail tables ──────────────────────────────────
   A record page is a list of "label: value", not a spreadsheet. The generic
   th rule above paints every header cell navy, which on a two-column detail
   table draws a solid dark stripe down the left of every card — the reason
   half the module pages grew their own <style> block redeclaring exactly
   these rules. This is that block, declared once.
   The selectors carry an extra element (`tr`) on purpose: `tr:nth-child(even)
   td` and `tr:hover td` are more specific than a bare `.kv-table td`, so
   without it the zebra striping and the hover tint painted straight over the
   card. */
.kv-table{width:100%;border-collapse:collapse;background:transparent;font-size:13px}
.kv-table tr th{background:transparent;color:var(--muted);text-align:left;font-weight:600;
  font-size:11px;letter-spacing:.3px;text-transform:uppercase;white-space:normal;
  padding:8px 14px 8px 0;width:150px;vertical-align:top;border-bottom:1px solid #eef1f4}
.kv-table tr td{background:transparent;color:var(--ink);font-size:13px;font-weight:400;
  padding:8px 0;vertical-align:top;border-bottom:1px solid #eef1f4;overflow-wrap:break-word}
.kv-table tr:last-child th,.kv-table tr:last-child td{border-bottom:none}

/* ── Card head ────────────────────────────────────────────────
   Title on the left, the one pill that says where this card stands on the
   right, a hairline under both. Used by record pages so every card on the
   page opens the same way. */
.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.card__head > h3{margin:0;font-size:15px;color:var(--isb-dark);display:flex;align-items:center;gap:9px;min-width:0}
.card__head > h3 svg{width:17px;height:17px;color:var(--isb-blue);flex-shrink:0}
.card__head-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.card__hint{font-size:12px;color:var(--muted);margin:-4px 0 14px;line-height:1.5;max-width:66ch}

/* ── People on a record ───────────────────────────────────────
   One person = one row: initials, name and the badges that qualify them,
   their addresses under it, their buttons on the right. `--ghost` is somebody
   the paperwork names who has no portal account linked to the child yet —
   dashed, because the school believes it has them and the portal does not. */
.person-list{display:flex;flex-direction:column;gap:10px}
.person{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.person:hover{border-color:#c7d7e6;box-shadow:var(--shadow)}
.person--ghost{background:#fbfcfd;border-style:dashed}
.person--off{background:#fdf7f6;border-color:#f0d4cf}
.person__ini{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:linear-gradient(135deg,#e8eef6 0%,#d9e4f0 100%);color:#41648a}
.person--ghost .person__ini{background:#f1f3f5;color:#98a3ae}
.person__main{flex:1;min-width:0}
.person__name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;
  font-size:14px;font-weight:600;color:var(--isb-dark)}
.person__meta{margin-top:3px;font-size:12px;color:var(--muted);line-height:1.5}
.person__meta a,.person__meta .person__mail{word-break:break-all}
.person__tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:10px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:#eaeaea;color:var(--muted)}
.person__tag--main{background:#dff2d8;color:var(--ok)}
.person__tag--paper{background:#fcefc7;color:#8a6100}
.person__tag--off{background:#fbe1de;color:var(--warn)}
.person__actions{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.person__actions form{margin:0}
@media (max-width:560px){
  .person{flex-wrap:wrap}
  .person__actions{width:100%;justify-content:flex-start;padding-left:50px}
}

/* ── A family inside one table cell ───────────────────────────
   The compact form of the same idea, for a list row: every parent of the
   child, one under the other, each with the addresses the school writes to. */
.fam{display:flex;flex-direction:column;gap:8px}
.fam__row{line-height:1.35;min-width:0}
.fam__name{font-size:13px;color:var(--ink);font-weight:600}
.fam__flag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;white-space:nowrap;
  font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:#eaeaea;color:var(--muted)}
.fam__flag--main{background:#dff2d8;color:var(--ok)}
.fam__flag--paper{background:#fcefc7;color:#8a6100}
.fam__flag--off{background:#fbe1de;color:var(--warn)}
.fam__mail{display:block;font-size:11.5px;word-break:break-all;text-transform:lowercase;letter-spacing:0}
.fam__none{font-size:12px;color:var(--warn)}
/* The address is a button that writes to this family, and has to read as the
   link it replaced — a <button> inherits none of that. */
.fam__mailbtn{display:block;background:none;border:0;padding:0;margin:0;font:inherit;font-size:11.5px;
  text-transform:lowercase;letter-spacing:0;color:var(--isb-blue);text-decoration:underline;
  text-align:left;word-break:break-all;cursor:pointer}
.fam__mailbtn:hover{color:var(--isb-dark)}

/* ── Pills ───────────────────────────────────────────────── */
.pill{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:600}
.pill.green{background:#dff2d8;color:var(--ok)}
.pill.red{background:#fbe1de;color:var(--warn)}
.pill.grey{background:#eaeaea;color:var(--muted)}
.pill.blue{background:#e1eefb;color:var(--isb-blue)}
.pill.gold{background:#f4ead0;color:#8e6500}

/* ── Menu / day cards ────────────────────────────────────── */
.menu-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.day-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--isb-blue);border-radius:var(--radius);padding:14px;font-size:13px;box-shadow:var(--shadow)}
.day-card.intl{border-top-color:var(--isb-gold)}
.day-card.fish{border-top-color:#3b82a4}
.day-card .dow{font-weight:700;color:var(--isb-dark);font-size:14px}
.day-card .date{color:var(--muted);font-size:11px;margin-bottom:8px}
.day-card .row{margin:6px 0;padding-bottom:6px;border-bottom:1px dotted var(--line)}
.day-card .row:last-child{border:none}
.day-card .label{font-size:10px;text-transform:uppercase;color:var(--muted);letter-spacing:.5px;display:block}
.day-card .val{font-size:13px;color:var(--ink)}
.day-card .tag{display:inline-block;background:var(--isb-gold);color:#fff;padding:2px 6px;font-size:9px;letter-spacing:.5px;text-transform:uppercase;margin-top:4px;border-radius:3px}
.day-card .tag.fish{background:#3b82a4}

/* ── Clock bar ───────────────────────────────────────────── */
.clock-bar{background:var(--isb-dark);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;border-radius:var(--radius)}
.clock-bar .time{font-size:24px;font-family:'SF Mono','Fira Code','Courier New',monospace;letter-spacing:2px}
.clock-bar .status{font-size:12px;text-transform:uppercase;letter-spacing:1px}
.clock-bar .status.open{color:#a5e3a3}
.clock-bar .status.closed{color:#ffb3a8}

/* ── Utilities ───────────────────────────────────────────── */
.small{font-size:12px;color:var(--muted)}
.checkbox-label{display:flex;align-items:center;gap:8px;text-transform:none;font-weight:normal;margin:8px 0}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.text-right{text-align:right}
.menu-editor-day{border:1px solid var(--line);padding:10px;border-radius:var(--radius)}

/* ── Footer ──────────────────────────────────────────────── */
.page-footer{text-align:center;padding:30px 20px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);margin-top:40px}

/* ── Auth ────────────────────────────────────────────────── */
.auth-wrap{max-width:560px;margin:48px auto}
.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lg)}
.tabs-inline{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs-inline a,.tabs-inline button{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer;color:var(--isb-dark);transition:all .15s}
.tabs-inline .active{background:var(--isb-blue);color:#fff;border-color:var(--isb-blue)}

/* ── Order sheets ────────────────────────────────────────── */
.order-sheet{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:24px;box-shadow:var(--shadow)}
.order-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:2px solid var(--isb-dark);padding-bottom:12px;margin-bottom:16px}
.order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
.order-box{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:#fafbfc}
.order-box .big{font-size:32px;font-weight:700;color:var(--isb-dark)}
.week-block{margin-bottom:28px}
.week-block .week-menu,.week-block .week-form{margin-top:12px}

/* ── Nav icons ───────────────────────────────────────────── */
.nav-icon-link{display:flex !important;align-items:center;justify-content:center;min-width:52px;padding-left:14px;padding-right:14px}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.nav-icon svg{width:20px;height:20px;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The other-language flag on the reading toolbar */
.doc-tools__translate{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--isb-dark);font-size:12px;font-weight:600;text-decoration:none;transition:background .15s var(--ease),border-color .15s var(--ease)}
.doc-tools__translate:hover{background:#eaf4fb;border-color:var(--isb-blue);color:var(--isb-blue);text-decoration:none}

/* ── Logbook cockpit ─────────────────────────────────────────
   The register is a grid of hours, so the module is built round one:
   a period rail down the left, five day columns, and a cell for every
   hour of the week — including the ones with no class in them.
   State lives on the left edge of a cell, so a whole week reads in a
   glance without anyone having to open anything.                        */

:root{
  --lb-empty:#c9ced6;
  --lb-draft:var(--isb-blue);
  --lb-done:var(--isb-green);
  --lb-alert:var(--warn);
  --lb-cover:#6b4fbb;
  --lb-prep:#0f8a8a;
  --lb-ink:var(--isb-dark, #0e3b5e);
  --lb-rail:#f7f8fa;
}

/* Toolbar: week navigation and scope, pinned above the grid */
.lb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.lb-bar__week{font-weight:700;color:var(--lb-ink);font-size:15px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lb-bar__sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.lb-bar__spacer{flex:1 1 auto}
.lb-bar .btn{white-space:nowrap}
.lb-bar__title{flex:0 1 auto;min-width:0;max-width:300px}
.lb-bar__title .lb-bar__sub{overflow-wrap:anywhere;line-height:1.35;margin-top:2px}
.lb-bar > .lb-nav{flex:none}
.lb-bar__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto;min-width:0}
.lb-bar__right form{flex-wrap:nowrap;min-width:0}
.lb-bar__right select{min-width:0 !important;width:260px;max-width:100%;text-overflow:ellipsis}
.lb-nav{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.lb-nav a,.lb-nav button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--paper);color:var(--lb-ink);border:0;border-right:1px solid var(--line);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.lb-nav a:last-child,.lb-nav button:last-child{border-right:0}
.lb-nav a:hover,.lb-nav button:hover{background:var(--lb-ink);color:#fff;text-decoration:none}
.lb-nav .is-current{background:#eaf1f8;cursor:default}

/* The grid itself */
.lb-grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow);margin-bottom:18px}
.lb-grid{display:grid;grid-template-columns:96px repeat(5,minmax(178px,1fr));min-width:1000px}
.lb-grid__corner{background:var(--lb-ink);border-bottom:1px solid rgba(255,255,255,.12)}

.lb-dayhead{background:var(--lb-ink);color:#fff;padding:11px 12px;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:1px}
.lb-dayhead b{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.lb-dayhead span{font-size:11px;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.lb-dayhead.is-today{background:linear-gradient(135deg,var(--isb-blue) 0%,var(--lb-ink) 100%)}
.lb-dayhead.is-today b::after{content:"TODAY";margin-left:8px;font-size:9px;letter-spacing:.1em;background:rgba(255,255,255,.22);padding:2px 6px;border-radius:10px;vertical-align:1px}

.lb-rail{background:var(--lb-rail);border-top:1px solid var(--line);border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;justify-content:center;gap:2px;text-align:right}
.lb-rail b{font-size:11px;font-weight:700;color:var(--lb-ink);text-transform:uppercase;letter-spacing:.06em}
.lb-rail span{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

.lb-cell{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:6px;min-height:92px;display:flex;flex-direction:column;gap:5px;background:var(--paper)}
.lb-cell--closed{background:repeating-linear-gradient(135deg,#f4f5f7,#f4f5f7 7px,#eceef1 7px,#eceef1 14px)}
.lb-cell__closed-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600;margin:auto;text-align:center;padding:4px}

/* A lesson */
.lb-lesson{display:block;position:relative;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--lb-empty);border-radius:var(--radius);padding:8px 9px 8px 10px;color:var(--ink);text-decoration:none;flex:1;transition:box-shadow .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.lb-lesson:hover{text-decoration:none;box-shadow:var(--shadow-lg);transform:translateY(-1px);border-color:var(--isb-blue);border-left-color:inherit}
/* Weekly report: what is not written up cannot reach the letter, and looks it. */
.lb-register{margin-bottom:18px}
.lb-register .lb-grid{min-width:860px;grid-template-columns:64px repeat(5,minmax(150px,1fr))}
.lb-register .lb-dayhead{padding:6px 10px}
.lb-register .lb-dayhead b{font-size:11px}
.lb-register .lb-dayhead span{font-size:10px}
.lb-register .lb-rail{padding:4px 8px;gap:0}
.lb-register .lb-rail b{font-size:10px}
.lb-register .lb-rail span{font-size:9.5px}
.lb-register .lb-cell{min-height:0;padding:3px;gap:3px}
.lb-register .lb-lesson{padding:2px 6px 2px 7px;border-left-width:3px;flex:0 0 auto;border-radius:4px}
.lb-register .lb-lesson__subject{font-size:11px;line-height:1.2}
.lb-register .lb-lesson__who{font-size:10px;margin-top:0;line-height:1.2}
.lb-register .lb-lesson__class,.lb-register .lb-lesson__tags,.lb-register .lb-lesson__state{display:none}
.lb-register .lb-lesson.is-empty::after{display:none}
/* Not written up = visibly hollow: grey ground, dashed edge, greyed text, no
   coloured stripe. Written up keeps the white card and its green/amber stripe. */
.lb-register .lb-lesson.is-empty{background:#f3f5f8;border:1px dashed #b8c2cf;border-left:3px solid #c9ced6;color:var(--muted)}
.lb-register .lb-lesson.is-empty .lb-lesson__subject{color:#7b8794;font-weight:600}
.lb-register .lb-lesson.is-empty .lb-lesson__who{color:#9aa5b1}
.lb-register .lb-lesson.is-empty:hover{background:#eef2f7;border-color:var(--isb-blue)}
.lb-register .lb-lesson.is-complete,.lb-register .lb-lesson.is-draft{background:#fff;box-shadow:0 1px 2px rgba(14,59,94,.08)}
.lb-lesson.is-draft{border-left-color:var(--lb-draft)}
/* A teacher's own ground colour on their week (My Settings). */
.lb-lesson--tinted{border-color:rgba(0,0,0,.08)}
.lb-lesson--tinted:hover{border-color:var(--isb-blue)}
/* My Settings: one row per teaching, a swatch per palette colour. A swatch is
   a <label> (the global label rule is undone here) wrapping a hidden radio. */
.lb-colour-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid #f0f1f3}
.lb-colour-row:first-of-type{border-top:0}
.lb-colour-row__name{flex:1;min-width:160px;font-size:13px;font-weight:600;color:var(--lb-ink)}
.lb-swatches{display:flex;gap:6px;flex-wrap:wrap}
.lb-swatch{position:relative;width:26px;height:26px;border-radius:50%;border:2px solid rgba(0,0,0,.08);margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;box-sizing:border-box;transition:transform .12s,border-color .12s}
.lb-swatch:hover{transform:scale(1.12)}
.lb-swatch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lb-swatch:has(input:checked){border-color:var(--isb-blue);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--isb-blue)}
.lb-swatch--none{background:#fff;border-style:dashed}
.lb-lesson.is-complete{border-left-color:var(--lb-done)}
.lb-lesson.is-incident{border-left-color:var(--lb-alert);background:#fffaf9}
/* The state, said in words on the first line of every card. The chip's SHAPE
   changes with the state, so it reads even over a teacher's subject colour:
   dashed + hollow = nothing written, outlined = draft, filled = handed in. */
.lb-lesson__state{display:flex;margin-bottom:5px}
.lb-state{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px 2px 5px;border-radius:9px;line-height:1.5;border:1px solid transparent;white-space:nowrap}
.lb-state svg{width:11px;height:11px;stroke-width:2.4}
.lb-state--empty{background:rgba(255,255,255,.7);color:#7b8794;border:1px dashed #b8c2cf}
.lb-state--draft{background:#fff;color:var(--lb-draft);border-color:var(--lb-draft)}
.lb-state--complete{background:var(--lb-done);color:#fff;border-color:var(--lb-done)}
.lb-state--incident{background:var(--lb-alert);color:#fff;border-color:var(--lb-alert)}
.lb-state--prep{background:#fff;color:var(--lb-prep);border:1px dashed var(--lb-prep)}
/* Not written up = visibly hollow, whatever the tint underneath: a dashed
   edge and a white wash over the subject colour, so the eye skips it the way
   it skips a blank line. Written-up cards keep their full colour. */
.lb-lesson.is-empty{border-style:dashed;border-left-style:solid}
.lb-lesson.is-empty::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.55);border-radius:inherit;pointer-events:none}
.lb-lesson.is-empty>*{position:relative;z-index:1}
.lb-lesson.is-empty .lb-lesson__subject{color:#5b6b7c;font-weight:600}
.lb-lesson.is-empty:hover::after{background:rgba(255,255,255,.3)}
.lb-lesson__subject{font-weight:700;font-size:13px;color:var(--lb-ink);line-height:1.3;letter-spacing:-.01em}
.lb-lesson__class{font-size:11px;color:var(--muted);margin-top:1px}
.lb-lesson__who{font-size:11px;color:var(--muted);margin-top:1px}
.lb-lesson__tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

/* A non-teaching hour that has been written up */
.lb-entry{display:block;border:1px dashed #b9d3d3;border-left:4px solid var(--lb-prep);border-radius:var(--radius);background:#f2fafa;padding:8px 9px;color:var(--ink);text-decoration:none;flex:1;transition:box-shadow .15s var(--ease)}
.lb-entry:hover{text-decoration:none;box-shadow:var(--shadow)}
.lb-entry__type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--lb-prep)}
.lb-entry__title{font-size:12px;font-weight:600;color:var(--lb-ink);margin-top:2px;line-height:1.3}
.lb-entry__notes{font-size:11px;color:var(--muted);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* An empty hour: quiet until you go near it */
.lb-free{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;border:1px dashed #dcdfe4;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;font-family:inherit;padding:8px;transition:all .15s var(--ease);opacity:.55}
.lb-free:hover{opacity:1;border-color:var(--isb-blue);border-style:solid;background:#f2f8fd;color:var(--isb-blue);text-decoration:none}
.lb-free svg{width:13px;height:13px}

/* Reminders: a small note with a bell — not the register, so not its shape.
   Warm paper, a folded corner, the word "Reminder" (or "Done", struck through). */
.lb-rem{position:relative;display:block;padding:5px 8px 6px;border-radius:var(--radius) 2px var(--radius) var(--radius);background:#fff6d8;border:1px solid #f0dc9a;color:#5c4708;text-decoration:none;box-shadow:0 1px 0 rgba(120,90,0,.08);transition:box-shadow .15s var(--ease),transform .15s var(--ease)}
.lb-rem::after{content:"";position:absolute;top:-1px;right:-1px;width:9px;height:9px;background:linear-gradient(225deg,var(--paper) 50%,#ecd489 50%);border-bottom-left-radius:2px}
.lb-rem:hover{text-decoration:none;box-shadow:0 3px 10px rgba(120,90,0,.16);transform:translateY(-1px)}
.lb-rem__head{display:flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#8a6a00}
.lb-rem__head svg{width:11px;height:11px}
.lb-rem__time{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-right:6px}
.lb-rem__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;font-weight:600;line-height:1.3;margin-top:1px}
.lb-rem.is-done{background:#f3f4f6;border-color:#e1e3e7;color:var(--muted);box-shadow:none}
.lb-rem.is-done::after{background:linear-gradient(225deg,var(--paper) 50%,#dcdfe4 50%)}
.lb-rem.is-done .lb-rem__head{color:var(--muted)}
.lb-rem.is-done .lb-rem__title{text-decoration:line-through;font-weight:500}

/* "Add reminder": not printed in every hour — that doubled every cell of the
   week. The hour the pointer is on (or that has keyboard focus) shows a round
   bell in its top-right corner, in the portal's blue so it is seen at once;
   pointing at the bell opens it into the words "Add reminder". On a touch
   screen the bell is always there. */
.lb-cell{position:relative}
.lb-rem-add{position:absolute;top:5px;right:5px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 7px;border-radius:999px;background:var(--isb-blue);border:2px solid #fff;color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-decoration:none;box-shadow:0 2px 8px rgba(26,115,193,.35);opacity:0;pointer-events:none;transition:opacity .12s var(--ease),background .12s var(--ease),padding .18s var(--ease)}
.lb-rem-add svg{width:14px;height:14px;flex-shrink:0}
.lb-rem-add span{max-width:0;overflow:hidden;transition:max-width .18s var(--ease),margin .18s var(--ease)}
.lb-cell:hover .lb-rem-add,.lb-rem-add:focus-visible{opacity:1;pointer-events:auto}
.lb-rem-add:hover,.lb-rem-add:focus-visible{background:var(--isb-dark);color:#fff;text-decoration:none;padding:0 10px}
.lb-rem-add:hover span,.lb-rem-add:focus-visible span{max-width:120px;margin-left:5px}
@media (hover:none){.lb-rem-add{opacity:.85;pointer-events:auto}}

/* The reminder form (reminder.php, alone or in the modal over My Week) */
.lb-remform__when{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;margin-bottom:14px;border-radius:var(--radius);background:#fff6d8;border:1px solid #f0dc9a;color:#5c4708;font-weight:600;font-size:13px}
.lb-remform__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.lb-remform__row{grid-template-columns:1fr}}
.lb-remform__help{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--muted);background:#f6f7f9;border-radius:var(--radius);padding:9px 11px;margin:4px 0 14px;line-height:1.45}
.lb-remform__help svg{flex-shrink:0;margin-top:2px}
.lb-rem-state{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:2px 8px;border-radius:9px;background:#fff;border:1px solid #cfd3d9;color:var(--muted)}

/* Micro badges inside cells */
.lb-tag{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:9px;background:#eef0f3;color:var(--muted);line-height:1.5}
.lb-tag--group{background:#e6f0fa;color:var(--isb-blue)}
.lb-tag--cover{background:#ece4fb;color:var(--lb-cover)}
.lb-tag--absent{background:#f7ecd2;color:#8a6100}
.lb-tag--incident{background:#fbe1de;color:var(--warn)}
.lb-tag--adhoc{background:#e3f3e2;color:var(--ok)}
.lb-tag--room{background:#f0f1f3;color:var(--muted)}

/* Legend under the grid */
.lb-legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:20px}
.lb-legend .lb-state--empty{background:#fff}

/* ── Lesson panel ─────────────────────────────────────────── */
.lb-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--isb-dark, #0e3b5e) 0%,var(--isb-darker, #0a2c47) 60%,#123a5c 100%);color:#fff;border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-lg)}
.lb-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.lb-hero__eyebrow{position:relative;z-index:1;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.6);font-weight:700}
.lb-hero__title{position:relative;z-index:1;font-size:26px;font-weight:700;letter-spacing:-.02em;margin:4px 0 2px;line-height:1.15}
.lb-hero__class{position:relative;z-index:1;font-size:14px;color:rgba(255,255,255,.82)}
.lb-hero__facts{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:22px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.lb-fact{min-width:96px}
.lb-fact b{display:block;font-size:14px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.lb-fact span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.55);font-weight:600;margin-top:2px}
.lb-hero__pills{position:relative;z-index:1;display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}

.lb-cover-note{display:flex;gap:10px;align-items:flex-start;background:#f4f0fd;border:1px solid #ded2f6;border-left:4px solid var(--lb-cover);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px}
.lb-cover-note strong{color:var(--lb-cover)}

.lb-split{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:18px;align-items:start;margin-bottom:20px}
/* Attendance is off at this school, so most lessons print only the write-up —
   the grid's lone child would otherwise land in the narrow first column and
   leave the rest of the row empty. See lesson.php. */
.lb-split--single{grid-template-columns:minmax(0,1fr)}

/* Weekly-report recipients, as pills — one row of tokens per child so a
   parent's name (which reads exactly like a child's, e.g. "Sokol Dervishi"
   under "Elia Dervishi") is never floating loose: it always sits inside its
   own child's group, right after the plain, unclickable name label. Every
   pill IS its own checkbox — filled/blue means this send will reach that
   address, outlined/grey means it will not; there is nothing else to click. */
/* Logbook header: the teacher's own mailbox is connected — said once, quietly. */
.lb-mailbox-ok{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;padding:6px 12px;border:1px solid #cfe8d6;background:#f1faf3;border-radius:8px;font-size:12px;color:#22703a}
.lb-mailbox-ok span{color:var(--muted)}
.lb-mailbox-ok a{margin-left:auto;font-size:11.5px}
/* What is waiting: shortcut tiles with the menu's own number (Noticeboard + staff home strip) */
.nb-shortcuts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px}
.nb-tile{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;color:inherit;text-decoration:none;font-size:13px}
.nb-tile:hover{border-color:var(--isb-blue,#1F3A5C);box-shadow:0 4px 12px rgba(17,40,82,.08)}
.nb-tile strong{font-weight:600;color:#1f2937}
.nb-tile__ic{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#eef3fb;color:var(--isb-blue,#1F3A5C)}
.nb-tile__ic svg{width:15px;height:15px}
.nb-tile__badge{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:var(--isb-gold, #d4a437);color:#fff;font-size:11px;font-weight:700}
.nb-tile__badge--red{background:#b03a2e}
/* Staff home strip: one chip per own mailbox (state = shape + word), then the tiles */
.me-strip{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:8px 12px;border:1px solid #e3e8ef;background:#fff;border-radius:10px}
.me-strip__row{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.me-strip__row > a.me-strip__settings{margin-left:auto;font-size:11.5px}
.me-strip__tiles{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed #e3e8ef}
.me-box{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;text-decoration:none;border:1px solid #cfe8d6;background:#f1faf3;color:#22703a}
.me-box strong{font-weight:600}
.me-box span{color:var(--muted)}
.me-box--off{border:1px dashed #e0a9a2;background:#fdf1ef;color:#9b2c20}
.me-box--off span{color:#9b2c20}
.me-box--none{border:1px dashed #d6dde6;background:#f7f9fb;color:#475569}
a.me-box:hover{box-shadow:0 2px 8px rgba(17,40,82,.08)}
.me-strip__alert{font-size:12.5px;color:#9b2c20}
.me-box__n{margin-left:2px;padding:0 7px;border-radius:9px;background:#b03a2e;color:#fff;font-size:11px;font-weight:700;line-height:18px}
.me-strip__none{font-size:12.5px;color:var(--muted);gap:6px}
.lb-rpills{padding:2px 0}
.lb-rpill-group{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:2px 0}
.lb-rpill-group__name{font-weight:700;font-size:11.5px;color:var(--isb-dark);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;min-width:130px}
.lb-rpill{position:relative;display:inline-flex;align-items:center;gap:5px;margin:0;padding:3px 9px 3px 7px;border:1px solid #d9e3f0;border-radius:999px;background:#fff;font-size:12px;font-weight:400;line-height:1.3;text-transform:none;letter-spacing:0;color:var(--ink);cursor:pointer;user-select:none;transition:background .12s,border-color .12s}
.lb-rpill::before{content:"";width:6px;height:6px;border-radius:50%;background:#c8d3de;flex:0 0 auto}
.lb-rpill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.lb-rpill__name{font-weight:600}
.lb-rpill__email{color:var(--muted);font-size:11.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rpill.is-on{background:#eef5ff;border-color:#bcd6f5}
.lb-rpill.is-on::before{background:#3576c4}
.lb-rpill.is-on .lb-rpill__email{color:#4d6b8a}
.lb-rpill.is-done{opacity:.6}
.lb-rpill.is-done::before{background:#2f8f4e}
.lb-rpill__tag{font-size:9.5px;font-weight:700;color:#2f8f4e;background:#e6f6ea;border-radius:999px;padding:1px 6px}

/* Attendance */
.lb-roster{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.lb-roster__head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fafbfc}
.lb-roster__head h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--lb-ink);font-weight:700}
.lb-roster__count{font-size:11px;color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.lb-roster__body{max-height:560px;overflow-y:auto}
.lb-student{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid #f0f1f3}
.lb-student:last-child{border-bottom:0}
.lb-student__name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-student__name small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.lb-student.is-absent{background:#fffaf7}

/* Segmented present / absent / late / early */
.lb-seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex-shrink:0;background:var(--paper)}
.lb-seg input{position:absolute;opacity:0;pointer-events:none}
.lb-seg label{display:grid;place-items:center;width:30px;height:28px;font-size:11.5px;font-weight:700;color:var(--muted);cursor:pointer;border-right:1px solid var(--line);transition:background .12s var(--ease),color .12s var(--ease);user-select:none}
.lb-seg label:last-of-type{border-right:0}
.lb-seg label:hover{background:#f2f4f7}
.lb-seg input:checked + label{color:#fff}
.lb-seg input[value="present"]:checked + label{background:var(--isb-green)}
.lb-seg input[value="absent"]:checked + label{background:var(--warn)}
.lb-seg input[value="late"]:checked + label{background:var(--isb-gold)}
.lb-seg input[value="early_exit"]:checked + label{background:#7d8a99}
.lb-seg input:focus-visible + label{outline:2px solid var(--isb-blue);outline-offset:-2px}

.lb-student__note{width:100%;margin-top:6px;font-size:12px;padding:5px 8px}
.lb-student__extra{display:none;padding:0 14px 10px 14px;border-bottom:1px solid #f0f1f3}
.lb-student.is-absent + .lb-student__extra,.lb-student__extra.is-open{display:block}

/* Write-up */
.lb-writeup{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:18px 20px}
.lb-field{margin-bottom:16px}
.lb-field > label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--lb-ink);font-weight:700;margin-bottom:5px}
.lb-field small{display:block;color:var(--muted);font-size:11.5px;font-weight:400;text-transform:none;letter-spacing:0;margin-bottom:6px}

/* The writing assistant */
.lb-ai{border:1px solid #cfe0f1;background:linear-gradient(180deg,#f4f9fe 0%,#eef5fc 100%);border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.lb-ai__head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--isb-blue);margin-bottom:8px}
.lb-ai__row{display:flex;gap:8px;align-items:flex-start}
.lb-ai__row input{flex:1;margin:0}
.lb-ai__hint{font-size:11.5px;color:var(--muted);margin-top:7px}
/* The weekly letter: the button is the whole action, and the optional note to
   the assistant is folded away under it — side by side they read as one
   "type here, then press" control, which is exactly what they are not. */
.lb-ai__grades{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 10px;font-size:12px;color:var(--muted)}
.lb-ai__grades label{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--lb-ink);cursor:pointer}
.lb-ai__grades input{margin:0}
.lb-ai__go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lb-ai__go .btn{flex:0 0 auto}
.lb-ai__go .lb-ai__hint{flex:1;min-width:220px}
.lb-ai__more{margin-top:10px;border-top:1px dashed #cfe0f1;padding-top:8px}
.lb-ai__more summary{font-size:11.5px;color:var(--muted);cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.lb-ai__more summary::-webkit-details-marker{display:none}
.lb-ai__more summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s var(--ease)}
.lb-ai__more[open] summary::before{transform:rotate(90deg)}
.lb-ai__more .lb-ai__row{margin-top:8px}
.lb-ai__out{margin-top:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;font-size:13px;line-height:1.6;white-space:pre-wrap;display:none}
.lb-ai__out.is-open{display:block}
.lb-ai__actions{display:flex;gap:8px;margin-top:9px}
.lb-ai.is-busy .lb-ai__head{opacity:.6}

/* Incident reports */
.lb-incidents{margin-bottom:20px}
.lb-incident{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--lb-alert);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow)}
.lb-incident.is-commendation{border-left-color:var(--isb-green)}
.lb-incident__top{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.lb-incident__title{font-weight:700;color:var(--lb-ink);font-size:14px;flex:1;min-width:180px}
.lb-incident__who{font-size:12px;color:var(--muted);margin-top:3px}
.lb-incident__text{font-size:13px;margin-top:9px;white-space:pre-wrap}
.lb-incident__parent{margin-top:10px;padding:10px 12px;background:#f2f8fd;border:1px solid #d5e6f5;border-radius:var(--radius);font-size:12.5px}
.lb-incident__parent b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--isb-blue);margin-bottom:3px}
.lb-parent-box{border:1px solid #d5e6f5;background:#f7fbfe;border-radius:var(--radius);padding:12px 14px;margin-top:10px}

/* Parent-facing week */
.lb-child-day{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.lb-child-day__head{background:var(--lb-ink);color:#fff;padding:10px 16px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:10px}
.lb-child-day__head span{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.65);font-size:12px}
.lb-child-lesson{display:flex;gap:14px;padding:13px 16px;border-bottom:1px solid #f0f1f3}
.lb-child-lesson:last-child{border-bottom:0}
.lb-child-lesson__when{width:92px;flex-shrink:0;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-variant-numeric:tabular-nums}
.lb-child-lesson__body{flex:1;min-width:0}
.lb-child-lesson__subject{font-weight:700;color:var(--lb-ink);font-size:13.5px}
.lb-child-lesson__topic{font-size:13px;margin-top:3px;white-space:pre-wrap}
.lb-child-lesson__hw{font-size:12.5px;margin-top:6px;padding:7px 10px;background:#fdf8ec;border-left:3px solid var(--isb-gold);border-radius:0 var(--radius) var(--radius) 0}
.lb-child-lesson__none{font-size:12.5px;color:var(--muted);font-style:italic;margin-top:3px}

/* Year-group accordion in the class editor */
.lb-level{border-bottom:1px solid #f0f1f3}
.lb-level[hidden]{display:none}
.lb-level:last-child{border-bottom:0}
.lb-level summary{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--lb-ink);list-style:none;user-select:none}
.lb-level summary::-webkit-details-marker{display:none}
.lb-level summary::before{content:"";width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s var(--ease);flex-shrink:0}
.lb-level[open] summary::before{transform:rotate(90deg)}
.lb-level summary:hover{background:#f4f6f8}
.lb-level__name{flex:1}
.lb-level__count{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-level__body{padding:6px 12px 12px 25px;background:#fbfcfd}

/* The subject line the school fixes — shown, not editable */
.lb-fixed-subject{background:#f4f6f8;border:1px solid var(--line);border-radius:var(--radius);padding:10px 13px;font-size:13.5px;font-weight:600;color:var(--lb-ink);word-break:break-word}

/* Report composer */
/* The weekly letter, laid out as what it is: an email. Addresses first, then
   the subject, then the text — the same order as Communications' compose. */
.lb-mail{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.lb-mail__row{display:grid;grid-template-columns:150px minmax(0,1fr);border-bottom:1px solid var(--line)}
.lb-mail__row:last-child{border-bottom:0}
.lb-mail__label{padding:12px 14px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--lb-ink);background:#fafbfc;border-right:1px solid var(--line);line-height:1.35}
.lb-mail__label small{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.35}
.lb-mail__field{padding:10px 14px;min-width:0}
.lb-mail__field .lb-ai{margin:0}
.lb-mail__tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding-bottom:8px}
.lb-mail__tools .small{margin-left:auto}
.lb-mail__list{max-height:360px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius)}
.lb-mail__list .lb-level summary{padding:7px 12px;font-size:12.5px}
.lb-mail__list .lb-level__body{padding:4px 12px 8px 22px}
.lb-mail__list .lb-level__body > div:first-child{margin-bottom:4px}
.lb-mail__send{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 14px;background:#fafbfc;border-top:1px solid var(--line)}
.lb-mail__send .small{flex-basis:100%}
@media (max-width:640px){.lb-mail__row{grid-template-columns:1fr}.lb-mail__label{border-right:0;border-bottom:1px solid var(--line)}}
.lb-preview{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.lb-preview__head{background:#fafbfc;border-bottom:1px solid var(--line);padding:11px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--lb-ink)}
.lb-preview__body{padding:18px 20px;font-size:13.5px;line-height:1.7;white-space:pre-wrap;max-height:460px;overflow-y:auto}
.lb-digest{font-size:12.5px}
.lb-digest h4{margin:14px 0 5px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--lb-ink)}
.lb-digest ul{margin:0 0 0 16px;padding:0;color:var(--muted)}
.lb-digest li{margin-bottom:3px}

@media (max-width:1100px){
  .lb-split{grid-template-columns:1fr}
  .lb-compose{grid-template-columns:1fr}
}
@media (max-width:640px){
  .lb-hero{padding:18px}
  .lb-hero__title{font-size:21px}
  .lb-bar{padding:10px}
  .lb-bar__title{max-width:none;flex-basis:100%}
  .lb-bar__right{margin-left:0;justify-content:flex-start;width:100%}
  .lb-bar__right form{flex:1 1 auto}
  .lb-bar__right select{width:auto;flex:1 1 auto}
}

/* ── Scanner (Attendance) ────────────────────────────────── */
.scanner-wrap{max-width:500px;margin:0 auto}
.scan-feedback{text-align:center;padding:24px 16px;border-radius:var(--radius);margin-top:16px;animation:scanPulse .4s ease-out}
.scan-feedback.scan-in{background:#dff2d8;border:2px solid var(--ok);color:var(--ok)}
.scan-feedback.scan-out{background:#fbe1de;border:2px solid var(--warn);color:var(--warn)}
.scan-icon{font-size:36px;margin-bottom:6px}
.scan-name{font-size:20px;font-weight:700}
.scan-role{font-size:12px;opacity:.7;margin-bottom:8px}
.scan-action{font-size:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.scan-time{font-size:28px;font-weight:700;margin-top:4px}
@keyframes scanPulse{0%{transform:scale(.95);opacity:0}100%{transform:scale(1);opacity:1}}


/* ── Photo archive ────────────────────────────────────────────
   A contact sheet: the picture is the thing, the words sit under it.
   auto-fill rather than a fixed count, so a wide screen shows more
   instead of showing the same six enormous.                          */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.ph-card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:box-shadow .15s var(--ease)}
.ph-card:hover{box-shadow:var(--shadow-lg)}
.ph-card.is-untitled{border-color:#e8c9a0}
.ph-card > a{display:block;background:#eef0f3;line-height:0}
.ph-card img{width:100%;height:150px;object-fit:cover;display:block}
.ph-card figcaption{padding:9px 11px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.ph-card__title{font-size:13px;font-weight:600;color:var(--isb-dark);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ph-card__meta{font-size:11px;color:var(--muted);line-height:1.4}
.ph-card__actions{display:flex;gap:4px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.ph-card__actions form{margin:0}
.ph-up-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ph-up-list li{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:2px 10px;font-size:12.5px;align-items:center}
.ph-up-list li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-up-list li progress{width:100%;height:8px}
.ph-up-list li small{grid-column:1 / -1;color:var(--muted)}
.ph-up-list li.is-bad small{color:var(--warn)}
.ph-up-list li.is-done small{color:var(--isb-dark)}
.ph-card__play{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(15,23,42,.78);color:#fff;border-radius:999px;padding:3px 9px 3px 7px;font-size:11.5px;line-height:1.4;pointer-events:none}
.ph-card__play svg{width:11px;height:11px;fill:currentColor}
.ph-card > a{position:relative}
.ph-video{width:100%;max-height:520px;background:#0f172a;display:block}
@media (max-width:600px){.ph-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.ph-card img{height:120px}}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px){
  :root{--sidebar-w:224px}
  .container{padding:0 20px 40px}
}
@media (max-width: 960px){
  .grid-2,.grid-3,.grid-4,.grid-5,.menu-grid,.order-grid{grid-template-columns:1fr}
  .topbar__meta{display:none}
}

/* ── Sidebar drawer (tablets/phones) ─────────────────────── */
@media (max-width: 880px){
  .sidebar{transform:translateX(-100%);width:280px;max-width:84vw}
  body.is-sidebar-open .sidebar{transform:translateX(0)}
  .sidebar__close{display:inline-grid;place-items:center;margin-left:auto}
  .app-shell{margin-left:0}
  .topbar{position:sticky;top:0;z-index:20;padding:10px 16px;gap:12px}
  .topbar__menu{display:inline-flex}
  .topbar__title h1{font-size:17px}
  .topbar__title p{display:none}
}

/* ── Mobile (tablets and phones) ─────────────────────────── */
@media (max-width: 720px){
  /* Tighter container padding so we don't waste edge space */
  .container{margin:14px auto;padding:0 14px 40px}

  /* Tables: keep horizontal scroll (defined globally) and ensure
     columns stay readable on small screens. */
  .table-card table{min-width:560px}
  table th,table td{padding:8px 10px;font-size:12px}

  /* Cards: less padding on mobile */
  .card,.form-card,.panel-card,.table-card,.stat-card,.info-box,.fee-summary{padding:14px}

  /* Stats: compact */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat-card{padding:12px}
  .stat-card .num{font-size:22px}
  .stat-card .lab{font-size:10px}

  /* Section title */
  .section-title h1,.section-title h2{font-size:18px;line-height:1.3}
  .section-title p{font-size:13px}

  /* Form actions stack vertically + full-width buttons */
  .form-actions{flex-direction:column;align-items:stretch;gap:8px}
  .form-actions .btn,.form-actions button{width:100%;text-align:center}

  /* Buttons / pills: touch-friendly */
  .btn,button{min-height:42px;padding:10px 16px}
  .btn-secondary{min-height:42px}
  .pill{font-size:10px;padding:2px 7px}

  /* Inputs: touch-friendly + iOS no-zoom (font-size>=16px) */
  input[type=text],input[type=email],input[type=password],input[type=date],
  input[type=time],input[type=datetime-local],input[type=month],input[type=week],
  input[type=number],input[type=tel],input[type=search],select,textarea{
    min-height:44px;font-size:16px
  }

  /* KV-table (admissions / chatbot) */
  .kv-table th{width:auto;font-size:10px;display:block;padding-top:8px;padding-bottom:2px}
  .kv-table td{display:block;padding-top:0;padding-bottom:8px;border-bottom:1px solid #eee}

  /* Action button cells: stack mini-buttons */
  td .form-actions,td form{margin:0}
  td a.btn,td button.btn{font-size:11px;padding:6px 10px;min-height:36px}

  /* Hide non-critical columns on the smallest screens (opt-in via class) */
  .mobile-hide{display:none !important}
}

/* ── Phones — extra-compact ──────────────────────────────── */
@media (max-width: 480px){
  .container{padding:0 10px 30px}
  .stats{grid-template-columns:1fr}
  .stat-card .num{font-size:24px}

  /* Aggressive table column hiding on phone */
  .mobile-hide-sm{display:none !important}

  /* Section title smaller */
  .section-title h1,.section-title h2{font-size:16px}

  /* Modal full-width on small phones */
  .modal{max-width:100%}

  /* Pills container wraps cleanly */
  .pill{display:inline-block;margin:1px 0}
}

/* ===========================================================
   Coordinator dashboard — HTML-legacy style
   Used by /coordinator/*.php only. Prefix `cdash-` avoids
   collision with MyArea baseline classes.
   =========================================================== */
.cdash-card{background:#fff;border-radius:8px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08);border-left:4px solid #e5e7eb}
.cdash-card .lab{font-size:10px;text-transform:uppercase;color:#888;letter-spacing:.5px;font-weight:600}
.cdash-card .num{font-size:28px;font-weight:700;margin-top:4px;color:#1a1a2e;line-height:1.1}
.cdash-card .sub{font-size:10px;color:#888;margin-top:2px}
.cdash-card.green{border-left-color:#0cca4a}
.cdash-card.green .num{color:#0cca4a}
.cdash-card.red{border-left-color:#e94560}
.cdash-card.red .num{color:#e94560}
.cdash-card.blue{border-left-color:#2563eb}
.cdash-card.blue .num{color:#2563eb}
.cdash-card.orange{border-left-color:#e97600}
.cdash-card.orange .num{color:#e97600}
.cdash-card.purple{border-left-color:#9333ea}
.cdash-card.purple .num{color:#9333ea}
.cdash-card.grey{border-left-color:#94a3b8}
.cdash-card.grey .num{color:#475569}

.cdash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:18px}

/* Il badge non va piu' a capo MAI: con lo status a testo libero un valore
   come AWAITING_PAYMENT_TERMS_CLARIFICATION sfondava la colonna e veniva
   tagliato a meta'. Ora va a capo, e le parole lunghissime si spezzano. */
.cdash-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.cdash-badge.green{background:#dcfce7;color:#166534}
.cdash-badge.red{background:#fee2e2;color:#991b1b}
.cdash-badge.yellow{background:#fef9c3;color:#854d0e}
.cdash-badge.blue{background:#dbeafe;color:#1e40af}
.cdash-badge.grey{background:#f3f4f6;color:#4b5563}
.cdash-badge.orange{background:#ffedd5;color:#9a3412}
.cdash-badge.purple{background:#f3e8ff;color:#6b21a8}

.cdash-alert{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;margin:0 0 14px}
.cdash-alert h4{color:#991b1b;font-size:12px;margin:0 0 4px;font-weight:700}
.cdash-alert p{font-size:11px;color:#7f1d1d;margin:0;line-height:1.5}
.cdash-alert.yellow{background:#fef9c3;border-color:#fde047}
.cdash-alert.yellow h4{color:#854d0e}
.cdash-alert.yellow p{color:#713f12}

.cdash-table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:12px;margin-bottom:18px}
.cdash-table th{background:#f0f1f5;padding:8px 10px;text-align:left;font-weight:600;color:#555;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.cdash-table td{padding:7px 10px;border-top:1px solid #f0f1f5;vertical-align:top}
.cdash-table tr:hover td{background:#f8f9fc}
.cdash-table .money{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.cdash-table th.money{text-align:right}
.cdash-table .small{font-size:11px;color:#666}
.cdash-table .muted{color:#888}
.cdash-table .num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.cdash-row-needed td:first-child{box-shadow:inset 3px 0 0 #e94560}
.cdash-row-warm td:first-child{box-shadow:inset 3px 0 0 #f59e0b}
.cdash-row-cold td:first-child{box-shadow:inset 3px 0 0 #94a3b8}
.cdash-row-done td{color:#9ca3af}
.cdash-row-done td a{color:#9ca3af}
.cdash-family-sep td{background:#fafbfd}

.cdash-section{font-size:14px;font-weight:700;margin:20px 0 8px;color:#1a1a2e}
.cdash-section.red{color:#e94560}
.cdash-section.green-bg{background:#dcfce7;padding:6px 10px;border-radius:6px;color:#1a1a2e}
.cdash-section.red-bg{background:#fee2e2;padding:6px 10px;border-radius:6px;color:#1a1a2e}
.cdash-section.orange-bg{background:#ffedd5;padding:6px 10px;border-radius:6px;color:#1a1a2e}
.cdash-section.blue-bg{background:#dbeafe;padding:6px 10px;border-radius:6px;color:#1a1a2e}
.cdash-section.yellow-bg{background:#fef9c3;padding:6px 10px;border-radius:6px;color:#1a1a2e}
.cdash-section.grey-bg{background:#f3f4f6;padding:6px 10px;border-radius:6px;color:#1a1a2e}

.cdash-filterbar{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap;align-items:center;background:#fff;padding:10px 12px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.cdash-filterbar select,.cdash-filterbar input[type="text"],.cdash-filterbar input[type="search"]{padding:6px 10px;border:1px solid #ddd;border-radius:6px;font-size:12px;background:#fff;height:auto;margin:0}
.cdash-filterbar input[type="text"]{min-width:200px}
.cdash-filterbar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.cdash-filterbar label{font-size:11px;color:#666;margin:0;padding:0;display:flex;align-items:center;gap:6px}

.cdash-chart-card{background:#fff;border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:16px}
.cdash-chart-card canvas{max-height:260px}
.cdash-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:900px){.cdash-two-col{grid-template-columns:1fr}}

.cdash-model-row.collected td{background:#dcfce7}
.cdash-model-row.outstanding td{background:#fef9c3}
.cdash-model-row.hot td{background:#fee2e2}
.cdash-model-row.warm td{background:#dbeafe}
.cdash-model-row.total td{font-weight:700;background:#f0f1f5;font-size:13px}
.cdash-model-row.total .num{color:#0cca4a}

.cdash-inline-form{display:inline;margin:0;padding:0}
.cdash-done-toggle{width:18px;height:18px;cursor:pointer}

/* ─────────────────────────────────────────────────────────────────────────
   AI ASSISTANT — Mobile responsive utilities
   Usate dal super-modulo AI Assistant per:
   - card con layout 2 colonne (info left + azioni right) che stacka su mobile
   - tabelle che scrollano orizzontalmente con cue visivo
   - search bar / filtri che stackano su mobile
   - stats grid che passa a 1 colonna su narrow viewport
   ──────────────────────────────────────────────────────────────────────── */

/* Card "split": info a sinistra, azioni a destra. Su mobile stacka verticale */
.ai-card-split{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:nowrap}
.ai-card-split__main{flex:1;min-width:0}
.ai-card-split__aside{display:flex;flex-direction:column;gap:6px;align-items:flex-end;min-width:200px;flex-shrink:0}
.ai-card-split__aside .btn{width:100%;text-align:center}
@media (max-width:720px){
  .ai-card-split{flex-direction:column;gap:12px;align-items:stretch}
  .ai-card-split__aside{min-width:0;width:100%;align-items:stretch}
  .ai-card-split__aside .btn{padding:10px 12px}
}

/* Tabelle scrollabili orizzontalmente con cue visivo sul bordo destro.
   Mostra una gradient-shadow sul lato destro per indicare "scrolla" */
.ai-table-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ai-table-wrap table{margin-bottom:0;min-width:100%}
/* Scroll cue: solo su mobile, gradient sul lato destro indica "scrolla per vedere altre colonne" */
@media (max-width:720px){
  .ai-table-wrap{background-image:linear-gradient(to right,rgba(255,255,255,0) calc(100% - 24px),rgba(0,0,0,.07) 100%);background-repeat:no-repeat;background-attachment:local}
}
@media (max-width:720px){
  .ai-table-wrap table{font-size:11.5px}
  .ai-table-wrap th,.ai-table-wrap td{padding:6px 8px}
}

/* Search/filter bar: 1 riga su desktop, stack su mobile */
.ai-filter-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ai-filter-bar input[type=text],.ai-filter-bar input[type=search]{flex:1;min-width:240px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}
.ai-filter-bar select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}
.ai-filter-bar .btn{flex-shrink:0}
@media (max-width:560px){
  .ai-filter-bar{flex-direction:column;align-items:stretch}
  .ai-filter-bar input[type=text],.ai-filter-bar input[type=search],
  .ai-filter-bar select,.ai-filter-bar .btn{width:100%;min-width:0}
}

/* Stats grid: la classe .stats globale e' gia' auto-responsive (auto-fit minmax).
   Aggiungo solo padding piu' compatto sotto i 480px per le 2 stat card piccole. */
@media (max-width:480px){
  .stats{gap:8px}
  .stats .stat-card{padding:12px}
  .stats .stat-card .num{font-size:22px}
  .stats .stat-card .lab{font-size:10px}
}

/* Card info-box (paragrafo "Cos'è questa pagina"): padding ridotto su mobile */
@media (max-width:560px){
  .card p.small{font-size:12.5px;line-height:1.45}
  .card h3{font-size:16px}
}

/* Headline contatto + email inline: stacka su narrow viewport */
@media (max-width:560px){
  .ai-card-split__main h3{flex-wrap:wrap}
  .ai-card-split__main h3 .small{display:block;width:100%;margin-top:2px}
}

/* Container.container ha 24px padding; su mobile lo abbassiamo */
@media (max-width:560px){
  .container{padding:0 12px 24px;margin:16px auto}
}

/* Tabella chiave/valore (label sinistra, valore destra) usata da
   aia_render_action_readonly() e dalla header email in message.php.
   Su mobile stacka verticale: label sopra (piccola, uppercase),
   valore sotto a tutta larghezza. */
.ai-kv-table th{word-break:break-word}
.ai-kv-table td{word-break:break-word;overflow-wrap:anywhere}
@media (max-width:560px){
  .ai-kv-table, .ai-kv-table tbody, .ai-kv-table tr,
  .ai-kv-table th, .ai-kv-table td{display:block;width:100% !important;max-width:100%;box-sizing:border-box}
  .ai-kv-table th{
    background:transparent !important;
    padding:8px 10px 2px !important;
    font-size:11px !important;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--muted) !important;
    border:none !important;
    width:100% !important;
  }
  .ai-kv-table td{
    padding:0 10px 10px !important;
    border-top:none !important;
    border-bottom:1px solid #eee;
    font-size:13px !important;
  }
  .ai-kv-table tr:last-child td{border-bottom:none}
}

/* HARD-STOP overflow orizzontale: blocca scroll-x sul body/main
   evitando che testi lunghi o card sforino lo schermo.
   Le tabelle che DEVONO scrollare devono stare dentro .ai-table-wrap. */
html,body{max-width:100%;overflow-x:hidden}
main.container{max-width:100%;overflow-x:hidden}
/* Force tutte le pre/code lunghe a wrappare (es. ai_error log) */
pre,code{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere}
/* Anche per i blocchi <em> con summary AI lunghi */
.card em, .card .small em{word-break:break-word;overflow-wrap:anywhere}
/* Long email addresses in <span> non devono sforare */
.ai-card-split__main h3 .small{word-break:break-all;overflow-wrap:anywhere}

/* Destructive actions: outlined in red, filling only on hover. Never an inline
   colour — an inline style would survive the disabled rule below and leave a
   red label on a button you cannot press. */
.btn--danger{background:var(--paper);color:#b03a2e;border:1px solid #e6c3c3}
.btn--danger:hover{background:#b03a2e;color:#fff;border-color:#b03a2e}

/* Buttons the browser disables at runtime — the global submit spinner in
   layout.php disables the submitter while a form is posting. One inert look for
   all of them: no fill, no colour, no shadow. (Actions that simply do not apply
   are not rendered at all, so they never reach this state.) */
button[disabled],.btn[disabled],button:disabled,.btn:disabled,
button[disabled]:hover,.btn[disabled]:hover,button:disabled:hover,.btn:disabled:hover{
  background:transparent;color:#a3abb4;border:1px solid var(--line);
  box-shadow:none;cursor:not-allowed
}

/* Pill colours that the helpers emit but the stylesheet never defined:
   'pending' and 'partially paid' statuses, the invoice document type and the
   "policies out of date" chip were all rendering with no background at all. */
.pill.yellow{background:#fcefc7;color:#8a6100}
.pill.orange{background:#fde4d0;color:#9a4f00}
.pill.purple{background:#ece4fb;color:#5b3fa8}

/* Action console: every record-level action in one bar, always the same order.
   Buttons that do not apply stay in place, greyed out, explaining themselves
   through their tooltip — the bar never changes shape. */
.console{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 18px}
.console form{display:inline-flex;margin:0}
.console__sep{width:1px;align-self:stretch;min-height:22px;background:var(--line)}
@media (max-width:720px){.console__sep{display:none}}

/* Wide tables: a column marked as secondary drops out as soon as the window
   gets tight, so the columns that carry the decision (name, grade, money,
   progress) never get squeezed. Opt-in per <th>/<td> — see Admissions →
   Enrollments, where the submission timestamp uses it. */
@media (max-width: 1280px){
  .col-hide-narrow{display:none !important}
}


/* A required field the person skipped: the browser's own bubble is not always
   shown, so the field says it itself. */
.is-missing,
input.is-missing,
textarea.is-missing {
  outline: 2px solid #b03a2e !important;
  outline-offset: 2px;
  border-color: #b03a2e !important;
}


/* ══ Reading a delivered document ═══════════════════════════════════════════
   These are twenty-page legal texts, read on screen from start to finish. They
   get a reading column of their own — measured, centred, and adjustable — not
   the table-dense treatment the rest of the portal uses.
   The reader's own choices (size, contrast) ride on the wrapper as data
   attributes, so nothing here needs to know they exist.                       */
.doc-read{
  --doc-size:16px;
  --doc-line:1.78;
  --doc-ink:var(--ink);
  --doc-head:var(--isb-dark);
  --doc-rule:var(--line, #e6e9ec);
  transition:background .15s ease;
}
.doc-read[data-size="s"]{ --doc-size:14.5px; --doc-line:1.7 }
.doc-read[data-size="l"]{ --doc-size:18px;   --doc-line:1.85 }
.doc-read[data-size="xl"]{ --doc-size:20.5px; --doc-line:1.9 }
/* High contrast: white on black, the inversion low-vision readers expect.
   The normal ink is already near-black, so "black instead of dark grey" was
   a change nobody could see. This acts on the TEXT PANEL only: the words sit
   on a black panel with heavier letters, white headings and rules, underlined
   links — and the page around it stays as it is. */
.doc-read[data-contrast="high"]{
  --doc-ink:#fff; --doc-head:#fff; --doc-rule:#fff;
}
.doc-read[data-contrast="high"] .doc-body{
  color:#fff; background:#000; font-weight:500;
  padding:18px 22px; border-radius:8px;
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
}
.doc-read[data-contrast="high"] .doc-body--boxed{ border-color:#000; padding:14px 18px }
.doc-read[data-contrast="high"] .doc-body h1,
.doc-read[data-contrast="high"] .doc-body h2,
.doc-read[data-contrast="high"] .doc-body h3,
.doc-read[data-contrast="high"] .doc-body h4{ color:#fff; font-weight:800 }
.doc-read[data-contrast="high"] .doc-body strong,
.doc-read[data-contrast="high"] .doc-body em{ color:#fff }
.doc-read[data-contrast="high"] .doc-body strong{ font-weight:800 }
.doc-read[data-contrast="high"] .doc-body a{ color:#fff; text-decoration:underline; text-underline-offset:2px }
.doc-read[data-contrast="high"] .doc-body table,
.doc-read[data-contrast="high"] .doc-body th,
.doc-read[data-contrast="high"] .doc-body td{ border-color:#fff; background:transparent; color:#fff }
.doc-read[data-contrast="high"] .doc-body hr{ border-color:#fff }
.doc-read[data-contrast="high"] .doc-body mark{ background:#fff; color:#000 }
.doc-read[data-contrast="high"] .doc-body blockquote{ background:#111; border-left-color:#fff; color:#fff }

/* A shared upload has no text beside it, only the PDF. It is read here rather
   than downloaded, so it needs the height of a page, not the height of an
   empty box — and on a phone, a viewport it can actually fill. */
.doc-pdf{
  display:block;
  width:100%;
  height:78vh;
  min-height:420px;
  border:1px solid var(--line, #e6e9ec);
  border-radius:6px;
  background:#fff;
}
@media (max-width: 700px){ .doc-pdf{ height:62vh; min-height:320px } }

.doc-body{
  font-size:var(--doc-size);
  line-height:var(--doc-line);
  color:var(--doc-ink);
  max-width:74ch;
  margin-inline:auto;      /* the column sits in the middle, not against the left edge */
}
.doc-body > *:first-child{ margin-top:0 }
.doc-body p{ margin:0 0 1em }
.doc-body h1,.doc-body h2,.doc-body h3,.doc-body h4{
  color:var(--doc-head); line-height:1.3; font-weight:700;
}
.doc-body h1{ font-size:calc(var(--doc-size) * 1.5);  margin:2em 0 .6em }
.doc-body h2{
  font-size:calc(var(--doc-size) * 1.24); margin:1.9em 0 .6em;
  padding-bottom:.3em; border-bottom:1px solid var(--doc-rule);
}
.doc-body h3{ font-size:calc(var(--doc-size) * 1.08); margin:1.5em 0 .4em }
.doc-body h4{ font-size:var(--doc-size); margin:1.3em 0 .3em }
.doc-body ul,.doc-body ol{ margin:0 0 1em; padding-left:1.6em }
.doc-body li{ margin-bottom:.4em }
.doc-body li > p{ margin-bottom:.4em }
.doc-body table{
  width:100%; border-collapse:collapse; margin:1.2em 0;
  font-size:calc(var(--doc-size) * .92);
}
.doc-body th,.doc-body td{
  border:1px solid var(--doc-rule); padding:8px 10px; text-align:left; vertical-align:top;
  color:var(--doc-ink);
}
.doc-body th{ background:#f5f7f9; font-weight:700 }
.doc-read[data-contrast="high"] .doc-body th{ background:#222 }
.doc-body blockquote{
  margin:1.2em 0; padding:.6em 1.1em;
  border-left:3px solid var(--isb-blue); background:#f7f9fb;
}
.doc-body hr{ border:0; border-top:1px solid var(--doc-rule); margin:2em 0 }
.doc-body a{ color:var(--isb-blue) }

/* Boxed: the same text on the signing page, where it must not push the form
   off the bottom of the screen. */
.doc-body--boxed{
  max-height:340px; overflow-y:auto; max-width:none;
  border:1px solid var(--line); border-radius:8px; padding:14px 18px; background:#fcfdfe;
}

/* The reader's controls. */
.doc-tools{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.doc-tools .doc-tools__label{
  font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600;
}
.doc-tools button{
  border:1px solid var(--line); background:#fff; color:var(--isb-dark);
  border-radius:6px; padding:5px 10px; font-size:12px; font-weight:600; cursor:pointer;
  line-height:1.4;
}
.doc-tools button:hover{ border-color:var(--isb-blue); color:var(--isb-blue) }
.doc-tools button[aria-pressed="true"]{
  background:var(--isb-dark); border-color:var(--isb-dark); color:#fff;
}

/* ═══ Staff Meetings ══════════════════════════════════════════════════════
   Two screens: the list of what has been recorded, and the page that records
   something new. The second is a form that asks for four unrelated things and
   then works for several minutes, which is why it is laid out as numbered
   steps rather than as one tall column of fields — the person filling it in
   should be able to see, at a glance, what is still missing. */

/* ── The list ─────────────────────────────────────────────────────────── */
.min-filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:end;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow);
}
.min-filters label{ margin:0 0 4px }
.min-filters .min-filters__grow{ flex:1 1 220px; min-width:180px }
.min-filters .min-filters__date{ flex:0 0 150px }
.min-filters .form-actions{ margin:0 }

/* A month heading inside the table. The list is read by date far more often
   than by anything else, so the default order gets a spine. */
.min-month td{
  background:#f0f3f6; font-weight:600; color:var(--isb-dark);
  font-size:11px; text-transform:uppercase; letter-spacing:.5px;
  padding:7px 12px !important;
}
.min-row__file{ color:var(--muted); font-size:11px }

/* ── The recording page ───────────────────────────────────────────────── */
.min-step{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; margin-bottom:16px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:34px 1fr; gap:0 16px; align-items:start;
}
.min-step__n{
  grid-row:1 / span 3;
  width:30px; height:30px; border-radius:50%;
  background:var(--isb-dark); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; line-height:1;
}
.min-step.is-done .min-step__n{ background:var(--isb-green) }
/* Everything but the number sits in the second column. Left to auto-placement,
   a step with two hint paragraphs (step 2) pushed its body into the 34px number
   column and the list of people came out one letter wide. */
.min-step__title,.min-step__hint,.min-step__body{ grid-column:2 }
.min-step__title{ margin:4px 0 0; font-size:15px; font-weight:600; color:var(--isb-dark) }
.min-step__hint{ margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.5 }
.min-step__body{ margin-top:12px }
.min-step__body label:first-child{ margin-top:0 }
@media (max-width:600px){
  .min-step{ grid-template-columns:26px 1fr; gap:0 12px; padding:16px }
  .min-step__n{ width:24px; height:24px; font-size:11px }
}

/* Who was in the room.
   Thirty checkboxes in one alphabetical grid is technically a list of people
   and practically a wall — you cannot see who you have already ticked without
   reading all of them, and every name has to carry its own role tag because
   there is nothing else to tell them apart. So: the ticked ones lift out into
   chips at the top, the rest are grouped by role so the tags become headings,
   and the whole thing can be narrowed by typing. */
.min-picked{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; min-height:28px }
.min-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--isb-dark); color:#fff; border:0;
  border-radius:999px; padding:4px 6px 4px 11px;
  font-size:12px; font-weight:500; line-height:1.4; cursor:default;
}
.min-chip__x{
  border:0; background:rgba(255,255,255,.18); color:#fff;
  width:16px; height:16px; border-radius:50%; line-height:1;
  font-size:11px; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.min-chip__x:hover{ background:var(--warn) }
.min-picked__empty{ font-size:12px; color:var(--muted); font-style:italic; align-self:center }

.min-groups{
  max-height:340px; overflow-y:auto; margin-top:10px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fafbfc; padding:4px 10px 10px;
}
.min-group + .min-group{ margin-top:6px }
.min-group[hidden]{ display:none }
.min-group__head{
  display:flex; align-items:center; gap:8px;
  padding:10px 2px 6px; position:sticky; top:0; background:#fafbfc; z-index:1;
  border-bottom:1px solid var(--line); margin-bottom:8px;
}
.min-group__name{
  font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  font-weight:700; color:var(--isb-dark);
}
.min-group__count{
  font-size:10px; color:var(--muted); background:var(--line);
  border-radius:999px; padding:1px 7px; font-weight:600;
}
.min-group__all{
  margin-left:auto; border:0; background:none; padding:2px 4px;
  font-size:11px; font-weight:600; color:var(--isb-blue); cursor:pointer; line-height:1.4;
}
.min-group__all:hover{ text-decoration:underline }
.min-group__people{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:4px }

/* One person. The initials do the work a photograph would: they give the eye
   something to land on so the list stops reading as a paragraph of names. */
.min-person{
  display:flex; align-items:center; gap:9px;
  padding:5px 10px 5px 5px; border-radius:999px; cursor:pointer;
  margin:0; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--ink); line-height:1.3;
  border:1px solid transparent; background:transparent;
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
.min-person:hover{ background:#eef2f6 }
.min-person input{ position:absolute; opacity:0; width:0; height:0 }
.min-person__ini{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:#dde4ea; color:var(--isb-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  transition:background .12s var(--ease), color .12s var(--ease);
}
.min-person__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.min-person.is-on{ background:#e8f1fa; border-color:#b6d3ee }
.min-person.is-on .min-person__ini{ background:var(--isb-blue); color:#fff }
.min-person.is-on .min-person__name{ font-weight:600; color:var(--isb-dark) }
.min-person[hidden]{ display:none }
.min-people__none{ padding:14px 4px; font-size:12px; color:var(--muted); text-align:center }

@media (max-width:600px){
  .min-group__people{ grid-template-columns:1fr }
  .min-groups{ max-height:none }
}

/* The recording itself. A bare file input gives no target to drop onto and no
   sense that a large file is the thing being asked for.

   It has to BE a <label> so that clicking anywhere on it opens the file picker
   without a line of JavaScript — which means it inherits the portal's global
   label rule: 11px, bold, UPPERCASE, block. Right for the little caption above
   a field, wrong for everything inside a drop zone. Undone here rather than by
   making this something other than a label.

   Note what is NOT reset: display. Reverting that would send the label back to
   inline, and an inline box does not hold a border and 26px of padding — the
   whole zone would collapse. It is set explicitly below instead. */
.min-drop, .min-drop *{
  text-transform:none; letter-spacing:normal; font-weight:400;
  font-size:inherit; color:inherit; margin:0;
}
.min-drop{
  display:block;
  border:2px dashed var(--line); border-radius:var(--radius-lg);
  background:#fafbfc; padding:26px 20px; text-align:center; cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.min-drop:hover, .min-drop.is-over{ border-color:var(--isb-blue); background:#f2f7fc }
.min-drop.is-loaded{ border-style:solid; border-color:var(--isb-green); background:#f4fbf3; text-align:left }
.min-drop input[type=file]{ display:none }
.min-drop__icon{ color:var(--isb-blue); margin-bottom:8px }
.min-drop.is-loaded .min-drop__icon{ color:var(--isb-green) }
.min-drop__main{ font-size:14px; font-weight:600; color:var(--isb-dark) }
.min-drop__sub{ font-size:12px; color:var(--muted); margin-top:4px; line-height:1.5 }
.min-drop__warn{ font-size:12px; color:var(--warn); margin-top:6px; line-height:1.5 }
.min-drop__facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px }

/* The bar that says what is about to happen, and starts it. */
.min-launch{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--isb-blue);
  border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow);
}
.min-launch__what{ font-size:13px; color:var(--muted); line-height:1.6 }
.min-launch__what strong{ color:var(--isb-dark) }
.min-launch .form-actions{ margin:0 }

/* ── While it works ───────────────────────────────────────────────────── */
.min-stages{ display:flex; gap:0; flex-wrap:wrap; margin-bottom:20px }
.min-stage{
  flex:1 1 130px; padding:10px 12px 10px 16px; position:relative;
  border-top:3px solid var(--line); font-size:12px; color:var(--muted); line-height:1.4;
}
.min-stage__name{ font-weight:600; display:block; color:inherit }
.min-stage.is-now{ border-top-color:var(--isb-gold); color:var(--isb-dark) }
.min-stage.is-done{ border-top-color:var(--isb-green); color:var(--isb-dark) }
.min-stage.is-now .min-stage__name::after{
  content:''; display:inline-block; width:6px; height:6px; margin-left:6px;
  border-radius:50%; background:var(--isb-gold); animation:min-pulse 1.1s ease-in-out infinite;
}
@keyframes min-pulse{ 0%,100%{opacity:.25} 50%{opacity:1} }

.min-strip{ display:flex; flex-wrap:wrap; gap:4px }
.min-strip .tile{
  width:26px; height:26px; border-radius:var(--radius);
  background:var(--line); transition:background .25s var(--ease);
}
.min-strip .tile[data-state="uploaded"]  { background:#c3ccd6 }
.min-strip .tile[data-state="processing"]{ background:var(--isb-gold) }
.min-strip .tile[data-state="done"]      { background:var(--isb-green) }
.min-strip .tile[data-state="error"]     { background:var(--warn) }
.min-strip__legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11px; color:var(--muted) }
.min-strip__key{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px }

/* ── Reading the minutes ──────────────────────────────────────────────── */
.min-transcript{ max-height:520px; overflow:auto; font-size:14px; line-height:1.7 }
.min-transcript .min-piece-head{ margin:16px 0 4px; font-weight:600; color:var(--muted) }
.min-transcript .min-turn{ margin-bottom:2px }
.min-transcript .min-at{ color:var(--muted); font-variant-numeric:tabular-nums }
.min-topic{ margin-bottom:16px }

/* ══════════════════════════════════════════════════════════════════════════
   NEWSROOM — writing an article
   The page is built around the one thing that matters on it: the text. The
   article gets the wide column and a serif face at reading size; the date, the
   category and the upload box are real but secondary, so they sit beside it
   rather than above it, and the writer scrolls past none of them to start.
   ═════════════════════════════════════════════════════════════════════════ */

.nw-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.nw-top__note{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.nw-top__note svg{flex-shrink:0;color:var(--isb-blue)}

.nw-form{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.nw-form .nw-ai{grid-column:1 / -1}
.nw-main{min-width:0}
.nw-side{display:flex;flex-direction:column;gap:18px;min-width:0;position:sticky;top:18px}
/* The edit page has no wrappers: its two cards ARE the two columns. */
.nw-form--edit > .form-card:last-child{position:sticky;top:18px}

.nw-card{padding:22px}
.nw-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;
  font-weight:700;color:var(--isb-dark);margin:20px 0 7px}
.nw-card > .nw-label:first-child{margin-top:0}
.nw-opt{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted);font-size:11.5px}
.nw-title{font-size:20px!important;font-weight:700;padding:12px 14px!important}

.nw-details{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.nw-details > summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--isb-blue);
  list-style:none;display:flex;align-items:center;gap:6px}
.nw-details > summary::-webkit-details-marker{display:none}
.nw-details > summary::before{content:'▸';font-size:11px;transition:transform .15s var(--ease)}
.nw-details[open] > summary::before{transform:rotate(90deg)}
.nw-details p{margin:10px 0 0}

/* ── The editor ─────────────────────────────────────────────────────────── */

.nw-editor{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  overflow:hidden;box-shadow:var(--shadow)}
.nw-editor:focus-within{border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}

.nw-editor__bar{display:flex;align-items:center;flex-wrap:wrap;gap:3px;padding:8px 10px;
  background:linear-gradient(180deg,#fbfcfd 0%,#f4f6f8 100%);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:2}
.nw-editor__btn{appearance:none;border:1px solid transparent;background:transparent;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--isb-dark);
  padding:6px 10px;border-radius:5px;cursor:pointer;line-height:1.2;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;text-transform:none;letter-spacing:0;
  box-shadow:none;min-height:0}
.nw-editor__btn:hover{background:#fff;border-color:var(--line);transform:none;box-shadow:none}
.nw-editor__btn.is-on{background:var(--isb-blue);border-color:var(--isb-blue);color:#fff}
.nw-editor__btn--bold{font-weight:800;font-size:14px;min-width:32px}
.nw-editor__btn--italic{font-style:italic;font-family:Georgia,serif;font-size:14px;min-width:32px}
.nw-editor__sep{width:1px;height:20px;background:var(--line);margin:0 5px}
.nw-editor__count{margin-left:auto;font-size:11px;color:var(--muted);
  letter-spacing:.3px;padding-right:4px;white-space:nowrap}

.nw-editor__area{min-height:340px;max-height:70vh;overflow-y:auto;padding:24px 26px;
  font-family:Georgia,'Times New Roman',serif;font-size:16.5px;line-height:1.75;color:var(--ink);
  outline:none}
.nw-editor__area.is-empty::before{content:attr(data-placeholder);color:#9aa2aa;font-style:italic;
  display:block;pointer-events:none;position:absolute}
.nw-editor__area{position:relative}
/* The plain-text box below was touched last, so it is what will be saved. */
.nw-editor__area.is-superseded{opacity:.5}

/* The shapes, drawn as the public page draws them — that is the point of the
   whole exercise, so these rules mirror news-article.css deliberately. */
.nw-editor__area > *:first-child{margin-top:0}
.nw-editor__area p{margin:0 0 1.05em}
.nw-editor__area h2{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:800;font-size:1.42em;line-height:1.25;color:var(--isb-dark);margin:1.6em 0 .5em}
.nw-editor__area h3{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-weight:700;font-size:1.14em;line-height:1.3;margin:1.4em 0 .45em}
.nw-editor__area ul,.nw-editor__area ol{margin:0 0 1.05em;padding-left:1.5em}
.nw-editor__area ul{list-style:disc}
.nw-editor__area ol{list-style:decimal}
.nw-editor__area li{margin:0 0 .35em}
.nw-editor__area blockquote{margin:1.3em 0;padding:4px 0 4px 18px;
  border-left:3px solid var(--isb-blue);font-style:italic;color:var(--ink)}
.nw-editor__area hr{border:0;height:1px;background:var(--line);margin:1.8em 0}
.nw-editor__area a{color:var(--isb-blue);text-decoration:underline;text-underline-offset:2px}
.nw-editor__area strong,.nw-editor__area b{font-weight:700}
.nw-editor__area em,.nw-editor__area i{font-style:italic}

.nw-editor__note{margin:10px 12px 0;color:var(--muted);line-height:1.5}
.nw-editor__fallback{margin:12px;border-top:1px dashed var(--line);padding-top:10px}
.nw-editor__fallback > summary{cursor:pointer;font-size:12px;color:var(--muted);
  list-style:none;font-weight:600}
.nw-editor__fallback > summary::-webkit-details-marker{display:none}
.nw-editor__fallback > summary::before{content:'▸ ';font-size:10px}
.nw-editor__fallback[open] > summary::before{content:'▾ '}
.nw-editor__fallback p{color:var(--muted);margin:8px 0}
.nw-editor__fallback code{background:#f2f4f6;border:1px solid var(--line);border-radius:3px;
  padding:1px 5px;font-size:11.5px}
.nw-editor__fallback textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}

/* ── Files chosen but not yet uploaded ──────────────────────────────────── */

.nw-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:12px}
.nw-thumb{border:1px solid var(--line);border-radius:var(--radius);padding:6px;background:#fafbfc;
  text-align:center;font-size:10.5px;overflow:hidden}
.nw-thumb img{width:100%;height:64px;object-fit:cover;border-radius:4px;display:block;margin-bottom:5px}
.nw-thumb__doc{height:64px;display:flex;align-items:center;justify-content:center;margin-bottom:5px;
  background:#eef1f4;border-radius:4px;font-weight:700;font-size:12px;color:var(--isb-dark);letter-spacing:.5px}
.nw-thumb__name{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1080px){
  .nw-form{grid-template-columns:1fr}
  .nw-side,.nw-form--edit > .form-card:last-child{position:static}
}
@media (max-width:720px){
  .nw-editor__area{padding:18px 16px;font-size:16px;min-height:260px}
  .nw-editor__bar{gap:2px;padding:6px}
  .nw-editor__btn{padding:6px 8px;font-size:12px}
  .nw-editor__count{display:none}
}

/* The verdict bar: is this a draft or has somebody signed it off. Sits above
   everything else on the page because it changes how the rest should be read. */
.min-verdict{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--isb-gold);
  border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:24px; box-shadow:var(--shadow);
}
.min-verdict.is-approved{ border-left-color:var(--isb-green) }
.min-verdict strong{ color:var(--isb-dark) }
.min-verdict__act{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 }
.min-verdict__act .checkbox-label{ margin:0; font-size:12px }

.min-audio{ margin:10px 0 }
.min-audio__label{ margin-bottom:4px; color:var(--muted) }
.min-audio audio{ width:100%; max-width:520px; display:block }

/* The moment the bytes are all at the school, and the page stops mattering. */
.min-free{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#f4fbf3; border:1px solid #cfe8cb; border-left:3px solid var(--isb-green);
  border-radius:var(--radius-lg); padding:14px 18px; margin-top:18px;
}
.min-free strong{ color:var(--isb-dark) }
.min-free .form-actions{ margin:0 }

/* Where the recording comes from: a file already made, or this microphone. */
.min-source{ display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid var(--line) }
.min-source__tab{
  border:0; background:none; cursor:pointer;
  padding:8px 14px; margin-bottom:-1px;
  font-size:13px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; line-height:1.4;
}
.min-source__tab:hover{ color:var(--isb-dark) }
.min-source__tab.is-on{ color:var(--isb-dark); border-bottom-color:var(--isb-blue) }

/* The recorder.
   It used to be a column of centred paragraphs with the two longest at the
   bottom, so the part that does something was the smallest thing on it. Now the
   transport reads left to right like any recorder — light, clock, level — the
   text is ranged left where prose belongs, and the standing advice is folded
   away until somebody wants it. */
.min-rec{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:#fafbfc; padding:18px 20px;
}
.min-rec__transport{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.min-rec__dot{
  flex:0 0 auto; width:11px; height:11px; border-radius:50%;
  background:var(--line); box-shadow:0 0 0 3px rgba(0,0,0,.03);
}
.min-rec.is-recording .min-rec__dot{
  background:var(--warn); box-shadow:0 0 0 3px rgba(192,57,43,.14);
  animation:min-pulse 1.1s ease-in-out infinite;
}
.min-rec__clock{
  flex:0 0 auto; font-size:30px; font-weight:600; color:var(--isb-dark);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:.5px;
}
.min-rec.is-recording .min-rec__clock{ color:var(--warn) }
.min-rec__level{
  flex:1 1 auto; height:6px; border-radius:3px; background:var(--line); overflow:hidden; min-width:80px;
}
.min-rec__level span{
  display:block; height:100%; width:0%; background:var(--isb-green);
  transition:width .08s linear;
}
.min-rec .form-actions{ margin-top:14px }
.min-rec__total{ font-size:12px; color:var(--muted); font-weight:600; margin-top:6px }
.min-rec__note{
  font-size:12px; color:var(--muted); line-height:1.55; margin:12px 0 0; max-width:62ch;
}
.min-rec__note.is-bad{ color:var(--warn); font-weight:600 }

/* The standing advice: true every time, needed once. */
.min-rec__more{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line) }
.min-rec__more summary{
  cursor:pointer; font-size:12px; font-weight:600; color:var(--isb-blue);
  list-style:none; display:inline-flex; align-items:center; gap:6px;
}
.min-rec__more summary::-webkit-details-marker{ display:none }
.min-rec__more summary::before{
  content:'▸'; font-size:10px; transition:transform .15s var(--ease);
}
.min-rec__more[open] summary::before{ transform:rotate(90deg) }
.min-rec__more summary:hover{ text-decoration:underline }
.min-rec__more p{
  font-size:12px; color:var(--muted); line-height:1.6; margin:10px 0 0; max-width:62ch;
}
.min-rec__more strong{ color:var(--isb-dark) }

/* The parts recorded so far. Ranged left with everything else, not floated in
   the middle of the panel. */
.min-parts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px }

/* The one control on the meeting page that destroys something. Set apart at the
   bottom, in the colour the portal already uses for danger, so it is never
   somewhere the eye lands on the way to something else. */
.min-danger{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:32px; padding:16px 20px;
  border:1px solid #e6c3c3; border-left:3px solid #b03a2e;
  border-radius:var(--radius-lg); background:#fdf7f7;
}
.min-danger strong{ color:#8c2f26 }
.min-danger .small{ color:var(--muted); margin-top:2px; max-width:560px }
.min-danger form{ margin:0 }

/* The parts recorded so far. A meeting that had to be restarted is still one
   meeting, and this is where that is made visible: a list that grows, each row
   droppable on its own, with the running total underneath. */
.min-part{
  display:inline-flex; align-items:center; gap:6px;
  background:#e8f1fa; border:1px solid #b6d3ee; color:var(--isb-dark);
  border-radius:999px; padding:4px 6px 4px 12px; font-size:12px; font-weight:600; line-height:1.4;
}
.min-part__x{
  border:0; background:rgba(14,59,94,.12); color:var(--isb-dark);
  width:16px; height:16px; border-radius:50%; padding:0; line-height:1;
  font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.min-part__x:hover{ background:var(--warn); color:#fff }

/* Something recorded in this browser that never reached the school. Offered on
   the way in, never restored silently: what is kept may be yesterday's meeting. */
.min-recover{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:#fff8e8; border:1px solid #e8d5a8; border-left:3px solid var(--isb-gold);
  border-radius:var(--radius-lg); padding:14px 18px; margin-bottom:20px;
}
.min-recover strong{ color:var(--isb-dark) }
.min-recover .small{ color:var(--muted) }
.min-recover .form-actions{ margin:0 }

/* ── Password field with a reveal button ─────────────────────
   Il wrapper lo crea app.js attorno a ogni <input type=password>: non ha
   margini propri, cosi' il campo resta esattamente dove stava. */
.pwd-field{position:relative;display:block}
.pwd-field>input{padding-right:44px}
.pwd-field__toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);min-height:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:transparent;border:none;border-radius:var(--radius);color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.pwd-field__toggle:hover{background:rgba(0,0,0,.05);color:var(--isb-dark)}
.pwd-field__toggle.is-on{color:var(--isb-blue)}
.pwd-field__toggle svg{width:18px;height:18px}


/* ===========================================================================
   Pick list — the shared "tick some of these" control.
   ---------------------------------------------------------------------------
   Born from the club form, where grades and children were two bare grids of
   checkboxes: forty boxes with nothing to tell them apart, no way to see what
   you had already ticked without re-reading the lot, and a filter that hid
   ticked rows so the form looked wrong while being right.

   The fix is the same one the minutes attendee picker uses, generalised:
   what is ticked lifts out into chips at the top, the rest scrolls in a
   bordered box that can be narrowed by typing, and optional group headings
   carry a "select all". Filtering hides rows, never unticks them — the chips
   above keep saying who is in.
   =========================================================================== */
.pick{ margin:0 0 4px }

/* What is currently ticked, always visible above the fold of the list. */
.pick__picked{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; min-height:28px; align-items:center }
.pick__chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--isb-dark); color:#fff; border:0;
  border-radius:999px; padding:4px 6px 4px 11px;
  font-size:12px; font-weight:500; line-height:1.4;
  max-width:100%;
}
.pick__chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pick__chip-x{
  flex:0 0 auto;
  border:0; background:rgba(255,255,255,.18); color:#fff;
  width:16px; height:16px; border-radius:50%; line-height:1;
  font-size:11px; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
}
.pick__chip-x:hover{ background:var(--warn) }
.pick__empty{ font-size:12px; color:var(--muted); font-style:italic }

.pick__filter{ margin:0 0 8px !important }

.pick__box{
  max-height:260px; overflow-y:auto;
  border:1px solid var(--line,#e3e3e3); border-radius:var(--radius,8px);
  background:#fafbfc; padding:6px 10px 10px;
}
.pick__box--tall{ max-height:340px }

.pick__group + .pick__group{ margin-top:6px }
.pick__group[hidden]{ display:none }
.pick__group-head{
  display:flex; align-items:center; gap:8px;
  padding:8px 2px 6px; position:sticky; top:-6px; z-index:1;
  background:#fafbfc; border-bottom:1px solid var(--line,#e3e3e3); margin-bottom:8px;
}
.pick__group-name{
  font-size:10px; text-transform:uppercase; letter-spacing:.6px;
  font-weight:700; color:var(--isb-dark);
}
.pick__group-count{
  font-size:10px; color:var(--muted); background:var(--line,#e3e3e3);
  border-radius:999px; padding:1px 7px; font-weight:600;
}
.pick__group-all{
  margin-left:auto; border:0; background:none; padding:2px 4px;
  font-size:11px; font-weight:600; color:var(--isb-blue); cursor:pointer; line-height:1.4;
}
.pick__group-all:hover{ text-decoration:underline }

.pick__rows{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px }
.pick__rows--wide{ grid-template-columns:1fr }

/* One row. The initials give the eye something to land on so a column of
   names stops reading as a paragraph. */
.pick__row{
  display:flex; align-items:center; gap:9px;
  padding:5px 10px 5px 5px; border-radius:999px; cursor:pointer;
  margin:0 !important; font-size:13px; font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--ink); line-height:1.3;
  border:1px solid transparent; background:transparent;
  transition:background .12s var(--ease,ease), border-color .12s var(--ease,ease);
}
.pick__row:hover{ background:#eef2f6 }
.pick__row[hidden]{ display:none }
.pick__row input{ position:absolute; opacity:0; width:0; height:0 }
.pick__ini{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:#dde4ea; color:var(--isb-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; letter-spacing:.3px;
  transition:background .12s var(--ease,ease), color .12s var(--ease,ease);
}
.pick__tick{
  flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  border:1.5px solid #c3ccd6; background:#fff;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:11px; font-weight:700; line-height:1;
  transition:background .12s var(--ease,ease), border-color .12s var(--ease,ease);
}
.pick__tick::after{ content:'✓'; opacity:0; transition:opacity .12s var(--ease,ease) }
.pick__label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pick__meta{
  margin-left:auto; padding-left:8px; white-space:nowrap;
  font-size:11px; color:var(--muted);
}
.pick__row.is-on{ background:#e8f1fa; border-color:#b6d3ee }
.pick__row.is-on .pick__ini{ background:var(--isb-blue); color:#fff }
.pick__row.is-on .pick__tick{ background:var(--isb-blue); border-color:var(--isb-blue) }
.pick__row.is-on .pick__tick::after{ opacity:1 }
.pick__row.is-locked{ opacity:.55; cursor:not-allowed }
.pick__row.is-locked:hover{ background:transparent }

.pick__none{ font-size:12px; color:var(--muted); font-style:italic; margin:8px 2px 2px }
/* One-per-line rows carry longer meta (a family's children): clip it rather
   than let it stretch the row. */
.pick__rows--wide .pick__label{ flex:0 1 auto; min-width:120px }
.pick__rows--wide .pick__meta{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:right }

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


/* ── CRM: fase, scadenza ─────────────────────────────────────────────
   La fase e' un menu con sette voci, non piu' testo libero: si legge in
   un colpo d'occhio e ci si puo' filtrare. Il colore accompagna la
   famiglia mentre si avvicina, e diventa grigio quando la pratica chiude. */
.cdash-stage{font-size:11px;font-weight:600;border-radius:10px;padding:3px 6px;
  border:1px solid transparent;max-width:150px;cursor:pointer}
.cdash-stage.grey{background:#f3f4f6;color:#4b5563;border-color:#e5e7eb}
.cdash-stage.blue{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
.cdash-stage.purple{background:#f3e8ff;color:#6b21a8;border-color:#e9d5ff}
.cdash-stage.orange{background:#ffedd5;color:#9a3412;border-color:#fed7aa}
.cdash-stage.green{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.cdash-stage.red{background:#fee2e2;color:#991b1b;border-color:#fecaca}

/* L'etichetta che la scheda portava prima resta visibile ma in secondo
   piano: serve a ritrovarsi, non a decidere. */
.crm-oldstatus{font-size:10px;color:#9ca3af;margin-top:3px;line-height:1.3;
  overflow-wrap:anywhere;max-width:150px}

/* La scadenza si modifica dalla lista. Il bordo colorato dice da solo se
   e' passata, senza dover leggere la data. */
/* La riga 150 di questo foglio veste TUTTI i campi del portale, compreso
   input[type=date], con 16px di testo e 10px di imbottitura: giusto in un
   modulo, enorme dentro una griglia. E quel selettore pesa piu' di una
   classe da sola, quindi vinceva lui e il campo restava gigante, con la
   data tagliata prima dell'anno. Qui si nomina anche il tipo, cosi' la
   regola della griglia pesa di piu' e vince. */
input[type=date].cdash-qdate{font-size:11px;line-height:1.2;padding:3px 4px;
  border:1px solid #d1d5db;border-radius:6px;color:#374151;background:#fff;
  width:100%;min-width:0;box-sizing:border-box;font-family:inherit}
input[type=date].cdash-qdate::-webkit-calendar-picker-indicator{padding:0;margin-left:2px;opacity:.55}
input[type=date].cdash-qdate.due-overdue{border-color:#dc2626;background:#fef2f2;color:#991b1b;font-weight:600}
input[type=date].cdash-qdate.due-today{border-color:#ea580c;background:#fff7ed;color:#9a3412;font-weight:600}
input[type=date].cdash-qdate.due-soon{border-color:#ca8a04;background:#fefce8;color:#854d0e}
input[type=date].cdash-qdate.due-later{border-color:#d1d5db}
/* Il contrassegno dei giorni va SOTTO il campo: accanto rubava larghezza
   proprio alla data. */
.crm-due{display:inline-block;margin-left:0;font-size:10px;font-weight:700;
  padding:1px 6px;border-radius:8px;white-space:nowrap}
.crm-due.overdue{background:#fee2e2;color:#991b1b}
.crm-due.today{background:#ffedd5;color:#9a3412}
.crm-due.soon{background:#fef9c3;color:#854d0e}

/* Con dieci colonne la griglia non ci sta piu' su uno schermo stretto. Meglio
   farla scorrere che schiacciarla: una data tagliata a meta' ("28,") non e'
   un'informazione. */
.crm-grid-wide{min-width:1140px}
.crm-due-cell, .crm-updated-cell{white-space:nowrap}
.crm-due-cell .crm-due{margin-left:0;margin-top:4px;display:block;width:fit-content}
/* Da quanto non si fanno vivi: sotto la data, piccolo, per leggere la riga
   senza fare il conto a mente. */
.crm-ago{font-size:10px;color:#9ca3af;margin-top:2px}

/* ── CRM: nome + indirizzo, e le due date affiancate ─────────────────
   Sotto il nome sta l'indirizzo, non il figlio: e' quello su cui si agisce.
   E' un bottone perche' apre la finestra di scrittura, ma non deve sembrare
   un bottone: la regola generale li fa maiuscoli e in blocco. */
.crm-mail{background:none;border:0;padding:0;margin:2px 0 0;font:inherit;font-size:11px;
  text-transform:lowercase;letter-spacing:0;color:var(--isb-blue);text-decoration:underline;
  text-align:left;word-break:break-all;cursor:pointer;display:block;line-height:1.3}
.crm-mail:hover{color:var(--isb-dark)}
.crm-datelab{display:inline-block;width:30px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.06em;color:#9ca3af}
.crm-when{display:flex;align-items:center;gap:6px;margin-bottom:4px;flex-wrap:wrap}
.crm-when .crm-due{margin:0}

/* La riga per farsi scrivere la email dall'AI: sta sopra oggetto e testo,
   perche' e' il punto da cui si parte quando non si ha voglia di scrivere. */
.pe-ai{border:1px dashed var(--line);border-radius:var(--radius);padding:10px 12px;margin:0 0 14px;background:#fbfcfe}
.pe-ai-row{display:flex;gap:8px;align-items:stretch}
.pe-ai-row input[type=text]{flex:1;margin:0;font-size:13px;padding:8px 10px}
.pe-ai-row .btn{white-space:nowrap;padding:8px 14px}

/* ── Photo archive: who is in it, where it went ──────────── */
/* The state of "who is in the picture" is said with a SHAPE and a WORD, never
   with a colour alone: dashed = nobody has looked, outlined = looked and
   nobody recognisable, filled = students recorded. */
.ph-chip{display:inline-flex;align-items:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:9px;line-height:1.6;border:1.5px solid var(--isb-blue);color:var(--isb-blue);background:transparent}
.ph-chip--empty{border-style:dashed;color:var(--muted);border-color:#b9bec7}
.ph-chip--outlined{border-style:solid}
.ph-chip--filled{background:var(--isb-blue);color:#fff}
.ph-card__people{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px}
.ph-card__uses{font-size:11px;color:var(--muted);white-space:nowrap}
.ph-detail{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.ph-tagged{display:flex;flex-wrap:wrap;gap:6px}
.ph-tagged__one{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:14px;background:#e6f0fa;color:var(--isb-blue);text-decoration:none}
.ph-tagged__one:hover{background:#d5e6f8}
.ph-picker{max-height:420px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:6px 10px;background:var(--paper)}
.ph-picker__grade{margin-bottom:8px}
.ph-picker__head{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 0 2px;position:sticky;top:0;background:var(--paper)}
.ph-picker__one{display:flex;align-items:center;gap:8px;padding:4px 2px;margin:0;font-size:13px;cursor:pointer;border-radius:4px}
.ph-picker__one:hover{background:#f2f5f9}
.ph-picker__one input{margin:0;width:auto;min-height:0}
.ph-picker__one small{color:var(--muted);font-size:11px}
.ph-nobody{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:13px;cursor:pointer}
.ph-nobody input{margin:3px 0 0;width:auto;min-height:0}
.ph-uses{width:100%;border-collapse:collapse;font-size:12.5px}
.ph-uses th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
.ph-uses td{padding:6px;border-bottom:1px solid #eef0f3;vertical-align:top}
.ph-use-form{display:grid;grid-template-columns:1.2fr 2fr 1fr auto;gap:10px;align-items:end}
.ph-use-form label{margin-top:0}
.ph-use-form input,.ph-use-form select{margin:0}
@media (max-width:900px){.ph-detail{grid-template-columns:1fr}.ph-use-form{grid-template-columns:1fr}}

/* ── Photo archive: family gallery & requests ────────────── */
.fam-rules p[lang]{font-size:15px;line-height:1.6;color:var(--isb-dark);margin:0 0 12px;padding-left:14px;border-left:3px solid var(--isb-blue)}
.fam-rules p[lang=en]{border-left-color:#b9bec7;color:#3c4653}
.fam-rules__why{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.fam-accept{margin-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.fam-accept__box{display:flex;align-items:flex-start;gap:10px;font-size:15px;font-weight:600;color:var(--isb-dark);cursor:pointer;margin:0}
.fam-accept__box input{margin:4px 0 0;width:auto;min-height:0;transform:scale(1.25)}
.fam-view{max-width:960px}
.fam-report textarea{margin-bottom:8px}
.rep__head{display:flex;gap:14px;align-items:flex-start}
.rep__thumb{width:120px;height:90px;object-fit:cover;border-radius:var(--radius);background:#eef0f3;display:block;flex:0 0 auto}
.rep__main{flex:1 1 auto;min-width:0}
.rep__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:600}
.rep__title a{color:var(--isb-dark);text-decoration:none}
.rep__title a:hover{text-decoration:underline}
.rep__meta{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.rep__due{font-weight:600}
.rep--soon .rep__due{color:#8a6100}
.rep--late .rep__due{color:var(--warn)}
.rep--soon{border-left:4px solid #d69e2e}
.rep--late{border-left:4px solid var(--warn)}
.rep__reason{font-size:13px;color:var(--isb-dark);margin-top:8px;line-height:1.5}
.rep__note{font-size:12.5px;color:var(--isb-dark);margin-top:6px}
.rep__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.rep__resolve{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:8px}
.rep__resolve label{margin:0 0 4px;flex:1 1 100%}
.rep__resolve input{flex:1 1 320px;margin:0}
.fam-child{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.fam-child__name{margin:0;font-size:16px;color:var(--isb-dark);display:inline-flex;align-items:center;gap:6px}
.fam-child__count{font-size:12px;color:var(--muted)}
.fam-child ~ .ph-grid{margin-bottom:26px}

/* ── Lunch module: the day/month toolbar and the kitchen counts table ──
   Shared by register, daily menu, payments and reports (lunch_toolbar_day /
   lunch_toolbar_month in layout.php). */
.lunch-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 18px}
.lunch-toolbar form{display:flex;align-items:center;gap:8px;margin:0}
.lunch-toolbar select,.lunch-toolbar input[type=date]{margin:0;width:auto;min-width:130px}
.lunch-toolbar .btn,.lunch-toolbar button{margin:0}
.lunch-toolbar__step svg{width:14px;height:14px}
.lunch-toolbar__step--next svg{transform:scaleX(-1)}
.lunch-toolbar__label{font-weight:600;color:var(--isb-dark);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lunch-toolbar__spacer{flex:1}
.lunch-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.lunch-card-head h3{margin:0}
.lunch-counts td.num,.lunch-counts th.num{text-align:right;white-space:nowrap;width:90px}
.lunch-counts tr.is-sub td{color:var(--muted);font-size:12px;padding-top:4px;padding-bottom:4px}
.lunch-counts tr.is-sub td:first-child{padding-left:28px}
.lunch-counts tr.is-total td{font-weight:700;color:var(--isb-dark);border-top:2px solid var(--isb-dark)}
.lunch-counts tr.is-quiet td{color:var(--muted)}
.lunch-answers{width:100%;border-collapse:collapse}
.lunch-answers td{padding:6px 4px;border-bottom:1px solid var(--line)}
.lunch-answers td.num{text-align:right;font-weight:700;color:var(--isb-dark);width:60px}
.lunch-answers tr.is-total td{border-bottom:none;font-weight:700;color:var(--isb-dark)}
@media (max-width:700px){.lunch-toolbar__label{white-space:normal}}

/* ── Mailbox (myarea/mailbox) ──────────────────────────────────────────── */
.mbx-page{max-width:none}
/* The toolbar band every mail client has: icon over label, flat, one row */
.mbx-tb{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap;padding:6px 8px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow)}
.mbx-tb__btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:58px;padding:6px 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--isb-dark);font:inherit;font-size:10.5px;font-weight:600;letter-spacing:.2px;text-decoration:none;cursor:pointer;line-height:1;transition:background .12s,border-color .12s}
.mbx-tb__btn svg{width:18px;height:18px;vertical-align:0}
.mbx-tb__btn:hover{background:#eef3f8;border-color:#d8e2ec;color:var(--isb-dark)}
.mbx-tb__btn--primary{background:var(--isb-blue);color:#fff}
.mbx-tb__btn--primary:hover{background:var(--isb-dark);color:#fff;border-color:transparent}
.mbx-tb__btn--danger:hover{background:#fbe1de;border-color:#f1c2bd;color:var(--warn)}
.mbx-tb__btn--ai{color:#6b3fa0}
.mbx-tb__btn--ai:hover{background:#f1eaf9;border-color:#dccbee;color:#6b3fa0}
.mbx-tb__btn.is-off{opacity:.38;cursor:not-allowed}
.mbx-tb__sep{width:1px;background:var(--line);margin:4px 6px}
.mbx-tb__grow{flex:1}
.mbx-tb__form{display:contents}
.mbx-tb input[type=file][hidden]{display:none}
.mbx-search{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:20px;background:#fafbfc;padding:0 4px 0 12px;min-width:220px;max-width:340px;flex:1;align-self:center}
.mbx-search input[type=search]{border:0;background:transparent;font-size:13px;padding:8px 4px;flex:1;min-width:0;box-shadow:none}
.mbx-search input[type=search]:focus{outline:none;box-shadow:none}
.mbx-search__go,.mbx-search__clear{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none}
.mbx-search__go:hover,.mbx-search__clear:hover{background:#e6ecf2;color:var(--isb-dark)}
.mbx-status{display:flex;align-items:center;gap:12px;padding:6px 14px;background:#f7f9fb;border:1px solid var(--line);border-top:0;font-size:12px}
.mbx-status__grow{flex:1}
.mbx-pager{display:inline-flex;gap:4px}
.mbx-pager__btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--isb-dark)}
.mbx-pager__btn:hover{background:#eef3f8}
.mbx-pager__btn.is-off{opacity:.35;pointer-events:none}
.mbx-empty{padding:48px 20px;text-align:center;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius)}
.mbx-empty svg{opacity:.35}
.mbx-empty p{margin:10px 0 0}
/* The list */
.mbx-list{padding:0;border-top:0;border-radius:0 0 var(--radius) var(--radius)}
.mbx-table{border-radius:0}
.mbx-table th{background:#f0f3f6;color:var(--isb-dark);font-size:10.5px;padding:7px 10px;border-bottom:1px solid var(--line)}
.mbx-table td{padding:7px 10px;font-size:13px;vertical-align:middle;border-bottom:1px solid #eef1f4}
.mbx-sort{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.mbx-sort.is-on{color:var(--isb-blue)}
.mbx-sort-idle{opacity:.35}
.mbx-col-check{width:34px;text-align:center}
.mbx-col-avatar{width:40px;padding-right:0!important}
.mbx-col-who{width:24%;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbx-col-subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:0}
.mbx-col-att{width:30px;text-align:center;color:var(--muted)}
.mbx-col-size{width:70px;white-space:nowrap;text-align:right;color:var(--muted);font-size:12px}
.mbx-col-date{width:130px;white-space:nowrap;text-align:right;color:var(--muted);font-size:12px}
.mbx-row{cursor:pointer}
.mbx-row a{color:inherit;text-decoration:none}
.mbx-row.is-checked td{background:#eaf2fb}
.mbx-row.is-unread td{background:#fff}
.mbx-row.is-unread .mbx-who__name,.mbx-row.is-unread .mbx-col-subject a{font-weight:700;color:var(--isb-dark)}
.mbx-row.is-unread .mbx-col-date{color:var(--isb-blue);font-weight:600}
.mbx-row:not(.is-unread) td{background:#fafbfc}
.mbx-row:hover td{background:#f0f4f8}
.mbx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--isb-blue);margin-right:6px;vertical-align:1px}
.mbx-who__name{vertical-align:middle}
.mbx-who__mail{color:var(--muted);font-size:11.5px;margin-left:6px;font-weight:400}
.mbx-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.3px}
.mbx-avatar--0{background:var(--isb-blue, #1a73c1)}.mbx-avatar--1{background:#2e7d32}.mbx-avatar--2{background:#8e6500}.mbx-avatar--3{background:#872d2d}
.mbx-avatar--4{background:#5b4fa0}.mbx-avatar--5{background:#0e7c86}.mbx-avatar--6{background:#9a4f00}.mbx-avatar--7{background:#4a5568}
.mbx-tag{display:inline-flex;align-items:center;gap:3px;margin-left:8px;padding:1px 7px;border:1px solid var(--line);border-radius:10px;font-size:10.5px;color:var(--muted);vertical-align:1px}
.mbx-tag--draft{border-style:dashed;border-color:#b98c00;color:#8e6500;background:#fffaf0}
/* Reading */
.mbx-read__card{background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:18px 22px}
.mbx-read__subject{margin:0 0 14px;font-size:19px;color:var(--isb-dark);line-height:1.3;word-wrap:break-word}
.mbx-read__head{display:flex;gap:12px;align-items:flex-start;padding:0 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.mbx-read__head .mbx-avatar{width:40px;height:40px;font-size:14px;flex-shrink:0}
.mbx-read__people{flex:1;min-width:0;font-size:13px}
.mbx-read__from{margin-bottom:2px}
.mbx-read__line{color:var(--muted);font-size:12.5px;word-break:break-word}
.mbx-read__line span{display:inline-block;min-width:22px;color:var(--muted)}
.mbx-read__date{color:var(--muted);font-size:12px;white-space:nowrap}
.mbx-attachments{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fafbfc;margin:0 0 14px}
.mbx-attachment{display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:12.5px;text-decoration:none;color:var(--isb-dark)}
.mbx-attachment:hover{border-color:var(--isb-blue)}
.mbx-blocked{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;margin:0 0 12px;font-size:12.5px;background:#fdf6e3;border-left:4px solid #d69e2e;border-radius:var(--radius)}
.mbx-frame{width:100%;min-height:160px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.mbx-modal .modal-body{padding:16px 18px}
.mbx-modal .mbx-tb{border-radius:var(--radius) var(--radius) 0 0}
/* Compose */
.mbx-compose{padding:0!important}
.mbx-compose.form-card{overflow:hidden}
.mbx-compose__from{align-self:center;padding-right:6px}
.mbx-compose__fields{border:1px solid var(--line);border-top:0;background:var(--paper)}
.mbx-field{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #eef1f4}
.mbx-field label{margin:0;min-width:58px;font-size:11px}
.mbx-field input[type=text]{border:0;background:transparent;border-radius:0;padding:10px 0;font-size:14px;box-shadow:none}
.mbx-field input[type=text]:focus{outline:none;box-shadow:none}
.mbx-field__toggle{border:0;background:transparent;color:var(--isb-blue);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.mbx-field--cc{display:none}
.mbx-field--cc.is-open{display:flex}
.mbx-field--suggest{position:relative}
.mbx-field__toggle--staff{display:inline-flex;align-items:center;gap:4px}
.mbx-suggest{position:absolute;left:82px;right:14px;top:100%;z-index:30;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(14,59,94,.14);overflow:hidden}
.mbx-suggest__item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;border:0;background:transparent;text-align:left;padding:7px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--isb-dark)}
.mbx-suggest__item span{font-size:11.5px;color:#6b7280}
.mbx-suggest__item.is-active,.mbx-suggest__item:hover{background:#eef4fb}
.mbx-staff{border-bottom:1px solid #eef1f4;background:#fafbfc;padding:10px 14px}
.mbx-staff__head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mbx-staff__head input[type=search]{flex:1 1 200px;min-width:0}
.mbx-staff__head select{width:auto}
.mbx-staff__all{display:inline-flex;align-items:center;gap:5px;margin:0;font-size:12px;white-space:nowrap}
.mbx-staff__list{max-height:260px;overflow:auto;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:#fff}
.mbx-staff__row{display:flex;align-items:center;gap:10px;margin:0;padding:7px 10px;border-bottom:1px solid #f0f2f5;cursor:pointer;font-size:13px}
.mbx-staff__row:last-child{border-bottom:0}
.mbx-staff__row:hover{background:#f5f8fc}
.mbx-staff__who{display:flex;flex-direction:column;min-width:0;flex:1}
.mbx-staff__who span{font-size:11.5px;color:#6b7280;overflow:hidden;text-overflow:ellipsis}
.mbx-staff__job{font-size:11.5px;color:#6b7280;text-align:right}
.mbx-staff__none{margin:0;padding:10px}
.mbx-staff__foot{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
@media (max-width:600px){.mbx-staff__job{display:none}.mbx-suggest{left:14px}}
.mbx-editor{border:1px solid var(--line);border-top:0;background:#fafbfc;overflow:hidden}
.mbx-editor__bar{display:flex;gap:2px;align-items:center;padding:5px 8px;border-bottom:1px solid var(--line);background:#f0f3f6;flex-wrap:wrap}
.mbx-editor__bar button,.mbx-editor__color{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;border-radius:6px;min-width:28px;height:28px;padding:0 6px;font:inherit;font-size:13px;cursor:pointer;color:var(--isb-dark)}
.mbx-editor__bar button:hover,.mbx-editor__color:hover{background:#fff;border-color:var(--line)}
.mbx-editor__bar select{width:auto;font-size:12px;padding:4px 6px;height:28px;background:#fff;border-radius:6px}
.mbx-editor__color{position:relative;gap:2px}
.mbx-editor__color input[type=color]{width:14px;height:14px;border:0;padding:0;background:none;cursor:pointer}
.mbx-editor__sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.mbx-editor__area{min-height:260px;padding:14px 16px;outline:none;font-size:14px;line-height:1.5;background:#fff;overflow:auto;font-family:Arial,Helvetica,sans-serif}
.mbx-editor__area:focus{box-shadow:inset 0 0 0 2px rgba(26,115,193,.2)}
.mbx-editor__area blockquote{margin:6px 0;padding-left:12px;border-left:2px solid #c9c9c9;color:#555}
.mbx-editor__area img{max-width:100%;height:auto}
.mbx-compose__foot{padding:10px 14px 14px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);background:var(--paper)}
.mbx-compose__foot .small{margin:4px 0}
.mbx-files{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.mbx-files__chip{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--line);border-radius:10px;font-size:12px;background:#fafbfc}
.mbx-files__chip.is-over{border-color:var(--warn);color:var(--warn);background:var(--danger-bg)}
/* The mailboxes of one account, at the top of every Mailbox screen. Drawn only
   from two mailboxes up (mailbox_switcher_html), so a teacher never sees it.
   Which one is open is said with a shape and a word, not with a coloured edge:
   a tint is exactly the difference that disappears on a bad screen, in bright
   light, or for somebody who does not see that colour. */
.mbx-boxes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mbx-boxes__box{display:flex;flex-direction:column;gap:1px;min-width:150px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fafbfc;color:var(--isb-dark);text-decoration:none;line-height:1.3}
.mbx-boxes__box:hover{background:#eef3f8}
.mbx-boxes__box.is-open{background:var(--isb-dark);border-color:var(--isb-dark);color:#fff;box-shadow:var(--shadow)}
.mbx-boxes__box.is-open:hover{background:var(--isb-dark)}
.mbx-boxes__box.is-broken{border-style:dashed}
.mbx-boxes__name{font-weight:600;font-size:13px}
.mbx-boxes__addr{font-size:11px;opacity:.75;word-break:break-all}
.mbx-boxes__state{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.mbx-boxes .pill{align-self:flex-start;margin-top:3px}
@media (max-width:640px){.mbx-boxes__box{min-width:0;flex:1 1 100%}}
.mbx-signature-preview{margin-top:10px}
.mbx-signature-preview__box{margin-top:6px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--radius);background:#fff}
/* Help me write */
.mbx-ai__modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.mbx-ai__mode{display:inline-flex;align-items:center;gap:6px;margin:0;padding:6px 10px;border:1px solid var(--line);border-radius:20px;font-size:12px;text-transform:none;letter-spacing:0;cursor:pointer;background:#fafbfc}
.mbx-ai__mode:has(input:checked){border-color:#6b3fa0;background:#f1eaf9;color:#6b3fa0}
.mbx-ai__mode input{margin:0}
.mbx-ai__result{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.mbx-ai__preview{margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:14px;line-height:1.5;max-height:40vh;overflow:auto;font-family:Arial,Helvetica,sans-serif}
@media (max-width:820px){
  .mbx-tb__btn span{display:none}
  .mbx-tb__btn{min-width:38px}
  .mbx-col-size,.mbx-col-att,.mbx-col-avatar{display:none}
  .mbx-col-who{width:34%}
  .mbx-col-date{width:96px}
  .mbx-read__card{padding:14px}
  .mbx-read__head{flex-wrap:wrap}
  .mbx-search{min-width:140px}
}

/* ===========================================================================
   USER MANUAL  (myarea/help)
   ---------------------------------------------------------------------------
   Two readers, one stylesheet. On screen it is a chapter with a contents
   column beside it; on paper — and the PDF handed to the school is nothing but
   this printed — the columns fold away and the page numbers itself. Which is
   why the print rules live here next to the screen ones rather than in a file
   of their own: change a colour in one and forget the other, and the manual
   people actually hold in their hands is the one that goes wrong.
   =========================================================================== */
.help-shell{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:start}
.help-main{min-width:0;max-width:820px}
.help-aside{position:sticky;top:calc(var(--topbar-h) + 16px);font-size:13px}

/* --- contents ----------------------------------------------------------- */
.help-hero{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow);margin-bottom:22px}
.help-hero h1{margin:0 0 6px;font-size:26px;color:var(--isb-dark);letter-spacing:-.01em}
.help-hero__lead{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:62ch}
.help-hero__meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--muted)}

.help-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.help-filter__chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font-size:13px;text-decoration:none;transition:all .15s var(--ease)}
.help-filter__chip:hover{border-color:var(--isb-blue);color:var(--isb-blue)}
.help-filter__chip.is-active{background:var(--sidebar-active);border-color:transparent;color:#fff;font-weight:600}
.help-filter__count{opacity:.7;font-size:11.5px}

.help-part{margin:0 0 26px}
.help-part__title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.help-toc{display:grid;gap:10px}
.help-toc__item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;transition:all .15s var(--ease)}
.help-toc__item:hover{border-color:var(--isb-blue);box-shadow:var(--shadow);transform:translateY(-1px)}
.help-toc__num{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eef4fb;color:var(--isb-dark);font-size:12.5px;font-weight:700}
.help-toc__body{min-width:0}
.help-toc__title{font-weight:600;color:var(--isb-dark);font-size:15px}
.help-toc__summary{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.5}
.help-toc__roles{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px}
.help-tag{display:inline-block;padding:2px 8px;border-radius:12px;background:#f0f2f5;color:#4a5560;font-size:11px;letter-spacing:.02em;white-space:nowrap}
.help-tag--role{background:#eef4fb;color:#17527f}

/* --- chapter ------------------------------------------------------------ */
.help-chapter{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:34px 40px;box-shadow:var(--shadow)}
.help-chapter__kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--isb-blue)}
.help-chapter__title{margin:6px 0 10px;font-size:29px;line-height:1.2;color:var(--isb-dark);letter-spacing:-.015em}
.help-chapter__lead{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65}
.help-chapter__bar{margin:18px 0 26px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.help-body{font-size:15px;line-height:1.72;color:var(--ink)}
.help-body .help-h2{margin:36px 0 12px;padding-top:6px;font-size:21px;color:var(--isb-dark);letter-spacing:-.01em;scroll-margin-top:90px}
.help-body .help-h3{margin:28px 0 10px;font-size:17px;color:var(--isb-dark);scroll-margin-top:90px}
.help-body .help-h4{margin:22px 0 8px;font-size:15px;color:#2a3b49;scroll-margin-top:90px}
.help-body .help-h5,.help-body .help-h6{margin:18px 0 6px;font-size:14px;color:#2a3b49;scroll-margin-top:90px}
.help-body .help-h2:first-child,.help-body .help-h3:first-child{margin-top:0}
.help-anchor{float:left;margin-left:-20px;width:20px;color:var(--line);text-decoration:none;font-weight:400;opacity:0;transition:opacity .12s}
.help-body h2:hover .help-anchor,.help-body h3:hover .help-anchor,.help-body h4:hover .help-anchor{opacity:1}
.help-p{margin:0 0 14px}
.help-hr{margin:30px 0;border:0;border-top:1px solid var(--line)}
.help-link{color:var(--isb-blue)}
.help-list{margin:0 0 14px;padding-left:22px}
.help-list li{margin-bottom:6px}
.help-list .help-list{margin:6px 0 0}
.help-code{padding:1px 5px;border-radius:4px;background:#f1f3f5;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.8px;color:#27343e}
.help-pre{margin:0 0 16px;padding:14px 16px;border-radius:var(--radius);background:var(--isb-dark, #0e3b5e);color:#e8eef4;overflow:auto;font-size:12.8px;line-height:1.6}
.help-pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* The two marks the manual lives on: a button and a field. They are drawn
   differently on purpose — a reader scanning for "where do I click" should be
   able to find it without reading the sentence around it. */
.help-btn{display:inline-block;padding:1px 8px;border:1px solid #c6d4e1;border-bottom-width:2px;border-radius:5px;background:#f7fafd;color:#17527f;font-size:13px;font-weight:600;white-space:nowrap}
.help-field{font-variant:all-small-caps;letter-spacing:.04em;font-weight:600;color:#3b4b59}

/* --- tables ------------------------------------------------------------- */
.help-tablewrap{margin:0 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.help-table{width:100%;border-collapse:collapse;font-size:13.5px}
.help-table th{padding:10px 13px;text-align:left;background:#f7f9fb;border-bottom:1px solid var(--line);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#4a5560;white-space:nowrap}
.help-table td{padding:10px 13px;border-bottom:1px solid #eef0f2;vertical-align:top;line-height:1.55}
.help-table tr:last-child td{border-bottom:0}
.help-table td:first-child{font-weight:600;color:#27343e}

/* --- callouts ----------------------------------------------------------- */
.help-callout{margin:0 0 18px;padding:14px 16px 14px 18px;border-left:3px solid var(--isb-blue);border-radius:0 var(--radius) var(--radius) 0;background:#f4f8fc}
.help-callout__label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--isb-blue);margin-bottom:5px}
.help-callout__body>*:last-child{margin-bottom:0}
.help-callout--warning{border-left-color:var(--warn);background:var(--danger-bg)}
.help-callout--warning .help-callout__label{color:var(--warn)}
.help-callout--tip{border-left-color:var(--isb-green);background:var(--success-bg)}
.help-callout--tip .help-callout__label{color:#2b6e28}
.help-callout--rule{border-left-color:var(--isb-gold);background:#fdf6e6}
.help-callout--rule .help-callout__label{color:#94701a}
.help-callout--role{border-left-color:#6b4fbb;background:#f3effb}
.help-callout--role .help-callout__label{color:#5a3fa3}

/* --- figures ------------------------------------------------------------
   Two kinds, and the difference is the whole point. A FULL figure is the
   screen, for orientation: here is the page you are about to work on. A
   DETAIL is the control itself, cropped and marked, floated beside the
   sentence that explains it — so the reader's eye goes to the button rather
   than hunting for it in a screenshot of everything.
   Headings clear the float, so a detail never spills into the next section. */
.help-figure{margin:0 0 22px}
.help-figure--detail{float:right;width:min(46%,400px);margin:2px 0 16px 24px;clear:right}
.help-figure--detail img{border-color:#d9e2ea}
.help-figure--detail figcaption{font-size:12px}
.help-figure--detail .help-figure__placeholder{min-height:90px;padding:16px}
.help-body .help-h2,.help-body .help-h3,.help-body .help-h4,.help-hr,.help-tablewrap{clear:both}
.help-figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.help-figure figcaption{margin-top:7px;font-size:12.5px;color:var(--muted);line-height:1.5}
.help-figure__placeholder{display:grid;place-items:center;gap:6px;min-height:150px;padding:24px;border:2px dashed #cbd5df;border-radius:var(--radius);background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 10px,#f4f6f8 10px,#f4f6f8 20px);text-align:center}
.help-figure__placeholder-title{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8894a0}
.help-figure__placeholder code{font-size:12px;color:#5a6570}

/* --- in-chapter contents (right rail) ----------------------------------- */
.help-rail{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.help-rail__title{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.help-rail__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.help-rail__list a{color:#40505e;text-decoration:none;display:block;line-height:1.4;border-left:2px solid transparent;padding-left:10px;margin-left:-12px}
.help-rail__list a:hover{color:var(--isb-blue);border-left-color:var(--isb-blue)}
.help-rail__list li.lvl2{padding-left:12px;font-size:12.5px}

/* --- search ------------------------------------------------------------- */
.help-search{display:flex;gap:8px;margin:0 0 20px}
.help-search input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;background:var(--paper)}
.help-search input:focus{outline:none;border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}
.help-result{display:block;padding:14px 16px;margin-bottom:10px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit}
.help-result:hover{border-color:var(--isb-blue)}
.help-result__title{font-weight:600;color:var(--isb-dark)}
.help-result__snippet{margin-top:5px;font-size:13px;color:var(--muted);line-height:1.55}
.help-result__snippet mark{background:#fdf0c4;color:inherit;padding:0 2px;border-radius:2px}

/* --- chapter footer ----------------------------------------------------- */
.help-nextprev{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.help-nextprev a{display:block;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit}
.help-nextprev a:hover{border-color:var(--isb-blue)}
.help-nextprev__dir{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.help-nextprev__title{margin-top:3px;font-weight:600;color:var(--isb-dark);font-size:14px}
.help-nextprev .is-next{text-align:right}

@media (max-width:820px){
  .help-figure--detail{float:none;width:100%;margin:0 0 20px}
}

@media (max-width:1080px){
  .help-shell{grid-template-columns:minmax(0,1fr)}
  .help-aside{display:none}
  .help-chapter{padding:24px 20px}
  .help-nextprev{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   PRINT / PDF
   The school gets a PDF, and the PDF is this page printed. Everything that is
   only useful on a screen — the menu, the search box, the filter chips, the
   link back to the module — comes off; the rest is re-set for paper.
   --------------------------------------------------------------------------- */
@media print{
  @page{size:A4;margin:18mm 16mm 20mm}
  body{background:#fff}
  .app-sidebar,.app-topbar,.help-aside,.help-search,.help-filter,.help-nextprev,
  .help-anchor,.fa-widget,.no-print{display:none !important}
  .app-main,.container,main.container{margin:0 !important;padding:0 !important;max-width:none !important;width:auto !important}
  .help-shell{display:block}
  .help-main{max-width:none}
  .help-chapter,.help-hero{box-shadow:none;border:0;padding:0;border-radius:0}
  .help-chapter{page-break-before:always}
  .help-chapter:first-of-type{page-break-before:avoid}
  .help-chapter__title{font-size:22pt}
  .help-body{font-size:10.5pt;line-height:1.55}
  .help-body .help-h2{font-size:14pt;page-break-after:avoid}
  .help-body .help-h3{font-size:11.5pt;page-break-after:avoid}
  .help-body .help-h4{font-size:10.5pt;page-break-after:avoid}
  .help-figure,.help-tablewrap,.help-callout,.help-pre{page-break-inside:avoid}
  .help-figure img{max-height:105mm;object-fit:contain;object-position:left top}
  .help-figure--detail{float:right;width:44%;margin:0 0 10px 8mm}
  .help-figure--detail img{max-height:70mm}
  .help-table{font-size:9pt}
  .help-btn{border-bottom-width:1px}
  a.help-link{color:#17527f;text-decoration:underline}
}

/* ---------------------------------------------------------------------------
   ASK THE MANUAL
   The box on the contents page and the drawer that every screen carries are
   the same markup, so they are the same rules. The answer is deliberately set
   apart from the links below it: what the assistant wrote is not the manual,
   and the reader should be able to see which is which at a glance.
   --------------------------------------------------------------------------- */
.help-ask{margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,#f7fafd 0%,var(--paper) 100%)}
.help-ask__form{display:flex;gap:8px}
.help-ask__form input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);font-size:14.5px;background:var(--paper)}
.help-ask__form input:focus{outline:none;border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}
.help-ask__hint{margin:8px 2px 0;font-size:12px;color:var(--muted)}
.help-ask__out{margin-top:14px}
.help-ask__answer{padding:14px 16px;border-left:3px solid var(--isb-green);border-radius:0 var(--radius) var(--radius) 0;background:var(--success-bg);font-size:14.5px;line-height:1.65;white-space:pre-wrap}
.help-ask__head{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.help-ask__list{display:grid;gap:8px}
.help-ask__hit{display:block;padding:11px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit}
.help-ask__hit:hover{border-color:var(--isb-blue);box-shadow:var(--shadow)}
.help-ask__hit-title{display:block;font-weight:600;color:var(--isb-dark);font-size:14.5px}
.help-ask__hit-chapter{display:block;margin-top:1px;font-size:12px;color:var(--isb-blue)}
.help-ask__hit-why{display:block;margin-top:4px;font-size:12.5px;color:var(--muted);line-height:1.5}
.help-ask__none{padding:10px 2px;font-size:13.5px;color:var(--muted)}

/* --- the drawer ---------------------------------------------------------- */
.help-drawer{position:fixed;inset:0;z-index:2147482000}
.help-drawer__veil{position:absolute;inset:0;background:rgba(14,59,94,.42)}
.help-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(470px,100%);display:flex;flex-direction:column;background:var(--bg);box-shadow:-8px 0 30px rgba(0,0,0,.18);animation:helpDrawerIn .18s var(--ease)}
@keyframes helpDrawerIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.help-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;background:var(--sidebar-grad);color:#fff}
.help-drawer__head h2{margin:0;font-size:16px;font-weight:600}
.help-drawer__close{border:0;background:transparent;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.help-drawer__body{flex:1;overflow-y:auto;padding:16px 18px 24px}
.help-drawer__body .help-ask{background:var(--paper)}
.help-drawer__foot{margin:14px 2px 0;font-size:13px}
body.help-drawer-open{overflow:hidden}
.help-drawer--chapter .help-drawer__panel{width:min(760px,100%)}
.help-drawer__chapter{margin-top:14px}
.help-drawer__chapter .help-chapter--drawer{padding:24px 26px;box-shadow:none}
.help-chapter--drawer .help-chapter__title{font-size:23px}
.help-chapter--drawer .help-chapter__lead{margin-bottom:18px}
@media (max-width:640px){ .help-drawer__chapter .help-chapter--drawer{padding:18px 14px} }

/* --- the Help button in the top bar -------------------------------------- */
.topbar__help{display:inline-flex;align-items:center;gap:7px;margin-left:8px;padding:8px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--isb-dark);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.topbar__help:hover{border-color:var(--isb-blue);color:var(--isb-blue)}
@media (max-width:640px){ .topbar__help span{display:none} .topbar__help{padding:8px 10px} }

@media print{ .help-ask,.help-drawer,.topbar__help{display:none !important} }

/* --- "What do the school's documents say?" (help/_policy_ask.php) --------
   The documents' own words are the point of the answer, so they get the
   room: the summary reads like a sentence, the steps like a list a teacher
   follows, and every quotation sits in its own card with the document it
   came from. Nothing here is decoration — the state of the answer is said
   with a shape AND a word. */
.pa{margin:0 0 18px;border:1px solid #d7e3ef;border-radius:var(--radius-lg);background:var(--paper);box-shadow:0 1px 2px rgba(14,59,94,.05);overflow:hidden}
.pa__head{display:flex;align-items:center;gap:12px;width:100%;white-space:normal;padding:14px 16px;border:0;background:linear-gradient(180deg,#f5f9fd 0%,#fff 100%);text-align:left;cursor:pointer;color:inherit;font:inherit}
.pa__head:hover .pa__title{color:var(--isb-blue)}
.pa__mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--isb-dark);color:#fff;flex-shrink:0}
.pa__titles{flex:1;min-width:0}
.pa__title{display:block;font-size:15px;font-weight:700;color:var(--isb-dark);letter-spacing:-.005em}
.pa__sub{display:block;margin-top:1px;font-size:12.5px;color:var(--muted);line-height:1.45}
.pa__chev{color:var(--muted);transition:transform .18s var(--ease)}
.pa.is-folded .pa__chev{transform:rotate(-90deg)}
.pa:not(.is-folded) .pa__head{border-bottom:1px solid #e6edf4}
.pa__body{padding:14px 16px 12px}
.pa__form textarea{display:block;width:100%;min-height:58px;resize:none;margin:0;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:14.5px;line-height:1.5;background:#fff;color:var(--ink)}
.pa__form textarea:focus{outline:none;border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}
.pa__actions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.pa__grow{flex:1}
.pa__go{white-space:nowrap}
.pa__out{margin-top:14px}
.pa__fine{margin:12px 2px 0;font-size:11.5px;color:var(--muted);line-height:1.5}
.pa-ico{display:inline-flex;flex-shrink:0}
.pa-msg{padding:10px 2px;font-size:13.5px;color:var(--muted)}

/* waiting: a slow bar and the step being done, honest about the half minute */
.pa-wait{padding:14px 2px 6px}
.pa-wait__bar{height:3px;border-radius:3px;background:#e7eef5;overflow:hidden}
.pa-wait__bar span{display:block;height:100%;width:35%;border-radius:3px;background:var(--isb-blue);animation:paSlide 1.6s var(--ease) infinite}
@keyframes paSlide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.pa-wait__line{margin-top:9px;font-size:13px;color:#3d4b5a}
@media (prefers-reduced-motion:reduce){.pa-wait__bar span{animation:none;width:100%;opacity:.35}}

/* the answer */
.pa-ans{display:block}
.pa-ans__state{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.01em}
.pa-ans__state.is-yes{background:#e3f3e1;color:#25632a}
.pa-ans__state.is-partly{background:#fdf1d8;color:#7a5410}
.pa-ans__state.is-no{background:#eef1f4;color:#4a5562}
.pa-ans__summary{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--isb-dark);font-weight:500}
.pa-ans__h{margin:18px 0 8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pa-steps{margin:0;padding:0;list-style:none;counter-reset:pa}
.pa-step{position:relative;padding:9px 0 9px 34px;border-top:1px solid #eef2f6;font-size:14px;line-height:1.6;counter-increment:pa}
.pa-step:first-child{border-top:0}
.pa-step::before{content:counter(pa);position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--isb-dark);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;line-height:1}
.pa-step__refs{display:inline-flex;gap:4px;margin-left:6px;vertical-align:1px}
.pa-ref{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border:1px solid #b9cfe4;border-radius:6px;background:#f2f7fc;color:var(--isb-blue);font-size:11px;font-weight:700;line-height:1;text-decoration:none}
.pa-ref:hover{background:var(--isb-blue);border-color:var(--isb-blue);color:#fff;text-decoration:none}
.pa-gap{display:flex;gap:9px;margin-top:14px;padding:10px 12px;border:1px dashed #cfd8e2;border-radius:9px;background:#fafbfc;font-size:13px;line-height:1.55;color:#3d4b5a}
.pa-gap .pa-ico{margin-top:2px;color:var(--muted)}
.pa-quotes{margin:0;padding:0;list-style:none;border-top:1px solid #e8edf2}
.pa-q{padding:12px 2px 13px;border-bottom:1px solid #e8edf2;scroll-margin:80px}
.pa-q.is-lit{animation:paLit 1.6s var(--ease)}
@keyframes paLit{0%,40%{background:#eef5fc}100%{background:transparent}}
.pa-q__head{display:flex;align-items:flex-start;gap:10px}
.pa-q__n{display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;margin-top:1px;border-radius:5px;background:#e8f0f8;color:var(--isb-blue);font-size:11px;font-weight:800}
.pa-q__src{flex:1;min-width:0;line-height:1.35}
.pa-q__doc{display:block;font-size:13px;font-weight:700;color:var(--isb-dark)}
.pa-q__sec{display:block;font-size:12px;color:var(--muted)}
.pa-q__open{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--isb-blue);text-decoration:none;white-space:nowrap}
.pa-q__open:hover{text-decoration:underline}
.pa-q__text{margin:8px 0 0 30px;padding:0 0 0 12px;border-left:2px solid var(--isb-gold);font-size:14px;line-height:1.6;color:#1f2a36;white-space:pre-line}
.pa-q__tr{margin:5px 0 0 44px;font-size:13px;line-height:1.55;color:#5a6673}
.pa-read{margin-top:14px;font-size:12.5px;color:#4a5562}
.pa-read summary{cursor:pointer;color:var(--muted);font-weight:600}
.pa-read ul{margin:8px 0 0;padding-left:18px;line-height:1.6}
.pa-ans__fine{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.5}
.help-drawer__body .pa{margin-bottom:14px}
.help-drawer__label{margin:4px 2px 8px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){ .pa__head{padding:12px} .pa__body{padding:12px} .pa-q__text{margin-left:0} .pa-q__tr{margin-left:14px} }

/* the incident report: one warm line at the top — "School policies" — kept
   apart from the blue Writing assistant, which fills the form in */
.pa-bar{margin:0 0 14px;padding:10px 12px;border:1px solid #ead9ad;border-radius:12px;background:#fffbf1}
.pa-bar__label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7a5a12}
.pa-bar__mark{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#7a5a12;color:#fff}
.pa-bar__hint{font-weight:500;letter-spacing:0;text-transform:none;font-size:12px;color:#9a8250}
.pa-bar__row{display:flex;gap:8px;align-items:flex-end}
.pa-bar__row textarea{flex:1;min-height:36px;height:36px;margin:0;padding:7px 11px;resize:none;border:1px solid #e3d4ab;border-radius:9px;background:#fff;font:inherit;font-size:14px;line-height:1.45;color:var(--ink)}
.pa-bar__row textarea:focus{outline:none;border-color:#b8902e;box-shadow:0 0 0 3px rgba(212,164,55,.18)}
.pa-bar__row textarea.is-short{animation:paShake .3s}
@keyframes paShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.pa-bar__go{flex-shrink:0;height:36px;padding:0 16px;border:0;border-radius:9px;background:#7a5a12;color:#fff;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.pa-bar__go:hover{background:#5f4508}
.pa-bar__go:disabled{opacity:.6;cursor:default}

/* the answer's own window, over the report */
.pa-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:20px}
.pa-modal[hidden]{display:none}
.pa-modal__veil{position:absolute;inset:0;background:rgba(14,59,94,.5)}
.pa-modal__panel{position:relative;display:flex;flex-direction:column;width:min(720px,100%);max-height:min(88vh,900px);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden;animation:paIn .16s var(--ease)}
@keyframes paIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pa-modal__head{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid #eef2f6;color:#7a5a12}
.pa-modal__head h3{flex:1;margin:0;font-size:16px;font-weight:700;color:var(--isb-dark)}
.pa-modal__close{border:0;background:transparent;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.pa-modal__close:hover{color:var(--isb-dark)}
.pa-modal__q{flex-shrink:0;padding:10px 18px;background:#fafbfc;border-bottom:1px solid #eef2f6;font-size:13px;line-height:1.5;color:#4a5562;white-space:pre-line;max-height:84px;overflow:auto}
.pa-modal__body{flex:1;overflow-y:auto;padding:16px 18px 20px}
@media (max-width:640px){ .pa-modal{padding:0;align-items:stretch} .pa-modal__panel{max-height:none;border-radius:0} }
@media print{ .pa,.pa-bar,.pa-modal{display:none !important} }

/* ===========================================================================
   School Vault — il foglio di stile del modulo.
   Namespace .vlt-, come .lb- per il logbook e .mbx- per la casella: cosi' una
   regola scritta qui non puo' spostare un bottone in un altro modulo.
   Colori e raggi vengono dalle variabili di app.css: il Vault non ha una sua
   tavolozza, e non deve averla.
   =========================================================================== */

/* --- l'impalcatura a due colonne ---------------------------------------- */
.vlt-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.vlt-shell{grid-template-columns:1fr}}

/* Niente position:sticky qui. Appiccicata, la colonna si stacca dal bordo
   superiore appena la pagina scorre di un pixel, e sembra che abbia un margine
   che nessuno le ha dato. L'archivio e' corto: non guadagnava niente. */
.vlt-rail{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
          box-shadow:var(--shadow);padding:8px;align-self:start;margin-top:0}
.vlt-rail__title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
                 padding:8px 10px 6px;font-weight:700}

/* --- l'albero ----------------------------------------------------------- */
.vlt-tree{list-style:none;margin:0;padding:0}
.vlt-tree__row{display:flex;align-items:center;gap:6px;border-radius:var(--radius);
               padding:6px 8px;color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.3}
.vlt-tree__row:hover{background:#eef3f8}
.vlt-tree__row.is-active{background:var(--sidebar-active);color:#fff}
.vlt-tree__row.is-active .vlt-tree__count{background:rgba(255,255,255,.22);color:#fff}
.vlt-tree__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlt-tree__count{font-size:11px;font-weight:700;background:#eceff3;color:var(--muted);
                 border-radius:9px;padding:1px 7px;flex-shrink:0}
.vlt-tree__twist{width:16px;flex-shrink:0;background:none;border:0;padding:0;cursor:pointer;
                 color:var(--muted);line-height:0}
.vlt-tree__twist[hidden]{visibility:hidden;display:inline-block}
.vlt-tree__twist svg{transition:transform .15s var(--ease)}
.vlt-tree__twist.is-open svg{transform:rotate(90deg)}
.vlt-tree__kids{list-style:none;margin:0;padding:0}
.vlt-tree__kids[hidden]{display:none}
.vlt-rail__sep{height:1px;background:var(--line);margin:8px 4px}

/* --- la barra degli strumenti ------------------------------------------- */
/* UNA RIGA SOLA.
   La casella di ricerca prendeva tutto lo spazio che avanzava e spingeva
   "Add files" a capo. Adesso cresce fino a un tetto e poi si ferma: gli altri
   comandi stanno in fila, e la barra resta alta una riga anche con sei cose
   dentro. Il ritorno a capo resta come rete per gli schermi stretti. */
.vlt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.vlt-bar__grow{flex:1 1 200px;min-width:160px;max-width:420px}
/* I comandi non si lasciano schiacciare, e le parole dentro non vanno a capo. */
.vlt-bar>*:not(.vlt-bar__grow){flex:0 0 auto}
.vlt-bar .btn{white-space:nowrap}
/* Sotto una certa larghezza le parole dei bottoni spariscono e restano le
   icone: stringere e' meglio che andare a capo. */
@media (max-width:1180px){
  .vlt-bar__grow{max-width:320px}
  .vlt-bar label[for=vlt-sort]{display:none}
}
.vlt-search{display:flex;gap:0;align-items:stretch;width:100%}
.vlt-search input[type=search]{flex:1;min-width:0;border:1px solid var(--line);border-right:0;
    border-radius:var(--radius) 0 0 var(--radius);padding:9px 12px;font-size:14px;background:var(--paper)}
.vlt-search input[type=search]:focus{outline:2px solid var(--isb-blue);outline-offset:-2px;z-index:1}
.vlt-search button{border-radius:0 var(--radius) var(--radius) 0;border:1px solid var(--line);
    background:var(--paper);padding:0 14px;cursor:pointer;color:var(--isb-dark);display:flex;align-items:center}
.vlt-search button:hover{background:#eef3f8}

/* --- l'intestazione della cartella aperta -------------------------------- */
.vlt-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.vlt-head__main{flex:1;min-width:0}
.vlt-head__title{margin:0;font-size:21px;color:var(--isb-dark);line-height:1.25}
.vlt-head__desc{margin:4px 0 0;color:var(--muted);font-size:13.5px;max-width:70ch}
.vlt-head__acts{display:flex;gap:8px;flex-shrink:0}

/* --- l'elenco dei file --------------------------------------------------- */
.vlt-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
          box-shadow:var(--shadow);overflow:hidden}
.vlt-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;gap:12px;align-items:center;
         padding:11px 14px;border-top:1px solid var(--line);text-decoration:none;color:inherit}
.vlt-row:first-child{border-top:0}
.vlt-row:hover{background:#f7f9fc}
.vlt-row__icon{width:34px;height:34px;border-radius:var(--radius);display:flex;align-items:center;
               justify-content:center;background:#eef3f8;color:var(--isb-dark)}
.vlt-row__main{min-width:0}
/* display:block NON e' superfluo, ed e' il motivo per cui il troncamento non
   funzionava: nel markup questi due sono <span>, cioe' elementi IN LINEA, e su
   un elemento in linea text-overflow:ellipsis non ha alcun effetto. La regola
   c'era scritta da sempre e non poteva applicarsi — la descrizione di una
   cartella correva sotto il conteggio e la parola "Folder" invece di fermarsi
   con i puntini. */
.vlt-row__name{display:block;font-weight:600;font-size:14px;color:var(--ink);overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}
.vlt-row__sub{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;
              text-overflow:ellipsis;white-space:nowrap}

.vlt-row__meta{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
@media (max-width:700px){
  .vlt-row{grid-template-columns:34px minmax(0,1fr) auto}
  .vlt-row__meta{display:none}
}

/* --- lo stato: FORMA + PAROLA, mai un bordino e basta -------------------- */
.vlt-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
          letter-spacing:.02em;border-radius:999px;padding:3px 10px;white-space:nowrap}
.vlt-chip--dashed{border:1px dashed var(--muted);color:var(--muted);background:transparent}
.vlt-chip--outlined{border:1px solid var(--isb-blue);color:var(--isb-blue);background:transparent}
.vlt-chip--solid{border:1px solid var(--isb-green);background:var(--isb-green);color:#fff}
.vlt-chip--struck{border:1px solid var(--warn);color:var(--warn);background:transparent;
                  text-decoration:line-through}
.vlt-chip--flat{border:1px solid var(--line);color:var(--muted);background:#f6f7f9}

/* --- il vuoto ------------------------------------------------------------ */
.vlt-empty{padding:42px 22px;text-align:center;color:var(--muted)}
.vlt-empty__title{font-size:16px;color:var(--isb-dark);font-weight:600;margin-bottom:6px}
.vlt-empty p{margin:0 auto;max-width:48ch;font-size:14px}

/* --- il rilascio dei file: tutta la pagina e' la zona -------------------- */
.vlt-drop{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;
          background:rgba(14,59,94,.55);backdrop-filter:blur(2px)}
.vlt-drop.is-on{display:flex}
.vlt-drop__box{background:var(--paper);border-radius:var(--radius-lg);padding:30px 38px;text-align:center;
               box-shadow:var(--shadow-lg);border:2px dashed var(--isb-blue);max-width:460px}
.vlt-drop__title{font-size:19px;font-weight:700;color:var(--isb-dark);margin:10px 0 4px}
.vlt-drop__where{color:var(--isb-blue);font-weight:700}
.vlt-drop__hint{color:var(--muted);font-size:13.5px;margin:0}

/* --- il vassoio dei caricamenti ----------------------------------------- */
.vlt-tray{position:fixed;right:18px;bottom:18px;width:330px;max-width:calc(100vw - 36px);z-index:1100;
          background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
          box-shadow:var(--shadow-lg);display:none;overflow:hidden}
.vlt-tray.is-on{display:block}
.vlt-tray__head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);
                font-weight:700;font-size:13px;color:var(--isb-dark);background:#f7f9fc}
.vlt-tray__head button{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--muted);line-height:0}
.vlt-tray__body{max-height:290px;overflow:auto}
.vlt-up{padding:9px 12px;border-top:1px solid var(--line);font-size:12.5px}
.vlt-up:first-child{border-top:0}
.vlt-up__name{display:flex;gap:8px;align-items:center}
.vlt-up__name span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlt-up__state{color:var(--muted);flex-shrink:0;font-size:11.5px}
.vlt-up__state.is-ok{color:var(--ok);font-weight:700}
.vlt-up__state.is-bad{color:var(--warn);font-weight:700}
.vlt-up__track{height:4px;border-radius:2px;background:#e9edf2;margin-top:6px;overflow:hidden}
.vlt-up__fill{height:100%;width:0;background:var(--isb-blue);transition:width .2s linear}
.vlt-up__msg{color:var(--warn);margin-top:4px;line-height:1.35}
.vlt-up__ask{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px}
.vlt-up__ask .btn{padding:3px 9px;font-size:11.5px}

/* --- la scheda del file -------------------------------------------------- */
.vlt-prev{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
          box-shadow:var(--shadow);overflow:hidden}
.vlt-prev iframe{display:block;width:100%;height:min(74vh,760px);border:0;background:#f2f4f7}
.vlt-prev img{display:block;width:100%;height:auto;background:#f2f4f7}
.vlt-prev pre{margin:0;padding:16px;max-height:min(74vh,760px);overflow:auto;font-size:12.5px;
              line-height:1.6;white-space:pre-wrap;word-break:break-word;background:#fbfcfd}

.vlt-facts{list-style:none;margin:0;padding:0}
.vlt-facts li{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.vlt-facts li:first-child{border-top:0}
.vlt-facts b{flex:0 0 118px;color:var(--muted);font-weight:600}
.vlt-facts span{flex:1;min-width:0;word-break:break-word}

/* --- il riquadro dell'assistente ---------------------------------------- */
.vlt-ai{border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfd;padding:13px 15px}
.vlt-ai__head{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--isb-dark);
              font-size:13px;margin-bottom:7px}
.vlt-ai__summary{margin:0;font-size:13.5px;line-height:1.6}
.vlt-ai__keys{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.vlt-ai__note{margin:9px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.vlt-ai__none{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55}

/* --- la coda da sistemare ------------------------------------------------ */
.vlt-prop{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
          box-shadow:var(--shadow);padding:14px 16px;margin-bottom:12px}
.vlt-prop__top{display:flex;gap:12px;align-items:flex-start}
.vlt-prop__tick{margin-top:3px}
.vlt-prop__main{flex:1;min-width:0}
.vlt-prop__name{font-weight:700;font-size:14.5px;color:var(--ink);word-break:break-word}
.vlt-prop__meta{font-size:12px;color:var(--muted);margin-top:2px}
.vlt-prop__arrow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:11px}
.vlt-prop__arrow select{max-width:100%;padding:6px 9px;border:1px solid var(--line);
                        border-radius:var(--radius);font-size:13.5px;background:var(--paper)}
.vlt-prop__new{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
               border:1px dashed var(--isb-gold);color:#8a6a15;background:#fdf7e7;
               border-radius:999px;padding:3px 10px}
.vlt-prop__why{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.55}

/* --- le domande ---------------------------------------------------------- */
.vlt-ask{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
         box-shadow:var(--shadow);padding:16px 18px}
.vlt-ask__row{display:flex;gap:10px;align-items:stretch}
@media (max-width:640px){.vlt-ask__row{flex-direction:column}}
.vlt-ask__row textarea{flex:1;min-height:58px;resize:vertical;border:1px solid var(--line);
    border-radius:var(--radius);padding:10px 12px;font-size:14.5px;font-family:inherit;line-height:1.5}
.vlt-ask__hint{color:var(--muted);font-size:12.5px;margin:9px 0 0}
.vlt-answer{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--isb-blue);
            border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px 18px;margin-top:16px}
.vlt-answer__body{font-size:15px;line-height:1.7}
.vlt-answer__body p{margin:0 0 .8em}
.vlt-answer__body p:last-child{margin-bottom:0}
.vlt-cites{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:15px}
.vlt-cite{border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;background:#fbfcfd}
.vlt-cite__name{font-weight:700;font-size:13.5px;word-break:break-word}
.vlt-cite__why{font-size:12.5px;color:var(--muted);margin:4px 0 9px;line-height:1.5}
.vlt-cite__acts{display:flex;gap:7px;flex-wrap:wrap}
.vlt-cite__acts .btn{padding:4px 10px;font-size:12px}

/* --- riquadri e pagine di servizio --------------------------------------- */
.vlt-note{border:1px solid var(--line);border-left:3px solid var(--isb-gold);background:#fdfbf4;
          border-radius:var(--radius);padding:11px 14px;font-size:13.5px;line-height:1.6;color:#4a4a4a}
.vlt-folders{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
             box-shadow:var(--shadow);overflow:hidden}
.vlt-folder{display:flex;gap:12px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}
.vlt-folder:first-child{border-top:0}
.vlt-folder__main{flex:1;min-width:0}
.vlt-folder__name{font-weight:600;font-size:14px}
.vlt-folder__desc{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.45}
.vlt-folder__acts{display:flex;gap:6px;flex-shrink:0}
.vlt-spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.45);
          border-top-color:#fff;border-radius:50%;animation:vlt-turn .7s linear infinite;vertical-align:-2px}
@keyframes vlt-turn{to{transform:rotate(360deg)}}

/* --- Admin Accounts: i permessi per modulo, a fisarmonica ------------------
   Ventisei caselle in due colonne erano un muro: nessuno le leggeva e si
   spuntava a caso. Raggruppate come il menu, con il conto nel titolo, la
   domanda torna leggibile un gruppo alla volta. */
.mods{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.mods__group{border-top:1px solid var(--line)}
.mods__group:first-child{border-top:0}
.mods__head{display:flex;align-items:center;gap:10px;padding:10px 13px;cursor:pointer;
            font-weight:600;font-size:13.5px;color:var(--isb-dark);list-style:none;
            background:#fbfcfd;user-select:none}
.mods__head::-webkit-details-marker{display:none}
.mods__head::before{content:"";width:0;height:0;flex-shrink:0;
                    border-left:5px solid var(--muted);border-top:4px solid transparent;
                    border-bottom:4px solid transparent;transition:transform .15s var(--ease)}
.mods__group[open] > .mods__head::before{transform:rotate(90deg)}
.mods__head:hover{background:#eef3f8}
.mods__name{flex:1;min-width:0}
.mods__count{font-size:11.5px;font-weight:700;color:var(--muted);background:#eceff3;
             border-radius:9px;padding:2px 8px;white-space:nowrap}
.mods__body{padding:4px 13px 10px 28px}
.mods__row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;cursor:pointer}
.mods__row--locked{cursor:default;color:var(--muted)}
.mods__lock{line-height:0;flex-shrink:0;opacity:.6}
.mods__label{flex:1;min-width:0}
.mods__state{font-size:11px;font-weight:700;letter-spacing:.02em;border:1px dashed var(--line);
             border-radius:999px;padding:2px 9px;white-space:nowrap;color:var(--muted)}

/* --- School Vault: la conversazione sull'archivio -------------------------- */
.vlt-thread{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.vlt-msg{border-radius:var(--radius-lg);padding:13px 16px;position:relative;font-size:14px;line-height:1.6}
.vlt-msg__who{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);
              display:flex;align-items:center;gap:5px;margin-bottom:5px}
.vlt-msg__when{display:block;font-size:11px;color:var(--muted);margin-top:8px}
.vlt-msg--event{background:#f6f7f9;border:1px dashed var(--line);color:var(--muted);
                font-size:13px;white-space:pre-wrap}
.vlt-msg--office{background:#eef3f8;border:1px solid #d9e4ef;margin-left:54px}
.vlt-msg--ai{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--isb-blue);
             box-shadow:var(--shadow);margin-right:54px}
@media (max-width:700px){.vlt-msg--office,.vlt-msg--ai{margin-left:0;margin-right:0}}
.vlt-msg__body{white-space:pre-wrap}

/* il piano: una riga per mossa, e ogni riga dice cosa ha notato */
.vlt-plan{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.vlt-plan__title{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin-bottom:7px}
.vlt-plan__row{display:flex;gap:9px;align-items:flex-start;padding:6px 0;cursor:pointer}
.vlt-plan__row--past{cursor:default;color:var(--muted)}
.vlt-plan__row input{margin-top:3px;flex-shrink:0}
.vlt-plan__mark{line-height:0;margin-top:2px;flex-shrink:0;opacity:.7}
.vlt-plan__what{flex:1;min-width:0;font-size:13.5px}
.vlt-plan__why{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.vlt-plan__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px}
.vlt-plan__done{margin-top:9px;font-size:12.5px;color:var(--ok);font-weight:600}

/* la riga per rispondere a parole */
/* (il campo di scrittura e la conversazione sono piu' in basso, rifatti) */

/* ===========================================================================
   Il Vault come una cartella locale — griglia, selezione, menu, conferme.
   Aggiunto il 23/09/2026.

   Nessun colore nuovo: tutto viene dalle variabili in cima a questo file.
   L'unica eccezione e' il rosso della finestra che cancella, e non e' una
   licenza estetica — e' l'unico posto del modulo in cui serve che una cosa
   faccia paura prima di essere premuta.
   =========================================================================== */

/* --- l'interruttore fra lista e icone ------------------------------------ */
.vlt-view{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);
          overflow:hidden;background:var(--paper);flex-shrink:0}
.vlt-view a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
            color:var(--muted);text-decoration:none;border-left:1px solid var(--line)}
.vlt-view a:first-child{border-left:0}
.vlt-view a:hover{background:#eef3f8;color:var(--isb-dark)}
.vlt-view a.is-on{background:var(--isb-blue);color:#fff}

/* --- la griglia ----------------------------------------------------------- */
.vlt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
@media (max-width:640px){.vlt-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}}

.vlt-tile{position:relative;display:flex;flex-direction:column;background:var(--paper);
          border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
          text-decoration:none;color:inherit;box-shadow:var(--shadow);
          transition:box-shadow .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease)}
.vlt-tile:hover{box-shadow:var(--shadow-lg);border-color:#c9d6e3}
.vlt-tile:focus-visible{outline:2px solid var(--isb-blue);outline-offset:2px}

/* Il riquadro dell'anteprima. L'altezza e' fissa e uguale per tutti: una
   griglia in cui ogni riquadro e' alto quanto la sua immagine e' una griglia
   che sembra rotta, e costringe l'occhio a ricominciare da capo a ogni riga. */
.vlt-tile__shot{position:relative;aspect-ratio:4/3;background:#f2f4f7;display:flex;
                align-items:center;justify-content:center;overflow:hidden}
.vlt-tile__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Il documento si mostra dall'alto, non dal centro: la prima pagina di un PDF
   dice chi e' nelle prime righe, e centrarla taglia proprio quelle. */
.vlt-tile__glyph{color:#b3bdc9}
.vlt-tile__kind{position:absolute;left:7px;bottom:7px;background:rgba(14,59,94,.86);color:#fff;
                font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
                padding:2px 6px;border-radius:4px}

.vlt-tile__body{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;min-height:0}
.vlt-tile__name{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ink);
                display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                overflow:hidden;word-break:break-word}
.vlt-tile__meta{display:block;font-size:11px;color:var(--muted);line-height:1.4;
                overflow:hidden;word-break:break-word}

/* --- la cartella, in griglia e in lista ---------------------------------- */
/* UNA CARTELLA NON HA UN'ANTEPRIMA DA MOSTRARE.
   Il riquadro alto quattro terzi serve ai documenti, dove dentro ci sta la
   prima pagina; su una cartella e' un rettangolo vuoto con un'iconcina in
   mezzo, e con quaranta cartelle diventa una scorsa lunghissima per non
   guardare niente. Qui l'immagine si riduce a una fascia, e il riquadro cala
   di circa due terzi in altezza senza perdere nulla di leggibile. */
.vlt-tile--folder .vlt-tile__shot{aspect-ratio:auto;height:54px;
    background:linear-gradient(160deg,#eef4fa 0%,#e3ecf5 100%)}
.vlt-tile--folder .vlt-tile__glyph{color:var(--isb-blue)}
.vlt-tile--folder .vlt-tile__glyph svg{width:24px;height:24px}
.vlt-tile--folder .vlt-tile__name{font-weight:700;-webkit-line-clamp:1}
.vlt-tile--folder .vlt-tile__body{padding:8px 10px 10px}

/* E le cartelle stanno piu' strette fra loro: sono etichette, non figure. */
.vlt-grid--folders{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
@media (max-width:640px){.vlt-grid--folders{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}}

/* --- la selezione --------------------------------------------------------- */
/* Forma + parola, mai un bordino e basta: il riquadro scelto si abbassa, si
   colora di blu e mostra la spunta. Anche chi non distingue il blu dal grigio
   vede che quel riquadro ha qualcosa che gli altri non hanno. */
.vlt-tile.is-picked,.vlt-row.is-picked{border-color:var(--isb-blue);
        box-shadow:0 0 0 2px rgba(26,115,193,.28),var(--shadow)}
.vlt-tile.is-picked{background:#f4f9ff}
.vlt-row.is-picked{background:#f0f7ff}

.vlt-pick{position:absolute;top:7px;left:7px;width:22px;height:22px;border-radius:50%;
          background:rgba(255,255,255,.92);border:1px solid var(--line);display:flex;
          align-items:center;justify-content:center;color:transparent;cursor:pointer;
          opacity:0;transition:opacity .12s var(--ease);z-index:2}
.vlt-tile:hover .vlt-pick,.vlt-tile.is-picked .vlt-pick{opacity:1}
.vlt-tile.is-picked .vlt-pick{background:var(--isb-blue);border-color:var(--isb-blue);color:#fff}

/* --- trascinare ----------------------------------------------------------- */
.vlt-tile[draggable=true],.vlt-row[draggable=true]{cursor:default}
.vlt-dragging{opacity:.45}
/* La cartella che sta per ricevere: si gonfia appena e si accende. Deve essere
   evidente col mouse premuto e la vista mezza coperta dal fantasma trascinato. */
.vlt-drop-on{outline:2px dashed var(--isb-blue);outline-offset:-3px;background:#eaf3fc !important}
.vlt-tree__row.vlt-drop-on{background:#dcebf9 !important;color:var(--isb-dark)}

/* Quanti file stai trascinando, attaccato al puntatore. */
.vlt-ghost{position:fixed;z-index:9999;pointer-events:none;background:var(--isb-dark);color:#fff;
           font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;
           box-shadow:var(--shadow-lg);transform:translate(-50%,-160%)}

/* --- la barra che compare quando hai scelto qualcosa --------------------- */
.vlt-bulk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(140%);
          background:var(--isb-dark);color:#fff;border-radius:999px;padding:9px 10px 9px 18px;
          display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);z-index:60;
          transition:transform .18s var(--ease);max-width:calc(100vw - 24px)}
.vlt-bulk.is-on{transform:translateX(-50%) translateY(0)}
.vlt-bulk__count{font-size:13px;font-weight:700;white-space:nowrap}
.vlt-bulk__sep{width:1px;height:22px;background:rgba(255,255,255,.22)}
.vlt-bulk button{background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:999px;
                 padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
                 display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vlt-bulk button:hover{background:rgba(255,255,255,.24)}
.vlt-bulk button.is-danger{background:rgba(192,57,43,.9)}
.vlt-bulk button.is-danger:hover{background:#c0392b}
@media (max-width:640px){.vlt-bulk{padding-left:14px;gap:7px}.vlt-bulk button span{display:none}}

/* --- il menu del tasto destro -------------------------------------------- */
.vlt-menu{position:fixed;z-index:70;min-width:212px;background:var(--paper);
          border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
          padding:5px;display:none}
.vlt-menu.is-on{display:block}
.vlt-menu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;
                 padding:8px 11px;border-radius:var(--radius);font-size:13px;color:var(--ink);
                 cursor:pointer;text-align:left}
.vlt-menu button:hover{background:#eef3f8}
.vlt-menu button.is-danger{color:var(--warn)}
.vlt-menu button.is-danger:hover{background:var(--danger-bg)}
.vlt-menu__sep{height:1px;background:var(--line);margin:5px 7px}
.vlt-menu__head{font-size:11px;color:var(--muted);padding:7px 11px 5px;font-weight:700;
                letter-spacing:.04em;text-transform:uppercase}

/* --- rinominare sul posto ------------------------------------------------- */
.vlt-rename{width:100%;font:inherit;font-size:12.5px;padding:3px 5px;border:1px solid var(--isb-blue);
            border-radius:4px;background:var(--paper);color:var(--ink);outline:none}
.vlt-row .vlt-rename{font-size:14px;padding:4px 7px}

/* --- la finestra che cancella -------------------------------------------- */
/* Rossa dal bordo in su, e non solo nel pulsante: chi la apre per sbaglio deve
   capire di aver aperto qualcosa di diverso PRIMA di aver letto una parola. */
.vlt-modal{position:fixed;inset:0;z-index:90;background:rgba(10,44,71,.55);
           display:none;align-items:center;justify-content:center;padding:18px}
.vlt-modal.is-on{display:flex}
.vlt-modal__box{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
                max-width:520px;width:100%;overflow:hidden;animation:vlt-pop .16s var(--ease)}
@keyframes vlt-pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.vlt-modal__top{background:var(--warn);color:#fff;padding:15px 20px;display:flex;align-items:center;gap:11px}
.vlt-modal__top h3{margin:0;font-size:16.5px;line-height:1.3}
.vlt-modal__body{padding:18px 20px}
.vlt-modal__body p{margin:0 0 11px;font-size:14px;line-height:1.6;color:var(--ink)}
.vlt-modal__what{background:#fbf3f2;border:1px solid #f0cfca;border-radius:var(--radius);
                 padding:11px 13px;margin:0 0 14px;font-size:13.5px;line-height:1.6}
.vlt-modal__what strong{color:var(--warn)}
.vlt-modal__type{display:block;margin:0 0 6px;font-size:13px;color:var(--muted)}
.vlt-modal__type b{color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                   letter-spacing:.04em;background:#f2f4f7;padding:1px 6px;border-radius:4px}
.vlt-modal input[type=text]{width:100%;padding:10px 12px;border:1px solid var(--line);
        border-radius:var(--radius);font-size:14.5px;letter-spacing:.06em;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.vlt-modal input[type=text]:focus{outline:2px solid var(--warn);outline-offset:-2px}
.vlt-modal__acts{display:flex;gap:9px;justify-content:flex-end;padding:0 20px 18px;flex-wrap:wrap}
.vlt-modal__go{background:var(--warn);color:#fff;border:0;border-radius:var(--radius);
               padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer}
.vlt-modal__go[disabled]{opacity:.42;cursor:not-allowed}
.vlt-modal__no{background:none;border:1px solid var(--line);border-radius:var(--radius);
               padding:10px 18px;font-size:14px;cursor:pointer;color:var(--ink)}
.vlt-modal__no:hover{background:#f2f4f7}

/* --- il registro ---------------------------------------------------------- */
.vlt-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--paper);
             border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;
             margin-bottom:12px;box-shadow:var(--shadow)}
.vlt-filters label{display:flex;flex-direction:column;gap:4px;min-width:0}
.vlt-filters__grow{flex:1;min-width:150px}
.vlt-filters span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.vlt-filters select,.vlt-filters input{padding:8px 10px;border:1px solid var(--line);
        border-radius:var(--radius);background:var(--paper);font-size:13.5px;max-width:100%}

.vlt-log{display:grid;grid-template-columns:82px 150px minmax(0,1fr);gap:14px;
         padding:11px 14px;border-top:1px solid var(--line);align-items:baseline;font-size:13.5px}
.vlt-log:first-child{border-top:0}
.vlt-log:hover{background:#f7f9fc}
.vlt-log--loud{background:#fdf4f3}
.vlt-log--loud:hover{background:#fbe9e7}
.vlt-log__when{font-size:12px;color:var(--muted);line-height:1.45;white-space:nowrap}
.vlt-log__time{font-variant-numeric:tabular-nums}
.vlt-log__who{font-weight:600;color:var(--isb-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlt-log__what{min-width:0;line-height:1.5}
.vlt-log__verb{font-weight:600}
.vlt-log--loud .vlt-log__verb{color:var(--warn)}
.vlt-log__detail{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-word}
.vlt-log__gone{text-decoration:line-through;color:var(--muted)}
@media (max-width:700px){.vlt-log{grid-template-columns:1fr;gap:3px}
  .vlt-log__when{white-space:normal}.vlt-log__when br{display:none}}

.vlt-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}

/* --- il percorso, sopra il nome della cartella --------------------------- */
/* Discreto: e' una guida, non un titolo. Il pezzo dove si e' adesso e' scuro e
   non cliccabile, gli altri sono azzurri e si premono. */
/* IL PERCORSO RESTA IN ALTO, come la barra del titolo di una finestra del
   Finder. Scorrendo dentro una cartella da trecento documenti si perde di vista
   dove si e', e dover risalire per scoprirlo e' esattamente il lavoro che
   questa riga esiste per togliere. Si stacca dal contenuto con un fondo pieno,
   altrimenti scorrendoci sotto i riquadri la si legge sovrapposta a loro. */
.vlt-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;
            position:sticky;top:0;z-index:20;
            margin:0 0 8px;padding:8px 10px;
            background:var(--bg);border-bottom:1px solid var(--line);
            font-size:12.5px;line-height:1.5;color:var(--muted);min-width:0}
.vlt-crumbs a{display:inline-flex;align-items:center;gap:5px;color:var(--isb-blue);
              text-decoration:none;padding:3px 7px;border-radius:var(--radius);
              max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlt-crumbs a:hover{background:#eef3f8;text-decoration:underline}
.vlt-crumbs a.vlt-drop-on{outline:2px dashed var(--isb-blue);outline-offset:-2px;background:#eaf3fc}
.vlt-crumbs__sep{color:#b9c2cc;display:inline-flex;line-height:0;flex-shrink:0}
.vlt-crumbs__here{padding:3px 7px;font-weight:700;color:var(--isb-dark);
                  max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.vlt-crumbs a{max-width:130px}.vlt-crumbs__here{max-width:170px}}

/* Dentro un riquadro nulla si trascina per conto suo: il trascinamento e' del
   riquadro intero, sempre. Senza questo, partire col mouse da sopra
   l'anteprima trascina l'immagine invece del file. */
.vlt-tile img,.vlt-tile svg,.vlt-row svg{-webkit-user-drag:none;user-drag:none}
.vlt-tile,.vlt-row{-webkit-user-select:none;user-select:none}
.vlt-tile .vlt-rename,.vlt-row .vlt-rename{-webkit-user-select:text;user-select:text}

/* Il riquadro che si e' appena spostato: un lampo azzurro che dice "questo".
   Senza, in "All files" uno spostamento riuscito non si distingue in niente da
   uno fallito — e' il guasto che ci e' costato mezzo pomeriggio. */
.vlt-moved{animation:vlt-flash 1.4s var(--ease)}
@keyframes vlt-flash{0%{box-shadow:0 0 0 3px rgba(26,115,193,.55)}100%{box-shadow:0 0 0 0 rgba(26,115,193,0)}}
.vlt-leaving{opacity:0;transform:scale(.92);transition:opacity .25s var(--ease),transform .25s var(--ease)}

/* --- il selettore di cartella -------------------------------------------- */
/* Si naviga: percorso in cima, elenco in mezzo, e il pulsante sposta sempre
   dentro la cartella che si sta guardando. Un <select> con l'albero appiattito
   regge nove cartelle e crolla a cento. */
.vlt-modal__box--tall{max-width:560px}
.vlt-picker{padding:16px 20px 6px}
.vlt-picker__what{margin:0 0 12px;color:var(--muted);font-size:13.5px}

.vlt-picker__search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
    border-radius:var(--radius);padding:0 11px;background:var(--paper);color:var(--muted)}
.vlt-picker__search:focus-within{outline:2px solid var(--isb-blue);outline-offset:-2px}
.vlt-picker__search input{flex:1;border:0;outline:0;padding:10px 0;font-size:14px;background:none;color:var(--ink)}

.vlt-picker__crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;margin:11px 0 7px;min-height:22px}
.vlt-picker__crumb{background:none;border:0;padding:3px 7px;border-radius:var(--radius);
    font:inherit;font-size:12.5px;color:var(--isb-blue);cursor:pointer;max-width:170px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vlt-picker__crumb:hover{background:#eef3f8;text-decoration:underline}
.vlt-picker__crumb:last-child{color:var(--isb-dark);font-weight:700}
.vlt-picker__sep{color:#b9c2cc;font-size:12px}
.vlt-picker__hint{font-size:12.5px;color:var(--muted);padding:3px 2px}

.vlt-picker__list{list-style:none;margin:0;padding:0;max-height:270px;overflow-y:auto;
    border:1px solid var(--line);border-radius:var(--radius);background:#fbfcfd}
.vlt-picker__row{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
    border-bottom:1px solid var(--line);font-size:13.5px}
.vlt-picker__row:last-child{border-bottom:0}
.vlt-picker__row:hover{background:#eef3f8}
.vlt-picker__row--up{color:var(--muted)}
.vlt-picker__ico{flex-shrink:0;font-size:14px;line-height:1}
.vlt-picker__name{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlt-picker__path{flex:1;min-width:0;color:var(--muted);font-size:12px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
.vlt-picker__in{margin-left:auto;color:#b9c2cc;flex-shrink:0}
.vlt-picker__empty{padding:16px 12px;color:var(--muted);font-size:13px;text-align:center}

/* --- il lucchetto -------------------------------------------------------- */
/* Forma + parola, come ogni altro stato del portale: un lucchetto disegnato
   nell'angolo, il bordo ambrato, e il titolo che dice cosa impedisce. Non un
   bordino colorato e basta, che a monitor spento non dice niente a nessuno. */
.vlt-lock{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;
          background:var(--isb-gold);color:#3a2c07;display:flex;align-items:center;
          justify-content:center;font-size:11px;line-height:1;z-index:3;
          box-shadow:0 1px 3px rgba(0,0,0,.25)}
.vlt-tile.is-locked{border-color:#e0bb62}
.vlt-tile.is-locked .vlt-tile__shot{background:#fbf6e9}
.vlt-row.is-locked{background:#fdfaf1}
.vlt-row.is-locked .vlt-row__icon{color:#8a6d1f}
/* Chiuso col lucchetto non si trascina, e il puntatore lo dice prima del clic. */
.vlt-tile.is-locked,.vlt-row.is-locked{cursor:not-allowed}
.vlt-tile.is-locked .vlt-tile__name,.vlt-row.is-locked .vlt-row__name{cursor:pointer}
.vlt-modal__say{margin:0 20px 10px;font-size:13px;line-height:1.5}

/* --- la barra di avanzamento nella finestra ------------------------------ */
.vlt-prog{height:6px;margin:0 20px 10px;background:#eceff3;border-radius:999px;overflow:hidden}
.vlt-prog__fill{height:100%;width:0;border-radius:999px;background:var(--warn);
                transition:width .35s var(--ease)}
/* Quando non si sa ancora quanto manca: una striscia che scorre. Ferma a zero
   sembrerebbe un blocco, ed e' il momento in cui la gente ricarica la pagina. */
.vlt-prog.is-waiting .vlt-prog__fill{width:38%;animation:vlt-slide 1.1s var(--ease) infinite}
@keyframes vlt-slide{0%{margin-left:-38%}100%{margin-left:100%}}
.vlt-prog--blue .vlt-prog__fill{background:var(--isb-blue)}

/* ===========================================================================
   Le conversazioni con l'assistente — rifatte il 23/09/2026.

   Prima era un filo unico con le proposte accatastate e un campo di scrittura
   messo li'. Adesso: elenco dei discorsi a sinistra, discorso a destra, e la
   proposta viva e' un riquadro solo, evidente, in mezzo agli altri messaggi.
   =========================================================================== */

/* Due colonne, non tre: l'elenco dei discorsi e il discorso. L'albero delle
   cartelle qui non serve — il portale ha gia' la sua barra — e tenerlo
   significava tre elenchi affiancati col discorso schiacciato in fondo. */
/* Una colonna sola: lo storico e' finito in una tendina in cima. Una colonna
   fissa per una cosa che si consulta di rado toglieva larghezza alla cosa che
   si guarda sempre. */
/* Due colonne quando l'albero e' aperto, una sola quando e' chiuso. La
   conversazione resta a sinistra, dove l'occhio torna a ogni riga. */
.vlt-talk{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;min-width:0;
    /* L'altezza si ferma PRIMA del bordo dello schermo, non esattamente su di
       esso: sopra c'e' la barra del portale, sotto il margine del contenitore
       e il pie' di pagina. Sbagliare per difetto lascia un po' di respiro;
       sbagliare per eccesso rimette alla pagina la barra di scorrimento che
       stiamo togliendo — e fra i due errori uno solo si vede. */
    height:calc(100vh - var(--topbar-h) - 150px);min-height:440px}
.vlt-talk[data-tree="0"]{grid-template-columns:minmax(0,1fr)}
.vlt-talk[data-tree="0"] .vlt-talk__tree{display:none}
@media (max-width:1100px){
  .vlt-talk{grid-template-columns:minmax(0,1fr)}
  .vlt-talk__tree{display:none}
}
@media (max-width:900px){.vlt-talk{height:auto}}

.vlt-talk__tree{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
                box-shadow:var(--shadow);padding:8px;height:100%;overflow-y:auto;align-self:start;
                max-height:100%}
.vlt-talk__treehead{padding:6px 10px 10px}
.vlt-talk__treehead span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
                         color:var(--muted);font-weight:700}
.vlt-talk__treehead em{display:block;font-style:normal;font-size:11px;color:#9aa3ad;margin-top:2px}

/* --- l'elenco dei discorsi ------------------------------------------------ */
/* COME UNA CHAT, E NON COME UNA PAGINA.
   Il pannello occupa l'altezza dello schermo e NON si muove: scorrono solo i
   messaggi, dentro, e la conversazione si apre in fondo — sull'ultima cosa
   detta, non sulla prima. Il campo di scrittura sta fuori da quello
   scorrimento e quindi non scappa mai via.
   Il difetto di prima non erano le barre interne: erano TRE annidate (elenco,
   discorso, e i messaggi lunghi dentro il discorso), e con la rotella si
   muoveva la cosa sbagliata a seconda di dov'era il mouse. Ne resta una per
   pannello, ed e' quella giusta. */
/* --- l'intestazione, e lo storico che ci sta dentro ---------------------- */
.vlt-talk__ident{min-width:0}
.vlt-talk__tools{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}

.vlt-hist{position:relative}
.vlt-hist__menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:330px;max-width:86vw;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);overflow:hidden;max-height:60vh;overflow-y:auto}
.vlt-hist__group{padding:9px 13px 5px;font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);background:#fafbfc;border-bottom:1px solid var(--line)}
.vlt-hist__group em{display:block;font-style:normal;font-weight:400;font-size:10.5px;
    letter-spacing:0;text-transform:none;color:#9aa3ad;margin-top:2px}
.vlt-hist__item{display:block;padding:10px 13px;border-bottom:1px solid var(--line);
    text-decoration:none;color:inherit}
.vlt-hist__item:last-child{border-bottom:0}
.vlt-hist__item:hover{background:#f7f9fc}
.vlt-hist__item.is-here{background:#eef4fb;box-shadow:inset 3px 0 0 var(--isb-blue)}
.vlt-hist__title{display:block;font-size:13px;font-weight:600;color:var(--isb-dark);line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vlt-hist__meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* Via le pagine bianche: sta in fondo allo storico, separato da una riga, e
   dice sempre quante ne toglie. Non e' rosso — non sta cancellando niente di
   cui qualcuno sentira' la mancanza. */
.vlt-hist__sweep{display:flex;align-items:center;gap:7px;width:100%;padding:10px 13px;
    border:0;border-top:1px solid var(--line);background:#fafbfc;cursor:pointer;
    font-size:12px;font-weight:600;color:var(--muted);text-align:left;
    /* e' una frase, non un'etichetta: le maiuscole di ogni pulsante qui
       griderebbero una cosa che non ha niente da gridare */
    text-transform:none;letter-spacing:0}
.vlt-hist__sweep:hover{background:#f3f5f8;color:var(--isb-dark)}
.vlt-hist__sweep svg{flex-shrink:0}

/* Il cestino della conversazione: un pulsante come gli altri finche' non ci si
   passa sopra, e li' dice con il colore quello che fa. */
.vlt-talk__bin:hover:not(:disabled){border-color:#e3b4ad;color:#b03a2e;background:#fdf4f2}

.vlt-talk__main{display:flex;flex-direction:column;min-width:0;background:var(--paper);
    border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
    height:100%;overflow:hidden}
.vlt-talk__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.vlt-talk__head h2{margin:0;font-size:16.5px;color:var(--isb-dark);line-height:1.3}
.vlt-talk__head p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}

.vlt-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
            padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.vlt-talk .vlt-note{margin:12px 18px 0}

.vlt-msg{border-radius:var(--radius-lg);padding:12px 15px;font-size:14px;line-height:1.6;max-width:86%}
.vlt-msg--office{background:var(--isb-blue, #1a73c1);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.vlt-msg--office .vlt-msg__who{color:rgba(255,255,255,.72)}
.vlt-msg--ai{background:#f4f6f9;border:1px solid var(--line);align-self:flex-start;
             border-bottom-left-radius:4px;max-width:92%}
/* Le note di sistema: piccole, grigie, in mezzo. Non sono cose che qualcuno
   ha detto, e non devono avere l'aria di esserlo. */
.vlt-msg--event{align-self:center;background:#f4f6f9;border:1px solid var(--line);border-radius:999px;
                color:var(--muted);font-size:12px;text-align:center;padding:5px 14px;max-width:82%;
                line-height:1.5}
.vlt-msg--event.is-long{border-radius:var(--radius);text-align:left;max-width:100%;width:100%}
.vlt-msg__full{display:block;white-space:pre-wrap;margin-top:6px;
               font-size:11.5px;line-height:1.55}
.vlt-msg__more{background:none;border:0;padding:0 0 0 6px;color:var(--isb-blue);cursor:pointer;
               font:inherit;font-size:11.5px;text-decoration:underline}

/* Il corpo di un messaggio non supera la larghezza in cui un occhio riesce a
   tornare a capo senza perdere la riga. */
.vlt-msg__body{max-width:68ch}
.vlt-msg__who{font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--muted);
              margin-bottom:5px;display:flex;align-items:center;gap:5px}
.vlt-msg__body{white-space:pre-wrap}

/* --- la proposta ---------------------------------------------------------- */
/* Quella VIVA e' l'unica con lo sfondo bianco e il bordo dorato: in mezzo a
   una conversazione lunga si trova senza cercarla. */
.vlt-plan{margin-top:12px;border-radius:var(--radius);font-size:13.5px}
.vlt-plan--live{background:var(--paper);border:1.5px solid var(--isb-gold);padding:12px 13px;
                box-shadow:0 2px 8px rgba(212,164,55,.18)}
.vlt-plan__title{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;color:#8a6d1f;margin-bottom:9px}
.vlt-plan--past .vlt-plan__title{color:var(--muted);text-transform:none;letter-spacing:0;font-size:12px}
.vlt-plan__row{display:flex;gap:9px;align-items:flex-start;padding:5px 0;cursor:pointer}
.vlt-plan__row--past{cursor:default;color:var(--muted)}
.vlt-plan__row input{margin-top:3px;flex-shrink:0;accent-color:var(--isb-blue)}
.vlt-plan__mark{line-height:0;margin-top:2px;flex-shrink:0;opacity:.6}
.vlt-plan__what{flex:1;min-width:0}
.vlt-plan__why{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.5}
.vlt-plan__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:11px;
                padding-top:10px;border-top:1px solid var(--line)}
.vlt-plan__acts .small{color:var(--muted);flex:1;min-width:150px}
/* Superata: una riga grigia, non un elenco di spunte che sembrano ancora buone. */
.vlt-plan--gone{display:flex;align-items:center;gap:7px;padding:8px 11px;background:#eceff3;
                color:var(--muted);font-size:12.5px}
.vlt-plan--past{background:#f9fafb;border:1px solid var(--line);padding:10px 12px}

/* --- il campo di scrittura ------------------------------------------------ */
/* Una sola cassa arrotondata col bottone dentro, come ogni messaggistica che
   la gente usa gia'. Il testo cresce mentre si scrive invece di stare in due
   righe fisse con una barra di scorrimento. */
.vlt-say{display:flex;align-items:flex-end;gap:8px;margin:10px 18px 4px;padding:7px 7px 7px 14px;
    border:1px solid var(--line);border-radius:22px;background:var(--paper);flex-shrink:0;
    transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.vlt-say:focus-within{border-color:var(--isb-blue);box-shadow:0 0 0 3px rgba(26,115,193,.12)}
.vlt-say textarea{flex:1;min-width:0;border:0;outline:0;resize:none;background:none;
    font:inherit;font-size:14px;line-height:1.5;padding:7px 0;max-height:160px;color:var(--ink)}
.vlt-say button{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
    background:var(--isb-blue);color:#fff;display:flex;align-items:center;justify-content:center}
.vlt-say button:hover{background:var(--isb-dark)}
.vlt-say button[disabled]{opacity:.4;cursor:not-allowed}
.vlt-say__foot{margin:0 18px 14px;font-size:11.5px;color:var(--muted)}
.vlt-say--closed{justify-content:space-between;align-items:center;border-style:dashed;
                 padding:12px 16px;margin-bottom:16px;color:var(--muted);font-size:13.5px}

/* La barra dentro l'archivio: la radice, le cartelle, il cestino. Nient'altro —
   tutto il resto lo dice gia' il menu del portale qui accanto. */
.vlt-rail__root{font-weight:700}
.vlt-rail__hint{margin:2px 10px 0;font-size:11.5px;color:var(--muted);line-height:1.45}
.vlt-rail__bin{color:var(--muted)}
.vlt-fold__why{margin:0 0 8px;font-size:12px;color:var(--muted);line-height:1.55}
.vlt-fold__why em{font-style:italic}

/* --- la scelta su uno ZIP appena svuotato -------------------------------- */
/* Non e' un avviso: e' una domanda con due risposte, e deve avere l'aria di
   una domanda. Bordo dorato come la proposta viva, perche' e' la stessa cosa —
   qualcosa che aspetta una decisione. */
.vlt-choice{margin:12px 18px 0;background:var(--paper);border:1.5px solid var(--isb-gold);
    border-radius:var(--radius-lg);padding:14px 16px;box-shadow:0 2px 8px rgba(212,164,55,.16)}
.vlt-choice__head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--isb-dark);
                  margin-bottom:8px}
.vlt-choice__what{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.vlt-choice__eg{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.vlt-choice__junk{margin:0 0 10px;padding:8px 11px;background:#fbf3f2;border:1px solid #f0cfca;
    border-radius:var(--radius);font-size:12.5px;line-height:1.55;color:var(--ink)}
.vlt-choice__link{background:none;border:0;padding:0 0 0 4px;color:var(--warn);cursor:pointer;
                  font:inherit;font-size:12.5px;text-decoration:underline}
.vlt-choice__acts{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:9px}
.vlt-choice__foot{margin:0;font-size:12px;color:var(--muted);line-height:1.55}

/* L'invito che compare nel vassoio quando uno ZIP ha finito: e' l'unico
   momento in cui chi ha caricato sta ancora guardando li'. */
.vlt-up__go{display:block;margin-top:7px;font-size:12.5px;font-weight:700;color:var(--isb-blue);
            text-decoration:none;padding:6px 9px;background:#eef3f8;border-radius:var(--radius)}
.vlt-up__go:hover{background:#e2ecf6;text-decoration:underline}

/* La cartella fissa: si distingue dalle altre perche' NON e' come le altre —
   non si rinomina, non si sposta, non si cancella. Tratteggiata, come lo spazio
   che aspetta qualcosa invece del mobile che lo contiene. */
.vlt-tile--inbox{border-style:dashed;border-color:#c4cdd7}
.vlt-tile--inbox .vlt-tile__shot{aspect-ratio:auto;height:54px;
    background:repeating-linear-gradient(135deg,#f4f6f9,#f4f6f9 8px,#eef1f5 8px,#eef1f5 16px)}
.vlt-tile--inbox .vlt-tile__glyph{color:#8f9aa6}
.vlt-tile--inbox .vlt-tile__glyph svg{width:22px;height:22px}
.vlt-row--inbox{background:#fafbfc}
.vlt-row--inbox .vlt-row__icon{background:#eceff3;color:#6b7784}

/* --- l'assistente che archivia ------------------------------------------- */
.vlt-auto__now{margin:0 0 10px;font-size:14px;color:var(--isb-dark);font-weight:600}
.vlt-modal__body .vlt-prog{margin:0 0 10px}
.vlt-auto__counts{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 12px;font-size:12.5px;color:var(--muted)}
.vlt-auto__ok b{color:var(--ok)}
.vlt-auto__aside b{color:var(--isb-gold)}
.vlt-auto__log{max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);
               background:#fbfcfd;padding:8px 10px;font-size:12px;line-height:1.6}
.vlt-auto__line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vlt-auto__line.is-ok{color:var(--ok)}
.vlt-auto__line.is-aside{color:#8a6d1f}
.vlt-auto__line.is-bad{color:var(--warn)}
.vlt-auto__line.is-muted{color:var(--muted)}
.vlt-auto__why{margin:11px 0 0;font-size:12px;color:var(--muted);line-height:1.55}

/* Con cinque azioni la barra si allarga, e su schermo stretto le parole
   spariscono lasciando le icone.
   NIENTE flex-wrap QUI, ed e' la ragione per cui c'e' questo commento: la barra
   sta a posizione fissa e non ha una larghezza propria — se la si lascia andare
   a capo, il calcolo della larghezza collassa e i pulsanti si impilano in una
   striscia verticale di ventotto pixel fuori dallo schermo. Succede senza
   errori e senza avvisi: la barra risulta presente, accesa e "visibile", ma
   nessuno la vede. */
.vlt-bulk{flex-wrap:nowrap;border-radius:999px;max-width:calc(100vw - 20px)}
@media (max-width:820px){.vlt-bulk button span{display:none}}

/* Il rettangolo di selezione. pointer-events:none e' indispensabile: senza,
   il rettangolo stesso finisce sotto il puntatore e il calcolo di cosa sta
   toccando impazzisce. */
.vlt-marquee{position:absolute;z-index:50;pointer-events:none;
             border:1px solid var(--isb-blue);background:rgba(26,115,193,.12);
             border-radius:2px}

/* ===========================================================================
   L'ATTRIBUTO hidden PERDE CONTRO UN display ESPLICITO.
   Il browser nasconde [hidden] con una regola propria che vale meno di
   qualunque regola scritta qui: `.vlt-menu button{display:flex}` la sovrascrive,
   e l'elemento resta in vista anche dopo che lo script lo ha nascosto.
   Succede in silenzio — lo script ha fatto la cosa giusta, il foglio di stile
   la disfa — ed e' il motivo per cui il menu col tasto destro mostrava
   "Rename" e "Download" con cinque documenti scelti.
   Ogni volta che si scrive display: su qualcosa che lo script nasconde, serve
   anche la riga qui sotto.
   =========================================================================== */
.vlt-menu button[hidden],
.vlt-bulk button[hidden],
.vlt-msg__full[hidden],
.vlt-tile[hidden],
.vlt-row[hidden]{display:none !important}

/* --- il selettore di simbolo per una cartella ---------------------------- */
.vlt-icons{max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);
           padding:6px 8px 10px;background:#fbfcfd;margin-bottom:10px}
.vlt-icons__group{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
                  color:var(--muted);margin:8px 0 5px}
.vlt-icons__group:first-child{margin-top:2px}
.vlt-icons__row{display:flex;flex-wrap:wrap;gap:4px}
.vlt-icons__one{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
                border:1px solid transparent;border-radius:var(--radius);background:none;
                cursor:pointer;color:var(--muted)}
.vlt-icons__one:hover{background:#eef3f8;color:var(--isb-dark)}
.vlt-icons__one.is-on{background:var(--isb-blue);border-color:var(--isb-blue);color:#fff}

/* ---------------------------------------------------------------------------
   Attribuzione provvisoria — quando l'assistente colloca un documento senza
   esserne sicuro.
   Forma + parola, mai il solo colore: un cartellino che si legge. Vive
   sull'angolo del riquadro, dove non copre ne' l'anteprima ne' il nome.
--------------------------------------------------------------------------- */
.vlt-tile__prov{
  position:absolute; top:8px; right:8px; z-index:2;
  padding:2px 7px; border-radius:999px;
  background:#fff; border:1px dashed #b45309; color:#92400e;
  font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  line-height:1.5; pointer-events:auto; cursor:help;
}
.vlt-chip--prov{ border:1px dashed #b45309; background:#fffbeb; color:#92400e; }

/* Il cartello in cima all'archivio: cosa aspetta una seconda occhiata. */
.vlt-second{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:11px 14px;
  border:1px solid #fcd34d; border-left:3px solid #b45309;
  border-radius:10px; background:#fffbeb; color:#78350f;
}
.vlt-second svg{ flex-shrink:0; color:#b45309; }
.vlt-second__what{ flex:1 1 320px; font-size:13px; line-height:1.55; }
.vlt-second__what strong{ font-weight:700; }
.vlt-second__acts{ display:flex; gap:8px; flex-shrink:0; }

/* ---------------------------------------------------------------------------
   "Open it on this computer" — il riquadro che porta un documento dentro il
   programma che uno ha davvero.
   Regola di questo riquadro: si vede UNA strada per volta. Mostrarle tutte e
   due insieme e' il modo piu' rapido di non farne capire nessuna.
--------------------------------------------------------------------------- */
.vlt-open__q{ margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--ink) }
.vlt-open__btns{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px }
.vlt-open__note{ margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--muted) }
.vlt-open__note:first-child{ margin-top:0 }

.vlt-open__addr{ display:flex; gap:8px; align-items:center; margin:12px 0 0 }
.vlt-open__addr input{
  flex:1; min-width:0; font-size:12px; font-family:var(--mono, ui-monospace, monospace);
  padding:7px 9px; border:1px solid var(--line); border-radius:7px;
  background:var(--wash, #f6f8fa); color:var(--ink);
}
.vlt-open__addr .btn{ flex-shrink:0 }

.vlt-open__how{ margin:12px 0 0; padding:0; list-style:none }
.vlt-open__how li{
  font-size:12.5px; line-height:1.55; color:var(--ink);
  padding:6px 0 6px 13px; border-top:1px solid var(--line); position:relative;
}
.vlt-open__how li:first-child{ border-top:0 }
.vlt-open__how li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:4px; height:4px; border-radius:50%; background:var(--muted);
}
.vlt-open__how strong{ font-weight:650 }

/* ---------------------------------------------------------------------------
   La scheda di un documento: due scelte grandi, poi quello che si legge.
   Da un documento si vuole una cosa di due — aprirlo col programma che si ha,
   o portarsene via una copia. Quelle due stanno in cima, alla larghezza della
   pagina e alla pari; tutto il resto viene dopo.
--------------------------------------------------------------------------- */
.vlt-two{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  align-items:start; margin-bottom:16px;
}
.vlt-two > .card{ margin:0; height:100% }

.vlt-under{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;
}
.vlt-under > *{ margin:0 !important }

/* L'anteprima, quando c'e' per davvero, si prende la pagina intera invece di
   una colonna: e' il motivo per cui si apre un PDF o una foto. */
.vlt-prev--wide{ width:100%; margin:0 0 16px; min-height:520px }
.vlt-prev--wide img{ max-height:70vh }
.vlt-prev--wide iframe{ min-height:70vh }

@media (max-width: 900px){
  .vlt-two, .vlt-under{ grid-template-columns:1fr }
  .vlt-prev--wide{ min-height:380px }
}

/* IL RETTANGOLO DI SELEZIONE HA BISOGNO DI VUOTO DA CUI PARTIRE.
   Si disegna premendo dove non c'e' niente e tirando. Alla radice dell'archivio
   c'era sempre spazio sotto le poche cartelle, e infatti li' funzionava; dentro
   una cartella i riquadri riempivano tutto e ogni pressione cadeva su un
   documento — che vuol dire "trascina questo", non "seleziona da qui".
   Un'altezza minima garantisce la striscia di vuoto in fondo, in ogni cartella
   e in tutte e due le viste. */
#vlt-area{ min-height:58vh }

/* ---------------------------------------------------------------------------
   La conversazione, perche' sembri una conversazione
   ---------------------------------------------------------------------------
   Il filo prende un fondo appena piu' scuro della carta: cosi' le bolle
   GALLEGGIANO invece di essere rettangoli disegnati sul bianco. E' l'unica
   differenza fra qualcosa che sembra un elenco di riquadri e qualcosa che
   sembra una chat.
--------------------------------------------------------------------------- */
.vlt-talk__main .vlt-thread{ background:#f5f7fa }

/* Chi parla si riconosce dal lato e dal colore. La coda — l'angolo squadrato —
   punta verso il suo bordo, come in qualunque messaggistica. */
.vlt-talk__main .vlt-msg--ai{
  background:var(--paper); border-color:#e3e8ee;
  box-shadow:0 1px 2px rgba(16,32,52,.06);
}
.vlt-talk__main .vlt-msg--office{ box-shadow:0 1px 2px rgba(26,115,193,.22) }

/* Il faccino a lato: piccolo, muto, e solo per capire in un colpo d'occhio da
   che parte viene ogni riga quando il filo e' lungo. */
.vlt-talk__main .vlt-msg--ai,
.vlt-talk__main .vlt-msg--office{ position:relative }
.vlt-talk__main .vlt-msg--ai::before,
.vlt-talk__main .vlt-msg--office::before{
  content:""; position:absolute; top:2px; width:26px; height:26px; border-radius:50%;
  background-repeat:no-repeat; background-position:center; background-size:14px 14px;
}
.vlt-talk__main .vlt-msg--ai::before{
  left:-34px; background-color:#eef3f9; border:1px solid #e0e7f0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a73c1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/></svg>");
}
.vlt-talk__main .vlt-msg--office::before{
  right:-34px; background-color:#e8eef6; border:1px solid #dbe4ef;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23476a91' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.4'/><path d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/></svg>");
}
/* Con i faccini le bolle si stringono un po', per non finirci sotto. */
.vlt-talk__main .vlt-thread{ padding-left:52px; padding-right:52px }
.vlt-talk__main .vlt-msg--event{ margin-left:-34px; margin-right:-34px }

/* Due righe di seguito della stessa persona non ripetono il nome ne' il
   faccino: e' la stessa voce che continua a parlare. */
.vlt-talk__main .vlt-msg--ai + .vlt-msg--ai::before,
.vlt-talk__main .vlt-msg--office + .vlt-msg--office::before{ display:none }
.vlt-talk__main .vlt-msg--ai + .vlt-msg--ai > .vlt-msg__who,
.vlt-talk__main .vlt-msg--office + .vlt-msg--office > .vlt-msg__who{ display:none }

/* L'ATTESA DEVE MUOVERSI.
   Una bolla ferma con dentro "Thinking..." e una pagina bloccata, sullo
   schermo, sono la stessa immagine — e infatti veniva presa per una pagina
   bloccata. Tre puntini che si alzano a turno costano niente e dicono, senza
   parole, che qualcuno sta ancora lavorando. */
#vlt-thinking .vlt-msg__body::after{
  content:""; display:inline-block; vertical-align:middle; margin-left:7px;
  width:30px; height:8px;
  background-image:
    radial-gradient(circle 3px at 3px 4px, var(--muted) 99%, transparent 0),
    radial-gradient(circle 3px at 15px 4px, var(--muted) 99%, transparent 0),
    radial-gradient(circle 3px at 27px 4px, var(--muted) 99%, transparent 0);
  animation:vlt-dots 1.1s infinite steps(1);
}
@keyframes vlt-dots{
  0%   { opacity:.35 }
  33%  { opacity:.65 }
  66%  { opacity:1 }
  100% { opacity:.35 }
}
/* Chi ha chiesto di non vedere animazioni non le vede: resta la bolla, che
   comunque compare e sparisce. */
@media (prefers-reduced-motion: reduce){
  #vlt-thinking .vlt-msg__body::after{ animation:none; opacity:.7 }
}

/* La bolla appena scritta da chi guarda: entra da sotto, come un messaggio
   che parte davvero. */
.vlt-msg.is-eco{ animation:vlt-eco .18s var(--ease) both }
@keyframes vlt-eco{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

@media (max-width: 760px){
  /* Sullo stretto i faccini rubano larghezza alle parole: via loro. */
  .vlt-talk__main .vlt-msg--ai::before,
  .vlt-talk__main .vlt-msg--office::before{ display:none }
  .vlt-talk__main .vlt-thread{ padding-left:14px; padding-right:14px }
  .vlt-talk__main .vlt-msg--event{ margin-left:0; margin-right:0 }
}

/* ---------------------------------------------------------------------------
   NASCOSTO VUOL DIRE NASCOSTO. Regola di chiusura, valida per tutto il portale.
   ---------------------------------------------------------------------------
   Alla riga 182 c'e' `button,.btn{display:inline-block}`. Quella regola batte
   la regola del browser che nasconde gli elementi con l'attributo `hidden`,
   perche' la regola del browser vale meno di qualunque cosa scritta in un
   foglio di stile. Conseguenza: OGNI pulsante nascosto del portale restava
   visibile — sia quelli nascosti nel codice della pagina, sia, soprattutto,
   quelli che lo script nasconde e riscopre mentre si lavora.
   Si vedeva bene nel pannello dell'archiviazione: "Stop" e "Done" comparivano
   insieme, sia durante il lavoro sia a lavoro finito, quindi nessuno dei due
   diceva piu' niente.
   Non si toglie la regola della riga 182 (la usano centinaia di pulsanti):
   si dichiara qui, una volta sola, che `hidden` vince su tutto.
--------------------------------------------------------------------------- */
[hidden]{ display:none !important }

/* L'unica eccezione voluta: la freccetta dell'albero delle cartelle sparisce
   ma tiene il suo posto, altrimenti i rami senza figli si disallineano da
   quelli che ce li hanno. Va riaffermata qui, dopo la regola di sopra. */
.vlt-tree__twist[hidden]{ visibility:hidden; display:inline-block !important }

/* ---------------------------------------------------------------------------
   Il quaderno: cosa l'archivio ha imparato.
   Ogni riga dice tre cose — da dove viene la regola, cosa dice, e dove vale —
   perche' una regola di cui non si sa la provenienza non si puo' giudicare, e
   una che non si puo' giudicare non si cancella mai.
--------------------------------------------------------------------------- */
.vlt-kb{ list-style:none; margin:0; padding:0 }
.vlt-kb__row{
  display:flex; gap:12px; align-items:flex-start;
  padding:11px 0; border-top:1px solid var(--line);
}
.vlt-kb__row:first-child{ border-top:0 }
.vlt-kb__src{
  flex-shrink:0; margin-top:1px; padding:2px 8px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  cursor:help;
}
/* Dettata da una persona: vale piu' di tutte, e si vede. */
.vlt-kb__src--hint{ background:#e8f0fa; color:#1a4e86; border:1px solid #c6dcf3 }
/* Imparata da una correzione: gratis, e affidabile quanto il gesto che l'ha fatta. */
.vlt-kb__src--correction{ background:#eaf6ee; color:#256b3c; border:1px solid #c9e6d4 }
/* Dedotta leggendo: la piu' debole delle tre, e non deve sembrare le altre. */
.vlt-kb__src--study{ background:#f4f6f9; color:var(--muted); border:1px dashed #ccd5de }
.vlt-kb__main{ flex:1; min-width:0 }
.vlt-kb__note{ display:block; font-size:13.5px; line-height:1.55; color:var(--ink) }
.vlt-kb__meta{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted) }

/* Il riassunto dei caricamenti andati lisci. Resta appiccicato in cima al
   vassoio: e' l'unica riga che cresce, e deve restare sotto gli occhi mentre
   quelle con una domanda scorrono sotto di lei. */
.vlt-up--tally{
  position:sticky; top:0; z-index:1;
  background:#f1f7f3; border-bottom:1px solid #d8e8de;
}
.vlt-up--tally .vlt-up__name{ font-weight:650 }

/* La barra di tutto il mucchio. Sta sopra il conteggio, appiccicata in cima:
   e' la sola che risponde a "quanto manca", che e' la domanda di chi ha appena
   lasciato cadere trecento file. */
.vlt-up--all{
  position:sticky; top:0; z-index:2;
  background:var(--paper); border-bottom:1px solid var(--line);
}
.vlt-up--all .vlt-up__name{ font-weight:650 }
.vlt-up--all .vlt-up__track{ height:5px }
.vlt-up--all .vlt-up__fill{ background:var(--isb-blue) }
/* Il conteggio scorre sotto la barra, non sopra. */
.vlt-up--tally{ top:44px; z-index:1 }

/* La finestra non cresce oltre lo schermo. Il corpo scorre, la testata e i
   pulsanti restano dove sono: su un portatile una finestra che supera
   l'altezza dello schermo nasconde proprio i pulsanti con cui si chiude. */
.vlt-modal__box{ max-height:88vh; display:flex; flex-direction:column }
.vlt-modal__top,
.vlt-modal__acts{ flex-shrink:0 }
.vlt-modal__body{ overflow-y:auto; min-height:0 }

/* LA TESTATA DELLA CONVERSAZIONE NON SCHIACCIA IL TITOLO.
   I quattro pulsanti non si restringono (giustamente: un pulsante a meta' non
   si legge), ma il titolo accanto a loro si restringeva fino a una parola per
   riga — "The / 3 it / could / not / place" — e quella e' l'unica cosa che
   dice di cosa si sta parlando. Ora il titolo tiene la sua larghezza minima e
   sono i pulsanti a scendere sotto quando non ci stanno. */
.vlt-talk__head{ flex-wrap:wrap }
.vlt-talk__ident{ flex:1 1 260px }
.vlt-talk__tools{ margin-left:auto }

/* ---------------------------------------------------------------------------
   Le note di servizio nella conversazione — "deciso questo", "letti quelli".
   ---------------------------------------------------------------------------
   Non sono cose che qualcuno ha detto, e non devono avere l'aria di esserlo:
   restano piccole, grigie, in mezzo.
--------------------------------------------------------------------------- */

/* IL RIENTRO DELLA PRIMA RIGA ERA IL CODICE STESSO.
   .vlt-msg--event aveva white-space:pre-wrap, e il modello di pagina scrive
   quel riquadro rientrato di diciotto spazi: quegli spazi finivano sullo
   schermo, spingendo dentro la prima riga di ogni nota. Il testo lungo arriva
   gia' con le sue interruzioni di riga trasformate in marcatori, quindi
   pre-wrap non serviva a niente — serviva solo a stampare l'indentazione del
   sorgente. */
.vlt-talk__main .vlt-msg--event{ white-space:normal }

.vlt-talk__main .vlt-msg--event{
  font-size:12.5px; line-height:1.55; padding:7px 15px; max-width:74%;
  background:transparent; border:1px solid var(--line); color:var(--muted);
}
/* Quella lunga non e' una pillola: e' un paragrafo, e si legge da sinistra. */
.vlt-talk__main .vlt-msg--event.is-long{
  max-width:100%; text-align:left; background:#f7f9fb; padding:10px 14px;
}
.vlt-msg__short{ display:block }

/* "show all" e' un link, non un pulsante: senza questo eredita il maiuscolo e
   la spaziatura di TUTTI i pulsanti del portale e grida in mezzo a una nota
   che deve stare zitta. */
.vlt-msg__more{
  display:inline; margin-top:4px; padding:0;
  font-size:12px; font-weight:500; text-transform:none; letter-spacing:normal;
  line-height:inherit;
}
.vlt-msg__more:hover{ color:var(--isb-dark) }
/* Il riquadro resta in mezzo, il testo dentro comincia da sinistra: su una
   riga sola non cambia niente, su due il centrato si legge a fatica. */
.vlt-talk__main .vlt-msg--event{ text-align:left }

/* La barra che risponde a tutti i doppioni insieme. Sta in cima, sopra ogni
   altra cosa del vassoio: e' l'unica che puo' chiudere in un gesto una coda di
   centinaia di domande identiche. */
.vlt-up--dupes{
  position:sticky; top:0; z-index:3;
  background:#fff8ec; border-bottom:1px solid #f0dfbd;
}
.vlt-up--dupes .vlt-up__name{ font-weight:650; display:block; margin-bottom:7px }
.vlt-up--dupes .vlt-up__ask{ margin-top:0 }
/* La barra dei doppioni scavalca le altre due, che scendono sotto. */
.vlt-up--all{ top:0 }
.vlt-up--tally{ top:44px }

/* Il segno che apre un ramo dell'albero: piu' quando e' chiuso, meno quando e'
   aperto. La freccia che ruotava diceva "vai di la'"; il piu' dice "qui dentro
   ce n'e' dell'altro", che e' quello che un ramo con figlie significa davvero.
   Lo scambio e' tutto qui, senza passare dallo script: un ramo aperto resta un
   meno anche se la pagina viene ridisegnata. */
.vlt-tree__twist svg{ transition:none }
.vlt-tree__twist.is-open svg{ transform:none }
.vlt-tree__minus{ display:none }
.vlt-tree__twist.is-open .vlt-tree__plus{ display:none }
.vlt-tree__twist.is-open .vlt-tree__minus{ display:inline-block }
.vlt-tree__twist .vlt-tree__plus,
.vlt-tree__twist .vlt-tree__minus{ line-height:0 }

/* Le tre politiche dell'archiviazione automatica. Una sotto l'altra, con la
   spiegazione accanto: sono tre mestieri diversi, non tre livelli di uno
   stesso cursore, e vanno lette prima di sceglierne una. */
.vlt-auto__how{ display:flex; flex-direction:column; gap:2px; margin:4px 0 14px }
/* Qui "label" non e' l'etichetta di un campo: e' una frase da leggere. La
   regola generale del portale le scrive tutte in maiuscolo spaziato — giusto
   per "NOME" sopra una casella, illeggibile per tre righe di spiegazione. */
.vlt-auto__how label{
  display:flex; gap:10px; align-items:flex-start; cursor:pointer;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper);
  text-transform:none; letter-spacing:normal; font-size:13.5px;
  margin:0; color:var(--ink); font-weight:400;
}
.vlt-auto__how label:hover{ background:#f7f9fc }
.vlt-auto__how input{ margin-top:3px; flex-shrink:0; accent-color:var(--isb-blue) }
.vlt-auto__how strong{ display:block; font-size:13.5px; font-weight:650; color:var(--ink) }
.vlt-auto__how em{ display:block; font-style:normal; font-size:12px; line-height:1.5;
                   color:var(--muted); margin-top:2px }
.vlt-auto__how label:has(input:checked){ border-color:var(--isb-blue); background:#f2f7fc }

/* ---------------------------------------------------------------------------
   La zona pericolosa: cancellare tutto, svuotare il cestino.
   ---------------------------------------------------------------------------
   Stava in fondo alla pagina, scritta piccola e senza colore, per non essere
   premuta per curiosita'. Ma in una cartella da mille documenti "in fondo"
   vuol dire dopo trecento righe: chi la cerca non la trova, e chi non la cerca
   non ci arriva lo stesso. Ora sta in cima e si vede — con un bordo rosso a
   sinistra, non con un pulsante rosso. La guardia vera resta dov'e' sempre
   stata: la parola da digitare nella finestra, che ricontrolla il server.
--------------------------------------------------------------------------- */
.vlt-danger{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 16px; padding:11px 14px;
  border:1px solid #e7cfcb; border-left:3px solid var(--warn);
  border-radius:10px; background:#fdf6f5; color:#7b3a30;
}
.vlt-danger svg{ flex-shrink:0; color:var(--warn) }
.vlt-danger__what{ flex:1 1 320px; font-size:12.5px; line-height:1.55 }
.vlt-danger__go{
  flex-shrink:0; background:var(--paper); color:var(--warn);
  border:1px solid #e0b9b2;
}
.vlt-danger__go:hover{ background:var(--warn); color:#fff; border-color:var(--warn) }

/* Il punteggio di somiglianza su un risultato di ricerca. In alto a sinistra
   del riquadro, dove non copre ne' l'anteprima ne' il nome, e dalla parte
   opposta al cartellino "provisional" — i due possono capitare insieme. */
.vlt-tile__match{
  position:absolute; top:8px; left:8px; z-index:2;
  /* Il numero da solo non diceva di che numero si trattasse: "34" su
     un'anteprima puo' essere una pagina, un importo, un anno. Con la parola
     accanto e' una frase corta e non c'e' niente da indovinare. */
  padding:2px 8px; border-radius:999px; white-space:nowrap;
  background:#fff; border:1px solid var(--line); color:var(--muted);
  font-size:11px; font-weight:700; line-height:1.5; cursor:help;
}
/* Sopra il sessanta il documento e' davvero vicino a quello che si cercava:
   lo si vede senza leggere il numero. */
.vlt-tile__match.is-strong{ border-color:#bcd4ea; background:#eef4fb; color:#1a4e86 }
.vlt-chip--match{ border:1px solid var(--line); background:var(--paper); color:var(--muted) }

/* La scelta dentro una finestra di conferma: cosa fare dei documenti quando si
   cancella la cartella che li contiene. Sta li' e non altrove perche' e' la
   domanda che uno si pone proprio mentre legge "sara' rimossa". */
.vlt-also{
  display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  margin-top:12px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper);
  font-size:12.5px; line-height:1.55; font-weight:400;
  text-transform:none; letter-spacing:normal; color:var(--ink);
}
.vlt-also input{ margin-top:2px; flex-shrink:0; accent-color:var(--warn) }
.vlt-also:has(input:checked){ border-color:#e0b9b2; background:#fdf6f5 }

/* "To be filed" nell'albero: un posto come gli altri, ma tratteggiato — non e'
   una cartella che qualcuno ha creato, e' il pavimento dell'archivio. Lo stesso
   segno che porta il suo riquadro in mezzo alla pagina. */
.vlt-rail__inbox{ border:1px dashed var(--line); border-radius:8px }
.vlt-rail__inbox.is-active{ border-style:solid }

/* ── Photos of a lesson + the weekly letter's photographs (2026-09-25) ──────
   The verdict chip says its state with a SHAPE and a WORD: outlined + tick =
   may go, filled + padlock = forbidden, dashed = cannot be checked yet. */
.ph-letter{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:9px;line-height:1.6;white-space:nowrap}
.ph-letter--ok{border:1.5px solid #2f8a4c;color:#22703a;background:transparent}
.ph-letter--blocked{border:1.5px solid #b3261e;background:#b3261e;color:#fff}
.ph-letter--unknown{border:1.5px dashed #b9bec7;color:var(--muted);background:transparent}
.ph-letter--unreadable{border:1.5px dashed #b3261e;color:#b3261e;background:transparent}
.lb-photos{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:24px}
.lb-photos__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.lb-photos__head h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--isb-dark)}
.lb-photos__head h3 span{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:12px;margin-left:4px}
.lb-photos__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:12px}
.lb-photo{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.lb-photo > a{display:block;line-height:0;background:#eef0f3}
.lb-photo img{width:100%;height:130px;object-fit:cover;display:block}
.lb-photo figcaption{padding:8px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.lb-photo__title{font-size:12.5px;font-weight:600;color:var(--isb-dark);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lb-photo__chips{display:flex;gap:5px;flex-wrap:wrap}
.lb-photo__why{font-size:11px;color:var(--muted);line-height:1.4}
.lb-photo__actions{display:flex;gap:4px;margin-top:auto;padding-top:4px;flex-wrap:wrap;align-items:center}
.lb-photos__add{border-top:1px solid var(--line);padding-top:10px}
.lb-photos__add summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--isb-dark)}
.lb-photos__add form{margin-top:10px}
/* The weekly letter: one tile per photograph of the week, ticked = attached. */
.lb-lphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.lb-lphoto{position:relative;margin:0;text-transform:none;letter-spacing:0;font-weight:400;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);display:flex;flex-direction:column;cursor:pointer}
.lb-lphoto input[type=checkbox]{position:absolute;top:8px;left:8px;width:18px;height:18px;min-height:0;margin:0;z-index:2;accent-color:var(--isb-blue)}
.lb-lphoto.is-on{border-color:var(--isb-blue);box-shadow:0 0 0 2px rgba(26,115,193,.18)}
.lb-lphoto.is-forbidden{cursor:not-allowed;border-style:dashed}
.lb-lphoto.is-forbidden img{filter:grayscale(1);opacity:.55}
.lb-lphoto img{width:100%;height:115px;object-fit:cover;display:block;background:#eef0f3}
.lb-lphoto__body{padding:6px 8px 8px;display:flex;flex-direction:column;gap:4px;font-size:11.5px;line-height:1.35}
.lb-lphoto__lesson{font-weight:600;color:var(--isb-dark)}
.lb-lphoto__meta{color:var(--muted)}
.lb-lphoto__why{color:#8a1c16;font-size:11px}
.lb-lphoto__open{font-size:11px}
.lb-lphoto__tag{position:absolute;top:8px;left:8px;z-index:2}
/* The name lists inside the lesson's photo form: plain names, not label caps. */
.lb-photos .ph-picker__one,.lb-photos .ph-nobody{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:var(--isb-dark)}
.lb-photos__others{margin-top:4px}
.lb-photos__grade{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:6px;background:var(--paper)}
.lb-photos__grade summary{cursor:pointer;padding:6px 10px;font-size:12.5px;font-weight:600;color:var(--isb-dark)}
.lb-photos__grade summary span{font-weight:400;color:var(--muted)}
.lb-photos__grade .ph-picker{border:0;border-top:1px solid var(--line);border-radius:0}
/* Allowed uses of a photograph (Photo Archive): outlined + tick = allowed.
   The uses NOT allowed are named in words, never shown by colour alone. */
.ph-uses-line{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ph-use{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 7px;border-radius:9px;line-height:1.6;border:1.5px solid #2f8a4c;color:#22703a;white-space:nowrap}
.ph-use--all{background:#2f8a4c;color:#fff;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.ph-use--not{border:1.5px dashed #b9bec7;color:var(--muted);font-weight:500}
.ph-allowed{width:100%;border-collapse:collapse;font-size:12.5px}
.ph-allowed td{padding:5px 6px;border-bottom:1px solid #eef0f3;vertical-align:top}
.ph-allowed td:first-child{white-space:nowrap;font-weight:600;color:var(--isb-dark)}
.ph-allowed td:nth-child(2){white-space:nowrap}
.ph-allowed .ph-no{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 7px;border-radius:9px;background:#b3261e;color:#fff}
.ph-allowed .ph-yes{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;padding:1px 7px;border-radius:9px;border:1.5px solid #2f8a4c;color:#22703a}
/* One row per chosen picture in the lesson's photo form: preview + its own list. */
.lbph-rows{display:flex;flex-direction:column;gap:10px}
.lbph-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:#fafbfc}
.lbph-row__pic img{width:100%;height:110px;object-fit:cover;border-radius:6px;display:block;background:#eef0f3}
.lbph-row__name{font-size:11px;color:var(--muted);margin-top:4px;word-break:break-all;text-transform:none;letter-spacing:0}
.lbph-pick__find{margin:0 0 6px}
.lbph-pick .ph-picker__one,.lbph-pick .ph-nobody{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;color:var(--isb-dark)}
.lbph-pick .ph-nobody{margin-top:8px}
.lbph-pick__count{margin-top:4px}
@media (max-width:640px){.lbph-row{grid-template-columns:1fr}}
.lbph-row.is-missing{border:2px dashed #b3261e;background:#fdf3f2}
.lbph-row.is-missing .lbph-pick__count{color:#b3261e!important;font-weight:600}

/* ── The narrow menu: icons only (button in the brand row) ──────────────────
   Chosen per computer (localStorage "isb.sidebar"), applied to <html> before
   the menu is drawn. Only on a wide screen: below 881px the menu is a drawer.
   Each icon says its name on the pointer; a module with entries shows them
   floating beside it. The numbers become a dot on the icon. */
.sidebar__collapse{position:absolute;right:-13px;top:32px;width:26px;height:26px;border-radius:50%;padding:0;display:grid;place-items:center;cursor:pointer;z-index:35;
  color:#e8f2fc;border:1px solid rgba(160,205,245,.35);
  background:radial-gradient(circle at 30% 25%,#2a6aa0 0%,#12406a 45%,var(--isb-darker, #0a2c47) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(8,30,52,.45),0 0 0 3px rgba(26,115,193,.10);
  opacity:.82;transition:opacity .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,transform .2s var(--ease)}
.sidebar:hover .sidebar__collapse,.sidebar__collapse:focus-visible{opacity:1}
.sidebar__collapse:hover{border-color:rgba(140,205,255,.85);transform:scale(1.06);background:radial-gradient(circle at 30% 25%,#3a86c6 0%,#1a5a92 50%,var(--isb-dark, #0e3b5e) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 4px rgba(26,115,193,.22),0 0 16px rgba(56,150,230,.55)}
.sidebar__collapse svg{width:13px;height:13px;stroke-width:2.4;filter:drop-shadow(0 0 2px rgba(140,205,255,.45))}
@media (max-width: 880px){ .sidebar__collapse{display:none} }
@media (min-width: 881px){
  html.sb-collapsed{--sidebar-w:68px}
  html.sb-collapsed .sidebar__collapse svg{transform:rotate(180deg)}
  html.sb-collapsed .sidebar__brand{padding:18px 13px;justify-content:center}
  html.sb-collapsed .sidebar__brand-text{display:none}
  /* keeps scrolling (wheel / trackpad, scrollbar hidden as in the wide menu): the
     floating names and sub-menus are position:fixed, so they are not clipped */
  html.sb-collapsed .sidebar__nav{padding:8px 8px;overflow-y:auto;overflow-x:hidden}
  html.sb-collapsed .sidebar__group-title{font-size:0;padding:0;margin:8px 6px;height:1px}
  html.sb-collapsed .sidebar__group-title:first-child{margin-top:0}
  html.sb-collapsed .sidebar__nav > .sidebar__link,
  html.sb-collapsed .sidebar__link--parent{justify-content:center;padding:10px 0;gap:0;overflow:visible}
  html.sb-collapsed .sidebar__nav > .sidebar__link .sidebar__label,
  html.sb-collapsed .sidebar__link--parent .sidebar__label,
  html.sb-collapsed .sidebar__chevron{display:none}
  html.sb-collapsed .sidebar__nav > .sidebar__link:has(.pill)::after,
  html.sb-collapsed .sidebar__link--parent:has(.pill)::after{content:"";position:absolute;top:7px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--isb-gold);box-shadow:0 0 0 2px var(--isb-dark, #0e3b5e)}
  html.sb-collapsed .sidebar__nav > .sidebar__link:has(.pill.red)::after,
  html.sb-collapsed .sidebar__link--parent:has(.pill.red)::after{background:#e5534b}
  /* the name on the pointer */
  html.sb-collapsed .sidebar__nav > .sidebar__link:hover::before,
  html.sb-collapsed .sidebar__logout:hover::before{content:attr(data-sb-name);position:fixed;left:64px;top:var(--sb-fly-top,0);min-height:40px;display:flex;align-items:center;padding:0 14px;border-radius:0 8px 8px 0;background:var(--isb-darker, #0a2c47);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:6px 6px 18px rgba(10,44,71,.3);z-index:60;pointer-events:none}
  /* a module's entries, floating beside its icon */
  html.sb-collapsed .sidebar__module{position:static}
  html.sb-collapsed .sidebar__children{display:none}
  html.sb-collapsed .sidebar__module:hover .sidebar__children{display:block;position:fixed;left:60px;top:var(--sb-fly-top,0);width:250px;max-height:calc(100vh - 20px);overflow-y:auto;padding:6px 8px 8px 12px;background:var(--isb-darker, #0a2c47);border-radius:0 10px 10px 0;box-shadow:8px 8px 24px rgba(10,44,71,.35);z-index:60}
  html.sb-collapsed .sidebar__module:hover .sidebar__children::before{content:attr(data-sb-name);display:block;padding:8px 8px 6px;color:#fff;font-size:13px;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:4px}
  html.sb-collapsed .sidebar__children-inner{overflow:visible}
  html.sb-collapsed .sidebar__child{padding-left:10px}
  html.sb-collapsed .sidebar__subgroup-title{padding-left:10px}
  html.sb-collapsed .sidebar__footer{padding:10px 8px;align-items:center}
  html.sb-collapsed .sidebar__user{padding:6px;background:none}
  html.sb-collapsed .sidebar__user-info{display:none}
  html.sb-collapsed .sidebar__logout{justify-content:center;padding:8px 0;position:relative}
  html.sb-collapsed .sidebar__logout > span:not(.sidebar__icon){display:none}
}

/* ── Brand: the emblem in white beside the name, in three short lines ─────── */
.sidebar__brand--stack{flex-direction:row;align-items:center;gap:12px;padding:16px 16px 14px;text-decoration:none;color:#fff}
.sidebar__brand--stack:hover{text-decoration:none;color:#fff}
.sidebar__brand--stack:hover .sidebar__emblem{transform:scale(1.05)}
.sidebar__emblem{width:46px;height:auto;flex:0 0 auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));transition:transform .2s var(--ease)}
.sidebar__brand-name{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;min-width:0}
.sidebar__brand-name small{font-size:7.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap}
.sidebar__brand-name strong{font-size:18px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-top:2px}
.sidebar__brand-name em{font-style:normal;font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--isb-gold);margin-top:4px}
.sidebar__close--stack{position:absolute;top:12px;right:12px}
@media (min-width: 881px){
  html.sb-collapsed .sidebar__brand--stack{justify-content:center;padding:16px 6px}
  html.sb-collapsed .sidebar__brand-name{display:none}
  html.sb-collapsed .sidebar__emblem{width:40px}
}

/* ── Menu rows: one highlight for the whole row ──────────────────────────────
   A module row is two buttons (the name, and the arrow). The global button
   style gave each its own shadow and box; in the menu they are one row, lit
   as one band, with no shadow at all. */
.sidebar__nav button{box-shadow:none}
.sidebar__nav button:hover{box-shadow:none}
.sidebar__parent-row{border-radius:8px;transition:background .15s var(--ease)}
.sidebar__parent-row:hover{background:rgba(255,255,255,.07)}
.sidebar__parent-row .sidebar__link--parent:hover,
.sidebar__parent-row .sidebar__chevron:hover{background:transparent}
.sidebar__parent-row:hover .sidebar__link--parent,
.sidebar__parent-row:hover .sidebar__chevron{color:#fff}
.sidebar__parent-row .sidebar__link--parent.is-active{box-shadow:none}
.sidebar__module.is-expanded > .sidebar__parent-row{background:rgba(255,255,255,.05)}

/* A label that wraps a tick box, a radio or a file picker is an option or a
   button, not a field heading: no capitals (the global label rule is for headings). */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]), .mbx-tb label { text-transform: none; letter-spacing: normal; }

/* Access log: the filters on one row, each with its name above it. */
.al-filters{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:14px;box-shadow:var(--shadow)}
.al-filters__row{display:grid;grid-template-columns:minmax(200px,2fr) minmax(160px,1.4fr) minmax(160px,1.4fr) minmax(130px,1fr) minmax(130px,1fr) auto;gap:10px;align-items:end}
.al-f label{margin:0 0 4px}
.al-f input,.al-f select{margin:0;width:100%}
.al-filters__go{white-space:nowrap}
.al-filters__foot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.al-filters__foot .lb-bar__sub{margin-right:auto}
@media (max-width:1100px){.al-filters__row{grid-template-columns:1fr 1fr}.al-f--wide{grid-column:1/-1}}

/* Logbook Week plans (the office): Teacher | Student, one segmented control. */
.lb-who{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.lb-who__a{padding:6px 12px;font-size:13px;font-weight:600;color:var(--isb-dark);text-decoration:none;border-right:1px solid var(--line)}
.lb-who__a:last-child{border-right:0}
.lb-who__a:hover{background:#f0f4f8;text-decoration:none}
.lb-who__a.is-on{background:var(--isb-blue);color:#fff}

/* Inquiries filter bar: the global field rule makes every select full width, which
   stacked the six filters one per line. Here they share the row. */
.cdash-filterbar select{width:auto;min-width:130px;flex:1 1 130px;margin:0}
.cdash-filterbar input[type="text"]{width:auto;flex:2 1 220px;margin:0}
.cdash-filterbar .right{flex:1 0 100%;justify-content:flex-end}

/* Logbook — Assignments & timetable: the assignments as a list on the left
   (searchable, grouped by level), the one picked and its week on the right. */
.tt{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.tt-list{position:sticky;top:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 110px)}
.tt-list__new{width:100%;justify-content:center}
.tt-list__search{margin:0;font-size:13px}
.tt-list__scroll{overflow-y:auto;margin:0 -4px;padding:0 4px}
.tt-list__level{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:10px 4px 4px;display:flex;justify-content:space-between}
.tt-item{display:block;padding:6px 8px;border-radius:7px;text-decoration:none;color:var(--ink);border:1px solid transparent}
.tt-item:hover{background:#f0f4f8;text-decoration:none}
.tt-item.is-on{background:#e3eefa;border-color:#bcd3ea}
.tt-item.is-off{opacity:.55}
.tt-item__name{display:block;font-size:13px;font-weight:600;color:var(--isb-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-item__meta{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tt-item__meta em{font-style:normal;color:var(--warn)}
.tt-list__none{font-size:12px;color:var(--muted);margin:8px 4px}
.tt-main{min-width:0}
.tt-card{margin-bottom:12px}
.tt-card__head{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.tt-card__actions{display:flex;gap:6px;align-items:center}
.tt-card__who{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px}
.tt-weekhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px}
@media (max-width:1000px){.tt{grid-template-columns:1fr}.tt-list{position:static;max-height:360px}}

/* Courses & timetable — who is in a course: one row per year group, either the
   whole year group or some of its children, never both. */
.tt-pick{border:1px solid var(--line);border-radius:var(--radius);max-height:360px;overflow-y:auto}
.tt-grade{display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--line);padding:0 10px}
.tt-grade:last-child{border-bottom:0}
.tt-grade details{flex:1;min-width:0}
.tt-grade summary{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer;list-style:revert}
.tt-grade__name{font-weight:600;color:var(--isb-dark);font-size:13.5px}
.tt-grade__state{font-size:11px;font-weight:700;border-radius:10px;padding:0 8px;line-height:19px}
.tt-grade__state.is-whole{background:#e3eefa;color:var(--isb-blue)}
.tt-grade__state.is-some{background:#fff7e0;color:#8a6412}
.tt-grade__count{margin-left:auto;font-size:12px;color:var(--muted)}
.tt-grade__body{padding:2px 0 10px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 12px}
.tt-grade__kid{display:flex;align-items:center;gap:8px;font-size:13px;margin:0;padding:2px 0;text-transform:none;letter-spacing:normal;font-weight:400;color:var(--ink)}
.tt-grade.is-whole .tt-grade__kid{color:var(--muted)}
.tt-grade__all{display:flex;align-items:center;gap:6px;white-space:nowrap;margin:0;padding:9px 0;font-size:12px;font-weight:600;color:var(--isb-dark)}

/* Attachments that add up (app.js, data-file-pile="auto"): one row per file, cross to take it off. */
.file-pile{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.file-pile li{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line,#e5e7eb);border-radius:8px;background:#fafbfc;font-size:13px}
.file-pile li b{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-pile li small{color:var(--muted,#6b7280);white-space:nowrap}
.file-pile li button{border:0;background:#f2f4f7;color:#5a6a7d;width:22px;height:22px;border-radius:6px;cursor:pointer;line-height:1;font-size:15px}
.file-pile li button:hover{background:#d64c3a;color:#fff}
.mbx-files__chip button{border:0;background:transparent;color:#5a6a7d;margin-left:6px;padding:0 2px;cursor:pointer;font-size:14px;line-height:1}
.mbx-files__chip button:hover{color:#d64c3a}

/* A file dragged from the computer over a form with an attach field (app.js, data-file-pile): outline + a word. */
form.is-file-over{outline:2px dashed #2f6fb0;outline-offset:4px;border-radius:10px}
form.is-file-over::after{content:"Drop the files to attach them";position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:9999;padding:9px 16px;border-radius:999px;background:#2f6fb0;color:#fff;font-size:14px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.18);pointer-events:none}

/* My mailboxes → Mailboxes & signatures: the servers of an address outside the school's own domain (mailbox/settings.php). */
.mbx-server{margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:10px;background:#fafbfc}
.mbx-server[hidden]{display:none}
.mbx-server__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mbx-server__head strong{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--isb-dark,#1f2d3d)}
.mbx-server__head .small{flex:1;min-width:180px;color:var(--muted,#6b7280)}
.mbx-server__note{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#fff8e6;border:1px solid #f1dfa8;color:#6b5210}
.mbx-server__note[hidden]{display:none}

/* My mailboxes → Mailboxes & signatures: the list, and one mailbox (mailbox/settings.php). */
.mbx-set{max-width:880px}
.mbx-set__list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.mbx-set__item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line,#e5e7eb);border-radius:12px;background:#fff}
.mbx-set__main{flex:1;min-width:200px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.mbx-set__name{font-weight:700;color:var(--isb-dark,var(--isb-dark, #0e3b5e))}
.mbx-set__addr{font-size:12.5px;color:var(--muted,#6b7280)}
.mbx-set__main:hover .mbx-set__name{text-decoration:underline}
.mbx-set__tags{display:flex;gap:6px;align-items:center}
.mbx-set__tags .pill svg,.mbx-set__title .pill svg{vertical-align:-2px}
.mbx-set__acts{display:flex;gap:6px;align-items:center}
.mbx-set__acts form{margin:0}
.mbx-set__add{padding:0}
.mbx-set__add>summary{cursor:pointer;list-style:none;padding:12px 16px;font-weight:600;color:var(--isb-blue,#1b6fc2);display:flex;align-items:center;gap:8px}
.mbx-set__add>summary::-webkit-details-marker{display:none}
.mbx-set__add[open]>summary{border-bottom:1px solid var(--line,#e5e7eb)}
.mbx-set__add>form{padding:4px 16px 14px}
.mbx-set__foot{color:var(--muted,#6b7280);margin:12px 2px 0;line-height:1.6}
.mbx-set__back{display:inline-flex;align-items:center;gap:6px;font-size:13px;text-decoration:none;margin:0 0 8px}
.mbx-set__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.mbx-set__title h2{margin:0;font-size:22px;color:var(--isb-dark,var(--isb-dark, #0e3b5e))}
.mbx-set__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;align-items:start}
.mbx-set__h{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--isb-dark,var(--isb-dark, #0e3b5e))}
.mbx-set__danger{margin-top:16px;padding-top:12px;border-top:1px solid var(--line,#e5e7eb)}
.btn-link{border:0;background:none;padding:0;color:var(--isb-blue,#1b6fc2);cursor:pointer;font:inherit;text-decoration:underline}
@media (max-width:480px){.mbx-set__cols{grid-template-columns:1fr}.mbx-set__acts{width:100%;justify-content:flex-end}}

/* The flags of a document, lists and reader alike: the original solid, the
   courtesy translation dashed and labelled "translation" in words. */
.doc-langs{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;vertical-align:middle}
.doc-lang{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--isb-dark);font-size:12px;font-weight:600;white-space:nowrap;text-decoration:none;line-height:1.4}
.doc-lang small{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.doc-lang--tr{border-style:dashed;background:transparent}
a.doc-lang:hover{background:#eaf4fb;border-color:var(--isb-blue);color:var(--isb-blue);text-decoration:none}
.doc-lang.is-current{background:var(--isb-dark);border-color:var(--isb-dark);color:#fff}
.doc-lang.is-current small{color:rgba(255,255,255,.75)}
/* The same, as a column of a list: no borders, original on top, translation in grey. */
.doc-lang-cell{display:flex;flex-direction:column;gap:4px}
.doc-lang-cell__row{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--isb-dark);white-space:nowrap}
.doc-lang-cell__row.is-tr{font-weight:500;color:var(--muted)}
.doc-lang-cell__row.is-tr svg{opacity:.55}
.doc-lang-cell__none{color:var(--muted)}

/* A menu entry the person does not have yet (Teaching): faded, not a link. */
.sidebar__child.is-disabled{ opacity:.42; cursor:not-allowed; }
.sidebar__child.is-disabled:hover{ background:none; }