/* ==========================================================================
   Madressa Mahmoodia Parent Portal — mobile-first, accessible, framework-free
   ========================================================================== */

:root{
  color-scheme: light;

  /* Brand */
  --primary-50:#edf7f1; --primary-100:#d9eee1; --primary-200:#b5dcc4; --primary-300:#89c4a1;
  --primary-400:#5ea97f; --primary-500:#3e8d61; --primary-600:#2d7a4c; --primary-700:#24643f;
  --primary-800:#1f5035; --primary-900:#1a422d;

  --gold-50:#fbf8f2; --gold-100:#f5ecdc; --gold-200:#ead8b8; --gold-300:#ddc28f;
  --gold-400:#d1ae70; --gold-500:#c8a165; --gold-600:#ad844a; --gold-700:#8d683c;

  /* Neutrals */
  --bg:#f5f7f6; --surface:#ffffff; --surface-2:#f9fbfa; --surface-3:#eef3f0;
  --text:#17231d; --text-soft:#3d4f46; --muted:#687870; --line:#dfe7e2; --line-strong:#cbd7d0;

  /* States */
  --success-bg:#eaf6ee; --success-text:#176236; --success-line:#b9dec7;
  --warning-bg:#fff7e7; --warning-text:#7b5414; --warning-line:#ead19b;
  --danger-bg:#fff0f0;  --danger-text:#9e2424;  --danger-line:#efc2c2;
  --info-bg:#eef5fb;    --info-text:#285f87;     --info-line:#c7dbea;

  /* Layout */
  --content-max:640px; --radius-xs:8px; --radius-sm:11px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px;

  /* Effects */
  --shadow-xs:0 1px 2px rgba(23,35,29,.05); --shadow-sm:0 5px 18px rgba(23,35,29,.07);
  --shadow-md:0 16px 40px rgba(23,35,29,.12); --focus:0 0 0 4px rgba(45,122,76,.18);

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1); --fast:140ms; --normal:220ms;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#101713; --surface:#17201b; --surface-2:#1b2620; --surface-3:#243129;
    --text:#f2f6f3; --text-soft:#d8e1dc; --muted:#a3b1aa; --line:#2b3b32; --line-strong:#3b4d43;

    --primary-50:#15271d; --primary-100:#193324; --primary-200:#20452e; --primary-300:#2a5b3d;
    --primary-400:#37744e; --primary-500:#438d5f; --primary-600:#57a873; --primary-700:#75bd8d;
    --primary-800:#9bd2ad; --primary-900:#c8e7d2;

    --gold-50:#2b2418; --gold-100:#3a2f1d; --gold-200:#554126; --gold-300:#765b34;
    --gold-400:#9e7c49; --gold-500:#c8a165; --gold-600:#d8b77e; --gold-700:#e6c99d;

    --success-bg:#162b1d; --success-text:#8ad5a2; --success-line:#31583e;
    --warning-bg:#2e2718; --warning-text:#e7c879; --warning-line:#5c4b26;
    --danger-bg:#311b1b;  --danger-text:#f0a0a0;  --danger-line:#633333;
    --info-bg:#172633;    --info-text:#9cc9eb;     --info-line:#30506a;

    --shadow-xs:0 1px 2px rgba(0,0,0,.24); --shadow-sm:0 8px 24px rgba(0,0,0,.2);
    --shadow-md:0 20px 50px rgba(0,0,0,.32); --focus:0 0 0 4px rgba(87,168,115,.22);
  }
}
/* manual override via the light/dark toggle */
:root[data-theme="dark"]{
    color-scheme: dark;
    --bg:#101713; --surface:#17201b; --surface-2:#1b2620; --surface-3:#243129;
    --text:#f2f6f3; --text-soft:#d8e1dc; --muted:#a3b1aa; --line:#2b3b32; --line-strong:#3b4d43;

    --primary-50:#15271d; --primary-100:#193324; --primary-200:#20452e; --primary-300:#2a5b3d;
    --primary-400:#37744e; --primary-500:#438d5f; --primary-600:#57a873; --primary-700:#75bd8d;
    --primary-800:#9bd2ad; --primary-900:#c8e7d2;

    --gold-50:#2b2418; --gold-100:#3a2f1d; --gold-200:#554126; --gold-300:#765b34;
    --gold-400:#9e7c49; --gold-500:#c8a165; --gold-600:#d8b77e; --gold-700:#e6c99d;

    --success-bg:#162b1d; --success-text:#8ad5a2; --success-line:#31583e;
    --warning-bg:#2e2718; --warning-text:#e7c879; --warning-line:#5c4b26;
    --danger-bg:#311b1b;  --danger-text:#f0a0a0;  --danger-line:#633333;
    --info-bg:#172633;    --info-text:#9cc9eb;     --info-line:#30506a;

    --shadow-xs:0 1px 2px rgba(0,0,0,.24); --shadow-sm:0 8px 24px rgba(0,0,0,.2);
    --shadow-md:0 20px 50px rgba(0,0,0,.32); --focus:0 0 0 4px rgba(87,168,115,.22);
  }

