/* Generated from web/music-teacher-match.html by tools/build-site-chrome.py. Do not edit. */

  /* First paint never waits for auth. The rule that used to live here
     (body.booting .screen{visibility:hidden}) hid every screen until the
     app had worked out who was signed in, which meant a returning visitor
     whose last screen was a signed-in one got up to five seconds of blank
     page while Firebase read its session out of IndexedDB — and a private
     window or an in-app browser could take all five. See DECISIONS.md. */

  /* A login heading is a label, not a pitch. At hero scale it competed with
     the marketing headline on the page behind it. */
  .login-heading{ font-size:clamp(1.7rem, 4vw, 2.3rem); margin-bottom:6px; }

  /* Google's brand guidelines: white background, grey border, their mark at
     full colour, and the exact wording "Continue with Google". Restyling it
     to match the site would breach those terms and, more practically, make
     it less recognisable — the whole value is that people spot it instantly. */
  #googleSignInWrap{ max-width:320px; margin:0 0 4px; }
  .google-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; min-height:44px; padding:11px 16px;
    background:#fff; color:#3c4043;
    border:1px solid #dadce0; border-radius:8px; cursor:pointer;
    font-family:var(--font-body); font-size:0.95rem; font-weight:600;
  }
  .google-btn:hover{ background:#f8f9fa; border-color:#d2d5d9; }
  .google-btn:disabled{ opacity:0.6; cursor:default; }
  .auth-divider{
    display:flex; align-items:center; gap:12px;
    margin:18px 0 14px; color:var(--ink-soft); font-size:0.8rem;
  }
  .auth-divider::before, .auth-divider::after{
    content:""; flex:1; height:1px; background:var(--line);
  }

  /* Form-width primary button, which is the convention: the button should
     read as the obvious next action, not as an afterthought below the
     fields it submits. */
  #unifiedLoginForm{ max-width:320px; }
  #unifiedLoginForm .field{ max-width:none; }
  #unifiedLoginForm .primary{ width:100%; margin-top:4px; }

  /* Context indicator: says which area you're in, and is the way to the
     others. A toggle would be the wrong control here — toggles set a state
     in place, and with three possible roles two positions can't represent
     it. Naming the current context and offering the rest is what Shopify,
     Stripe and GitHub all do, and it answers "where am I" and "how do I
     leave" with one control. */
  /* The header is a space-between row, so a third item lands dead centre.
     Pushing the free space to the chip's right keeps it beside the wordmark
     — where it reads as "you are in this area of Studio Matchmaker" rather
     than as a floating control of its own. */
  .role-context{
    position:relative; display:flex; align-items:center;
    margin-left:14px; margin-right:auto;
  }
  .role-context-current{
    display:inline-flex; align-items:center; gap:7px;
    background:var(--paper-card); border:1px solid var(--line);
    border-radius:999px; padding:5px 12px;
    font-family:var(--font-body); font-size:0.78rem; font-weight:700;
    letter-spacing:0.02em; color:var(--ink); cursor:default;
  }
  .role-context-current.switchable{ cursor:pointer; }
  .role-context-current.switchable:hover{ border-color:var(--ink-soft); }
  .role-context-current svg{ width:13px; height:13px; opacity:0.55; }
  .role-context-menu{
    position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:var(--paper-card); border:1px solid var(--line);
    border-radius:10px; padding:6px; min-width:180px;
    box-shadow:0 10px 28px rgba(0,0,0,0.10); display:none;
  }
  .role-context-menu.open{ display:block; }
  .role-context-menu button{
    display:block; width:100%; text-align:left; background:none; border:none;
    cursor:pointer; padding:9px 11px; border-radius:7px;
    font-family:var(--font-body); font-size:0.85rem; color:var(--ink-soft);
  }
  .role-context-menu button:hover{ background:rgba(26,26,28,0.05); color:var(--ink); }

  /* The wordmark is the way home, the way it is on every other site. */
  .brand-home-link{ cursor:pointer; }
  .brand-home-link:hover{ opacity:0.7; }

  :root{
    --paper:#F1F1F3;
    --paper-card:#FFFFFF;
    --ink:#1A1A1C;
    --ink-soft:#6B7280;
    --brass:#1A1A1C;
    --brass-dark:#34353A;
    --near-black:#FFFFFF;
    --alert:#A23B3B;
    --line: rgba(26,26,28,0.10);
    --font-display:'Inter', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
    --radius-card:14px;
    --radius-btn:10px;
    --radius-chip:999px;
    --radius-tile:12px;
    --space-field:22px;
    --space-card-pad:26px;
    /* Spacing scale — 4px base unit, for gaps/margins that aren't tied to
       the admin density setting above (which only controls field spacing
       and card padding). Anything new should reach for one of these
       rather than picking an arbitrary px value, so spacing stays
       consistent as the app grows instead of drifting one inline style
       at a time. */
    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    /* Shadow elevation scale — three states (resting/hover/modal) instead
       of a different one-off shadow recipe per card type. A layered
       small+large shadow at each step reads as softer and more natural
       than a single hard shadow. */
    --shadow-resting: 0 1px 3px rgba(26,26,28,0.06), 0 8px 24px rgba(26,26,28,0.05);
    --shadow-hover: 0 2px 6px rgba(26,26,28,0.08), 0 16px 36px rgba(26,26,28,0.10);
    --shadow-modal: 0 8px 24px rgba(26,26,28,0.12), 0 28px 64px rgba(26,26,28,0.18);
    --header-bg:transparent;
    --header-padding:0px;
    --heading-color:var(--ink);
    --body-color:var(--ink);
    --button-bg:var(--brass);
    --button-text:var(--near-black);
    --card-bg:var(--paper-card);
  }
  body.corner-sharp{ --radius-card:4px; --radius-btn:4px; --radius-chip:6px; --radius-tile:4px; }
  body.corner-rounded{ --radius-card:24px; --radius-btn:999px; --radius-chip:999px; --radius-tile:20px; }
  body.density-compact{ --space-field:14px; --space-card-pad:16px; }
  body.density-spacious{ --space-field:32px; --space-card-pad:38px; }
  .brand-logo-img{ max-width:220px; display:block; }
  .site-header-band{
    display:flex; flex-direction:column; align-items:flex-start;
    background:var(--header-bg, transparent);
    padding:var(--header-padding, 0);
    border-radius:var(--radius-card);
    margin-bottom:8px;
    position:relative; z-index:35;
  }
  .site-header-band.align-center{ align-items:center; text-align:center; }
  .site-header-band.align-right{ align-items:flex-end; text-align:right; }
  .site-header-band .brand-logo-img{ margin-bottom:8px; }
  .site-header-band .brand-name-label{ color:var(--header-text, var(--heading-color, var(--ink))); margin:0; }
  .top-site-nav{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:16px; margin-bottom:8px;
    position:relative; z-index:35;
  }
  .top-site-nav .site-header-band{ margin-bottom:0; }
  .top-nav-links{ display:flex; gap:28px; align-items:center; }
  /* Hidden until the phone breakpoint, where it replaces the row of links.
     Four controls plus a wordmark plus the context chip wrapped into a tall
     stack that pushed the actual page below the fold. */
  .nav-menu-toggle{
    display:none; background:none; border:none; padding:8px; margin:-8px;
    cursor:pointer; color:var(--ink); line-height:0;
  }
  .nav-menu-toggle svg{ width:24px; height:24px; }
  /* Only ever shown inside the phone menu — on desktop the avatar in the
     page heading does this job. */
  .portal-nav-account{ display:none; }

  .top-nav-link{
    background:none; border:none; padding:0; cursor:pointer;
    font-family:var(--font-body); font-size:0.86rem; font-weight:600;
    color:var(--ink-soft);
  }
  .top-nav-link:hover{ color:var(--ink); }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--body-color);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:760px;margin:0 auto;padding:36px 20px 80px;}

  /* Student-screen hero gradient, for themes that define one (see
     heroGradient in THEME_SCHEMES). Scoped to #screen-match so the
     teacher portal, admin console, and the public pay-invoice page all
     keep the flat `paper` background — a working screen someone stares
     at for an hour shouldn't have a colour wash behind it, and a
     payment page shouldn't look like marketing.

     min-height fills the viewport so the gradient always reaches the
     bottom of the window rather than stopping partway down on a short
     page. background-attachment keeps it anchored while scrolling, so
     a long results list doesn't drag the colour band along with it. */
  body.has-hero-gradient #screen-match{
    background:var(--hero-gradient);
    background-attachment:fixed;
    min-height:100vh;
  }
  /* The admin screen alone gets a much wider working area — a real
     dashboard shouldn't be squeezed into the same narrow reading-width
     column the student-facing marketing pages use, especially now that
     a fixed sidebar also needs room alongside the main content. Scoped
     to just this screen so nothing else is affected. */
  #screen-admin .wrap, #screen-teacher .wrap{ max-width:1400px; margin:0; }

  .form-section + .form-section{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid var(--line);
  }
  .form-section-heading{
    display:flex;align-items:center;gap:9px;
    margin-bottom:16px;padding-bottom:12px;
    border-bottom:1px solid var(--line);
  }
  /* No filled circle badge — a bold solid-color badge reads more like a
     gamified consumer app than a professional tool. A small plain icon
     in the accent color, paired with a restrained label, is the pattern
     most polished SaaS products (Stripe, Linear, Notion) actually use
     for section headers: understated enough that it organizes the form
     without competing with the actual interactive content below it. */
  .form-section-heading .icon-badge{
    width:20px;height:20px;flex-shrink:0;
    background:none;color:var(--brass);
    display:flex;align-items:center;justify-content:center;
  }
  .form-section-heading .icon-badge svg{width:18px;height:18px;}
  .form-section-heading h2{
    font-family:var(--font-body);font-weight:700;
    font-size:0.86rem;letter-spacing:0.02em;
    margin:0;color:var(--ink);
  }
  /* "Teach with us" — a real sales landing page for potential teachers,
     rather than dropping straight into the login/signup form with no
     context. Kept visually consistent with the rest of the app (same
     serif display headings, brass accent) rather than inventing a
     separate "marketing" style. */
  .teach-hero{ text-align:center; padding:32px 0 8px; max-width:640px; margin:0 auto; }
  .teach-hero h1{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2rem, 4.5vw, 2.8rem); letter-spacing:-0.02em; line-height:1.15;
    margin:0 0 14px;
  }
  .teach-hero .tag{ margin:0 0 26px; }
  .teach-value-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:18px;
    max-width:820px; margin:40px auto;
  }

  .teach-value-card{
    background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card);
    padding:24px; box-shadow:var(--shadow-resting);
  }
  .teach-value-icon{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%;
    background:var(--brass); color:var(--near-black);
    margin-bottom:14px;
  }
  .teach-value-icon svg{ width:22px; height:22px; }
  .teach-value-card h3{
    font-family:var(--font-display); font-weight:700; font-size:1.1rem;
    margin:0 0 6px;
  }
  .teach-value-card p{ margin:0; color:var(--ink-soft); font-size:0.92rem; line-height:1.5; }
  .tp-switch{ display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:600; min-height:44px; }
  .tp-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
  .tp-switch-track{ flex:none; position:relative; width:46px; height:26px; border-radius:13px; background:var(--line, #ccc); transition:background .15s; }
  .tp-switch-track::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s; }
  .tp-switch input:checked + .tp-switch-track{ background:var(--button-bg); }
  .tp-switch input:checked + .tp-switch-track::after{ transform:translateX(20px); }
  .tp-switch input:focus-visible + .tp-switch-track{ outline:2px solid var(--button-bg); outline-offset:2px; }
  .teach-more-links{ text-align:center; margin:-8px 0 28px; color:var(--ink-soft); font-size:0.95rem; }
  .teach-cta-band{
    text-align:center; max-width:520px; margin:0 auto 40px;
    padding:36px 24px; border-top:1px solid var(--line);
  }
  .teach-cta-band h2{
    font-family:var(--font-display); font-weight:700; font-size:1.5rem;
    margin:0 0 10px;
  }
  .teach-cta-band p{ margin:0 0 20px; color:var(--ink-soft); }
  /* Step 1 — instrument + ZIP only, large centered hero */
  .match-step1{ text-align:center; padding:20px 0 8px; }
  .match-hero{
    font-family:var(--font-display);font-weight:700;
    font-size:var(--hero-size, clamp(1.9rem, 4.6vw, 2.7rem));
    letter-spacing:-0.01em; line-height:1.15;
    margin:0 auto 34px; max-width:720px;
  }
  .match-hero-subheading{
    font-family:var(--font-body);font-weight:500;color:var(--ink-soft);
    font-size:var(--hero-subheading-size, clamp(0.95rem, 2vw, 1.1rem));
    line-height:1.4; margin:-20px auto 30px; max-width:600px;
  }
  /* A single continuous pill rather than separate boxy fields — deliberately
     always fully rounded regardless of the admin's corner-style setting
     elsewhere, since a sharp-cornered version of this specific shape would
     undercut the whole idea. Elevated well beyond the app's normal card
     shadow so it reads as a distinct, tactile floating object, the way
     Airbnb's own search bar does. */
  .match-step1-search-pill{
    display:flex; align-items:stretch;
    max-width:680px; margin:0 auto; height:66px;
    background:var(--card-bg);
    border-radius:999px;
    box-shadow:0 4px 14px rgba(26,26,28,0.08), 0 20px 44px rgba(26,26,28,0.10);
    border:1px solid var(--line);
    transition:box-shadow 0.2s ease;
  }
  .match-step1-search-pill:focus-within{
    box-shadow:0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent), 0 4px 14px rgba(26,26,28,0.08), 0 20px 44px rgba(26,26,28,0.10);
  }
  .pill-segment{
    flex:1 1 auto; display:flex; align-items:center; gap:10px;
    padding:0 22px; min-width:0;
  }
  .pill-segment.zip-segment{ flex:0 0 190px; }
  .geo-suggest{ position:absolute; left:0; right:0; top:100%; z-index:50; background:var(--paper-card, #fff); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.12); max-height:260px; overflow-y:auto; text-align:left; margin-top:4px; }
  .geo-suggest-item{ padding:8px 12px; font-size:0.88rem; cursor:pointer; }
  .geo-suggest-item.active, .geo-suggest-item:hover{ background:var(--paper-alt, #FAF6F0); }
  .pill-segment .combobox-wrap{ flex:1 1 auto; min-width:0; display:flex; align-items:center; height:100%; position:relative; }
  .pill-segment input{
    border:none; background:none; outline:none; padding:0;
    font-size:1.05rem; font-family:var(--font-body); color:var(--ink);
    width:100%; height:100%;
  }
  .pill-segment input::placeholder{ color:var(--ink-soft); }
  /* Higher specificity than both the general pill input rule above and
     the pre-existing .combobox-wrap input rule, so the instrument field
     keeps its reserved space for the dropdown arrow button — without
     this, the arrow would sit on top of the typed text. */
  .pill-segment .combobox-wrap input{ padding-right:36px; }
  /* ID selectors specifically so these reliably beat the app's global
     input border/focus-outline rules regardless of where either ends up
     in the stylesheet — a plain class-level override here was losing to
     those global rules, which is what was showing as a rectangular
     border and a boxy focus outline cutting through the rounded pill. */
  #instrument, #studentZip{ border:none; }
  #instrument:focus, #studentZip:focus{ outline:none; }
  .pill-search-btn{
    flex-shrink:0; display:flex; align-items:center; gap:8px;
    background:var(--button-bg, var(--brass)); color:var(--button-text, var(--near-black));
    border:none; padding:0 30px; font-family:var(--font-body); font-weight:700; font-size:1rem;
    cursor:pointer; border-radius:0 999px 999px 0;
    transition:filter 0.15s ease;
  }
  .pill-search-btn:hover{ filter:brightness(1.08); }

  /* Step 2 — criteria on the left/center, a running list of teachers who
     already match on instrument + distance in a sidebar on the right, so
     picking criteria doesn't feel like a leap of faith into the unknown. */
  /* Wizard flow — Personality, then Teaching Style, then everything
     else, one focused screen at a time, replacing the old single
     all-at-once step-2 form (with its sidebar of nearby teachers). */
  .match-step2-heading{
    font-family:var(--font-display);font-weight:700;
    font-size:var(--step2-heading-size, clamp(1.5rem, 3.4vw, 2rem));
    letter-spacing:-0.01em; line-height:1.2;
    text-align:center; margin:4px auto 30px; max-width:520px;
  }
  .match-step2-subheading{
    font-family:var(--font-body);font-weight:500;color:var(--ink-soft);
    font-size:var(--step2-subheading-size, clamp(0.95rem, 2vw, 1.1rem));
    line-height:1.4; text-align:center; margin:-20px auto 30px; max-width:480px;
  }
  /* Wizard as a real popup modal (matching a Thumbtack-style reference
     the user liked) rather than an inline page section — it now floats
     over a dimmed backdrop instead of living in the normal page flow.
     z-index:200 is comfortably above the page fade (z-index:30) and the
     sticky admin/teacher tab bars (z-index:20), so none of that earlier
     "sits above the fade" plumbing is needed for anything inside here. */
  .wizard-modal-card{
    background:var(--paper-card); border-radius:var(--radius-card);
    box-shadow:var(--shadow-modal);
    width:100%; max-width:920px; max-height:92vh;
    display:flex; flex-direction:column; overflow:hidden;
  }
  .wizard-modal-header{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 20px; border-bottom:1px solid var(--line); flex-shrink:0;
  }
  .wizard-modal-arrow, .wizard-modal-close{
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    display:flex; align-items:center; padding:4px; flex-shrink:0;
  }
  .wizard-modal-arrow:hover, .wizard-modal-close:hover{ color:var(--ink); }
  .wizard-modal-arrow svg, .wizard-modal-close svg{ width:22px; height:22px; }
  .wizard-modal-title-wrap{ text-align:center; }
  .wizard-modal-title{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.05rem; }
  .wizard-modal-change-search{
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--brass); font-family:var(--font-body); font-size:0.82rem; text-decoration:underline;
  }
  .wizard-modal-card > .wizard-top{ padding:18px 20px 0; margin:0; }
  .wizard-modal-card > .wizard-layout{ padding:0 20px; overflow-y:auto; flex:1; }
  .wizard-modal-card > .wizard-footer{ padding:16px 20px 20px; border-top:1px solid var(--line); margin:0; }
  .wizard-top{ margin:0 0 8px; }
  .wizard-top-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .wizard-step-label{
    font-family:var(--font-body); font-size:0.78rem; font-weight:600;
    color:var(--ink-soft); letter-spacing:0.04em; text-transform:uppercase;
  }
  .wizard-skip-btn{
    background:none; border:none; cursor:pointer; color:var(--ink-soft);
    font-family:var(--font-body); font-size:0.86rem; text-decoration:underline; padding:0;
  }
  .wizard-progress-track{ height:4px; background:var(--line); border-radius:999px; overflow:hidden; }
  .wizard-progress-fill{ height:100%; background:var(--brass); border-radius:999px; transition:width 0.3s ease; }
  .wizard-screen{ padding:18px 0 8px; }
  .wizard-step-heading{
    font-family:var(--font-display); font-weight:700; font-size:1.4rem;
    text-align:center; margin:0 0 22px; line-height:1.25;
  }
  .wizard-step-sub{ text-align:center; margin:-14px 0 18px; color:var(--ink-soft); font-size:0.88rem; }
  .wizard-footer{
    margin:8px 0 0; display:flex; align-items:center; justify-content:center; gap:12px;
  }
  .wizard-footer .primary{ flex:1; max-width:320px; }
  /* Layout for the wizard screens (Personality/Teaching Style/More) —
     the info-collection steps, not the results or any individual result
     card. Single column: these screens are meant to stay single-focus,
     and the read-only "Teachers near you" sidebar that used to sit
     alongside was removed. */
  .wizard-layout{
    display:block;
  }
  header h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.2rem, 5vw, 3.1rem);
    letter-spacing:-0.02em;
    margin:0 0 6px;
    color:var(--heading-color);
  }
  /* Admin dashboard page titles are functional labels a person scans
     past dozens of times a day, not a marketing headline read once —
     industry-standard admin panels (Stripe, Linear, etc.) keep these
     compact, generally in the 20-28px range, not full display type. */
  #screen-admin header h1{
    font-size:1.5rem;
    letter-spacing:-0.01em;
    margin:0 0 3px;
  }
  #screen-admin header .tag{ font-size:0.88rem; }
  header p.tag{
    color:var(--ink-soft);
    font-size:1.02rem;
    margin:0 0 4px;
    max-width:46ch;
  }
  .eyebrow{
    font-family:var(--font-body);
    font-style:normal;
    font-weight:600;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 8px;
  }

  /* tabs */
  .tabs{display:flex;gap:8px;margin:28px 0 26px;border-bottom:1px solid var(--line);}
  .tab-btn{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.92rem;
    background:none;border:none;
    padding:10px 4px 12px;
    color:var(--ink-soft);
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-right:22px;
  }
  .tab-btn.active{color:var(--ink);border-bottom-color:var(--brass);}
  .tab-btn:hover{color:var(--ink);}

  section.panel{display:none;}
  section.panel.active{display:block;}
  /* The admin shell is a section carrying both .panel and .admin-shell, so
     the rule above beat its display:flex on specificity and the sidebar
     stacked on top of the content instead of sitting beside it. The teacher
     portal uses a plain div, which is why only the admin panel broke. */
  section.panel.active.admin-shell{ display:flex; }

  /* form */
  .field{margin-bottom:var(--space-field);}
  .locked-criterion-field{
    background:var(--paper);
    border-radius:10px;
    padding:16px 16px 14px;
  }
  .field label{
    display:block;
    font-weight:600;
    font-size:0.92rem;
    margin-bottom:8px;
  }
  .hint{font-size:0.82rem;color:var(--ink-soft);margin-top:6px;}
  /* SMS consent block (Twilio A2P 10DLC). Sits directly under a mobile
     number field. The checkbox is never pre-checked in markup; JS sets it
     only to reflect a consent the person already recorded, and clears it
     the moment the number is edited, since consent is tied to a number. */
  .sms-consent{max-width:520px;margin-top:10px;padding:12px 14px;border:1px solid var(--line, #ddd);border-radius:8px;background:var(--paper-card);}
  .sms-consent-check{display:flex;align-items:flex-start;gap:10px;font-size:0.9rem;line-height:1.45;cursor:pointer;}
  .sms-consent-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--brass);}
  .sms-consent-heading{font-size:0.9rem;font-weight:600;margin:0 0 10px;}
  .sms-consent-body{font-size:0.82rem;color:var(--ink-soft);margin:10px 0 0;line-height:1.45;}
  .sms-consent-terms{font-size:0.78rem;color:var(--ink-soft);margin:10px 0 0;line-height:1.45;}
  .sms-consent-terms p{margin:0 0 6px;}
  .sms-consent-terms b{color:var(--ink);font-weight:600;}
  .sms-consent-terms a{color:var(--brass);}
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],textarea,select{
    width:100%;
    font-family:var(--font-body);
    font-size:16px;
    padding:11px 13px;
    border:1px solid var(--line);
    border-radius:6px;
    background:var(--paper-card);
    color:var(--ink);
  }
  /* Show/hide eye inside every password field (added by initPasswordToggles) */
  .pw-wrap{ position:relative; display:block; }
  .pw-wrap > input{ padding-right:50px; }
  .pw-toggle{ position:absolute; top:50%; right:0; transform:translateY(-50%); width:44px; height:44px; min-height:44px; padding:0; margin:0; border:none; background:none; box-shadow:none; color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:6px; }
  .pw-toggle:hover{ color:var(--ink); background:none; }
  .pw-toggle:focus-visible{ outline:2px solid var(--brass); outline-offset:-4px; }
  .pw-toggle svg{ width:22px; height:22px; pointer-events:none; }
  input:focus,textarea:focus,select:focus{
    outline:2px solid var(--brass);
    outline-offset:1px;
  }
  input[type=checkbox]{accent-color:var(--brass);width:16px;height:16px;flex-shrink:0;}
  textarea{resize:vertical;min-height:70px;}

  .chip-row{display:flex;flex-wrap:wrap;gap:8px;}
  /* Carries only the odd-count rule for the wizard's two-column option
     layout — the grid itself is applied inline (see
     applyWizardTwoColumn), because the option renderers set their own
     inline grid styles that a class rule can't override.

     An odd number of options leaves one card alone in the last row,
     hard against the left column. Spanning it across both and centering
     it — at one column's width, so it doesn't read as a bigger or more
     important option — makes that row look deliberate rather than left
     over. :last-child:nth-child(odd) only matches when the total count
     is odd, so even lists are untouched. */
  .wizard-two-col > *:last-child:nth-child(odd){
    grid-column:1 / -1; justify-self:center; width:calc(50% - 6px);
  }
  .chip{
    font-family:var(--font-body);
    font-size:0.86rem;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--paper-card);
    cursor:pointer;
    color:var(--ink);
    user-select:none;
  }
  .chip.selected{background:var(--brass);border-color:var(--brass);color:var(--near-black);}
  .chip:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
  .radio-chip.selected{background:var(--brass);border-color:var(--brass);color:var(--near-black);}
  .radio-chip{
    font-family:var(--font-body);
    color:var(--ink);
    font-size:0.86rem;padding:8px 14px;border-radius:var(--radius-btn);
    border:1px solid var(--line);background:var(--paper-card);cursor:pointer;
  }
  .chip-gradient:not(.selected), .radio-chip-gradient:not(.selected){
    background:var(--chip-bg-light);
    border:2px solid var(--chip-bg);
    color:var(--ink);
  }
  .chip-gradient.selected, .radio-chip-gradient.selected{
    background:var(--chip-bg);
    border-color:var(--chip-bg);
    color:var(--near-black);
  }
  .chip-gradient, .radio-chip-gradient{ border-radius:var(--radius-btn); }
  .chip-size-fit-text{ text-align:center; }
  .tile-chip{
    display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:14px 8px;border-radius:var(--radius-tile);
    background:var(--chip-bg-light);border:2px solid var(--chip-bg);
    color:var(--ink);font-family:var(--font-body);font-size:0.78rem;
    cursor:pointer;line-height:1.25;text-align:center;
  }
  .tile-chip i{font-size:22px;color:var(--chip-bg);}
  .tile-chip.selected{background:var(--chip-bg);color:var(--near-black);}
  .tile-chip.selected i{color:var(--near-black);}
  /* Icon-left pill — a chip with a small leading icon */
  .icon-pill-chip{
    display:inline-flex;align-items:center;gap:9px;
    padding:10px 18px 10px 14px;border-radius:999px;
    border:1.5px solid var(--chip-bg);background:var(--chip-bg-light);
    color:var(--ink);font-family:var(--font-body);font-size:0.88rem;font-weight:600;
    cursor:pointer;
  }
  .icon-pill-chip.selected{background:var(--chip-bg);border-color:var(--chip-bg);color:var(--near-black);}
  /* Age isn't a pickable option, so it can't literally become one of
     the picker button styles — but its shell adopts the same accent
     color and corner treatment as whatever style is active, so it
     doesn't read as a leftover plain form field on an otherwise
     consistently-styled page. Pill radius when a pill-family layout is
     active, the site's normal button radius otherwise. */
  .age-picker-shell{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px;
    padding:12px 18px;border:1.5px solid var(--chip-bg);background:var(--chip-bg-light);
    border-radius:var(--age-shell-radius, var(--radius-btn));
  }
  .age-picker-shell:last-child{ margin-bottom:0; }
  /* INVOICES & PAYMENTS (2026-10-24): summary cards, one activity timeline,
     a page per student or family, and the invoice and new-invoice cards.
     Every color is a Site Appearance variable except the three money
     states: green for payments, red (var(--alert)) for refunds and overdue,
     and the soft gold for partial payments. */
  .inv-panel, .inv-overlay, #invoiceDetailModal{
    --inv-green:#2E9E5B; --inv-green-bg:#EAF7EF;
    --inv-gold:#8A5A0E; --inv-gold-bg:#FBF0DC;
    --inv-red-bg:#FBECE9; --inv-red-bg:color-mix(in srgb, var(--alert) 10%, var(--paper-card));
    --inv-tint:rgba(19,34,57,0.06); --inv-tint:color-mix(in srgb, var(--ink) 6%, var(--paper-card));
    --inv-hover:rgba(42,92,196,0.05); --inv-hover:color-mix(in srgb, var(--brass) 6%, transparent);
  }
  .inv-panel{ display:flex; flex-direction:column; gap:16px; }
  /* Wide windows (owner, 2026-10-26): every view of the Invoices section
     keeps to about 760px beside the sidebar, so each amount stays close to
     its line. Narrower windows and phones are unchanged. */
  .teacher-tab-panel[data-tab="payments"] > *{ max-width:760px; }
  .inv-toprow{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .inv-title{ font-family:var(--font-display); color:var(--heading-color); font-size:1.45rem; font-weight:600; margin:0; }
  .inv-num{ font-variant-numeric:tabular-nums; }
  .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  button.inv-sec, a.inv-sec{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--paper-card); color:var(--brass); border:1px solid var(--brass);
    border-radius:var(--radius-btn); padding:9px 18px; font-family:var(--font-body); font-weight:600; font-size:0.9rem;
    cursor:pointer; text-decoration:none; line-height:1.2;
  }
  button.inv-sec:hover, a.inv-sec:hover{ background:var(--inv-hover); color:var(--brass); }
  button.inv-sec.is-danger{ color:var(--alert); border-color:var(--alert); }
  .inv-cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
  .inv-sum{
    background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card);
    box-shadow:var(--shadow-resting); padding:18px 20px; text-align:left;
    display:flex; flex-direction:column; gap:2px; font:inherit; color:var(--ink); min-width:0;
  }
  button.inv-sum{ cursor:pointer; }
  button.inv-sum:hover{ border-color:var(--brass); }
  .inv-sum-label{ font-size:0.82rem; color:var(--ink-soft); font-weight:500; }
  .inv-sum-big{ font-family:var(--font-display); font-size:2.1rem; font-weight:600; letter-spacing:-0.02em; line-height:1.2; font-variant-numeric:tabular-nums; }
  .inv-sum-sub{ font-size:0.82rem; color:var(--ink-soft); }
  .inv-sum.is-over .inv-sum-big{ color:var(--alert); }
  .inv-controls{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  @media (min-width: 641px){
    .inv-controls{ flex-wrap:nowrap; }
    .inv-controls > :not(.inv-search){ flex-shrink:0; }
    .inv-controls .inv-search{ min-width:140px; }
  }
  .inv-search{ flex:1 1 240px; position:relative; min-width:0; }
  .inv-search input{ width:100%; padding:10px 12px 10px 36px; border:1px solid var(--line); border-radius:6px; background:var(--paper-card); color:var(--ink); font-size:0.9rem; }
  .inv-search input:focus{ outline:none; border-color:var(--brass); }
  .inv-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--ink-soft); pointer-events:none; }
  .inv-switch{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:0.9rem; cursor:pointer; user-select:none; white-space:nowrap; color:var(--ink); position:relative; }
  .inv-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
  .inv-track{ width:40px; height:24px; border-radius:12px; background:var(--inv-tint); border:1px solid var(--line); position:relative; transition:background .15s; flex-shrink:0; }
  .inv-track::after{ content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--paper-card); box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:transform .15s; }
  .inv-switch input:checked + .inv-track{ background:var(--brass); border-color:var(--brass); }
  .inv-switch input:checked + .inv-track::after{ transform:translateX(16px); }
  .inv-switch input:focus-visible + .inv-track{ outline:2px solid var(--brass); outline-offset:2px; }
  .inv-filter{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-chip); padding:5px 6px 5px 14px; font-size:0.86rem; width:fit-content; max-width:100%; }
  .inv-filter button{ border:1px solid var(--brass); color:var(--brass); background:var(--paper-card); border-radius:var(--radius-chip); padding:3px 12px; font-size:0.8rem; font-weight:600; cursor:pointer; }
  .inv-back{ background:none; border:none; padding:0; color:var(--brass); font-weight:600; font-size:0.9rem; cursor:pointer; width:fit-content; }
  .inv-feed{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-resting); overflow:hidden; }
  .inv-month{ display:flex; justify-content:space-between; gap:12px; padding:14px 20px 8px; font-size:0.8rem; font-weight:700; color:var(--ink-soft); letter-spacing:0.02em; border-bottom:1px solid var(--line); }
  .inv-month span:last-child{ font-weight:500; }
  .inv-row{ display:grid; grid-template-columns:40px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:13px 20px; border-bottom:1px solid var(--line); cursor:pointer; }
  @media (hover: hover) and (pointer: fine){ .inv-row:hover{ background:var(--inv-hover); } }
  .inv-row:focus-visible{ outline:2px solid var(--brass); outline-offset:-2px; }
  .inv-ic{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--inv-tint); color:var(--ink-soft); }
  .inv-ic.is-paid{ background:var(--inv-green-bg); color:var(--inv-green); }
  .inv-ic.is-partial{ background:var(--inv-gold-bg); color:var(--inv-gold); }
  .inv-ic.is-refund, .inv-ic.is-dispute{ background:var(--inv-red-bg); color:var(--alert); }
  .inv-t{ font-weight:600; font-size:0.95rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inv-who{ font:inherit; font-weight:700; color:var(--ink); background:none; border:none; padding:0; cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px; }
  .inv-who:hover{ text-decoration-color:currentColor; }
  .inv-act{ color:var(--ink-soft); font-weight:500; }
  .inv-d{ font-size:0.82rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inv-late{ color:var(--alert); font-weight:600; }
  .inv-amt{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--ink); }
  .inv-amt.is-plus{ color:var(--inv-green); }
  .inv-amt.is-minus{ color:var(--alert); }
  .inv-amt.is-soft{ color:var(--ink-soft); }
  .inv-amt.is-strike{ color:var(--ink-soft); text-decoration:line-through; }
  .inv-more, .inv-empty{ padding:16px 20px; text-align:center; color:var(--ink-soft); font-size:0.86rem; }
  .inv-empty{ padding:36px 20px; }
  .inv-famrow{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:18px; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); cursor:pointer; }
  .inv-famrow:hover{ background:var(--inv-hover); }
  .inv-famrow:focus-visible{ outline:2px solid var(--brass); outline-offset:-2px; }
  .inv-famrow:last-child, .inv-row:last-child{ border-bottom:0; }
  .inv-fam-name{ font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inv-fam-sub{ font-size:0.82rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .inv-fam-stat{ text-align:right; white-space:nowrap; }
  .inv-fam-stat span{ display:block; font-size:0.74rem; color:var(--ink-soft); }
  .inv-fam-stat strong{ font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .inv-fam-stat strong.is-owed{ color:var(--alert); }
  .inv-famcard{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-resting); padding:22px 24px; display:flex; flex-direction:column; gap:16px; }
  .inv-famcard h3{ font-family:var(--font-display); color:var(--heading-color); font-weight:600; font-size:1.3rem; margin:0; }
  .inv-famcard-sub{ font-size:0.86rem; color:var(--ink-soft); margin-top:2px; overflow-wrap:anywhere; }
  .inv-famstats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .inv-famstats div span{ display:block; font-size:0.8rem; color:var(--ink-soft); }
  .inv-famstats div strong{ font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .inv-famstats div strong.is-owed{ color:var(--alert); }
  /* Family invoices (2026-10-24): a child filter on the family page, each
     child's share of "Paid this year", and lines grouped by child. */
  .inv-members{ display:flex; flex-wrap:wrap; gap:6px; }
  .cm-box{ margin:0 0 10px; display:flex; flex-direction:column; gap:8px; }
  .cm-modes{ display:flex; gap:8px; flex-wrap:wrap; }
  .cm-mode{ flex:1; min-width:150px; display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:8px; padding:9px 11px; cursor:pointer; font-size:0.88rem; }
  .cm-existing{ display:flex; flex-direction:column; gap:6px; }
  .cm-list{ max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; }
  .cm-item{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; background:var(--paper-card); border:none; border-bottom:1px solid var(--line); padding:9px 12px; cursor:pointer; font:inherit; font-size:0.9rem; color:var(--ink); }
  .cm-item:last-child{ border-bottom:none; }
  .cm-item:hover, .cm-item:focus{ background:var(--inv-tint, rgba(42,92,196,0.06)); }
  .cm-mail{ font-size:0.78rem; color:var(--ink-soft); }
  .cm-picked{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; background:var(--inv-tint, rgba(42,92,196,0.06)); border-radius:8px; padding:10px 12px; font-size:0.9rem; }
  .cm-sibling{ background:#FFF7E6; border:1px solid #F3D9A4; border-radius:8px; padding:10px 12px; font-size:0.88rem; }
  .cm-sib-row{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; }
  .cm-sib-row + .cm-sib-row{ margin-top:8px; }
  .cm-sib-acts{ display:flex; gap:6px; }
  .cm-sib-acts button{ padding:6px 14px; font-size:0.84rem; margin:0; width:auto; }
  .cm-offer button{ width:100%; }
  input.cm-locked{ background:var(--inv-tint, rgba(42,92,196,0.06)); color:var(--ink-soft); }
  label.cm-off{ opacity:0.45; cursor:not-allowed; }
  .inv-sort{ display:flex; align-items:center; gap:6px; font-size:0.86rem; font-weight:600; color:var(--ink); white-space:nowrap; }
  .inv-sort select{ width:auto; padding:6px 10px; font-size:0.86rem; }
  .inv-rename{ font-size:0.8rem; font-weight:600; margin-left:8px; vertical-align:middle; }
  .inv-rename-row{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:6px; }
  .inv-rename-row input{ width:12em; max-width:100%; font-size:1rem; padding:6px 10px; }
  .inv-rename-row .inv-rename-suffix{ font-weight:600; }
  .inv-rename-row button{ padding:6px 14px; font-size:0.85rem; }
  .inv-member{ border:1px solid var(--line); background:var(--paper-card); color:var(--ink); border-radius:999px; padding:6px 14px; font:inherit; font-size:0.86rem; font-weight:600; cursor:pointer; }
  .inv-member.is-on{ background:var(--brass); border-color:var(--brass); color:var(--button-text, #fff); }
  .inv-split{ display:block; font-style:normal; font-size:0.78rem; color:var(--ink-soft); margin-top:2px; }
  .inv-member-note{ margin:0; font-size:0.82rem; color:var(--ink-soft); }
  .inv-card-lines div.inv-card-kid{ font-weight:600; color:var(--ink); margin-top:4px; }
  .inv-card-lines div.inv-card-kid:first-child{ margin-top:0; }
  .inv-card-lines div.inv-card-kidline{ padding-left:14px; color:var(--ink-soft); }
  .inv-lrow.is-fam{ grid-template-columns:minmax(0, 1fr) 96px 30px; padding-bottom:10px; border-bottom:1px dashed var(--line); }
  .inv-lrow.is-fam select{ grid-column:1 / -1; min-width:0; }
  .inv-lrow.is-fam select.is-unset{ color:var(--ink-soft); }
  .inv-lrow.is-fam select.is-missing{ border-color:var(--alert); box-shadow:0 0 0 2px rgba(178,63,46,0.15); }
  .picker-search{ width:100%; margin:0 0 8px; padding:10px 12px 10px 36px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:0.92rem; color:var(--ink); background:var(--paper-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5872' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 12px center; -webkit-appearance:none; appearance:none; }
  .picker-search:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(42,92,196,0.15); }
  /* REPORTS (2026-10-24): the redesign's cards, tables and chips; no charts. */
  .rpt-ranges{ margin:4px 0 16px; align-items:center; }
  .rpt-custom{ display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; color:var(--ink-soft); }
  .rpt-custom input{ width:auto; padding:6px 8px; font-size:0.85rem; }
  .rpt-card{ background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow-resting); padding:20px 22px; margin-bottom:16px; }
  .rpt-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
  .rpt-head h4{ margin:0; font-family:var(--font-display); font-size:1.08rem; color:var(--heading-color); }
  .rpt-sub{ margin:2px 0 0; color:var(--ink-soft); font-size:0.85rem; }
  .rpt-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; margin-bottom:16px; }
  .rpt-stat{ background:var(--inv-tint, rgba(42,92,196,0.06)); border-radius:14px; padding:12px 14px; }
  .rpt-stat span{ display:block; font-size:0.78rem; color:var(--ink-soft); }
  .rpt-stat strong{ font-family:var(--font-display); font-size:1.2rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .rpt-minus{ color:var(--alert) !important; }
  .rpt-net{ font-weight:700; }
  .rpt-over{ color:var(--alert); font-weight:600; }
  .rpt-grid{ display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:22px; }
  .rpt-scroll{ overflow-x:auto; }
  .rpt-table{ width:100%; border-collapse:collapse; font-size:0.9rem; font-variant-numeric:tabular-nums; }
  .rpt-table th{ text-align:left; font-weight:600; color:var(--ink-soft); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; padding:8px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .rpt-table td{ padding:9px 8px; border-bottom:1px solid var(--line); }
  .rpt-table .num{ text-align:right; white-space:nowrap; }
  .rpt-table tr.rpt-total td{ font-weight:700; border-bottom:none; border-top:2px solid var(--ink); }
  .rpt-table .act button{ padding:5px 12px; font-size:0.8rem; }
  .rpt-mini{ margin:0 0 4px; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); font-weight:600; }
  .rpt-note{ margin:10px 0 0; font-size:0.82rem; color:var(--ink-soft); line-height:1.5; }
  .rpt-form{ display:flex; gap:10px; flex-wrap:wrap; }
  .rpt-field{ display:flex; flex-direction:column; gap:4px; font-size:0.85rem; font-weight:600; flex:1; min-width:170px; }
  .rpt-field select, .rpt-field input{ font-weight:400; }
  .rpt-check{ display:flex; align-items:center; gap:8px; font-size:0.9rem; margin:12px 0; cursor:pointer; }
  .stmt-bar{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
  .stmt-status{ display:flex; justify-content:flex-end; }
  #rptStmtStatus{ justify-content:flex-start; }
  .stmt-status:empty{ display:none; }
  .stmt-status > *{ margin:0 0 12px; }
  #rptStmtStatus > *{ margin:10px 0 0; }
  .stmt-last{ font-size:0.82rem; color:var(--ink-soft); }
  .stmt-msg{ font-size:0.88rem; color:var(--ink-soft); line-height:1.45; }
  .stmt-msg.is-ok{ color:#1F7A4D; font-weight:600; }
  .stmt-msg.is-bad{ color:var(--alert); font-weight:600; }
  .stmt-confirm{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:0.9rem; }
  .stmt-confirm span{ overflow-wrap:anywhere; }
  .stmt-status .stmt-confirm button.primary, .stmt-status .stmt-confirm button.inv-sec{ padding:7px 18px; font-size:0.85rem; width:auto; min-width:0; flex:0 0 auto; margin:0; }
  .stmt-acts button.is-sent:disabled{ opacity:1; background:var(--inv-green); border-color:var(--inv-green); color:#fff; }
  .inv-ic.is-statement{ background:var(--inv-tint); color:var(--brass); }
  .stmt-paper{ background:#fff; color:#132239; max-width:780px; margin:0 auto; border:1px solid var(--line); border-radius:16px; padding:36px 40px; box-shadow:var(--shadow-resting); }
  .stmt-head{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; border-bottom:2px solid #132239; padding-bottom:14px; margin-bottom:16px; }
  .stmt-kicker{ margin:0; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; color:#4A5872; }
  .stmt-studio{ margin:2px 0 0; font-family:var(--font-display); font-size:1.3rem; font-weight:700; }
  .stmt-subtle{ margin:2px 0 0; color:#4A5872; font-size:0.85rem; }
  .stmt-contact{ font-size:0.85rem; color:#4A5872; line-height:1.5; text-align:right; }
  .stmt-meta{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-bottom:18px; font-size:0.9rem; }
  .stmt-meta b{ display:block; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:#4A5872; font-weight:600; margin-bottom:2px; }
  .stmt-table{ width:100%; border-collapse:collapse; font-size:0.88rem; font-variant-numeric:tabular-nums; }
  .stmt-table th{ text-align:left; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:#4A5872; padding:7px 6px; border-bottom:1px solid rgba(19,34,57,0.15); }
  .stmt-table td{ padding:8px 6px; border-bottom:1px solid rgba(19,34,57,0.1); vertical-align:top; }
  .stmt-table td:first-child{ white-space:nowrap; }
  .stmt-table .num{ text-align:right; white-space:nowrap; }
  .stmt-desc small{ display:block; color:#4A5872; font-size:0.78rem; }
  .stmt-kid{ font-weight:600; }
  .stmt-table .mob{ display:none; }
  .stmt-sum{ margin:16px 0 0 auto; width:300px; max-width:100%; font-size:0.92rem; }
  .stmt-sum div{ display:flex; justify-content:space-between; padding:4px 0; }
  .stmt-sum .due{ border-top:2px solid #132239; font-weight:700; font-size:1.05rem; padding-top:8px; margin-top:4px; }
  .stmt-paid{ margin:8px 0 0; text-align:right; color:#1F7A4D; font-weight:700; }
  .stmt-foot{ margin-top:24px; padding-top:10px; border-top:1px solid rgba(19,34,57,0.12); font-size:0.8rem; color:#4A5872; }
  @media (max-width: 640px){
    .rpt-card{ padding:16px; }
    .rpt-grid{ grid-template-columns:1fr; }
    .rpt-stack thead{ display:none; }
    .rpt-stack tr{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--line); }
    .rpt-stack td{ border:none; padding:0; }
    .rpt-stack td.who{ font-weight:600; }
    .rpt-stack td.amt{ grid-column:2; grid-row:1; font-weight:700; }
    .rpt-stack td.meta{ grid-column:1; color:var(--ink-soft); font-size:0.82rem; }
    .rpt-stack td.act{ grid-column:2; grid-row:2 / span 3; align-self:center; }
    .rpt-stack tr.rpt-total{ display:flex; justify-content:space-between; border-top:2px solid var(--ink); border-bottom:none; }
    .rpt-stack tr.rpt-total td:empty{ display:none; }
    .stmt-paper{ padding:20px 16px; border-radius:12px; }
    .stmt-bar{ flex-direction:column; align-items:stretch; }
    .inv-acts.stmt-acts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; }
    .inv-acts.stmt-acts > *{ width:100%; min-width:0; margin:0; padding:11px 10px; font-size:0.95rem; line-height:1.2; justify-content:center; text-align:center; }
    .stmt-status{ justify-content:flex-start; }
    .stmt-confirm span{ flex:1 0 100%; }
    .stmt-head{ flex-direction:column; }
    .stmt-contact{ text-align:left; }
    .stmt-meta{ grid-template-columns:1fr; }
    .stmt-table{ font-size:0.8rem; }
    .stmt-table .desk{ display:none; }
    .stmt-table .mob{ display:table-cell; }
    .stmt-sum{ width:100%; }
  }
  @media print{
    .teacher-tab-panel[data-tab="payments"] > *{ max-width:none; }
    body.printing-one *{ visibility:hidden !important; }
    body.printing-one .print-target, body.printing-one .print-target *{ visibility:visible !important; }
    body.printing-one .print-target{ position:absolute; left:0; top:0; width:100%; margin:0; box-shadow:none !important; border:none !important; }
    body.printing-one .print-target .no-print, body.printing-one .print-target .no-print *{ display:none !important; }
    .stmt-table .desk{ display:table-cell !important; } .stmt-table .mob{ display:none !important; }
  }
  .payout-note{ background:var(--inv-tint, rgba(42,92,196,0.06)); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
  .payout-note.is-block{ background:var(--inv-red-bg); border-color:var(--alert); }
  .payout-note-title{ margin:0 0 4px; font-weight:600; }
  .payout-note-acts{ display:flex; gap:8px; flex-wrap:wrap; }
  .payout-note-acts button{ padding:7px 14px; font-size:0.85rem; }
  .inv-card-note{ margin:0; font-size:0.84rem; color:var(--ink-soft); }
  body.support-view #bigToolPayoutsNoticeBtn, body.support-view #bigToolAddMethodsBtn, body.support-view .invSetupPayoutsLink{ display:none !important; }
  .inv-period{ grid-column:1 / -1; margin:-2px 0 4px; font-size:0.82rem; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
  .inv-period .link-btn{ font-size:0.8rem; color:var(--ink-soft); }
  .inv-period.is-on{ background:var(--inv-tint, rgba(42,92,196,0.06)); border-radius:10px; padding:6px 10px; }
  .inv-period-lbl{ font-weight:600; color:var(--ink-soft); }
  .inv-period select, .inv-period input{ width:auto; padding:4px 8px; font-size:0.84rem; min-width:0; }
  .inv-kidtotals{ margin:-4px 0 0; font-size:0.84rem; color:var(--ink-soft); text-align:right; }
  /* Support view (2026-10-24): only the Invoices tab, no creating. */
  #supportBanner{ display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:#FFF7E6; border:1px solid #F3D9A4; border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:0.9rem; color:var(--ink); }
  body:not(.support-view) #supportBanner{ display:none; }
  body.support-view .teacher-tab-btn:not([data-tab="payments"]),
  body.support-view #bigToolConnectStatusCard, body.support-view #payoutActiveLine,
  body.support-view #showBigToolCreateFormBtn, body.support-view #invFamNewBtn, body.support-view #recPayNoInvBtn,
  body.support-view #teacherProfileCompletenessBanner, body.support-view #teacherHeaderAccountBtn,
  body.support-view .header-account, body.support-view #invoicingAllowanceBar{ display:none !important; }
  .inv-acts{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .inv-acts > *{ white-space:nowrap; flex:0 0 auto; }
  .inv-tag{ display:inline-block; padding:4px 10px; border-radius:var(--radius-chip); font-size:0.75rem; font-weight:700; letter-spacing:0.02em; white-space:nowrap; }
  .inv-tag.is-open{ background:var(--inv-red-bg); color:var(--alert); }
  .inv-tag.is-partially_paid{ background:var(--inv-gold-bg); color:var(--inv-gold); }
  .inv-tag.is-paid{ background:var(--inv-green-bg); color:var(--inv-green); }
  .inv-tag.is-cancelled{ background:var(--inv-tint); color:var(--ink-soft); }
  .inv-tag.is-waiting_for_fee, .inv-chip-wait{ background:var(--inv-tint); color:var(--ink-soft); }
  .inv-chip-wait{ display:inline-block; padding:1px 8px; border-radius:var(--radius-chip); font-size:0.74rem; font-weight:600; margin-right:2px; }
  .inv-row .inv-pay-fee-row{ margin-top:8px; padding:6px 14px; font-size:0.82rem; width:auto; }
  .inv-ic.is-waiting{ background:var(--inv-tint); color:var(--ink-soft); }
  .inv-fee-banner{ display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; border-radius:var(--radius-card); padding:12px 16px; margin:0 0 14px; border:1px solid var(--line); background:var(--paper-card); }
  .inv-fee-banner[hidden]{ display:none; }
  .inv-fee-banner p{ margin:0; font-size:0.95rem; line-height:1.45; color:var(--ink); }
  .inv-fee-banner.is-ok{ background:#EAF7EF; border-color:#BFE3CC; }
  .inv-fee-banner.is-ok p{ color:#1F7A4D; font-weight:600; }
  .inv-fee-banner .primary{ width:auto; margin:0; padding:9px 18px; }
  .fee-acts{ display:flex; gap:10px; flex-wrap:wrap; }
  .bill-table td, .bill-table th{ vertical-align:middle; }
  .bill-table td:first-child{ white-space:nowrap; }
  .receipt-paper{ max-width:560px; }
  .receipt-what{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; margin:0 0 12px; }
  .receipt-rows{ width:100%; border-collapse:collapse; font-size:0.95rem; }
  .receipt-rows th{ text-align:left; font-weight:600; color:#4A5872; padding:8px 12px 8px 0; width:34%; vertical-align:top; border-bottom:1px solid rgba(19,34,57,0.1); }
  .receipt-rows td{ padding:8px 0; border-bottom:1px solid rgba(19,34,57,0.1); }
  @media (max-width: 640px){
    .fee-acts{ flex-direction:column; }
    .fee-acts > button{ width:100%; margin:0; }
    .inv-fee-banner .primary{ width:100%; }
  }
  .inv-card{ display:flex; flex-direction:column; gap:16px; }
  .inv-card-who{ display:flex; flex-direction:column; gap:2px; padding-right:36px; }
  .inv-card-name{ font-family:var(--font-display); color:var(--heading-color); font-weight:600; font-size:1.2rem; background:none; border:none; padding:0; text-align:left; cursor:pointer; }
  .inv-card-name:hover{ color:var(--brass); }
  .inv-card-sub{ font-size:0.84rem; color:var(--ink-soft); overflow-wrap:anywhere; }
  .inv-card-amtline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .inv-card-amt{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; letter-spacing:-0.02em; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
  .inv-card-meta{ font-size:0.84rem; color:var(--ink-soft); margin-top:4px; }
  .inv-card-lines{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; display:flex; flex-direction:column; gap:6px; font-size:0.9rem; }
  .inv-card-lines div{ display:flex; justify-content:space-between; gap:12px; }
  .inv-card-label{ font-size:0.78rem; font-weight:700; color:var(--ink-soft); margin-bottom:4px; }
  .inv-hist{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:0.8rem; }
  .inv-step{ background:var(--inv-tint); color:var(--ink); border-radius:var(--radius-chip); padding:4px 10px; font-weight:600; }
  .inv-step.is-paid{ background:var(--inv-green-bg); color:var(--inv-green); }
  .inv-step.is-partial{ background:var(--inv-gold-bg); color:var(--inv-gold); }
  .inv-step.is-refund, .inv-step.is-dispute{ background:var(--inv-red-bg); color:var(--alert); }
  .inv-arrow{ color:var(--ink-soft); }
  .inv-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(19,34,57,0.38); overflow-y:auto; padding:48px 16px; }
  .inv-overlay.inv-ask{ z-index:1100; }
  .inv-sheet{ position:relative; background:var(--paper-card); border-radius:var(--radius-card); box-shadow:var(--shadow-modal); max-width:480px; margin:0 auto; padding:24px; display:flex; flex-direction:column; gap:14px; }
  .inv-sheet-title{ font-family:var(--font-display); color:var(--heading-color); font-weight:600; font-size:1.15rem; margin:0; padding-right:36px; }
  .payout-line{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:-4px 0 14px; font-size:0.86rem; color:var(--ink-soft); }
  .payout-ok{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:#1F7A4D; }
  .payout-line .link-btn{ font-size:0.86rem; }
  .payout-dot{ color:var(--ink-soft); margin:0 6px; }
  .payout-nowrap{ white-space:nowrap; }
  .inv-sheet-sm{ max-width:420px; }
  .inv-x{ position:absolute; right:14px; top:14px; width:32px; height:32px; border-radius:50%; border:none; background:var(--inv-tint); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
  .inv-picker{ display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:6px; padding:8px 12px; background:var(--paper); }
  .inv-av{ width:36px; height:36px; border-radius:50%; background:var(--brass); color:var(--button-text); display:grid; place-items:center; font-weight:700; font-size:0.8rem; flex-shrink:0; }
  .inv-picker select{ flex:1; min-width:0; border:none; background:none; font-weight:600; font-size:0.95rem; color:var(--ink); padding:6px 0; }
  .inv-sendsto{ font-size:0.84rem; color:var(--ink-soft); overflow-wrap:anywhere; }
  .inv-amountin{ display:flex; align-items:baseline; justify-content:center; gap:2px; padding:8px 0 2px; }
  .inv-amountin span{ font-family:var(--font-display); font-size:2.4rem; font-weight:600; color:var(--ink-soft); }
  .inv-amountin input{ font-family:var(--font-display); font-size:3.2rem; font-weight:600; letter-spacing:-0.02em; color:var(--ink); border:none; background:none; width:5.2ch; padding:0; -moz-appearance:textfield; appearance:textfield; }
  .inv-amountin input::-webkit-inner-spin-button, .inv-amountin input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  .inv-amountin input:focus{ outline:none; box-shadow:0 2px 0 var(--brass); }
  .inv-amountin input::placeholder{ color:var(--line); }
  input.inv-note{ border:none; border-bottom:1px solid var(--line); border-radius:0; background:none; padding:8px 2px; width:100%; text-align:center; color:var(--ink); }
  input.inv-note:focus{ outline:none; border-bottom-color:var(--brass); }
  .inv-lrow{ display:grid; grid-template-columns:minmax(0, 1fr) 96px 30px; gap:8px; align-items:center; margin-bottom:8px; }
  .inv-lrow input{ width:100%; min-width:0; }
  .inv-lrow button{ border:none; background:none; color:var(--ink-soft); font-size:1.3rem; cursor:pointer; padding:0; }
  .inv-chips{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
  .inv-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--brass); color:var(--brass); background:var(--paper-card); border-radius:var(--radius-chip); padding:6px 12px; font-size:0.84rem; font-weight:600; cursor:pointer; }
  .inv-chip input[type=date]{ border:none; background:none; padding:0; font-size:0.84rem; font-weight:600; color:var(--brass); width:auto; }
  .inv-totalbig{ font-family:var(--font-display); font-size:2.4rem; font-weight:600; text-align:center; margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
  .inv-fine{ font-size:0.78rem; color:var(--ink-soft); text-align:center; margin:0; }
  @media (max-width: 640px){
    .inv-cards{ grid-template-columns:1fr 1fr; gap:10px; }
    .inv-cards .inv-sum:first-child{ grid-column:1 / -1; }
    .inv-sum{ padding:14px 16px; }
    .inv-sum-big{ font-size:1.6rem; }
    .inv-cards .inv-sum:first-child .inv-sum-big{ font-size:2.1rem; }
    .inv-row{ grid-template-columns:36px minmax(0, 1fr) auto; gap:12px; padding:12px 14px; }
    .inv-ic{ width:36px; height:36px; }
    .inv-month{ padding:12px 14px 6px; }
    .inv-t{ font-size:0.9rem; }
    .inv-amt{ font-size:1.02rem; }
    .inv-famrow{ grid-template-columns:minmax(0, 1fr) auto; padding:12px 14px; gap:6px 12px; }
    .inv-famrow .inv-fam-stat.is-year{ display:none; }
    .inv-famcard{ padding:18px; }
    .inv-famstats div strong{ font-size:1.15rem; }
    .inv-overlay{ padding:40px 0 0; }
    .inv-sheet{ border-radius:var(--radius-card) var(--radius-card) 0 0; min-height:calc(100% - 40px); padding:20px 18px 28px; }
    .inv-overlay-sm{ display:flex; align-items:flex-end; padding:0; }
    .inv-overlay-sm .inv-sheet-sm{ min-height:0; width:100%; max-width:none; }
    #invoiceDetailModal{ align-items:flex-end !important; padding:0 !important; }
    #invoiceDetailModal > div{ border-radius:var(--radius-card) var(--radius-card) 0 0 !important; padding:22px 18px 28px !important; max-height:92vh !important; }
  }
  .inv-pick{ display:flex; flex-direction:column; gap:8px; }
  .inv-pick label{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; font-size:0.9rem; color:var(--ink); }
  .inv-pick label:has(input:checked){ border-color:var(--brass); background:var(--inv-hover); }
  .inv-pick label span:nth-of-type(1){ flex:1; min-width:0; }
  .inv-pick label small{ display:block; color:var(--ink-soft); font-size:0.8rem; }
  .inv-pick label strong{ font-family:var(--font-display); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .inv-recfields{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .inv-recfields .field{ margin:0; }
  #recPayBody select{ width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper-card); color:var(--ink); font-size:0.95rem; }
  .inv-check{ display:flex; align-items:center; gap:8px; font-size:0.9rem; font-weight:600; color:var(--ink); cursor:pointer; }
  .inv-none{ background:var(--inv-tint); border-radius:12px; padding:14px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; font-size:0.9rem; color:var(--ink-soft); }
  @media (max-width: 640px){
    .inv-recfields{ grid-template-columns:1fr; }
    /* Record payment and New invoice share one row on a phone too. */
    .inv-toprow > .inv-acts{ width:100%; flex-wrap:nowrap; }
    .inv-toprow > .inv-acts > button.primary{ flex:1 1 auto; width:auto; }
    .inv-toprow > .inv-acts > button.inv-sec{ align-self:stretch; }
  }
  /* The narrowest phones (320–380 px): the two buttons split the row
     instead of pushing the page sideways. */
  @media (max-width: 380px){
    .inv-toprow > .inv-acts{ gap:6px; }
    .inv-toprow > .inv-acts > *{ flex:1 1 auto; min-width:0; padding-left:10px; padding-right:10px; font-size:0.88rem; }
  }
  @media (prefers-reduced-motion: reduce){ .inv-track, .inv-track::after{ transition:none; } }
  /* PAYOUT CARD (2026-10-24): the next step is the big blue button, and the
     Stripe button says it is opening Stripe instead of greying out. */
  .payout-acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .payout-acts button.primary{ margin-top:0; }
  .payout-acts button.inv-sec{ padding:11px 18px; }
  button.is-opening, button.is-opening:disabled{ opacity:1; cursor:progress; filter:none; }
  .btn-spin{ display:inline-block; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; margin-right:8px; animation:btnSpin .7s linear infinite; }
  @keyframes btnSpin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .btn-spin{ animation-duration:2s; } }
  .viewStudentInvoicesBtn{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--paper-card); border:1px solid var(--brass); border-radius:999px;
    padding:6px 12px; font-family:var(--font-body); font-weight:600; font-size:0.8rem; color:var(--brass);
    cursor:pointer;
  }
  .viewStudentInvoicesBtn:hover{ background:color-mix(in srgb, var(--brass) 6%, var(--paper-card)); }
  .viewStudentInvoicesBtn svg{ flex-shrink:0; }
  #studentAgesList input[type=number]{
    width:80px;border:1.5px solid var(--chip-bg);border-radius:8px;
    background:var(--paper-card);
  }
  #studentAgesList input[type=number]:focus{ outline:2px solid var(--chip-bg); outline-offset:1px; }
  /* Icon-in-circle badge — circular icon badge, label beside it */
  .icon-badge-chip{
    display:inline-flex;align-items:center;gap:14px;
    padding:14px 18px;border-radius:14px;
    border:1.5px solid var(--line);background:var(--paper-card);
    cursor:pointer; width:100%; text-align:left;
  }
  .icon-badge-chip.selected{border-color:var(--chip-bg);border-width:2px;}
  .icon-badge-chip-icon{
    width:44px;height:44px;border-radius:50%;flex-shrink:0;
    background:var(--chip-bg-light);display:flex;align-items:center;justify-content:center;
  }
  .icon-badge-chip.selected .icon-badge-chip-icon{background:var(--chip-bg);}
  .icon-badge-chip-label{font-family:var(--font-body);font-size:0.9rem;font-weight:600;color:var(--ink);}
  /* List row with trailing selection indicator */
  .list-row-chip-wrap{ border-top:1px solid var(--line); }
  .list-row-chip{
    display:flex;align-items:center;gap:14px;width:100%;
    padding:14px 4px;border:none;border-bottom:1px solid var(--line);
    background:none;cursor:pointer;text-align:left;
    font-family:var(--font-body);font-size:0.92rem;font-weight:500;color:var(--ink);
  }
  .list-row-chip-icon{
    width:32px;height:32px;border-radius:9px;flex-shrink:0;
    background:var(--chip-bg-light);display:flex;align-items:center;justify-content:center;
  }
  .list-row-chip.selected .list-row-chip-icon{background:var(--chip-bg);}
  .list-row-chip-label{flex:1;}
  .list-row-chip-indicator{
    width:21px;height:21px;border-radius:50%;flex-shrink:0;
    border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
  }
  .list-row-chip-indicator svg{width:11px;height:11px;color:#fff;opacity:0;}
  .list-row-chip.selected .list-row-chip-indicator{background:var(--chip-bg);border-color:var(--chip-bg);}
  .list-row-chip.selected .list-row-chip-indicator svg{opacity:1;}
  /* Badge / medallion — ringed circular icon, double ring when selected */
  .badge-medallion-chip{
    display:flex;flex-direction:column;align-items:center;gap:9px;
    padding:14px 6px;border:none;background:none;cursor:pointer;
    font-family:var(--font-body);font-size:0.8rem;font-weight:600;color:var(--ink);
    text-align:center;
  }
  .badge-medallion-chip-ring{
    width:56px;height:56px;border-radius:50%;
    border:2px solid var(--line);display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .badge-medallion-chip-ring::before{
    content:'';position:absolute;inset:-6px;border-radius:50%;
    border:1px solid var(--line);opacity:0;
  }
  .badge-medallion-chip.selected .badge-medallion-chip-ring{border-color:var(--chip-bg);background:var(--chip-bg);}
  .badge-medallion-chip.selected .badge-medallion-chip-ring::before{opacity:1;border-color:var(--chip-bg);}
  /* Split duotone card — one card, solid icon panel + plain label panel */
  .split-card-chip{
    display:flex;align-items:stretch;border-radius:12px;overflow:hidden;
    border:1.5px solid var(--line);background:var(--paper-card);
    cursor:pointer;text-align:left;padding:0;width:100%;font-family:var(--font-body);
  }
  .split-card-chip.selected{border-color:var(--chip-bg);border-width:2px;}
  .split-card-chip-icon{
    width:52px;flex-shrink:0;background:var(--chip-bg);
    display:flex;align-items:center;justify-content:center;
  }
  .split-card-chip-label{
    padding:13px 15px;font-size:0.88rem;font-weight:600;color:var(--ink);
    display:flex;align-items:center;
  }
  .teacher-tab-btn{
    background:none;border:none;border-bottom:2px solid transparent;
    padding:10px 4px;margin-bottom:-1px;font-family:var(--font-body);
    font-size:0.92rem;font-weight:600;color:var(--ink-soft);cursor:pointer;
  }
  .teacher-tab-btn + .teacher-tab-btn{ margin-left:14px; }
  .teacher-tab-btn.active{ color:var(--ink); border-bottom-color:var(--brass); }
  .wheel-field{
    text-align:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:26px 0;
    margin:26px 0;
  }
  /* Two wheel-styled fields back to back would otherwise each contribute
     their own top/bottom border, reading as a doubled divider line. */
  .wheel-field + .wheel-field{
    border-top:none;
    margin-top:0;
    padding-top:0;
  }
  /* A wheel-field sitting at the very start/end of its section would
     otherwise double up with that section's own top/bottom divider. */
  .wheel-field-section-first{ border-top:none; margin-top:0; padding-top:0; }
  .wheel-field-section-last{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
  .wheel-field label{ display:block; text-align:center; font-size:1.05rem; }
  .chip-size-fit-text{min-width:0;}
  .combobox-wrap{position:relative;}
  .combobox-wrap input{padding-right:36px;}
  .combobox-arrow{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:6px;
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  }
  .combobox-arrow:hover{ color:var(--ink); }
  .combobox-dropdown{
    position:absolute; top:100%; left:0; right:0; z-index:20;
    background:var(--paper-card); border:1px solid var(--line); border-radius:8px;
    margin-top:4px; max-height:220px; overflow-y:auto;
    box-shadow:0 8px 24px rgba(0,0,0,0.14);
  }
  .combobox-option{
    padding:9px 14px; cursor:pointer; font-size:0.86rem; color:var(--ink);
  }
  .combobox-option:hover{ background:var(--paper); }
  .font-option{
    padding:9px 14px; cursor:pointer; font-size:0.95rem; color:var(--ink);
    display:flex; align-items:center; gap:8px;
  }
  .font-option:hover{ background:var(--paper); }
  .font-option .font-check{ width:16px; flex-shrink:0; color:var(--brass); }
  /* Student-facing criteria pickers display as a vertical column instead
     of a horizontal wrapping row, with every option using one uniform
     color drawn from the active theme (handled via the classes above). */
  #screen-match .chip-row, #screen-match .radio-row{
    display:grid; grid-template-columns:1fr; gap:10px;
  }

  .radio-row{display:flex;flex-wrap:wrap;gap:8px;}

  fieldset{border:none;padding:0;margin:0;}

  button.primary{
    font-family:var(--font-body);
    font-weight:700;
    font-size:0.98rem;
    background:var(--button-bg);
    color:var(--button-text);
    border:none;
    padding:14px 26px;
    border-radius:var(--radius-btn);
    cursor:pointer;
    margin-top:8px;
  }
  button.primary:hover{filter:brightness(0.9);}
  button.primary:disabled{ opacity:0.55; cursor:not-allowed; filter:none; }
  /* A disabled button swallows clicks, which reads as a dead button. The
     signup button hands the click to its wrapper instead, which says why. */
  #studentSignupBtn:disabled{ pointer-events:none; }
  button.secondary{
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.86rem;
    background:none;
    border:1px solid var(--line);
    padding:9px 16px;
    border-radius:var(--radius-btn);
    cursor:pointer;
    color:var(--ink);
  }
  button.secondary:hover{border-color:var(--ink);}
  button.link{background:none;border:none;color:var(--ink-soft);font-size:0.8rem;cursor:pointer;padding:4px;text-decoration:underline;}

  /* results */
  .results{margin-top:36px;scroll-margin-top:56px;}
  .results .eyebrow{margin-bottom:14px;}
  .results-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--line);
  }
  .results-toolbar button{
    cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:0.92rem;
    padding:11px 20px; border-radius:var(--radius-btn);
  }
  #resultsStartOverBtn{
    background:none; border:1.5px solid var(--line); color:var(--ink);
  }
  #resultsStartOverBtn:hover{ border-color:var(--brass); }
  #resultsEditPrefsBtn{
    background:var(--button-bg, var(--brass)); color:var(--button-text, var(--near-black));
    border:none;
  }
  #resultsEditPrefsBtn:hover{ filter:brightness(0.94); }
  .match-card{
    background:var(--card-bg);
    border:1px solid var(--line);
    box-shadow:var(--shadow-resting);
    border-radius:var(--radius-card);
    padding:var(--space-card-pad);
    margin-bottom:16px;
    display:grid;
    grid-template-columns:76px 1fr auto;
    gap:20px;
    align-items:center;
    transition:box-shadow 0.18s ease, transform 0.18s ease;
  }
  .match-card:hover{
    box-shadow:var(--shadow-hover);
    transform:translateY(-3px);
  }
  .match-card.top{border-color:var(--brass);border-width:2px;}
  .match-card h3{font-family:var(--font-display);font-size:1.4rem;margin:0 0 8px;font-weight:600;color:var(--ink);}
  .rating-badge{
    display:inline-flex;align-items:center;gap:4px;font-family:var(--font-body);
    font-size:0.95rem;font-weight:700;color:var(--ink);margin-left:10px;vertical-align:middle;
  }
  .rating-badge svg{flex-shrink:0;}
  .rating-count{font-weight:400;color:var(--ink-soft);font-size:0.84rem;}
  /* When there are reviews to read, the badge becomes a real button. It
     keeps the plain badge look — a bordered control next to a teacher's
     name would compete with Connect me! — and signals clickability with an
     underline on the count and a cursor change, the same treatment links
     get elsewhere on the card. */
  .rating-badge-btn{
    background:none;border:none;padding:0;cursor:pointer;
    font-family:var(--font-body);font-size:0.95rem;font-weight:700;color:var(--ink);
  }
  .rating-badge-btn .rating-count{text-decoration:underline;text-underline-offset:2px;}
  .rating-badge-btn:hover .rating-count{color:var(--brass);}
  .rating-badge-btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px;}
  /* The score hero — spans the card's full width (grid-column:1/-1 lets
     it occupy its own row above the photo/name/price columns, since the
     grid has no explicit row template and auto-flows new rows for
     anything that spans all columns) and centers the ring within it.
     Deliberately its own dedicated block rather than sized up in place
     of the old small inline badge — this needed to read as the reason
     someone opens the card, not a detail alongside the teacher's name. */
  /* Teacher popup ("Read more"): photo strip across the top, full width of
     the card's text column, then everything else below it. */
  .match-card.card-popup{ grid-template-columns:minmax(0,1fr) auto; }
  .popup-photo{ grid-column:1 / -1; position:relative; overflow:hidden; width:100%; max-width:440px; justify-self:center;
    aspect-ratio:4 / 3; min-height:140px; border-radius:var(--radius-card); background:var(--brass); }
  .popup-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .match-score-hero{
    grid-column:1 / -1; display:flex; justify-content:center;
    padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--line);
  }
  .match-score-ring-wrap{ position:relative; width:120px; height:120px; }
  .match-score-ring-wrap svg{ display:block; }
  .match-score-ring-text{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .match-score-number{
    font-family:var(--font-display); font-weight:700; font-size:2rem;
    line-height:1; color:var(--ink);
  }
  .match-score-label{
    font-family:var(--font-body); font-weight:600; font-size:0.78rem;
    letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin-top:2px;
  }
  /* Shown in place of the real score badge when a student hasn't
     finished the wizard yet — a clickable invitation back into it,
     not just an empty space where a score would otherwise be. */
  .match-badge-prompt{
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:1.5px dashed var(--line); border-radius:999px;
    padding:6px 14px; margin-bottom:10px;
    font-family:var(--font-body); font-weight:600; font-size:0.86rem;
    color:var(--ink-soft); cursor:pointer; text-align:left;
  }
  .match-badge-prompt:hover{ border-color:var(--brass); color:var(--brass); }
  .listing-detail-row{display:flex;align-items:flex-start;gap:8px;font-size:1rem;color:var(--ink-soft);margin-top:6px;}
  /* The first detail row is always the instrument/genre match — the
     specific reason this card is in the results at all, so it earns a
     touch more visual weight than the supporting rows below it. */
  .listing-detail-row.primary-row{color:var(--ink);font-weight:600;}
  .listing-detail-row svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;}
  .listing-bio{
    font-size:1rem;color:var(--ink-soft);margin-top:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .bio-read-more{
    background:none;border:none;padding:0;margin-top:2px;
    font-size:0.86rem;font-weight:600;color:var(--brass);text-decoration:underline;cursor:pointer;
  }
  .match-card .tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
  /* Review quotes sit below the tags, visually set apart by a top rule so
     they read as someone else's words rather than more of the teacher's
     own listing copy. */
  .review-quotes{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
  .review-quote{margin-bottom:10px;}
  .review-quote:last-child{margin-bottom:0;}
  .review-quote-stars{color:var(--brass);letter-spacing:1px;margin:0 0 2px;font-size:0.82rem;}
  .review-quote-text{margin:0;font-size:0.92rem;color:var(--ink);line-height:1.5;}
  .review-quote-author{margin:2px 0 0;font-size:0.8rem;color:var(--ink-soft);}
  .review-quotes-rest{margin-top:10px;}
  .review-quotes-toggle{margin-top:8px;color:var(--brass);text-decoration:underline;}
  .listing-price-block{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
  .listing-price{font-family:var(--font-display);font-weight:700;font-size:1.55rem;color:var(--ink);white-space:nowrap;}
  .listing-price-caption{font-size:0.86rem;color:var(--ink-soft);margin-top:-8px;}
  .listing-price-block .connect-btn{white-space:nowrap;margin-top:0 !important;}
  /* ---- Results card "Option A" (owner design 2026-10-11), live for
     everyone. Results list only; the teacher detail popup keeps the card
     above. */
  .match-card.card-a{ display:grid; grid-template-columns:38% minmax(0,1fr); padding:0; overflow:hidden; gap:0; align-items:stretch; }
  .card-a-photo{ position:relative; min-height:300px; background:var(--brass); overflow:hidden; }
  .card-a-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--fz,1)); transform-origin:var(--fx,50%) var(--fy,50%); }
  /* The "Read more" popup shows the whole bio, with the teacher's own
     paragraph and line breaks. */
  .listing-bio.listing-bio-full{ display:block; -webkit-line-clamp:unset; overflow:visible; }
  .listing-bio.listing-bio-full p{ margin:0 0 0.8em; }
  .listing-bio.listing-bio-full p:last-child{ margin-bottom:0; }
  .card-a-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:4.5rem; color:var(--near-black); }
  .card-a-body{ padding:var(--space-card-pad); display:flex; flex-direction:column; gap:10px; min-width:0; }
  .card-a-ring{ display:flex; justify-content:center; }
  .card-a-ring .match-score-ring-wrap{ background:var(--card-bg); border-radius:50%; }
  /* Photo editor (admin form, teacher profile, sign-up wizard): the two
     shapes the results card actually crops to — the tall panel on the
     left of the desktop card, and the 4:3 strip across the top on a
     phone — both drawn with photoFocusStyle(), exactly as the card is. */
  .pe-wrap{ display:flex; align-items:flex-start; gap:14px; }
  .pe-frame{ position:relative; overflow:hidden; background:var(--brass); touch-action:none; box-shadow:0 0 0 1px var(--line); }
  .pe-frame.pe-live{ cursor:grab; }
  .pe-frame.pe-dragging{ cursor:grabbing; }
  .pe-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; }
  .pe-desktop{ width:150px; height:230px; border-radius:var(--radius-card) 0 0 var(--radius-card); }
  .pe-phone{ width:128px; height:96px; border-radius:var(--radius-card) var(--radius-card) 0 0; }
  .pe-initial{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:2.6rem; color:var(--near-black); }
  .pe-cap{ font-size:0.72rem; color:var(--ink-soft); text-align:center; margin:4px 0 0; }
  .pe-controls{ margin-top:4px; }
  .pe-controls .pe-zoom{ width:100%; }
  .pe-controls-desktop{ width:150px; }
  .pe-controls-phone{ width:128px; }
  .pe-zoom-label{ display:block; margin:0 0 2px; }
  /* No score yet (preferences unfinished): the prompt takes the ring's
     exact place and size, so both cards line up the same way. */
  .card-a-ring .card-a-ring-prompt{ width:120px; height:120px; border-radius:50%; margin:0; padding:14px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    border:8px solid var(--line); background:var(--card-bg); color:var(--ink-soft);
    font-size:0.74rem; font-weight:600; line-height:1.25; white-space:normal; }
  .card-a-ring .card-a-ring-prompt:hover{ border-color:var(--brass); color:var(--brass); }
  .card-a-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
  .card-a-head h3{ margin:0; }
  .card-a-head .listing-detail-row{ margin-top:4px; }
  .card-a-price{ text-align:right; flex-shrink:0; }
  .card-a-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; }
  .card-a-meta .listing-detail-row{ margin-top:0; }
  .card-a-actions{ margin-top:auto; padding-top:6px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .card-a-actions .connect-btn{ white-space:nowrap; }
  .card-a-trial{ display:inline-flex; margin-top:6px; font-size:0.78rem; }
  /* No price set: the words are much longer than "$50 / Hour", so they
     drop to body size rather than crowding the teacher's name. */
  .card-a-no-price{ font-family:var(--font-body); font-size:0.95rem; font-weight:600; white-space:normal; max-width:9em; }
  /* Bio teaser: about two lines here, three on a phone, cut with an
     ellipsis; Read more opens the whole bio. No bio, no element, no gap. */
  .card-a-bio{ margin:0; font-size:0.95rem; color:var(--ink-soft); line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  /* ---- "How students see you" (teacher preview, owner 2026-10-12) ----
     The cards inside are built by buildMatchCard(), the same code students
     get. Each view is drawn at the width students actually see it at and
     scaled down to fit the panel, so nothing is squeezed or rearranged. */
  .tpv-title{ margin:0; font-size:1.05rem; }
  .tpv-sub{ margin:4px 0 0; font-size:0.84rem; color:var(--ink-soft); }
  .tpv-status{ margin:12px 0 0; font-size:0.84rem; line-height:1.45; padding:9px 12px; border-radius:8px; background:var(--paper); border:1px solid var(--line); }
  .tpv-status strong{ color:var(--ink); }
  .tpv-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 10px; }
  .tpv-tab{ font:inherit; font-size:0.82rem; padding:6px 12px; min-height:34px; border-radius:999px; border:1px solid var(--line); background:var(--paper-card); color:var(--ink-soft); cursor:pointer; }
  .tpv-tab[aria-selected="true"]{ border-color:var(--brass); color:var(--ink); font-weight:600; box-shadow:inset 0 0 0 1px var(--brass); }
  .tpv-stage{ position:relative; overflow:hidden; border-radius:10px; background:var(--paper); padding:12px; }
  .tpv-scaler{ position:relative; overflow:hidden; margin:0 auto; }
  .tpv-frame{ position:absolute; top:0; left:0; transform-origin:0 0; }
  .tpv-frame .match-card{ margin:0; }
  /* The preview is a picture of the card: nothing in it does anything except
     "Read more", which switches to that view here. */
  .tpv-frame .connect-btn, .tpv-frame .match-badge-prompt, .tpv-frame .rating-badge-btn{ pointer-events:none; }
  .tpv-note{ margin:8px 0 0; font-size:0.8rem; color:var(--ink-soft); }
  .tpv-ring-example .match-score-label{ font-style:italic; }
  /* Missing fields: a gentle note in the place the detail would be. */
  .tpv-hint{ display:block; margin:0; padding:7px 10px; border:1px dashed var(--brass); border-radius:8px; background:var(--card-bg); color:var(--ink-soft); font-size:0.84rem; font-style:italic; line-height:1.35; text-align:left; }
  /* A scaled-down card would shrink the notes past reading; they are drawn
     at their normal size instead (--tpv-s is the frame's scale). */
  .tpv-frame .tpv-hint{ font-size:calc(0.8rem / var(--tpv-s, 1)); padding:calc(5px / var(--tpv-s, 1)) calc(8px / var(--tpv-s, 1)); border-width:calc(1px / var(--tpv-s, 1)); border-radius:calc(6px / var(--tpv-s, 1)); }
  .popup-photo .tpv-hint{ position:absolute; left:8px; right:8px; bottom:8px; z-index:1; text-align:center; }
  .card-a-photo .tpv-hint{ position:absolute; left:10px; right:10px; bottom:10px; z-index:1; text-align:center; }
  .tpv-live-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .tpv-live-actions .secondary{ min-height:40px; }
  .tpv-in-wizard{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  @media (min-width:1180px){
    #teacherPortalContent.tpv-active .admin-main{ display:grid; grid-template-columns:minmax(0,1fr) 400px; column-gap:24px; align-items:start; }
    #teacherPortalContent.tpv-active .admin-main > .teacher-tab-panel{ grid-column:1; min-width:0; }
    #teacherPortalContent.tpv-active .admin-main > #teacherPreviewPanel{ grid-column:2; grid-row:1 / span 40; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; border-radius:var(--radius-card); }
  }
  @media (min-width:1320px){
    #teacherPortalContent.tpv-active .admin-main{ grid-template-columns:minmax(0,1fr) 460px; }
  }
  /* The phone card drawn on a wide screen. MIRRORS the phone rules for
     .card-a in the max-width:560px block below — change both together. */
  .tpv-phone .match-card.card-a{ grid-template-columns:1fr; text-align:center; }
  .tpv-phone .card-a-photo{ min-height:140px; aspect-ratio:4 / 3; width:100%; justify-self:stretch; }
  .tpv-phone .card-a-photo img{ object-position:var(--px,50%) var(--py,50%); transform:scale(var(--pz,1)); transform-origin:var(--px,50%) var(--py,50%); }
  .tpv-phone .card-a-body{ padding-top:0; align-items:center; }
  .tpv-phone .card-a-ring{ margin-top:14px; }
  .tpv-phone .card-a-head{ flex-direction:column; align-items:center; gap:6px; }
  .tpv-phone .card-a-head .listing-detail-row{ justify-content:center; }
  .tpv-phone .card-a-price{ text-align:center; }
  .tpv-phone .card-a-meta{ justify-content:center; }
  .tpv-phone .card-a-actions{ justify-content:center; width:100%; }
  .tpv-phone .card-a-bio{ -webkit-line-clamp:3; }
  .tpv-phone .match-card.card-popup{ grid-template-columns:1fr; }
  .tpv-phone .listing-price-block{ align-items:flex-start; text-align:left; width:100%; margin-top:6px; }
  .tpv-phone .listing-price-block .connect-btn{ width:100%; }
  .tpv-phone button.primary{ width:100%; }
  .tag-pill{font-size:0.84rem;background:rgba(26,26,28,0.06);color:var(--ink);padding:4px 10px;border-radius:999px;}
  /* A trust/offer signal (free trial availability), not a preference tag
     — visually distinct from the style/personality tags so it doesn't
     get lost among them or read as "just another preference match." */
  .trial-badge{
    font-size:0.84rem;font-weight:600;color:var(--brass);
    background:rgba(26,26,28,0.06);padding:4px 10px 4px 8px;border-radius:999px;
    display:inline-flex;align-items:center;gap:4px;
  }
  .trial-badge svg{width:13px;height:13px;flex-shrink:0;}
  .teacher-photo{
    width:168px;height:168px;border-radius:50%;object-fit:cover;
    border:2px solid var(--paper-card);box-shadow:0 0 0 1px var(--line);
    display:block;margin-bottom:12px;
    background:var(--paper-card);
  }
  .listing-photo-placeholder{
    width:76px;height:76px;border-radius:50%;flex-shrink:0;
    background:var(--brass);color:var(--near-black);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:600;font-size:1.5rem;
    box-shadow:0 0 0 1px var(--line);
  }

  .empty-state{
    border:1px dashed var(--line);
    border-radius:10px;
    padding:28px 22px;
    text-align:center;
    color:var(--ink-soft);
  }
  .empty-state a{color:var(--brass);font-weight:600;cursor:pointer;}

  .note-banner{
    background:var(--paper);
    color:var(--ink);
    border:2px solid var(--brass);
    border-left:6px solid var(--brass);
    border-radius:8px;
    padding:16px 18px;
    font-size:1rem;
    font-weight:600;
    line-height:1.4;
    margin-bottom:20px;
    display:flex;
    align-items:flex-start;
    gap:12px;
  }

  /* admin — a true fixed, full-height app-shell sidebar (position:fixed,
     anchored to the actual viewport edge) rather than a flex child
     confined inside the page's own narrow centered .wrap column. This is
     what actually solves two things at once: it sits flush against the
     real left edge of the browser window regardless of the page's own
     max-width, and — since it's now completely independent of the page's
     normal scroll flow — it can never collide with scrolled page content
     the way the earlier position:sticky-inside-a-flex-row version did
     (that version reserved its column correctly at rest, but nothing
     forced admin-main's own content to visually stay clear of it once
     scrolling was involved, which is what caused the overlap). #adminHeader
     and #adminContent's own top-level content are offset with matching
     margin-left so everything to the right of the sidebar lines up.
  */
  /* A dashboard heading names the page; the landing hero makes the pitch.
     Setting them at the same scale had "Welcome, Adam Bendorf" shouting as
     loudly as the headline that sells the product. */
  .admin-main h1, #teacherPortalContent h1{
    font-size:clamp(1.6rem, 3vw, 2.1rem);
    line-height:1.15;
    margin-bottom:4px;
  }

  .admin-shell{
    display:flex; align-items:flex-start; gap:28px;
    margin-top:8px; border-top:1px solid var(--line); padding-top:20px;
  }
  /* The sidebar used to be pinned at top:0 and cover the site header, so
     logging in replaced the site with an admin console. It now starts below
     the header, which stays visible on every screen — the dashboard sits
     inside the site rather than replacing it.
     Lighter, too: no filled panel and no hard divider. A full-height
     coloured column with a border is the visual language of an internal
     tool, and it was doing the same work a plain column of links does. */
  .admin-sidebar{
    display:flex; flex-direction:column;
    position:sticky;
    top:24px;
    align-self:flex-start;
    width:200px;
    flex-shrink:0;
    padding:4px 8px 4px 0;
    gap:2px;
    background:transparent;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
  }
  .admin-sub-tabs button{
    display:flex; align-items:center; gap:11px;
    background:none; border:none; cursor:pointer; text-align:left;
    font-family:var(--font-body); font-weight:600; font-size:0.88rem; color:var(--ink-soft);
    padding:10px 12px; border-radius:9px;
  }
  .admin-sub-tabs button svg{ width:18px; height:18px; flex-shrink:0; }
  .admin-sub-tabs button:hover{ background:rgba(26,26,28,0.04); color:var(--ink); }
  .admin-sub-tabs button.active{
    background:var(--brass); color:var(--near-black);
  }
  .admin-main{ flex:1; min-width:0; padding:0 0 24px; }
  /* ARTICLES TAB (2026-10-18): the Resources articles, edited in WordPress
     through adminArticles. The body editor shows the sample box as it looks
     on the site. */
  .art-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; padding:12px 16px; margin-bottom:10px; background:var(--paper-card); }
  .art-row-title{ font-weight:700; }
  .art-row-meta{ font-size:0.8rem; color:var(--ink-soft); margin-top:2px; }
  .art-row-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .art-row-actions button, .art-row-actions a.art-link{ padding:6px 12px; font-size:0.78rem; }
  .art-status{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; border-radius:999px; padding:2px 8px; margin-left:6px; vertical-align:2px; }
  .art-status.publish{ background:#E7F6EC; color:#1F7A44; }
  .art-status.draft{ background:#FFF4DE; color:#8A5A00; }
  .art-status.trash{ background:#F1F1F1; color:#666; }
  .art-toolbar{ display:flex; flex-wrap:wrap; gap:4px; padding:6px; border:1px solid var(--line); border-bottom:none; border-radius:8px 8px 0 0; background:var(--paper, #f6f7f9); position:sticky; top:0; z-index:2; }
  .art-toolbar button{ padding:5px 9px; font-size:0.8rem; border:1px solid transparent; background:transparent; border-radius:6px; cursor:pointer; color:var(--ink); }
  .art-toolbar button:hover{ background:rgba(26,26,28,0.06); }
  .art-toolbar .sep{ width:1px; background:var(--line); margin:2px 4px; }
  .art-editor{ min-height:360px; max-height:70vh; overflow-y:auto; border:1px solid var(--line); border-radius:0 0 8px 8px; padding:14px 18px; background:#fff; line-height:1.6; outline:none; }
  .art-editor:focus{ border-color:var(--brass); }
  .art-editor h2{ font-size:1.3rem; margin:1.2em 0 0.4em; }
  .art-editor h3{ font-size:1.08rem; margin:1em 0 0.3em; }
  .art-editor p{ margin:0 0 0.8em; }
  .art-editor a{ color:var(--accent, #1C438F); text-decoration:underline; }
  .art-editor .rmt-sample{ margin:0 0 1em; padding:14px 18px; border:1px dashed #9aa3ae; border-radius:10px; background:#f6f7f9; }
  .art-linkbar{ display:none; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-top:none; background:#fff; }
  .art-linkbar input{ flex:1; min-width:0; }
  .art-faq-row{ border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; }
  .art-faq-row .art-faq-actions{ display:flex; gap:6px; justify-content:flex-end; margin-top:6px; }
  .art-faq-row .art-faq-actions button{ padding:4px 10px; font-size:0.75rem; }
  .art-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; position:sticky; bottom:0; background:var(--paper-card); padding:12px 0; border-top:1px solid var(--line); margin-top:18px; z-index:2; }
  .art-actions button{ width:auto; }
  .art-banner{ border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:0.88rem; }
  .art-banner.warn{ background:#FEF2F2; border:1px solid var(--alert); }
  .art-banner.info{ background:#FFFBF5; border:1px solid var(--brass); }
  .art-slug{ display:flex; align-items:center; gap:0; }
  .art-slug span{ font-size:0.85rem; color:var(--ink-soft); white-space:nowrap; padding-right:4px; }
  @media (max-width: 720px){
    .art-slug{ flex-direction:column; align-items:stretch; }
    .art-actions button{ flex:1 1 auto; }
  }
  /* OUTREACH TAB (2026-10-19): invitations to independent teachers through
     adminOutreach. Reuses the .art-* rows, banners and actions. */
  .out-filters{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .out-filters button{ width:auto; padding:5px 12px; font-size:0.78rem; border-radius:999px; border:1px solid var(--line); background:var(--paper-card); color:var(--ink); cursor:pointer; }
  .out-filters button.active{ background:var(--brass); border-color:var(--brass); color:var(--near-black); }
  .art-status.drafted{ background:#FFF4DE; color:#8A5A00; }
  .art-status.approved{ background:#E8EEFB; color:#1C438F; }
  .art-status.sending, .art-status.sent{ background:#E7F6EC; color:#1F7A44; }
  .art-status.queued{ background:#F1EAFB; color:#5B3A99; }
  .art-status.replied, .art-status.signedUp{ background:#DDF3F1; color:#0F6B63; }
  .art-status.skipped{ background:#F1F1F1; color:#666; }
  .art-status.optedOut, .art-status.bounced{ background:#FEF2F2; color:#A12A2A; }
  .out-sources{ font-size:0.82rem; margin:0; padding-left:18px; }
  .out-sources li{ margin-bottom:2px; word-break:break-all; }
  .out-history{ font-size:0.8rem; color:var(--ink-soft); margin:0; padding-left:18px; }
  .out-body{ min-height:220px; font-family:inherit; line-height:1.55; }
  .out-body-full{ min-height:440px; }
  /* The whole-email editor (owner, 2026-10-29): what the system adds sits
     under the box, read-only; so is what blocks Approve. */
  .out-refresh{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:6px; font-size:0.86rem; }
  .out-ask{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .out-ask .secondary{ width:auto; padding:4px 12px; font-size:0.82rem; }
  .out-refresh[hidden], .out-refresh [hidden], #outNamesEdit[hidden], #outNamesChange[hidden]{ display:none !important; }
  .out-checks:empty{ display:none; }
  .out-checks{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
  .out-check{ font-size:0.86rem; border-radius:8px; padding:8px 12px; }
  .out-check.block{ background:rgba(178,63,46,0.08); color:var(--alert); border:1px solid rgba(178,63,46,0.3); }
  .out-sys{ margin-top:10px; border:1px dashed var(--line); border-radius:8px; padding:10px 14px; background:rgba(19,34,57,0.03); }
  .out-sys-head{ margin:0 0 6px; font-size:0.78rem; font-weight:700; color:var(--ink-soft); letter-spacing:0.02em; }
  .out-sys-head span{ font-weight:400; }
  .out-sys-line{ font-size:0.88rem; line-height:1.5; overflow-wrap:anywhere; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
  .out-sys-line .secondary{ width:auto; padding:4px 12px; font-size:0.82rem; }
  .out-sys-foot{ white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:0.82rem; line-height:1.5; color:var(--ink-soft); margin:8px 0 0; }
  .out-preview{ white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:0.9rem; line-height:1.55; margin:0; padding:14px; border:1px solid var(--line); border-radius:8px; background:transparent; }
  .out-copy{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
  .out-copy button{ width:auto; }
  .out-dnc-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:0.85rem; }
  .out-dnc-row button{ width:auto; padding:3px 10px; font-size:0.75rem; }
  .out-settings summary{ cursor:pointer; font-weight:700; }
  .out-prov{ display:inline-block; font-size:0.7rem; font-weight:700; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:2px; border:1px solid var(--line); color:var(--ink-soft); }
  .out-prov.gmail, .out-prov.google{ border-color:#1F7A44; color:#1F7A44; }
  .out-prov.microsoft, .out-prov.icloud{ border-color:#8A5A00; color:#8A5A00; }
  .out-tpl-ph{ font-size:0.82rem; margin:0 0 10px; padding-left:18px; }
  .out-tpl-ph code{ font-weight:700; }
  .out-tpl-ver{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); font-size:0.85rem; }
  .out-tpl-ver button{ width:auto; padding:3px 10px; font-size:0.75rem; }
  .out-tpl-ver details{ min-width:0; }
  .out-pv{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
  .out-pv .two-col{ margin-bottom:0; }
  .out-pv-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin-bottom:10px; }
  @media (max-width:640px){ .out-pv-row{ grid-template-columns:minmax(0,1fr); } }
  .out-pv-row label{ font-size:0.8rem; }
  .out-pv-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .out-pv-actions button, .out-pv-actions a{ width:auto; }
  .out-fact{ padding:8px 0; border-bottom:1px solid var(--line); font-size:0.88rem; }
  .out-fact-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .out-fact-head > div:first-child{ min-width:0; }
  .out-fact-actions{ display:flex; gap:6px; flex-shrink:0; }
  .out-fact-actions button{ width:auto; padding:3px 10px; font-size:0.75rem; }
  .out-tag{ display:inline-block; font-size:0.72rem; border:1px solid var(--line); border-radius:999px; padding:0 7px; margin:4px 4px 0 0; color:var(--ink-soft); }
  .out-explicit{ display:block; font-size:0.78rem; color:#8A5A00; margin-top:4px; }
  .out-tpl-ver pre{ white-space:pre-wrap; overflow-wrap:anywhere; font-family:inherit; font-size:0.82rem; margin:6px 0 0; }
  /* No offset needed any more. This existed to clear a position:fixed
     sidebar that overlapped whatever sat beside it — the bug that put the
     privacy note and account card underneath it. The sidebar is a flex
     column now, so layout keeps them apart on its own. */

  /* Deliberately a different visual language from .admin-sub-tabs (filled
     segmented pill control vs. underlined text) so a nested tab bar never
     reads as "more of the same row of tabs" when it sits right below one. */
  .roster-sub-tabs{display:inline-flex;gap:2px;background:var(--line);padding:4px;border-radius:999px;margin-bottom:24px;}
  .reviews-sub-tabs{display:inline-flex;gap:2px;background:var(--line);padding:4px;border-radius:999px;margin-bottom:0;}
  .roster-sub-tabs button, .reviews-sub-tabs button{
    background:none;border:none;font-family:var(--font-body);font-size:0.82rem;font-weight:600;
    color:var(--ink-soft);cursor:pointer;padding:8px 18px;border-radius:999px;
  }
  .roster-sub-tabs button.active, .reviews-sub-tabs button.active{color:var(--ink);background:var(--paper-card);}
  .criteria-sub-tabs{display:inline-flex;gap:2px;background:var(--line);padding:4px;border-radius:999px;margin-bottom:24px;flex-wrap:wrap;}
  .criteria-sub-tabs button{
    background:none;border:none;font-family:var(--font-body);font-size:0.82rem;font-weight:600;
    color:var(--ink-soft);cursor:pointer;padding:8px 18px;border-radius:999px;
  }
  .criteria-sub-tabs button.active{color:var(--ink);background:var(--paper-card);}
  .appearance-sub-tabs{display:inline-flex;gap:2px;background:var(--line);padding:4px;border-radius:999px;margin-bottom:24px;flex-wrap:wrap;}
  .appearance-sub-tabs button{
    background:none;border:none;font-family:var(--font-body);font-size:0.82rem;font-weight:600;
    color:var(--ink-soft);cursor:pointer;padding:8px 18px;border-radius:999px;
  }
  .appearance-sub-tabs button.active{color:var(--ink);background:var(--paper-card);}

  .teacher-row{
    display:flex;justify-content:space-between;align-items:flex-start;
    padding:14px 0;border-bottom:1px solid var(--line);gap:14px;
  }
  .teacher-row-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;}
  .teacher-row h4{margin:0 0 4px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;}
  .teacher-row .meta{font-size:0.82rem;color:var(--ink-soft);}
  .teacher-row .tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}

  /* Placed AFTER the .teacher-row rules above, not before them. These have the
     same specificity, so whichever comes last wins — and while this block sat
     higher in the file, the desktop column direction overrode it and the
     roster actions stacked one per line on a phone. */


  .inquiry-row{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;align-items:flex-start;}
  .inquiry-row .top-line{font-size:0.88rem;font-weight:600;}
  .inquiry-row .meta{font-size:0.82rem;color:var(--ink-soft);margin-top:4px;}
  .inquiry-row .notes{font-size:0.86rem;margin-top:6px;}

  .checkbox-group{display:flex;flex-wrap:wrap;gap:10px;}
  /* Harps taught (owner, 2026-10-29): a quiet optional row under Harp's styles. */
  .harp-types-label{ font-weight:600; margin:12px 0 6px; font-size:0.84rem; }
  .harp-types-label span{ font-weight:400; color:var(--ink-soft); }
  .listing-harp-line{ font-size:0.9rem; color:var(--ink-soft); margin:4px 0 0 26px; }
  .checkbox-group label{
    display:flex;align-items:center;gap:6px;font-weight:400;font-size:0.86rem;
    background:var(--paper-card);border:1px solid var(--line);padding:7px 12px;border-radius:6px;cursor:pointer;
  }
  .checkbox-group input{width:auto;}

  .form-card{
    background:var(--card-bg);border:1px solid var(--line);
    box-shadow:var(--shadow-resting);
    border-radius:var(--radius-card);padding:var(--space-card-pad);margin-bottom:24px;
  }
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  /* Below .form-card, deliberately. Equal specificity means source order
     decides, so an override written above the rule it targets does nothing. */


  /* The whole student row is a click target for revealing their details,
     so it needs to look like one — a hover tint is the only thing telling
     a teacher the bar does anything, now that the name is no longer a
     button. focus-visible keeps it reachable by keyboard: the row carries
     tabindex="0", since turning the name into plain text would otherwise
     have removed it from the tab order entirely. */
  .student-row{ transition:background .15s ease; }
  .student-row:hover{ background:var(--paper); }
  .student-row:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }

  /* Payment page: card option is deliberately the dominant choice —
     wider column, brass border, the only colored element on screen —
     while the alternative stays a real, readable option rather than
     fine print. The card total is shown at full size so a student
     never sees one number and gets charged another. */
  .pay-options{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;align-items:start;}
  .pay-options.single-option{grid-template-columns:1fr;}
  /* Both forms, so the mobile stack isn't quietly dependent on
     .single-option happening to use the same value. It does today; a change
     to the desktop single-option layout would otherwise leak onto phones. */

  .pay-option-card{border:2px solid var(--brass);margin-bottom:0;}
  .pay-option-alt{background:var(--paper);margin-bottom:0;}
  /* "Or pay your teacher directly" (owner, 2026-10-24): under the card
     option, one column, so card stays the first and biggest choice. */
  .pay-options.stacked{grid-template-columns:1fr;}
  .pay-handles{margin:10px 0 0;padding:0;list-style:none;}
  .pay-handles li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:0.95rem;}
  .pay-handles li:first-child{border-top:none;}
  .pay-handles .ph-label{flex:0 0 64px;color:var(--ink-soft);font-size:0.85rem;}
  .pay-handles .ph-value{font-weight:600;overflow-wrap:anywhere;}
  .ph-fields{display:grid;gap:10px;margin-top:12px;}
  .ph-fields .field{margin:0;}
  .stmt-box{ border:1px solid var(--line); border-radius:12px; padding:14px; margin-top:6px; display:flex; flex-direction:column; gap:8px; }
  .stmt-box .field{ margin:0; }
  .stmt-box textarea{ min-height:0; }
  .stmt-box-title{ margin:0; font-weight:700; }
  .stmt-box-title span{ font-weight:400; color:var(--ink-soft); }
  .ph-err{color:var(--alert);font-size:0.8rem;margin:4px 0 0;}
  .pay-option-badge{
    display:inline-block;background:var(--brass);color:#fff;
    font-size:0.72rem;letter-spacing:.04em;text-transform:uppercase;
    padding:4px 12px;border-radius:999px;margin-bottom:14px;
  }
  .pay-option-label{font-size:1rem;font-weight:700;margin:0 0 6px;}
  .pay-option-label-alt{color:var(--ink-soft);}
  .pay-option-amount{font-size:2.1rem;font-weight:700;line-height:1.15;margin:0;}
  .pay-option-amount-alt{font-size:1.3rem;color:var(--ink-soft);}
  .pay-option-sub{font-size:0.85rem;color:var(--ink-soft);margin:2px 0 16px;}
  .pay-option-benefits{list-style:none;padding:0;margin:16px 0 0;}
  .pay-option-benefits li{
    font-size:0.85rem;color:var(--ink-soft);line-height:1.5;
    padding-left:22px;margin-bottom:8px;position:relative;
  }
  .pay-option-benefits li::before{
    content:"✓";position:absolute;left:0;top:0;color:var(--brass);font-weight:700;
  }

  .privacy-note{font-size:0.78rem;color:var(--ink-soft);margin-top:26px;border-top:1px solid var(--line);padding-top:14px;}
  .toast{
    position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
    /* Above everything else in the app. Toasts had no z-index at all,
       which meant they defaulted to auto and were painted UNDER any
       positioned element that had one — the match wizard (200), every
       dialog (1000), and the setup banner (999). A validation error
       fired from inside the wizard was therefore invisible: the message
       appeared and expired behind the modal while the student sat there
       wondering why nothing happened.

       2000 keeps them clear of the highest existing layer (1000) with
       room to spare. Toasts are transient, non-interactive
       (pointer-events:none below), and never block anything, so there's
       no case where something should legitimately cover one. */
    z-index:2000;
    background:var(--paper-card);color:var(--ink);padding:12px 20px;border-radius:8px;
    border:1px solid var(--line);
    font-size:0.86rem;opacity:0;pointer-events:none;transition:opacity .25s ease;
    max-width:90vw;box-sizing:border-box;text-align:center;
  }
  .toast.show{opacity:1;}
  .toast.error{
    border:2px solid var(--alert);
    font-weight:700;
    font-size:1.05rem;
    padding:18px 28px;
    display:flex;align-items:center;gap:12px;
    box-shadow:0 10px 28px rgba(0,0,0,0.18);
  }
  .field-highlight{
    animation:fieldShake 0.4s ease-in-out, fieldGlow 1.6s ease-in-out 2;
    border-radius:12px;
  }
  @keyframes fieldShake{
    0%, 100%{ transform:translateX(0); }
    20%, 60%{ transform:translateX(-6px); }
    40%, 80%{ transform:translateX(6px); }
  }
  @keyframes fieldGlow{
    0%, 100%{ outline:3px solid transparent; outline-offset:5px; }
    50%{ outline:3px solid var(--alert); outline-offset:5px; }
  }

  .screen{display:none;position:relative;}
  .screen.active{display:block;}
  .screen-nav-link{margin:18px 0 0;}
  /* Centers the admin/student/teacher login gates as a block on the
     page rather than leaving them flush against the left edge of
     .wrap, which is what was happening with no alignment rule at all.
     Flexbox column + align-items:center rather than just text-align,
     since text-align alone centers text but not block-level children
     like .field divs — this centers the whole form as a unit while
     each field's own label/input still reads left-to-right normally
     inside it (text-align:left below), not centered text in a login
     box, which would look strange. */
  .login-gate{
    display:flex; flex-direction:column; align-items:center;
    max-width:420px; margin:0 auto; text-align:center;
  }
  .login-gate .field{ width:100%; text-align:left; }
  .link-btn{
    font-family:var(--font-body);
    font-size:0.8rem;color:var(--ink-soft);
    text-decoration:underline;cursor:pointer;
    background:none;border:none;padding:0;
  }
  .link-btn:hover{color:var(--ink);}
  input[type=range]{width:100%;accent-color:var(--brass);height:6px;}
  .weight-value{font-family:var(--font-mono);font-size:0.8rem;color:var(--brass-dark);margin-top:6px;}
  #setupBanner{
    display:none;position:fixed;top:0;left:0;right:0;z-index:999;
    background:var(--alert);color:#fff;text-align:center;
    padding:9px 14px;font-size:0.82rem;font-family:var(--font-body);
  }
  #setupBanner code{background:rgba(255,255,255,0.18);padding:1px 5px;border-radius:3px;}
  body.has-banner{padding-top:38px;}

  /* ==========================================================================
     RESPONSIVE RULES — all of them, in one place, at the end.
     
     They used to be scattered through the file at four different widths (560,
     640, 700, 820), written by different passes months apart. Two problems
     came from that. A rule firing at 640 but not 700 gives you a layout that
     is correct at 560 and at 820 and broken between them. And because these
     have the same specificity as the base rules they override, any block
     written ABOVE its target silently did nothing — which is exactly why the
     roster actions stacked on phones and form cards kept desktop padding.
     
     Collected at the end of the stylesheet, source order can no longer be the
     bug: everything here comes after everything it overrides.
     ========================================================================== */
  /* Tablet and narrow desktop */
  @media (max-width:820px){
    /* was @640px */
 .teach-value-grid{ grid-template-columns:1fr; }
    /* was @640px */

    .match-step1-search-pill{
      flex-direction:column; height:auto; border-radius:20px; align-items:stretch;
    }
    /* Stacked, the two fields ran together as one tall box — there was
       nothing to say where "instrument" ended and "ZIP" began. Side by side
       the gap did that work; stacked, it needs a line. */
    .pill-segment{ height:56px; }
    .pill-segment + .pill-segment{ border-top:1px solid var(--line); }
    .pill-segment.zip-segment{ flex:1 1 auto; }
    .pill-search-btn{
      height:56px; border-radius:0 0 20px 20px; justify-content:center;
      padding:0 20px; font-size:1rem;
    }

    .role-context{ margin-left:0; margin-right:0; width:100%; }
    /* Matching the specificity of section.panel.active.admin-shell above.
       A plain .admin-shell selector loses to it, so the portal stayed a flex
       row on a phone and squeezed the content into a sliver beside the
       sidebar. */
    .admin-shell, section.panel.active.admin-shell{ display:block; }
    .admin-sidebar{
      position:static; width:100%; max-height:none; flex-direction:row;
      overflow-x:auto; overflow-y:visible;
      border-bottom:1px solid var(--line); padding:4px 0 12px;
    }
    /* Labels stay. Seven unlabelled icons is a guessing game — a palette and
       a wrench mean something to whoever built this and nothing to a teacher
       looking for their invoices. The row scrolls sideways instead, which is
       the standard way to fit a tab bar on a phone. */
    .admin-sidebar{
      gap:6px; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; scroll-snap-type:x proximity;
    }
    .admin-sidebar::-webkit-scrollbar{ display:none; }
    .admin-sub-tabs button{
      flex-direction:column; align-items:center; gap:6px;
      padding:10px 14px; min-width:78px; min-height:60px;
      flex-shrink:0; scroll-snap-align:start; border-radius:10px;
    }
    /* 0.78rem, not 0.7 — a tab label has to be readable at arm's length on a
       phone, and the smaller size was close to invisible. Forced visible with
       !important because a label that silently fails to render leaves seven
       unidentifiable icons, which is the exact problem this is here to fix. */
    .admin-sub-tabs button span{
      display:block !important; font-size:0.78rem; line-height:1.15;
      white-space:nowrap; letter-spacing:0.01em; font-weight:600;
    }
    .admin-sub-tabs button svg{ width:22px; height:22px; }
    .admin-main{ padding:20px 4px; }
    /* was @700px */

    .pay-options, .pay-options.single-option{ grid-template-columns:1fr; }
  }
  /* Phone */
  @media (max-width:560px){

    .top-nav-links .portal-nav-account{ display:block; }
    /* The avatar and the menu's "Account" item are the same control. On a
       phone the avatar sat in its own column beside the page title, pushing
       the heading left and leaving a gap — a desktop layout surviving into a
       width it was never drawn for. The menu item does the job; the avatar
       goes. */
    .header-account{ display:none !important; }

    /* One row: wordmark left, menu button right. Everything else moves into
       the menu, so the header is a single line instead of a stack. */
    .top-site-nav{ justify-content:space-between; flex-wrap:nowrap; gap:12px; }
    .nav-menu-toggle{ display:block; flex-shrink:0; }

    .top-nav-links{
      display:none;
      position:absolute; top:calc(100% + 8px); right:0; z-index:70;
      flex-direction:column; align-items:stretch; gap:0;
      background:var(--paper-card); border:1px solid var(--line);
      border-radius:12px; padding:6px; min-width:190px;
      box-shadow:0 12px 30px rgba(0,0,0,0.12);
    }
    .top-nav-links.open{ display:flex; }
    /* 44px minimum, which is the tap target both Apple and Google specify —
       these were text links sized for a mouse. */
    .top-nav-links .top-nav-link{
      text-align:left; padding:12px 12px; min-height:44px;
      border-radius:8px; font-size:0.95rem;
    }
    .top-nav-links .top-nav-link:hover{ background:rgba(26,26,28,0.05); }

    /* The context chip stays visible rather than hiding in the menu: which
       area you're in is orientation, not an action. */
    .role-context{ margin:0; width:auto; }

    /* The circular Account button and its caption take their own column
       beside the page heading, squeezing the title and leaving a gap. The
       hamburger menu already carries an Account item, so on a phone this is
       a duplicate control competing for the narrowest space on the page. */
    .header-account{ display:none !important; }

    .match-card{grid-template-columns:1fr;text-align:left;}
    /* Option A on a phone: photo across the top, ring overlapping its
       bottom edge, details centered below. */
    .match-card.card-a{ grid-template-columns:1fr; text-align:center; }
    .match-card.card-popup{ grid-template-columns:1fr; }
    /* width:100% + justify-self:stretch are required, not cosmetic: a
       grid item with an aspect-ratio and default alignment is sized to its
       content in WebKit (iOS Safari), and the image here is absolutely
       positioned, so the panel collapsed to 0×0 and the ring's overlap
       below pushed it out through the top of the card (2026-10-11). The
       min-height keeps the strip visible even if the ratio is ever lost. */
    .card-a-photo{ min-height:140px; aspect-ratio:4 / 3; width:100%; justify-self:stretch; }
    .card-a-photo img{ object-position:var(--px,50%) var(--py,50%); transform:scale(var(--pz,1)); transform-origin:var(--px,50%) var(--py,50%); }
    .card-a-body{ padding-top:0; align-items:center; }
    /* Below the photo, never over it: overlapping the strip's bottom edge
       covered the teacher's face (owner, 2026-10-11). */
    .card-a-ring{ margin-top:14px; }
    .card-a-head{ flex-direction:column; align-items:center; gap:6px; }
    .card-a-head .listing-detail-row{ justify-content:center; }
    .card-a-price{ text-align:center; }
    .card-a-meta{ justify-content:center; }
    .card-a-actions{ justify-content:center; width:100%; }
    .card-a-bio{ -webkit-line-clamp:3; }
    /* The computer card drawn on a phone: undo the phone rules above inside
       the preview (MIRRORS the desktop .card-a rules — change both together). */
    .tpv-desktop .match-card.card-a{ grid-template-columns:38% minmax(0,1fr); text-align:left; }
    .tpv-desktop .card-a-photo{ min-height:300px; aspect-ratio:auto; }
    .tpv-desktop .card-a-photo img{ object-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--fz,1)); transform-origin:var(--fx,50%) var(--fy,50%); }
    .tpv-desktop .card-a-body{ padding-top:var(--space-card-pad); align-items:stretch; }
    .tpv-desktop .card-a-ring{ margin-top:0; }
    .tpv-desktop .card-a-head{ flex-direction:row; align-items:flex-start; gap:14px; }
    .tpv-desktop .card-a-head .listing-detail-row{ justify-content:flex-start; }
    .tpv-desktop .card-a-price{ text-align:right; }
    .tpv-desktop .card-a-meta{ justify-content:flex-start; }
    .tpv-desktop .card-a-actions{ justify-content:flex-start; width:auto; }
    .tpv-desktop .card-a-bio{ -webkit-line-clamp:2; }
    .tpv-desktop .match-card.card-popup{ grid-template-columns:minmax(0,1fr) auto; }
    .tpv-desktop .listing-price-block{ align-items:flex-end; text-align:right; width:auto; margin-top:0; }
    .tpv-desktop .listing-price-block .connect-btn, .tpv-desktop button.primary{ width:auto; }
    .listing-price-block{align-items:flex-start;text-align:left;width:100%;margin-top:6px;}
    .listing-price-block .connect-btn{width:100%;}
    .wrap{padding:28px 16px 64px;}
    .chip, .radio-chip{padding:10px 16px;}
    button.primary{width:100%;}

    .teacher-row{ flex-direction:column; align-items:stretch; }
    .teacher-row-actions{
      flex-direction:row; flex-wrap:wrap; align-items:center;
      justify-content:flex-start; margin-top:10px; gap:8px;
    }

    .two-col{grid-template-columns:1fr;}
    .form-card{padding:18px;}
  }


  /* "This site was just updated" note (see applyNewerBuildQuietly). Theme
     tokens for page colours, so the text is always readable. */
  #newBuildNote{ display:flex; align-items:center; gap:10px; background:var(--paper-card, #fff); color:var(--ink, #1b2430);
    border:1px solid var(--line, rgba(0,0,0,.12)); border-radius:12px; padding:10px 12px; font-size:0.86rem; line-height:1.35;
    box-shadow:0 6px 20px rgba(0,0,0,.12); }
  #newBuildNote .nbn-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
  #newBuildNote .nbn-reload{ background:var(--brass, #2A5CC4); color:#fff; border:none; border-radius:999px; padding:6px 12px; font:inherit; font-weight:600; cursor:pointer; }
  #newBuildNote .nbn-close{ background:none; border:none; color:var(--ink-soft, #5b6573); font-size:1.2rem; line-height:1; padding:2px 4px; cursor:pointer; }
  #newBuildNote.nbn-margin{ position:fixed; left:16px; bottom:16px; width:240px; z-index:900; flex-direction:column; align-items:flex-start; }
  #newBuildNote.nbn-inline{ margin:0 16px 12px; }
  /* The one site header (see the markup comment). */
  .site-header{ position:relative; z-index:60; background:var(--header-bg, transparent); }
  /* On the home page the header sits on the top of the hero gradient, which
     starts at white in every theme, so no seam shows — unless the appearance
     admin set a header background, which wins everywhere. */
  body.has-hero-gradient:has(#screen-match.active) .site-header{ background:var(--header-solid-bg, #FFFFFF); }
  /* Logo & header alignment (appearance admin). Left is the default row. */
  .site-header.align-center .sh-inner{ display:grid; grid-template-columns:1fr auto 1fr; }
  .site-header.align-center .sh-brand{ grid-column:2; grid-row:1; }
  .site-header.align-center .sh-nav, .site-header.align-center .sh-toggle{ grid-column:3; grid-row:1; justify-self:end; }
  .site-header.align-right .sh-inner{ flex-direction:row-reverse; }
  /* Links take the accent colour, darkened where needed to pass WCAG AA on
     the page and card backgrounds (--link-color, set by applyBrandOverrides
     and by the server for its pages). :where() keeps this below every
     styled link and button. */
  :where(a), :where(a:visited){ color:var(--link-color, var(--brass)); }
  .sh-inner{ max-width:960px; margin:0 auto; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .sh-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
  /* The whole logo, mark, words and the gap between, shows the pointer hand:
     Safari reports a link's cursor as "auto" rather than drawing it explicitly. */
  .sh-brand, .sh-brand *{ cursor:pointer; }
  .sh-brand .brand-logo-img{ max-height:32px; width:auto; }
  .sh-brand .brand-name-label{ font-family:var(--font-body); font-weight:600; font-size:0.82rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--header-text, var(--ink)); }
  .sh-nav{ display:flex; align-items:center; gap:22px; }
  .sh-link{ background:none; border:none; padding:6px 0; cursor:pointer; font:inherit; font-size:0.92rem; font-weight:500; color:var(--header-text, var(--ink-soft)); }
  .sh-link:hover{ color:var(--header-text, var(--ink)); }
  a.sh-link{ text-decoration:none; }
  .sh-account{ position:relative; }
  .sh-account-btn{ display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--line); border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer; font:inherit; font-size:0.9rem; font-weight:600; color:var(--header-text, var(--ink)); }
  .sh-avatar{ width:30px; height:30px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--brass); color:var(--near-black); font-weight:700; font-size:0.85rem; flex-shrink:0; }
  .sh-avatar img{ width:100%; height:100%; object-fit:cover; }
  .sh-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:210px; background:var(--paper-card, #fff); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--shadow-modal, 0 10px 30px rgba(0,0,0,.15)); }
  .sh-menu.open{ display:block; }
  .sh-item{ display:block; width:100%; text-align:left; background:none; border:none; border-radius:8px; padding:10px 12px; font:inherit; font-size:0.92rem; color:var(--ink); cursor:pointer; }
  .sh-item:hover{ background:var(--paper, #f4f5f7); }
  .sh-sep{ height:1px; background:var(--line); margin:6px 4px; }
  .sh-who{ padding:8px 12px 6px; font-size:0.8rem; color:var(--ink-soft); }
  .sh-toggle{ display:none; background:none; border:none; padding:4px; cursor:pointer; color:var(--header-text, var(--ink)); }
  .sh-panel{ display:none; }
  /* The old per-screen headers. */
  .screen .top-site-nav, .screen .screen-nav-link, .screen .site-header-band, .screen .header-account, .screen .role-context{ display:none !important; }
  @media (max-width:560px){
    .sh-nav{ display:none; }
    .sh-toggle{ display:block; }
    .sh-panel.open{ display:block; margin:0 16px 8px; background:var(--paper-card, #fff); border:1px solid var(--line); border-radius:12px; padding:6px; box-shadow:var(--shadow-modal, 0 10px 30px rgba(0,0,0,.15)); }
  }