/* Elysian Tutors - shared design system
   Skin of the unified ELEVATEOS EDUCATION two-brand token system
   (design-system/unified in the ElevateOS repo; brand layer "elysian").
   Cream ground, forest-green primary, gold single accent, Fraunces display,
   Inter body. No purple, navy or teal anywhere on this brand. */
:root{
  --ink:#14231b;
  --ink-soft:#41564b;
  --ink-faint:#6a7c72;
  --paper:#f7f2ed;
  --card:#ffffff;
  --surface-tint:#fbf8f3;
  --green:#1f5c46;
  --green-hover:#194d3a;
  --green-deep:#123c2d;
  --gold:#c9a24b;
  --gold-deep:#8a6d1f;
  --gold-soft:#f3e7cd;
  --wash:#eaf3ee;
  --line:#e6dfd2;
  --line-soft:#efe9df;
  --radius:16px;
  --radius-md:12px;
  --radius-xl:20px;
  --shadow-xs:0 1px 2px rgba(18,60,45,.05),0 1px 3px rgba(18,60,45,.06);
  --shadow-sm:0 2px 4px -2px rgba(18,60,45,.07),0 5px 10px -3px rgba(18,60,45,.08);
  --shadow:0 1px 2px rgba(18,60,45,.06),0 14px 40px -18px rgba(18,60,45,.24);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.7,0,.84,0);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.56;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16.5px}