/* Base */
*,*::before,*::after{ box-sizing:border-box; }
html{ min-height:100%; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  min-width:320px; min-height:100%; margin:0;
  background:radial-gradient(circle at top right, rgba(200,161,101,.08), transparent 26rem), var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; }
a{ color:var(--primary-700); text-decoration:none; }
b,strong{ font-weight:700; }
::selection{ background:var(--primary-200); color:var(--primary-900); }
:focus-visible{ outline:2px solid var(--primary-600); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ scroll-behavior:auto !important; animation-duration:.01ms !important;
    animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Icons */
.icon{ width:1.35rem; height:1.35rem; flex:0 0 auto; stroke-width:1.9; }
.icon.sm{ width:1rem; height:1rem; }
.icon.lg{ width:1.6rem; height:1.6rem; }

/* App shell */
.app{ min-height:100dvh; }
.bar{
  position:sticky; top:0; z-index:20; display:flex; min-height:64px; align-items:center;
  justify-content:space-between; gap:14px;
  padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  border-bottom:1px solid color-mix(in srgb, var(--line) 88%, transparent);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
.bar-l,.bar-r{ display:flex; min-width:0; align-items:center; }
.bar-l{ gap:10px; color:var(--text); font-size:.98rem; }
.bar-r{ justify-content:flex-end; gap:12px; color:var(--muted); font-size:.82rem; }
.bar-r .hi{ display:none; max-width:260px; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.bar a{ color:var(--primary-700); font-weight:650; }
.back{
  display:inline-grid; width:42px; height:42px; place-items:center; margin-left:-6px; border:0;
  border-radius:50%; background:transparent; color:var(--text-soft); cursor:pointer;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.back:hover{ background:var(--surface-3); }
.back:active{ transform:scale(.94); }
.wrap{
  width:min(100%,var(--content-max)); margin-inline:auto;
  padding:18px max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}

.crest{
  position:relative; display:inline-block; width:62px; height:62px; overflow:hidden;
  border:1px solid rgba(45,122,76,.12); border-radius:20px; text-indent:-9999px;
  background:#fff url('/portal/icon-512.png?v=3') center/86% no-repeat;
  box-shadow:0 10px 24px rgba(45,122,76,.18); color:transparent; font-size:0;
}
.crest::after{ content:none; }
.crest.sm{ width:36px; height:36px; border-radius:12px; box-shadow:0 5px 14px rgba(45,122,76,.18); font-size:1.05rem; }

.pagetitle{ margin:26px 0 12px; color:var(--text); font-size:clamp(1.1rem,4vw,1.3rem); font-weight:700; letter-spacing:-0.025em; }
.foot{ margin:26px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; text-align:center; }
.empty{
  width:100%; padding:28px 18px; border:1px dashed var(--line-strong); border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--surface) 84%, transparent); color:var(--muted); text-align:center;
}
.ok,.err{ display:flex; align-items:flex-start; gap:10px; margin:0 0 14px; padding:12px 14px;
  border:1px solid; border-radius:var(--radius-md); font-size:.9rem; line-height:1.45; }
.ok{ border-color:var(--success-line); background:var(--success-bg); color:var(--success-text); }
.err{ border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger-text); }

/* Login */
.authwrap{
  min-height:100dvh; display:grid; place-items:center;
  padding:max(24px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:linear-gradient(rgba(17,65,41,.9), rgba(25,72,48,.96)), radial-gradient(circle at top right, rgba(200,161,101,.35), transparent 24rem);
}
.authcard{
  width:min(100%,410px); padding:30px 22px 24px; border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius:var(--radius-xl); background:var(--surface); box-shadow:var(--shadow-md);
}
.brand{ text-align:center; }
.brand .crest{ margin-inline:auto; }
.brand h1{ margin:15px 0 3px; color:var(--text); font-size:1.36rem; font-weight:700; letter-spacing:-0.03em; }
.brand p{ margin:0; color:var(--muted); font-size:.9rem; }
.lead{ max-width:34ch; margin:22px auto 16px; color:var(--muted); font-size:.91rem; line-height:1.65; text-align:center; }
.code-in{ letter-spacing:.44em; text-align:center; font-size:1.45rem !important; font-weight:700; font-variant-numeric:tabular-nums; }
.linkbtn{ min-height:42px; padding:8px 10px; border:0; background:transparent; color:var(--primary-700); cursor:pointer;
  font-size:.82rem; font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.resend{ margin-top:12px; text-align:center; }

/* Buttons */
.btn{
  display:inline-flex; min-height:48px; width:100%; align-items:center; justify-content:center; gap:9px;
  padding:12px 18px; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface-2); color:var(--text); box-shadow:var(--shadow-xs); cursor:pointer;
  font-size:.94rem; font-weight:700; line-height:1;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover{ border-color:var(--primary-300); background:var(--primary-50); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn.primary{ border-color:var(--primary-700); background:linear-gradient(180deg, var(--primary-600), var(--primary-700));
  box-shadow:0 7px 16px rgba(45,122,76,.22); color:#fff; }
.btn.primary:hover{ border-color:var(--primary-800); background:linear-gradient(180deg, var(--primary-700), var(--primary-800)); }
.btn.tiny{ min-height:38px; width:auto; flex:0 0 auto; padding:9px 13px; font-size:.78rem; }

/* Dashboard */
.pushrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 13px 13px 14px;
  border:1px solid var(--primary-200); border-radius:var(--radius-md); background:var(--primary-50);
  color:var(--primary-800); font-size:.84rem; line-height:1.4; }
.pushrow > span{ display:flex; min-width:0; align-items:center; gap:9px; }
.pushrow b{ color:var(--primary-800); }

.kidrow{ display:grid; grid-template-columns:1fr; gap:10px; }
.kidcard{ display:flex; min-width:0; align-items:center; gap:12px; padding:12px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-xs); }
.kidcard.left{ opacity:.62; }
.kavatar{ display:grid; width:44px; height:44px; flex:0 0 auto; place-items:center; border:1px solid var(--gold-300);
  border-radius:14px; background:linear-gradient(145deg, var(--gold-100), var(--gold-200)); color:var(--gold-700);
  font-size:1.05rem; font-weight:700; }
.kmeta{ display:flex; min-width:0; flex-direction:column; gap:2px; }
.kmeta b{ overflow:hidden; color:var(--text); font-size:.92rem; text-overflow:ellipsis; white-space:nowrap; }
.kmeta span{ color:var(--muted); font-size:.78rem; }

.tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px; }
.tile{ position:relative; display:flex; min-width:0; min-height:150px; flex-direction:column; gap:14px; padding:15px;
  overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:var(--shadow-sm); color:var(--text);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.tile::after{ position:absolute; right:-20px; bottom:-28px; width:72px; height:72px;
  border:1px solid color-mix(in srgb, var(--gold-300) 45%, transparent); border-radius:18px; content:"";
  opacity:.45; transform:rotate(45deg); pointer-events:none; }
.tile:hover{ border-color:var(--primary-300); box-shadow:0 10px 26px rgba(23,35,29,.1); }
.tile:active{ transform:scale(.975); }
.tico{ display:grid; width:46px; height:46px; flex:0 0 auto; place-items:center; border:1px solid transparent; border-radius:14px; }
.tico svg{ width:23px; height:23px; }
.tico.ora{ border-color:var(--warning-line); background:var(--warning-bg); color:var(--warning-text); }
.tico.blu{ border-color:var(--info-line); background:var(--info-bg); color:var(--info-text); }
.tico.grn{ border-color:var(--primary-200); background:var(--primary-50); color:var(--primary-700); }
.tico.gld{ border-color:var(--gold-200); background:var(--gold-50); color:var(--gold-700); }
.tico.red{ border-color:var(--danger-line); background:var(--danger-bg); color:var(--danger-text); }
.tico.prp{ border-color:#d8cdea; background:#f5f0fb; color:#67508a; }
.tt{ margin-top:auto; color:var(--text); font-size:.92rem; font-weight:700; line-height:1.3; }
.tt span{ display:block; margin-top:4px; color:var(--muted); font-size:.75rem; font-weight:450; line-height:1.4; }
.tile.wide{ min-height:auto; flex-direction:row; align-items:center; gap:13px; margin-top:11px; padding:14px; }
.tile.wide .tt{ margin:0; }
.tile.wide .chev{ display:grid; width:34px; height:34px; flex:0 0 auto; place-items:center; border-radius:50%;
  background:var(--surface-3); color:var(--muted); }
.tile.wide .chev svg{ width:18px; height:18px; }

/* Cards, forms, module pages */
.crumb{ display:flex; align-items:center; gap:6px; margin:2px 0 12px; }
.crumb a{ color:var(--muted); font-size:.84rem; font-weight:600; }
.card{ margin-bottom:14px; padding:17px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); box-shadow:var(--shadow-sm); }
label{ display:block; margin:15px 0 6px; color:var(--text-soft); font-size:.82rem; font-weight:650; }
.card label:first-child{ margin-top:0; }
input,select,textarea,.fld{ width:100%; min-height:48px; padding:11px 13px; border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--surface-2); color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04); font-size:.94rem;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
textarea{ min-height:128px; resize:vertical; }
input::placeholder,textarea::placeholder{ color:color-mix(in srgb, var(--muted) 78%, transparent); }
input:hover,select:hover,textarea:hover,.fld:hover{ border-color:var(--primary-300); }
input:focus,select:focus,textarea:focus,.fld:focus{ outline:none; border-color:var(--primary-600); background:var(--surface); box-shadow:var(--focus); }
input:disabled,select:disabled,textarea:disabled,button:disabled{ cursor:not-allowed; opacity:.58; }

/* Segmented controls */
.seg{ display:flex; gap:8px; margin:8px 0; padding:4px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface-3); }
.seg button{ min-height:42px; flex:1; padding:9px 10px; border:0; border-radius:10px; background:transparent;
  color:var(--text-soft); cursor:pointer; font-size:.84rem; font-weight:700; }
.seg button.on{ background:var(--surface); box-shadow:var(--shadow-xs); color:var(--primary-700); }

/* Messages / list rows */
.msg{ position:relative; display:block; margin:9px 0; padding:14px 14px 14px 16px; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-xs); color:var(--text);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); }
.msg::before{ position:absolute; top:14px; bottom:14px; left:0; width:3px; border-radius:0 999px 999px 0;
  background:var(--primary-500); content:""; }
