/* Pause in Menopause — product styles on top of the Practice design system (styles.css).
   Every colour, size, space, radius and shadow is a token. Two themes: light (default) and dark. */

/* ── Dark theme: remap the semantic layer only ─────────────────────────────────────────────── */
[data-theme="dark"]{
  --surface-page:var(--teal-950);
  --surface-page-alt:var(--teal-900);
  --surface-card:var(--teal-900);
  --surface-sunken:var(--teal-800);
  --surface-soft:var(--teal-800);
  --surface-brand:var(--teal-600);
  --surface-brand-hover:var(--teal-500);
  --surface-inverse:var(--teal-25);
  --surface-inverse-alt:var(--teal-50);
  --surface-hover:var(--teal-800);
  --surface-selected:var(--teal-800);
  --surface-disabled:var(--teal-800);
  --text-heading:var(--teal-25);
  --text-body:var(--teal-100);
  --text-muted:var(--teal-200);
  --text-subtle:var(--teal-300);
  --text-disabled:var(--teal-400);
  --text-on-inverse:var(--teal-900);
  --text-on-inverse-muted:var(--teal-700);
  --text-link:var(--glow-200);
  --text-link-hover:var(--glow-100);
  --text-success:var(--glow-200);
  --text-warning:var(--amber-200);
  --text-danger:var(--rust-200);
  --border-subtle:var(--teal-800);
  --border-default:var(--teal-700);
  --border-strong:var(--teal-500);
  --success-bg:var(--teal-800);--success-border:var(--glow-700);--success-fg:var(--glow-200);
  --warning-bg:var(--teal-800);--warning-border:var(--amber-400);--warning-fg:var(--amber-200);
  --danger-bg:var(--teal-800);--danger-border:var(--rust-400);--danger-fg:var(--rust-200);
  --info-bg:var(--teal-800);--info-border:var(--teal-500);--info-fg:var(--teal-100);
  --chart-grid:var(--teal-800);
  --overlay-glass:rgba(18,31,33,.78);
}
:root{
  /* light-theme badge text moved one step darker than the system's fg so every pairing clears 4.5:1 */
  --success-fg:var(--glow-800);
  --pim-hero-scrim:linear-gradient(180deg,rgba(18,31,33,.62) 0%,rgba(18,31,33,.86) 100%);
  --pim-navy:var(--teal-900);
  --pim-charcoal:var(--teal-950);
}
html{scroll-behavior:smooth}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page);color:var(--text-body)}
::placeholder{color:var(--text-muted)}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon-sm{width:16px;height:16px}
.icon-lg{width:28px;height:28px}
.money,.price{white-space:nowrap;font-variant-numeric:var(--numeric-tabular)}
.num{font-variant-numeric:var(--numeric-tabular)}
.muted{color:var(--text-muted)}
.small{font:var(--type-body-sm)}
.caption{font:var(--type-caption);color:var(--text-muted)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.stack>*+*{margin-top:var(--stack)}
.stack-tight>*+*{margin-top:var(--stack-tight)}
.stack-loose>*+*{margin-top:var(--stack-loose)}
.row{display:flex;align-items:center;gap:var(--inline-gap);flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--inline-gap);flex-wrap:wrap}
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-20)}
@media (min-width:768px){.container{padding:0 var(--gutter-page)}}
main{flex:1 1 auto}
a.plain{text-decoration:none}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-target-min);padding:0 var(--control-pad-x-md);border-radius:var(--radius-control);border:var(--border-width-hairline) solid transparent;font:var(--type-button);cursor:pointer;text-decoration:none;transition:var(--transition-control);background:var(--surface-sunken);color:var(--text-heading);white-space:nowrap}
.btn:hover{background:var(--surface-soft)}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled,.btn[aria-busy="true"]{opacity:.6;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--surface-brand);color:var(--text-on-brand);border-color:var(--surface-brand)}
.btn-primary:hover{background:var(--surface-brand-hover);border-color:var(--surface-brand-hover)}
.btn-highlight{background:var(--surface-highlight);color:var(--text-on-highlight);border-color:var(--surface-highlight)}
.btn-highlight:hover{background:var(--surface-highlight-hover)}
.btn-ghost{background:transparent;border-color:var(--border-default);color:var(--text-heading)}
.btn-ghost:hover{background:var(--surface-hover)}
.btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger-fg)}
.btn-danger:hover{background:var(--danger-bg)}
.btn-link{background:none;border:0;color:var(--text-link);padding:0 var(--space-8);text-decoration:underline;text-underline-offset:3px}
.btn-link:hover{color:var(--text-link-hover);background:none}
.btn-icon{width:var(--tap-target-min);padding:0}
.btn-sm{min-height:36px;padding:0 var(--control-pad-x-sm)}
.btn-lg{min-height:var(--control-h-lg);padding:0 var(--control-pad-x-lg);font-size:var(--text-md)}
.btn-block{width:100%}
.btn .spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:tmp-spin .8s linear infinite}

