/* Thmanyah, every weight: TS = sans (UI and body), TSD = serif display (headlines, big numbers), TST = serif text */
@font-face{font-family:"TS";src:url("fonts/thmanyahsans-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TS";src:url("fonts/thmanyahsans-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TS";src:url("fonts/thmanyahsans-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TS";src:url("fonts/thmanyahsans-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TS";src:url("fonts/thmanyahsans-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TSD";src:url("fonts/thmanyahserifdisplay-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TSD";src:url("fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TSD";src:url("fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TSD";src:url("fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TSD";src:url("fonts/thmanyahserifdisplay-Black.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TST";src:url("fonts/thmanyahseriftext-Light.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TST";src:url("fonts/thmanyahseriftext-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TST";src:url("fonts/thmanyahseriftext-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TST";src:url("fonts/thmanyahseriftext-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TST";src:url("fonts/thmanyahseriftext-Black.woff2") format("woff2");font-weight:900;font-display:swap}

/* IC Studio — bento layout. Palette: IC Studio blue + gold, Dubai Charity Association navy, teal and cyan. */
:root{
  color-scheme:light;
  --bg:#EEF2F7; --tile:#FFFFFF; --sunk:#EEF2F7; --ink:#251B57; --muted:#5B5F7A; --line:#E3E7F0; --line-2:#D5DBE8;
  --navy:#251B57; --navy-2:#3A2F7A; --navy-ink:#FFFFFF; --navy-muted:#C9C5EA;
  --blue:#2660A8; --blue-soft:#EAF0F9; --cyan:#3AB4CF; --teal:#66BDB1; --teal-ink:#0F5E54; --teal-soft:#E6F5F2;
  --gold:#D0A75A; --gold-soft:#FBF1DD; --gold-ink:#6B4C14; --warn:#B04A2A; --warn-soft:#FBE9E3;
  --on-blue:#FFFFFF;
  /* faint section tints, one per section, all at the same lightness */
  --tint-blue:#F2F6FD; --tint-teal:#EFF8F6; --tint-lav:#F5F3FB; --tint-gold:#FBF7EE;
  /* depth: a lit top edge, a soft contact shadow and a wider ambient one */
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow:0 1px 2px rgba(37,27,87,.06),0 4px 10px -2px rgba(37,27,87,.07),0 18px 36px -14px rgba(37,27,87,.22);
  --shadow-hi:0 2px 4px rgba(37,27,87,.07),0 10px 20px -4px rgba(37,27,87,.10),0 28px 48px -16px rgba(37,27,87,.30);
  --shadow-sm:0 1px 2px rgba(37,27,87,.07),0 6px 14px -6px rgba(37,27,87,.18);
  --r:22px; --r-sm:14px;
  --font:"TS","Geeza Pro","Segoe UI",Tahoma,sans-serif; --display:"TSD","TS","Geeza Pro",serif; --text:"TST","TS","Geeza Pro",serif;
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0E0B2B; --tile:#1A1546; --sunk:#221C55; --ink:#EDEBFA; --muted:#A9A4D6; --line:#2C2766; --line-2:#3A3480;
  --navy:#2B2366; --navy-2:#3A2F7A; --navy-ink:#FFFFFF; --navy-muted:#C9C5EA;
  --blue:#7FA8E8; --blue-soft:#24306A; --cyan:#5CC6DD; --teal:#7FCFC4; --teal-ink:#9FE0D6; --teal-soft:#1D3B4A;
  --gold:#E2BE78; --gold-soft:#3A3050; --gold-ink:#F0D49C; --warn:#F29B7E; --warn-soft:#45263A;
  --on-blue:#0E0B2B;
  --tint-blue:#181D50; --tint-teal:#152B4C; --tint-lav:#221A52; --tint-gold:#251E48;
  --edge:inset 0 1px 0 rgba(255,255,255,.07);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 14px -4px rgba(0,0,0,.35),0 20px 40px -16px rgba(0,0,0,.6);
  --shadow-hi:0 2px 4px rgba(0,0,0,.4),0 12px 24px -6px rgba(0,0,0,.45),0 30px 56px -18px rgba(0,0,0,.7);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 6px 14px -6px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.6;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* each logo comes twice: in colour on light grounds, in white on dark ones */
.logo-dark{display:none!important}
:root[data-mode="dark"] .logo-light{display:none!important}
:root[data-mode="dark"] .logo-dark{display:block!important}
a{color:var(--blue)}
button{font-family:inherit}
.num{font-variant-numeric:tabular-nums}

.shell{max-width:1280px;margin-inline:auto;padding-block:20px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:16px}
.tile{background:var(--tile);border-radius:var(--r);padding:24px;min-width:0;border:1px solid rgba(37,27,87,.06);box-shadow:var(--edge),var(--shadow)}
:root[data-mode="dark"] .tile{border-color:rgba(255,255,255,.05)}
.stat{transition:transform .25s ease,box-shadow .25s ease}
.stat:hover{transform:translateY(-3px);box-shadow:var(--edge),var(--shadow-hi)}
.hero{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),var(--shadow-hi);background-image:radial-gradient(120% 90% at 85% 0%,rgba(102,189,177,.18),transparent 60%)}
.stat.blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),var(--shadow)}
.tint-teal .bar.teal,.tint-gold .bar.gold{background:var(--tile)}
.tint-blue{background:var(--tint-blue)} .tint-teal{background:var(--tint-teal)} .tint-lav{background:var(--tint-lav)} .tint-gold{background:var(--tint-gold)}
.tile h2{margin:0;font-family:var(--display);font-size:22px;line-height:1.3;font-weight:700;text-wrap:balance}
.tile-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:16px}
.muted{color:var(--muted)}

/* top bar */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.top .logo{height:48px;width:auto;display:block}
.pills{display:flex;gap:4px;background:var(--sunk);border-radius:999px;padding:4px;flex-wrap:wrap}
.pills button{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:8px 16px;font-size:14px;cursor:pointer}
.pills button[aria-pressed="true"]{background:var(--tile);color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(37,27,87,.08)}
.top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chip-btn{border:1px solid var(--line-2);background:var(--tile);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.chip-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px -6px rgba(38,96,168,.6);border:0;background:var(--blue);color:var(--on-blue);border-radius:999px;padding:11px 20px;font-size:15px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta:hover{filter:brightness(1.08)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hero{grid-column:span 2;grid-row:span 2;background:var(--navy);color:var(--navy-ink);display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:340px;padding:34px}
.hero .eyebrow{font-size:17px;color:var(--teal);font-weight:500}
.hero h1{margin:0;font-family:var(--display);font-size:clamp(34px,4.4vw,52px);line-height:1.15;font-weight:700;text-wrap:balance}
.hero p{margin:12px 0 0;font-weight:300;font-size:17px;color:var(--navy-muted)}
.stripes{display:flex;gap:8px}
.stripes span{height:6px;border-radius:9px;width:36px}
.stat{display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:162px}
.stat .label{font-size:14px;color:var(--muted)}
.stat b{font-family:var(--display);font-size:clamp(40px,4vw,56px);line-height:1.05;font-weight:700;font-variant-numeric:tabular-nums}
.stat small{font-size:13px;color:var(--muted)}
.stat.teal{background:var(--teal);color:#0F3B36}
.stat.teal .label,.stat.teal small{color:#0F3B36}
.stat.gold{background:var(--gold-soft);color:var(--gold-ink)}
.stat.gold .label,.stat.gold small{color:var(--gold-ink)}
.stat .big-date{font-size:30px}
.accent{color:var(--blue)}
.stat.blue{background:var(--blue);color:var(--on-blue)}
.stat.blue .label{color:var(--on-blue);opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12.5px;border-radius:6px;padding:3px 8px;background:rgba(255,255,255,.16)}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pct{font-size:15px;font-weight:700}
.pct.teal{color:var(--teal-ink)}
.pct.gold{color:var(--gold-ink)}
.bar.teal{background:var(--teal-soft)} .bar.teal i{background:var(--teal)}
.bar.gold{background:var(--gold-soft)} .bar.gold i{background:var(--gold)}
.stat .bar{height:10px}
.track{display:grid;gap:5px}
.track .tl{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.track .tl b{font-variant-numeric:tabular-nums}
.track .tl b.t{color:var(--teal-ink)}
.track .tl b.g{color:var(--gold-ink)}
.pcard .bar.teal,.pcard .bar.gold{background:var(--tile)}
.pcard .meta{border-top:1px solid var(--line);padding-top:9px}

.row-2-1{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.row-2-1 > .span2{grid-column:span 2}

/* programs */
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.filters button{border:1px solid var(--line-2);background:transparent;color:var(--muted);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--tile)}
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pcard{background:var(--sunk);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:9px;min-width:0}
.pcard .top-line{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.pcard .who{color:var(--blue);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard h3{margin:0;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.35}
.pcard .sub{font-size:12.5px;color:var(--muted);margin-top:-6px}
.tag{font-size:12px;line-height:1;padding:5px 8px;border-radius:6px;background:var(--tile);color:var(--ink);white-space:nowrap}
.tag.series{background:var(--blue-soft);color:var(--blue)}
.tag.shorts{background:var(--gold-soft);color:var(--gold-ink)}
.tag.course{background:var(--teal-soft);color:var(--teal-ink)}
.bar{height:8px;background:var(--tile);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;background:var(--blue)}
.pcard .meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}
.pcard .pace b{color:var(--ink)}
.pcard.late .meta .due{color:var(--warn);font-weight:500}
.pcard.done .bar i{background:var(--teal)}
.pcard.fin{opacity:.75}
/* program card: compact at rest, details slide open on hover / focus / tap */
.pgrid{align-items:start}
.pcard{cursor:pointer;gap:10px;transition:box-shadow .2s,transform .2s;box-shadow:var(--edge),var(--shadow-sm)}
.pcard:hover,.pcard:focus-visible,.pcard.open{box-shadow:var(--edge),var(--shadow-hi);transform:translateY(-3px);outline:none}
.pcard:focus-visible{box-shadow:0 0 0 2px var(--gold),0 8px 24px rgba(37,27,87,.10)}
.minis{display:grid;gap:8px}
.mini{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;font-size:13px}
.mini b{font-variant-numeric:tabular-nums}
.mini b.t{color:var(--teal-ink)} .mini b.g{color:var(--gold-ink)}
.mini .bar{grid-column:1 / -1}
.pcard .state{margin:0;font-size:13px;color:var(--muted)}
.more-info{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease,opacity .2s ease}
.mi-inner{overflow:hidden;display:grid;gap:9px;min-height:0}
.pcard:hover .more-info,.pcard:focus-within .more-info,.pcard.open .more-info{grid-template-rows:1fr;opacity:1}
.pcard:hover .mi-inner,.pcard:focus-within .mi-inner,.pcard.open .mi-inner{padding-top:4px}
.due-pill{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--blue-soft);color:var(--blue);border-radius:10px;padding:8px 12px;font-size:13px}
.due-pill b{font-size:14.5px}
.due-pill.late{background:var(--warn-soft);color:var(--warn)}
.due-pill.ok{background:var(--teal-soft);color:var(--teal-ink)}
.facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.facts div{background:var(--tile);border-radius:10px;padding:8px 10px}
.facts dt{font-size:12px;color:var(--muted)}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.more-info,.pcard,.stat,.wk-item{transition:none}.stat:hover,.pcard:hover,.wk-item:hover{transform:none}}
.more-btn{margin-top:14px;width:100%;border:1px dashed var(--line-2);background:transparent;color:var(--blue);border-radius:14px;padding:12px;font-size:14px;cursor:pointer}

/* studio week */
.week-nav{display:flex;align-items:center;gap:6px}
.week-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer;font-size:16px}
.week-nav b{font-size:13.5px;font-weight:500;min-width:9.5em;text-align:center}
.days{display:grid;gap:14px}
.day h3{margin:0 0 8px;font-size:13.5px;font-weight:500;color:var(--muted);display:flex;justify-content:space-between}
.day h3 .cap.full{color:var(--warn)}
.slots-list{display:grid;gap:8px}
.slot{border-radius:12px;padding:11px 14px;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.slot.free{background:var(--teal-soft);color:var(--teal-ink)}
.slot.closed{background:var(--sunk);color:var(--muted)}
.slot.past{opacity:.5}
.slot.busy{background:var(--gold-soft);color:var(--gold-ink);border:0;width:100%;text-align:start;font:inherit;font-size:14px;cursor:pointer}
.slot.busy b{font-weight:700}
.slot.busy .more{font-size:12px;text-decoration:underline;opacity:.85}
.screen-btn{margin-top:14px;width:100%}
/* compact week list in the bookings tile */
/* bookings: a full-width row under the programs */
.studio-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;margin-bottom:16px}
.sh-title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sh-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
#week-days{display:grid;gap:12px}
.wk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.wk-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;width:100%;text-align:start;border:0;background:var(--gold-soft);color:var(--gold-ink);border-radius:16px;padding:12px 14px;font:inherit;cursor:pointer}
.cal-badge{box-shadow:var(--shadow-sm);display:grid;justify-items:center;min-width:64px;background:var(--tile);border-radius:12px;padding:6px 8px;line-height:1.2;color:var(--ink)}
.cal-badge b{font-family:var(--display);font-size:28px;line-height:1.05;color:var(--blue)}
.cal-badge small{font-size:11.5px;color:var(--muted)}
.wk-item .more{font-size:12px;text-decoration:underline;opacity:.85}
.wk-item{box-shadow:var(--edge),var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.wk-item:hover{transform:translateY(-2px);box-shadow:var(--edge),var(--shadow)}
.wk-item .w{display:grid;line-height:1.35;min-width:0}
.wk-item .w b{color:var(--ink);font-size:14.5px}
.wk-item .w small{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-item.past{opacity:.55}
.wk-none{margin:0;padding:12px;border-radius:12px;background:var(--sunk);color:var(--muted);font-size:13.5px}
.wk-open{margin:0;padding:10px 12px;border-radius:12px;background:var(--teal-soft);color:var(--teal-ink);font-size:13.5px}

/* monthly bars + timeline */
.bars{display:flex;align-items:flex-end;gap:12px;height:220px;padding-top:8px;overflow-x:auto}
.bars .col{min-width:48px}
.bars .col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars .col b{font-size:15px;font-variant-numeric:tabular-nums}
.bars .col i{display:block;width:100%;border-radius:10px;background:var(--cyan);min-height:4px}
.bars .col.now i{background:var(--blue)}
.bars .col.later i{background:var(--teal)}
.bars .col span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.gantt{display:grid;gap:8px}
.grow{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:12px;align-items:center}
.glabel{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gtrack{position:relative;height:26px;background:var(--sunk);border-radius:8px}
.gbar{position:absolute;inset-block:3px;inset-inline-start:0;border-radius:6px;background:var(--c,var(--blue));min-width:6px}
.gbar.in{color:#fff;font-size:12px;display:flex;align-items:center;padding-inline:8px;white-space:nowrap;overflow:hidden}
.gantt{overflow:hidden}
.gout{position:absolute;top:50%;transform:translateY(-50%);font-size:12px;white-space:nowrap;color:var(--ink);padding-inline-start:6px}
.gaxis .gtrack{background:transparent;height:18px}
.gmonth{position:absolute;top:0;font-size:11.5px;color:var(--muted);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}

/* sponsor footer */
.sponsor{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:22px 28px}
.sponsor .who{display:flex;align-items:center;gap:18px}
.sponsor .label{font-size:14px;font-weight:500;color:var(--muted)}
.sponsor .dca{height:42px;width:auto;max-width:100%}
.status-note{font-size:13px;color:var(--muted)}
.notice{background:var(--gold-soft);color:var(--gold-ink);border-radius:var(--r-sm);padding:12px 16px;font-size:13.5px}

/* dialogs */
dialog.sheet{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:var(--r);padding:0;background:var(--tile);color:var(--ink);box-shadow:0 24px 64px rgba(14,11,43,.35)}
dialog.sheet::backdrop{background:rgba(14,11,43,.55)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0}
.sheet-head h2{margin:0;font-family:var(--display);font-size:22px}
.x{width:38px;height:38px;border-radius:50%;border:0;background:var(--sunk);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.sheet-body{padding:16px 22px 22px;display:grid;gap:14px}
.sheet-body h3{margin:0;font-size:15px}
.msg{margin:0;padding:12px 14px;border-radius:12px;background:var(--sunk);font-size:14px}
.msg.warn{background:var(--gold-soft);color:var(--gold-ink)}
.msg.ok{background:var(--teal-soft);color:var(--teal-ink)}
.msg.err{background:var(--warn-soft);color:var(--warn)}
.cal{border:1px solid var(--line);border-radius:16px;padding:12px}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-nav button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:var(--ink);cursor:pointer}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.cal-grid .wd{font-size:11.5px;color:var(--muted);padding:4px 0}
.cal-grid .d{height:46px;border-radius:10px;border:0;background:transparent;color:var(--line-2);font:500 14px var(--font);display:grid;place-items:center;align-content:center;line-height:1.15}
.cal-grid button.d{color:var(--ink);background:var(--blue-soft);cursor:pointer}
.cal-grid button.d small{font-size:10px;color:var(--blue)}
.cal-grid button.d[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
.cal-grid button.d[aria-pressed="true"] small{color:var(--on-blue)}
.seg{display:inline-flex;gap:4px;background:var(--sunk);border-radius:999px;padding:4px;justify-self:start}
.seg button{border:0;background:transparent;color:var(--ink);border-radius:999px;padding:8px 18px;font-size:14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--on-blue)}
.seg button:disabled{opacity:.35;cursor:default}
.times{display:flex;flex-wrap:wrap;gap:8px}
.times button{border:1px solid var(--line-2);background:var(--tile);color:var(--ink);border-radius:10px;padding:10px 14px;font-size:14px;cursor:pointer;font-variant-numeric:tabular-nums}
.times button:hover{border-color:var(--blue);color:var(--blue)}
.form{display:grid;gap:12px}
.form.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.form .full{grid-column:1 / -1}
.form label{display:grid;gap:5px;font-size:13px;color:var(--muted)}
.form input,.form select,.form textarea{width:100%;font:400 15px var(--font);padding:10px 12px;border:1px solid var(--line-2);background:var(--tile);color:var(--ink);border-radius:10px}
.form textarea{min-height:76px;resize:vertical}
.form .check{display:flex;align-items:center;gap:8px;color:var(--ink)}
.form .check input{width:auto}
.when{font-weight:700;color:var(--blue);margin:0}
.phone-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;align-items:end}
.phone-row select{direction:ltr;text-align:start}
@media (max-width:480px){.phone-row{grid-template-columns:minmax(0,1fr)}}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.btn{border:1px solid var(--line-2);background:var(--tile);color:var(--ink);border-radius:10px;padding:10px 18px;font-size:14px;font-weight:500;cursor:pointer}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn.danger{color:var(--warn);border-color:currentColor}
.btn.small{padding:6px 12px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
dl.kv{margin:0;display:grid;gap:8px}
dl.kv div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
dl.kv dt{color:var(--muted);font-size:13px}
dl.kv dd{margin:0;font-weight:500;overflow-wrap:anywhere}

/* team screen: the week alone, large, for the studio's display */
body.screen .shell > :not(.screen-board){display:none}
.screen-board{display:none}
body.screen .screen-board{display:grid;gap:18px}
.screen-board .sb-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.screen-board .sb-top h1{margin:0;font-family:var(--display);font-size:40px}
.screen-board .clock{font-size:28px;font-variant-numeric:tabular-nums;color:var(--muted)}
.screen-board .days{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.screen-board .slot{font-size:22px;padding:18px 22px;border-radius:16px}
.screen-board .day h3{font-size:22px;color:var(--ink)}

@media (max-width:1000px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row-2-1{grid-template-columns:minmax(0,1fr)}
  .row-2-1 > .span2{grid-column:auto}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .screen-board .days{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .hero{grid-column:span 2}
  .grow{grid-template-columns:minmax(0,1fr);gap:2px}
  .gaxis .glabel{display:none}
  .form.two{grid-template-columns:minmax(0,1fr)}
  .top{justify-content:center}
}
@media (prefers-reduced-motion:no-preference){.cta,.btn,.chip-btn{transition:filter .15s,background .15s}}

/* ===== Raised finish (approved model 2): tiles share the page's colour and rise from it with paired light and shade ===== */
:root{
  --bg:#E6ECF4; --tile:#E6ECF4; --sunk:#DDE4EE;
  --tint-blue:#E3EAF6; --tint-teal:#E1ECEE; --tint-lav:#E7E6F4; --tint-gold:#ECE9E5;
  --hi:rgba(255,255,255,.95); --lo:rgba(163,177,198,.72);
  --neu:9px 9px 20px var(--lo),-9px -9px 20px var(--hi);
  --neu-up:12px 12px 26px var(--lo),-12px -12px 26px var(--hi);
  --neu-sm:5px 5px 12px var(--lo),-5px -5px 12px var(--hi);
  --neu-in:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi);
}
:root[data-mode="dark"]{
  --bg:#17133F; --tile:#17133F; --sunk:#120F33;
  --tint-blue:#161A47; --tint-teal:#13243F; --tint-lav:#1C1648; --tint-gold:#1E1840;
  --hi:rgba(255,255,255,.05); --lo:rgba(0,0,0,.55);
}
.tile,:root[data-mode="dark"] .tile{border:0;box-shadow:var(--neu)}
.stat:hover{box-shadow:var(--neu-up)}
.hero{box-shadow:var(--neu)}
.stat.blue{box-shadow:var(--neu)}
.pcard{background:var(--tile);box-shadow:var(--neu-sm)}
.pcard:hover,.pcard:focus-visible,.pcard.open{box-shadow:var(--neu)}
.pcard:focus-visible{box-shadow:0 0 0 2px var(--gold),var(--neu)}
.tint-blue .pcard,.tint-teal .pcard,.tint-lav .pcard,.tint-gold .pcard{background:inherit}
.bar,.pcard .bar.teal,.pcard .bar.gold,.tint-teal .bar.teal,.tint-gold .bar.gold,.bar.teal,.bar.gold{background:transparent;box-shadow:var(--neu-in)}
.facts div{background:transparent;box-shadow:var(--neu-in)}
.due-pill{box-shadow:var(--neu-in)}
.wk-item{background:var(--tile);box-shadow:var(--neu-sm)}
.tint-teal .wk-item{background:var(--tint-teal)}
.wk-item:hover{box-shadow:var(--neu)}
.cal-badge{background:transparent;box-shadow:var(--neu-in)}
.wk-none,.wk-open{background:transparent;box-shadow:var(--neu-in)}
.pills{background:transparent;box-shadow:var(--neu-in)}
.pills button[aria-pressed="true"]{background:var(--tile);box-shadow:var(--neu-sm)}
.chip-btn{border:0;background:var(--tile);box-shadow:var(--neu-sm)}
.chip-btn:active{box-shadow:var(--neu-in)}
.filters button{border:0;background:var(--tile);box-shadow:var(--neu-sm)}
.filters button[aria-pressed="true"]{box-shadow:var(--neu-in);background:var(--tile);color:var(--blue);font-weight:700}
.week-nav button{border:0;background:var(--tile);box-shadow:var(--neu-sm)}
.btn{border:0;box-shadow:var(--neu-sm)}
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),5px 5px 12px var(--lo),-5px -5px 12px var(--hi)}
.more-btn{border:0;box-shadow:var(--neu-in)}
.gtrack{background:transparent;box-shadow:var(--neu-in)}
.gaxis .gtrack{box-shadow:none}
.sponsor .dca{filter:none}
dialog.sheet{background:var(--tile)}
.form input,.form select,.form textarea{border:0;background:var(--tile);box-shadow:var(--neu-in)}
.cal{border:0;box-shadow:var(--neu-in)}
.times button{border:0;box-shadow:var(--neu-sm)}