.msg:hover{ border-color:var(--primary-300); background:var(--surface-2); }
.msg:active{ transform:scale(.992); }
.msg.unread,.msg.highlight{ border-color:var(--primary-200); background:var(--primary-50); }
.msg.unread::after{ position:absolute; top:17px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--primary-600); content:""; }
.msg .meta{ margin-top:5px; color:var(--muted); font-size:.76rem; line-height:1.5; }
.msg .foot{ margin:0; white-space:nowrap; text-align:right; }
.pill{ display:inline-flex; min-height:22px; align-items:center; justify-content:center; padding:3px 9px;
  border:1px solid transparent; border-radius:999px; font-size:.69rem; font-weight:700; line-height:1; white-space:nowrap; }
.pill.g{ border-color:var(--success-line); background:var(--success-bg); color:var(--success-text); }
.pill.a{ border-color:var(--warning-line); background:var(--warning-bg); color:var(--warning-text); }

/* Responsive */
@media (min-width:560px){
  .wrap{ padding-top:24px; }
  .bar{ padding-inline:22px; }
  .bar-r .hi{ display:inline; }
  .kidrow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .tile{ min-height:162px; padding:17px; }
  .authcard{ padding:34px 30px 28px; }
}
@media (min-width:760px){
  .bar{ padding-inline:max(24px, calc((100vw - var(--content-max)) / 2)); }
}