/* ── Cards, badges, notices ────────────────────────────────────────────────────────────────── */
.card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--gutter-card);box-shadow:var(--shadow-xs)}
.card-compact{padding:var(--gutter-card-compact)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-12);flex-wrap:wrap;margin-bottom:var(--space-16)}
.badge{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-8);border-radius:var(--radius-badge);font:var(--type-eyebrow);letter-spacing:var(--tracking-wide);text-transform:uppercase;border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);white-space:nowrap;line-height:1.6}
.badge-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.badge-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.badge-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}
.badge-neutral{background:var(--surface-sunken);border-color:var(--border-default);color:var(--text-body)}
.notice{display:flex;gap:var(--space-12);align-items:flex-start;padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);font:var(--type-body-sm)}
.notice .icon{margin-top:2px}
.notice-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg)}
.notice-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg)}
.notice-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg)}
.divider{border:0;border-top:var(--divider);margin:var(--space-16) 0}

/* ── Forms ─────────────────────────────────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:var(--space-6)}
.field label,.field .label{font:var(--type-label);color:var(--text-heading)}
.field .hint{font:var(--type-caption);color:var(--text-muted)}
.field .error{font:var(--type-caption);color:var(--text-danger)}
.input,.select,.textarea{width:100%;min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border-radius:var(--radius-input);border:var(--border-control);background:var(--surface-card);color:var(--text-body);font:var(--type-body);transition:var(--transition-control)}
.textarea{min-height:120px;resize:vertical;line-height:var(--leading-normal)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--border-brand);box-shadow:var(--ring-focus)}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--danger-solid)}
.form-grid{display:grid;gap:var(--space-16);grid-template-columns:1fr}
@media (min-width:640px){.form-grid-2{grid-template-columns:1fr 1fr}}
.choice-list{display:grid;gap:var(--space-8);grid-template-columns:1fr}
@media (min-width:640px){.choice-list{grid-template-columns:1fr 1fr}}
.choice{display:flex;gap:var(--space-12);align-items:center;min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border:var(--border-control);border-radius:var(--radius-control);background:var(--surface-card);cursor:pointer;font:var(--type-body-sm);color:var(--text-body);transition:var(--transition-control)}
.choice:hover{background:var(--surface-hover)}
.choice:has(input:checked){border-color:var(--border-brand);box-shadow:var(--ring-selected);background:var(--surface-selected)}
.choice input{width:18px;height:18px;accent-color:var(--teal-600);margin:0}
.scale{display:flex;gap:var(--space-8);flex-wrap:wrap}
.scale .choice{flex:1 1 56px;justify-content:center}
.error-summary{border-left:var(--keyline-brand);border-left-color:var(--danger-solid);padding:var(--space-12) var(--space-16);background:var(--danger-bg);color:var(--danger-fg);border-radius:var(--radius-card);font:var(--type-body-sm)}
.error-summary ul{margin:var(--space-8) 0 0;padding-left:var(--space-20)}

/* ── Tables ────────────────────────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
.table-wrap table{min-width:640px}
.table-wrap thead th{position:sticky;top:0;background:var(--surface-sunken);color:var(--text-heading);z-index:var(--z-raised);white-space:nowrap}
.table-wrap th[data-sort]{cursor:pointer;user-select:none}
.table-wrap th[data-sort]:hover{color:var(--text-heading)}
.table-wrap tbody tr:hover{background:var(--surface-hover)}
.table-wrap td.num,.table-wrap th.num{text-align:right}
.table-tools{display:flex;gap:var(--space-12);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-12)}
.table-tools .input{max-width:320px}
.pager{display:flex;gap:var(--space-8);align-items:center;justify-content:flex-end;padding:var(--space-12);font:var(--type-body-sm);color:var(--text-muted)}

/* ── States ────────────────────────────────────────────────────────────────────────────────── */
.skeleton{display:grid;gap:var(--space-12)}
.skeleton span{display:block;height:14px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-sunken),var(--surface-soft),var(--surface-sunken));background-size:200% 100%;animation:pim-shimmer 1.2s linear infinite}
@keyframes pim-shimmer{to{background-position:-200% 0}}
.state{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);padding:var(--space-24);border:var(--border-width-hairline) dashed var(--border-default);border-radius:var(--radius-card);background:var(--surface-page-alt);color:var(--text-body)}
.state .icon{color:var(--text-muted)}
.state p{font:var(--type-body)}