::selection{background:var(--gold-soft)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.014em;margin:0 0 14px;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(34px,3.8vw,46px);line-height:1.1}
h2{font-size:clamp(26px,3vw,34px);line-height:1.16}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 14px;color:var(--ink-soft)}
a{color:var(--green);font-weight:600}
a:hover{color:var(--green-deep)}
section{padding:clamp(56px,7vw,84px) 0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.btn{display:inline-block;background:var(--green);color:#fff;border:none;border-radius:var(--radius-md);padding:15px 26px;font-family:Inter;font-size:16px;font-weight:600;text-decoration:none;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background .14s var(--ease);cursor:pointer}
.btn:hover{transform:translateY(-1px);background:var(--green-hover);color:#fff;box-shadow:var(--shadow-sm)}
.btn.gold{background:var(--gold);color:var(--green-deep);box-shadow:var(--shadow-sm)}
.btn.gold:hover{background:var(--gold);filter:brightness(1.05);color:var(--green-deep)}
.btn.ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn.ghost:hover{background:var(--wash);color:var(--green);box-shadow:none}
.portal-links{display:grid;gap:0;margin-bottom:20px}.portal-link{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:19px 0;border-top:1px solid #e6dfd2;color:#14231b;text-decoration:none}.portal-link:first-child{border-top:0}.portal-link strong{display:block;font-family:Fraunces,Georgia,serif;font-size:21px}.portal-link small{display:block;color:#6a7c72;margin-top:4px}.portal-link:hover{color:#1f5c46}.actions{display:flex;flex-wrap:wrap;gap:10px}.secondary{background:#fff!important;color:#1f5c46!important;border:1px solid #d6e5dc!important}
.note{font-size:14px;color:var(--ink-soft)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
a.card,.door-card{transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease)}
a.card:hover,.door-card:hover{transform:translateY(-2px);border-color:#d8ceba;box-shadow:0 2px 4px rgba(18,60,45,.05),0 18px 44px -16px rgba(18,60,45,.28)}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pad{padding:26px}
.portal-main.is-authenticated{max-width:none;padding-left:clamp(22px,4vw,64px);padding-right:clamp(22px,4vw,64px)}
.portal-main.is-authenticated .pagehead{max-width:none;margin-left:0;margin-right:0}
.portal-record{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin-top:24px}
.portal-record label:nth-child(3),.portal-record label:nth-child(4),.portal-record button,.portal-record .err{grid-column:1/-1}
.tutor-dashboard{display:grid;gap:24px;padding:0 0 56px}
.tutor-dashboard-page .pagehead{padding:30px 0 0}
.tutor-dashboard-page #loading{padding:26px;margin-top:20px}
.tutor-dashboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 0 4px}
.tutor-dashboard-head h2{margin-bottom:8px}
.tutor-stats{margin:0;grid-template-columns:repeat(5,1fr)}
.stat .k,.stat .v,.stat .d{display:block}
@media (max-width:1180px) and (min-width:861px){.tutor-stats{grid-template-columns:repeat(3,1fr)}}
.tutor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.tutor-panel{min-width:0}
.tutor-submit{margin-top:0}
.tutor-list{display:grid;gap:0;margin-top:18px}
.tutor-list-item{display:grid;gap:3px;padding:16px 0;border-top:1px solid var(--line)}
.tutor-list-item:first-child{border-top:0;padding-top:0}
.tutor-list-item strong{font-size:16px;color:var(--ink)}
.tutor-list-item span,.tutor-list-item small{color:var(--ink-soft)}
.tutor-list-item small{font-size:14px;line-height:1.45}
.status-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:6px;background:#eaf3ee;color:var(--green);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.status-badge.pending{background:#fff4d8;color:#7b5c13}
.status-badge.declined{background:#fbe9e5;color:#9b4337}

/* header — editorial two-tier: centred wordmark over a hairline nav rail */
header.site{padding:0;border-bottom:1px solid var(--line);background:rgba(247,242,237,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.navrow{display:flex;flex-direction:column;align-items:center;gap:0}
.brand{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:25px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;padding:15px 0 11px}
.brand span{color:var(--green)}
nav.top{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 24px;width:100%;border-top:1px solid var(--line-soft);padding:9px 0 11px}
nav.top a{color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;margin-left:0;padding:5px 0;transition:color .14s var(--ease)}
nav.top a:hover,nav.top a[aria-current]{color:var(--green)}
nav.top a[href="/login/"],nav.top a[href$="/login/"]{border:1px solid var(--line);border-radius:10px;padding:7px 14px;color:var(--ink)}
nav.top a[href="/login/"]:hover,nav.top a[href$="/login/"]:hover{border-color:var(--green);color:var(--green);background:var(--wash)}
nav.top .btn{padding:9px 18px;font-size:14.5px;color:#fff;margin-left:0}
nav.top .btn:hover{color:#fff}

/* brand signature: hand-drawn gold underline (SVG stroke, scales with text) */
.uline{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 45 3.5, 95 9.5, 142 6 S 190 5.5, 197 6.5' fill='none' stroke='%23c9a24b' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:0 100%;background-size:100% .14em;padding-bottom:.1em}

/* hero */
.hero{padding:clamp(64px,8vw,96px) 0 clamp(56px,7vw,80px);background:linear-gradient(180deg,var(--surface-tint) 0%,var(--paper) 62%)}
.hero h1{font-size:clamp(40px,4.8vw,54px);line-height:1.06}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.price-line{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 26px}
.price-chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px;font-weight:600;color:var(--ink)}
.price-chip small{font-weight:400;color:var(--ink-faint)}
.pagehead{padding:52px 0 8px}

/* report card artifact - five-slot weekly report (shared-component anatomy) */
.report-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);padding:26px;max-width:470px;margin-left:auto;text-wrap:pretty}
.report-card .rc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:2px;gap:10px}
.report-card .rc-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.report-card .rc-title{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;color:var(--ink);display:block;margin-top:4px}
.report-card .rc-student{font-size:13px;color:var(--ink-faint);display:block;margin-top:2px}
.report-card .rc-date{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;padding-top:2px}
.report-card h5{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:15px 0 6px;font-weight:600}
.report-card h5 .num{color:var(--gold-deep);margin-right:6px}
.report-card p{font-size:14.5px;line-height:1.5;margin:0 0 4px;color:var(--ink)}
.report-card .quote{border-left:3px solid var(--gold);padding-left:10px;font-style:italic;color:var(--ink-soft)}
.report-card .rc-topic{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.report-card .rc-topic span:first-child{font-size:14.5px;color:var(--ink)}
.report-card .rc-task{display:flex;align-items:flex-start;gap:9px;margin:0 0 6px}
.report-card .rc-task i{flex:none;width:14px;height:14px;margin-top:3px;border:1.5px solid var(--gold);border-radius:4px}
.report-card .rc-task span{font-size:14px;color:var(--ink)}
.report-card .rc-sign{border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:13px;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.report-card .rc-sign .tick{flex:none;width:26px;height:26px;border-radius:8px;background:var(--wash);display:inline-flex;align-items:center;justify-content:center}
.report-card .rc-sign strong{color:var(--ink)}
.rc-label{font-size:11.5px;color:var(--ink-faint);text-align:right;margin-top:8px;max-width:470px;margin-left:auto}
.bar{height:8px;border-radius:99px;background:#eee8dc;overflow:hidden;margin:4px 0 10px}
.bar i{display:block;height:100%;background:var(--green);border-radius:99px}

/* deep forest panel (guarantee, All-in-One, enquiry rail) */
.panel{background:var(--green-deep);color:#fff;border-radius:var(--radius-xl);padding:clamp(24px,4vw,40px)}
.panel h2,.panel h3{color:#fff}
.panel p{color:rgba(255,255,255,.78)}
.panel .eyebrow{color:var(--gold)}
.panel a:not(.btn){color:#fff}
.check-item{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600}
.check-item svg{flex:none}

/* numbered step timeline (how-it-works) */
.steps-timeline{display:flex;flex-direction:column}
.steps-timeline .tstep{display:flex;gap:20px;align-items:stretch}
.steps-timeline .tnum{display:flex;flex-direction:column;align-items:center;flex:none;width:44px}
.steps-timeline .tnum b{flex:none;width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;color:var(--gold-deep);box-shadow:var(--shadow-xs)}
.steps-timeline .tnum i{flex:1;width:1px;background:var(--line);margin:6px 0}
.steps-timeline .tstep:last-child .tnum i{display:none}
.steps-timeline .tbody{padding-bottom:26px;min-width:0}
.steps-timeline .tbody h3{font-size:19px;margin:9px 0 5px}
.steps-timeline .tbody p{font-size:14.5px;margin:0;max-width:520px}

/* subject groups */
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-wrap:wrap}
.group-head h2{margin:0;font-size:26px}
.price-pill{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.price-pill small{font-weight:400;color:var(--ink-faint)}

/* trust stat strip */
.stat3{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:14px}
.stat3 .v{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat3 .d{display:block;font-size:13px;color:var(--ink-soft);margin-top:2px}

/* steps / tutors */
.step .n{font-family:Fraunces,Georgia,serif;font-size:30px;color:var(--gold);line-height:1}
.tutor .ph{width:84px;height:84px;border-radius:50%;background:#e8e2d5;display:flex;align-items:center;justify-content:center;font-family:Fraunces,Georgia,serif;font-size:28px;color:var(--green);margin-bottom:14px}
.tutor .dbs{display:inline-block;font-size:12px;font-weight:600;color:var(--green);background:#eaf3ee;border-radius:6px;padding:3px 8px;margin-top:10px}
.tutor .creds{font-size:14.5px;color:var(--ink-soft)}

/* pricing table */
.price-table{width:100%;border-collapse:collapse;margin-top:26px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.price-table th,.price-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:16px}
.price-table tbody tr{transition:background .14s var(--ease)}
.price-table tbody tr:hover{background:var(--surface-tint)}
.price-table th{font-family:Inter;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:#fbf8f3}
.price-table td.big{font-family:Fraunces,Georgia,serif;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums}

/* vetting strip */
.vetting{background:#ecf1e5;color:var(--green);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.vetting .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;justify-content:center;padding:16px 22px;font-size:15px;font-weight:600}

/* details / faq */
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-bottom:12px}
details summary{font-weight:600;cursor:pointer;color:var(--ink);font-size:16.5px}
details p{margin-top:10px;font-size:15.5px}

/* forms */
form.book{padding:28px;display:grid;gap:14px;position:relative}
form.book label{font-size:13.5px;font-weight:600;color:var(--ink)}
form.book input,form.book select,form.book textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:Inter;font-size:15.5px;background:#fff;color:var(--ink)}
form.book textarea{min-height:90px;resize:vertical}
form.book .ok{color:var(--green);font-weight:600;display:none}
form.book .err{color:#a33;font-weight:600;display:none}
.hp{position:absolute;left:-9999px;opacity:0}

/* two-door funnel + intake wizard */
.door-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;text-align:left}
.door-card{display:flex;flex-direction:column}
.door-card p{flex:1}
.door-card .btn{align-self:flex-start}
form.book fieldset{border:0;padding:0;margin:0;display:grid;gap:14px;min-width:0}
.wizard-steps{display:flex;gap:8px}
.wizard-steps i{height:6px;flex:1;border-radius:99px;background:#eee8dc}
.wizard-steps i.done{background:var(--green)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#eaf3ee;color:var(--green);border-radius:999px;padding:6px 12px;font-size:14px;font-weight:600}
.chip button{background:none;border:0;color:inherit;font:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0}

/* footer */
footer{border-top:1px solid var(--line);padding:52px 0 36px;font-size:14px;color:var(--ink-soft);background:var(--surface-tint)}
.footcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
.footcols h6{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;font-weight:700}
.footcols a{display:block;color:var(--ink-soft);text-decoration:none;margin:6px 0;font-size:14px}
.footcols a:hover{color:var(--green)}
.footlaw{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;font-size:12.5px}

/* dashboard app */
.app-shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.app-side{background:var(--green-deep);color:#dfeee7;padding:24px 18px}
.app-side .brand{color:#fff}
.app-side nav a{display:block;color:#bcd6cb;text-decoration:none;padding:10px 12px;border-radius:9px;margin:3px 0;font-size:15px}
.app-side nav a[aria-current],.app-side nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.app-main{padding:30px clamp(18px,4vw,44px);background:var(--paper)}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.stat{padding:18px 20px}
.stat .k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.stat .v{font-family:Fraunces,Georgia,serif;font-size:30px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .d{font-size:13px;color:var(--green)}
.demo-banner{background:var(--gold);color:var(--green-deep);text-align:center;padding:9px;font-size:13.5px;font-weight:600}

/* region picker */
.region{position:relative;margin-left:0;background:none;border:none;border-radius:0;padding:0;margin-bottom:0;display:flex;align-items:center}
.region summary{list-style:none;cursor:pointer;display:flex;align-items:center;color:var(--ink-soft)}
.region summary::-webkit-details-marker{display:none}
.region summary:hover,.region[open] summary{color:var(--green)}
.region-menu{position:absolute;right:0;top:calc(100% + 10px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:200px;z-index:50}
nav.top .region-menu a{display:block;margin:0;padding:8px 12px;border-radius:8px;font-size:14.5px;color:var(--ink);white-space:nowrap}
nav.top .region-menu a:hover{background:var(--paper);color:var(--green)}
nav.top .region-menu a[aria-current]{font-weight:600;color:var(--green)}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;padding:16px 18px}.pay-row strong{display:block;font-size:16px}.pay-row small{display:block;color:var(--ink-soft);margin-top:3px}.pay-actions{display:flex;gap:10px;flex-wrap:wrap}.pay-btn{background:var(--gold);color:var(--green-deep);border:0;border-radius:11px;padding:11px 15px;font-family:Inter,sans-serif;font-size:14px;font-weight:600;cursor:pointer}.pay-btn.secondary{background:#fff;color:var(--green);border:1px solid #cfe0d6}.pay-btn:disabled{opacity:.65;cursor:wait}
.skeleton{display:block;background:linear-gradient(100deg,#eee8dc 25%,#f8f4ed 38%,#eee8dc 50%,#eee8dc 100%);background-size:220% 100%;animation:skeleton-shimmer 1.35s ease-in-out infinite;border-radius:8px;color:transparent!important}.skeleton-line{height:14px;margin:10px 0}.skeleton-line.short{width:38%}.skeleton-line.medium{width:65%}.skeleton-title{height:27px;width:48%;margin:5px 0 14px}.skeleton-block{height:92px;margin:14px 0}.skeleton-row{height:56px;margin:12px 0;border-radius:12px}.skeleton-button{display:inline-block;width:150px;height:44px;border-radius:11px}.loading-region[aria-busy="true"]{min-height:72px}.is-loading{position:relative;pointer-events:none}.is-loading::after{content:"";display:inline-block;width:1em;height:1em;margin-left:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.15em;animation:spin .7s linear infinite}.is-loading .skeleton{visibility:hidden}@keyframes skeleton-shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}.is-loading::after{animation:none}}

/* staff dashboard (operations) */
.ops-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 28px;border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:30}
.ops-top .who{font-size:13.5px;color:var(--ink-soft)}
.ops-main{padding:22px 28px;display:grid;gap:18px}
.ops-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ops-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font-family:Inter;font-size:14px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.ops-tabs button[aria-selected="true"]{background:var(--green);border-color:var(--green);color:#fff}
.ops-tabs button .count{margin-left:6px;font-weight:400;opacity:.75}
.ops-split{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:18px;align-items:start}
.ops-list{display:grid;gap:8px;max-height:72vh;overflow:auto;align-content:start}
.ops-item{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font-family:Inter}
.ops-item:hover{border-color:var(--green)}
.ops-item[aria-selected="true"]{border-color:var(--green);box-shadow:0 0 0 2px rgba(31,92,70,.18)}
.ops-item h4{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.ops-item p{margin:3px 0 0;font-size:13px;color:var(--ink-soft)}
.ops-detail{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;min-height:280px}
.ops-detail dl{display:grid;grid-template-columns:190px 1fr;gap:8px 16px;margin:16px 0}
.ops-detail dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
.ops-detail dd{margin:0;font-size:15px;color:var(--ink);white-space:pre-wrap}
.badge{display:inline-block;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;background:#eee8dc;color:var(--ink-soft);vertical-align:middle}
.badge.green{background:#eaf3ee;color:var(--green)}
.badge.gold{background:#f7ecd4;color:#8a6d1f}
.badge.red{background:#f7e2de;color:#a33}
.toast{position:fixed;bottom:24px;right:24px;z-index:100;background:var(--green-deep);color:#fff;font:600 14.5px Inter;padding:13px 18px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;max-width:360px}
.toast.show{opacity:1;transform:none}
.toast.bad{background:#8c2f24}
.ops-main .stat-row{grid-template-columns:repeat(6,1fr)}
.stat-link{text-align:left;font-family:Inter;cursor:pointer;border:1px solid var(--line)}
.stat-link:hover{border-color:var(--green)}
.stat-link .k,.stat-link .v,.stat-link .d{display:block}
@media (max-width:900px){.ops-split{grid-template-columns:1fr}.ops-list{max-height:40vh}.ops-detail dl{grid-template-columns:1fr}.ops-main .stat-row{grid-template-columns:1fr 1fr}}

@media (max-width:860px){
  .hero-grid,.grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .door-grid{grid-template-columns:1fr}
  .report-card{margin:30px auto 0}
  .rc-label{margin:8px auto 0}
  .stat-row{grid-template-columns:1fr 1fr}
  .footcols{grid-template-columns:1fr 1fr}
  .app-shell{grid-template-columns:1fr}
  .app-side{display:none}
  .portal-record{grid-template-columns:1fr}
  .portal-record label:nth-child(3),.portal-record label:nth-child(4),.portal-record button,.portal-record .err{grid-column:auto}
  .tutor-grid{grid-template-columns:1fr}
  .tutor-stats{grid-template-columns:1fr}
  .tutor-dashboard-head{display:block}
  .tutor-dashboard-head .btn{margin-top:10px}
  section{padding:52px 0}
}

/* mobile nav — burger + left drawer, built by nav.js on pages that load it.
   Desktop is untouched: these only apply under .has-mobile-nav on narrow
   viewports. Bar layout is burger | wordmark | Sign in.

   860px covers every phone in portrait (360-448) and iPad portrait. Known and
   accepted: between 861 and ~950 the desktop rail wraps to two rows, which
   affects large phones in landscape (932) and narrow desktop windows. Raising
   this to 960 would close that gap if it ever matters. */
/* First-paint guard, set by nav.js and removed after two frames. Without it,
   switching nav.top to the fixed drawer on load animates it out of its desktop
   position — the nav appears to fly off to the left on every page load.
   !important because it must beat the [data-nav-open] and reduced-motion rules. */
.nav-booting nav.top,
.nav-booting .nav-toggle span,
.nav-booting .nav-scrim{transition:none!important}
.nav-toggle,.nav-signin{display:none}
/* Sits BELOW header.site (z-index 40). header.site is a stacking context, so
   the drawer's z-index is scoped inside it and the header's own z-index is what
   competes with the scrim. Keeping the scrim underneath means the order never
   depends on a value that toggles — z-index cannot animate, so a bump-on-open
   would snap back mid-close and cover the drawer on its way out. */
.nav-scrim{display:none;position:fixed;inset:0;z-index:25;background:rgba(18,60,45,.4);opacity:0;visibility:hidden}
@media (max-width:860px){
  /* fades rather than display-toggling, so it leaves the way it arrived */
  .nav-scrim{display:block;transition:opacity .26s var(--ease-exit),visibility 0s linear .26s}
  .nav-scrim.is-open{opacity:1;visibility:visible;transition:opacity .26s var(--ease),visibility 0s}
  /* a backdrop-filter would make the header the containing block for the
     fixed drawer, clipping it to the bar's height — so mobile uses a solid bar */
  header.site.has-mobile-nav{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
  .has-mobile-nav .navrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
  .has-mobile-nav .brand{padding:12px 0;text-align:center;font-size:22px}
  .has-mobile-nav .nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:42px;height:42px;padding:0;background:transparent;border:1px solid var(--line);border-radius:10px;color:var(--ink);cursor:pointer}
  .has-mobile-nav .nav-toggle:hover{border-color:var(--green);color:var(--green)}
  /* closing: bars un-rotate first, then the middle bar fades back in */
  .has-mobile-nav .nav-toggle span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .26s var(--ease-exit),opacity .12s var(--ease-exit) .14s}
  /* opening: the middle bar clears immediately as the X forms */
  .has-mobile-nav .nav-toggle[aria-expanded="true"] span{transition:transform .26s var(--ease),opacity .12s var(--ease)}
  .has-mobile-nav .nav-toggle span+span{margin-top:4.5px}
  .has-mobile-nav .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .has-mobile-nav .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .has-mobile-nav .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .has-mobile-nav .nav-signin{display:inline-block;border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
  .has-mobile-nav .nav-signin:hover{border-color:var(--green);color:var(--green);background:var(--wash)}
  /* the nav rail becomes a slide-in drawer */
  .has-mobile-nav nav.top{position:fixed;top:var(--nav-h,64px);left:0;bottom:0;width:min(84vw,320px);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;gap:0;border-top:0;border-right:1px solid var(--line);background:var(--paper);box-shadow:0 0 60px -14px rgba(18,60,45,.4);padding:22px 22px 28px;overflow-y:auto;z-index:60;transform:translateX(-100%);visibility:hidden;transition:transform .26s var(--ease-exit),visibility 0s linear .26s}
  .has-mobile-nav[data-nav-open] nav.top{transform:none;visibility:visible;transition:transform .26s var(--ease),visibility 0s}
  /* the panel takes focus on open (see nav.js) but is not a control the user
     tabs to, so it should not draw the global focus ring — links inside it
     still get theirs normally */
  .has-mobile-nav nav.top:focus,.has-mobile-nav nav.top:focus-visible{outline:none}
  .has-mobile-nav nav.top a{display:block;margin:0;padding:14px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line-soft)}
  .has-mobile-nav nav.top a:hover,.has-mobile-nav nav.top a[aria-current]{color:var(--green)}
  /* Sign in is surfaced in the bar instead */
  .has-mobile-nav nav.top a[href$="/login/"]{display:none}
  /* booking CTA pinned above the link list */
  .has-mobile-nav nav.top .btn{order:-1;display:block;margin:0 0 16px;padding:14px 18px;font-size:15.5px;text-align:center;color:#fff;border:0;border-radius:var(--radius-md)}
  .has-mobile-nav nav.top .btn:hover{color:#fff}
  /* region picker last, opening inline rather than as a popover */
  .has-mobile-nav nav.top .region{order:1;display:block;margin-top:18px}
  .has-mobile-nav nav.top .region-menu{position:static;min-width:0;margin-top:8px;box-shadow:none}
  .has-mobile-nav nav.top .region-menu a{padding:10px 12px;font-size:15px;border-bottom:0}
}
/* Reduce Motion (macOS: Accessibility > Display > Reduce motion) asks for no large
   translational movement — it does not ask for zero feedback. So the drawer
   cross-fades in place instead of snapping open with no animation at all.
   MUST stay scoped to the mobile width: unscoped, the opacity:0 below would hide
   the DESKTOP nav outright for anyone with the preference set. Selectors also have
   to match the [data-nav-open] specificity or the slide would survive. */
@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .has-mobile-nav nav.top{transform:none;opacity:0;transition:opacity .18s linear,visibility 0s linear .18s}
  .has-mobile-nav[data-nav-open] nav.top{transform:none;opacity:1;transition:opacity .18s linear,visibility 0s}
  .has-mobile-nav .nav-toggle span,
  .has-mobile-nav .nav-toggle[aria-expanded="true"] span{transition:opacity .12s linear}
  .nav-scrim{transition:opacity .18s linear,visibility 0s linear .18s}
  .nav-scrim.is-open{transition:opacity .18s linear,visibility 0s}
}

/* weekly lesson reports (tutor form, staff approval queue, family timeline) */
.muted{font-size:14px;color:var(--ink-soft)}
.slot-label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin:6px 0 8px}
.report-rows{display:grid;gap:8px;margin-bottom:8px}
.report-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.report-row input,.report-row select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-family:Inter;font-size:14.5px;background:#fff;color:var(--ink)}
.report-row .btn,.report-row .row-remove{padding:8px 12px;font-size:13px}
.report-row.task{grid-template-columns:1fr 1fr auto}
.report-add{justify-self:start;padding:8px 14px;font-size:13.5px}
.conf-badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
.conf-badge.confident{background:#eaf3ee;color:var(--green)}
.conf-badge.progressing{background:#f7ecd4;color:#8a6d1f}
.conf-badge.struggling{background:#f7e2de;color:#a33}
.status-badge.sent{background:#eef2fb;color:#2f4b8f}
.weekly-report{border-top:1px solid var(--line);padding:20px 0}
.weekly-report:first-child{border-top:0;padding-top:6px}
.weekly-report header{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.weekly-report h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:14px 0 4px;font-weight:600}
.weekly-report p{margin:0 0 4px}
.weekly-report ul{margin:0;padding-left:20px}
.weekly-report li{margin:2px 0}
.report-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.report-review .slot-label{margin-top:14px}
@media (max-width:640px){
  .report-row,.report-row.task{grid-template-columns:1fr}
  .report-cta{align-items:flex-start;flex-direction:column}
}