/* Forced-colours support */
@media (forced-colors: active){
  .btn,.tile,.card,.msg,.kidcard,.pushrow,input,select,textarea{ border:1px solid CanvasText; }
}

/* Print (trip register etc.) */
@media print{
  .no-print{ display:none !important; }
  body{ background:#fff; }
  .wrap{ max-width:none; padding:0; }
  .card{ box-shadow:none; break-inside:avoid; }
  table{ break-inside:auto; }
  tr{ break-inside:avoid; }
}

/* ============================================================================
   ACCENT FILL TOKENS  (fixes a portal-wide dark-mode contrast failure)
   The dark palette inverts the primary scale, so --primary-600/700 become LIGHT
   greens. .btn.primary painted white text on them: 2.90:1 and 2.23:1, both below
   the 4.5:1 floor. These tokens keep a filled control white-on-green in BOTH
   appearances instead of tracking the inverted scale.
   Light  #fff on #2d7a4c 5.25:1 / #24643f 7.07:1
   Dark   #fff on #2a5b3d 7.89:1 / #37744e 5.57:1
   ========================================================================== */
:root{
  --accent-a:#2d7a4c; --accent-b:#24643f;
  --accent-ha:#24643f; --accent-hb:#1f5035;
  --on-accent:#ffffff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent-a:#2a5b3d; --accent-b:#37744e;
    --accent-ha:#20452e; --accent-hb:#2a5b3d;
  }
}
:root[data-theme="dark"]{
  --accent-a:#2a5b3d; --accent-b:#37744e;
  --accent-ha:#20452e; --accent-hb:#2a5b3d;
}
.btn.primary{ border-color:var(--accent-b);
  background:linear-gradient(180deg, var(--accent-a), var(--accent-b)); color:var(--on-accent); }