/* ── Toasts and dialogs ────────────────────────────────────────────────────────────────────── */
.toasts{position:fixed;left:50%;bottom:var(--space-20);transform:translateX(-50%);display:flex;flex-direction:column;gap:var(--space-8);z-index:var(--z-toast);width:min(92vw,480px)}
.toast{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);background:var(--surface-inverse);color:var(--text-on-inverse);box-shadow:var(--shadow-lg);border-left:var(--border-width-accent) solid var(--info-solid);animation:tmp-rise-in var(--duration-base) var(--ease-out)}
.toast-msg{flex:1 1 auto;font:var(--type-body-sm);color:inherit}
.toast-ok{border-left-color:var(--glow-400)}
.toast-warn{border-left-color:var(--amber-400)}
.toast-danger{border-left-color:var(--rust-400)}
.toast .btn{color:inherit;border-color:transparent;background:transparent}
.toast .btn:hover{background:var(--surface-inverse-alt)}
.toast .btn-link{text-decoration-color:currentColor}
.dialog{border:0;padding:0;border-radius:var(--radius-dialog);background:var(--surface-card);color:var(--text-body);box-shadow:var(--shadow-xl);width:min(92vw,520px);max-height:90vh}
.dialog::backdrop{background:var(--overlay-scrim)}
.dialog-body{padding:var(--space-24);display:flex;flex-direction:column;gap:var(--space-16)}
.dialog-actions{display:flex;gap:var(--space-8);justify-content:flex-end;flex-wrap:wrap}