.btn.primary:hover{ border-color:var(--accent-hb);
  background:linear-gradient(180deg, var(--accent-ha), var(--accent-hb)); }

/* 11.04px bold was under the 12px floor for incidental text */
.pill{ font-size:.75rem; }

/* ============================================================================
   EVENTS — the appointment slip
   The artefact of a parents' evening is a time at a classroom door, so the page
   resolves into something slip-shaped: one gold rule, the time set large in
   tabular figures, and a torn-off stub carrying child, teacher and room.
   This is the page's one loud element; everything round it stays quiet.
   ========================================================================== */
.slip{ position:relative; overflow:hidden; margin:0 0 14px; padding:19px 17px 16px;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:var(--shadow-sm); }
.slip::before{ content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); }
.slip .eyebrow{ margin:0 0 9px; color:var(--muted); font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; }
.slip .when{ margin:0; color:var(--text); font-size:clamp(28px,8.5vw,34px); font-weight:700;
  line-height:1.04; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.slip .whenday{ margin:5px 0 0; color:var(--text-soft); font-size:.94rem; font-weight:600; }
.slip .stub{ display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:14px; padding-top:13px;
  border-top:1px dashed var(--line-strong); }
.slip .stub div{ min-width:0 }
.slip .stub dt{ margin:0 0 2px; color:var(--muted); font-size:.7rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; }
.slip .stub dd{ margin:0; color:var(--text); font-size:.9rem; font-weight:600; }

/* Before booking opens. Deliberately the slip's shape and type: the same card the
   parent will later hold their appointment in, counting down to when it can be filled. */
.opens{ text-align:left }
.opens .eyebrow{ margin:0 0 9px; color:var(--muted); font-size:.72rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; }
.opens .when{ margin:0; color:var(--text); font-size:clamp(28px,8.5vw,34px); font-weight:700;
  line-height:1.04; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.opens .whenday{ margin:5px 0 0; color:var(--text-soft); font-size:.94rem; font-weight:600; }
.opens .countdown{ margin:13px 0 0; padding:9px 13px; border:1px solid var(--gold-300);
  border-radius:999px; background:var(--gold-50); color:var(--gold-700);
  font-size:.86rem; font-weight:700; font-variant-numeric:tabular-nums;
  display:inline-block; }

/* sessions + time chips */
.sess{ margin-top:17px }
.sess:first-of-type{ margin-top:12px }
.sess h4{ display:flex; justify-content:space-between; gap:10px; margin:0 0 8px;
  color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.sess h4 span{ font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.slot{ position:relative; margin:0; font-weight:400 }
/* The global input rule above (min-height, padding, border, background, inset shadow)
   lands on these two custom controls as well, so each one has to opt out explicitly.
   Hiding the radio with opacity alone left a full-size styled control underneath. */
.slot input{ position:absolute; inset:0; width:100%; height:100%; min-height:0;
  margin:0; padding:0; border:0; border-radius:inherit; background:none; box-shadow:none;
  -webkit-appearance:none; appearance:none; opacity:0; cursor:pointer; }
.slot span{ display:flex; min-height:48px; align-items:center; justify-content:center;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text);
  font-size:.94rem; font-weight:650; font-variant-numeric:tabular-nums;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.slot input:hover:not(:disabled)+span{ border-color:var(--primary-400); }
.slot input:focus-visible+span{ border-color:var(--primary-500); box-shadow:var(--focus); }
.slot input:checked+span{ border-color:var(--accent-b);
  background:linear-gradient(180deg, var(--accent-a), var(--accent-b)); color:var(--on-accent); }
/* taken: carried by three non-colour cues — dashed edge, strike-through, and the
   disabled state the screen reader announces — never by colour alone */
.slot.gone span{ border-style:dashed; border-color:var(--line); background:var(--surface-3);
  color:var(--muted); text-decoration:line-through; }
.slot.gone input{ cursor:not-allowed }

/* the one question the page is asking, kept visually distinct from description text */
.ask{ margin:0 0 4px; color:var(--text); font-size:1rem; font-weight:700; letter-spacing:-.01em; }
.consent{ display:flex; gap:11px; align-items:flex-start; margin:11px 0; padding:11px 12px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2);
  color:var(--text); font-size:.94rem; font-weight:400; line-height:1.45; }
/* keep the native tick (appearance stays auto) but drop the text-field chrome */
.consent input{ flex:0 0 auto; width:22px; height:22px; min-height:0;
  margin:1px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
  accent-color:var(--primary-600); cursor:pointer; }
.consent:has(input:focus-visible){ border-color:var(--primary-500); box-shadow:var(--focus); }

/* status word on a list row — says what to DO, not that something is wrong */
.todo{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--gold-300); background:var(--gold-50); color:var(--gold-700);
  font-size:.75rem; font-weight:700; white-space:nowrap; }

/* terms: present but folded away — it had a whole card to itself for no reason */
.terms{ margin-top:4px; border-top:1px solid var(--line); padding-top:12px }
.terms summary{ cursor:pointer; color:var(--muted); font-size:.8rem; font-weight:650 }
.terms[open] summary{ margin-bottom:8px }

/* Dual-teacher years (Reception to Class 4): the Deeniyaat half of the booking.
   Deliberately subordinate to the Qur'an time above it — one booking, two parts. */
.slip .then{ display:flex; gap:11px; align-items:flex-start; margin-top:13px; padding-top:12px;
  border-top:1px dashed var(--line-strong) }
.slip .then .arrow{ flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%; background:var(--surface-3); color:var(--muted); font-size:12px }
.slip .band{ margin:12px 0 0; padding:8px 11px; border-radius:var(--radius-sm);
  background:var(--gold-50); border:1px solid var(--gold-300); color:var(--gold-700);
  font-size:.82rem; font-weight:600; font-variant-numeric:tabular-nums }
.pair{ margin-top:16px; padding:12px 13px; border:1px solid var(--primary-200);
  border-radius:var(--radius-sm); background:var(--primary-50); font-size:.9rem; line-height:1.5 }
.pair > b{ display:block; margin-bottom:6px; color:var(--primary-800) }
.pair > div{ display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; margin-top:3px;
  font-variant-numeric:tabular-nums }
.pair .pl{ min-width:74px; color:var(--muted); font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em }
.pair .pt{ color:var(--muted); font-size:.8rem }

/* A time that overlaps a sibling's appointment. Warned, never blocked: a second adult
   may be taking that one, so the family keeps the choice. Carried by a dashed edge and a
   corner mark as well as colour. */
.slot.clash span{ border-style:dashed; border-color:var(--warning-line); background:var(--warning-bg);
  color:var(--warning-text) }
.slot.clash span::after{ content:"‚2"; position:absolute; top:3px; right:7px; font-size:15px;
  line-height:1; color:var(--warning-text) }
.slot.clash span{ position:relative }
.slot.clash input:checked+span{ border-style:solid }
.busy{ margin-top:10px; padding:10px 12px; border:1px solid var(--warning-line);
  border-radius:var(--radius-sm); background:var(--warning-bg); color:var(--warning-text);
  font-size:.84rem; line-height:1.5 }
.busy > b{ display:block; margin-bottom:4px; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.05em }
.busy > div{ font-variant-numeric:tabular-nums; font-weight:600 }
.busy > div span{ opacity:.75; font-weight:400 }
.busy > p{ margin:6px 0 0; font-weight:400; opacity:.9; font-size:.8rem }

/* A time that runs straight on from what the family is already booked for. Marked with a
   star as well as colour, because the whole point is a parent can spot it at a glance. */
.slot.near span{ position:relative; border-color:var(--primary-400); background:var(--primary-50) }
.slot.near span::after{ content:"°5"; position:absolute; top:2px; right:5px; font-size:9px;
  line-height:1; color:var(--primary-600) }
.slot.near input:checked+span::after{ color:#fff }

.visit{ margin:11px 0 0; padding:9px 12px; border:1px solid var(--primary-200);
  border-radius:var(--radius-sm); background:var(--primary-50); color:var(--primary-800);
  font-size:.84rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.45 }
.visit.long{ border-color:var(--warning-line); background:var(--warning-bg); color:var(--warning-text) }