/* ── Customer shell ────────────────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--overlay-glass);backdrop-filter:var(--blur-glass);border-bottom:var(--divider)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);min-height:var(--site-header-h)}
.brand{display:flex;align-items:center;gap:var(--space-12);text-decoration:none;color:var(--text-heading)}
.brand img{height:36px;width:auto}
.brand-name{font:var(--weight-bold) var(--text-lg)/1 var(--font-core);letter-spacing:var(--tracking-tight)}
.brand-tag{display:none;font:var(--type-caption);color:var(--text-muted)}
@media (min-width:1024px){.brand-tag{display:block}}
.nav{display:none;align-items:center;gap:var(--space-4)}
.nav a{display:inline-flex;align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);font:var(--type-label);color:var(--text-body);text-decoration:none}
.nav a:hover{background:var(--surface-hover);color:var(--text-heading)}
.nav a[aria-current="page"]{color:var(--text-heading);box-shadow:inset 0 -2px 0 var(--df-meadow-glow)}
@media (min-width:1024px){.nav{display:flex}}
.header-actions{display:flex;align-items:center;gap:var(--space-8)}
.menu-toggle{display:inline-flex}
@media (min-width:1024px){.menu-toggle{display:none}}
.mobile-nav{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-12) var(--space-20) var(--space-20);border-bottom:var(--divider);background:var(--surface-card)}
.mobile-nav a{display:flex;align-items:center;gap:var(--space-12);min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);font:var(--type-label);color:var(--text-body);text-decoration:none}
.mobile-nav a[aria-current="page"]{background:var(--surface-selected);color:var(--text-heading)}
@media (min-width:1024px){.mobile-nav{display:none}}

.hero{position:relative;color:var(--df-white);background:var(--pim-charcoal) url('/assets/hero-generated.webp') center/cover no-repeat;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:var(--pim-hero-scrim);z-index:-1}
.hero .container{padding-top:var(--space-64);padding-bottom:var(--space-64);display:grid;gap:var(--space-24);max-width:var(--container-xl)}
@media (min-width:768px){.hero .container{padding-top:var(--space-96);padding-bottom:var(--space-96);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}}
.hero h1{font:var(--type-h1);color:var(--df-white);max-width:18ch}
@media (min-width:768px){.hero h1{font:var(--type-display)}}
.hero p.lead{font:var(--type-body-lg);color:var(--teal-100);max-width:var(--measure-narrow)}
.hero .eyebrow{color:var(--glow-200)}
.hero-actions{display:flex;gap:var(--space-12);flex-wrap:wrap}
.hero-panel{background:rgba(18,31,33,.72);border:var(--border-width-hairline) solid var(--border-inverse);border-radius:var(--radius-panel);padding:var(--space-24);display:grid;gap:var(--space-12);color:var(--teal-100);backdrop-filter:var(--blur-glass)}
.hero-panel strong{color:var(--df-white)}
.hero-panel .price{font:var(--weight-bold) var(--text-2xl)/1 var(--font-core);color:var(--glow-300)}
.hero-stat{display:flex;justify-content:space-between;gap:var(--space-12);padding:var(--space-8) 0;border-top:var(--border-width-hairline) solid var(--border-inverse)}
.hero-stat:first-child{border-top:0}

.section{padding:var(--section-y-compact) 0}
@media (min-width:768px){.section{padding:var(--section-y) 0}}
.section-alt{background:var(--surface-page-alt)}
.section-head{display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-32);max-width:var(--measure-prose)}
.section-head h2{font:var(--type-h2)}
.grid{display:grid;gap:var(--grid-gap);grid-template-columns:1fr}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid>.card{display:flex;flex-direction:column;height:100%}
.course-card{gap:var(--space-12)}
.course-card .course-body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--space-8)}
.course-card h3{font:var(--type-h3)}
.course-card .meta{display:flex;gap:var(--space-12);flex-wrap:wrap;font:var(--type-caption);color:var(--text-muted)}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-12);padding-top:var(--space-12);border-top:var(--divider);min-height:56px}
.price-row .price{font:var(--weight-bold) var(--text-xl)/1 var(--font-core);color:var(--text-heading)}
.price-row .per{font:var(--type-caption);color:var(--text-muted)}
.step-list{display:grid;gap:var(--space-24);grid-template-columns:1fr;counter-reset:step}
@media (min-width:768px){.step-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-24);border-top:var(--keyline-brand);background:var(--surface-card);border-radius:var(--radius-card)}
.step .n{font:var(--weight-bold) var(--text-3xl)/1 var(--font-core);color:var(--df-dark-teal);font-variant-numeric:var(--numeric-tabular)}
.step h3{font:var(--type-h3)}
.practitioner{display:flex;gap:var(--space-16);align-items:center}
.avatar{width:48px;height:48px;border-radius:var(--radius-avatar);background:var(--surface-brand);color:var(--text-on-brand);display:grid;place-items:center;font:var(--weight-bold) var(--text-md)/1 var(--font-core);flex:0 0 auto}

.site-footer{background:var(--pim-navy);color:var(--teal-100);padding:var(--space-48) 0 var(--space-32);margin-top:auto}
[data-theme="dark"] .site-footer{background:var(--teal-900);border-top:var(--divider)}
.site-footer a{color:var(--teal-100);text-decoration-color:var(--teal-500)}
.site-footer a:hover{color:var(--df-white)}
.footer-grid{display:grid;gap:var(--space-32);grid-template-columns:1fr}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.footer-grid h4{color:var(--df-white);font:var(--type-h4);margin-bottom:var(--space-12)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-8);font:var(--type-body-sm)}
.trust{display:flex;gap:var(--space-16);flex-wrap:wrap;margin-top:var(--space-32);padding-top:var(--space-24);border-top:var(--border-width-hairline) solid var(--border-inverse);font:var(--type-caption);color:var(--teal-200)}
.trust span{display:inline-flex;gap:var(--space-6);align-items:center}

/* ── Page layout inside the customer app ───────────────────────────────────────────────────── */
.page{padding:var(--space-32) 0 var(--space-64)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-16);flex-wrap:wrap;margin-bottom:var(--space-24)}
.page-head h1{font:var(--type-h2)}
@media (min-width:768px){.page-head h1{font:var(--type-h1)}}
.two-col{display:grid;gap:var(--space-24);grid-template-columns:1fr}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}}
.lesson-list{display:flex;flex-direction:column;gap:var(--space-8)}
.lesson-row{display:flex;gap:var(--space-12);align-items:center;padding:var(--space-12) var(--space-16);border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card);text-decoration:none;color:var(--text-body);min-height:var(--control-h-lg)}
.lesson-row[aria-disabled="true"]{opacity:.7}
.lesson-row .n{width:32px;height:32px;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--surface-sunken);color:var(--text-heading);font:var(--type-label);flex:0 0 auto}
.lesson-row.done .n{background:var(--surface-highlight);color:var(--text-on-highlight)}
.lesson-row .t{flex:1 1 auto;font:var(--type-label);color:var(--text-heading)}
.prose{font:var(--type-body-lg);color:var(--text-body);max-width:var(--measure-prose)}
.prose p+p{margin-top:var(--space-16)}
.progress{height:8px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--surface-highlight);border-radius:inherit;transition:width var(--duration-slow) var(--ease-standard)}
.slot-grid{display:grid;gap:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.slot{min-height:var(--tap-target-min);border:var(--border-control);border-radius:var(--radius-control);background:var(--surface-card);color:var(--text-heading);font:var(--type-label);cursor:pointer;font-variant-numeric:var(--numeric-tabular)}
.slot:hover{background:var(--surface-hover)}
.slot[aria-pressed="true"]{background:var(--surface-brand);color:var(--text-on-brand);border-color:var(--surface-brand)}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-16)}
.timeline li{position:relative;padding-left:var(--space-24);border-left:var(--border-width-thick) solid var(--border-default)}
.timeline li::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:var(--radius-pill);background:var(--df-dark-teal)}
.stages{display:grid;gap:var(--space-8);grid-template-columns:repeat(5,minmax(0,1fr))}
.stage{padding:var(--space-8);border-radius:var(--radius-control);background:var(--surface-sunken);color:var(--text-body);font:var(--type-caption);text-align:center;border:var(--border-width-hairline) solid var(--border-subtle)}
.stage{min-width:0;overflow-wrap:anywhere}
@media (max-width:639px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .value{font-size:var(--text-2xl)}.hero-panel .price{font-size:var(--text-xl)}}
.stage.done{background:var(--surface-soft);color:var(--text-heading)}
.stage.now{background:var(--surface-brand);color:var(--text-on-brand);border-color:var(--surface-brand)}
.summary-list{display:grid;gap:var(--space-8);font:var(--type-body-sm)}
.summary-list div{display:flex;justify-content:space-between;gap:var(--space-12);padding:var(--space-6) 0;border-bottom:var(--divider)}
.summary-list dt{color:var(--text-muted)}
.summary-list dd{margin:0;color:var(--text-heading);text-align:right}
.signin-wrap{max-width:460px;margin:0 auto}

/* ── Admin console shell ───────────────────────────────────────────────────────────────────── */
.admin{display:grid;grid-template-columns:1fr;min-height:100vh;background:var(--surface-page-alt)}
@media (min-width:1024px){.admin{grid-template-columns:var(--app-sidebar-w) 1fr}}
.sidebar{background:var(--pim-navy);color:var(--teal-100);display:none;flex-direction:column;padding:var(--space-20) var(--space-16);gap:var(--space-20);position:sticky;top:0;height:100vh;overflow-y:auto}
[data-theme="dark"] .sidebar{background:var(--teal-950);border-right:var(--divider)}
.sidebar.open{display:flex;position:fixed;inset:0;z-index:var(--z-dialog);width:min(86vw,320px)}
@media (min-width:1024px){.sidebar{display:flex}}
.sidebar .brand{color:var(--df-white)}
.sidebar .brand-tag{display:block;color:var(--teal-200)}
.sidebar nav{display:flex;flex-direction:column;gap:var(--space-4)}
.sidebar nav a{display:flex;align-items:center;gap:var(--space-12);min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--teal-100);text-decoration:none;font:var(--type-label)}
.sidebar nav a:hover{background:var(--teal-800);color:var(--df-white)}
.sidebar nav a[aria-current="page"]{background:var(--teal-800);color:var(--df-white);box-shadow:inset 3px 0 0 var(--df-meadow-glow)}
.sidebar .who{margin-top:auto;font:var(--type-caption);color:var(--teal-200);word-break:break-all}
.sidebar .section-label{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--teal-300);padding:0 var(--space-12);margin-top:var(--space-12)}
.scrim{position:fixed;inset:0;background:var(--overlay-scrim);z-index:var(--z-scrim)}
.admin-main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:var(--app-topbar-h);padding:0 var(--space-20);background:var(--surface-card);border-bottom:var(--divider);position:sticky;top:0;z-index:var(--z-sticky)}
.topbar h1{font:var(--type-h3)}
.admin-content{padding:var(--space-24) var(--space-20) var(--space-64);display:flex;flex-direction:column;gap:var(--space-24);max-width:var(--container-2xl);width:100%}
@media (min-width:768px){.admin-content{padding:var(--space-32) var(--gutter-page) var(--space-64)}}
.kpis{display:grid;gap:var(--space-16);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--space-16) var(--space-20);display:grid;gap:var(--space-4)}
.kpi .label{font:var(--type-caption);color:var(--text-muted)}
.kpi .value{font:var(--weight-bold) var(--text-3xl)/1 var(--font-core);color:var(--text-heading);font-variant-numeric:var(--numeric-tabular);white-space:nowrap}
.kpi .sub{font:var(--type-caption);color:var(--text-muted)}
.chart{width:100%;height:auto;display:block}
.chart .bar{fill:var(--chart-1)}
.chart .bar.hi{fill:var(--chart-2)}
.chart .grid{stroke:var(--chart-grid)}
.chart text{fill:var(--text-muted);font:var(--type-caption)}
.tabs{display:flex;gap:var(--space-4);border-bottom:var(--divider);overflow-x:auto}
.tabs button{min-height:var(--tap-target-min);padding:0 var(--space-16);background:none;border:0;border-bottom:2px solid transparent;color:var(--text-muted);font:var(--type-label);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text-heading);border-bottom-color:var(--df-meadow-glow)}
.diary-day{display:grid;gap:var(--space-8)}
.diary-row{display:grid;gap:var(--space-12);grid-template-columns:72px 1fr;align-items:start;padding:var(--space-12) var(--space-16);background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card)}
@media (min-width:768px){.diary-row{grid-template-columns:72px 1fr auto}}
.diary-row .time{font:var(--weight-bold) var(--text-lg)/1 var(--font-core);color:var(--text-heading);font-variant-numeric:var(--numeric-tabular)}
.diary-row .actions{display:flex;gap:var(--space-8);flex-wrap:wrap}
.member-grid{display:grid;gap:var(--space-24);grid-template-columns:1fr}
@media (min-width:1024px){.member-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);align-items:start}}
.answers{display:grid;gap:var(--space-8);font:var(--type-body-sm)}
.answers div{display:grid;gap:var(--space-2);padding:var(--space-8) 0;border-bottom:var(--divider)}
.answers dt{color:var(--text-muted);font:var(--type-caption)}
.answers dd{margin:0;color:var(--text-heading)}
.status-list{display:grid;gap:var(--space-8)}
.status-list div{display:flex;justify-content:space-between;gap:var(--space-12);align-items:center;padding:var(--space-8) 0;border-bottom:var(--divider);font:var(--type-body-sm)}
.dot{width:10px;height:10px;border-radius:var(--radius-pill);display:inline-block;background:var(--amber-400)}
.dot.on{background:var(--glow-500)}