/* Hallmark · genre: playful-soft · macrostructure: app system · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
/* Hallmark · audit: contrast pass · honest copy pass · token lock pass · chrome pass · responsive 320/375/414/768 pass · slop gates 1–58 pass */

/* Consolidated application component rules. */
*, *::before, *::after { margin: 0; padding: 0;}

    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}

    html, body { height: 100%; }

    body { -webkit-font-smoothing: antialiased;}

    /* Remove 300ms tap delay and blue flash */
    * { -webkit-tap-highlight-color: transparent; }

    a, button, [role="button"] { touch-action: manipulation; }

    /* Visible keyboard focus for every interactive element (icon-only links —
       nav avatar, msg-bell, mtab, FAB — had none). Mouse clicks stay clean via
       :focus-visible. */
    /* One focus colour everywhere. This rule outranked the generic
       :focus-visible below, so links and buttons rang in --ink while every
       other focusable element rang in --action — two focus systems in one
       page, and the design system reserves --action for focus. */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 0; }

    @media (prefers-reduced-motion: reduce) {

      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    }

    a { text-decoration: none; color: inherit;}

    button { font-family: inherit; cursor: pointer; }

    input, textarea, select { font-family: inherit; }

    /* Prevent iOS auto-zoom on input focus — must be ≥16px */
    @media (max-width: 768px) {

      input, textarea, select { font-size: 16px; }
    }

    .logo-mark .wordmark em {
      font-style: normal;
      color: var(--ink);
      /* wordmark uses ink while the Turtle carrying a Spark mark carries the brand color */
    }

    .u-avatar-nav { width: 36px; height: 36px; border-radius: var(--radius-tile); background: var(--surface-3); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; text-decoration: none; flex-shrink: 0; }

    /* Desktop application shell. The mobile PWA stays single-column; at laptop
       widths this gives signed-in screens a stable place for navigation instead
       of leaving a phone-sized card in a wide browser window. */
    .desktop-app-frame { min-width: 0;}
    .desktop-sidebar { display: none;}

    @media (min-width: 1100px) {
      .desktop-app-frame { display: grid; grid-template-columns: 224px minmax(0, 1fr); max-width: 1440px; min-height: calc(100dvh - 62px); margin: 0 auto; }

      .desktop-sidebar { position: sticky; top: 62px; display: flex; flex-direction: column; align-self: start; height: calc(100dvh - 62px); padding: 24px 16px; background: var(--surface); border-right: 1px solid var(--line); }

      .desktop-app-content { min-width: 0; padding: 0 32px 48px; }
      .desk-nav-label { margin: 0 12px 12px; color: var(--muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
      .desk-nav { display: flex; flex-direction: column; gap: 4px; }
      .desk-nav-item { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
      .desk-nav-item i { width: 20px; font-size: 19px; text-align: center; }
      .desk-nav-item:hover { background: var(--surface-2); color: var(--ink); }
      .desk-nav-item.active { background: var(--lotus-soft); color: var(--action); font-weight: 600; }
      .desk-account { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 12px 0; border-top: 1px solid var(--line); color: var(--ink); }
      .desk-account-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface-3); color: var(--action); font-size: 12px; font-weight: 700; }
      .desk-account-name { min-width: 0; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    }

    .msg-bell { position: relative; display: inline-flex; align-items: center; font-size: 20px; color: var(--ink); text-decoration: none; }

    .msg-bell-count { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-tile); background: var(--danger); color: var(--action-ink); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }

    .nav-login { font-size: 14px; color: var(--ink); font-weight: 500; text-decoration: none; }

    .nav-signup { background: var(--action); color: var(--action-ink); font-weight: 500; border-radius: var(--radius-tile); border: none; text-decoration: none;}

    .nav-signup:hover { background: var(--action-hover); }

    .nav-signout { background: none; border: none; font-size: 13px; color: var(--muted-2); cursor: pointer; font-family: inherit; padding: 0; line-height: 1; }

    .nav-signout:hover { color: var(--danger); }

    /* Language switcher */
    .lang-sw { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.3px; }

    .lang-sw-cur { color: var(--action); }

    .lang-sw-sep { color: var(--muted); }

    .lang-sw-lnk { color: var(--muted); text-decoration: none; min-height: var(--control-h); display: flex; align-items: center; }

    .lang-sw-lnk:hover { color: var(--action); }

    /* Buttons */
    .hbtn-primary { background: var(--action); color: var(--action-ink); font-size: 15px; font-weight: 600; padding: 16px 28px; border-radius: var(--radius-tile); border: none; cursor: pointer; min-height: 48px; }

    .hbtn-primary:hover { background: var(--action-hover); }

    .hbtn-secondary { background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; padding: 16px 28px; border-radius: var(--radius-tile); border: 1px solid var(--line-strong); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 48px; }

    .hbtn-secondary:hover { background: var(--surface-3); }

    .hbtn-indigo { background: var(--ink); color: var(--action-ink); font-size: 15px; font-weight: 600; padding: 16px 28px; border-radius: var(--radius-tile); border: none; cursor: pointer; min-height: 48px; }

    .hbtn-indigo:hover { background: var(--ink); }

    /* Floating feedback button — present on every page */
    .fb-fab { position: fixed; right: 18px; bottom: calc(18px + var(--safe-bottom)); z-index: 150; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 12px 16px; box-shadow: var(--shadow-overlay); text-decoration: none; min-height: 44px;}

    .fb-fab i { font-size: 16px; }

    .fb-fab:hover { background: var(--action-hover); }

    /* Mobile-app banner (web host only). Hidden by default; revealed only at mobile
       widths (see media query) when JS confirms it hasn't been dismissed. */
    .app-banner { display: none; }

    /* ─── Mobile breakpoint ───────────────────────────────── */
    @media (max-width: 860px) {

      .pnav-links, .nav-vdiv, .nav-login { display: none; }

      .mtab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 4px calc(8px + var(--safe-bottom)); }

      .mtab-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 8px 4px; color: var(--muted-2); font-family: inherit; font-size: 10px; font-weight: 500; text-decoration: none; min-height: 48px; justify-content: center; }

      .mtab-item i { font-size: 22px; }

      .mtab-item.active { color: var(--action); }

      /* The square motif: a small lotus square marks the active tab. */
      .mtab-item.active::before { content: ''; position: absolute; top: 0; width: 6px; height: 6px; background: var(--action); }

      body { padding-bottom: calc(68px + var(--safe-bottom)); }

      /* Clear the bottom tab bar */
      .fb-fab { bottom: calc(78px + var(--safe-bottom)); right: 14px; }

      .app-banner:not([hidden]) { display: flex; align-items: center; gap: 8px; padding: 10px 12px calc(10px + var(--safe-top)); background: var(--ink); color: var(--action-ink); }
      .app-banner__link { flex: 1; display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 600; min-height: 24px; }
      .app-banner__link i { font-size: 18px; }
      .app-banner__dismiss { display: flex; align-items: center; justify-content: center; background: none; border: none; color: inherit; cursor: pointer; padding: 6px; min-height: 36px; min-width: 36px; }
      .app-banner__dismiss i { font-size: 18px; }
    }
    /* ─── UX layer: loading, transitions, feedback ───────────────── */

    /* Global top progress bar — driven by ux.js on htmx requests. */
    #ux-bar { position: fixed; top: 0; left: 0; height: 2px; z-index: 1000; opacity: 0; pointer-events: none;}

    #ux-bar.on { opacity: 1; }

    /* Spinner keyframes — shared (search page had its own; now global). */
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Submit button pending state — htmx sets .htmx-request on the hx element. */
    form.htmx-request button[type="submit"], button[type="submit"].htmx-request { position: relative; color: transparent !important; }

    form.htmx-request button[type="submit"]::after, button[type="submit"].htmx-request::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid color-mix(in oklch, var(--action-ink) 50%, transparent); border-top-color: var(--surface); border-radius: 50%; animation: spin var(--duration-slow) var(--ease-linear) infinite; }

    /* Static-shaped skeletons avoid distracting motion on repeated HTMX loads. */
    .skel { border-radius: var(--radius-tile);}

    .skel-card { display: grid; grid-template-columns: 56px 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 16px; }

    .skel-av { width: 56px; height: 56px; border-radius: var(--radius-tile); }

    .skel-lines { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

    .skel-line { height: 12px; }

    .skel-list { display: flex; flex-direction: column; gap: 12px; }

    /* Global success toast (promoted from edit_tutor_profile). */
    .ux-toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-bottom)); transform: translate(-50%, 16px); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 12px 20px; opacity: 0; pointer-events: none; z-index: 1100; transition: opacity var(--duration-medium) var(--ease-standard), transform var(--duration-medium) var(--ease-standard); max-width: calc(100vw - 32px);}

    .ux-toast.show { opacity: 1; transform: translate(-50%, 0); }

    .ux-toast i { color: var(--sage); font-size: 18px; }

    @media (max-width: 860px) {
      .ux-toast { bottom: calc(84px + var(--safe-bottom)); }
    }

    /* Error swap targets fade/slide in instead of snapping. */
    .ux-reveal { animation: uxReveal var(--duration-medium) var(--ease-standard) both; }

    @keyframes uxReveal {
      from { opacity: 0; transform: translateY(-4px); }
    }

    /* Consistent press feedback on buttons + nav that lacked an :active state. */
    @media (prefers-reduced-motion: no-preference) {

      .hbtn-primary:active, .hbtn-secondary:active, .hbtn-indigo:active, .u-cta:active, .nav-signup:active, .fcard-btn:active, .mtab-item:active { transform: scale(.97); }

    }

    /* ─── "Hồng sen" shared components ─────────────────────────────
       Ported from the design system's React components into reusable
       classes so every page composes the same square-motif primitives. */

    /* Square rating pips (replaces stars). Markup emitted by the ratingPips
       template helper; per-pip fill is set inline. */
    .pips { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
    .pips i { width: 9px; height: 9px; display: inline-block; background: var(--line-strong);}
    .pips .pips-label { margin-left: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); font-feature-settings: var(--font-numeric); }

    /* Badge — sage=verified/ok, lotus=new, neutral, ochre=warn, brick=danger. */
    .badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-3xs); font-weight: 600; line-height: 1; padding: 4px 8px; border-radius: var(--radius-tile); background: var(--surface-3); color: var(--ink-2); }
    .badge i { font-size: 12px; }

    /* Chip — goal/filter chips. Square, ink border when selected. */
    .chip { text-decoration: none;}
    .chip:hover { background: var(--line);}
    .chip.on, .chip[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--ink); }

    /* Score tile — big tabular number + tiny uppercase overline. */
    .score-tile { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px 12px; min-width: 0; }
    .score-tile .overline { display: block; font-size: var(--text-4xs); font-weight: 600; letter-spacing: var(--tracking-overline, 1px); text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .score-tile .value { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--ink); letter-spacing: -0.3px; font-feature-settings: var(--font-numeric); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .score-tile .value .unit { font-size: var(--text-xs); font-weight: 500; color: var(--muted); }

    /* Square avatar / initials tile (no round). */
    .avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-tile); background: var(--surface-3); color: var(--ink); font-weight: 600; flex-shrink: 0; object-fit: cover; overflow: hidden; position: relative; }

    /* Profile avatar editor. */
    .avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
    .ep-avatar { width: 72px; height: 72px; flex: 0 0 72px; border-radius: var(--radius-tile); background: var(--lotus-soft); color: var(--action); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 26px; position: relative; }
    .ep-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
    .avatar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .avatar-status { width: 100%; font-size: 12px; color: var(--muted); min-height: 18px; margin: 0; }
    .avatar-status.error { color: var(--lotus); }
    .ep-avatar .cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: var(--radius-tile); background: var(--action); color: var(--action-ink); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; }
    .btn-ghost { font-weight: 600; font-size: 13px; color: var(--action); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 8px 16px; cursor: pointer; }
    .btn-ghost:hover { border-color: var(--action); background: var(--lotus-soft); }

    /* Underline tabs. */
    .tabs { display: flex; border-bottom: 1px solid var(--line);}
    .tabs a, .tabs button { position: relative; background: none; border: none; padding: 12px 0; font-size: var(--text-sm); font-weight: 500; color: var(--muted); text-decoration: none; cursor: pointer; font-family: inherit;}
    .tabs a.on, .tabs button.on { color: var(--ink); font-weight: 600; }
    .tabs a.on::after, .tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;}

    /* Step indicator — numbered square modules joined by hairlines (trial funnel). */
    .steps { display: flex; align-items: flex-start; }
    .steps .step { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 56px; }
    .steps .step .num { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: var(--text-3xs); font-weight: 700; color: var(--muted-2); border: 1px solid var(--line-strong);}
    .steps .step .lbl { font-size: var(--text-3xs); color: var(--muted-2); text-align: center; line-height: 1.3; }
    .steps .step.active .lbl, .steps .step.done .lbl { color: var(--ink); font-weight: 600; }
    .steps .bar { flex: 1; height: 1px; background: var(--line-strong); margin-top: 12px;}
    .empty p { font-size: var(--text-sm); color: var(--muted); margin: 12px auto 0; max-width: 340px; line-height: 1.55; }

    /* Group studio: a seat rail is the visual signature and the actual capacity. */
    .class-shell { min-height: 100dvh; background: var(--paper); color: var(--ink); padding-bottom: calc(92px + var(--safe-bottom)); }
    .class-main { max-width: 980px; margin: 0 auto; padding: 32px 20px 72px; }
    .class-kicker { color: var(--sage-deep); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
    .class-title { color: var(--ink); font-size: clamp(30px, 6vw, 58px); line-height: 1.02; letter-spacing: -.045em; margin: 12px 0 12px; max-width: 760px;}
    .class-lede { color: var(--muted); line-height: 1.7; max-width: 640px; }
    .class-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
    .class-card { display: block; color: inherit; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px;}
    .class-card h2 { margin: 12px 0 4px; font-size: 20px; color: var(--ink); }
    .class-meta { color: var(--muted); font-size: 13px; line-height: 1.7; }
    .class-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 20px; }
    .class-badge { background: var(--sage-soft); color: var(--sage-deep); padding: 4px 8px; font-size: 11px; font-weight: 700; }
    .seat-pips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 180px; }
    .seat-pips i { width: 10px; height: 10px; display: block; background: var(--surface-3); border: 1px solid var(--line-strong); }
    .seat-pips i.filled { background: var(--sage); border-color: var(--sage); }
    .class-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; margin-top: 20px; }
    .class-panel h2 { margin: 0 0 16px; font-size: 18px; }
    .class-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
    .class-button { border: 0; border-radius: var(--radius-tile); background: var(--action); color: var(--action-ink); font: inherit; font-weight: 700; padding: 12px 20px; cursor: pointer; text-decoration: none; }
    .class-button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
    .class-button.danger { background: var(--danger); }
    .class-field { display: grid; gap: 8px; margin-top: 16px; }
    .class-field label { font-size: 12px; font-weight: 700; }
    .class-field select { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); padding: 12px; font: inherit; }
    .class-error { color: var(--danger); font-size: 13px; margin-top: 12px; }
    .class-roster { width: 100%; border-collapse: collapse; }
    .class-roster th, .class-roster td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); font-size: 13px; }
    @media(max-width:700px){ .class-grid { grid-template-columns: 1fr; } .class-main { padding: 24px 16px 56px; } }
  .ab-hero h1 { color: var(--ink);}
  .ab-hero p { font-size: 17px; line-height: 1.6;}

  .match { position: relative; width: 100%; max-width: 460px; height: 210px; margin: 0 auto; }
  .match-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .match-line { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .match-line--dash { stroke-dasharray: 5 5; }
  .mp { display: flex; flex-direction: column; align-items: center; gap: 12px; flex-shrink: 0; }
  .match-node { position: absolute; transform: translate(-50%, -50%); }
  .match-node--a { left: 12%; top: 20%; }
  .match-node--b { left: 88%; top: 20%; }
  .match-node--uspark { left: 50%; top: 88%; }
  .mp-dot { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--action-ink);}
  .mp span { font-size: 12px; font-weight: 600; letter-spacing: 0.4px; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
  .mp-spark { position: relative; z-index: 1; width: 48px; height: 48px; background: var(--surface); border: 1px solid var(--sage); display: flex; align-items: center; justify-content: center; }
  .mp-spark .signal-mark { width: 26px; height: 26px; }

  /* Story */
  .ab-story { margin-top: 20px;}
  .ab-story h2 { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.4px; margin: 12px 0 16px; }
  .ab-story p { font-size: 15px; line-height: 1.75; margin-bottom: 16px;}
  .ab-story p:last-child { margin-bottom: 0; }
  .ab-story strong { color: var(--ink); font-weight: 600; }

  /* Values */
  .ab-vals { margin-top: 44px; }
  .ab-vals > h2 { text-align: center; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.5px; margin: 12px 0 32px; }
  .val-grid { display: grid; grid-template-columns: repeat(2, 1fr);}
  .val { min-width: 0;}
  .val-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 21px; margin-bottom: 16px;}
  .val h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .val p { font-size: 14px; color: var(--muted); line-height: 1.6; }

  /* Funding note */
  .ab-fund { margin-top: 20px; padding: 28px 28px; display: flex; gap: 20px; align-items: flex-start;}
  .ab-fund .spark { color: var(--action); font-size: 26px; flex-shrink: 0; line-height: 1.2; }
  .ab-fund h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .ab-fund p { font-size: 14px; color: var(--muted); line-height: 1.65; }
  .ab-fund a { color: var(--action); font-weight: 600; }

  /* CTA */
  .ab-cta { text-align: center; margin-top: 52px;}
  .ab-cta h2 { font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.5px; margin-bottom: 8px; }
  .ab-cta p { font-size: 15px; color: var(--muted); margin-bottom: 24px; }
  .ab-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  @media (max-width: 720px) {
    .ab-hero { padding: 36px 0 28px; }
    .ab-hero h1 { font-size: 31px; }
    .ab-story { padding: 28px 24px; }
    .val-grid { grid-template-columns: 1fr; }
    .match { height: 180px; }
    .mp-dot { width: 56px; height: 56px; font-size: 20px; }
  }
  .status-chip.pending { background: var(--warning-soft); color: var(--warning); }

  .pending-banner { display: flex; align-items: center; gap: 8px; background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-tile); padding: 12px 16px; font-size: 13px; font-weight: 500; }
  .pending-banner i { font-size: 17px; }
  .btn-edit { background: var(--lotus-soft); color: var(--action); }
  .btn-edit:hover { background: var(--surface-3); }
  .btn-approve { background: var(--sage-soft); color: var(--sage-deep); }
  .btn-approve:hover { background: var(--sage-soft); }
  .btn-reject { background: var(--danger-soft); color: var(--danger); }
  .btn-reject:hover { background: var(--danger-soft); }

  /* Create form */
  .create-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
  .cf-group { display: flex; flex-direction: column; gap: 4px; }
  .cf-group label { font-size: 11px; font-weight: 600; color: var(--muted); }
  .cf-group input {
    font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-tile);
    padding: 8px 12px; background: var(--surface-2); color: var(--ink); outline: none;
    min-width: 150px;
  }
  .cf-group input:focus { border-color: var(--action); }
  .btn-create {
    background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile);
    padding: 8px 20px; font-size: 14px; font-weight: 500; cursor: pointer; min-height: 38px;
    font-family: inherit;
  }
  .btn-create:hover { background: var(--action-hover); }

  /* inline edit inputs inside the table */
  .adcell-input {
    font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius-tile);
    padding: 8px 8px; background: var(--surface-2); color: var(--ink); outline: none; width: 100%;
  }
  .adcell-input:focus { border-color: var(--action); }

  @media (max-width: 600px) { .adgreet { padding: 20px 16px 12px; } .adbody { padding: 0 16px 40px; } .adtable { font-size: 12px; } }

  .is-wrap { max-width:960px; margin:0 auto; padding:32px 24px 56px; }
  .is-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
  .is-head h1 { color:var(--ink); font-size:27px; letter-spacing:-.03em; }
  .is-head p { color:var(--muted); font-size:13px; margin-top:4px; }
  .is-counts { display:flex; gap:8px; }
  .is-count { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); color:var(--muted); font-size:11px; }
  .is-count b { color:var(--ink); font-size:16px; margin-right:4px; }
  .is-tabs { display:flex; gap:8px; padding:12px; margin-bottom:12px; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); }
  .is-tab { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-tile); color:var(--muted); text-decoration:none; font-size:12px; }
  .is-tab.on { border-color:var(--sage-deep); background:var(--sage-soft); color:var(--sage-deep); font-weight:700; }

  .is-list { display:grid; gap:8px; }
  .is-row { position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:12px; align-items:center; padding:16px;
            border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); transition:border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
  .is-row:hover { border-color:var(--line-strong); background:var(--surface-2); }
  .is-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--sage-soft); color:var(--sage-deep); font-size:17px; }
  .is-icon.closed { background:var(--lotus-soft); color:var(--action); }
  .is-main { min-width:0; }
  .is-title { display:block; overflow:hidden; color:var(--ink); font-size:14px; font-weight:750; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
  .is-title::after { content:""; position:absolute; inset:0; border-radius:var(--radius-tile); }
  .is-title:focus-visible::after { outline:3px solid color-mix(in oklch, var(--lotus) 50%, transparent); outline-offset:2px; }
  .is-meta { margin-top:4px; color:var(--muted); font-size:11px; }
  .is-number { color:var(--muted-2); font-weight:500; }
  .is-impact { display:flex; gap:8px; }
  .is-impact span { min-width:60px; padding:8px 8px; border-radius:var(--radius-tile); background:var(--paper); color:var(--muted); text-align:center; font-size:10px; }
  .is-impact b { display:block; color:var(--ink); font-size:14px; }
  .is-empty { padding:48px 20px; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); color:var(--muted); text-align:center; }
  .is-empty i { display:block; margin-bottom:8px; color:var(--sage-deep); font-size:30px; }
  .is-pages { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  .is-pages a { padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); color:var(--action); text-decoration:none; font-size:12px; }

  .is-back { display:inline-flex; align-items:center; gap:4px; margin-bottom:16px; color:var(--muted); text-decoration:none; font-size:12px; }
  .is-detail-head { padding-bottom:20px; border-bottom:1px solid var(--line); }
  .is-detail-head h1 { max-width:800px; color:var(--ink); font-size:28px; line-height:1.2; letter-spacing:-.03em; overflow-wrap:anywhere; }
  .is-detail-head h1 span { color:var(--muted-2); font-weight:450; }
  .is-detail-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:12px; color:var(--muted); font-size:12px; }
  .is-state { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:var(--radius-tile); background:var(--sage-soft); color:var(--sage-deep); font-weight:750; }
  .is-state.closed { background:var(--lotus-soft); color:var(--action); }
  .is-detail-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; margin-top:16px; }
  .is-detail-actions button, .is-edit summary { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:var(--radius-tile); font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
  .is-detail-actions button { border:0; background:var(--sage-soft); color:var(--sage-deep); }
  .is-detail-actions button.close { background:var(--lotus-soft); color:var(--action); }
  .is-edit summary { list-style:none; border:1px solid var(--line); color:var(--muted); }
  .is-edit summary::-webkit-details-marker { display:none; }
  .is-edit[open] { flex-basis:100%; }
  .is-edit form { display:flex; gap:8px; max-width:680px; margin-top:8px; }
  .is-edit input { flex:1; min-width:0; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); color:var(--ink); font:inherit; }

  .is-reports-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
  .is-reports-head h2 { color:var(--ink); font-size:16px; }
  .is-reports { display:grid; gap:12px; }
  .is-report { display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; }
  .is-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:var(--radius-tile); color:var(--action-ink); font-size:11px; font-weight:800; }
  .is-report-card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-tile); background:var(--surface); }
  .is-report-top { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:11px; }
  .is-report-top b { color:var(--ink); }
  .is-report-top a { margin-left:auto; color:var(--action); text-decoration:none; }
  .is-report-body { padding:12px; color:var(--ink); font-size:14px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
  @media (max-width:900px) { .is-wrap { padding:20px 16px 44px; }
    .is-head { flex-direction:column; } .is-row { grid-template-columns:28px minmax(0,1fr); }
    .is-impact { grid-column:2; } .is-detail-head h1 { font-size:23px; }
  }
  .adbody { max-width: 720px;}
  .bccard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; }
  .bccard textarea { width: 100%; min-height: 160px; padding: 16px; font-family: inherit; font-size: 14px; line-height: 1.55; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius-tile); resize: vertical; box-sizing: border-box; }
  .bccard textarea:focus { outline: none; border-color: var(--action); }
  .bc-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
  .bc-send { background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 12px 24px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; }
  .bc-note { font-size: 13px; color: var(--muted); }
  .bc-ok { font-size: 14px; color: var(--sage-deep); font-weight: 500; }
  .bc-err { font-size: 14px; color: var(--danger); font-weight: 500; }
  @media (max-width: 600px) { .adgreet { padding: 20px 16px 12px; } .adbody { padding: 0 16px 40px; } }
  .fbcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); overflow: hidden; }
  .fbrow { display: flex; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--surface-2); align-items: flex-start; }
  .fbrow:last-child { border-bottom: none; }
  .fb-kind-chip { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-tile); text-transform: uppercase; letter-spacing: .4px; background: var(--lotus-soft); color: var(--action); }
  .fb-kind-chip.trial { background: var(--warning-soft); color: var(--warning); }
  .fb-meta { display: flex; flex-wrap: wrap; gap: 4px 12px;}
  .fb-flag { font-size: 11px; font-weight: 600; color: var(--danger); }
  .fb-actions { display: flex; gap: 8px; flex-shrink: 0; }
  .fb-actions button { font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius-tile); border: 1px solid var(--line); cursor: pointer; font-family: inherit; background: var(--surface); }
  .fb-actions .approve { color: var(--sage-deep); border-color: var(--sage-soft); }
  .fb-actions .reject { color: var(--danger); border-color: var(--danger-soft); }
  @media (max-width: 600px) { .adgreet { padding: 20px 16px 12px; } .adbody { padding: 0 16px 40px; } }

  .si-wrap { max-width:1040px; margin:0 auto; padding:28px 24px 52px; }
  .si-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
  .si-head h1 { font-size:25px; color:var(--ink); letter-spacing:-.02em; }
  .si-head p { color:var(--muted); font-size:13px; margin-top:4px; }
  .si-counts { display:flex; gap:8px; flex-shrink:0; }
  .si-count { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-tile); padding:8px 12px; font-size:12px; color:var(--muted); }
  .si-count b { color:var(--ink); font-size:16px; margin-right:4px; }
  .si-issues { display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:var(--radius-tile); background:var(--sage-soft); color:var(--sage-deep); font-size:12px; font-weight:700; text-decoration:none; }

  .si-tools { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-tile); padding:16px; margin-bottom:16px; }
  .si-tabs,.si-types { display:flex; gap:8px; flex-wrap:wrap; }
  .si-types { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .si-tab { text-decoration:none; color:var(--muted); border:1px solid var(--line); border-radius:var(--radius-tile); padding:8px 12px; font-size:12px; }
  .si-tab.on { color:var(--action); border-color:var(--action); background:var(--lotus-soft); font-weight:600; }
  .si-search { display:flex; gap:8px; margin-top:12px; }
  .si-search input { flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--radius-tile); padding:8px 12px; font:inherit; color:var(--ink); }
  .si-search button { border:0; border-radius:var(--radius-tile); background:var(--action); color:var(--action-ink); padding:0 16px; font:inherit; font-size:13px; cursor:pointer; }

  .si-list { display:flex; flex-direction:column; gap:8px; }
  .si-row { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-tile); padding:12px 16px; cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
  .si-row:hover { border-color:var(--line-strong); background:var(--surface-2); }
  .si-row.unread { background:var(--lotus-soft); }
  .si-avatar { width:44px; height:44px; border-radius:var(--radius-tile); color:var(--action-ink); display:flex; align-items:center; justify-content:center; font-weight:700; }
  .si-main { min-width:0; }
  .si-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .si-name { color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; }
  .si-name::after { content:""; position:absolute; inset:0; border-radius:var(--radius-tile); }
  .si-name:focus-visible::after { outline:3px solid color-mix(in oklch, var(--lotus) 50%, transparent); outline-offset:2px; }
  .si-meta { color:var(--muted-2); font-size:11px; }
  .si-preview { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:4px; }
  .si-chip { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:4px 8px; border-radius:var(--radius-tile); background:var(--lotus-soft); color:var(--action); }
  .si-chip.bug { background:var(--danger-soft); color:var(--danger); } .si-chip.idea { background:var(--warning-soft); color:var(--warning); }
  .si-chip.normal { background:var(--surface-2); color:var(--muted); }
  .si-unread { background:var(--action); color:var(--action-ink); min-width:19px; height:19px; padding:0 4px; border-radius:var(--radius-tile); display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
  .si-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
  .si-time { color:var(--muted-2); font-size:11px; white-space:nowrap; }
  .si-side form { position:relative; z-index:1; }
  .si-action { border:0; border-radius:var(--radius-tile); padding:4px 12px; font:inherit; font-size:11px; cursor:pointer; background:var(--sage-soft); color:var(--sage-deep); }
  .si-action.reopen { background:var(--lotus-soft); color:var(--action); }
  .si-empty { text-align:center; color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-tile); padding:48px 20px; }
  .si-pages { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
  .si-pages a { text-decoration:none; color:var(--action); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-tile); padding:8px 12px; font-size:12px; }
  @media (max-width:900px) { .si-wrap { padding:20px 16px 44px; }
    .si-head { flex-direction:column; } .si-row { grid-template-columns:auto minmax(0,1fr); }
    .si-side { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  }
  .adgreet p { font-size: 14px; color: var(--muted); margin-top: 4px;}

  .status-chip { display: inline-block; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-tile);}
  .status-chip.active { background: var(--sage-soft); color: var(--sage-deep);}
  .status-chip.inactive { background: var(--danger-soft); color: var(--danger);}

  .rating { font-weight: 600; color: var(--ink); white-space: nowrap; }
  .rating i { color: var(--action); font-size: 13px; }
  .rating small { color: var(--muted-2); font-weight: 400; }
  .rating.rating-low { color: var(--danger); }
  .rating.rating-low i { color: var(--danger); }
  .rating-none { color: var(--muted-2); }

  .btn-sm { font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: var(--radius-tile); border: none; cursor: pointer; font-family: inherit;}
  .btn-deactivate { background: var(--danger-soft); color: var(--danger);}
  .btn-deactivate:hover { background: var(--danger-soft);}
  .btn-reactivate { background: var(--sage-soft); color: var(--sage-deep);}
  .btn-reactivate:hover { background: var(--sage-soft);}

  @media (max-width: 600px) { .adgreet { padding: 20px 16px 12px; } .adbody { padding: 0 16px 40px; } .adtable { font-size: 12px; } }

/* Hallmark · macrostructure: Index-First · tone: soft-playful · anchor hue: indigo
 * theme: locked USpark Indigo Signal · enrichment: none · nav: existing N13 · footer: existing Ft5
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
.cat-page {
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.cat-page-head {
  display: grid;
  gap: var(--space-xs);
  margin-block-end: var(--space-lg);
}

.cat-page-head h1 {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.cat-page-head p {
  max-width: var(--measure-copy);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.cat-family-nav {
	display: flex;
	overflow-x: auto;
	gap: var(--space-xs);
	padding-block-end: var(--space-xl);
	scroll-snap-type: inline proximity;
	scrollbar-width: none;
}

.cat-family-nav::-webkit-scrollbar { display: none; }

.cat-family-nav a {
	display: inline-flex;
	flex: 0 0 auto;
  min-height: var(--control-h);
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding-inline: var(--space-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	scroll-snap-align: start;
}

.cat-family-nav a:focus-visible,
.cat-subject:focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
}

.cat-family-nav a.is-active,
.cat-family-nav a[aria-current="page"] {
  border-color: var(--action);
  background: var(--lotus-soft);
  color: var(--action);
}

.subject-groups,
#categoryChips {
  display: grid;
  gap: var(--space-md);
}

.subject-group {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  overflow: clip;
}

.subject-group summary {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.subject-group summary::-webkit-details-marker { display: none; }
.subject-group summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subject-group[open] summary { border-block-end: 1px solid var(--line); }
.subject-group-meta { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-2xs); color: var(--muted); font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.subject-group[open] .subject-group-meta .ti { transform: rotate(180deg); }
.subject-group summary:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: -3px; }

.subject-group .chips {
  padding: var(--space-sm);
}

.subject-proposal {
  display: grid;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--line);
}

.subject-proposal-head h3 { margin: 0; color: var(--ink); font-size: var(--text-base); }
.subject-proposal-head p { max-width: 65ch; margin: var(--space-2xs) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.subject-proposal-fields { display: grid; gap: var(--space-sm); min-width: 0; }
.subject-proposal-fields .field { min-width: 0; margin: 0; }
.subject-proposal-fields button { min-height: var(--control-h); white-space: nowrap; }

.taxonomy-admin {
  display: grid;
  gap: var(--space-lg);
}

.admin-table-scroll {
  overflow-x: auto;
}

.taxonomy-admin select,
.subject-proposal select {
  min-height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}

.taxonomy-admin :is(button, input, select):focus-visible,
.subject-proposal :is(button, input, select):focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
}

.cat-family-nav a:active,
.cat-subject:active {
  transform: translateY(1px);
}

.cat-family-nav a[aria-disabled="true"],
.cat-subject[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.cat-groups {
  display: grid;
  gap: var(--space-xl);
}

.cat-group {
  scroll-margin-block-start: var(--space-lg);
  border-block-start: 1px solid var(--line);
}

.cat-group:target {
  border-block-start-color: var(--action);
}

.cat-group-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-md);
}

.cat-group-head > .ti {
  color: var(--action);
  font-size: var(--text-lg);
}

.cat-group-head h2 {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cat-group-head span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.cat-subjects {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-end: 1px solid var(--line);
}

.cat-subject {
  display: grid;
  min-height: 3.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  border-block-start: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
}

.cat-subject > .ti:first-child {
  color: var(--action);
  font-size: var(--text-lg);
}

.cat-subject > .ti:last-child {
  color: var(--muted-2);
  font-size: var(--text-base);
}

.cat-empty {
  padding: var(--space-2xl) var(--space-md);
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .cat-family-nav a:hover {
    border-color: var(--action);
    color: var(--action);
  }

  .cat-subject:hover {
    background: var(--lotus-soft);
  }
}

@media (min-width: 40rem) {
  .cat-page {
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
  }

  .cat-page-head {
    margin-block-end: var(--space-xl);
  }

	.cat-family-nav {
		flex-wrap: wrap;
		overflow-x: visible;
	}

  .cat-family-nav a {
    padding-inline: var(--space-sm);
    font-size: var(--text-sm);
  }

  .cat-subjects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cat-subject:nth-child(even) {
    border-inline-start: 1px solid var(--line);
  }

  .subject-groups,
  #categoryChips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subject-proposal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject-proposal-category { grid-column: 1 / -1; }
  .subject-proposal-fields > button { grid-column: 2; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-family-nav a:active,
  .cat-subject:active {
    transform: none;
  }

  .cat-subject {
    transition-duration: var(--duration-instant);
  }
}

  .ct-head h1 { color: var(--ink); margin: 16px 0 12px;}
  .ct-head p { font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 480px; margin: 0 auto; }

  /* Primary action — send a message via feedback */
  .ct-primary { margin-top: 36px; background: var(--ink); border-radius: var(--radius-tile); padding: 36px 36px; color: var(--action-ink); display: flex; align-items: center; gap: 28px; overflow: hidden; position: relative; }
  .ct-primary .spark-big { font-size: 60px; color: var(--sage); line-height: 1; flex-shrink: 0; }
  .ct-primary h2 { font-size: 21px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.3px; }
  .ct-primary p { font-size: 14px; color: var(--line-strong); line-height: 1.6; margin-bottom: 16px; }
  .ct-primary .go { background: var(--action); color: var(--action-ink); font-size: 14px; font-weight: 600; padding: 12px 24px; border-radius: var(--radius-tile); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
  .ct-primary .go:hover { background: var(--spark); }

  /* Channel grid */
  .ct-chans { display: grid; gap: 16px; margin-top: 16px;}
  .chan { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px 20px; min-width: 0; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
  .chan:hover { border-color: var(--sage); background: var(--sage-soft); }
  .chan-ic { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;}
  .chan-ic.mail { background: var(--lotus-soft); color: var(--action); }
  .chan-t { min-width: 0; }
  .chan-t .k { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted-2); }
  .chan-t .v { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Response expectation */
  .ct-note { margin-top: 24px; display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--sage); border-radius: var(--radius-tile); padding: 20px 24px; }
  .ct-note .spark { color: var(--action); font-size: 22px; flex-shrink: 0; line-height: 1.1; }
  .ct-note p { font-size: 14px; color: var(--muted); line-height: 1.65; }
  .ct-note strong { color: var(--ink); font-weight: 600; }

  /* Secondary links */
  .ct-more { text-align: center; margin-top: 32px; font-size: 14px; color: var(--muted); }
  .ct-more a { color: var(--action); font-weight: 600; }
  .ct-more .dot { color: var(--line-strong); margin: 0 8px; }

  @media (max-width: 680px) {
    .ct-head { padding: 36px 0 4px; }
    .ct-head h1 { font-size: 30px; }
    .ct-primary { flex-direction: column; text-align: center; padding: 28px 24px; gap: 16px; }
    .ct-chans { grid-template-columns: 1fr; }
  }

/* conversation.html */
.cv-wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column;
             height: 100dvh; background: var(--paper); }

  /* ── Mentor header ── */
  .cv-head { display: flex; min-height: 4.5rem; align-items: center; gap: 12px; background: var(--surface);
             padding: calc(12px + var(--safe-top)) 16px 12px; position: sticky; top: 0; z-index: 5;
             border-bottom: 1px solid var(--line); }
  .cv-back { width: 38px; height: 38px; border-radius: var(--radius-tile); background: var(--lotus-soft); color: var(--ink);
             text-decoration: none; font-size: 19px; display: flex; align-items: center; justify-content: center;
             flex-shrink: 0; transition: background var(--duration-fast); }
  .cv-back:hover { background: var(--surface-3); }
  .cv-ava { position: relative; flex-shrink: 0; }
  .cv-avatar { width: 42px; height: 42px; border-radius: var(--radius-tile); color: var(--action-ink); display: flex;
               align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
  .cv-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: var(--radius-tile);
              background: var(--action); border: 2px solid var(--surface); display: flex; align-items: center; justify-content: center; color: var(--action-ink); }
  .cv-badge svg { font-size: 11px; }
  .cv-id { min-width: 0; line-height: 1.2; }
  .cv-name { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
  .cv-name, .cv-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cv-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }
  .cv-support-action { margin-left:auto; }
  .cv-support-action button { border:0; border-radius:var(--radius-tile); padding:8px 12px; font:inherit; font-size:11px; cursor:pointer; background:var(--sage-soft); color:var(--sage-deep); }
  .cv-support-action button.reopen { background:var(--lotus-soft); color:var(--action); }

  /* ── Thread ── */
  .mt-thread { flex: 1; overflow-y: auto; padding: 24px 20px 12px; display: flex; flex-direction: column; gap: 4px;
               background: transparent; }
  .mt-thread { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
  .mt-loading { display: flex; margin: auto; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
  .mt-loading i { color: var(--action); font-size: 18px; animation: mtSpin .8s linear infinite; }
  @keyframes mtSpin { to { transform: rotate(360deg); } }

  .mt-empty { margin: auto; text-align: center; padding: 24px; max-width: 320px; }
  .mt-empty-spark { display: block; font-size: 44px; color: var(--action); margin: 0 auto 20px; }
  .mt-empty h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
  .mt-empty p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

  .mt-row { display: flex; margin-top: 8px; }
  .mt-row.mine { justify-content: flex-end; }
  .mt-bubble { position: relative; max-width: min(76%, 34rem); padding: 12px 16px; font-size: 15px; line-height: 1.5;
               overflow-wrap: anywhere; border-radius: var(--radius-card); }
  .mt-message-text { white-space: pre-wrap; }
  /* Incoming messages use a quiet trusted surface. */
  .mt-row.theirs .mt-bubble { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
  /* Outgoing messages carry the accessible Lotus action color. */
  .mt-row.mine .mt-bubble { background: var(--action); color: var(--action-ink); }
  .mt-time { display: block; margin-top: 4px; font-size: 10px; opacity: .55; text-align: right; }
  .mt-row.mine .mt-time { opacity: .7; }

  /* ── Type chip on a tagged incoming message (feedback/bug/idea) ── */
  .mt-chip { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
             padding: 0 8px; border-radius: var(--radius-tile); margin-bottom: 4px; }
  .mt-chip.bug { background: var(--danger-soft); color: var(--danger); }
  .mt-chip.idea { background: var(--warning-soft); color: var(--warning); }
  .mt-chip.feedback { background: var(--lotus-soft); color: var(--action); }
  .mt-bug-action { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-top:8px; white-space:normal; }
  .mt-bug-action button, .mt-resolved { display:inline-flex; align-items:center; gap:4px; border-radius:var(--radius-tile);
                                       padding:4px 8px; font:inherit; font-size:10px; font-weight:700; line-height:1.2; }
  .mt-bug-action button { border:1px solid transparent; cursor:pointer; background:var(--sage-soft); color:var(--sage-deep); }
  .mt-bug-action button:hover { border-color:var(--sage-deep); }
  .mt-bug-action button:disabled { opacity:.55; cursor:wait; }
  .mt-bug-action button.reopen { background:transparent; color:var(--muted); }
  .mt-resolved { background:var(--sage-soft); color:var(--sage-deep); }
  .mt-issue-picker { font-size:10px; }
  .mt-issue-picker summary { list-style:none; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; cursor:pointer;
                             border:1px solid var(--line); border-radius:var(--radius-tile); color:var(--muted); font-weight:700; }
  .mt-issue-picker summary::-webkit-details-marker { display:none; }
  .mt-issue-picker[open] { flex-basis:100%; }
  .mt-issue-picker[open] summary { float:right; }
  .mt-issue-panel { clear:both; display:grid; gap:8px; padding-top:8px; }
  .mt-issue-panel form { display:grid; gap:4px; }
  .mt-issue-panel label { color:var(--muted); font-size:10px; }
  .mt-issue-panel form > div { display:flex; gap:4px; }
  .mt-issue-panel input, .mt-issue-panel select { min-width:0; flex:1; border:1px solid var(--line); border-radius:var(--radius-tile);
                                                  padding:8px 8px; background:var(--paper); color:var(--ink); font:inherit; font-size:11px; }
  .mt-issue-panel button { flex-shrink:0; }
  .mt-issue-ref { display:flex; align-items:center; gap:8px; margin-top:8px; padding:8px 8px; border-radius:var(--radius-tile);
                  background:var(--sage-soft); white-space:normal; }
  .mt-issue-ref > a { min-width:0; flex:1; display:flex; align-items:center; gap:4px; color:var(--sage-deep); text-decoration:none; font-size:10px; }
  .mt-issue-ref > a b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mt-issue-state { flex-shrink:0; color:var(--sage-deep); font-size:9px; font-weight:800; text-transform:uppercase; }
  .mt-issue-state.closed { color:var(--muted); }
  .mt-unlink { flex-shrink:0; border:0; padding:4px; background:transparent; color:var(--muted); cursor:pointer; }
  .mt-unlink:hover { color:var(--danger); }

  /* ── Composer ── */
  .cv-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 12px 16px calc(12px + var(--safe-bottom));
             background: var(--surface); border-top: 1px solid var(--line); }
  /* Message-type tabs — only shown when writing to support (an admin). */
  .cv-types { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
  .cv-type input { position: absolute; opacity: 0; width: 0; height: 0; }
  .cv-type label { display: inline-flex; min-height: 2.5rem; align-items: center; gap: 6px; font-size: 12px; padding: 4px 12px; border-radius: var(--radius-control);
                   border: 1px solid var(--line); color: var(--muted); background: var(--surface); cursor: pointer;
                   transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast); }
  .cv-type input:checked + label { border-color: var(--action); background: var(--surface-2); color: var(--action); font-weight: 600; }
  .cv-input { min-width: 0; min-height: 46px; flex: 1; border: 1px solid var(--line); border-radius: var(--radius-control); padding: 12px 16px; font-size: 16px;
              background: var(--paper); outline: none; color: var(--ink); transition: border-color var(--duration-fast), background var(--duration-fast); }
  .cv-input::placeholder { color: var(--muted-2); }
  .cv-input:focus { border-color: var(--action); background: var(--surface); }
  .cv-send { flex-shrink: 0; width: 46px; height: 46px; border: none; border-radius: var(--radius-control); cursor: pointer;
             color: var(--action-ink); background: var(--action);
             display: flex; align-items: center; justify-content: center;
             box-shadow: 0 4px 14px -4px transparent; transition: transform var(--duration-fast), box-shadow var(--duration-fast); }
  .cv-send i { font-size: 20px; }
  .cv-send:hover { background: var(--action-hover); }
  .cv-send:active { transform: scale(.92); }
  .cv-send:focus-visible { outline: 3px solid color-mix(in oklch, var(--lotus) 50%, transparent); outline-offset: 2px; }

  @media (prefers-reduced-motion: no-preference) {
    .mt-row:last-child .mt-bubble { animation: mtIn var(--duration-medium) var(--ease-enter); }
    @keyframes mtIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
  }
  @media (prefers-reduced-motion: reduce) { .mt-loading i { animation: none; } }
  /* Full-screen chat owns the bottom edge — hide the global feedback FAB here. */
  .fb-fab { display: none;}
  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }
  .adgreet { padding: 28px 32px 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;}
  .adgreet h1 { font-size: 22px; font-weight: 600; color: var(--ink);}
  .adgreet .asof { font-size: 12px; color: var(--muted-2); }
  .adbody { padding: 0 32px 40px; display: flex; flex-direction: column; gap: 20px;}

  /* KPI tiles */
  .adstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .adstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px 20px; }
  .adstat-label { font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .5px; }
  .adstat-num { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 8px; }
  .adstat-num .unit { font-size: 17px; color: var(--action); font-weight: 600; margin-left: 4px; }
  .adstat-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
  .adstat-sub.up { color: var(--sage); font-weight: 600; }

  /* Layout rows */
  .adrow { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
  .adcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px 24px; min-width: 0;}
  .adcard--warn { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); color: var(--ink); }
  .adcard--warn p { margin: 0; font-size: 13px; }
  .adcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;}
  .adcard-head h3 { font-size: 15px; font-weight: 600; color: var(--ink);}
  .adcard-head a { font-size: 13px; color: var(--action); text-decoration: none; }
  .adcard-sub { font-size: 12px; color: var(--muted-2); margin-bottom: 20px; }
  .adprov { list-style: none; counter-reset: p; margin: 0; padding: 0; }
  .adprov li { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--surface-2); font-size: 14px; color: var(--ink); }
  .adprov li:last-child { border-bottom: none; }
  .adprov li::before { counter-increment: p; content: counter(p); color: var(--muted-2); font-weight: 600; width: 20px; }
  .adprov li span { flex: 1; }
  .adprov li b { color: var(--action); font-weight: 600; }
  .admoney { display: flex; gap: 32px; flex-wrap: wrap; }
  .adcount-badge { font-size: 11px; font-weight: 700; color: var(--warning); background: var(--warning-soft); padding: 4px 8px; border-radius: var(--radius-tile); }
  .adcount-badge.zero { color: var(--sage-deep); background: var(--sage-soft); }

  /* Lesson funnel — the signature */
  .funnel-group + .funnel-group { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
  .funnel-title { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 16px; }
  .funnel { display: flex; flex-direction: column; }
  .funnel-stage { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 16px; }
  .funnel-label { font-size: 13px; font-weight: 500; color: var(--ink); }
  .funnel-track { background: var(--surface-2); border-radius: var(--radius-tile); height: 34px; position: relative; overflow: hidden; }
  .funnel-bar { height: 100%; border-radius: var(--radius-tile); min-width: 2px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px;}
  .funnel-bar span { font-size: 13px; font-weight: 700; color: var(--action-ink); }
  .funnel-conv { grid-column: 2; font-size: 11px; color: var(--muted-2); padding: 4px 0 4px 4px; display: flex; align-items: center; gap: 4px; }
  .funnel-conv i { font-size: 13px; color: var(--line-strong); }
  @media (prefers-reduced-motion: reduce) { .funnel-bar { transition: none; } }
  /* Signup trend sparkline */
  .spark { display: flex; align-items: flex-end; gap: 8px; height: 140px; margin-top: 8px; }
  .spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
  .spark-bar { width: 100%; max-width: 34px; background: var(--action); border-radius: var(--radius-tile) 0 0; min-height: 3px;}
  .spark-n { font-size: 12px; font-weight: 700; color: var(--ink); }
  .spark-x { font-size: 10px; color: var(--muted-2); white-space: nowrap; }
  /* Tutor supply health */
  .supply { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 4px; }
  .supply .adstat-num { font-size: 26px; }
  /* Rating histogram */
  .histo { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
  .histo-row { display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 12px; }
  .histo-star { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 4px; }
  .histo-track { background: var(--surface-2); border-radius: var(--radius-tile); height: 18px; overflow: hidden; }
  .histo-bar { height: 100%; background: var(--action); border-radius: var(--radius-tile); min-width: 2px;}
  .histo-n { font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
  @media (prefers-reduced-motion: reduce) { .spark-bar, .histo-bar { transition: none; } }

  /* Tables */
  .adtable { width: 100%; border-collapse: collapse;}
  .adtable th { font-size: 11px; font-weight: 600; color: var(--muted-2); text-transform: uppercase; letter-spacing: .5px; text-align: left; padding: 0 0 12px; border-bottom: 1px solid var(--line);}
  .adtable td { font-size: 13px; color: var(--ink-2); padding: 12px 0; border-bottom: 1px solid var(--surface-2); vertical-align: middle;}
  .adtable tr:last-child td { border-bottom: none;}
  .role-chip { display: inline-block; font-size: 11px; font-weight: 500; padding: 4px 8px; border-radius: var(--radius-tile);}
  .role-chip.learner { background: var(--lotus-soft); color: var(--action);}
  .role-chip.tutor { background: var(--sage-soft); color: var(--sage-deep);}
  .role-chip.admin { background: var(--danger-soft); color: var(--danger); }
  .fb-body { min-width: 0; flex: 1;}
  .fb-msg { font-size: 13px; color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
  .fb-meta { font-size: 11px; color: var(--muted-2); margin-top: 4px;}

  .testimonial-queue { display: flex; flex-direction: column; gap: 16px; }
  .testimonial-queue-item { border-bottom: 1px solid var(--line); padding-bottom: 16px; }
  .testimonial-queue-item:last-child { border-bottom: 0; padding-bottom: 0; }
  .testimonial-queue-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
  .testimonial-queue-body { color: var(--ink-2); font-size: 13px; font-style: italic; line-height: 1.55; margin: 8px 0 12px; }
  .testimonial-queue-actions { display: flex; gap: 8px; }
  .testimonial-queue-actions button { border: 0; border-radius: var(--radius-tile); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; }
  .testimonial-approve { background: var(--sage-soft); color: var(--sage-deep); }
  .testimonial-reject { background: var(--danger-soft); color: var(--danger); }

  /* Quick actions */
  .adactions { display: flex; flex-direction: column; gap: 12px; }
  .adaction-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink); text-decoration: none; cursor: pointer; transition: background var(--duration-fast); }
  .adaction-btn:hover { background: var(--paper); }
  .adaction-btn i { font-size: 17px; color: var(--action); }

  .db-empty { line-height: 1.6;}

  @media (max-width: 900px) { .adstats { grid-template-columns: 1fr 1fr; } .adrow { grid-template-columns: 1fr; } }
  @media (max-width: 820px) { }
  @media (max-width: 600px) { .adgreet { padding: 20px 16px 12px; } .adbody { padding: 0 16px 40px; } .funnel-stage { grid-template-columns: 74px 1fr; gap: 12px; } }

  /* Admin overview: operations first, analytics second. */
  .admin-dashboard .adgreet { align-items: flex-end; justify-content: space-between; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
  .admin-dashboard .adgreet h1 { max-width: 14ch; margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; text-wrap: balance; }
  .admin-dashboard .adgreet .asof { padding-bottom: 0.35rem; color: var(--muted); font-size: 0.75rem; }
  .admin-dashboard .adbody { gap: 1.25rem; padding-top: 1.5rem; padding-bottom: 5rem; }
  .admin-dashboard .adstats { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .admin-dashboard .adstat { min-width: 0; padding: 1.25rem clamp(1rem, 2vw, 1.5rem); border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
  .admin-dashboard .adstat:last-child { border-right: 0; }
  .admin-dashboard .adstat-label { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.06em; }
  .admin-dashboard .adstat-num { margin-top: 0.5rem; font-size: clamp(2rem, 4vw, 2.75rem); font-variant-numeric: tabular-nums; letter-spacing: -0.035em; }
  .admin-dashboard .adstat-sub { margin-top: 0.375rem; line-height: 1.45; }
  .admin-dashboard .adstat-sub.up { color: var(--sage-deep); }
  .admin-dashboard .adrow { gap: 1.25rem; }
  .admin-dashboard .adrow--single { grid-template-columns: minmax(0, 1fr); }
  .admin-dashboard .adrow--priority { grid-template-columns: 1.6fr 1fr; }
  .admin-dashboard .adcard { padding: clamp(1.25rem, 2.5vw, 1.75rem); border-radius: var(--radius-card); }
  .admin-dashboard .adcard-head { align-items: baseline; gap: 1rem; margin-bottom: 0.5rem; }
  .admin-dashboard .adcard-head h2 { margin: 0; color: var(--ink); font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
  .admin-dashboard .adcard-head a { min-height: var(--control-h); display: inline-flex; align-items: center; flex: 0 0 auto; font-weight: 700; }
  .admin-dashboard .adcard-sub { max-width: 70ch; margin-bottom: 1.25rem; color: var(--muted); font-size: 0.75rem; line-height: 1.55; }
  .admin-dashboard .adcard--attention { border: 0; background: var(--lotus-soft); }
  .admin-dashboard .adcard--attention .adcard-head h2 { color: var(--lotus-ink); font-size: 1.125rem; }
  .admin-dashboard .adcard--attention .adcard-sub { margin: 0; color: var(--ink-2); font-size: 0.875rem; }
  .admin-dashboard .adcard--attention .adcard-head a { color: var(--action); }
  .admin-dashboard .admoney { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .admin-dashboard .admoney > div,
  .admin-dashboard .supply > div { padding-top: 1rem; border-top: 1px solid var(--line); }
  .admin-dashboard .admoney .adstat-num { overflow-wrap: anywhere; font-size: clamp(1.6rem, 3vw, 2.25rem); }
  .admin-dashboard .adprov li { min-height: 2.75rem; padding-block: 0.625rem; }
  .admin-dashboard .adprov li b,
  .admin-dashboard .adtable td:last-child { font-variant-numeric: tabular-nums; }
  .admin-dashboard .funnel-track { height: 2rem; border-radius: var(--radius-control); }
  .admin-dashboard .funnel-bar { border-radius: var(--radius-control); background: var(--action); }
  .admin-dashboard .funnel-bar.s-accepted { background: var(--lotus); }
  .admin-dashboard .funnel-bar.s-completed { background: var(--sage); }
  .admin-dashboard .funnel-bar.s-reviewed { background: var(--spark); }
  .admin-dashboard .funnel-bar.s-reviewed span { color: var(--ink); }
  .admin-dashboard .funnel-bar span { text-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 28%, transparent); }
  .admin-dashboard .spark-scroll { overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: thin; }
  .admin-dashboard .spark { min-width: 32rem; }
  .admin-dashboard .spark-bar { border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--lotus); }
  .admin-dashboard .spark-x { color: var(--muted); }
  .admin-dashboard .histo-bar { background: var(--lotus); }
  .admin-dashboard .adactions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .admin-dashboard .adaction-btn { min-height: var(--control-h); padding: 0.625rem 0.75rem; border: 0; border-radius: var(--radius-control); background: var(--surface-2); }
  .admin-dashboard .adaction-btn:hover { background: var(--lotus-soft); color: var(--lotus-ink); }
  .admin-dashboard .adaction-btn:focus-visible,
  .admin-dashboard .adcard-head a:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

  @media (max-width: 900px) {
    .admin-dashboard .adrow--priority { grid-template-columns: 1fr; }
  }

  @media (max-width: 600px) {
    .admin-dashboard .adgreet { display: grid; gap: 0.75rem; padding-top: 1.75rem; }
    .admin-dashboard .adgreet h1 { font-size: 2rem; }
    .admin-dashboard .adgreet .asof { padding: 0; }
    .admin-dashboard .adbody { gap: 1rem; padding-top: 1rem; }
    .admin-dashboard .adstats { grid-template-columns: 1fr 1fr; }
    .admin-dashboard .adstat { min-height: 9rem; padding: 1rem; border-bottom: 1px solid var(--line); }
    .admin-dashboard .adstat:nth-child(2n) { border-right: 0; }
    .admin-dashboard .adstat:nth-last-child(-n + 2) { border-bottom: 0; }
    .admin-dashboard .adstat-num { font-size: 2rem; }
    .admin-dashboard .adcard { padding: 1.25rem; }
    .admin-dashboard .adrow--priority .adcard:first-child { order: -1; }
    .admin-dashboard .admoney { grid-template-columns: 1fr; }
    .admin-dashboard .adactions { grid-template-columns: 1fr; }
    .admin-dashboard .funnel-stage { grid-template-columns: minmax(4.5rem, 0.55fr) minmax(0, 1fr); gap: 0.75rem; }
    .admin-dashboard .funnel-label { overflow-wrap: anywhere; }
  }
  .dbprogress-item { margin-bottom: 16px; }
  .dbprogress-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
  .dbprogress-top .name { color: var(--ink); font-weight: 500; }
  .dbprogress-top .pct { color: var(--muted); }
  .dbprogress-bar { height: 7px; background: var(--lotus-soft); border-radius: var(--radius-tile); overflow: hidden; }
  .dbprogress-fill { height: 100%; border-radius: var(--radius-tile); }
  .dbmsg-time { align-self: flex-start;}

  /* How tutors rate you — reputation cards */
  .dbrate { display: flex; align-items: center; gap: 16px; }
  .dbrate-num { font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; line-height: 1; }
  .dbrate-stars { font-size: 15px; color: var(--action); letter-spacing: 1px; }
  .dbrate-count { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

  /* Continue where you left off — resume the live trial */
  .dbcont { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-tile); padding: 16px 20px; }
  .dbcont-av { width: 44px; height: 44px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; color: var(--action-ink); font-weight: 600; font-size: 15px; flex-shrink: 0; }
  .dbcont-info { flex: 1; min-width: 0; }
  .dbcont-subj { font-size: 14px; font-weight: 600; color: var(--ink); }
  .dbcont-student { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
  .dbcont-meta { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .dbcont-pill { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-tile); background: var(--lotus-soft); color: var(--action); }
  .dbcont-btn { background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 8px 16px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }

  /* Saved tutors shortlist */
  .dbsaved { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
  .dbsaved:last-child { border-bottom: none; padding-bottom: 0; }
  .dbsaved-av { width: 40px; height: 40px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; color: var(--action-ink); font-weight: 600; font-size: 14px; flex-shrink: 0; }
  .dbsaved-info { flex: 1; min-width: 0; }
  .dbsaved-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .dbsaved-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dbsaved-rate { font-size: 12.5px; font-weight: 700; color: var(--ink); flex-shrink: 0; }

  /* Referral progress + spending mini-cards */
  .dbpractice-count { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--sage); margin-bottom: 12px; }
  .dbmini { display: flex; align-items: center; gap: 12px; }
  .dbmini-ic { width: 40px; height: 40px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
  .dbmini-num { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.1; }
  .dbmini-num small { font-size: 13px; font-weight: 600; color: var(--muted); }
  .dbmini-label { font-size: 12px; color: var(--muted); margin-top: 0; }

  /* matched tutor suggestions — signature block (feature 004) */
  .sug-head{display:flex; align-items:center; gap:8px; margin:0 4px 12px}
  .sug-head .spark{flex:0 0 auto; display:flex; color:var(--action); font-size:17px}
  .sug-head h2{font-size:16px; font-weight:600; color:var(--ink); margin:0; letter-spacing:-.01em; line-height:1.15}
  .sug-head h2 .sub{display:block; font-size:12px; font-weight:500; color:var(--muted); letter-spacing:0; margin-top:0}

  .sug-list{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-bottom:4px}
  .sug-loading{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:13px; padding:24px 20px}
  .sug-loading .spark{color:var(--action); display:flex}

  .sug-card{
    position:relative; display:flex; gap:12px; align-items:flex-start; overflow:hidden; min-width:0;
    background:var(--surface); border:1px solid var(--line); border-radius: var(--radius-tile);
    padding:16px; box-shadow:var(--shadow-card);
  }
  .sug-cardlink{flex:1; min-width:0; display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:inherit}
  .sug-actions{flex:0 0 auto; align-self:center; display:flex; flex-direction:column; align-items:center; gap:12px}
  .sug-act{
    padding:0; border-radius: var(--radius-tile); display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none; -webkit-tap-highlight-color:transparent;
  }
  /* The primary suggestion action uses the shared button state primitive. */
  .sug-spark{
    width:46px; height:46px; color:var(--action-ink);
    background:var(--action);
    transition:background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
  }
  .sug-spark svg{width:24px; height:24px}
  .sug-spark:hover, .sug-spark:focus-visible{
    background:var(--action-hover);
  }
  .sug-spark:active{transform:scale(.94)}
  /* Skip — deliberately quiet: a hairline ghost that only warms on intent. */
  .sug-skip{
    width:40px; height:40px; background:var(--surface); border:1px solid var(--line);
    color:var(--muted-2); transition:color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
  }
  .sug-skip:hover, .sug-skip:focus-visible{color:var(--muted); border-color:var(--line); background:var(--lotus-soft)}
  @media (prefers-reduced-motion:reduce){
    .sug-spark, .sug-spark svg{transition:none}
    .sug-spark:hover, .sug-spark:focus-visible{transform:none}
    .sug-spark:hover svg, .sug-spark:focus-visible svg{transform:none}
  }
  .sug-card::before{content:none}
  .sug-card:hover{border-color:var(--action)}

  .sug-ava{width:50px; height:50px; flex:0 0 50px; border-radius: var(--radius-tile); display:flex; align-items:center; justify-content:center; color:var(--action-ink); font-weight:600; font-size:17px; overflow:hidden}
  .sug-ava img{width:100%; height:100%; object-fit:cover}

  .sug-main{flex:1; min-width:0}
  .sug-top{display:flex; align-items:baseline; gap:12px}
  .sug-name{font-weight:600; font-size:15px; color:var(--ink); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sug-rate{flex:0 0 auto; font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap}
  .sug-sub{font-size:12.5px; color:var(--muted); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sug-stars{color:var(--action); font-weight:600}

  /* the match line — signature: why this tutor fits you */
  .sug-why{display:flex; align-items:center; gap:8px; margin-top:8px; min-width:0}
  .sug-why .spark{flex:0 0 auto; display:flex; color:var(--action)}
  .sug-why-text{font-size:12px; color:var(--action); font-weight:500; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sug-why-text .r:not(:first-child)::before{content:"·"; color:var(--muted); margin:0 8px; font-weight:600}

  .sug-empty{background:var(--lotus-soft); border-radius: var(--radius-tile); padding:16px; font-size:13px; color:var(--ink); text-align:center}
  .sug-empty .sug-cta{display:inline-block; margin-top:12px; background:var(--action); color:var(--action-ink); border-radius: var(--radius-tile); padding:8px 20px; text-decoration:none; font-weight:600; font-size:13px}
  .sug-hint{background:var(--lotus-soft); color:var(--ink); border-radius: var(--radius-tile); padding:8px 12px; font-size:12.5px; margin-bottom:12px}
  .sug-more{background:var(--surface); border:1px solid var(--action); color:var(--action); border-radius: var(--radius-tile); padding:8px 24px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; min-height:40px}
  @media (max-width: 900px) { .dbstats { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 820px) { .dbbody { grid-template-columns: 1fr; } .dbstats { grid-template-columns: 1fr 1fr; } .dbgreet { padding: 20px 16px 8px; } .dbbody { padding: 12px 16px 40px; }
    /* Let grid/flex children shrink below their content min-size (prevents sideways scroll). */
    .dbbody > * { min-width: 0; } }

  @media (min-width: 1100px) {
    .db-content .dbgreet, .db-content .dbstats-wrap, .db-content .dbbody { max-width: 1120px; margin-left: auto; margin-right: auto; }
    .db-content .dbstats-wrap { padding: 16px 0 0 !important; }
    .db-content .dbgreet { padding-left: 0; padding-right: 0; padding-top: 28px; }
    .db-content .dbbody { grid-template-columns: minmax(0, 1fr) 300px; padding-left: 0; padding-right: 0; }
  }
  /* gap + min-width: space-between alone left zero clearance between a long
     Vietnamese name and the availability pill. */
  .dbgreet { padding: 24px 32px 8px; display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 3vw, 2.5rem); flex-wrap: wrap;}
  .dbgreet > div { min-width: 0; }
  .dbgreet h1 { font-size: 24px; font-weight: 600; color: var(--ink);}
  .dbgreet p { font-size: 14px; color: var(--muted); margin-top: 4px;}
  .avail-toggle { display: flex; min-height: var(--control-h); align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 8px 14px; text-decoration: none; }
  .avail-toggle:hover { border-color: var(--line-strong); }
  .avail-toggle .ti-chevron-right { color: var(--muted); font-size: 15px; }
  .avail-dot { width: 8px; height: 8px; border-radius: var(--radius-tile); background: var(--line-strong); }
  .avail-dot.on { background: var(--sage); }
  .dbbody { display: grid; grid-template-columns: 1fr 300px; gap: 20px; padding: 12px 32px 40px; align-items: start;}
  .dbleft { display: flex; flex-direction: column; gap: 20px;}
  .dbstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;}
  .dbstat-sub { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; }
  .dbstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px;}
  .dbstat-ic { width: 36px; height: 36px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px;}
  .dbstat-num { font-size: 22px; font-weight: 600; color: var(--ink);}
  .dbstat-label { font-size: 12px; color: var(--muted); margin-top: 4px;}
  .dbcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px 24px;}
  .dbcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;}
  .dbcard-head :is(h2, h3) { font-size: 16px; font-weight: 500; color: var(--ink);}
  .dbcard-head a { display: inline-flex; min-height: var(--control-h); align-items: center; font-size: 13px; color: var(--action); cursor: pointer; text-decoration: none;}
  /* .dblesson* removed with the "Upcoming sessions" card it styled: the card
     rendered UpcomingSessions, a field the handler declared and never filled.
     /dashboard/sessions owns that surface. */
  .dbrev { padding: 16px 0; border-bottom: 1px solid var(--line);}
  .dbrev:last-child { border-bottom: none; padding-bottom: 0;}
  .dbrev-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;}
  .dbrev-av { width: 32px; height: 32px; border-radius: var(--radius-tile); background: var(--surface-3); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;}
  .dbrev-name { font-size: 13px; font-weight: 500; color: var(--ink);}
  .dbrev-stars { margin-left: auto; font-size: 12px; color: var(--action);}
  .dbrev-text { font-size: 13px; color: var(--ink-2); line-height: 1.55;}
  .dbmsg { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer;}
  .dbmsg:last-child { border-bottom: none;}
  /* --lotus-ink, not --action: the indigo action colour lands at 4.33:1 on the
     dark chip. The lotus ink is contrast-safe against surface-3 in both themes. */
  .dbmsg-av { width: 38px; height: 38px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; color: var(--lotus-ink);}
  .dbmsg-name { font-size: 13px; font-weight: 500; color: var(--ink);}
  .dbmsg-text { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;}
  .dbmsg-dot { width: 8px; height: 8px; border-radius: var(--radius-tile); background: var(--action); flex-shrink: 0; margin-left: auto;}
  .dbmsg-time { font-size: 11px; color: var(--muted-2); margin-left: auto;}
  .db-empty { text-align: center; padding: 32px 20px; color: var(--muted-2); font-size: 13px;}
  .db-empty a { color: var(--action);}
  /* Deliberately dark spotlight card — fixed navy so it stays dark in dark mode
     too (var(--ink) flips light, which would hide the white text). */
  .dbpractice { background: var(--ink); border-radius: var(--radius-tile); padding: 24px; color: var(--action-ink);}
  .dbpractice-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: color-mix(in oklch, var(--action-ink) 12%, transparent); padding: 4px 12px; border-radius: var(--radius-tile); margin-bottom: 12px;}
  .dbpractice :is(h2, h3) { font-size: 16px; font-weight: 500; margin-bottom: 8px;}
  .dbpractice p { font-size: 13px; color: var(--line-strong); line-height: 1.55; margin-bottom: 16px;}
  /* min-height, not padding alone: 12px+12px on 13px text computes to ~40px, so
     this only reached the 44px floor under `pointer: coarse` — a touchscreen
     laptop reporting a fine pointer got a sub-spec target. */
  .dbpractice-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); background: var(--surface); color: var(--ink); border: none; border-radius: var(--radius-tile); padding: 0 20px; font-size: 13px; font-weight: 500; cursor: pointer;}
  .db-rating-field { min-width: 0; margin: 0; padding: 0; border: 0; }
  .db-rating { display: inline-flex; gap: 0; margin-top: 8px; }
  .db-rating-option { position: relative; width: 44px; height: 44px; flex: 0 0 44px; cursor: pointer; }
  .db-rating-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .db-rating-option::before { position: absolute; inset: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-node); background: var(--surface-3); content: ""; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
  .db-rating-option:has(input:checked)::before,
  .db-rating-option:has(~ .db-rating-option input:checked)::before { border-color: var(--lotus); background: var(--lotus); }
  .db-rating-option:has(input:focus-visible)::before { outline: 2px solid var(--focus-outer); outline-offset: 2px; box-shadow: 0 0 0 1px var(--focus-inner); }
  @media (hover: hover) {
    .db-rating:has(.db-rating-option:hover) .db-rating-option::before { border-color: var(--line-strong); background: var(--surface-3); }
    .db-rating .db-rating-option:hover::before,
    .db-rating .db-rating-option:has(~ .db-rating-option:hover)::before { border-color: var(--lotus); background: var(--lotus); }
  }
  .db-review-submit { align-self: flex-start; padding: 8px 16px; background: var(--action); color: var(--action-ink); }
  .db-review-submit:hover { background: var(--action-hover); }
  /* ── Teaching-activity chart (money-ready hero) ── */
  .tchart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
  .tchart-head { display: flex; align-items: baseline; gap: 8px; }
  .tchart-total { font-size: 36px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1; }
  .tchart-unit { font-size: 15px; font-weight: 600; color: var(--muted); }
  .tchart-hours { font-size: 13px; color: var(--muted); }
  .tchart-delta { font-size: 12.5px; font-weight: 600; color: var(--sage); margin-top: 8px; }
  .tchart-delta.down { color: var(--danger); }
  .tchart-empty { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 8px; max-width: 300px; }
  .tchart-pills { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 4px; }
  .tchart-pill { border: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 12px; border-radius: var(--radius-tile); cursor: pointer; text-decoration: none; transition: background var(--duration-fast), color var(--duration-fast); }
  .tchart-pill:hover { color: var(--ink); }
  .tchart-pill.on { background: var(--surface); color: var(--action); box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 14%, transparent); }
  .tchart-plot { display: flex; align-items: stretch; gap: 8px; height: 140px; }
  .tchart-col { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .tchart-bar { flex: 1; width: 100%; max-width: 36px; display: flex; align-items: flex-end; }
  .tchart-fill { width: 100%; min-height: 3px; border-radius: var(--radius-tile); transform-origin: bottom;
                 background: var(--action);}
  .tchart-fill.peak { background: var(--action); box-shadow: 0 5px 14px -5px transparent; }
  .tchart-xlabel { font-size: 11.5px; color: var(--muted); margin-top: 8px; white-space: nowrap; }
  @media (max-width: 900px) { .dbstats { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 820px) { .dbbody { grid-template-columns: 1fr; } .dbgreet { padding: 20px 16px 8px; flex-direction: column; align-items: flex-start; gap: 12px; } .dbbody { padding: 12px 16px 40px; }
    /* Let grid/flex children shrink below their content min-size (prevents sideways scroll). */
    .dbbody > * { min-width: 0; } }

  @media (min-width: 1100px) {
    .db-content .dbgreet, .db-content .dbstats-wrap, .db-content .dbbody { max-width: 1120px; margin-left: auto; margin-right: auto; }
    .db-content .dbstats-wrap { padding: 16px 0 0 !important; }
    .db-content .dbgreet { padding-left: 0; padding-right: 0; padding-top: 28px; }
    .db-content .dbbody { grid-template-columns: minmax(0, 1fr) 300px; padding-left: 0; padding-right: 0; }
  }
  input[type=text]{
    width:100%; font-size:15px; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line); border-radius: var(--radius-tile); padding:12px 12px; outline:none; transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  input[type=text]:focus{border-color:var(--action); box-shadow:0 0 0 3px color-mix(in oklch, var(--lotus) 12%, transparent)}
  .level{ transition:border-color var(--duration-fast), background var(--duration-fast);}
  .level:hover{border-color:var(--action)}
  .level .radio{ transition:background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);}
  .level .radio svg{ transition:opacity var(--duration-fast)}
  select{
    width:100%; font-size:15px; color:var(--ink); background:var(--surface-2);
    border:1px solid var(--line); border-radius: var(--radius-tile); padding:12px 12px; outline:none;
  }
  select:focus{border-color:var(--action); box-shadow:0 0 0 3px color-mix(in oklch, var(--lotus) 12%, transparent)}

  /* toast */
  .ep-toast{position:fixed; left:50%; bottom:96px; transform:translate(-50%,16px); background:var(--ink); color:var(--action-ink); font-weight:500; font-size:13.5px; padding:12px 20px; border-radius: var(--radius-tile); display:flex; align-items:center; gap:8px; opacity:0; pointer-events:none; transition:opacity var(--duration-medium), transform var(--duration-medium); z-index:80; box-shadow:var(--shadow-overlay)}
  .ep-toast.show{opacity:1; transform:translate(-50%,0)}
  .ep-toast svg{color:var(--sage)}

  @media (min-width:640px){
    body{padding-bottom:24px}
    .ep-appbar-save{display:block}
    .ep-savebar{display:none}
    .ep-toast{bottom:24px}
    .ep-main{padding-top:24px}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
  .chip:focus-visible, .switch:focus-visible, .level:focus-visible{outline-offset:3px}

  /* top app bar */
  .ep-appbar{ backdrop-filter:blur(8px);}
  .ep-appbar-save{
    display:none;
    background:var(--action); color:var(--action-ink); border:none;
    font-weight:600; font-size:14px; padding:8px 20px; border-radius: var(--radius-tile); cursor:pointer;}
  .ep-appbar-save:hover{background:var(--action-hover)}

  /* live preview */
  .ep-preview{
    background:var(--ink);
    border-radius:var(--radius-card); padding:16px; color:var(--action-ink);
    display:flex; align-items:center; gap:16px; margin-bottom:8px;
    box-shadow:var(--shadow-overlay);
  }
  .ep-preview-eyebrow{
    font-size:10px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--sage); margin:0 0 12px 4px;
  }
  .pv-av{
    width:54px; height:54px; flex:0 0 54px; border-radius: var(--radius-tile);
    background:color-mix(in oklch, var(--action-ink) 16%, transparent); display:flex; align-items:center; justify-content:center;
    font-weight:600; font-size:20px; color:var(--action-ink);
  }
  .pv-body{min-width:0; flex:1}
  .pv-name{font-weight:600; font-size:16px; line-height:1.2}
  .pv-head{font-size:12.5px; color:var(--line-strong); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pv-meta{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
  .pv-rate{font-weight:600; font-size:14px}
  .pv-rate span{font-weight:400; font-size:11px; color:var(--line-strong)}
  .pv-tag{font-size:10.5px; background:color-mix(in oklch, var(--action-ink) 15%, transparent); border-radius: var(--radius-tile); padding:4px 8px; white-space:nowrap}
  .pv-cred{font-size:11.5px; font-weight:600; color:var(--surface-2); margin-top:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .pv-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
  .ep-card > h2{font-size:14px; font-weight:600; color:var(--ink); margin:0 0 4px}
  .ep-card > .hint{font-size:12.5px; color:var(--muted); margin:0 0 16px}
  .evidence-editor-head,.tp-evidence-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
  .evidence-editor-head h2,.tp-evidence-head h3{margin:0}
  .evidence-editor-head .hint{font-size:12.5px;color:var(--muted);margin:4px 0 16px}
  .evidence-count,.tp-evidence-head span{flex:0 0 auto;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-tile);padding:5px 8px}
  .evidence-editor-grid,.tp-evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .evidence-editor-item,.evidence-add,.tp-evidence-grid a{position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface-2)}
  .evidence-editor-item img,.tp-evidence-grid img{width:100%;height:100%;display:block;object-fit:cover}
  .evidence-editor-item button{position:absolute;right:8px;top:8px;width:34px;height:34px;border:1px solid var(--line);border-radius:var(--radius-tile);background:var(--surface);color:var(--danger);cursor:pointer}
  .evidence-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--action);cursor:pointer;font:inherit}
  .evidence-add i{font-size:24px}.evidence-add span{font-size:13px;font-weight:600}
  .evidence-privacy,.tp-evidence-note{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;font-size:12px!important;color:var(--muted)!important;line-height:1.5!important}
  .opt{font-weight:400; color:var(--muted-2)}
  input[type=text], input[type=url], textarea, select{
    width:100%; font-size:15px; color:var(--ink);
    background:var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-tile);
    padding:12px 12px; outline:2px solid transparent; outline-offset:1px; transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
  }
  input[type=text]:focus, input[type=url]:focus, textarea:focus, select:focus{
    border-color:var(--action); box-shadow:0 0 0 3px color-mix(in oklch, var(--lotus) 12%, transparent);
  }
  textarea{resize:vertical; min-height:88px; line-height:1.55}
  .help{font-size:12px; color:var(--muted); margin-top:8px}

  /* category filter box */
  .cat-filter{position:relative; margin:0 0 12px}
  .cat-filter svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
  .cat-filter input[type=text]{padding-left:40px}
  .cat-nomatch{font-size:12.5px; color:var(--muted); margin:12px 4px 0}

  .pv-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
  .chip{ cursor:pointer; user-select:none; transition:background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);}
  .chip:hover{border-color:var(--action)}
  .chip.on{background:var(--action); border-color:var(--action); color:var(--action-ink)}
  .chip:has(input[type=checkbox]:checked){background:var(--action); border-color:var(--action); color:var(--action-ink)}
  .add-row button:hover{background:var(--surface-3)}
  .sublabel{font-size:12.5px; font-weight:600; color:var(--ink); margin:20px 0 8px}

  /* credential rows */
  .cred-row{display:flex; gap:8px; margin-bottom:12px; align-items:center}
  .cred-row select{flex:0 0 34%; padding:12px}
  .cred-row input{flex:1}
  .cred-row .cred-val{flex:0 0 26%}
  .cred-x{flex:0 0 auto; border:none; background:var(--lotus-soft); color:var(--muted); border-radius: var(--radius-tile); width:38px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer}
  .cred-x:hover{background:var(--danger-soft); color:var(--danger)}
  /* On phones the 4-across row crushes the label input — stack: label on its own
     full-width line, then kind + value + remove share the row below. */
  @media (max-width:640px){
    .cred-row{flex-wrap:wrap}
    .cred-row input[name="cred_label"]{flex:1 1 100%; order:-1}
    .cred-row select{flex:1 1 auto}
    .cred-row .cred-val{flex:1 1 40%}
  }

  /* rate */
  .rate-wrap{position:relative; display:flex; align-items:center}
  .rate-wrap .cur{position:absolute; left:14px; font-weight:600; color:var(--muted); font-size:16px}
  .rate-wrap input{padding-left:32px; padding-right:64px; font-weight:600; font-size:18px}
  .rate-wrap .per{position:absolute; right:14px; color:var(--muted); font-size:13px}

  /* switch rows */
  .switch-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
  .switch-row:first-of-type{border-top:none}
  .switch-row .sr-ic{
    width:38px; height:38px; flex:0 0 38px; border-radius: var(--radius-tile); background:var(--lotus-soft);
    color:var(--action); display:flex; align-items:center; justify-content:center;}
  .switch-row .sr-txt{flex:1; min-width:0}
  .switch-row .sr-txt b{font-weight:600; font-size:14px; color:var(--ink); display:block}
  .switch-row .sr-txt span{font-size:12px; color:var(--muted)}
  /* The switch is a real checkbox (native form value, no JS to toggle). */
  .switch{
    appearance:none; -webkit-appearance:none; margin:0;
    flex:0 0 46px; width:46px; height:28px; border-radius: var(--radius-tile); background:var(--line-strong);
    position:relative; cursor:pointer; transition:background var(--duration-fast); border:none;}
  .switch::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius: var(--radius-tile); background:var(--surface); transition:transform var(--duration-fast); box-shadow:0 1px 3px color-mix(in oklch, var(--ink) 20%, transparent)}
  .switch:checked{background:var(--action)}
  .switch:checked::after{transform:translateX(18px)}

  /* Collapsibles open purely from the related switch's checked state via :has(). */
  .collapse{overflow:hidden; max-height:0}
  #tutorForm:has(#swInperson:checked) #areaWrap{max-height:2000px}

  .ep-note{
    display:flex; gap:8px; align-items:flex-start; background:var(--lotus-soft); border-radius: var(--radius-tile);
    padding:12px 12px; font-size:12.5px; color:var(--ink); margin-top:4px;}
  .ep-note svg{flex:0 0 16px; margin-top:0; color:var(--action)}

  /* inline save button at end of page */
  .ep-endsave{margin-top:20px}

  /* sticky save bar */
  .ep-savebar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));}
  .ep-savebar button{
    width:100%; font-weight:600; font-size:15px;
    background:var(--action); color:var(--action-ink); border:none; border-radius: var(--radius-tile); padding:16px; cursor:pointer;}
  .ep-savebar button:hover{background:var(--action-hover)}
  .ep-savebar button:disabled{background:var(--muted-2); cursor:not-allowed}

  @media (min-width:640px){
    body{padding-bottom:24px}
    .ep-appbar-save{display:block}
    .ep-savebar{display:none}
    .ep-main{padding-top:24px}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none!important} }
  :focus-visible{outline:2px solid var(--action); outline-offset:2px}
  .chip:focus-visible, .switch:focus-visible{outline-offset:3px}
  .auth-divider { margin: 20px 0;}
  @media (max-width: 480px) { .auth-card { padding: 28px 20px; } }

/* messages.html */
.mb-wrap { width: min(100%, 72rem); margin: 0 auto; padding: 32px 16px calc(48px + var(--safe-bottom)); }
  .mb-workspace { display: grid; grid-template-areas: "inbox" "panel" "nav"; gap: 20px; }
  .mb-inbox-column { grid-area: inbox; min-width: 0; }
  .message-panel { grid-area: panel; min-width: 0; min-height: 32rem; overflow: hidden; scroll-margin-top: 4.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); }
  .message-panel-empty { min-height: 32rem; display: grid; place-content: center; justify-items: center; padding: 48px; text-align: center; }
  .message-panel-empty > i { margin-bottom: 20px; color: var(--action); font-size: 42px; }
  .message-panel-empty h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; }
  .message-panel-empty p { max-width: 360px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .message-panel .cv-wrap { width: 100%; max-width: none; height: 640px; }
  .message-panel .cv-head { padding-top: 12px; }
  .message-panel .cv-back, .message-panel .u-push-right { display: none; }

  /* Tutor-profile "Send a message" popup — a compact floating dialog anchored to
     the bottom-right corner rather than centered full-width, but still a real
     .ui-dialog modal underneath (showModal(), the shared dimmed/blurred
     backdrop, Escape-to-close and outside-click-to-close from ux.js) — only
     size and position differ from #report-tutor below it.
     Selectors key off the #chat-popup id (not a plain class) so these reliably
     win over same-specificity .message-panel/.cv-wrap rules elsewhere (e.g.
     the admin messages page's own sizing) regardless of source order — a
     plain class here previously lost that tie and got clipped.
     The popup gets a real .ui-dialog__head (same as #report-tutor) instead of
     the fragment's own .cv-head (hidden below), so the close control sits in
     normal flow — not floated over borrowed markup — and can't lose a
     stacking fight with it. Deliberately no link out to /messages/{id}: this
     popup is meant to be the only door into the conversation from a public
     profile page. */
  #chat-popup {
    width: min(23rem, calc(100vw - 2rem));
    max-width: none;
    height: min(34rem, calc(100dvh - 2rem));
    margin: auto 1rem calc(1rem + var(--safe-bottom)) auto;
    padding: 0;
    overflow: hidden;
  }
  /* display must stay conditional on [open]: an unconditional #chat-popup
     rule has higher specificity than the UA's dialog:not([open]){display:none}
     and would keep the closed dialog visibly rendered (only its backdrop
     actually goes away on .close()) — this is what broke the close button. */
  #chat-popup[open] {
    display: flex;
    flex-direction: column;
  }
  #chat-popup .message-panel { flex: 1; min-height: 0; border: 0; border-radius: 0; }
  #chat-popup .cv-wrap { height: 100%; }
  #chat-popup .cv-head { display: none; } /* replaced by the .ui-dialog__head below */
  #chat-popup .ui-dialog__head { flex: 0 0 auto; }
  /* .cv-name is a <h2> here (real dialog title, unlike the plain-div .cv-name
     in the full conversation page) — pull it back from the generic h1/h2
     editorial-serif rule to the UI font this messaging surface actually uses. */
  #chat-popup .cv-name { font-family: var(--font-ui); font-size: 16px; }
  .chat-popup-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .chat-popup-id-text { min-width: 0; }
  @media (max-width: 480px) {
    #chat-popup { width: 100%; height: min(85dvh, 640px); margin: auto 0 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0; }
  }
  .mb-dashboard { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink);
                  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-tile);
                  font-size: 13px; font-weight: 700; text-decoration: none; transition: border-color var(--duration-fast), color var(--duration-fast); }
  .mb-dashboard:hover { color: var(--action); border-color: var(--action); }
  .mb-dashboard:focus-visible { outline: 3px solid color-mix(in oklch, var(--lotus) 35%, transparent); outline-offset: 2px; }

  .mb-head { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  .mb-title { margin: 0; color: var(--ink); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
  .mb-head p { max-width: 58ch; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
  .mb-section-head { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .mb-section-head h2 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
  .mb-section-head span { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; }

  .mb-list { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  .mb-item { display: flex; align-items: center; gap: 12px; padding: 16px 16px; text-decoration: none;
             background: var(--surface); border-bottom: 1px solid var(--line); transition: background-color var(--duration-fast) var(--ease-standard); }
  .mb-item:last-child { border-bottom: 0; }
  .mb-item:hover { background: var(--sage-soft); }
  .mb-item:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: -2px; background: var(--lotus-soft); }
  .mb-item.unread { background: var(--lotus-soft); }

  .mb-ava { position: relative; flex-shrink: 0; }
  .mb-avatar { width: 48px; height: 48px; border-radius: var(--radius-control); color: var(--action-ink); display: flex;
               align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
  .mb-mid { flex: 1; min-width: 0; }
  .mb-name { font-size: 15px; font-weight: 600; color: var(--ink); }
  .mb-item.unread .mb-name { font-weight: 700; }
  .mb-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
  .mb-item.unread .mb-preview { color: var(--ink); }
  .mb-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
  .mb-time { font-size: 11px; color: var(--muted-2); }
  .mb-badge { background: var(--action); color: var(--action-ink); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px;
              padding: 0 8px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; }

  .mb-inbox-empty { display: grid; min-height: 14rem; place-content: center; justify-items: center; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); text-align: center; }
  .mb-inbox-empty i { margin-bottom: 12px; color: var(--muted); font-size: 28px; }
  .mb-inbox-empty strong { color: var(--ink); font-size: 14px; }
  .mb-inbox-empty span { max-width: 30ch; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }

  /* ── "Start a conversation" navigator — where chats begin ── */
  .mb-nav { grid-area: nav; min-width: 0; }
  .mb-nav-eye { margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 700; }
  .mb-nav-grid { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  .mb-card { position: relative; display: flex; min-height: 4.5rem; align-items: center; gap: 12px; padding: 12px 14px;
             border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard); }
  .mb-card:last-child { border-bottom: 0; }
  .mb-card:hover { background: var(--sage-soft); }
  .mb-card:focus-visible { outline: 3px solid color-mix(in oklch, var(--lotus) 50%, transparent); outline-offset: 2px; }
  .mb-card-ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--radius-control); background: var(--lotus-soft); color: var(--action);
                display: flex; align-items: center; justify-content: center; font-size: 19px; }
  .mb-card-t { font-size: 14px; font-weight: 700; color: var(--ink); }
  .mb-card-s { font-size: 12px; line-height: 1.4; color: var(--muted); margin-top: 2px; }

  .mb-tip { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 12px 2px 0;
            border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; color: var(--muted); }
  .mb-tip i { margin-top: 2px; color: var(--sage-deep); font-size: 16px; flex-shrink: 0; }

  @media (min-width: 900px) {
    .mb-wrap { padding: 40px 0 56px; }
    .mb-workspace { grid-template-areas: "inbox panel" "nav panel"; grid-template-columns: minmax(18rem, 22rem) minmax(28rem, 1fr); grid-template-rows: max-content max-content; align-items: start; }
    .mb-item { padding: 14px 16px; }
    .message-panel, .message-panel-empty { min-height: min(700px, calc(100dvh - 190px)); }
    .message-panel .cv-wrap { height: min(700px, calc(100dvh - 190px)); }
  }

  @media (prefers-reduced-motion: reduce) { .mb-card, .mb-card::before, .mb-item { transition: none; } }

/* onboarding.html */
.obnav { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line);}
  .obnav-save { font-size: 13px; cursor: pointer; text-decoration: none;}
  .obbar-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 8px; margin-left: auto; margin-right: auto;}
  .obbar-info b { color: var(--action); font-weight: 500; }
  .obbar { margin: 0 auto; overflow: hidden;}
  .obbar-fill { height: 100%;}
  .obbody { display: grid; margin: 0 auto; align-items: start;}
  .obsteps { display: flex; flex-direction: column; gap: 4px; }
  .obstep { display: flex; align-items: center; gap: 12px; padding: 12px 12px; cursor: pointer;}
  .obstep-ic { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;}
  .obstep-txt { font-size: 13px; color: var(--ink-2); }
  .obstep.active .obstep-txt { color: var(--ink); font-weight: 500; }
  .obmain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 28px; }
  .obmain h2 { color: var(--ink); margin-bottom: 4px;}
  .obmain-sub { font-size: 14px; color: var(--muted); margin-bottom: 24px; line-height: 1.5; }
  .obfield { margin-bottom: 20px; }
  .oblabel { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; display: block; }
  .obhint { font-size: 12px; color: var(--muted-2); font-weight: 400; }
  .obinput { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px 12px; font-size: 14px; color: var(--ink-2); font-family: inherit; background: var(--surface-2); outline: none; }
  .obinput:focus { border-color: var(--action); }
  .obtextarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px 12px; font-size: 14px; color: var(--ink-2); font-family: inherit; background: var(--surface-2); min-height: 90px; resize: vertical; line-height: 1.5; outline: none; }
  .obtextarea:focus { border-color: var(--action); }
  .obupload { border: 1px dashed var(--line-strong); padding: 24px; text-align: center; cursor: pointer;}
  .obupload:hover { border-color: var(--action); }
  .obupload-ic { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 12px;}
  .obupload-txt { font-size: 13px; color: var(--ink-2); }
  .obupload-txt b { color: var(--action); font-weight: 500; }
  .obupload-sub { font-size: 12px; color: var(--muted-2); margin-top: 4px; }
  .obchips { display: flex; gap: 8px; flex-wrap: wrap; }
  .obchip { font-size: 13px; padding: 8px 12px; cursor: pointer;}
  .obchip:hover, .obchip.on { background: var(--lotus-soft); border-color: var(--action); color: var(--action); }
  .obnav-btns { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
  .obback-btn { border: 1px solid var(--line); padding: 12px 24px; font-size: 14px; font-weight: 500; cursor: pointer;}
  .obnext-btn { border: none; padding: 12px 28px; font-size: 14px; font-weight: 500; cursor: pointer;}
  .obnext-btn:hover { background: var(--action-hover); }
  .obtip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px; position: sticky; top: 16px; }
  .obtip-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
  .obtip-item { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-bottom: 12px; }
  .obtip-item i { color: var(--sage); font-size: 15px; flex-shrink: 0; margin-top: 0; }
  @media (max-width: 820px) { .obbody { grid-template-columns: 1fr; } .obsteps { flex-direction: row; flex-wrap: wrap; } .obtip { position: static; } .obnav { padding: 0 16px; } .obbar-wrap { padding: 16px 16px 0; } }

  @media (max-width: 780px) {
    .doc-head { padding: 36px 0 20px; }
    .doc-head h1 { font-size: 28px; }
    .doc-sec { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
    .doc-plain { position: static; }
  }
  .tpbody { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 24px 32px 40px; align-items: start; }
  .tpleft { display: flex; flex-direction: column; gap: 16px; }
  .tphead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; display: flex; gap: 20px; }
  .tphead-avatar { width: 96px; height: 96px; border-radius: var(--radius-tile); color: var(--action-ink); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; position: relative; flex-shrink: 0; }
  .tphead-name { font-size: 24px; font-weight: 600; color: var(--ink); }
  .tphead-title { font-size: 14px; color: var(--muted); margin: 4px 0 12px; }
  .tpstats { display: flex; gap: 24px; flex-wrap: wrap; }
  .tpstat-num { font-size: 18px; font-weight: 500; color: var(--ink); font-feature-settings: var(--font-numeric); }
  .tpstat-label { font-size: 12px; color: var(--muted); }
  .tpstat-new { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-tile); background: var(--sage-soft); color: var(--sage-deep); }
  .tpcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px 24px; }
  .tpcard h3 { font-size: 16px; font-weight: 500; color: var(--ink); margin-bottom: 12px; }
  .tpcard p { font-size: 14px; color: var(--ink-2); line-height: 1.65; }
  .tpchips { display: flex; gap: 8px; flex-wrap: wrap; }
  .tpchip { font-size: 13px; padding: 8px 12px; border-radius: var(--radius-tile); background: var(--surface-3); color: var(--ink-2); }
  /* Credential tiles — the achievement/school name is the hero. Profile has
     room, so let the name wrap in full instead of truncating (overrides the
     compact nowrap/ellipsis the shared .score-tile .value uses on search). */
  .tp-scores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
  .tp-scores .score-tile { flex: 1; min-width: 160px; background: transparent; }
  .tp-scores .overline { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
  .tp-scores .value { white-space: normal; overflow: visible; font-size: var(--text-base); line-height: 1.35; font-weight: 600; }
  .tpcreds { list-style: none; margin: 0; padding: 0; }
  .tp-evidence-head{margin-bottom:12px}.tp-evidence-grid a:focus-visible{outline:3px solid color-mix(in oklch,var(--action) 35%,transparent);outline-offset:2px}
  .tpcred { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
  .tpcred:first-child { border-top: none; }
  .tpcred-kind { flex: 0 0 auto; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sage-deep); background: var(--sage-soft); border-radius: var(--radius-tile); padding: 4px 8px; }
  .tpcred-label { flex: 1; line-height: 1.5; }
  .tpcred-ok { color: var(--sage); font-size: 15px; }
  .tpreview { padding: 16px 0; border-top: 1px solid var(--line); }
  .tpreview:first-of-type { border-top: none; padding-top: 0; }
  .tprev-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .tprev-av { width: 36px; height: 36px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; }
  .tprev-name { font-size: 14px; font-weight: 500; color: var(--ink); }
  .tprev-date { font-size: 12px; color: var(--muted-2); }
  .tprev-stars { margin-left: auto; font-size: 13px; color: var(--action); }
  .tprev-text { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
  .tpbook { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; position: sticky; top: 16px; }
  .tpbook-rate { font-size: 30px; font-weight: 600; color: var(--ink); font-feature-settings: var(--font-numeric); }
  .tpbook-rate span { font-size: 14px; color: var(--muted-2); font-weight: 400; }
  .tpbook-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 8px 0 20px; }
  .tpbook-btn { width: 100%; background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 12px; font-size: 15px; font-weight: 500; margin-bottom: 8px; cursor: pointer; }
  .tpmsg-btn { width: 100%; background: var(--surface); color: var(--action); border: 1px solid var(--line-strong); border-radius: var(--radius-tile); padding: 12px; font-size: 14px; font-weight: 500; cursor: pointer; }
  /* Secondary booking action (e.g. full lesson): ghost so the trial CTA stays the sole primary. */
  .tpbook-btn--secondary { background: var(--surface); color: var(--action); border: 1px solid var(--line-strong); }
  .tpguarantee { font-size: 12px; color: var(--ink-2); text-align: center; margin-top: 12px; line-height: 1.5; }
  .tp-report-btn { display: block; margin: 16px auto 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
  .tp-report-ok { margin-top: 16px; padding: 10px; border-radius: var(--radius-tile); background: var(--sage-soft); color: var(--sage-deep); text-align: center; }
  .tpbook-info { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
  .tpbook-info i { color: var(--muted); }
  .tpdivider { border-top: 1px solid var(--line); margin: 16px 0; }
  /* Sticky mobile action bar — keeps the primary CTA reachable without scrolling past every review. */
  .tp-cta-bar { display: none; }
  .tp-cta-msg { flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: var(--radius-tile); background: var(--surface); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
  .tp-cta-book { flex: 1; background: var(--action); color: var(--action-ink); border-radius: var(--radius-tile); padding: 16px; font-size: 15px; font-weight: 600; text-align: center; min-height: 48px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
  @media (max-width: 820px) {
    .tpbody { grid-template-columns: 1fr; }
    .tpbook { position: static; }
    .tpbook-btn, .tpmsg-btn { display: none; }                    /* secondary link — free up the nav on phones */
    .mtab { display: none; }                            /* one bottom bar, not two */
    body { padding-bottom: 0; }
    .tpbody { padding-bottom: calc(84px + var(--safe-bottom)); }
    .tp-cta-bar {
      display: flex; gap: 12px; align-items: center;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
      background: var(--surface); border-top: 1px solid var(--line);
      padding: 12px 16px calc(12px + var(--safe-bottom));
      box-shadow: 0 -2px 14px color-mix(in oklch, var(--ink) 8%, transparent);
    }
  }
  .auth-logo { display: flex; justify-content: center; margin-bottom: 28px;}
  .auth-title { text-align: center; margin-bottom: 8px;}
  .auth-sub { text-align: center; margin-bottom: 28px;}
  .auth-field { margin-bottom: 16px;}
  .auth-field input { font-size: 14px; font-family: inherit; outline: none; transition: border-color var(--duration-fast);}
  .auth-field input:focus { border-color: var(--action);}
  .auth-role { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
  .role-opt { position: relative; }
  .role-opt input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
  .role-label { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 12px; border: 1px solid var(--line); border-radius: var(--radius-tile); cursor: pointer; font-size: 13px; color: var(--ink-2); transition: border-color var(--duration-fast), background var(--duration-fast); }
  .role-label i { font-size: 22px; color: var(--muted-2); transition: color var(--duration-fast); }
  .role-opt input:checked + .role-label { border-color: var(--action); background: var(--surface-2); color: var(--action); font-weight: 500; }
  .role-opt input:checked + .role-label i { color: var(--action); }
  .auth-btn { font-size: 15px; font-weight: 500; font-family: inherit; transition: background var(--duration-fast);}
  .auth-error { padding: 12px 16px; font-size: 13px; margin-bottom: 16px; display: none;}
  .auth-error.show { display: block;}
  .auth-alt { text-align: center;}
  .auth-divider { font-size: 12px; color: var(--muted-2); text-align: center; margin-bottom: 16px;}
  .auth-lang { display: flex; justify-content: center; margin-top: 16px;}
  @media (max-width: 480px) { .auth-card { padding: 28px 20px; } }

/* requests_board.html */
.rq-wrap { max-width: 640px; margin: 0 auto; padding: 24px 20px calc(48px + var(--safe-bottom)); }
  .rq-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
  .rq-lede { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
  .rq-list { display: flex; flex-direction: column; gap: 12px; }
  .rq-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 16px; text-decoration: none; transition: border-color var(--duration-fast); }
  .rq-card:hover { border-color: var(--action); }
  .rq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .rq-subject { font-size: 16px; font-weight: 600; color: var(--ink); }
  .rq-prox { font-size: 12px; font-weight: 500; color: var(--action); background: var(--lotus-soft); border-radius: var(--radius-tile); padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .rq-meta { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
  .rq-note { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
  .rq-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
  .rq-ago { font-size: 12px; color: var(--muted); }
  .rq-respond { font-size: 13px; font-weight: 600; color: var(--action); display: inline-flex; align-items: center; gap: 4px; }
  .rq-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 40px 16px; }
  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }

/* requests_new.html */
.rn-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px calc(48px + var(--safe-bottom)); }
  .rn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; }
  .rn-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
  .rn-lede { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
  .rn-field { margin-bottom: 16px; }
  .rn-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .rn-input, .rn-select, .rn-textarea {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile);
    padding: 12px 12px; font-size: 15px; color: var(--ink); background: var(--surface);
  }
  .rn-textarea { min-height: 72px; resize: vertical; }
  .rn-formats { display: flex; gap: 12px; flex-wrap: wrap; }
  .rn-fmt { flex: 1; min-width: 100px; border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .rn-fmt input { accent-color: var(--action); }
  .rn-fmt:has(input:checked) { border-color: var(--action); background: var(--lotus-soft); }
  .rn-submit { width: 100%; background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 16px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; margin-top: 8px; }
  .rn-submit:hover { background: var(--action-hover); }
  .rn-err { background: var(--danger-soft); color: var(--danger); font-size: 13px; padding: 12px 12px; border-radius: var(--radius-tile); margin-bottom: 12px; }
  .rn-err:empty { display: none; }
  .rn-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.5; }
  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }

/* requests_respond.html */
.rr-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px calc(48px + var(--safe-bottom)); }
  .rr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; }
  .rr-subject { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
  .rr-meta { font-size: 13px; color: var(--ink-2); margin-bottom: 12px; }
  .rr-note-in { font-size: 14px; color: var(--ink); background: var(--lotus-soft); border-radius: var(--radius-tile); padding: 12px 12px; margin-bottom: 20px; line-height: 1.45; }
  .rr-field { margin-bottom: 16px; }
  .rr-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .rr-input, .rr-select, .rr-textarea {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile);
    padding: 12px 12px; font-size: 15px; color: var(--ink); background: var(--surface);
  }
  .rr-textarea { min-height: 72px; resize: vertical; }
  .rr-submit { width: 100%; background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 16px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; margin-top: 8px; }
  .rr-submit:hover { background: var(--action-hover); }
  .rr-err { background: var(--danger-soft); color: var(--danger); font-size: 13px; padding: 12px 12px; border-radius: var(--radius-tile); margin-bottom: 12px; }
  .rr-err:empty { display: none; }
  .rr-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.5; }
  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }.auth-field{text-align:left;margin-top:16px}.auth-field label{display:block;font-size:13px;font-weight:500;margin-bottom:8px}.auth-field input{box-sizing:border-box;width:100%;padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius-tile);font:14px inherit}

  /* Filter chips — native radios styled as pills; no JS, all state via :has(). */
  .spfilters { flex-direction: column;}
  .spchip-group { flex-wrap: wrap;}
  .spchip-label { flex-shrink: 0;}
  .spchip { line-height: 1; cursor: pointer; display: inline-flex; align-items: center; user-select: none; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);}
  .spchip input { display: none; }
  .spchip:active { transform: scale(.97); }
  .spselect { border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 0 12px; cursor: pointer;}

  /* Results — one centered, phone-first column. */
  .spmain { flex-direction: column;}
  .spresults-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
  .sptitle { font-weight: 600;}
  .spresults-tools { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;}
  .spsort-label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px;}
  .sp-clear { font-size: 13px; font-weight: 500; color: var(--action); text-decoration: none; white-space: nowrap; }
  .sp-clear:hover { text-decoration: underline; }
  .sp-sort { display: inline-flex; align-items: center; gap: 6px; }
  .sp-sort__label { font-size: 13px; color: var(--muted); white-space: nowrap; }
  .sp-sort .spselect { height: 36px; }
  /* Address-format (legacy/merged scheme) is an edge control — collapsed out of the parent's face by default. */
  .search-scheme { grid-column: 1 / -1; }
  .search-scheme > summary { font-size: 12px; color: var(--muted); cursor: pointer; padding: 4px 0; list-style-position: inside; }
  .search-scheme > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: var(--radius-tile); }
  .search-scheme[open] > summary { margin-bottom: 6px; }

  .sptcard { text-decoration: none;}
  .sptcard:active { transform: scale(.995); }
  .sptavatar { display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; color: var(--action-ink); position: relative;}
  .sptbody { min-width: 0; }
  .sptrow1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .sptname { font-size: 16px; font-weight: 600; color: var(--ink); }
  .sptstars { font-size: 13px; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }
  .sptstars .g { color: var(--action); }
  .sptnew { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: var(--radius-tile); white-space: nowrap; flex-shrink: 0;}
  .sptsubj { font-size: 13px; margin: 4px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .sptfoot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
  .sptag { font-size: 11px; padding: 4px 8px; border-radius: var(--radius-tile); background: var(--paper); color: var(--ink-2); }
  .sptprice { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; }

  .sp-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
  .sp-empty i { font-size: 48px; color: var(--surface-3); display: block; margin-bottom: 16px; }
  .sp-empty p { font-size: 14px; }
  .sp-load-more { border: 1px solid var(--action); padding: 12px 28px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; min-height: 44px;}

  .htmx-indicator { opacity: 0; transition: opacity var(--duration-fast) var(--ease-enter); }
  .htmx-request .htmx-indicator { opacity: 1; }

  /* On a wide browser the filters become a proper workbench instead of a
     sequence of horizontal mobile chip rows above a narrow result list. */
  @media (min-width: 1100px) {
    .search-workspace { display: grid; grid-template-columns: 244px minmax(0, 720px); gap: 28px; max-width: 1040px; margin: 0 auto; align-items: start; }
    .spfilters { position: sticky; top: 82px; max-width: none; margin: 0; padding: 28px 0; gap: 20px; }
    .spchip-group { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
    .spchip-label { min-width: 0; color: var(--muted); font-weight: 600; }
    .spselect { width: 100%; max-width: none; }
    .spmain { max-width: 720px; margin: 0; padding: 28px 0 56px; }
    .sptcard { padding: 20px; }
  }
  .htmx-request.htmx-indicator { opacity: 1; }

  @media (max-width: 640px) {
    /* Chip rows scroll sideways so the filter bar stays one tidy line each. */
    .spchip-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .spchip-group::-webkit-scrollbar { display: none; }
    .spchip { flex-shrink: 0; }
    .sptavatar { width: 48px; height: 48px; font-size: 17px; }
    .sptcard { grid-template-columns: 48px 1fr; padding: 16px; }
  }
  .ep-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:20px 16px; margin-top:16px;}
  .field{ margin-bottom:16px;}
  .field:last-child{ margin-bottom:0;}
  label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px;}
  input[type=text],select{ width:100%; font-size:15px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-tile); padding:12px 12px; outline:none; }
  input[type=text]:focus,select:focus{ border-color:var(--action); box-shadow:0 0 0 3px color-mix(in oklch, var(--lotus) 12%, transparent); }

  .chips{ display:flex; flex-wrap:wrap; gap:8px;}
  .chip{ font-size:13px; font-weight:500; padding:8px 12px; border-radius: var(--radius-tile); background:var(--surface); border:1px solid var(--line); color:var(--ink); display:inline-flex; align-items:center; gap:8px;}
  .chip.removable{ background:var(--lotus-soft); border-color:transparent; color:var(--action); font-weight:600;}
  .chip .x{ display:flex; opacity:.7; cursor:pointer;}
  .chip .x:hover{ opacity:1;}
  .add-row{ display:flex; gap:8px; margin-top:12px;}
  .add-row input{ flex:1;}
  .add-row button{ flex:0 0 auto; font-weight:600; font-size:13px; background:var(--lotus-soft); color:var(--action); border:none; border-radius: var(--radius-tile); padding:0 16px; cursor:pointer;}

  .levels{ display:grid; gap:8px;}
  .level{ display:flex; align-items:center; gap:12px; padding:12px 16px; border:1px solid var(--line); border-radius: var(--radius-tile); cursor:pointer; background:var(--surface-2); user-select:none;}
  .level:has(input:checked){ border-color:var(--action); background:var(--lotus-soft);}
  .level .radio{ width:22px; height:22px; flex:0 0 22px; border-radius: var(--radius-tile); border:2px solid var(--line-strong); background:var(--surface); display:flex; align-items:center; justify-content:center;}
  .level:has(input:checked) .radio{ border-color:var(--action); background:var(--action); color:var(--action-ink);}
  .level .radio svg{ opacity:0;}
  .level:has(input:checked) .radio svg{ opacity:1;}
  .level .lv-txt b{ font-weight:600; font-size:14px; color:var(--ink); display:block;}
  .level .lv-txt span{ font-size:12px; color:var(--muted);}

  .ep-endsave button{ width:100%; font-weight:600; font-size:15px; background:var(--action); color:var(--action-ink); border:none; border-radius: var(--radius-tile); padding:16px; cursor:pointer; margin-top:20px;}
  .ep-endsave button:hover{ background:var(--action-hover);}

/* students_manage.html */
  body{ padding-bottom:88px;}
  .ep-appbar{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px; height:56px; padding:0 16px; background:var(--surface); border-bottom:1px solid var(--line);}
  .ep-iconbtn{ width:40px; height:40px; flex:0 0 40px; border:none; background:none; display:flex; align-items:center; justify-content:center; border-radius: var(--radius-tile); cursor:pointer; color:var(--ink);}
  .ep-iconbtn:hover{ background:var(--lotus-soft);}
  .ep-appbar h1{ font-size:17px; font-weight:600; margin:0; color:var(--ink);}
  .ep-appbar-lang{ margin-left:auto;}
  .ep-main{ max-width:600px; margin:0 auto; padding:16px;}

  .kid{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-card); padding:16px; margin-bottom:12px; display:flex; gap:16px; align-items:flex-start; }
  .kid-av{ width:46px; height:46px; flex:0 0 46px; border-radius: var(--radius-tile); background:var(--lotus-soft); color:var(--action); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:16px; }
  .kid-body{ flex:1; min-width:0; }
  .kid-name{ font-size:15px; font-weight:600; color:var(--ink); }
  .kid-meta{ font-size:12.5px; color:var(--muted); margin-top:4px; }
  .kid-subs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .kid-sub{ font-size:12px; background:var(--lotus-soft); color:var(--action); border-radius: var(--radius-tile); padding:4px 12px; }
  .kid-actions{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
  .kid-edit{ font-size:13px; font-weight:600; color:var(--action); text-decoration:none; }
  .kid-del{ font-size:13px; font-weight:600; color:var(--danger); background:none; border:none; cursor:pointer; padding:0; }

  .add-btn{ display:block; width:100%; text-align:center; font-weight:600; font-size:15px; background:var(--action); color:var(--action-ink); border:none; border-radius: var(--radius-tile); padding:16px; cursor:pointer; text-decoration:none; margin-top:8px; }
  .add-btn:hover{ background:var(--action-hover); }
  .empty{ text-align:center; color:var(--muted); font-size:14px; padding:28px 12px;}

/* support.html */
.sp-wrap { max-width: 560px; margin: 0 auto; padding: 32px 16px calc(48px + var(--safe-bottom)); }
  .sp-hero { text-align: center; margin-bottom: 24px; }
  .sp-hero .spark { font-size: 34px; color: var(--action); }
  .sp-hero h1 { font-size: 24px; font-weight: 600; color: var(--ink); margin: 12px 0 8px; }
  .sp-hero p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
  .sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 28px; text-align: center; }
  .sp-qr { width: 260px; max-width: 100%; border-radius: var(--radius-tile); border: 1px solid var(--line); }
  .sp-bank { margin-top: 20px; display: inline-block; text-align: left; }
  .sp-bank-row { display: flex; justify-content: space-between; gap: 24px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .sp-bank-row:last-child { border-bottom: none; }
  .sp-bank-row .k { color: var(--muted); }
  .sp-bank-row .v { color: var(--ink); font-weight: 600; }
  .sp-hint { font-size: 12px; color: var(--muted); margin-top: 16px; line-height: 1.6; }
  .sp-soon { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 32px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .sp-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 14px; color: var(--action); }
  .sp-cta { display: block; text-align: center; margin-top: 20px; }

/* teach.html */
.thero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 64px 48px 56px; max-width: 1180px; margin: 0 auto; }
  .thero h1 { font-size: 40px; font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -1px; }
  .thero h1 em { font-style: normal; color: var(--action); }
  .thero p { font-size: 16px; color: var(--ink-2); line-height: 1.65; margin: 20px 0 28px; max-width: 420px; }
  .thero-actions { align-items: center;}
  .why-inner { margin: 0 auto;}
  .why h2 { text-align: center; font-size: 24px; font-weight: 600; color: var(--ink); }
  .why-sub { text-align: center; font-size: 14px; color: var(--muted); margin: 8px 0 32px; }
  .why-grid { display: grid; grid-template-columns: repeat(3, 1fr);}
  .why-ic { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px;}
  .why-card h3 { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .why-card p { font-size: 13px; color: var(--muted); line-height: 1.6; }
  .journey { display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
  .journey h2 { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 28px; }
  .jstep { display: flex; gap: 16px; margin-bottom: 24px;}
  .jnum { font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
  .jstep h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
  .jstep p { font-size: 13px; color: var(--muted); line-height: 1.55; }
  .testimonials-inner { margin: 0 auto;}
  .testimonials h2 { text-align: center; font-size: 22px; font-weight: 600; color: var(--action-ink); margin-bottom: 32px; }
  .tq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .tq { padding: 24px;}
  .tq-text { color: var(--surface-3); line-height: 1.65; margin-bottom: 16px;}
  .tq-who { display: flex; align-items: center; gap: 12px; }
  .tq-av { width: 38px; height: 38px; border-radius: var(--radius-tile); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--action-ink); background: var(--action); }
  .tq:nth-child(2n) .tq-av { background: var(--sage); }
  .tq-name { font-size: 13px; font-weight: 600; color: var(--action-ink); }
  .tq-role { font-size: 12px; color: var(--line); }
  .teach-faq { margin: 0 auto;}
  .teach-faq h2 { text-align: center; font-size: 24px; font-weight: 600; color: var(--ink); margin-bottom: 28px; }
  .faq-item { margin-bottom: 12px; overflow: hidden;}
  .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-size: 14px; font-weight: 500; color: var(--ink); user-select: none;}
  .faq-q i { transition: transform var(--duration-fast); color: var(--muted); }
  .faq-item.open .faq-q i { transform: rotate(180deg); }
  .faq-a { max-height: 0; overflow: hidden; padding: 0 20px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
  .faq-item.open .faq-a { max-height: 200px; padding: 0 20px 20px; }
  .tcta { text-align: center;}
  .tcta h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px;}
  .tcta p { font-size: 15px; margin: 12px auto 28px; line-height: 1.6;}
  @media (max-width: 900px) {
    .thero, .journey { grid-template-columns: 1fr; }
    .why-grid { grid-template-columns: 1fr; }
    .tq-grid { grid-template-columns: 1fr; }
    .thero h1 { font-size: 30px; }
    .thero { padding: 36px 20px 40px; }
    .why, .testimonials { padding: 36px 20px; }
    .journey { padding: 40px 20px; }
    .teach-faq { padding: 36px 20px; }
    .tcta { padding: 48px 20px; }
  }

/* terms.html */
.pg { margin: 0 auto;}
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;}
  .eyebrow .spark { font-size: 13px;}
  .doc-head h1 { color: var(--ink);}
  .doc-head .updated { font-size: 13px; display: inline-flex; gap: 8px; align-items: center;}
  .doc-intro { font-size: 15px; color: var(--ink-2); line-height: 1.72; margin-top: 16px; max-width: 620px;}
  .doc-toc { display: flex; flex-wrap: wrap; gap: 8px;}
  .doc-toc a { font-size: 12.5px; font-weight: 600; background: var(--lotus-soft); border-radius: var(--radius-tile); padding: 8px 16px; min-height: 34px; display: inline-flex; align-items: center;}
  .doc-toc a:hover { background: var(--surface-3);}

  .doc-sec { border-top: 1px solid var(--line); scroll-margin-top: 82px;}
  .doc-body h2 { display: flex; gap: 12px; align-items: center; font-weight: 700; color: var(--ink); letter-spacing: -0.3px; margin-bottom: 12px;}
  .doc-num { flex-shrink: 0; font-size: 13px; font-weight: 700; border: 1px solid var(--sage); display: inline-flex; align-items: center; justify-content: center;}
  .doc-body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.72; margin-bottom: 12px;}
  .doc-body p:last-child { margin-bottom: 0;}
  .doc-body ul { margin: 4px 0 12px; padding: 0; list-style: none;}
  .doc-body li { position: relative; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; padding-left: 20px; margin-bottom: 8px;}
  .doc-body li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 0.35rem; height: 0.35rem; border-radius: var(--radius-node); background: var(--sage);}
  .doc-body a { color: var(--action); font-weight: 600;}
  .doc-body strong { color: var(--ink); font-weight: 600;}

  .doc-plain { border: 1px solid var(--line); padding: 16px 20px; position: sticky; top: 84px;}
  .doc-plain .pl-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--action); margin-bottom: 8px;}
  .doc-plain p { font-size: 13.5px; color: var(--ink-2); line-height: 1.62;}

  .doc-end { margin-top: 36px; border-top: 1px solid var(--line); padding-top: 28px; font-size: 14px; color: var(--muted); line-height: 1.7;}
  .doc-end a { color: var(--action); font-weight: 600;}

  @media (max-width: 780px) {
    .doc-head { padding: 36px 0 20px; }
    .doc-head h1 { font-size: 28px; }
    .doc-sec { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
    .doc-plain { position: static; }
  }

/* trial.html */
.tl-wrap { max-width: 620px; margin: 0 auto; padding: 20px 20px calc(48px + var(--safe-bottom)); }
  .tl-head { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 20px 20px; margin-bottom: 16px; }
  .tl-avatar { width: 50px; height: 50px; border-radius: var(--radius-tile); color: var(--action-ink); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; flex-shrink: 0; }
  .tl-head-name { font-size: 17px; font-weight: 600; color: var(--ink); }
  .tl-head-name a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
  .tl-head-sub { font-size: 13px; color: var(--muted); }
  /* Who the lesson is for outranks the subject line beneath it. */
  .tl-head-student { color: var(--ink-2); font-weight: 500; }
  .tl-msg { width: var(--control-h); height: var(--control-h); border-radius: var(--radius-tile); background: var(--lotus-soft); color: var(--action); display: flex; align-items: center; justify-content: center; font-size: 19px; text-decoration: none; flex-shrink: 0; }

  /* status card (shared by the polled partial) */
  .ts { display: block; }
  .ts-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; text-align: center; }
  .ts-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-tile); margin-bottom: 16px; }
  /* .warn is payState's name for the same tone the status badges call .wait. */
  .ts-badge.wait, .ts-badge.warn { background: var(--warning-soft); color: var(--warning); }
  .ts-badge.ok   { background: var(--sage-soft); color: var(--sage-deep); }
  .ts-badge.live { background: var(--danger-soft); color: var(--danger); }
  .ts-badge.done { background: var(--lotus-soft); color: var(--lotus-ink); }
  .ts-badge.dead { background: var(--surface-3); color: var(--muted); }
  .ts-h { font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .ts-p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
  .ts-spin { font-size: 34px; color: var(--action); margin-bottom: 12px; display: inline-block; animation: tsspin var(--duration-slow) var(--ease-linear) infinite; }
  @keyframes tsspin { to { transform: rotate(360deg); } }
  /* Waiting on a person, not on a request. A spinner promised the machine was
     working on it; nothing is working on it until the tutor opens their phone. */
  .ts-await { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: var(--radius-node); background: var(--surface-2); color: var(--muted); font-size: 20px; }
  .ts-meta { text-align: left; background: var(--paper); border-radius: var(--radius-tile); padding: 16px 16px; margin: 16px 0; }
  .ts-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
  .ts-row i { color: var(--muted); width: 18px; text-align: center; }
  .ts-link { color: var(--action); font-weight: 500; word-break: break-all; }
  .ts-live-join { gap: 10px; margin: 0 0 20px; }
  .ts-live-join span { flex: 1; }
  .ts-live-join i:last-child { opacity: .72; }
  .ts-session-context { margin-top: 20px; }
  /* factual live timer (in_progress) */
  .ts-card--live .ts-tl { margin: 0; padding-block: 20px; border-block: 1px solid var(--line); }
  .ts-tl-count { font-size: 40px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
  .ts-tl-sub { font-size: 12px; color: var(--muted); margin-bottom: 20px; }
  /* the timer runs off started_at, so a late start needs saying out loud */
  .ts-late { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: -12px 0 16px; }
  .ts-tl-sub .ts-tl-over { display: none; }
  .ts-tl.overtime .ts-tl-left { display: none; }
  .ts-tl.overtime .ts-tl-over { display: inline; }
  .ts-tl.overtime .ts-tl-count { color: var(--danger); }
  .ts-tl-track { position: relative; height: 4px; background: var(--line); border-radius: var(--radius-tile); margin: 0 8px; }
  .ts-tl-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--action); border-radius: var(--radius-tile); transform: scaleX(0); transform-origin: left center; transition: transform var(--duration-slow) var(--ease-linear); }
  .ts-tl-marker { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -8px 0 0 -8px; border-radius: var(--radius-tile); background: var(--action); transition: transform var(--duration-slow) var(--ease-linear); }
  .ts-tl-fact { margin-top: 14px; color: var(--muted); font-size: 12px; }
  .ts-btn { width: 100%; border: none; border-radius: var(--radius-tile); padding: 16px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; margin-top: 8px; }
  .ts-btn.primary { background: var(--action); color: var(--action-ink); }
  .ts-btn.primary:hover { background: var(--action-hover); }
  .ts-btn.go { background: var(--sage); color: var(--action-ink); }
  .ts-btn.stop { border: 1px solid color-mix(in oklch, var(--danger) 42%, var(--line)); background: var(--surface); color: var(--danger); }
  .ts-btn.stop:hover { background: var(--danger-soft); }
  .ts-btn:disabled { cursor: not-allowed; opacity: .5; }
  /* One primary per card. "Book your next lesson" was a second indigo primary
     stacked against "Submit review", so neither read as the main action. */
  .ts-btn.secondary { background: var(--surface); color: var(--action); border: 1px solid var(--action); }
  .ts-btn.secondary:hover { background: var(--lotus-soft); }
  .ts-btn.ghost { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
  /* An anchor wearing .ts-btn still has to sit like the buttons around it. */
  a.ts-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
  /* Withdrawing a request is a real action but not the one to reach for first,
     so it reads as a link. It was the only button-shaped element on the waiting
     screen, which made undoing the request the largest target on it. */
  .ts-cancel {
    display: block; width: 100%; margin-top: 12px; padding: 12px;
    min-height: 44px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font: inherit; font-size: 13px;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .ts-cancel:hover { color: var(--danger); }
  .ts-input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px 12px; font-size: 1rem; margin-bottom: 8px; }
  .ts-actions { display: flex; gap: 12px; }
  .ts-actions .ts-btn { margin-top: 0; }

  /* star rating (CSS-only) */
  /* Star rating: real buttons drive a hidden field (no fragile hidden-radio/label
     activation). Natural left→right order; JS toggles the .on class. */
  /* Numbered square rating pips keep the scale legible on touch and desktop. */
  .ts-stars-hint { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
  .ts-stars-row { display: flex; align-items: center; justify-content: center; }
  .ts-stars { display: inline-flex; justify-content: center; gap: 4px; margin: 8px 0; }
  .ts-star { position: relative; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; }
  .ts-star::before { position: absolute; z-index: 0; inset: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-node); background: var(--surface-3); content: ""; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
  .ts-star-value { position: relative; z-index: 1; }
  .ts-star.on { color: var(--action-ink); }
  .ts-star.on::before { border-color: var(--lotus); background: var(--lotus); }
  .ts-star:active { color: var(--action-ink); }
  .ts-star:active::before { border-color: var(--lotus); background: var(--lotus); }
  @media (hover: hover) {
    .ts-stars:hover .ts-star { color: var(--action-ink); }
    .ts-stars:hover .ts-star::before { border-color: var(--lotus); background: var(--lotus); }
    .ts-stars .ts-star:hover ~ .ts-star { color: var(--ink-2); }
    .ts-stars .ts-star:hover ~ .ts-star::before { border-color: var(--line-strong); background: var(--surface-3); }
  }
  .ts-star:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .ts-stars-echo { min-height: 1.25em; margin: 0 0 4px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
  .ts-complete-intro { margin-bottom: 24px; text-align: left; }
  .ts-complete-intro h2 { margin: 0; font: 550 1.65rem/1.12 var(--font-editorial); letter-spacing: -.02em; }
  .ts-complete-intro p { max-width: 62ch; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
  .ts-review-section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
  /* Whatever precedes it already drew a divider (the journal panel's own edge,
     or .ts-pay's u-divider-top), so the section's border would be the second
     rule 24px below the first. Its padding-top still carries the spacing. */
  .ts-card > .learning-entry + .ts-review-section,
  .ts-card > .ts-pay + .ts-review-section { margin-top: 0; border-top: 0; }
  .ts-review-section form { margin-top: 12px; }
  .ts-comment-field { display: grid; gap: 6px; margin-top: 8px; text-align: left; color: var(--ink-2); font-size: 13px; font-weight: 650; }
  .ts-comment-field small { color: var(--muted); font: inherit; font-weight: 400; }
  .ts-comment-field .ts-input { margin: 0; font-weight: 400; }
  .ts-dashboard-return { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; text-decoration: none; }
  .ts-review { text-align: left; border-top: 1px solid var(--surface-2); padding-top: 16px; margin-top: 16px; }
  .ts-review-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .ts-review-text { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-top: 4px; }
  .ts-correction { display: inline-flex; min-height: 44px; align-items: center; margin-top: 8px; color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
  .ts-correction:hover { color: var(--action); }

  @media (max-width: 30rem) {
    .tl-wrap { padding-inline: 16px; }
    .tl-head, .ts-card { padding: 16px; }
    .ts-stars { width: 100%; gap: 0; }
    .ts-star { flex: 1 1 var(--control-h); min-width: var(--control-h); height: var(--control-h); }
  }

  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }

/* trial_new.html */
/* 560px centred a narrow column in a 1440px viewport while squeezing seven day
   columns into ~470px, so the desktop parent got a WORSE schedule than the
   space allowed. Widen once the schedule is the thing being read. */
.tn-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px calc(48px + var(--safe-bottom)); }
  @media (min-width: 60rem) { .tn-wrap { max-width: 760px; } }
  .tn-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 24px; }
  .tn-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 4px; color: var(--muted); font-size: 13px; text-decoration: none; }
  .tn-back:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
  .tn-tutor { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
  .tn-avatar { width: 52px; height: 52px; border-radius: var(--radius-tile); color: var(--action-ink); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; flex-shrink: 0; }
  .tn-tutor-name { font-size: 17px; font-weight: 600; color: var(--ink); }
  .tn-tutor-sub { font-size: 13px; color: var(--muted); }
  .tn-field { margin-bottom: 16px; }
  /* Two questions instead of six fields. Every control had the same weight, so
     the schedule — the only thing this page exists to collect — read as the
     sixth of six equal boxes. The heading gives the "when" half a floor its
     fields sit under, and more space above than below, so the break registers
     as a new question rather than another row. */
  .tn-sec { border: 0; padding: 0; margin: 0; }
  .tn-sec + .tn-sec { margin-top: 28px; }
  .tn-sec-h { font-size: 17px; font-weight: 650; color: var(--ink); margin: 0 0 14px; letter-spacing: -.01em; }
  .tn-sec--when { padding-top: 20px; border-top: 1px solid var(--line); }
  .tn-label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
  .tn-input, .tn-select, .tn-textarea {
    width: 100%; border: 1px solid var(--line); border-radius: var(--radius-tile);
    padding: 12px 12px; font-size: 15px; color: var(--ink); background: var(--surface);
  }
  .tn-textarea { min-height: 84px; resize: vertical; }
  /* min-width:130px let one option wrap to two lines while its sibling stayed
     on one, so the checked option was taller and the row jittered between
     tutors. Equal columns, equal height, no wrap. */
  .tn-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tn-fmt { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; }
  .tn-fmt input { accent-color: var(--action); }
  .tn-fmt:has(input:checked) { border-color: var(--action); background: var(--lotus-soft); }
  .tn-submit { width: 100%; background: var(--action); color: var(--action-ink); border: none; border-radius: var(--radius-tile); padding: 16px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; margin-top: 8px; }
  .tn-submit:hover { background: var(--action-hover); }
  .tn-err { background: var(--danger-soft); color: var(--danger); font-size: 13px; padding: 12px 12px; border-radius: var(--radius-tile); margin-bottom: 12px; }
  .tn-err:empty { display: none; }
  /* A failure that names a way forward. The cap used to be a dead end whose
     only exit was the browser's back button. */
  .tn-err-go { display: inline-block; margin-top: 6px; color: var(--danger); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .tn-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 16px; line-height: 1.5; }

  /* The chosen start time, read back where it was chosen. */
  .tn-chosen {
    display: flex; align-items: center; gap: 8px; min-height: 44px;
    margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--action); border-radius: var(--radius-tile);
    background: var(--lotus-soft); color: var(--ink);
    font-size: 15px; font-weight: 600; font-feature-settings: var(--font-numeric);
  }
  /* A filled lotus node marks the choice — the same square the design system
     already uses for an active state, not a glyph standing in for an icon. */
  .tn-chosen::before { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--radius-node); background: var(--lotus); content: ""; }
  .tn-chosen.is-empty { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); font-weight: 500; }
  .tn-chosen.is-empty::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

  /* What they are about to send, restated at the commit point. */
  .tn-summary { margin: 20px 0 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-tile); background: var(--surface-2); text-align: left; }
  .tn-summary-h { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .02em; }
  .tn-summary-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
  .tn-summary-list li { color: var(--ink); font-size: 14px; line-height: 1.5; }
  @media (max-width: 860px) { .mtab { display: none; } body { padding-bottom: 0; } }

/* tutor_sessions.html */
.gs-page { min-height: 100dvh; background: var(--paper); }
  .gs-main { max-width:1120px; margin:0 auto; padding:32px 0 64px; }
  .gs-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line); }
  .gs-kicker { display:flex; align-items:center; gap:8px; margin-bottom:8px; color:var(--action); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
  .gs-kicker::before { content:''; width:18px; height:6px; background:var(--lotus); }
  .gs-title { color:var(--ink); font-size:32px; font-weight:700; letter-spacing:-.7px; line-height:1.15; }
  .gs-lede { max-width:610px; margin-top:8px; color:var(--muted); font-size:14px; line-height:1.6; }
  .gs-layout { display:grid; grid-template-columns:minmax(0, 1fr) 370px; gap:24px; align-items:start; }
  .gs-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .gs-section-head h2 { color:var(--ink); font-size:16px; font-weight:600; }
  .gs-count { color:var(--muted-2); font-size:12px; }
  .gs-list { display:flex; flex-direction:column; gap:12px; }
  .gs-class { display:grid; grid-template-columns:70px minmax(0, 1fr); background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); }
  .gs-date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:164px; padding:16px 12px; background:var(--surface-2); border-right:1px solid var(--line); }
  .gs-day { color:var(--ink); font-size:30px; font-weight:700; font-feature-settings:var(--font-numeric); line-height:1; }
  .gs-month { margin-top:4px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  .gs-class-body { min-width:0; padding:16px 20px; }
  .gs-class-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .gs-class-title { color:var(--ink); font-size:15px; font-weight:600; line-height:1.35; }
  .gs-status { flex:0 0 auto; padding:4px 8px; background:var(--sage-soft); color:var(--sage-deep); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
  .gs-status.confirmed { background:var(--lotus-soft); color:var(--lotus-ink); }
  .gs-status.cancelled { background:var(--danger-soft); color:var(--danger); }
  .gs-desc { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.5; }
  .gs-meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; color:var(--ink-2); font-size:12px; }
  .gs-meta span { display:inline-flex; align-items:center; gap:4px; }
  .gs-roster { display:grid; grid-template-columns:auto minmax(80px, 1fr) auto; align-items:center; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
  .gs-roster-number { color:var(--ink); font-size:18px; font-weight:700; font-feature-settings:var(--font-numeric); }
  .gs-roster-number small { color:var(--muted); font-size:11px; font-weight:500; }
  .gs-track { height:6px; background:var(--surface-3); overflow:hidden; }
  .gs-fill { height:100%; background:var(--lotus); }
  .gs-min { color:var(--muted-2); font-size:10px; white-space:nowrap; }
  .gs-empty { padding:36px 24px; background:var(--surface); border:1px solid var(--line); text-align:center; }
  .gs-empty-mark { display:inline-grid; grid-template-columns:repeat(3, 8px); gap:4px; margin-bottom:16px; }
  .gs-empty-mark i { width:8px; height:8px; background:var(--line-strong); }
  .gs-empty-mark i:first-child { background:var(--lotus); }
  .gs-empty h3 { color:var(--ink); font-size:15px; font-weight:600; }
  .gs-empty p { max-width:380px; margin:8px auto 0; color:var(--muted); font-size:13px; line-height:1.55; }

  .gs-compose { position:sticky; top:82px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card); }
  .gs-compose-head { padding:20px 20px 16px; background:var(--ink); color:var(--action-ink); }
  .gs-compose-head small { display:block; margin-bottom:4px; color:var(--line-strong); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
  .gs-compose-head h2 { font-size:18px; font-weight:600; }
  .gs-form { display:flex; flex-direction:column; gap:16px; padding:20px; }
  .gs-field label, .gs-legend { display:block; margin-bottom:8px; color:var(--ink-2); font-size:11px; font-weight:600; }
  .gs-field input, .gs-field textarea, .gs-field select { width:100%; border:1px solid var(--line-strong); border-radius:var(--radius-tile); background:var(--surface); color:var(--ink); padding:12px 12px; font-size:13px; outline:none; }
  .gs-field textarea { min-height:72px; resize:vertical; line-height:1.5; }
  .gs-field input:focus, .gs-field textarea:focus, .gs-field select:focus { border-color:var(--action); }
  .gs-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .gs-format { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .gs-format input { position:absolute; width:1px; height:1px; opacity:0; }
  .gs-format span { display:flex; align-items:center; gap:8px; min-height:42px; padding:8px 12px; border:1px solid var(--line-strong); color:var(--ink-2); font-size:12px; cursor:pointer; }
  .gs-format input:checked + span { border-color:var(--action); background:var(--lotus-soft); color:var(--lotus-ink); font-weight:600; }
  .gs-format input:focus-visible + span { outline:2px solid var(--ink); outline-offset:2px; }
  .gs-note { margin-top:-4px; color:var(--muted-2); font-size:10px; line-height:1.45; }
  .gs-submit { width:100%; min-height:46px; border:0; background:var(--action); color:var(--action-ink); font-size:13px; font-weight:600; cursor:pointer; }
  .gs-submit:hover { background:var(--action-hover); }
  .gs-toast { margin-bottom:16px; padding:12px 12px; border-left:3px solid var(--sage); background:var(--sage-soft); color:var(--sage-deep); font-size:12px; }
  @media (max-width:1099px) { .gs-main { padding:28px 24px 56px; } }
  @media (max-width:820px) {
    .gs-layout { grid-template-columns:1fr; }
    .gs-compose { position:static; grid-row:1; }
    .gs-hero { align-items:flex-start; }
  }
  @media (max-width:560px) {
    .gs-main { padding:24px 16px 44px; }
    .gs-title { font-size:27px; }
    .gs-row { grid-template-columns:1fr; }
    .gs-class { grid-template-columns:58px minmax(0, 1fr); }
    .gs-date { min-height:100%; }
    .gs-class-body { padding:16px; }
    .gs-roster { grid-template-columns:auto 1fr; }
    .gs-min { grid-column:1 / -1; }
  }

/* verify_email.html */
.auth-wrap{display:flex;align-items:center;justify-content:center}.auth-card{text-align:center}.auth-title{margin:24px 0 8px}.auth-sub{font-size:14px;line-height:1.6}.auth-btn{width:100%;border:0;padding:12px;font:500 15px inherit;cursor:pointer;margin-top:24px}.auth-alt{font-size:14px;color:var(--ink-2);margin-top:20px}.auth-alt a{text-decoration:none;font-weight:500}
  .mtab{ display:none;}
  .wel-wrap{ margin:0 auto; text-align:center;}
  .wel-spark{ margin-bottom:16px;}
  .wel-wrap h1{ color:var(--ink); margin:0 0 8px;}
  .wel-wrap p.sub{ font-size:14.5px; margin:0 0 28px; line-height:1.5;}

  .wel-opts{ display:grid; gap:12px; text-align:left; }
  .wel-opt{ display:flex; align-items:center; gap:16px; padding:20px 16px; text-decoration:none;}
  .wel-opt-ic{ width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center;}
  .wel-opt-txt b{ display:block; font-size:15px; font-weight:600;}
  .wel-opt-txt span{ font-size:12.5px; color:var(--muted); }
  .wel-opt-arrow{ margin-left:auto; color:var(--muted-2, var(--muted-2)); }

  .wel-skip{ display:inline-block; margin-top:24px; font-size:13.5px; font-weight:600; color:var(--muted); text-decoration:none; }
  .wel-skip:hover{ color:var(--action); }

/* Centralized static utility rules. */
.u-self-start-pad { align-self:flex-start;padding:8px 12px; }
.u-bare-button { background:0;border:0;cursor:pointer; }
.u-tone-lotus { background:var(--lotus-soft);color:var(--lotus-ink); }
.u-tone-lotus-action { background:var(--lotus-soft);color:var(--action); }
.u-app-canvas { background:var(--paper);min-height:100dvh; }
.u-tone-sage { background:var(--sage-soft);color:var(--sage-deep); }
.u-tone-surface-action { background:var(--surface-3);color:var(--action); }
.u-tone-surface { background:var(--surface-3);color:var(--ink); }
.u-tone-warning { background:var(--warning-soft);color:var(--warning); }
.u-borderless-top { border-top:none; padding-top:8px; }
.u-borderless { border:0; }
.u-link-plain { color:inherit;text-decoration:none; }
.u-ink-action { color:var(--action); }
.u-action-13 { color:var(--action);font-size:13px; }
.u-action-icon { color:var(--action);font-size:15px;flex-shrink:0;margin-top:0; }
.u-ink-sage { color:var(--sage); }
.u-sage-note { color:var(--sage);font-size:12px;margin:0 0 12px; }
.u-sage-20 { color:var(--sage);font-size:20px; }
.u-sage-status { color:var(--sage);font-size:14px;min-height:20px; }
.u-ink-line { color:var(--line-strong); }
.u-muted-link { color:var(--muted);text-decoration:none; }
.u-ink-muted2 { color:var(--muted-2); }
.u-muted2-14 { color:var(--muted-2);font-size:14px; }
.u-ink-strong { color:var(--ink); }
.u-sage-deep-note { color:var(--sage-deep);font-size:12px;margin:0 0 12px; }
.u-sage-deep-note-13 { color:var(--sage-deep);font-size:13px;margin:0 0 12px; }
.u-sage-deep-strong { color:var(--sage-deep);font-weight:600; }
.u-warning-strong { color:var(--warning);font-weight:600; }
.u-link-block { display:block;text-align:center;text-decoration:none; }
.u-link-block-mt16 { display:block;text-align:center;text-decoration:none;margin-top:16px; }
.u-stack-12 { display:flex;flex-direction:column;gap:12px; }
.u-stack-20 { display:flex;flex-direction:column;gap:20px; }
.u-stack-8 { display:flex;flex-direction:column;gap:8px; }
/* This authorises publishing the writer's name alongside their words. At 12px
   --muted it was the quietest text in its card — smaller and fainter than
   everything it governs — sitting under an 800-character textarea. A consent
   control reads at the size of the thing it consents to. */
.u-legend-row { display:flex;gap:10px;align-items:flex-start;min-height:var(--control-h);padding:8px 0;font-size:13px;line-height:1.5;color:var(--ink-2); }
.u-legend-row input[type="checkbox"] { width:18px;height:18px;flex-shrink:0;margin-top:1px;accent-color:var(--action); }
.u-inline-middle { display:inline-block;vertical-align:middle; }
.u-flex-1 { flex:1; }
.u-flex-fill { flex:1;min-width:0; }
.u-section-label { font-size:12.5px; font-weight:600; color:var(--ink); margin:20px 0 8px; }
.u-action-badge { font-size:12px;color:var(--action);font-weight:600; }
.u-hint { font-size:12px;color:var(--muted); }
.u-hint-block { font-size:12px;color:var(--muted);line-height:1.5;margin:0 0 12px; }
.u-hint-tight { font-size:12px;color:var(--muted);margin-top:4px; }
.u-hint-muted2 { font-size:12px;color:var(--muted-2); }
.u-label-strong { font-size:12px;color:var(--ink-2);font-weight:600; }
.u-icon-inline { font-size:12px;margin-right:4px; }
.u-text-13 { font-size:13px; }
.u-action-row-link { font-size:13px;color:var(--action);text-decoration:none;display:flex;min-height:var(--control-h);align-items:center;gap:8px; }
.u-muted-flush { font-size:13px;color:var(--muted);line-height:1.55;margin:0; }
.u-muted2-row { font-size:13px;color:var(--muted-2);padding:8px 0; }
.u-text-15 { font-size:15px;font-weight:500;color:var(--ink); }
.u-text-34 { font-size:34px; }
.u-ink-medium { font-weight:500;color:var(--ink); }
.u-row-between { justify-content:space-between;display:flex;align-items:center;gap:8px; }
.u-mb-0 { margin-bottom:0; }
.u-mb-16 { margin-bottom:16px; }
.u-mb-8 { margin-bottom:8px; }
.u-push-right { margin-left:auto; }
.u-mt-12 { margin-top:12px; }
.u-mt-16 { margin-top:16px; }
.u-divider-note { margin-top:16px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:8px;font-size:12px;color:var(--muted);line-height:1.5; }
.u-divider-top { margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in oklch, var(--ink) 8%, transparent); }
.u-mt-24 { margin-top:24px; }
.u-hint-mt { margin-top:8px;font-size:12px;color:var(--muted); }
.u-mb-16-flush { margin:0 0 16px; }
.u-flush-pad-12 { margin:0;padding:12px; }
.u-callout { margin:4px 0 16px;padding:12px 12px;background:var(--surface-2);border-radius: var(--radius-tile);font-size:14px;color:var(--ink-2); }
.u-img-fluid { max-width:100%;height:auto; }
.u-img-120 { max-width:120px; }
.u-divider-bottom { padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:4px; }
.u-pad-head { padding: 12px 32px 0; }
.u-link-block-mt8 { text-align:center;display:block;text-decoration:none;margin-top:8px; }
.u-center-mt12 { text-align:center;margin-top:12px; }
.u-center-mt8 { text-align:center;margin-top:8px; }
.u-link-bare { text-decoration:none; }
.u-img-cover { width:100%;height:100%;object-fit:cover; }
.u-textarea-compact { width:100%;min-height:88px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:var(--radius-tile);font:inherit;font-size:13px;line-height:1.45; }
.u-icon-1em { width:1em;height:1em;display:inline-block;vertical-align:-0.125em; }
.u-w-30 { width:30%; }
.u-w-35 { width:35%; }
.u-w-40 { width:40%; }
.u-w-45 { width:45%; }
.u-w-55 { width:55%; }
.u-w-60 { width:60%; }
.u-w-72 { width:72%; }
.u-w-80 { width:80%; }
.u-w-85 { width:85%; }

/* Shared Growth, Made Visible redesign layer. */

.rqm-card { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.rqm-main { flex: 1; min-width: 0; }
.rqm-subject { color: var(--ink); font-size: 0.9375rem; font-weight: 600; }
.rqm-meta { margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; }
.rqm-status { padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); background: var(--paper); color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.rqm-status.rqm-open { background: var(--lotus-soft); color: var(--lotus-ink); }
.rqm-close { padding: 0.25rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.rqm-close:hover { color: var(--danger); }
.rqm-empty { color: var(--muted); font-size: 0.8125rem; }
.rqm-empty a { color: var(--lotus-ink); }

.tc-list { display: flex; flex-direction: column; gap: 0.75rem; }
.tc { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); text-decoration: none; }
.tc:hover { border-color: var(--line-strong); }
.tc-av { display: flex; width: 2.625rem; height: 2.625rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-tile); color: var(--avatar-ink); font-size: 0.9375rem; font-weight: 600; }
.tc-body { flex: 1; min-width: 0; }
.tc-name { overflow: hidden; color: var(--ink); font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
/* Who the lesson is for, on the card. Two children produced two indistinguishable rows. */
.tc-student { overflow: hidden; color: var(--ink-2); font-size: 0.75rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tc-meta { overflow: hidden; color: var(--muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.tc-badge { flex-shrink: 0; padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.6875rem; font-weight: 600; }
.tc-badge.wait { background: var(--spark-soft); color: var(--spark-ink); }
.tc-badge.ok { background: var(--sage-soft); color: var(--sage-deep); }
.tc-badge.live { background: var(--danger-soft); color: var(--danger); }
.tc-badge.done { background: var(--lotus-soft); color: var(--lotus-ink); }
.tc-badge.dead { background: var(--surface-2); color: var(--muted); }
.tc-empty { padding: 0.5rem 0.25rem; color: var(--muted); font-size: 0.8125rem; }

/* Tutor request list: what still needs an answer, under a heading that carries
   the true count even when the widget shows fewer rows than that. */
.tc-groups { display: flex; flex-direction: column; gap: 1.5rem; }
.tc-group-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.625rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.tc--pending { border-color: var(--line-strong); }
.tc-more { display: inline-flex; min-height: var(--control-h); align-items: center; gap: 0.375rem; margin-top: 0.5rem; color: var(--action); font-size: 0.8125rem; font-weight: 650; text-decoration: none; }
.tc-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Confirmed schedule: the time leads, because that is what the reader came for. */
.tc-when { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.125rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tc-soon { padding: 0.125rem 0.5rem; border-radius: var(--radius-pill); background: var(--sage-soft); color: var(--sage-deep); font-size: 0.6875rem; font-weight: 700; }
.tc--upcoming { border-color: var(--line); }

/* Two-sided settlement. Only agreement gets the confirming tone; a single
   side's report is quieter and names who said it. */
.tc-pay { font-weight: 650; }
.tc-pay--ok { color: var(--sage-deep); }
.tc-pay--half { color: var(--ink-2); }
.tc-pay--warn { color: var(--warning); }
.ts-badge.half { background: var(--surface-3); color: var(--ink-2); }
/* The family's own words, in their own line — an email preview, not a field. */
.tc-note { margin: 0.375rem 0 0; overflow: hidden; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

@media (min-width: 51.3125rem) { }

*, *::before, *::after { box-sizing: border-box;}

html {
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
  scrollbar-gutter: stable;}

body {
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  overflow-x: clip;
  text-rendering: optimizeLegibility;}

.pips i { position: relative; overflow: hidden;}
.pips i.is-full { background: var(--lotus); }
.pips i.is-partial::after {
  position: absolute;
  inset: 0;
  background: var(--lotus);
  content: "";
  transform: scaleX(var(--pip-fill));
  transform-origin: left;
}

.dynamic-avatar { background: var(--avatar-bg) !important; }
.avatar-clip { overflow: hidden !important; padding: 0 !important; }
.dynamic-progress { width: var(--progress-size) !important; }
.dynamic-progress-color { background: var(--progress-color) !important; }
.tchart-fill { height: var(--bar-size) !important;}
.histo-bar { width: var(--bar-size) !important;}
.is-hidden { display: none !important; }
/* Present to a screen reader, absent from the picture. For headings a layout
   deliberately does not draw but the document still needs, so suppressing one
   visually cannot leave the headings beneath it without a parent. */
.u-sr-only {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* Chip inputs must stay keyboard-focusable: clip them instead of display:none,
   which drops them from the tab order and the a11y tree. Covers every .chip filter
   (search focus, subjects, districts, travel areas). */
.chip > input.is-hidden {
  position: absolute !important;
  display: inline-block !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.chip:has(input:focus-visible) { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

body, input, button, select, textarea { font-family: var(--font-ui); }

main { min-width: 0; }

h1, h2, .editorial-heading {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-editorial);
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 540;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

h3, h4, h5, h6 {
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-style: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

:where(button, .site-header a, .desktop-sidebar a, .admin-route-nav a, .mtab a, .statement-footer a, .growth-hero__actions a, .cta-btns a, .thero-actions a, [role="tab"]) {
  white-space: nowrap;
}

p { text-wrap: pretty; }

::selection { background: var(--lotus-soft); color: var(--ink); }

a { text-underline-offset: 0.18em;}

a, button, input, select, textarea, summary, [tabindex] { -webkit-tap-highlight-color: transparent; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-outer) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 1px var(--focus-inner) !important;
}

:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

:where(button, [role="button"], .nav-signup, .hbtn-primary, .hbtn-secondary, .hbtn-indigo, .u-cta, .class-button) {
  min-height: var(--control-h);
  border-radius: var(--radius-control) !important;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}

:where(button, [role="button"], .nav-signup, .hbtn-primary, .hbtn-secondary, .hbtn-indigo, .u-cta, .class-button):active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
  min-height: var(--control-h);
  border-color: var(--line-strong) !important;
  border-radius: var(--radius-control) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

:where(input, textarea)::placeholder { color: var(--muted-2); opacity: 1; }

:where(.hbtn-primary, .nav-signup, .u-cta, .class-button:not(.secondary):not(.danger)) {
  border-color: transparent !important;
  background: var(--action) !important;
  color: var(--action-ink) !important;
}

:where(.hbtn-primary, .nav-signup, .u-cta, .class-button:not(.secondary):not(.danger)):hover {
  background: var(--action-hover) !important;
}

:where(.hbtn-secondary, .btn-ghost, .class-button.secondary) {
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
}

:where(.hbtn-secondary, .btn-ghost, .class-button.secondary):hover {
  border-color: var(--sage) !important;
  background: var(--sage-soft) !important;
}

/* Turtle carrying a Spark identity */
.logo-mark {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;}

.signal-mark { display: block; flex: 0 0 auto; overflow: visible; }
.signal-mark--dark { display: none; }
:root[data-theme="dark"] .signal-mark--light { display: none; }
:root[data-theme="dark"] .signal-mark--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .signal-mark--light { display: none; }
  :root:not([data-theme]) .signal-mark--dark { display: block; }
}

.logo-mark .wordmark {
  color: var(--logo-ink) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;}

.logo-mark .wordmark .wordmark-u { color: var(--logo-lotus); }

/* Shared public and application header */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: grid;
  min-height: 4.25rem;
  grid-template-columns: auto minmax(11rem, 34rem) auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding: 0 max(var(--content-gutter), var(--safe-right)) 0 max(var(--content-gutter), var(--safe-left));
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklch, var(--paper) 94%, transparent);
  backdrop-filter: blur(16px);
}

.site-header__search { min-width: 0; }

.site-search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
}

.site-search > i {
  position: absolute;
  z-index: 1;
  left: 0.9rem;
  color: var(--muted);
  font-size: 1.05rem;
  pointer-events: none;
}

.site-search input {
  min-width: 0;
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem 0 2.75rem !important;
  border: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  font-size: 0.875rem;
}

.site-search input:focus { background: var(--surface) !important; }

.site-search button {
  min-height: var(--control-h);
  height: var(--control-h);
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-tile) !important;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 650;
}

.site-header__nav,
.site-header__account {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  white-space: nowrap;
}

.site-header__nav a,
.nav-login,
.nav-signout {
  color: var(--ink-2) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

.site-header__nav a,
.nav-login {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
}

.site-header__nav a:hover,
.nav-login:hover { color: var(--action) !important; }

.site-header__nav a[aria-current="page"] { color: var(--ink) !important; }

.site-header__nav a[aria-current="page"]::before {
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  margin-right: 0.5rem;
  border-radius: var(--radius-node);
  background: var(--lotus);
  content: "";
  vertical-align: 0.08em;
}

.nav-signup {
  display: inline-flex;
  min-height: var(--control-h) !important;
  align-items: center;
  padding: 0 1rem !important;
  font-size: 0.8125rem !important;}

.u-avatar-nav,
.desk-account-avatar {
  border-radius: var(--radius-tile) !important;
  background: var(--sage-soft) !important;
  color: var(--sage-deep) !important;
}

.u-avatar-nav,
.msg-bell {
  width: var(--control-h) !important;
  min-width: var(--control-h);
  height: var(--control-h) !important;
  align-items: center;
  justify-content: center;
}

.mobile-header-actions { display: none; margin-left: auto; align-items: center; gap: 0.5rem; }
.mobile-dashboard-return { display: inline-flex; min-height: var(--control-h); align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-size: 0.78rem; font-weight: 650; }

.icon-button {
  display: inline-flex;
  width: var(--control-h);
  min-width: var(--control-h);
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.15rem;
}

/* Native theme popover */
.theme-wrap { position: relative; }

.theme-menu {
  width: min(17rem, calc(100vw - 2rem));
  margin: 0.5rem 0 0 auto;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}

.theme-menu:popover-open {
  display: grid;
  gap: 0.25rem;
  animation: overlay-in var(--duration-fast) var(--ease-enter);
}

.theme-choice {
  display: grid;
  min-height: var(--control-h);
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.theme-choice:hover { background: var(--surface-2); }
.theme-choice[aria-checked="true"] { background: var(--lotus-soft); color: var(--lotus-ink); }
.theme-choice .ti-check { opacity: 0; }
.theme-choice[aria-checked="true"] .ti-check { opacity: 1; }
.mobile-theme-choices { display: grid; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.nav-signout-form { display: inline; margin: 0; }

@keyframes overlay-in {
  from { opacity: 0; transform: translateY(-0.35rem) scale(0.98); }
}

/* Mobile dialogs */
.ui-dialog {
  width: min(34rem, calc(100vw - 1rem));
  max-width: none;
  margin: max(0.5rem, var(--safe-top)) auto auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-dialog);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}

.ui-dialog[open] { animation: dialog-in var(--duration-medium) var(--ease-enter); }
.ui-dialog::backdrop { background: color-mix(in oklch, var(--ink) 45%, transparent); backdrop-filter: blur(3px); }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(-0.8rem) scale(0.985); }
}

.ui-dialog__head {
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}

.ui-dialog__head h2 { margin: 0; font-size: 1.35rem; }
.ui-dialog__body { padding: 1rem; }
.mobile-menu-list { display: grid; gap: 0.25rem; }
.mobile-menu-group + .mobile-menu-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.mobile-menu-group h3 { margin: 0 0 .5rem; color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.mobile-menu-list a { display: flex; min-height: 3rem; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-radius: var(--radius-control); color: var(--ink); font-weight: 600; }
.mobile-menu-list a:hover { background: var(--surface-2); }
#mobile-menu .ui-dialog__body { max-height: calc(100dvh - 5rem - var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu-preferences .lang-sw { min-height: var(--control-h); padding-inline: .75rem; }

/* Shared footer: a statement, then essentials. */
.statement-footer {
  padding: clamp(3rem, 8vw, 7rem) max(var(--content-gutter), var(--safe-right)) calc(2rem + var(--safe-bottom)) max(var(--content-gutter), var(--safe-left));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.statement-footer__inner { max-width: var(--content-wide); margin: 0 auto; }

.statement-footer__statement {
  max-width: 18ch;
  margin: 0 0 clamp(3rem, 8vw, 6rem);
  font-family: var(--font-editorial);
  font-size: clamp(2.4rem, 6vw, 6.5rem);
  font-weight: 430;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.statement-footer__statement .signal-node {
  display: inline-block;
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.12em;
  border-radius: var(--radius-node);
  background: var(--spark);
  vertical-align: 0.12em;
}

.statement-footer__grid {
  display: grid;
  grid-template-columns: minmax(13rem, 1.6fr) repeat(3, minmax(8rem, 1fr));
  gap: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.statement-footer__brand p { max-width: 32ch; color: var(--muted); font-size: 0.8125rem; }
.statement-footer__col h3 { margin: 0 0 0.75rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.statement-footer__col a { display: flex; min-height: var(--control-h); align-items: center; color: var(--ink-2); font-size: 0.8125rem; }
.statement-footer__col a:hover { color: var(--action); }

/* Signed-in shell */
.app-header { grid-template-columns: auto minmax(9rem, 30rem) auto; }
.app-header .mb-dashboard { display: inline-flex; min-height: var(--control-h); align-items: center; gap: 0.5rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-size: 0.78rem; font-weight: 650; }
.app-header .mb-dashboard:hover { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }

.desktop-app-frame {
  width: min(100%, var(--content-wide));
  min-height: calc(100dvh - 4.25rem) !important;
  margin: 0 auto;}

.desktop-app-frame:not(:has(> .desktop-sidebar)) { display: block !important; }

.desktop-app-content { min-width: 0; }

.desktop-sidebar {
  top: 4.25rem !important;
  height: calc(100dvh - 4.25rem) !important;
  border-right: 1px solid var(--line) !important;
  background: var(--surface) !important;}

.desk-nav-label { color: var(--muted) !important; letter-spacing: 0.09em !important; }

.desk-nav-item {
  min-height: 2.75rem !important;
  border-radius: var(--radius-control);
  color: var(--ink-2) !important;
}

.desk-nav-item:hover { background: var(--surface-2) !important; color: var(--ink) !important; }

.desk-nav-item.active {
  box-shadow: none !important;
  background: var(--lotus-soft) !important;
  color: var(--lotus-ink) !important;
}

.desk-nav-item.active::before {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: var(--radius-node);
  background: var(--lotus);
  content: "";
}

.mtab {
  min-height: calc(4.25rem + var(--safe-bottom));
  padding: 0.5rem max(0.25rem, var(--safe-right)) calc(0.5rem + var(--safe-bottom)) max(0.25rem, var(--safe-left)) !important;
  border-color: var(--line) !important;
  background: color-mix(in oklch, var(--surface) 96%, transparent) !important;
  backdrop-filter: blur(14px);}

.mtab-item {
  min-width: 0;
  min-height: 3rem !important;
  border-radius: var(--radius-control);
  color: var(--muted) !important;
}

.mtab-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtab-item.active { color: var(--lotus-ink) !important; }
.mtab-item.active::before { top: 0.2rem !important; border-radius: var(--radius-node); background: var(--lotus) !important; }

/* Components shared across established route templates. */
:where(.u-card, .class-card, .class-panel, .skel-card, .auth-card, .profile-card, .tutor-card, .request-card, .lesson-card, .stat-card) {
  border-color: var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}

:where(.class-card, .u-card, .profile-card, .tutor-card, .request-card, .lesson-card):hover {
  transform: none !important;
}

:where(.badge, .status, .chip, .filter-chip, .class-badge) { border-radius: var(--radius-pill) !important; }

.tabs { gap: clamp(1rem, 3vw, 2rem) !important; overflow-x: auto;}
.tabs a, .tabs button { min-height: var(--control-h); white-space: nowrap;}
.tabs a.on::after, .tabs button.on::after { border-radius: var(--radius-node); background: var(--lotus) !important;}

.steps .step .num {
  border-radius: var(--radius-tile);
  background: var(--surface) !important;}
.steps .step.done .num { border-color: var(--sage) !important; background: var(--sage) !important; color: var(--paper) !important;}
.steps .step.active .num { border-color: var(--lotus) !important; background: var(--lotus) !important; color: var(--surface) !important;}
.steps .bar { min-width: 1rem;}
.steps .bar.on { background: var(--sage) !important;}

/* Guided entry: compact and one-task-at-a-time. */
:where(.auth-page, .welcome-page, .onboard-page, .login-page, .register-page) {
  min-height: calc(100dvh - 4.25rem);
  background: var(--paper) !important;
}

:where(.auth-wrap, .auth-container, .welcome-wrap, .onboard-wrap) {
  width: min(100%, 34rem) !important;
  margin-inline: auto !important;
  padding: clamp(2rem, 7vw, 5rem) var(--content-gutter) !important;
}

:where(.auth-card, .welcome-card, .onboard-card) {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}

:where(.auth-card, .welcome-card, .onboard-card) h1 { font-size: clamp(2rem, 7vw, 3rem) !important; }

.auth-wrap {
  min-height: 100dvh !important;
  padding: clamp(1rem, 5vw, 3rem) !important;
  background: var(--paper) !important;}
.auth-card {
  width: min(100%, 28rem) !important;
  max-width: 28rem !important;
  padding: clamp(1.5rem, 6vw, 3rem) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;}
.auth-title {
  color: var(--ink) !important;
  font-family: var(--font-editorial);
  font-size: clamp(2rem, 7vw, 3rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em;
  line-height: 1;}
.auth-sub { color: var(--muted) !important;}
.auth-field label { color: var(--ink) !important;}
.auth-btn { min-height: var(--control-h); border-radius: var(--radius-control) !important; background: var(--action) !important; color: var(--action-ink) !important;}
.auth-btn:hover { background: var(--action-hover) !important;}
.auth-alt a { color: var(--action) !important;}
.auth-error { border: 1px solid color-mix(in oklch, var(--danger) 40%, var(--line)); border-radius: var(--radius-control) !important; background: var(--danger-soft) !important; color: var(--danger) !important;}
.oauth-actions { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.oauth-button { display: flex; min-height: var(--control-h); align-items: center; justify-content: center; gap: 0.65rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; }
.oauth-button:hover { border-color: var(--action); background: var(--surface-2); }
.oauth-button--zalo { border-color: color-mix(in oklch, #0068ff 45%, var(--line)); color: #0068ff; }
.oauth-button--zalo > span { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: 0.4rem; background: #0068ff; color: white; font-size: 0.8rem; font-weight: 800; }
.auth-provider-note { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.9rem; line-height: 1.55; text-align: left; }

.wel-wrap { width: min(100%, 34rem) !important; max-width: 34rem !important; padding: clamp(3rem, 10vw, 7rem) var(--content-gutter) !important;}
.wel-spark { color: var(--spark) !important;}
.wel-wrap h1 { font-family: var(--font-editorial) !important; font-size: clamp(2.25rem, 8vw, 3.75rem) !important; font-weight: 480 !important; letter-spacing: -0.045em !important; line-height: 1 !important;}
.wel-wrap p.sub { color: var(--muted) !important;}
.wel-opt { min-height: 6rem; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard) !important;}
.wel-opt:hover { border-color: var(--sage) !important; background: var(--sage-soft) !important;}
.wel-opt-ic { border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important; font-size: 1.35rem;}
.wel-opt-txt b { color: var(--ink) !important;}
.wel-opt-txt span, .wel-opt-arrow, .wel-skip { color: var(--muted) !important; }

.onboarding-page { min-height: 100dvh; background: var(--paper); }
.obnav { position: sticky; z-index: 90; top: 0; min-height: 4.25rem !important; height: auto !important; padding: 0 var(--content-gutter) !important; border-color: var(--line) !important; background: var(--surface) !important;}
.obnav-tools { display: flex; margin-left: auto; align-items: center; gap: 0.75rem; }
.obnav-save { margin-left: 0 !important; color: var(--muted) !important;}
.obbar-wrap { padding: 1.25rem var(--content-gutter) 0 !important;}
.obbar-info { max-width: 64rem !important;}
.obbar { height: 0.45rem !important; max-width: 64rem !important; border-radius: var(--radius-pill) !important; background: var(--surface-3) !important;}
.obbar-fill { width: 100% !important; border-radius: var(--radius-pill) !important; background: var(--lotus) !important; transform: scaleX(var(--progress)); transform-origin: left center; transition: transform var(--duration-medium) var(--ease-standard) !important;}
.obbody { grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.55fr) minmax(13rem, 0.75fr) !important; max-width: 68rem !important; gap: 1.5rem !important; padding: 2rem var(--content-gutter) 5rem !important;}
.obstep { min-height: 2.75rem; border-radius: var(--radius-control) !important;}
.obstep.active { background: var(--lotus-soft) !important;}
.obstep-ic { border-radius: var(--radius-tile) !important;}
.obstep-ic.done { background: var(--sage) !important; color: var(--paper) !important;}
.obstep-ic.active { background: var(--lotus) !important; color: var(--surface) !important;}
.obstep-ic.todo { background: var(--surface-3) !important; color: var(--muted) !important;}
.obmain, .obtip { border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; box-shadow: var(--shadow-card); }
.obmain h2 { font-family: var(--font-editorial) !important; font-size: clamp(1.8rem, 4vw, 2.6rem) !important; font-weight: 500 !important; letter-spacing: -0.035em !important;}
.obupload { border-color: var(--line-strong) !important; border-radius: var(--radius-card) !important; background: var(--surface-2) !important;}
.obupload-ic { border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important;}
.obchip { min-height: 2.5rem; border: 1px solid var(--line) !important; border-radius: var(--radius-pill) !important; background: var(--surface) !important; color: var(--ink-2) !important;}
.obchip.on, .obchip:hover { border-color: var(--sage) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important; }
.obnext-btn { min-height: var(--control-h); border-radius: var(--radius-control) !important; background: var(--action) !important; color: var(--action-ink) !important;}
.obback-btn { min-height: var(--control-h); border-color: var(--line-strong) !important; border-radius: var(--radius-control) !important; background: var(--surface) !important; color: var(--ink) !important;}

/* Marketing family: story flow rather than repeated card rows. */
:where(.hero, .teach-hero, .about-hero) {
  position: relative;
  background: var(--paper) !important;
}

:where(.hero h1, .teach-hero h1, .about-hero h1) {
  max-width: 14ch;
  font-family: var(--font-editorial) !important;
  font-size: var(--type-h1) !important;
  font-weight: 470 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
}

:where(.hero p, .teach-hero p, .about-hero p) { max-width: 58ch; color: var(--ink-2) !important; }

:where(.section-title, .how-title, .featured-title, .subjects-title) {
  font-family: var(--font-editorial) !important;
  font-weight: 520 !important;
  letter-spacing: -0.03em !important;
}

.home-page { background: var(--paper); }

.home-hero.growth-hero {
  display: grid !important;
  width: min(100%, var(--content-wide));
  min-height: min(46rem, calc(100dvh - 4.25rem));
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr) !important;
  align-items: center !important;
  gap: clamp(2.5rem, 7vw, 7rem) !important;
  margin: 0 auto !important;
  padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) clamp(5.25rem, 12vw, 10.5rem) !important;
}

.growth-hero__copy { min-width: 0; }
.growth-hero__copy h1 {
  max-width: 11ch !important;
  margin: 0;
  font-size: var(--type-display) !important;
  font-weight: 430 !important;
  letter-spacing: -0.055em !important;
  line-height: var(--leading-display) !important;
}

.growth-kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  color: var(--sage-deep);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.growth-kicker span,
.growth-map__note span,
.home-empty-tutors > span {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 auto;
  border-radius: var(--radius-node);
  background: var(--sage);
}

.growth-hero .hero-p {
  max-width: 55ch !important;
  margin: 1.75rem 0 !important;
  color: var(--ink-2) !important;
  font-size: clamp(1rem, 1.5vw, 1.18rem) !important;
  line-height: 1.7 !important;
}

.growth-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.growth-hero__actions a { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; padding: 0 1.25rem; }

.growth-hero .hero-pop { margin-top: 1.5rem !important; }
.growth-hero .hero-pop .tag {
  min-height: 2.25rem;
  padding: 0 0.75rem !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  line-height: 2.15rem;
  white-space: nowrap;
}
.growth-hero .hero-pop .tag:hover { border-color: var(--sage); background: var(--sage-soft) !important; }

.growth-map {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-dialog);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.growth-map::after {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: var(--radius-node);
  background: var(--spark);
  content: "";
}

.growth-map__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.growth-map__rail { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.growth-map__rail::before { position: absolute; top: 2.35rem; bottom: 2.35rem; left: 0.43rem; width: 1px; background: var(--line-strong); content: ""; }
.growth-map__rail li { position: relative; display: grid; grid-template-columns: 1rem 1fr; gap: 1rem; padding: 1.5rem 0; }
.growth-map__rail li + li { border-top: 1px solid var(--line); }
.growth-map__node { position: relative; z-index: 1; width: 0.9rem; height: 0.9rem; margin-top: 0.25rem; border: 2px solid var(--line-strong); border-radius: var(--radius-node); background: var(--surface); }
.growth-map__rail .is-done .growth-map__node { border-color: var(--sage); background: var(--sage); }
.growth-map__rail .is-active .growth-map__node { border-color: var(--lotus); background: var(--lotus); }
.growth-map__rail small { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.65rem; font-variant-numeric: tabular-nums; }
.growth-map__rail strong { color: var(--ink); font-size: 0.95rem; }
.growth-map__rail p { max-width: 38ch; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.55; }
.growth-map__note { display: flex; align-items: center; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--sage-deep); font-size: 0.76rem; font-weight: 650; }

.home-cats,
.home-feat {
  width: min(100%, var(--content-wide)) !important;
  max-width: var(--content-wide) !important;
  margin-inline: auto !important;
  padding: clamp(3.5rem, 8vw, 7rem) var(--content-gutter) !important;
}

.cats-head,
.feat-head { display: flex; align-items: end !important; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem !important; }
.cats-head h2,
.feat-head h2,
.home-hiw h2,
.home-testimonials h2 {
  max-width: 20ch;
  margin: 0;
  font-family: var(--font-editorial) !important;
  font-size: var(--type-h2) !important;
  font-weight: 480 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

.cats-head p { max-width: 55ch; margin-top: 0.5rem; color: var(--muted) !important; }
.cats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0.75rem !important; }
.cat {
  display: block;
  min-height: 9rem;
  padding: 1.25rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  cursor: pointer;
  text-align: left !important;
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard) !important;
}
.cat:hover { transform: none !important; border-color: var(--sage) !important; background: var(--sage-soft) !important; box-shadow: none !important; }
.cat-ic { display: flex; width: 2.5rem !important; height: 2.5rem !important; align-items: center; justify-content: center; margin: 0 0 1.5rem !important; border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important; font-size: 1.25rem; }
.cat-name { color: var(--ink) !important; font-size: 0.875rem; font-weight: 650; }

.home-hiw { padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important; background: var(--surface-2) !important; }
.hiw-inner { display: grid; width: min(100%, var(--content-wide)); max-width: var(--content-wide) !important; grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.5fr); gap: clamp(2rem, 7vw, 7rem); margin-inline: auto; }
.hiw-inner h2 { text-align: left !important; }
.hiw-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.5rem !important; }
.hiw-line { position: absolute; z-index: 0; top: 0.55rem !important; left: 0.55rem !important; right: 0.55rem !important; border-top: 1px solid var(--line-strong) !important; }
.hiw-step { position: relative; z-index: 1; text-align: left !important; }
.hiw-num { display: flex; width: 1.1rem !important; height: 1.1rem !important; align-items: center; justify-content: center; margin: 0 0 2rem !important; border: 3px solid var(--surface-2); border-radius: var(--radius-node) !important; background: var(--lotus) !important; color: transparent !important; font-size: 0 !important; }
.hiw-step:first-of-type .hiw-num { background: var(--sage) !important; }
.hiw-step h3 { margin-bottom: 0.5rem; color: var(--ink) !important; font-size: 1.05rem; font-weight: 650; }
.hiw-step p { max-width: 30ch !important; margin: 0 !important; color: var(--muted) !important; text-align: left !important; }

.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.75rem !important; }
.fcard { display: block; overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; color: inherit; cursor: pointer; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard) !important; }
.fcard:hover { transform: none !important; border-color: var(--sage) !important; box-shadow: none !important; }
.fcard-img { position: relative; display: flex; height: 8.5rem !important; align-items: flex-end; justify-content: center; background: var(--surface-2) !important; }
.fcard-av { display: flex; width: 4.5rem; height: 4.5rem; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: var(--radius-card) !important; background: var(--sage) !important; color: var(--paper) !important; font-size: 1.5rem; font-weight: 650; }
.fcard-body { padding: 1rem; }
.fcard-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.fcard-name { color: var(--ink) !important; font-size: 0.9375rem; font-weight: 650; line-height: 1.25; }
.fcard-rating { display: flex; flex-shrink: 0; align-items: center; gap: 0.2rem; padding: 0.2rem 0.45rem; border-radius: var(--radius-tile); background: var(--surface-2); color: var(--muted); font-size: 0.6875rem; }
.fcard-subj { margin: 0.35rem 0 0.6rem; color: var(--sage-deep) !important; font-size: 0.75rem; font-weight: 600; }
.fcard-bio { display: -webkit-box; min-height: 2.5rem; margin-bottom: 0.875rem; overflow: hidden; color: var(--muted); font-size: 0.75rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.fcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fcard-rate { color: var(--ink) !important; font-size: 0.875rem; font-weight: 650; }
.fcard-rate span { color: var(--muted-2); font-size: 0.6875rem; font-weight: 400; }
.fcard-btn { min-height: 2.25rem; padding: 0.45rem 0.75rem; border: 0; border-radius: var(--radius-control) !important; background: var(--action) !important; color: var(--action-ink) !important; font-size: 0.75rem; font-weight: 650; }
.text-link, .cats-viewall { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--action) !important; font-size: 0.8rem !important; font-weight: 650 !important; }
.home-empty-tutors { display: flex; min-height: 10rem; grid-column: 1 / -1; align-items: center; gap: 0.75rem; padding: 1.5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); color: var(--muted); }
.home-empty-tutors p { margin: 0; }
.home-empty-tutors a { margin-left: auto; color: var(--action); font-weight: 650; }

.home-testimonials { padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important; background: var(--sage-soft) !important; }
.home-testimonials-inner { width: min(100%, var(--content-wide)); max-width: var(--content-wide) !important; margin-inline: auto; }
.home-testimonials h2, .home-testimonials > .home-testimonials-inner > p { text-align: left !important; }
.home-testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.75rem !important; margin-top: 2rem; }
.home-testimonial { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.375rem; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; }
.home-testimonial-q { flex: 1; font-family: var(--font-editorial); font-size: 1.12rem !important; font-style: normal !important; line-height: 1.6 !important; }
.home-testimonial-by { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8125rem; font-weight: 650; }
.home-testimonial-by i { color: var(--sage) !important; }

.home-cta { width: min(100%, var(--content-wide)) !important; max-width: var(--content-wide) !important; margin: 0 auto !important; padding: clamp(3.5rem, 8vw, 7rem) var(--content-gutter) !important; }
.cta-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; padding: clamp(2rem, 5vw, 4rem) !important; border: 1px solid var(--line); border-radius: var(--radius-card) !important; background: var(--surface) !important; text-align: left !important; }
.cta-inner h2 { max-width: 18ch; margin: 0; color: var(--ink) !important; font-family: var(--font-editorial); font-size: var(--type-h2) !important; font-weight: 480 !important; letter-spacing: -0.04em !important; line-height: 1 !important; }
.cta-inner p { max-width: 50ch; margin: 1rem 0 0 !important; color: var(--muted) !important; }
.cta-btns { display: flex; grid-column: 2; grid-row: 1 / span 2; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
.cta-gold, .cta-ghost { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; padding: 0 1.25rem !important; border-radius: var(--radius-control) !important; }
.cta-gold { background: var(--action) !important; color: var(--action-ink) !important; }
.cta-ghost { border: 1px solid var(--line-strong) !important; background: var(--surface) !important; color: var(--ink) !important; }

.teach-page { background: var(--paper); }
.thero.teach-hero { display: grid !important; width: min(100%, var(--content-wide)); min-height: min(43rem, calc(100dvh - 4.25rem)); grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr) !important; align-items: center !important; gap: clamp(2.5rem, 7vw, 7rem) !important; margin: 0 auto !important; padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) clamp(5.25rem, 12vw, 10.5rem) !important; }
.teach-hero h1 { max-width: 11ch !important; margin: 0; font-family: var(--font-editorial) !important; font-size: var(--type-display) !important; font-weight: 430 !important; letter-spacing: -0.055em !important; line-height: var(--leading-display) !important; }
.teach-hero__copy > p { max-width: 58ch; margin: 1.5rem 0; color: var(--ink-2) !important; font-size: clamp(1rem, 1.5vw, 1.18rem) !important; line-height: 1.7 !important; }
.thero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem !important;}
.thero-actions a { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; }
.teaching-ledger { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-radius: var(--radius-dialog); background: var(--surface); box-shadow: var(--shadow-card); }
.teaching-ledger__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.teaching-ledger__row { display: grid; grid-template-columns: 2rem 1fr; gap: 0.25rem 0.75rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.teaching-ledger__row > span { grid-row: 1 / span 2; color: var(--muted); font-size: 0.68rem; font-variant-numeric: tabular-nums; }
.teaching-ledger__row strong { color: var(--ink); font-size: 0.9rem; }
.teaching-ledger__row small { color: var(--muted); font-size: 0.76rem; }
.teaching-ledger__row.is-active { position: relative; }
.teaching-ledger__row.is-active::after { position: absolute; top: 1.35rem; right: 0; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-node); background: var(--lotus); content: ""; }
.why { padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important; background: var(--surface-2) !important;}
.why-inner { max-width: var(--content-wide) !important;}
.why h2, .journey h2, .testimonials h2, .teach-faq h2, .tcta h2 { font-family: var(--font-editorial) !important; font-size: var(--type-h2) !important; font-weight: 480 !important; letter-spacing: -0.04em !important; line-height: 1 !important; }
.why-grid { gap: 0 !important; margin-top: 3rem; border-top: 1px solid var(--line);}
.why-card { padding: 1.5rem 1.5rem 1.5rem 0 !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;}
.why-card + .why-card { padding-left: 1.5rem !important; border-left: 1px solid var(--line) !important; }
.why-ic { border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important;}
.journey { width: min(100%, var(--content-wide)) !important; max-width: var(--content-wide) !important; gap: clamp(3rem, 8vw, 8rem) !important; margin: 0 auto !important; padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important;}
.jstep { position: relative; padding-left: 3rem !important;}
.jnum { position: absolute; top: 0; left: 0; width: 1.5rem !important; height: 1.5rem !important; border-radius: var(--radius-tile) !important; background: var(--lotus) !important; color: var(--surface) !important;}
.teacher-promise { align-self: stretch; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--sage-soft); }
.teacher-promise blockquote { margin: clamp(2rem, 5vw, 4rem) 0 1.5rem; color: var(--ink); font-family: var(--font-editorial); font-size: clamp(1.8rem, 4vw, 3.5rem); font-weight: 420; letter-spacing: -0.04em; line-height: 1.02; }
.teacher-promise p { color: var(--sage-deep); }
.testimonials { padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important; background: var(--sage-soft) !important;}
.testimonials-inner { max-width: var(--content-wide) !important;}
.tq { border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important;}
.tq-text { font-family: var(--font-editorial); font-style: normal !important; font-size: 1.08rem !important;}
.teach-faq { max-width: 60rem !important; padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important;}
.faq-item { border-bottom: 1px solid var(--line); border-radius: 0 !important; background: transparent !important;}
.faq-q { min-height: 3.75rem; cursor: pointer; list-style: none;}
.faq-q::-webkit-details-marker { display: none; }
.faq-item[open] .faq-q i { transform: rotate(180deg); }
.faq-item .faq-a { max-height: 0; padding: 0 1.25rem !important; overflow: hidden; color: var(--muted) !important; }
.faq-item[open] .faq-a { max-height: 18rem; padding: 0 1.25rem 1.25rem !important; }
.tcta { margin: 0 !important; padding: clamp(4rem, 9vw, 8rem) var(--content-gutter) !important; background: var(--surface-2) !important; color: var(--ink) !important;}
.tcta h2 { color: var(--ink) !important;}
.tcta p { max-width: 55ch; margin-inline: auto; color: var(--muted) !important;}

/* About keeps an editorial portrait structure and a quiet relationship diagram. */
.pg { width: min(100%, var(--content-wide)) !important; max-width: var(--content-wide) !important; padding: 0 var(--content-gutter) clamp(4rem, 8vw, 7rem) !important;}
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding: clamp(4rem, 9vw, 8rem) 0 !important; text-align: left !important;}
.ab-hero > :where(.eyebrow, h1, p) { grid-column: 1; }
.ab-hero h1 { max-width: 12ch !important; margin: 1rem 0 !important; font-family: var(--font-editorial) !important; font-size: var(--type-h1) !important; font-weight: 460 !important; letter-spacing: -0.05em !important; line-height: 0.98 !important;}
.ab-hero h1 em { color: inherit !important; font-style: normal !important;}
.ab-hero p { max-width: 56ch !important; margin: 0 !important; color: var(--muted) !important;}
.eyebrow { color: var(--sage-deep) !important;}
.eyebrow .spark { color: var(--sage) !important;}
.match { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0 !important;}
.mp-dot { border-radius: var(--radius-card) !important; box-shadow: none !important;}
.mp-dot.learner { background: var(--lotus) !important;}
.mp-dot.tutor { background: var(--sage) !important;}
.mp-spark { border-color: var(--line-strong) !important; border-radius: var(--radius-tile) !important; box-shadow: none !important; animation: none !important;}
.ab-story { max-width: var(--measure-wide); margin: 0 auto !important; padding: clamp(2rem, 5vw, 4rem) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important;}
.ab-story h2, .ab-vals > h2, .ab-cta h2 { font-family: var(--font-editorial) !important; font-size: var(--type-h2) !important; font-weight: 480 !important; letter-spacing: -0.04em !important; line-height: 1 !important; }
.ab-story p { color: var(--ink-2) !important;}
.val-grid { gap: 0 !important; border-top: 1px solid var(--line);}
.val { padding: 1.5rem !important; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;}
.val:nth-child(odd) { border-right: 1px solid var(--line) !important; }
.val-ic { border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important;}
.ab-fund { border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--spark-soft) !important;}
.ab-cta { padding-top: clamp(3rem, 8vw, 7rem);}

/* Discovery family: index first, details second. */
:where(.search-page, .categories-page, .profile-page, .class-shell) { background: var(--paper) !important; }
:where(.search-main, .categories-main, .profile-main, .class-main) {
  width: min(100%, var(--content-app)) !important;
  max-width: var(--content-app) !important;
  margin-inline: auto !important;
  padding-inline: var(--content-gutter) !important;
}

.class-title { font-family: var(--font-editorial) !important; font-weight: 500 !important;}
.class-card { transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard) !important;}
.class-card:hover { border-color: var(--sage) !important; background: var(--sage-soft) !important;}

.search-page { min-height: 100dvh; }
.search-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.65fr);
  align-items: end;
  gap: 2rem;
  padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.search-intro .growth-kicker { margin-bottom: 1rem; }
.search-intro h1 { max-width: 15ch; margin: 0; font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 0.98; }
.search-intro > p { max-width: 48ch; margin: 0; color: var(--muted); }
.search-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: none;
  margin: 0;
}
.spfilters-slot { grid-column: 2; grid-row: 1; min-width: 0; }
.spfilters {
  position: sticky;
  top: 5.25rem;
  display: grid;
  max-width: none;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem 0;}
.spchip-group {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);}
.spchip-label { min-width: 0 !important; color: var(--muted) !important; font-size: 0.7rem !important; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;}
.spchip {
  min-height: 2.25rem !important;
  height: auto !important;
  padding: 0 0.75rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
  background: var(--surface) !important;
  color: var(--ink-2) !important;
  font-size: 0.78rem !important;}
.spchip:has(input:checked) { border-color: var(--action) !important; background: var(--action) !important; color: var(--action-ink) !important;}
.spselect { width: 100%; max-width: none !important; height: var(--control-h) !important; font-size: 0.78rem !important;}
.spmain { grid-column: 1; grid-row: 1; display: flex; width: min(100%, 48rem); max-width: none !important; justify-self: center; gap: 0.75rem !important; margin: 0 !important; padding: 2rem 0 5rem !important;}
.spresults-head { min-height: 2.75rem; padding: 0 !important;}
.sptitle { color: var(--ink) !important; font-size: 1rem !important;}
.spsort-label { color: var(--sage-deep) !important;}
.sptcard {
  display: grid !important;
  grid-template-columns: 4rem minmax(0, 1fr) !important;
  gap: 1rem !important;
  padding: 1.25rem !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard) !important;}
.sptcard:hover { transform: none !important; border-color: var(--sage) !important; background: var(--sage-soft) !important; box-shadow: var(--shadow-card) !important;}
.sptavatar { width: 4rem !important; height: 4rem !important; border-radius: var(--radius-card) !important; background: var(--sage) !important;}
.sptname, .sptprice { color: var(--ink) !important; }
.sptsubj { color: var(--sage-deep) !important;}
.sptag, .sptnew { border-radius: var(--radius-pill) !important; background: var(--surface-2) !important; color: var(--ink-2) !important; }
.sptnew { background: var(--sage-soft) !important; color: var(--sage-deep) !important;}
.sp-load-more { border-color: var(--line-strong) !important; border-radius: var(--radius-control) !important; background: var(--surface) !important; color: var(--ink) !important;}
.load-more-container { margin-top: 1rem; text-align: center; }
.search-filter-button { display: none; }
.search-filter-dialog .spfilters { position: static !important; padding: 0 !important; }

/* Workbenches: visible stage hierarchy without invented metrics. */
:where(.dbmain, .dashboard-main, .requests-main, .messages-main, .sessions-main, .students-main) {
  width: min(100%, var(--content-app)) !important;
  max-width: var(--content-app) !important;
  margin-inline: auto !important;
  padding-inline: var(--content-gutter) !important;
}

:where(.dbmain, .dashboard-main, .requests-main, .messages-main, .sessions-main, .students-main) > :first-child {
  animation: workbench-enter var(--duration-slow) var(--ease-enter) both;
}

@keyframes workbench-enter {
  from { opacity: 0; transform: translateY(0.65rem); }
}

:where(.learner-workbench, .tutor-workbench) { min-height: 100dvh; background: var(--paper); }
:where(.learner-workbench, .tutor-workbench) .db-content { display: flex; min-width: 0; flex-direction: column; }
:where(.learner-workbench, .tutor-workbench) .dbgreet { order: 0; padding: clamp(2rem, 5vw, 4rem) 0 1.25rem !important; }
:where(.learner-workbench, .tutor-workbench) .dbgreet h1 { margin: 0.25rem 0 0; font-family: var(--font-editorial) !important; font-size: clamp(2rem, 3.5vw, 3.5rem) !important; font-weight: 470 !important; letter-spacing: -0.045em !important; line-height: 1 !important; }
:where(.learner-workbench, .tutor-workbench) .dbgreet p { max-width: 62ch; color: var(--muted) !important; }
.workbench-kicker { display: flex; align-items: center; gap: 0.5rem; color: var(--sage-deep); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.workbench-kicker > span { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-node); background: var(--sage); }
:where(.learner-workbench, .tutor-workbench) .dbbody { order: 1; width: 100%; max-width: none !important; margin: 0 !important; padding: 1.25rem 0 3rem !important; }
:where(.learner-workbench, .tutor-workbench) .dbstats-wrap { order: 2; padding: 2rem 0 4rem !important; border-top: 1px solid var(--line); }
:where(.learner-workbench, .tutor-workbench) .dbstats { overflow: hidden; border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; box-shadow: var(--shadow-card); }
:where(.learner-workbench, .tutor-workbench) .dbstat { min-width: 0; border-color: var(--line) !important; background: transparent !important; }
:where(.learner-workbench, .tutor-workbench) .dbstat-ic { border-radius: var(--radius-tile) !important; background: var(--surface-2) !important; color: var(--sage-deep) !important; }
:where(.learner-workbench, .tutor-workbench) .dbstat-num { color: var(--ink) !important; font-weight: 500; font-variant-numeric: tabular-nums; }
:where(.learner-workbench, .tutor-workbench) .dbstat-label { color: var(--muted) !important; }
:where(.learner-workbench, .tutor-workbench) .dbleft { display: flex; min-width: 0; flex-direction: column; gap: 1rem; }
:where(.learner-workbench, .tutor-workbench) .dbcard,
:where(.learner-workbench, .tutor-workbench) .dbcont,
:where(.learner-workbench, .tutor-workbench) .dbpractice {
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
/* The workbench turns .dbpractice from a dark spotlight panel into an ordinary
   surface card. Its foregrounds have to come with it — flipping only the
   background left the tag at 1.02:1 in light and dark-on-dark in dark. */
:where(.learner-workbench, .tutor-workbench) .dbpractice { color: var(--ink) !important; }
:where(.learner-workbench, .tutor-workbench) .dbpractice-tag { background: var(--surface-2) !important; color: var(--sage-deep) !important; }
:where(.learner-workbench, .tutor-workbench) .dbpractice p { color: var(--muted) !important; }
:where(.learner-workbench, .tutor-workbench) .dbpractice-btn { background: var(--action) !important; color: var(--action-ink) !important; }
:where(.learner-workbench, .tutor-workbench) .dbpractice-btn:hover { background: var(--action-hover) !important; }
:where(.learner-workbench, .tutor-workbench) .dbcard-head { border-color: var(--line) !important; }
:where(.learner-workbench, .tutor-workbench) .dbcard-head :is(h2, h3) { color: var(--ink) !important; }
:where(.learner-workbench, .tutor-workbench) .dbcard-head a { color: var(--action) !important; }
:where(.learner-workbench, .tutor-workbench) .sug-head { margin: 1rem 0 !important; }
:where(.learner-workbench, .tutor-workbench) .sug-head .spark { color: var(--sage) !important; }
:where(.learner-workbench, .tutor-workbench) .sug-head h2 { font-family: var(--font-editorial) !important; font-size: clamp(1.45rem, 2.6vw, 2rem) !important; font-weight: 520 !important; letter-spacing: -0.025em !important; }
:where(.learner-workbench, .tutor-workbench) .sug-head .sub { color: var(--muted) !important; font-family: var(--font-ui); font-weight: 400; letter-spacing: 0; }
.learner-workbench .dbleft > .dbcont { order: 0; }
.learner-workbench .dbleft > section:has(#learner-trials),
.learner-workbench .dbleft > section:has(#learner-lessons) { order: 1; }
.learner-workbench .dbleft > section:has(#learner-requests),
.learner-workbench .dbleft > .dbcard:has(.dbsaved) { order: 3; }
/* Self-metrics sit below your lessons/people in a stable data-independent order
   (they previously defaulted to order:0 and floated above the next lesson). */
.learner-workbench .dbleft > .dbcard--reputation { order: 5; }
.learner-workbench .dbleft > .dbcard--progress { order: 6; }
.learner-workbench .dbleft > section:has(#learner-suggestions) { order: 8; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.learner-workbench .dashboard-focus > section:has(#learner-suggestions) { margin-top: 0; padding-top: 0; border-top: 0; }

/* Dashboard detail views: one calm, full-width operating surface. The
   `learner-focus-*` class names predate the tutor focus pages, which reuse the
   same shell — the shell itself is role-neutral. */
:where(.learner-workbench, .tutor-workbench) .dbbody--focus { grid-template-columns: minmax(0, 1fr) !important; padding-block: clamp(2rem, 5vw, 4rem) 4rem !important; }
:where(.learner-workbench, .tutor-workbench) .dashboard-focus { width: min(100%, 60rem); margin-inline: auto; gap: 0; }
.learner-focus-page { display: grid; min-width: 0; gap: clamp(1.5rem, 3vw, 2.25rem); }
.learner-focus-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.learner-focus-head > div { min-width: 0; }
.learner-focus-head h1 { max-width: 18ch; margin: 0; color: var(--ink); font-family: var(--font-ui); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 750; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.learner-focus-head p { max-width: 64ch; margin: 0.625rem 0 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.learner-focus-action { display: inline-flex; min-height: var(--control-h); flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1rem; border: 1px solid var(--action); border-radius: var(--radius-control); background: var(--action); color: var(--action-ink); font-size: 0.875rem; font-weight: 700; text-decoration: none; }
.learner-focus-action:hover { border-color: var(--action-hover); background: var(--action-hover); }
.learner-focus-action.is-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.learner-focus-action.is-secondary:hover { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }
.learner-focus-action:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.learner-focus-content { min-width: 0; }
.learner-focus-loading { display: grid; min-height: 10rem; place-items: center; color: var(--muted); font-size: 0.875rem; }

.sug-who { min-width: 0; margin: 0; padding: 0; border: 0; }
.sug-who legend { margin-bottom: 0.625rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; }
.sug-who-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sug-who-option { position: relative; display: inline-flex; min-height: var(--control-h); align-items: center; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 0.875rem; font-weight: 650; }
.sug-who-option:hover { border-color: var(--line-strong); background: var(--surface-2); }
.sug-who-option:has(.sug-who-input:checked) { border-color: var(--action); background: var(--lotus-soft); color: var(--lotus-ink); }
.sug-who-option:has(.sug-who-input:focus-visible) { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.sug-who-input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.dashboard-focus .sug-list { gap: 0.75rem; }
.dashboard-focus .sug-card { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 9.5rem; gap: 1.25rem; align-items: start; padding: 1.25rem; border-radius: var(--radius-card); box-shadow: none; cursor: pointer; }
.dashboard-focus .sug-card:hover { border-color: var(--sage); background: var(--sage-soft); }
.dashboard-focus .sug-card:has(.sug-card-link:focus-visible) { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.dashboard-focus .sug-card-link::after { position: absolute; z-index: 1; inset: 0; border-radius: var(--radius-card); content: ""; }
.dashboard-focus .sug-ava { width: 9rem; height: 11.25rem; border-radius: var(--radius-card); font-size: 1.75rem; }
.dashboard-focus .sug-ava img { object-fit: cover; object-position: center 20%; }
.dashboard-focus .sug-main { min-width: 0; }
.dashboard-focus .sug-top { align-items: center; gap: 1rem; }
.dashboard-focus .sug-name { color: var(--ink); font-size: 1.125rem; font-weight: 750; text-decoration: none; }
.dashboard-focus .sug-name:hover { color: var(--action); text-decoration: underline; text-underline-offset: 3px; }
.dashboard-focus .sug-proof { flex: 0 0 auto; color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; }
.dashboard-focus .sug-proof i { margin-right: 0.25rem; color: var(--spark-ink); }
.dashboard-focus .sug-proof small { color: var(--muted); font: inherit; font-weight: 500; }
.dashboard-focus .sug-proof .is-new { color: var(--sage-deep); }
.dashboard-focus .sug-bio { display: -webkit-box; overflow: hidden; margin: 0.75rem 0 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.dashboard-focus .sug-details { display: grid; gap: 0.5rem; margin-top: 1rem; }
.dashboard-focus .sug-details > div { display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); gap: 0.5rem; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.45; }
.dashboard-focus .sug-details i { margin-top: 0.125rem; color: var(--sage-deep); }
.dashboard-focus .sug-details strong { margin-right: 0.5rem; color: var(--ink); }
.dashboard-focus .sug-details > div:first-child span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-focus .sug-match { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.dashboard-focus .sug-match > strong { color: var(--muted); font-size: 0.75rem; }
.dashboard-focus .sug-why-text { display: flex; flex-wrap: wrap; gap: 0.375rem; overflow: visible; color: var(--sage-deep); font-size: 0.75rem; line-height: 1.35; text-overflow: clip; white-space: normal; }
.dashboard-focus .sug-why-text .r { padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); background: var(--sage-soft); }
.dashboard-focus .sug-why-text .r:not(:first-child)::before { content: none; }
.dashboard-focus .sug-side { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; }
.dashboard-focus .sug-rate { display: grid; justify-items: end; margin-bottom: 0.5rem; }
.dashboard-focus .sug-rate strong { color: var(--ink); font-size: 1.125rem; font-weight: 800; }
.dashboard-focus .sug-rate span { color: var(--muted); font-size: 0.75rem; }
.dashboard-focus .sug-act { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; gap: 0.375rem; padding-inline: 0.75rem; border-radius: var(--radius-control); font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; text-decoration: none; }
.dashboard-focus .sug-act { position: relative; z-index: 2; }
.dashboard-focus .sug-save { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.dashboard-focus .sug-save:hover { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }
.dashboard-focus .sug-skip { width: auto; height: var(--control-h); border: 0; background: transparent; color: var(--muted); }
.dashboard-focus .sug-skip:hover { background: var(--surface-2); color: var(--ink-2); }
.dashboard-focus .sug-act:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.dashboard-focus .sug-hint { display: flex; align-items: center; gap: 0.625rem; min-height: var(--control-h); padding: 0.75rem 1rem; border-radius: var(--radius-control); background: var(--sage-soft); color: var(--sage-deep); line-height: 1.4; }
.dashboard-focus .sug-hint span { flex: 1; }
.dashboard-focus .sug-hint a { flex: 0 0 auto; color: inherit; font-weight: 700; }

.dashboard-focus .tc-list { gap: 0.75rem; }
.dashboard-focus .tc { min-height: 5.5rem; gap: 1rem; padding: 1rem; border-radius: var(--radius-card); box-shadow: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.dashboard-focus .tc:hover { border-color: var(--sage); background: var(--sage-soft); }
.dashboard-focus .tc:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.dashboard-focus .tc-av { width: 3.25rem; height: 3.25rem; flex-basis: 3.25rem; border-radius: var(--radius-card); font-size: 1rem; }
.dashboard-focus .tc-name { font-size: 0.9375rem; font-weight: 700; }
.dashboard-focus .tc-meta { overflow: visible; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.45; text-overflow: clip; white-space: normal; }
.dashboard-focus .tc-badge { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.tc-arrow { flex: 0 0 auto; color: var(--muted); font-size: 1.125rem; }

.dashboard-focus .rqm-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 1rem; min-height: 5.5rem; align-items: center; margin-bottom: 0.75rem; padding: 1rem; }
.dashboard-focus .rqm-icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: var(--radius-card); background: var(--surface-2); color: var(--sage-deep); font-size: 1.25rem; }
.dashboard-focus .rqm-subject { font-size: 0.9375rem; font-weight: 700; }
.dashboard-focus .rqm-meta { font-size: 0.8125rem; line-height: 1.45; }
.dashboard-focus .rqm-status { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.dashboard-focus .rqm-close { display: inline-flex; min-height: var(--control-h); align-items: center; gap: 0.375rem; padding: 0 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; }
.dashboard-focus .rqm-close:hover { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.dashboard-focus .rqm-close:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

.learner-empty { display: grid; min-height: 14rem; place-items: center; align-content: center; gap: 0.625rem; padding: clamp(2rem, 6vw, 4rem); border-radius: var(--radius-card); background: var(--surface-2); color: var(--ink); text-align: center; }
.learner-empty-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 0.25rem; place-items: center; border-radius: var(--radius-card); background: var(--surface); color: var(--sage-deep); font-size: 1.35rem; }
.learner-empty h3 { margin: 0; color: var(--ink); font-size: 1.0625rem; font-weight: 750; }
.learner-empty p { max-width: 56ch; margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.learner-empty.sug-empty .sug-cta { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; margin-top: 0.5rem; padding: 0 1rem; border-radius: var(--radius-control); }

@media (max-width: 40rem) {
  :where(.learner-workbench, .tutor-workbench) .dbbody--focus { padding-block: 1.5rem 3rem !important; }
  .learner-focus-page { gap: 1.5rem; }
  .learner-focus-head { align-items: stretch; flex-direction: column; gap: 1rem; padding-bottom: 1.25rem; }
  .learner-focus-head h1 { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .learner-focus-action { width: 100%; }
  .dashboard-focus .sug-card { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem; }
  .dashboard-focus .sug-ava { width: 6.5rem; height: 8.125rem; font-size: 1.25rem; }
  .dashboard-focus .sug-top { align-items: flex-start; flex-direction: column; gap: 0.25rem; }
  .dashboard-focus .sug-bio { -webkit-line-clamp: 2; }
  .dashboard-focus .sug-side { grid-column: 1 / -1; flex-flow: row wrap; align-items: center; padding-top: 0.875rem; border-top: 1px solid var(--line); }
  .dashboard-focus .sug-rate { justify-items: start; margin: 0 auto 0 0; }
  .dashboard-focus .sug-act { min-width: 6.75rem; }
  .dashboard-focus .rqm-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; }
  .dashboard-focus .rqm-close { grid-column: 2 / -1; justify-self: start; }
  .dashboard-focus .tc { gap: 0.75rem; }
  .dashboard-focus .tc-arrow { display: none; }
  .learner-empty { min-height: 12rem; }
}

@media (pointer: coarse) {
  .learner-focus-action,
  .sug-who-option,
  .dashboard-focus .sug-act,
  .dashboard-focus .rqm-close,
  .tutor-workbench .u-action-row-link,
  .tutor-workbench .dbcard-head a,
  .tutor-workbench .dbpractice-btn,
  .tutor-workbench .tchart-pill { min-height: 3rem; }
}
/* No `order` overrides here any more. The template's DOM order is the reading
   order — requests, sessions, reviews, then the chart — so keyboard and screen
   reader traversal match what is on screen. Reordering visually while leaving
   the DOM alone put the chart's period tabs ahead of the trial requests. */
.tutor-workbench .tc-meta { overflow: visible; text-overflow: clip; white-space: normal; }
/* The name has to wrap too. It was left on nowrap + ellipsis while the meta line
   beside it was freed, so at 200% zoom a Vietnamese full name truncated
   mid-name in a column narrow enough to make that the common case. */
.tutor-workbench .tc-name { overflow: visible; text-overflow: clip; white-space: normal; }
.dbcont-pill, .rqm-status { border-radius: var(--radius-pill) !important; }
.dbcont-pill.live { background: var(--lotus-soft) !important; color: var(--lotus-ink) !important;}

/* Trust documents use a stable long-reading measure. */
:where(.legal-main, .content-main, .about-main, .privacy-main, .terms-main, .contact-main, .support-main) {
  width: min(100%, var(--content-wide)) !important;
  margin-inline: auto !important;
  padding-inline: var(--content-gutter) !important;
}

:where(.legal-content, .content-body, .privacy-content, .terms-content) {
  max-width: var(--measure-wide) !important;
  margin-inline: auto !important;
  font-family: var(--font-editorial);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.75;
}

:where(.legal-content, .content-body, .privacy-content, .terms-content) h2 {
  margin-top: 2.6em;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

.pg:has(.doc-head) { display: grid; grid-template-columns: 14rem minmax(0, var(--measure-wide)); justify-content: center; gap: 0 clamp(2rem, 6vw, 6rem); }
.doc-head { grid-column: 1 / -1; padding: clamp(4rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem) !important; border-bottom: 1px solid var(--line); text-align: left !important;}
.doc-head h1 { max-width: 15ch; margin: 1rem 0 !important; font-family: var(--font-editorial) !important; font-size: var(--type-h1) !important; font-weight: 470 !important; letter-spacing: -0.045em !important; line-height: 0.98 !important;}
.doc-head .doc-intro { max-width: 68ch !important; margin: 0 !important; color: var(--muted) !important; }
.doc-head .updated { color: var(--muted) !important;}
.doc-toc { position: sticky; top: 6rem; grid-column: 1; grid-row: 2 / span 30; align-self: start; margin: 2.5rem 0 !important; padding: 1rem 0 !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: transparent !important;}
.doc-toc a { color: var(--ink-2) !important;}
.doc-sec { display: grid !important; grid-column: 2; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem) !important; gap: clamp(1.5rem, 4vw, 3rem) !important; padding: 2.5rem 0 !important; border-bottom: 1px solid var(--line); align-items: start;}
.doc-num { width: 2rem !important; height: 2rem !important; border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important;}
.doc-body { max-width: var(--measure-copy); color: var(--ink-2) !important; font-family: var(--font-editorial); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.75; }
.doc-body h2 { font-size: clamp(1.6rem, 3vw, 2.35rem) !important;}
.doc-plain { border-color: var(--line) !important; border-radius: var(--radius-control) !important; background: var(--surface-2) !important;}
.pl-label { color: var(--sage-deep) !important; }

.pg:has(.ct-head) { max-width: 70rem !important; }
.ct-head { padding: clamp(4rem, 9vw, 8rem) 0 !important; text-align: left !important;}
.ct-head h1 { max-width: 13ch; font-family: var(--font-editorial) !important; font-size: var(--type-h1) !important; font-weight: 470 !important; letter-spacing: -0.045em !important; line-height: 0.98 !important;}
.ct-primary, .chan { border: 1px solid var(--line) !important; border-radius: var(--radius-card) !important; background: var(--surface) !important; box-shadow: var(--shadow-card); }
.ct-chans { max-width: 36rem; grid-template-columns: 1fr !important;}
.chan-ic { border-radius: var(--radius-tile) !important; background: var(--sage-soft) !important; color: var(--sage-deep) !important;}

/* Admin records collapse into labelled blocks instead of forcing horizontal scroll. */
:where(.admin-main, .admain) { width: min(100%, var(--content-wide)); margin-inline: auto; padding-inline: var(--content-gutter) !important; }
:where(.admin-table, .adtable) { border-collapse: separate !important; border-spacing: 0 !important; }
.admin-rail {
  position: fixed;
  z-index: 80;
  top: 4.25rem;
  bottom: 0;
  left: 0;
  width: 15rem;
  padding: 1.25rem 0.75rem;
  border-right: 1px solid var(--line);
  background: var(--surface);
}
.admin-route-nav { display: grid; gap: 0.25rem; }
.admin-route-nav a { display: flex; min-height: 2.75rem; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border-radius: var(--radius-control); color: var(--ink-2); font-size: 0.82rem; font-weight: 600; }
.admin-route-nav a:hover { background: var(--surface-2); color: var(--ink); }
.admin-route-nav a.active { background: var(--lotus-soft); color: var(--lotus-ink); }
.admin-route-nav a.active::after { width: 0.42rem; height: 0.42rem; margin-left: auto; border-radius: var(--radius-node); background: var(--lotus); content: ""; }
.admin-menu-mobile { display: grid; gap: 1rem; }
.missing-translation { color: var(--danger); }
.admin-row-actions { white-space: nowrap; }
.admin-row-actions > * + * { margin-inline-start: 0.5rem; }
.taxonomy-admin .adtable :is(th, td) { padding-inline: 0.5rem; }
.taxonomy-admin .adtable :is(th, td):first-child { padding-inline-start: 0; }
.taxonomy-admin .adtable :is(th, td):last-child { padding-inline-end: 0; }
.focus-table { min-width: 72rem; table-layout: fixed; }
.focus-table :is(th, td):nth-child(1) { width: 9rem; }
.focus-table :is(th, td):nth-child(2) { width: 11rem; }
.focus-table :is(th, td):nth-child(3) { width: 13rem; }
.focus-table :is(th, td):nth-child(5) { width: 4rem; }
.focus-table :is(th, td):nth-child(6) { width: 6rem; }
.focus-table :is(th, td):nth-child(7) { width: 12rem; }
.focus-table td:nth-child(4) .status-chip { margin: 0.15rem 0.2rem 0.15rem 0; }
.taxonomy-jump { display: none; }

@media (min-width: 80rem) {
  .adbody.taxonomy-admin { display: grid; max-width: calc(100% - 15rem) !important; grid-template-columns: minmax(0, 1fr) 10rem; gap: 1rem; margin-right: 0 !important; align-items: start; }
  .taxonomy-admin > :not(.taxonomy-jump) { grid-column: 1; }
  .taxonomy-jump { display: block; grid-column: 2; grid-row: 1 / span 20; position: sticky; top: 5.25rem; }
  .taxonomy-jump .ep-section-nav { display: grid; margin-top: 0; border-top: 1px solid var(--line); }
  .taxonomy-jump .ep-section-nav a { display: flex; }
}
.admin-user-filters { display: grid; grid-template-columns: minmax(14rem, 1fr) 10rem 10rem auto auto; gap: 0.75rem; align-items: end; margin: 0.75rem 0 1.5rem; }
.admin-user-filters label { display: grid; gap: 0.35rem; color: var(--muted); font-size: var(--text-xs); font-weight: 650; }
.admin-user-filters :is(input, select) { width: 100%; min-height: var(--control-h); padding-inline: 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); }
.admin-user-clear { display: inline-flex; min-height: var(--control-h); align-items: center; color: var(--ink-2); text-decoration: none; }
.admin-sort { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; text-decoration: none; white-space: nowrap; }
.admin-sort span { min-width: 0.75rem; color: var(--action); }
.admin-messages-page { gap: 1rem; }
.admin-message-card .adcard-head { margin-bottom: 1rem; }
.admin-message-inbox { max-height: min(720px, calc(100dvh - 13rem)); overflow-y: auto; padding-right: 0.25rem; }
.admin-broadcast-card summary { cursor: pointer; color: var(--ink); font-size: var(--text-base); font-weight: 700; }
.admin-broadcast-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.admin-broadcast-form h3 { margin: 0 0 0.15rem; color: var(--ink); font-size: var(--text-sm); font-weight: 700; }
.admin-broadcast-form .bc-hint { margin: 0 0 0.75rem; color: var(--muted); font-size: var(--text-xs); }
.admin-broadcast-form textarea { width: 100%; min-height: 9rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; line-height: 1.55; resize: vertical; }

@media (max-width: 70rem) {
  .admin-user-filters { grid-template-columns: minmax(14rem, 1fr) 1fr 1fr; }
  .admin-user-filters :is(button, .admin-user-clear) { justify-content: center; }
}

@media (max-width: 39.99rem) {
  .admin-user-filters { grid-template-columns: 1fr; }
  .admin-row-actions { white-space: normal; }
}
.funnel-bar { width: var(--bar-size) !important;}
.spark-bar { height: var(--bar-size) !important;}
:where(.adgreet, .adbody, .is-wrap, .si-wrap) { max-width: calc(var(--content-wide) - 15rem) !important; margin-right: auto !important; margin-left: 15rem !important; padding-right: var(--content-gutter) !important; padding-left: var(--content-gutter) !important; }
:where(.adgreet, .adbody, .is-wrap, .si-wrap) h1 { font-family: var(--font-editorial) !important; font-weight: 500 !important; letter-spacing: -0.035em !important; }

/* Loading and feedback */
#ux-bar {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-exit) !important;
  background: var(--lotus) !important;}

.skel {
  animation: none !important;
  background: var(--surface-2) !important;
  visibility: hidden;}

.skel.is-visible { visibility: visible; }

.ux-toast {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: var(--shadow-overlay) !important;}

.fb-fab {
  border-radius: var(--radius-control) !important;
  background: var(--ink) !important;
  color: var(--paper) !important;}

@media (max-width: 59.99rem) {
  body.has-app-tabs { padding-bottom: calc(4.5rem + var(--safe-bottom)) !important; }
  body:not(.has-app-tabs) { padding-bottom: 0 !important; }

  .site-header {
    min-height: 3.75rem;
    grid-template-columns: auto 1fr;
    padding-inline: max(1rem, var(--safe-right)) max(1rem, var(--safe-left));
  }

  .site-header > .logo-mark .wordmark { display: none; }
  .site-header__search, .site-header__nav, .site-header__account { display: none; }
  .mobile-header-actions { display: flex; }
  .site-header .logo-mark { min-height: 3.75rem; }
  .obbody { grid-template-columns: 1fr !important; }
  .obsteps { flex-flow: row nowrap !important; overflow-x: auto; padding-bottom: 0.5rem; }
  .obstep { min-width: max-content; }
  .obtip { position: static !important; }
  :where(.learner-workbench, .tutor-workbench) .dbgreet,
  :where(.learner-workbench, .tutor-workbench) .dbbody,
  :where(.learner-workbench, .tutor-workbench) .dbstats-wrap { padding-right: var(--content-gutter) !important; padding-left: var(--content-gutter) !important; }
  :where(.learner-workbench, .tutor-workbench) .dbbody { grid-template-columns: 1fr !important; }
  .admin-rail { display: none; }
  :where(.adgreet, .adbody, .is-wrap, .si-wrap) { width: 100% !important; max-width: none !important; margin-left: 0 !important; padding-inline: var(--content-gutter) !important; }

  .search-intro { grid-template-columns: 1fr; padding-inline: var(--content-gutter); }
  .search-workspace { display: block !important; }
  .search-filter-button { display: inline-flex; width: calc(100% - (2 * var(--content-gutter))); margin: 1.25rem var(--content-gutter) 0; align-items: center; justify-content: center; gap: 0.5rem; }
  .spfilters-slot { display: none; }
  .spmain { padding: 1.25rem var(--content-gutter) 4rem !important; }
  .search-filter-dialog { width: min(38rem, calc(100vw - 1rem)); max-height: calc(100dvh - max(1rem, var(--safe-top))); margin: auto auto max(0.5rem, var(--safe-bottom)); }
  .search-filter-dialog .ui-dialog__body { max-height: calc(100dvh - 5rem - var(--safe-bottom)); overflow: auto; }
  .search-filter-dialog .spchip-group { flex-flow: row wrap !important; }
  .search-filter-dialog .spchip-label { width: 100%; }
  .search-filter-dialog .spselect { width: 100%; }

  .statement-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statement-footer__brand { grid-column: 1 / -1; }

  .home-hero.growth-hero {
    min-height: auto;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding-block: clamp(3rem, 10vw, 5rem) clamp(4rem, 13vw, 6.5rem) !important;
  }
  .growth-hero__copy h1 { max-width: 12ch !important; }
  .growth-map { width: 100%; }
  .cats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .hiw-inner { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .home-testimonial-grid { grid-template-columns: 1fr !important; }
  .cta-inner { grid-template-columns: 1fr; }
  .cta-btns { grid-column: auto; grid-row: auto; justify-content: flex-start !important; }
  .thero.teach-hero { min-height: auto; grid-template-columns: 1fr !important; gap: 2.5rem !important; padding-block: clamp(3rem, 10vw, 5rem) clamp(4rem, 13vw, 6.5rem) !important; }
  .why-grid, .journey { grid-template-columns: 1fr !important; }
  .why-card + .why-card { padding-left: 0 !important; border-left: 0 !important; }
  .ab-hero { grid-template-columns: 1fr; }
  .match { grid-column: 1; grid-row: auto; max-width: 28rem !important; margin: 2rem auto 0 !important; }
  .pg:has(.doc-head) { display: block; }
  .doc-toc { position: static; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 !important; }
  .doc-sec { grid-column: auto; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem) !important; }
}

@media (min-width: 60rem) {
  .desktop-app-frame { display: grid !important; grid-template-columns: 15rem minmax(0, 1fr) !important; }
  .desktop-sidebar { display: flex !important; }
  .desktop-app-content { padding: 0 clamp(1.5rem, 3vw, 3rem) 4rem !important; }
  .mtab { display: none !important; }
  .fb-fab { bottom: calc(1.25rem + var(--safe-bottom)) !important; }
}

@media (min-width: 90rem) {
  .site-header { padding-inline: max(calc((100vw - var(--content-wide)) / 2), var(--content-gutter)); }
}

@media (max-width: 39.99rem) {
  .statement-footer__grid { grid-template-columns: 1fr; }
  .statement-footer__brand { grid-column: auto; }

  .doc-sec { grid-template-columns: 1fr !important; }

  .growth-hero__actions > a { width: 100%; }
  .thero-actions > a { width: 100%; }
  .val-grid { grid-template-columns: 1fr !important; }
  .val:nth-child(odd) { border-right: 0 !important; }
  .sptcard { grid-template-columns: 3rem minmax(0, 1fr) !important; padding: 1rem !important; }
  .sptavatar { width: 3rem !important; height: 3rem !important; }
  .sptrow1 { align-items: flex-start; flex-direction: column; gap: 0.25rem !important; }
  .sptfoot { align-items: flex-start !important; flex-wrap: wrap; }
  .sptprice { width: 100%; margin-left: 0 !important; }
  .cats-head, .feat-head { align-items: flex-start !important; flex-direction: column; gap: 1rem; }
  .cats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cat { min-height: 7.5rem; }
  .feat-grid { grid-template-columns: 1fr !important; }
  .hiw-steps { grid-template-columns: 1fr !important; }
  .hiw-line { display: none; }
  .hiw-num { margin-bottom: 0.75rem !important; }
  .home-empty-tutors { align-items: flex-start; flex-direction: column; }
  .home-empty-tutors a { margin-left: 0; }
  .cta-btns { width: 100%; flex-direction: column; }
  .cta-btns > a { width: 100%; }

  :where(.class-actions, .hero-actions, .auth-actions) > :where(a, button) { width: 100%; justify-content: center; }

  :where(.admin-table, .adtable),
  :where(.admin-table, .adtable) tbody,
  :where(.admin-table, .adtable) tr,
  :where(.admin-table, .adtable) td { display: block; width: 100%; }

  :where(.admin-table, .adtable) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :where(.admin-table, .adtable) tr { margin-bottom: 0.75rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
  :where(.admin-table, .adtable) td { padding: 0.5rem 0 !important; border: 0 !important; overflow-wrap: anywhere; }
  :where(.admin-table, .adtable) td[data-label]::before { display: block; margin-bottom: 0.25rem; color: var(--muted); content: attr(data-label); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
}

/* Hallmark · desktop tutor workspace · filters / results / comparison */
.search-page .search-workspace {
  display: grid;
  grid-template-columns: 14rem minmax(25rem, 1fr) minmax(27rem, .95fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  align-items: start;
}

.search-page .spfilters-slot {
  position: sticky;
  top: 5.25rem;
  grid-column: 1;
  margin: 0;
}

.search-page .spfilters {
  display: grid;
  gap: 1.25rem;
  padding: 0 1.25rem 0 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
}

.search-page .spchip-group { min-width: 0; }
.search-page .spmain { grid-column: 2; }

.search-page .sptcard {
  display: block;
  padding: 0;
}

.search-page .sptcard__pick {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
  width: 100%;
  padding: 1rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.search-page .sptcard__pick:hover .sptname { color: var(--action); }
.search-page .sptcard__pick:focus-visible { outline: 3px solid var(--focus-outer); outline-offset: 4px; }
.search-page .sptcard__pick[aria-pressed="true"] { background: var(--lotus-soft); }
.search-page .sptcard__pick:disabled { cursor: not-allowed; opacity: .5; }
.search-page .sptavatar { width: 8.5rem; height: 10.5rem; }

.tutor-compare {
  position: sticky;
  top: 5.25rem;
  grid-column: 3;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.tutor-compare__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}

.tutor-compare__head h2 { margin: 0; font-size: var(--text-lg); }
.tutor-compare__head [data-compare-clear] { border: 0; background: transparent; color: var(--action); font: 700 var(--text-xs)/1 var(--font-ui); cursor: pointer; }
.tutor-compare__hint { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.6; }
.tutor-compare__slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

.tutor-mini {
  position: relative;
  min-width: 0;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
}

.tutor-mini__remove {
  position: absolute;
  top: .4rem;
  right: .4rem;
  z-index: 1;
  display: grid;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
}

.tutor-mini__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--surface-2);
}
.tutor-mini__portrait img,
.tutor-mini__portrait .dynamic-avatar { display: grid; width: 100%; height: 100%; place-items: center; object-fit: cover; font-size: 1.75rem; font-weight: 720; }
.tutor-mini h3 { overflow-wrap: anywhere; margin: .75rem 0 .25rem; font-size: var(--text-sm); }
.tutor-mini__subjects { min-height: 2.7em; margin: 0; overflow: hidden; color: var(--muted); font-size: var(--text-xs); line-height: 1.35; }
.tutor-mini dl { margin: .75rem 0; border-top: 1px solid var(--line); }
.tutor-mini dl div { display: grid; grid-template-columns: 1fr auto; gap: .35rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--text-3xs); }
.tutor-mini dt { color: var(--muted); }
.tutor-mini dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tutor-mini__full { display: inline-flex; color: var(--action); font-size: var(--text-xs); font-weight: 750; text-decoration: none; white-space: nowrap; }

@media (max-width: 74.99rem) and (min-width: 60rem) {
  .search-page .search-workspace { grid-template-columns: 13rem minmax(24rem, 1fr); }
  .tutor-compare { position: static; grid-column: 2; }
  .tutor-compare__slots { grid-template-columns: repeat(2, minmax(0, 15rem)); }
}

@media (max-width: 59.99rem) {
  .search-page .search-workspace { display: block; }
  .search-page .spfilters-slot { position: static; }
  .search-page .spfilters { padding: 0; border: 0; }
  .tutor-compare { position: static; margin-top: 2rem; }
  .tutor-compare__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 39.99rem) {
  .search-page .sptcard__pick { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; }
  .tutor-compare__slots { grid-template-columns: 1fr; }
  .tutor-mini { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .75rem; }
  .tutor-mini__portrait { grid-row: 1 / span 4; }
  .tutor-mini h3,
  .tutor-mini__subjects,
  .tutor-mini dl,
  .tutor-mini__full { grid-column: 2; }
  .tutor-mini h3 { margin: .2rem 2rem 0 0; }
  .tutor-mini dl { margin: .25rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .theme-menu:popover-open, .ui-dialog[open], :where(.dbmain, .dashboard-main, .requests-main, .messages-main, .sessions-main, .students-main) > :first-child { animation: none !important; }
}

/* Hallmark · macrostructure: Index-First · genre: playful-soft · feature: private learning journal
 * Pre-emit critique — P5: calm record, not analytics; H5: index → filters → timeline;
 * E4: one Lotus marker per record; S5: shared lesson/dashboard/workbench partial;
 * R5: mobile-first fields and print records; V5: factual language, no scores/streaks.
 * Hallmark 58-gate audit: pass — contrast, reflow, focus, states, motion, and copy.
 */
.learning-workbench,
.learning-summary-page { min-height: 100%; background: var(--paper); color: var(--ink); }

.learning-page { width: min(100%, 68rem); margin: 0 auto; padding-block: clamp(2rem, 4vw, 3.5rem) 6rem !important; }
.learning-page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding: 0 0 clamp(2rem, 4vw, 3rem); }
.learning-page-head > div,
.learning-section-head > div { min-width: 0; }
.learning-page-head h1 { max-width: 14ch; min-width: 0; overflow-wrap: anywhere; font: 550 clamp(2.5rem, 5vw, 4.25rem)/.98 var(--font-editorial); letter-spacing: -.03em; }
.learning-page-head > div > p { max-width: 62ch; margin-top: .85rem; color: var(--muted); line-height: 1.6; }
.learning-head-action { display: inline-flex; min-height: var(--control-h); align-items: center; gap: .5rem; border-bottom: 1px solid var(--line-strong); color: var(--action); font-size: var(--text-sm); font-weight: 700; }

.learning-marker { display: inline-block; width: .75rem; height: .75rem; flex: 0 0 auto; border-radius: var(--radius-node); background: var(--lotus); }
.learning-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.5rem; }
.learning-section-head h2 { min-width: 0; overflow-wrap: anywhere; font: 550 clamp(1.65rem, 3vw, 2.35rem)/1.08 var(--font-editorial); letter-spacing: -.02em; }
.learning-section-head > div > p { max-width: 62ch; margin-top: .5rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.learning-section-head > span { color: var(--muted); font-size: var(--text-xs); }

.learning-overview,
.learning-missing,
.learning-index,
.learning-records { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.learning-index { border-top-color: var(--line-strong); }
.learning-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.learning-facts > div { padding: 1rem; }
.learning-facts > div + div { border-left: 1px solid var(--line); }
.learning-facts dt { color: var(--muted); font-size: var(--text-xs); }
.learning-facts dd { margin-top: .4rem; font: 550 clamp(1.35rem, 3vw, 1.85rem)/1 var(--font-editorial); font-variant-numeric: tabular-nums; }
.learning-facts dd span { font: 650 var(--text-sm)/1.2 var(--font-ui); }
.learning-latest-focus { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; margin-bottom: 1.25rem; padding: 1.25rem; border-radius: var(--radius-card); background: var(--spark-soft); }
.learning-latest-focus > i { margin-top: .15rem; color: var(--spark-ink); font-size: 1.35rem; }
.learning-latest-focus strong { color: var(--ink-2); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; }
.learning-latest-focus p { max-width: 65ch; margin-top: .4rem; font-size: 1.05rem; line-height: 1.6; }
.learning-latest-focus small { display: block; margin-top: .5rem; color: var(--muted); font-size: var(--text-xs); }
.learning-history-note { margin-top: .75rem; color: var(--muted); font-size: var(--text-xs); }
.learning-overview-scope { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.learning-overview-scope i { color: var(--sage); font-size: 1rem; }

.learning-missing-list,
.learning-dashboard-missing { border-top: 1px solid var(--line); }
.learning-missing-list a,
.learning-dashboard-missing a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: var(--control-h); gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.learning-missing-list a:hover strong,
.learning-dashboard-missing a:hover strong { color: var(--action); }
.learning-missing-list small,
.learning-dashboard-missing small { display: block; margin-top: .25rem; color: var(--muted); }

.learning-filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.learning-filter-row a { display: grid; grid-template-columns: auto minmax(0, 1fr); max-width: 100%; min-height: 4.5rem; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink-2); font-size: var(--text-sm); }
.learning-filter-row a > i { color: var(--muted); font-size: 1.2rem; }
.learning-filter-row a span { min-width: 0; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.learning-filter-row a small { display: block; margin-top: .2rem; overflow: hidden; color: var(--muted); font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; }
.learning-filter-row a.is-active { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }
.learning-filter-row a.is-active > i { color: var(--sage-deep); }
.learning-mobile-chooser { display: none; }
.learning-tutor-filter { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.learning-tutor-filter h3 { margin-bottom: .65rem; color: var(--muted); font-size: var(--text-xs); }
.learning-tutor-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.learning-tutor-row a { display: inline-flex; min-height: var(--control-h); align-items: center; padding: .5rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); font-size: var(--text-sm); font-weight: 650; }
.learning-tutor-row a.is-active { border-color: var(--sage); background: var(--sage-soft); color: var(--sage-deep); }
.learning-scope-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: center; margin-top: 1.25rem; padding: 1rem 0; border-block: 1px solid var(--line); }
.learning-scope-bar > i { align-self: start; margin-top: .2rem; color: var(--sage); font-size: 1.15rem; }
.learning-scope-bar div { min-width: 0; }
.learning-scope-bar div > span { display: block; color: var(--muted); font-size: var(--text-xs); }
.learning-scope-bar strong { display: block; margin-top: .15rem; overflow-wrap: anywhere; }
.learning-scope-bar small { display: block; max-width: 68ch; margin-top: .3rem; color: var(--muted); line-height: 1.5; }
.learning-scope-bar > a { display: inline-flex; min-height: var(--control-h); align-items: center; gap: .45rem; color: var(--action); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.learning-scope-bar > span { max-width: 24ch; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; text-align: right; }

.learning-timeline { position: relative; }
.learning-timeline > .learning-entry { margin-bottom: 1rem; }
.learning-entry { position: relative; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); text-align: left; }
.learning-entry-context { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem 1rem; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.learning-entry-context .learning-marker { margin-top: .25rem; }
.learning-entry-context h3 { font-size: 1.05rem; font-weight: 750; }
.learning-entry-context h3 span { color: var(--muted); font-weight: 450; }
.learning-entry-context > a { color: var(--action); font-size: var(--text-xs); font-weight: 700; }
.learning-entry-date { margin-bottom: .25rem; color: var(--muted); font-size: var(--text-xs); }
.learning-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.learning-entry-heading h2 { margin-top: .25rem; font: 550 1.7rem/1.1 var(--font-editorial); }
.learning-updated { color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.learning-privacy { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; color: var(--muted); font-size: var(--text-xs); }
.learning-privacy i { color: var(--sage); }
.learning-save-state { display: flex; align-items: flex-start; gap: .55rem; margin: -.35rem 0 1.25rem; padding: .75rem; border-radius: var(--radius-control); color: var(--ink-2); font-size: var(--text-xs); line-height: 1.5; }
.learning-save-state i { flex: 0 0 auto; margin-top: .1rem; font-size: 1rem; }
.learning-save-state.is-draft { background: var(--spark-soft); }
.learning-save-state.is-draft i { color: var(--spark-ink); }
.learning-save-state.is-shared { background: var(--sage-soft); }
.learning-save-state.is-shared i { color: var(--sage-deep); }
.learning-editor { margin-top: 1.25rem; border-top: 1px solid var(--line); }
.learning-editor > summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; min-height: var(--control-h); align-items: center; gap: .6rem; color: var(--action); font-size: var(--text-sm); font-weight: 700; cursor: pointer; list-style: none; }
.learning-editor > summary::-webkit-details-marker { display: none; }
.learning-editor > summary i:first-child { font-size: 1.05rem; }
.learning-editor > summary i:last-child { transition: transform 160ms ease-out; }
.learning-editor[open] > summary i:last-child { transform: rotate(180deg); }
.learning-editor > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.learning-editor > .learning-form { padding-top: 1rem; }
.learning-editor--live { margin-top: 0; border-top: 0; }
.learning-editor--live > summary { color: var(--ink-2); }

.learning-form label { display: grid; gap: .5rem; color: var(--ink-2); font-size: var(--text-sm); font-weight: 650; }
.learning-form label b { color: var(--action); }
.learning-field-hint { color: var(--muted); font-size: var(--text-xs); font-weight: 450; line-height: 1.45; }
.learning-form textarea { width: 100%; min-height: 5.5rem; resize: vertical; padding: .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-size: var(--text-base); font-weight: 420; line-height: 1.55; }
.learning-form textarea::placeholder { color: var(--muted); opacity: 1; }
.learning-form textarea:focus { border-color: var(--action); }
.learning-form textarea[aria-invalid="true"] { border-color: var(--danger) !important; }
.learning-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.learning-primary-focus { margin-top: 1rem; }
.learning-focus-field textarea { border-color: color-mix(in oklch, var(--spark) 65%, var(--line)) !important; background: var(--spark-soft) !important; }
.learning-more-details { margin-top: 1rem; border-block: 1px solid var(--line); }
.learning-more-details > summary { display: flex; min-height: var(--control-h); align-items: center; justify-content: space-between; gap: .75rem; color: var(--action); font-size: var(--text-sm); font-weight: 700; cursor: pointer; list-style: none; }
.learning-more-details > summary::-webkit-details-marker { display: none; }
.learning-more-details > summary i { transition: transform 160ms ease-out; }
.learning-more-details[open] > summary i { transform: rotate(180deg); }
.learning-more-details > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.learning-more-details .learning-form-grid { margin: 0 0 1rem; }
.field-error { min-height: 1lh; color: var(--danger); font-size: var(--text-xs); font-weight: 550; }
.learning-form-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.learning-form-actions > span { max-width: 44ch; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.learning-draft-device-status { margin-top: .75rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.learning-save,
.learning-cancel,
.learning-homework button,
.learning-summary-controls button,
.learning-summary-controls form button { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; gap: .5rem; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--action); color: var(--action-ink); font-weight: 700; white-space: nowrap; }
.learning-save:hover,
.learning-summary-controls > button:hover { background: var(--action-hover); }
.learning-cancel { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.learning-cancel:hover { background: var(--surface-2); }
.learning-homework button:hover,
.learning-summary-controls form button:hover { background: var(--surface-2); }
.learning-head-action:hover,
.learning-entry-context > a:hover,
.learning-scope-bar > a:hover,
.learning-pagination a:hover { color: var(--action-hover); }
.learning-filter-row a:hover,
.learning-tutor-row a:hover { border-color: var(--line-strong); color: var(--ink); }
.learning-head-action:active,
.learning-entry-context > a:active,
.learning-scope-bar > a:active,
.learning-pagination a:active { color: var(--action); }
.learning-filter-row a:active,
.learning-tutor-row a:active { background: var(--surface-2); }
.learning-save:active,
.learning-cancel:active,
.learning-homework button:active,
.learning-summary-controls button:active { transform: translateY(1px); }

.learning-note-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.learning-note-body > div { min-width: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.learning-note-body .learning-note-primary { grid-column: 1 / -1; padding-top: 0; border-top: 0; }
.learning-note-body .learning-note-primary p { max-width: 70ch; font-size: 1.05rem; }
.learning-note-body h4,
.learning-homework h4 { margin-bottom: .5rem; color: var(--muted); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; }
.learning-note-body p,
.learning-homework p { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.65; }
.learning-note-body .learning-note-focus { padding: 1rem; border-top: 0; border-radius: var(--radius-control); background: var(--spark-soft); }
.learning-note-focus h4 { display: flex; align-items: center; gap: .5rem; color: var(--ink-2); }
.learning-note-focus h4 i { color: var(--spark-ink); font-size: 1rem; }
.learning-homework { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.25rem; padding: 1rem; border-radius: var(--radius-control); background: var(--surface-2); }
.learning-homework.is-complete { background: var(--sage-soft); }
.learning-homework h4 i { color: var(--sage); }
.learning-homework span { display: block; margin-top: .5rem; color: var(--muted); font-size: var(--text-xs); }
.learning-homework button { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.learning-empty-note,
.learning-timeline-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.learning-empty-note h2,
.learning-timeline-empty h3 { font-size: var(--text-base); }
.learning-empty-note p,
.learning-timeline-empty p { max-width: 65ch; margin-top: .5rem; color: var(--muted); line-height: 1.6; }
.learning-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-sm); }
.learning-pagination a { display: inline-flex; min-height: var(--control-h); align-items: center; gap: .5rem; color: var(--action); font-weight: 700; white-space: nowrap; }

.ts-card > .learning-entry { margin: 1.5rem 0; padding: 1.5rem 0; border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; text-align: left; }
.ts-card > .learning-entry .learning-empty-note { padding: 0; border: 0; border-radius: 0; background: transparent; }
.ts-live-journal { margin: 1.5rem 0; padding-block: 1.5rem; border-block: 1px solid var(--line); text-align: left; }
.ts-live-journal-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.ts-live-journal-head > i { margin-top: .15rem; color: var(--lotus); font-size: 1.3rem; }
.ts-live-journal-head h2 { font: 550 1.55rem/1.1 var(--font-editorial); }
.ts-live-journal-head p { max-width: 62ch; margin-top: .4rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.ts-live-journal > .learning-entry { padding: 0; border: 0; border-radius: 0; background: transparent; }
.learning-dashboard { padding-bottom: .5rem; }
.learning-dashboard > .dbcard-head { margin-bottom: .5rem; }
.learning-dashboard-notes .learning-entry { padding-block: 1rem; }
.learning-dashboard-notes .learning-entry-context { margin-bottom: 1rem; }
.learning-dashboard-notes .learning-entry-context > a,
.learning-dashboard-notes .learning-entry-heading,
.learning-dashboard-notes .learning-privacy,
.learning-dashboard-notes .learning-note-body > div:not(.learning-note-primary):not(.learning-note-focus) { display: none; }
.learning-dashboard-notes .learning-note-body { grid-template-columns: 1fr; }
.learning-dashboard-notes .learning-note-primary,
.learning-dashboard-notes .learning-note-focus { grid-column: auto; }
.learning-dashboard-empty { display: flex; min-height: 5rem; align-items: center; gap: .75rem; color: var(--muted); }
.learning-dashboard-empty i { color: var(--sage); font-size: 1.35rem; }

.learning-summary-document { width: min(100% - 2rem, 68rem); margin: 2rem auto 5rem; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--line); background: var(--surface); }
.learning-summary-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line-strong); }
.learning-summary-brand { display: flex; grid-column: 1 / -1; align-items: center; gap: .5rem; font-weight: 800; }
.learning-summary-brand span { color: var(--action); }
.learning-summary-title p { color: var(--sage-deep); font-size: var(--text-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.learning-summary-title h1 { max-width: 15ch; min-width: 0; margin: .5rem 0; overflow-wrap: anywhere; font: 520 clamp(2.25rem, 5vw, 4rem)/.98 var(--font-editorial); letter-spacing: -.03em; }
.learning-summary-title > span { color: var(--muted); }
.learning-summary-parties { min-width: 15rem; align-self: end; }
.learning-summary-parties > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.learning-summary-parties dt { color: var(--muted); font-size: var(--text-xs); }
.learning-summary-parties dd { font-weight: 650; }
.learning-summary-controls { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.learning-summary-controls form { display: flex; align-items: end; gap: .5rem; }
.learning-summary-controls label { display: grid; gap: .25rem; color: var(--muted); font-size: var(--text-xs); }
.learning-summary-controls input { min-height: var(--control-h); padding: 0 .75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); }
.learning-summary-controls form button { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.learning-summary-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.learning-summary-totals > div { padding: 1.25rem .75rem; }
.learning-summary-totals > div + div { border-left: 1px solid var(--line); }
.learning-summary-totals dt { min-height: 2.5em; color: var(--muted); font-size: var(--text-xs); }
.learning-summary-totals dd { margin-top: .5rem; font: 520 1.35rem/1.1 var(--font-editorial); font-variant-numeric: tabular-nums; }
.learning-summary-lessons { padding-top: 2.5rem; }
.learning-summary-lessons > h2 { margin-bottom: 1rem; font: 520 2rem/1.1 var(--font-editorial); }
.learning-summary-list article { break-inside: avoid; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.learning-summary-list article > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.learning-summary-list article > header h3 { font-size: var(--text-base); }
.learning-summary-list article > header p,
.learning-summary-list article > header strong { color: var(--muted); font-size: var(--text-xs); }
.learning-summary-list article > div { max-width: 75ch; margin: 1rem 0 0 1.5rem; }
.learning-summary-list h4 { margin-bottom: .25rem; color: var(--muted); font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; }
.learning-summary-list p { line-height: 1.55; }
.learning-summary-list .is-focus h4 { color: var(--ink-2); }
.learning-summary-empty { padding: 2rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.learning-summary-foot { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.learning-summary-foot p + p { margin-top: .5rem; }

@media (max-width: 59.99rem) {
  .learning-page { padding-inline: var(--content-gutter) !important; }
}

@media (max-width: 39.99rem) {
  .learning-page-head { grid-template-columns: 1fr; }
  .learning-head-action { justify-self: start; }
  .learning-filter-row,
  .learning-tutor-row { display: none; }
  .learning-mobile-chooser { display: block; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); }
  .learning-mobile-chooser > summary { display: flex; min-height: var(--control-h); align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .85rem; color: var(--ink-2); font-weight: 700; cursor: pointer; list-style: none; }
  .learning-mobile-chooser > summary::-webkit-details-marker { display: none; }
  .learning-mobile-chooser > summary span { min-width: 0; overflow-wrap: anywhere; }
  .learning-mobile-chooser > summary small { display: block; margin-bottom: .15rem; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
  .learning-mobile-chooser > summary i { flex: 0 0 auto; transition: transform 160ms ease-out; }
  .learning-mobile-chooser[open] > summary i { transform: rotate(180deg); }
  .learning-mobile-chooser > summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .learning-mobile-chooser nav { display: grid; padding: .35rem; border-top: 1px solid var(--line); }
  .learning-mobile-chooser nav a { min-height: var(--control-h); padding: .7rem .65rem; border-radius: calc(var(--radius-control) - 4px); color: var(--ink-2); font-size: var(--text-sm); font-weight: 650; }
  .learning-mobile-chooser nav a.is-active { background: var(--sage-soft); color: var(--sage-deep); }
  .learning-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-facts > div { padding: .85rem .5rem; }
  .learning-facts > div + div { border-left: 1px solid var(--line); }
  .learning-facts dt { min-height: 2.8em; }
  .learning-scope-bar { grid-template-columns: auto minmax(0, 1fr); }
  .learning-scope-bar > :is(a, span) { grid-column: 2; justify-self: start; max-width: none; text-align: left; white-space: normal; }
  .learning-form-grid,
  .learning-note-body { grid-template-columns: 1fr; }
  .learning-note-body .learning-note-primary { grid-column: auto; }
  .learning-form-actions,
  .learning-homework { align-items: stretch; flex-direction: column; }
  .learning-save,
  .learning-cancel,
  .learning-homework button { width: 100%; }
  .learning-entry-context { grid-template-columns: auto minmax(0, 1fr); }
  .learning-entry-context > a { grid-column: 2; }
  .learning-entry-heading { align-items: start; }
  .learning-updated { max-width: 9rem; text-align: right; white-space: normal; }
  .learning-summary-document { width: 100%; margin: 0; border-inline: 0; }
  .learning-summary-head { grid-template-columns: 1fr; }
  .learning-summary-parties { min-width: 0; }
  .learning-summary-controls { align-items: stretch; flex-direction: column; }
  .learning-summary-controls form { align-items: stretch; flex-direction: column; }
  .learning-summary-controls > button { width: 100%; }
  .learning-summary-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learning-summary-totals > div + div { border-left: 0; }
  .learning-summary-totals > div:nth-child(even) { border-left: 1px solid var(--line); }
  .learning-summary-totals > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .learning-summary-list article > header { grid-template-columns: auto minmax(0, 1fr); }
  .learning-summary-list article > header strong { grid-column: 2; }
}

@media print {
  @page { margin: 14mm; }
  .learning-summary-page {
    color-scheme: light;
    --paper: var(--print-paper);
    --surface: var(--print-surface);
    --surface-2: var(--print-paper);
    --ink: var(--print-ink);
    --ink-2: var(--print-ink);
    --muted: var(--print-muted);
    --line: var(--print-line);
    --line-strong: var(--print-line-strong);
  }
  html, body { height: auto; background: var(--surface) !important; }
  body { padding: 0 !important; font-size: 10pt; }
  .learning-summary-screen-nav,
  .learning-summary-controls,
  .mtab,
  .fb-fab,
  .ux-toast { display: none !important; }
  .learning-summary-page { min-height: auto; background: var(--surface) !important; }
  .learning-summary-document { width: 100%; margin: 0; padding: 0; border: 0; }
  .learning-summary-title h1 { font-size: 28pt; }
  .learning-summary-totals dd { font-size: 14pt; }
  .learning-summary-list article { break-inside: avoid-page; }
}

/* Hallmark · parent-first discovery · studied: Preply (structural inspiration only)
 * macrostructure: single-action welcome / people-led marketplace / family decision path
 * theme: custom lotus-coral · vibe: warm, plainspoken, reassuring · v2.0.0
 */

/* Hallmark · tutor profile + availability · studied: Preply (structure only)
 * macrostructure: Split Studio · theme: locked custom indigo signal · designed-as-app
 * pre-emit critique: P5 H5 E4 S5 R5 V5
 * contrast: pass (40–41) · mobile: pass (34, 49, 50–57) · tokens: pass (48)
 */
.tp-video {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--ink);
  box-shadow: var(--shadow-card);
}

.tp-video iframe { width: 100%; height: 100%; border: 0; }

.tp-identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 1rem;
  color: var(--ink-2);
  font-size: var(--text-sm);
}

.tp-identity-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.tpcard-schedule { padding: clamp(1rem, 3vw, 1.5rem); }
/* A container, not a media query: this same grid sits in the booking form's
   472px card and the profile's ~830px one at the same viewport width, so only
   the container's own width can decide how many days fit. */
.tp-availability { min-width: 0; container-type: inline-size; }

.tp-avail-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.tp-avail-head h3 { margin: 0 0 .25rem; }
.tp-avail-head p, .tp-avail-empty { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.tp-avail-duration { display: grid; gap: .25rem; color: var(--muted); font-size: var(--text-xs); }
.tp-avail-duration { width: fit-content; margin-top: 1rem; }

.tp-avail-duration select, .tp-range select,
.schedule-editor input {
  min-height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  outline: 2px solid transparent;
  outline-offset: 1px;
}

.tp-avail-duration select { max-width: 15rem; padding: 0 .75rem; }
.schedule-editor input { width: 100%; padding: .75rem; }
.tp-avail-duration select:focus-visible, .tp-range select:focus-visible,
.schedule-editor input:focus-visible { outline-color: var(--action); }
.tp-avail-duration select:active, .schedule-editor input:active { border-color: var(--action); }
.tp-avail-duration select:disabled, .schedule-editor input:disabled { opacity: .55; cursor: not-allowed; background: var(--surface-2); }

.tp-week-nav {
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  gap: .5rem;
  align-items: center;
  margin: 1.25rem 0 .75rem;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.tp-week-nav button, .tp-slots :is(a, button) {
  min-height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--action);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* opacity:.55 over the same colours computed to 2.64:1 in dark mode, so the
   chevron all but disappeared instead of reading as unavailable. Say it with
   colour the theme controls. */
.tp-week-nav button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-2);
  cursor: not-allowed;
}

/* The design system commits to 48px on coarse pointers, and on a tutor whose
   current week has one open day this chevron is the whole flow. */
@media (pointer: coarse) {
  .tp-week-nav button, .tp-slots :is(a, button) { min-height: 3rem; }
  .tp-week-nav { grid-template-columns: 3rem 1fr 3rem; }
}
.tp-week-nav button:not(:disabled):hover, .tp-slots :is(a, button):hover,
.tp-slots button[aria-pressed="true"] { border-color: var(--action); background: var(--lotus-soft); }
.tp-week-nav button:active, .tp-slots :is(a, button):active { background: var(--surface-2); }
.tp-week-nav button:focus-visible, .tp-slots :is(a, button):focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

/* A week reads as one row. The old auto-fit fitted whatever the 5.25rem minimum
   allowed — five columns in the booking form, wrapping Sat/Sun onto a second
   row that looked like a separate week. Seven columns once the container can
   label them, two when it cannot; nothing in between, because four or five
   columns always reads as a partial week. */
.tp-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@container (min-width: 27rem) {
  .tp-week { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
}
.tp-day { min-width: 0; }
/* Five of seven cells holding only an em-dash cost half a screen-height on a
   phone before the parent reached the two days they could actually book. Hide
   the closed days where space is scarce; keep the full week where it is not,
   because seeing which days a tutor never teaches is worth something there. */
@media (max-width: 60rem) { .tp-day--empty { display: none; } }
.tp-week.is-empty { display: none; }
.tp-week-empty { margin: 0 0 .75rem; padding: .75rem; border: 1px dashed var(--line); border-radius: var(--radius-tile); color: var(--muted); font-size: var(--text-sm); text-align: center; }
/* The summary was a chip with nothing to say it opened. */
.tp-range-caret { flex: 0 0 auto; color: var(--muted); font-size: 12px; transition: transform var(--duration-fast) var(--ease-standard); }
.tp-range[open] .tp-range-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .tp-range-caret { transition: none; } }
/* Reserves room for the longest header ("Chủ Nhật · 16/08" wraps to three lines
   in a seven-column card) so every day's chips start on the same line. */
.tp-day h4 { min-height: 3.25rem; margin: 0 0 .5rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.25; font-weight: 650; text-align: center; }
.tp-slots { display: grid; gap: .5rem; }
.tp-slots :is(a, button) { display: grid; place-items: center; padding: .5rem .25rem; text-decoration: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.tp-no-slot { display: grid; min-height: 2.75rem; place-items: center; color: var(--muted-2); }

/* A run of consecutive start times. The summary carries the cue and the span on
   two short lines so the seven-column week grid keeps its existing width — a
   one-line "Start between 07:40 and 08:30" would force it to wrap. */
.tp-range summary, .tp-slots .tp-range-link {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: .5rem .125rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--action);
  font-weight: 700;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
  list-style: none;
}
.tp-range summary::-webkit-details-marker { display: none; }
.tp-range summary:hover, .tp-range[open] summary { border-color: var(--action); background: var(--lotus-soft); }
.tp-range summary:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.tp-slots .tp-range-link { text-decoration: none; }
.tp-range-cue { color: var(--muted); font-size: var(--text-xs); font-weight: 650; }
/* "07:00–08:30" is wider than a day column, so it wraps after the dash rather
   than overflowing the chip or forcing the week grid wider. */
.tp-range-span { font-size: var(--text-xs); line-height: 1.3; word-break: break-word; }
/* A day column is ~3.5rem wide in a seven-column card, most of which the native
   dropdown arrow claims — so the placeholder is set small enough to survive it. */
.tp-range select { width: 100%; margin-top: .5rem; padding: 0 .25rem; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.tp-avail-empty { margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--sage-soft); color: var(--ink-2); }

.ep-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.schedule-editor { max-width: 52rem; padding-bottom: 4rem; }
.schedule-saved { padding: .75rem 1rem; border-radius: var(--radius-control); background: var(--sage-soft); color: var(--sage-deep); }
.schedule-editor-fields { display: grid; gap: 1rem; }
.schedule-editor:not(.schedule-editor--embedded) .schedule-section { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.schedule-section h2 { margin: 0 0 .35rem; color: var(--ink); font-size: var(--text-lg); }
.schedule-section > .hint { margin: 0 0 1rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.schedule-days { display: grid; gap: .75rem; }
.schedule-day { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-control); }
.schedule-day legend { padding: 0 .35rem; color: var(--ink); font-weight: 700; }
.schedule-row, .schedule-date-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 2.75rem; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.schedule-row input, .schedule-date-row input { min-width: 0; }
.schedule-date-row { grid-template-columns: minmax(0, 18rem) 2.75rem; }
.schedule-row button, .schedule-date-row button { min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: var(--radius-control); background: var(--surface-2); color: var(--muted); cursor: pointer; }
.schedule-row button:hover, .schedule-date-row button:hover { color: var(--danger); }
.schedule-row button:active, .schedule-date-row button:active { background: var(--surface-3); }
.schedule-row button:focus-visible, .schedule-date-row button:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.schedule-row button:disabled, .schedule-date-row button:disabled { opacity: .55; cursor: not-allowed; }
.schedule-day .btn-ghost, .schedule-editor .btn-ghost { min-height: 2.75rem; padding-inline: .75rem; white-space: nowrap; }

.schedule-card { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); overflow: clip; }
.schedule-card > summary { display: grid; min-height: 3.75rem; align-content: center; gap: .2rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.schedule-card > summary::-webkit-details-marker { display: none; }
.schedule-card > summary > span { display: flex; align-items: center; gap: .5rem; font-size: var(--text-sm); font-weight: 750; }
.schedule-card > summary > span .ti { color: var(--action); font-size: var(--text-lg); }
.schedule-card > summary small { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.schedule-card > summary:focus-visible { outline: 2px solid var(--action); outline-offset: -3px; }
.schedule-card[open] > summary { border-block-end: 1px solid var(--line); }
.schedule-editor--embedded { max-width: none; padding: 1rem; }
.schedule-editor--embedded .schedule-editor-fields { gap: 1.25rem; }
.schedule-editor--embedded .schedule-section + .schedule-section { padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }
.schedule-editor--embedded .schedule-section h2 { font-size: var(--text-base); }
.schedule-editor--embedded .schedule-section > .hint { font-size: var(--text-xs); }
.schedule-editor--embedded .schedule-day { padding: .75rem; }
.schedule-editor--embedded .schedule-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.schedule-editor--embedded .schedule-row button { grid-column: 1 / -1; width: 100%; }
.schedule-editor--embedded .schedule-date-row { grid-template-columns: minmax(0, 1fr) 2.75rem; }
.schedule-editor--embedded .schedule-save { width: 100%; min-height: var(--control-h); margin-top: 1rem; white-space: nowrap; }

@media (max-width: 51.25rem) {
  .tp-avail-head { align-items: stretch; flex-direction: column; }
  /* Column count moved to the @container rule above: this grid sits in cards of
     very different widths at the same viewport, so the viewport never knew
     enough to decide. */
}

@media (max-width: 30rem) {
  .tpbody { padding-inline: 1rem; }
  .tphead { align-items: flex-start; padding: 1rem; }
  .tphead-avatar { width: 4rem; height: 4rem; }
  .tpstats { gap: 1rem; }
  .ep-field-grid { grid-template-columns: 1fr; }
  .schedule-day { padding: .75rem; }
  .schedule-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .schedule-row button { grid-column: 1 / -1; width: 100%; }
}

.parent-home main,
.search-page > .search-intro,
.search-page > #filter-form {
  width: min(100%, var(--content-wide));
  margin-inline: auto;
}

.parent-eyebrow {
  margin: 0 0 .75rem;
  color: var(--lotus-ink);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.parent-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr);
  gap: clamp(2rem, 6vw, 6rem);
  min-height: min(44rem, calc(100vh - 4.5rem));
  padding: clamp(3.5rem, 8vw, 7rem) var(--content-gutter);
  background: var(--welcome);
  color: var(--welcome-ink);
}

.parent-hero__copy {
  align-self: center;
  max-width: 48rem;
}

.parent-hero .parent-eyebrow { color: var(--welcome-ink); }

.parent-hero h1 {
  max-width: 11ch;
  margin: 0;
  font: 760 clamp(3rem, 6.6vw, 6.25rem)/.96 var(--font-ui);
  letter-spacing: -.055em;
}

.parent-hero__lead {
  max-width: 40rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
}

.parent-search {
  max-width: 42rem;
  margin-top: 2.25rem;
}

.parent-search label {
  display: block;
  margin-bottom: .5rem;
  font-size: var(--text-sm);
  font-weight: 700;
}

.parent-search__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: .35rem;
  border: 1px solid color-mix(in oklch, var(--welcome-ink) 18%, transparent);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 .5rem 0 color-mix(in oklch, var(--welcome-ink) 12%, transparent);
}

.parent-search input {
  min-width: 0;
  min-height: 3.35rem;
  padding: 0 1rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

/* The hero search is THE action — give it a visible two-tone focus ring
   (paper separation via offset + indigo contrast).

   The offset alone only separates against paper, and this control sits on the
   hero's tinted field, so the gap filled with hero blue and the ring read as one
   tone. The inset paper ring restores the second tone; the existing block shadow
   is repeated because box-shadow replaces rather than adds. */
.parent-search__row:focus-within {
  outline: 2px solid var(--focus-outer);
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--focus-inner),
    0 .5rem 0 color-mix(in oklch, var(--welcome-ink) 12%, transparent);
}

.parent-search button,
.parent-final-cta > a {
  min-height: 3.35rem;
  padding-inline: 1.3rem;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--paper);
  font: 750 var(--text-sm)/1 var(--font-ui);
  text-decoration: none;
  cursor: pointer;
}

.parent-search button:hover,
.parent-final-cta > a:hover { background: var(--action); color: var(--action-ink); }

.parent-search__hint {
  margin: .75rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.parent-trust-signature {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in oklch, var(--welcome-ink) 24%, transparent);
}

.parent-trial-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.parent-trial-path li {
  position: relative;
  display: grid;
  min-width: 0;
  gap: .5rem;
  color: var(--welcome-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
}

.parent-trial-path li:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  top: .45rem;
  left: .75rem;
  width: calc(100% + .5rem);
  height: 2px;
  background: color-mix(in oklch, var(--welcome-ink) 24%, transparent);
  content: "";
}

.parent-trial-path__node {
  position: relative;
  z-index: 1;
  display: block;
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--welcome);
  border-radius: var(--radius-node);
  outline: 1px solid color-mix(in oklch, var(--welcome-ink) 24%, transparent);
}

.parent-trial-path__node.is-lotus { background: var(--lotus); }
.parent-trial-path__node.is-spark { background: var(--spark); }
.parent-trial-path__node.is-sage { background: var(--sage); }

.parent-trial-rule,
.parent-evidence-proof {
  max-width: 68ch;
  margin: 1rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.parent-trial-rule { font-weight: 650; }
.parent-evidence-proof { color: color-mix(in oklch, var(--welcome-ink) 82%, transparent); }
.parent-evidence-proof strong { color: var(--welcome-ink); }

.parent-hero__art {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
}

.parent-hero__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.parent-subjects,
.parent-steps,
.parent-featured,
.parent-stories {
  padding: clamp(4rem, 8vw, 7rem) var(--content-gutter);
}

.parent-subjects {
  display: grid;
  grid-template-columns: minmax(15rem, .75fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 7vw, 7rem);
}

.parent-subjects h2,
.parent-steps h2,
.parent-featured h2,
.parent-stories h2,
.parent-final-cta h2 {
  max-width: 18ch;
  margin: 0;
  font: 650 clamp(2rem, 4vw, 4rem)/1.04 var(--font-ui);
  letter-spacing: -.04em;
}

.parent-subject-list { border-top: 1px solid var(--line-strong); }
.parent-subject-list a {
  display: flex;
  justify-content: space-between;
  padding: 1.05rem .25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.parent-subject-list a:hover { padding-inline: .65rem; background: var(--lotus-soft); }
.parent-subject-list .is-all { color: var(--action); }

.parent-steps { background: var(--surface-2); }
.parent-steps__intro { max-width: 50rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.parent-steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  list-style: none;
}
.parent-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
}
.parent-steps li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-node);
  background: var(--lotus);
  color: var(--action-ink);
  font-weight: 750;
  place-items: center;
}
.parent-steps h3 { margin: .2rem 0 .5rem; font-size: var(--text-lg); }
.parent-steps li p { margin: 0; color: var(--muted); line-height: 1.6; }

.parent-featured__head {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}
.parent-featured__head > a { display: inline-flex; min-height: var(--control-h); align-items: center; color: var(--action); font-weight: 700; text-decoration: none; }
.parent-tutor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.parent-tutor-card { min-width: 0; color: var(--ink); text-decoration: none; }
.parent-tutor-card:hover h3 { text-decoration: underline; text-underline-offset: 2px; }
.parent-tutor-card:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 3px; border-radius: var(--radius-card); }
.parent-tutor-card__photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-2);
}
.parent-tutor-card__photo img,
.parent-tutor-card__photo .dynamic-avatar { display: grid; width: 100%; height: 100%; place-items: center; object-fit: cover; font-size: 2.5rem; font-weight: 720; }
.parent-tutor-card__body { padding: 1rem .25rem 0; }
.parent-tutor-card__body > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: start; }
.parent-tutor-card h3 { flex: 1 1 10rem; min-width: 0; margin: 0; font-size: var(--text-base); }
.parent-tutor-card__body > div > span { flex: none; color: var(--muted); font-size: var(--text-xs); }
.parent-tutor-card__subject { margin: .45rem 0 0; color: var(--ink-2); font-size: var(--text-sm); }
.parent-tutor-card__facts { display: grid !important; justify-content: stretch !important; gap: .35rem !important; margin-top: .75rem; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.parent-tutor-card__facts span { display: flex; gap: .4rem; align-items: center; }
.parent-tutor-card__facts i { width: 1rem; color: var(--sage); font-size: .95rem; text-align: center; }
.parent-tutor-card__action { display: inline-flex; gap: .35rem; align-items: center; margin-top: .9rem; color: var(--action); font-size: var(--text-xs); font-weight: 700; }

.parent-stories { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 7vw, 7rem); background: var(--sage-soft); }
.parent-story-grid { display: grid; gap: 1px; background: color-mix(in oklch, var(--sage) 25%, transparent); }
.parent-story-grid blockquote { margin: 0; padding: 1.5rem; background: var(--surface); }
.parent-story-grid blockquote p { margin: 0; font: 500 clamp(1.15rem, 2vw, 1.55rem)/1.45 var(--font-editorial); }
.parent-story-grid footer { margin-top: 1rem; color: var(--muted); font-size: var(--text-xs); }

.parent-final-cta {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  margin: 0 var(--content-gutter) clamp(3rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-card);
  background: var(--welcome-soft);
}
.parent-final-cta > a { display: inline-grid; flex: none; place-items: center; }

/* Public tutor discovery deliberately avoids signed-in dashboard framing. */
.search-page { min-height: 100%; background: var(--paper); }
.search-page > .search-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
  gap: 2rem;
  align-items: end;
  padding: clamp(3rem, 7vw, 6rem) var(--content-gutter) 2.5rem;
}
.search-page .search-intro h1 { max-width: 18ch; margin: 0; font: 700 clamp(2.35rem, 5vw, 4.75rem)/1 var(--font-ui); letter-spacing: -.045em; }
.search-page .search-intro > p { margin: 0; color: var(--muted); line-height: 1.65; }
.search-page > #filter-form { padding: 0 var(--content-gutter) 5rem; }
.search-page .search-workspace { display: block; }
.search-page .spfilters-slot { position: static; margin-bottom: 2rem; }
.search-page .spfilters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding: 1rem;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.search-page .spchip-group { flex: 1 1 13rem; min-width: 0; }
.search-page .spchip-label { display: block; margin-bottom: .5rem; }
.search-page .spmain { min-width: 0; }
.search-page .spresults-head { padding: 0 0 1rem; }
.search-page .sptcard {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.search-page .sptcard:last-of-type { border-bottom: 1px solid var(--line); }
.search-page .sptavatar { width: 10rem; height: 12rem; border-radius: var(--radius-card); font-size: 2rem; }
.search-page .sptavatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.search-page .sptbody { min-width: 0; padding: .5rem 0; }
.search-page .sptname { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.search-page .sptfoot { margin-top: auto; }
.search-page .sptprice { margin-left: auto; color: var(--ink); font-size: var(--text-base); font-weight: 750; }
.search-page .search-filter-button { display: none; }

@media (max-width: 59.99rem) {
  .parent-hero { grid-template-columns: 1fr; min-height: auto; }
  .parent-hero__copy { max-width: 50rem; }
  .parent-hero h1 { max-width: 12ch; }
  .parent-hero__art { width: min(100%, 42rem); }
  .parent-subjects,
  .parent-stories { grid-template-columns: 1fr; }
  .parent-tutor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-page > .search-intro { grid-template-columns: 1fr; }
  .search-page .search-filter-button { display: inline-flex; margin-bottom: 1rem; }
  .search-page .spfilters-slot { display: none; }
  .search-page .search-filter-dialog .spfilters-slot { display: block; }
}

@media (max-width: 39.99rem) {
  .parent-hero { gap: 3rem; padding-top: 3rem; }
  .parent-hero h1 { font-size: clamp(2.8rem, 14vw, 4.25rem); }
  .parent-search__row { grid-template-columns: 1fr; gap: .35rem; }
  .parent-search button { width: 100%; }
  .parent-trial-path { grid-template-columns: 1fr; gap: 1rem; }
  .parent-trial-path li { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .parent-trial-path li:not(:last-child)::after { top: .75rem; bottom: -1.25rem; left: .45rem; width: 2px; height: auto; }
  .parent-steps ol { grid-template-columns: 1fr; }
  .parent-featured__head { align-items: start; flex-direction: column; }
  .parent-tutor-grid { grid-template-columns: 1fr; }
  .parent-tutor-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: .75rem; border-top: 1px solid var(--line); }
  .parent-tutor-card__photo { aspect-ratio: 4 / 5; }
  .parent-tutor-card__body { padding: .25rem 0; }
  .parent-featured { padding-top: 3rem; }
  .parent-hero__art img { aspect-ratio: 16 / 10; }
  .parent-final-cta { align-items: stretch; flex-direction: column; }
  .parent-final-cta > a { width: 100%; }
  .search-page .sptcard { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; }
  .search-page .sptavatar { width: 6.25rem; height: 8rem; }
  .search-page .sptrow1 { align-items: start; flex-direction: column; }
  .search-page .sptfoot { align-items: start; }
  .search-page .sptprice { width: 100%; margin: .5rem 0 0; }
}

/* Hallmark · genre: playful · macrostructure: Workbench · design-system: design.md
 * variation: dense discovery grid · compact filter/action rhythm
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * contrast/slop/mobile: pass · tutor discovery with opt-in comparison.
 */
.search-page .search-content { min-width: 0; }
.search-page .search-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 0 1.25rem;
  border-bottom: 0;
}
.search-page .search-intro h1 {
  max-width: none;
  margin: .35rem 0 0;
  font: 700 clamp(1.75rem, 3vw, 2.75rem)/1.05 var(--font-ui);
  letter-spacing: -.035em;
}
.search-page .search-intro > p { max-width: 40ch; font-size: var(--text-sm); }
.search-page > .desktop-app-frame > .search-content > #filter-form { padding: 0 0 4rem; }
.search-page .search-workspace { display: block; }

.search-filterbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.search-location {
  display: grid;
  grid-column: span 3;
  grid-row: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.search-location legend,
.search-filter > span {
  display: block;
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: var(--text-3xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.search-location legend { grid-column: 1 / -1; }
.search-filter { min-width: 0; grid-row: 1; margin: 0; }
.search-focus-filter:not(:has(*)) { display: none; }
.search-focus-filter:has(*) {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding-top: .25rem;
}
.search-focus-label {
  display: block;
  margin: 0 0 .4rem;
  color: var(--muted);
  font-size: var(--text-3xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.search-focus-chips { display: flex; min-width: 0; flex-wrap: wrap; gap: .5rem; }
.search-filterbar .spselect {
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  padding-inline: .65rem;
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-xs);
}

.search-page .spmain {
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 1.5rem 0 0 !important;
}
.search-page .spresults-head { display: flex; align-items: end; gap: 1rem; padding: 0 0 1rem; }
.search-page .spsort-label { margin-left: auto; color: var(--muted) !important; }
.search-page #search-results {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.search-page .sptcard {
  position: relative;
  display: flex !important;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-card) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.search-page .sptcard:hover { border-color: var(--sage) !important; background: var(--surface) !important; }
.search-page .sptcard__link {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.search-page .sptcard__link:focus-visible,
.search-page .sptcard__compare:focus-visible { outline: 3px solid var(--focus-outer); outline-offset: -3px; }
/* Hallmark · component: tutor portrait · genre: playful · theme: custom:indigo-signal
 * pre-emit critique: P5 H5 E5 S5 R5 V3 · mobile: pass */
.search-page .sptavatar {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
  border-radius: 0 !important;
  font-size: 2.25rem;
}
.search-page .sptavatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.search-page .sptbody { display: flex; min-width: 0; flex: 1; flex-direction: column; padding: .75rem; }
.search-page .sptrow1 { align-items: start; flex-direction: column; gap: .2rem; }
.search-page .sptname { font-size: var(--text-base); }
.search-page .sptsubj {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  color: var(--sage-deep) !important;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.search-page .sptfoot { align-items: center; flex-wrap: wrap; margin-top: auto; padding-top: .65rem; }
.search-page .sptcard__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .75rem .75rem;
}
.search-page .sptprice { width: auto; margin: 0 !important; color: var(--ink) !important; white-space: nowrap; }
.search-page .sptcard__compare {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin: 0 0 0 auto;
  padding-inline: .75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--action);
  font: 700 var(--text-xs)/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
.search-page .sptcard__compare:hover,
.search-page .sptcard__compare[aria-pressed="true"] { border-color: var(--action); background: var(--lotus-soft); }
.search-page .sptcard__compare:active { transform: translateY(1px); }
.search-page .sptcard__compare:disabled { cursor: not-allowed; opacity: .45; }
.search-page .sp-empty { grid-column: 1 / -1; }
.search-page .load-more-container { margin-top: 1rem; }

.tutor-compare-dialog {
  position: fixed;
  inset: auto 1.5rem 1.5rem auto;
  z-index: 500;
  width: min(23rem, calc(100vw - 3rem));
  max-height: calc(100dvh - 3rem);
  margin: 0;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-overlay);
}
.tutor-compare-dialog:has(.tutor-mini + .tutor-mini) {
  width: min(42rem, calc(100vw - 3rem));
}
.tutor-compare-dialog[open] { animation: workbench-enter var(--duration-medium) var(--ease-enter) both; }
.tutor-compare-dialog .tutor-compare__head { margin-bottom: .75rem; }
.tutor-compare-dialog .tutor-compare__head h2 { margin: .2rem 0 0; font-size: var(--text-lg); }
.tutor-compare-dialog .tutor-compare__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tutor-compare-dialog .tutor-mini { background: var(--paper); }
.tutor-compare__clear {
  margin-top: .75rem;
  border: 0;
  background: transparent;
  color: var(--action);
  font: 700 var(--text-xs)/1 var(--font-ui);
  cursor: pointer;
}

@media (max-width: 89.99rem) {
  .search-page #search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 59.99rem) {
  .search-page .search-content { padding-inline: var(--content-gutter); }
  .search-page .search-intro { align-items: start; flex-direction: column; padding-top: 1.5rem; }
  .search-page .search-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search-page .search-location { grid-column: 1 / -1; grid-row: auto; }
  .search-page .search-filter,
  .search-page .search-focus-filter { grid-row: auto; }
  .search-page #search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutor-compare-dialog { inset: auto .75rem .75rem; width: auto; max-height: calc(100dvh - 1.5rem); }
}

@media (max-width: 39.99rem) {
  .search-page .search-intro > p { display: none; }
  .search-page .search-filterbar { grid-template-columns: 1fr; padding: .75rem; }
  .search-page .search-location { grid-column: auto; grid-template-columns: 1fr; }
  .search-location legend { grid-column: auto; }
  .search-page .spresults-head { align-items: start; flex-direction: column; }
  .search-page .spsort-label { margin-left: 0; }
  .search-page #search-results { grid-template-columns: 1fr; }
  .search-page .sptcard__link { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
  .search-page .sptavatar { width: 6.5rem !important; height: 6.5rem !important; min-height: 0; aspect-ratio: 1; align-self: start; }
  .search-page .sptcard__actions { margin-inline-start: 7.25rem; }
  .tutor-compare-dialog .tutor-compare__slots { grid-template-columns: 1fr; }
  .tutor-compare-dialog .tutor-mini { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); }
}

@media (pointer: coarse) {
  .search-page .sptcard__compare { min-height: var(--control-h); }
}

/* Hallmark · genre: playful · macrostructure: Workbench · design-system: design.md · designed-as-app
 * variation: three-pane desktop, single-flow mobile · slop/mobile checks: pass
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * Tutor and learner profile editors: focused form with desktop context and section rails.
 */
.ep-workbench {
  display: block;
  width: min(100%, 80rem);
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem max(1rem, var(--safe-right)) calc(5.75rem + var(--safe-bottom)) max(1rem, var(--safe-left));
}
.ep-workbench--learner { width: min(100%, 58rem); max-width: 58rem; }
.ep-workbench--tutor { width: min(100%, 90rem); max-width: 90rem; }

.ep-workbench > *,
.ep-workbench-content,
.ep-workbench-center { min-width: 0; }
.ep-workbench-content > .ep-card:first-child { margin-top: 0; }
.ep-workbench-content > :is(.ep-card, .collapse) { scroll-margin-top: 5rem; }
.ep-workbench-center > .schedule-card { margin: 0 0 1rem; }
.ep-workbench .ep-workbench-rail-inner > .ep-card { margin-top: 1rem; }

.ep-workbench-rail { margin-bottom: 1rem; }
.ep-workbench-rail-inner { min-width: 0; }
.ep-workbench-navrail { display: none; }
.ep-workbench-intro {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  color: var(--ink);
}
.ep-workbench-intro h2 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.ep-workbench-intro p {
  max-width: 65ch;
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ep-section-nav { display: none; }
.ep-section-nav a {
  min-height: 2.75rem;
  align-items: center;
  padding-inline: .75rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.ep-section-nav a:active { background: var(--surface-2); color: var(--action); }
.ep-section-nav a:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }

.ep-workbench .ep-card { padding: 1.25rem; }
.ep-workbench .ep-card > h2 {
  min-width: 0;
  margin-bottom: .5rem;
  font-size: var(--text-lg);
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.ep-workbench .ep-card > .hint,
.ep-workbench .evidence-editor-head .hint {
  max-width: 65ch;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.ep-workbench .ep-endsave { display: grid; gap: .75rem; }
.ep-workbench .ep-endsave :is(button, a) { min-height: var(--control-h); white-space: nowrap; }

/* Learner profile: one page, with the learner as the organizing object. */
.ep-appbar--learner h1,
.ep-workbench--learner :is(h1, h2) {
  font-family: var(--font-ui);
  font-optical-sizing: auto;
}
.ep-appbar--learner .ep-iconbtn { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; }
.ep-appbar--learner .lang-sw { display: flex; align-items: center; }
.ep-appbar--learner .lang-sw-lnk {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
}
.ep-appbar--learner .lang-sw-sep { display: none; }
.ep-learner-selector {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.ep-learner-selector-head { display: grid; gap: 1rem; }
.ep-learner-selector-head > div { min-width: 0; }
.ep-learner-selector h2,
.ep-learner-context h2 {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-xl);
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.ep-learner-selector p,
.ep-learner-context p {
  max-width: 65ch;
  margin: .625rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.ep-learner-selector-head .btn-ghost {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
  justify-self: start;
  text-decoration: none;
}
.ep-learner-choices {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  padding-bottom: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.ep-add-learner {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  color: var(--action);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}
.ep-add-learner:hover { text-decoration: underline; text-underline-offset: 3px; }
.ep-add-learner:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.ep-learner-choice {
  display: flex;
  min-width: 10.5rem;
  min-height: 4.25rem;
  flex: 0 0 auto;
  align-items: center;
  gap: .75rem;
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
}
.ep-learner-choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ep-learner-choice:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.ep-learner-choice.is-active { border-color: var(--action); background: var(--lotus-soft); }
.ep-learner-choice-avatar {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 700;
}
.ep-learner-choice.is-active .ep-learner-choice-avatar { background: var(--action); color: var(--action-ink); }
.ep-learner-choice > span:last-child { min-width: 0; }
.ep-learner-choice strong,
.ep-learner-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-learner-choice strong { font-size: var(--text-sm); font-weight: 700; }
.ep-learner-choice small { margin-top: .125rem; color: var(--muted); font-size: var(--text-xs); }
.ep-save-status {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 1.5rem;
  margin-top: .75rem !important;
  color: var(--muted) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600;
}
.ep-save-status::before { content: ''; width: .5rem; height: .5rem; flex: 0 0 .5rem; border-radius: var(--radius-node); background: var(--sage); }
.ep-save-status.is-dirty { color: var(--warning) !important; }
.ep-save-status.is-dirty::before { background: var(--warning); }
.ep-save-status.is-error { color: var(--danger) !important; }
.ep-save-status.is-error::before { background: var(--danger); }
.ep-learner-panel[hidden] { display: none; }
.ep-learner-context { margin-bottom: 1rem; }
.ep-household { margin-top: 1.5rem; }
.ep-household:has(#swInperson:checked) #areaWrap { max-height: 2000px; }
.ep-learner-identity { display: grid; gap: 1rem; }
.ep-learner-identity .avatar-row,
.ep-learner-identity .field { margin-bottom: 0; }
.ep-child-fields { display: grid; gap: 1rem; }
.ep-child-fields .field { margin-bottom: 0; }
.ep-learner-modes {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ep-learner-modes legend {
  margin-bottom: .25rem;
  padding: 0;
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 650;
}
.ep-picker-summary,
.ep-area-summary {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding: .75rem;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}
.ep-picker-summary > div { min-width: 0; }
.ep-picker-summary strong,
.ep-picker-summary span { display: block; }
.ep-picker-summary strong { color: var(--ink); font-size: var(--text-xs); }
.ep-picker-summary span,
.ep-area-summary {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ep-picker-summary span { margin-top: .125rem; }
.ep-subject-search { display: grid; gap: .5rem; margin-bottom: .75rem; color: var(--ink); font-size: var(--text-xs); font-weight: 650; }
.ep-subject-search input {
  width: 100%;
  min-height: var(--control-h);
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
}
.ep-subject-search input:focus { border-color: var(--action); outline: 2px solid var(--focus-outer); outline-offset: 1px; }
.ep-subject-browser { border-top: 1px solid var(--line); }
.ep-subject-browser > summary {
  display: flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
  color: var(--action);
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}
.ep-subject-browser[open] > summary i { transform: rotate(180deg); }
.ep-subject-browser .subject-groups { margin-top: .5rem; }
.ep-subject-no-match { margin: .75rem 0 0; color: var(--muted); font-size: var(--text-xs); }
.ep-text-action {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0 .5rem;
  border: 0;
  background: transparent;
  color: var(--action);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 650;
  cursor: pointer;
}
.ep-text-action:hover { text-decoration: underline; text-underline-offset: 3px; }
.ep-text-action:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.ep-subject-picker .chip,
.ep-area-chips .chip { min-height: var(--control-h); }
.ep-level-fieldset { min-width: 0; margin: 1.5rem 0 0; padding: 0; border: 0; }
.ep-level-fieldset legend { margin-bottom: .75rem; padding: 0; color: var(--ink); font-size: var(--text-xs); font-weight: 650; }
.ep-area-editor { padding-top: 1rem; }
.ep-address-list { margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.ep-address-list summary {
  min-height: var(--control-h);
  padding: .75rem 0;
  color: var(--action);
  font-size: var(--text-xs);
  font-weight: 650;
  cursor: pointer;
}
.ep-address-list .field { margin: 0 0 1rem; }
.ep-area-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ep-area-head label { margin: 0; }
.ep-area-filter {
  width: 100%;
  min-height: var(--control-h);
  margin: .5rem 0 .75rem;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.ep-area-filter:focus { border-color: var(--action); outline: 2px solid var(--focus-outer); outline-offset: 1px; }
.ep-area-summary { display: block; }
.ep-area-chips { margin-top: .75rem; }
.ep-area-no-match { margin: .75rem 0 0; color: var(--muted); font-size: var(--text-xs); }
.ep-form-error {
  margin: 1rem 0 0;
  padding: .75rem;
  border: 1px solid color-mix(in oklch, var(--danger) 35%, var(--line));
  border-radius: var(--radius-control);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.ep-learner-panel [aria-invalid="true"] { border-color: var(--danger); }
.ep-appbar-save:disabled { background: var(--surface-3); color: var(--muted); cursor: not-allowed; }
.ep-workbench--learner :is(input[type="text"], input[type="search"], select) { font-size: 1rem; }
.ep-savebar[hidden] { display: none; }

/* Learner profiles: keep the child roster and its editor in the same calm
   workbench language as the main learning-profile page. */
.learner-profiles,
.learner-profile-editor {
  width: min(100%, 58rem);
  max-width: 58rem;
  padding: clamp(1.5rem, 4vw, 3.5rem) max(1rem, var(--safe-right)) calc(5.75rem + var(--safe-bottom)) max(1rem, var(--safe-left));
}

.learner-profiles__intro,
.learner-profile-editor__intro {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.learner-profiles__intro > div,
.learner-profile-editor__intro { min-width: 0; }

.learner-profiles__intro h2,
.learner-profile-editor__intro h2 {
  max-width: 20ch;
  margin: 0;
  color: var(--ink);
  font: 720 clamp(2rem, 4vw, 3.25rem)/1.05 var(--font-ui);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.learner-profiles__intro p,
.learner-profile-editor__intro p {
  max-width: 62ch;
  margin: .75rem 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.learner-profile-editor__intro {
  display: block;
  align-items: initial;
  justify-content: initial;
}

.learner-profiles__add {
  display: inline-flex;
  min-height: var(--control-h);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-control);
  background: var(--action);
  color: var(--action-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
}
.learner-profiles__add:hover { background: var(--action-hover); }
.learner-profiles__add:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

.learner-profiles__empty {
  display: grid;
  min-height: 24rem;
  place-content: center;
  justify-items: center;
  padding: clamp(2rem, 6vw, 4.5rem);
  border-radius: var(--radius-card);
  background: var(--welcome-soft);
  text-align: center;
}
.learner-profiles__empty-icon {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  place-items: center;
  border-radius: var(--radius-tile);
  background: var(--lotus-soft);
  color: var(--action);
  font-size: 1.5rem;
}
.learner-profiles__empty h2 { margin: 0; color: var(--ink); font-size: var(--text-xl); letter-spacing: -.025em; }
.learner-profiles__empty p { max-width: 42ch; margin: .75rem 0 1.5rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.65; }

.learner-profile-list { margin: 0; padding: 0; list-style: none; }
.learner-profiles .kid {
  margin: 0;
  padding: 1.25rem .25rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
.learner-profiles .kid-av { width: 3.25rem; height: 3.25rem; flex-basis: 3.25rem; border-radius: var(--radius-tile); font-weight: 720; }
.learner-profiles .kid-name { font-size: var(--text-base); font-weight: 720; }
.learner-profiles .kid-meta { font-size: var(--text-xs); line-height: 1.5; }
.learner-profiles .kid-subs { gap: .4rem; }
.learner-profiles .kid-sub { padding: .3rem .6rem; border-radius: var(--radius-control); font-size: var(--text-xs); }
.learner-profiles .kid-actions { flex-direction: row; gap: .25rem; }
.learner-profiles .kid-actions form { margin: 0; }
.learner-profiles :is(.kid-edit, .kid-del) {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  border-radius: var(--radius-control);
  font: 650 var(--text-xs)/1 var(--font-ui);
}
.learner-profiles .kid-edit:hover { background: var(--lotus-soft); }
.learner-profiles .kid-del:hover { background: var(--danger-soft); }
.learner-profiles :is(.kid-edit, .kid-del):focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

.ep-appbar--student .ep-appbar-save {
  display: inline-flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: center;
}
.learner-profile-editor { max-width: 58rem; }
.learner-profile-editor .ep-card { margin-top: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); }
.ep-appbar--learner-profiles h1,
.ep-appbar--student h1,
.learner-profiles__empty h2,
.learner-profile-editor .ep-card > h2,
.learner-profile-level legend { font-family: var(--font-ui); }
.ep-appbar--learner-profiles h1,
.ep-appbar--student h1 { font-weight: 750; letter-spacing: -.02em; }
.learner-profile-editor .ep-card > h2 { margin-bottom: .5rem; font-size: var(--text-lg) !important; }
.learner-profile-editor .ep-card > .hint { max-width: 65ch; margin-bottom: 1.5rem; font-size: var(--text-sm); line-height: 1.55; }
.learner-profile-editor .subject-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
.learner-profile-editor .subject-group {
  min-width: 0;
  margin: 0;
  padding: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.learner-profile-editor .subject-group > summary {
  display: flex;
  min-height: var(--control-h);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.learner-profile-editor .subject-group > summary:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.learner-profile-editor .subject-group[open] > summary i { transform: rotate(180deg); }
.learner-profile-subject-meta { flex: 0 0 auto; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.learner-profile-editor .subject-group > .chips { padding-top: .75rem; }
.learner-profile-editor .subject-group .chip { min-height: var(--control-h); }
.learner-profile-level { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.learner-profile-level .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.learner-profile-editor .ep-endsave { margin-top: 1rem; }
.learner-profile-editor .ep-endsave button { min-height: var(--control-h); margin-top: 0; border-radius: var(--radius-control); }

@media (max-width: 39.99rem) {
  .ep-appbar--student { gap: .5rem; padding-inline: .75rem; }
  .ep-appbar--student h1 { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ep-appbar--student .ep-appbar-lang { margin-left: 0; }
  .ep-appbar--student .ep-appbar-save { padding-inline: .75rem; }
  .learner-profiles__intro { align-items: stretch; flex-direction: column; }
  .learner-profiles__intro .learner-profiles__add { width: 100%; }
  .learner-profiles__empty { min-height: 20rem; padding-inline: 1.5rem; }
  .learner-profiles .kid { flex-wrap: wrap; gap: .75rem; }
  .learner-profiles .kid-actions { width: 100%; justify-content: flex-end; padding-left: 4rem; }
  .learner-profile-editor .subject-groups,
  .learner-profile-level .levels { grid-template-columns: 1fr; }
}

/* A tutor video should introduce the person, not visually outweigh their profile. */
.tp-video {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .ep-section-nav a:hover { color: var(--action); }
}

@media (min-width: 40rem) {
  .ep-workbench {
    padding-top: 1.5rem;
    padding-right: max(1.5rem, var(--safe-right));
    padding-bottom: 3.5rem;
    padding-left: max(1.5rem, var(--safe-left));
  }
  .ep-workbench .ep-card { padding: 1.75rem; }
  .ep-learner-identity { grid-template-columns: minmax(15rem, auto) minmax(0, 1fr); align-items: end; }
  .ep-child-fields { grid-template-columns: minmax(0, 1fr) minmax(10rem, .6fr); }
  .ep-learner-selector-head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .ep-learner-selector-head .btn-ghost { justify-self: end; }
  .ep-workbench .evidence-editor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ep-workbench .ep-endsave { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ep-workbench--learner .ep-endsave { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 60rem) {
  .ep-appbar {
    min-height: 4.25rem;
    height: auto;
    padding-inline: max(var(--content-gutter), calc((100% - 80rem) / 2));
  }
  .ep-appbar h1 { font-size: var(--text-lg); font-weight: 750; letter-spacing: -.02em; }
  .ep-workbench {
    display: grid;
    grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    padding-top: 2rem;
  }
  .ep-workbench--learner { display: block; }
  .ep-workbench-rail { margin-bottom: 0; }
  .ep-workbench-rail-inner { position: sticky; top: 5.25rem; }
  .ep-workbench--learner .ep-workbench-content { max-width: none; }
  .ep-workbench--tutor .ep-workbench-center { max-width: 54rem; }
  .ep-section-nav { display: grid; margin-top: 1rem; border-top: 1px solid var(--line); }
  .ep-section-nav a { display: flex; }
  .ep-workbench .ep-card { margin-top: 0; }
  .ep-workbench .ep-card + .ep-card,
  .ep-workbench .ep-card + .collapse,
  .ep-workbench .collapse + .ep-card { margin-top: 1rem; }
  .ep-workbench .collapse .ep-card { margin-top: 0; }
  .ep-workbench .ep-preview { align-items: flex-start; padding: 1.25rem; }
  .ep-workbench .pv-av { width: 4rem; height: 4rem; flex-basis: 4rem; }
  .ep-workbench .ep-endsave { margin-top: 1.5rem; }
  .schedule-editor--embedded { max-height: min(68dvh, 46rem); overflow-y: auto; overscroll-behavior: contain; }
}

@media (min-width: 75rem) {
  .ep-workbench--tutor { grid-template-columns: minmax(17rem, 19rem) minmax(0, 1fr) minmax(11rem, 12rem); gap: 1.5rem; }
  .ep-workbench--tutor .ep-workbench-navrail { display: block; position: sticky; top: 5.25rem; }
  .ep-workbench--tutor .ep-section-nav { margin-top: 0; }
}

@media (min-width: 90rem) {
  .ep-workbench--tutor { grid-template-columns: minmax(19rem, 21rem) minmax(0, 1fr) minmax(12rem, 13rem); gap: 2.5rem; }
}

/* ── PWA app-shell (served from the PWA host; body.site-pwa) ─────────────────────
   The responsive layout already renders an app shell on phone widths, where the PWA
   actually runs. On the PWA host we additionally: keep the bottom tab bar + its
   padding at every width, drop the desktop sidebar so navigation is tab-driven, and
   on large screens centre the app in a phone-width column so it reads as an app
   rather than a stretched desktop page. The desktop web host (body.site-web) is
   untouched. */
body.site-pwa .desktop-sidebar { display: none !important; }
body.site-pwa.has-app-tabs .mtab { display: flex !important; }
body.site-pwa.has-app-tabs { padding-bottom: calc(4.5rem + var(--safe-bottom)) !important; }

/* ── Bottom tabs on the canonical web host ──────────────────────────────────
   uspark.space is the canonical, mobile-heavy experience, and Uspark is a website
   rather than an install-first PWA — so a signed-in phone user gets the same
   bottom navigation here as in the app. Several page-level blobs earlier in
   this file hide .mtab at ≤860px unscoped, which left a tutor on a phone with
   no route to their inbox at all; this restores it below the desktop frame's
   breakpoint only, so the sidebar still owns wide screens.

   Two surfaces genuinely own the bottom edge and are excluded: the full-screen
   conversation view, and the tutor profile's sticky booking bar (two stacked
   bottom bars is worse than one). */
@media (max-width: 860px) {
  body.site-web.has-app-tabs:not(:has(.cv-wrap, .tp-cta-bar)) .mtab { display: flex !important; }
  body.site-web.has-app-tabs:not(:has(.cv-wrap, .tp-cta-bar)) { padding-bottom: calc(4.5rem + var(--safe-bottom)) !important; }
}

@media (min-width: 861px) {
  /* Bottom tabs own navigation in the app; hide the wide desktop top bar and rail. */
  body.site-pwa.has-app-tabs .app-header,
  body.site-pwa.has-app-tabs .desktop-sidebar { display: none !important; }
  /* Phone-width app column, centred, so wide viewports still feel like the app. */
  body.site-pwa.has-app-tabs > *:not(.mtab):not(.ux-toast):not(#ux-bar):not(.fb-fab) {
    max-width: 32rem;
    margin-inline: auto;
  }
}

/* Truly-installed app (launched from the home screen): pad for the status bar and
   home indicator, and drop the floating feedback button (redundant in-app chrome). */
@media all and (display-mode: standalone) {
  body.site-pwa { padding-top: var(--safe-top); }
  body.site-pwa .fb-fab { display: none !important; }
}

/* ── Tutor face ──────────────────────────────────────────────────────────────
   One portrait treatment for the whole parent path: search card → profile →
   request form → waiting for an answer.

   A parent commits to a person, and this is what keeps that person continuous.
   Sizes change between variants; the crop never does. 4:5 and top-anchored,
   because centre-cropping a headshot cuts the top of the head — which is what
   the old square search crop and 16:9 card crop were both doing.

   Declared last in this file on purpose: the avatar rules it supersedes
   (.sptavatar, .tphead-avatar, .tn-avatar) carry !important from earlier
   passes, and .uface is only ever applied to markup that no longer uses them. */
.uface {
  position: relative;
  display: block;
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-card);
  /* The per-user colour is a tint, not a field. At portrait size a saturated
     block turns a grid of new tutors into a wall of colour and blows past the
     "lotus under ~5% of a viewport" rule — and it competes with the real
     photographs it sits beside. Keep it quiet so faces lead. */
  background: color-mix(in oklch, var(--avatar-bg, var(--surface-2)) 14%, var(--surface-2));
  /* Hairline ring, not a shadow: separates a pale photo from a pale surface
     without implying elevation the card doesn't have. */
  box-shadow: inset 0 0 0 1px var(--line);
}

.uface__img {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.uface__initials {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Grid-driven: the containing column sets the width, the ratio sets the height.
   align-self keeps a flex/grid parent's default stretch from overriding the
   aspect ratio and squashing the portrait to the row height. */
.uface--card { width: 100%; align-self: start; }
.uface--card .uface__initials { font-size: 2.25rem; }

.uface--hero { width: 7.5rem; align-self: flex-start; }
.uface--hero .uface__initials { font-size: 2rem; }

.uface--mini { width: 100%; align-self: start; border-radius: var(--radius-tile); }
.uface--mini .uface__initials { font-size: 1.5rem; }

/* Beside a name in a form header or a status card. */
.uface--inline { width: 3.25rem; border-radius: var(--radius-tile); }
.uface--inline .uface__initials { font-size: 1.125rem; }

@media (max-width: 40rem) {
  .uface--hero { width: 5.5rem; }
  .uface--hero .uface__initials { font-size: 1.5rem; }
}

/* ── Trial promise ───────────────────────────────────────────────────────────
   The one sentence a parent needs at every decision point, in the same words
   each time. Replaces the money-back guarantee that the product could not
   honour. Sage marks trust and confirmation in the Turtle carrying a Spark mark, so the marker
   is a sage node rather than a generic icon. */
.upromise {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0;
  color: var(--ink-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-wrap: pretty;
}

.upromise strong {
  color: var(--ink);
  font-weight: 600;
}

.upromise__node {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  /* Optically centres the node on the first line's x-height rather than its box. */
  margin-top: 0.42em;
  border-radius: var(--radius-node);
  background: var(--sage);
}

.upromise--panel {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

/* Call-site adjustments for the shared face. Each is a container concern — the
   partial itself stays identical wherever it lands. */

/* Profile header: a person, at the size the page's first impression deserves. */
.tphead { align-items: flex-start; }

/* Request form: face beside the sentence naming the person. (.tl-head on the
   lesson page already declares its own flex row.) */
.tn-tutor { display: flex; align-items: center; gap: 0.875rem; }
.tn-tutor-name { line-height: 1.35; text-wrap: balance; }
.tn-card .upromise--panel { margin-top: 1.25rem; }
/* The status card centres its heading and body; a left-aligned promise inside
   it read as ragged rather than as a deliberate block. */
.ts-card .upromise--panel { justify-content: center; text-align: center; }

/* Waiting for an answer: a way out that isn't cancelling. Quiet, so it never
   competes with the tutor's pending reply — but underlined, because a muted
   sentence with no underline reads as a caption, not something you can click. */
.ts-wait-browse {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--ink-2);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.ts-wait-browse:hover { color: var(--action); text-decoration-color: currentColor; }

/* Request form: the "this is for you" note reads as guidance, not fine print. */
.tn-note--start { margin: 0; text-align: left; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.55; }
.tn-note--start i { margin-right: .35rem; color: var(--muted); }
/* inline-flex + min-height: this was an 18px-tall tap target on a phone. */
.tn-note--start a { display: inline-flex; align-items: center; min-height: 44px; color: var(--action); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }

/* Home: one search on the first screen.

   The sticky header carries its own search, so the parent's first fold offered
   two search boxes with disagreeing labels ("What would you like to learn?" vs
   "What does your child want to learn?") — two dominant actions where DESIGN
   asks for one. On supporting browsers, the nav search yields the hero fold and
   takes over once the hero has scrolled away.

   Scroll-driven, so no JavaScript. The safe fallback keeps the nav search;
   supporting browsers hide it only while the hero search is on screen. Below
   60rem the nav search is already collapsed to an icon. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
    /* The hidden state lives in the keyframes, never in this rule. A scroll()
       timeline whose container has no scrollable overflow is inactive, and an
       animation on an inactive timeline has no effect at all — a hidden base
       would then stick, leaving a short page with no header search and no way
       to tab to it. */
    .parent-home .site-header__search {
      animation: home-nav-search-handoff linear both;
      animation-timeline: scroll();
      animation-range: 0 20rem;
    }

    @keyframes home-nav-search-handoff {
      0%, 55% { opacity: 0; visibility: hidden; }
      100% { opacity: 1; visibility: visible; }
    }
  }
}

/* ── Tutor workbench: the answer queue ──────────────────────────────────────
   The request card answers in place. It used to be one <a> to the detail page,
   so the surface headed "Respond to learners" could not respond — accepting
   cost two full page loads, and trial-response latency is the metric the whole
   product turns on. The name keeps the link, stretched over the card; the
   buttons sit above it on their own z-layer. */

.tc--request { position: relative; align-items: flex-start; }
.tc-link { color: inherit; text-decoration: none; }
.tc-link::after { position: absolute; z-index: 0; inset: 0; border-radius: var(--radius-card); content: ""; }
.tc--request:hover .tc-link { text-decoration: underline; text-underline-offset: 3px; }
.tc--request:has(.tc-link:focus-visible) { outline: 2px solid var(--focus-outer); outline-offset: 2px; }

/* Both kinds share one queue now, so the kind rides on the row. Two cards meant
   two near-homograph Vietnamese headings — "Yêu cầu học thử" against "Yêu cầu
   buổi học" — that a reader had to stop and disambiguate.

   The base class is the regular-lesson look, so .tc-kind--regular needs no rule
   of its own; only the trial is tinted, because that is the one whose free,
   one-per-pair terms change what accepting means. */
.tc-kind { display: inline-block; margin-right: 0.375rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.6875rem; font-weight: 700; }
.tc-kind--trial { background: var(--lotus-soft); color: var(--lotus-ink); }

.tc-actions { position: relative; z-index: 1; display: flex; flex-shrink: 0; flex-wrap: wrap; gap: 0.5rem; }
.tc-act { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; gap: 0.375rem; padding: 0 0.875rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-family: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.tc-act--yes { border-color: transparent; background: var(--action); color: var(--action-ink); }
.tc-act--yes:hover { background: var(--action-hover); }
.tc-act--no:hover { border-color: var(--line-strong); color: var(--ink); }
.tc-act:disabled { opacity: 0.6; cursor: default; }

/* On a phone the avatar, the name, the family's note and two 44px buttons do not
   fit on one line — and this card is read on a phone more often than not. Below
   this width the actions drop to their own full-width row, which also puts them
   nearer the thumb than a right-aligned pair would be. */
@media (max-width: 34rem) {
  .tc--request { flex-wrap: wrap; }
  .tc--request .tc-body { flex-basis: 60%; }
  .tc-actions { width: 100%; margin-top: 0.125rem; }
  .tc-act { flex: 1; }
}

/* "Needs your answer", at arm's length. This was a border tint and nothing
   else — the one time-critical card on a page of nine looked like the other
   eight. Amber is DESIGN.md's signal for the next thing to act on, and this is
   the page's one legitimate claim on it. */
.tc--pending { position: relative; border-color: var(--spark); }
.tc--pending::before { position: absolute; top: -1px; bottom: -1px; left: -1px; width: 3px; border-radius: var(--radius-card) 0 0 var(--radius-card); background: var(--spark); content: ""; }

/* The queue is the reason the page exists, and it looked like the eight cards
   around it. This is the whole "needs attention first" claim in the greeting,
   made structural: a heavier rule and a little more room to breathe, so the one
   time-critical card is distinguishable before you have read anything. */
.dbcard--queue { border-color: var(--line-strong) !important; }
.dbcard--queue .dbcard-head :is(h2, h3) { font-size: 1.0625rem; font-weight: 650; }

.dbcard-note { margin: 0.75rem 1rem 0; padding-top: 0.75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.75rem; line-height: 1.5; }

/* ── What left the schedule on its own ──────────────────────────────────────
   A cancelled lesson used to reach the tutor as an absence: the upcoming widget
   filters to accepted/in_progress, so the row for the evening they had reserved
   simply stopped being rendered. */
.dbchanges { padding: 0.875rem 0 0; }
.dbchanges-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.625rem; color: var(--ink-2); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; }
.dbchanges-head i { color: var(--muted); }
.tc--changed { background: var(--surface-2); }
.tc-changed-why { margin-top: 0.25rem; color: var(--muted); font-size: 0.75rem; }

/* ── People you teach ───────────────────────────────────────────────────────
   The third movement of the tutor workbench. The relationships were counted in
   a stat tile and rendered nowhere, so reaching a learner from three months ago
   meant recognising a name in the message list. */
.dbroster { display: flex; flex-direction: column; margin: 0; padding: 0; gap: 0.125rem; list-style: none; }
.dbroster-row { min-width: 0; }
.dbroster-link { display: flex; min-height: var(--control-h); align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; color: inherit; text-decoration: none; }
.dbroster-link:hover { background: var(--surface-2); }
.dbroster-av { display: flex; width: 2.25rem; height: 2.25rem; flex-shrink: 0; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--radius-tile); color: var(--avatar-ink); font-size: 0.8125rem; font-weight: 600; }
.dbroster-body { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.dbroster-name { color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.dbroster-meta { color: var(--muted); font-size: 0.75rem; }
.dbroster-when { flex-shrink: 0; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

/* ── A panel that failed to load ────────────────────────────────────────────
   Written by ux.js when a self-loading panel's request fails. Before this the
   placeholder sat on "Đang tải…" for good, and on a dropped connection it did
   so without a word. */
.db-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; }
.db-failed p { margin: 0; }
.db-retry { display: inline-flex; min-height: var(--control-h); align-items: center; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.db-retry:hover { border-color: var(--line-strong); }

/* ── The ask, folded away ───────────────────────────────────────────────────
   Eight live controls used to sit open on the tutor's daily workspace forever,
   asking her to write marketing copy for Uspark while she was trying to work. */
.db-ask { margin-top: 0.25rem; }
.db-ask-summary { display: flex; min-height: var(--control-h); align-items: center; gap: 0.5rem; color: var(--action); font-size: 0.8125rem; font-weight: 650; cursor: pointer; }
.db-ask-summary::marker { color: var(--muted); }
.db-ask[open] .db-ask-summary { margin-bottom: 0.5rem; }

/* The label the textarea never had. A placeholder is not an accessible name,
   and it disappears the moment the first character is typed. */
.u-field-label { display: block; color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; }

/* Credential evidence: tutors attach private images to a specific claim; admins
   review the same compact unit. Rules and spacing carry hierarchy, not nested cards. */
.evidence-editor-item img { object-fit: contain; }
.evidence-editor-item button { width: var(--control-h); height: var(--control-h); }
.cred-row { display: block; margin: 0; padding: 1rem 0; border-top: 1px solid var(--line); }
.cred-row:first-child { border-top: 0; padding-top: 0; }
.cred-fields { display: grid; grid-template-columns: minmax(9rem, .8fr) minmax(12rem, 1.5fr) minmax(8rem, .7fr) var(--control-h); gap: .75rem; align-items: end; }
.cred-fields label { display: grid; min-width: 0; gap: .375rem; }
.cred-fields label > span,
.cred-evidence-picker legend { color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; }
.cred-fields label small { color: var(--muted); font-weight: 450; }
.cred-fields :is(input, select) { min-height: var(--control-h); }
.cred-fields .cred-x { width: var(--control-h); height: var(--control-h); }
.cred-state { display: flex; align-items: center; gap: .375rem; margin: .75rem 0 0; color: var(--muted); font-size: var(--text-xs); }
.cred-state--ok { color: var(--sage-deep); }
.cred-state--rejected { color: var(--danger); }
.cred-evidence-picker { min-width: 0; margin: .875rem 0 0; padding: 0; border: 0; }
.cred-evidence-picker legend { margin-bottom: .5rem; padding: 0; }
.cred-evidence-picker > p { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.cred-evidence-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cred-evidence-options label { position: relative; display: grid; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); cursor: pointer; }
.cred-evidence-options label:has(input:checked) { border-color: var(--action); outline: 2px solid color-mix(in oklch, var(--action) 22%, transparent); }
.cred-evidence-options input { position: absolute; top: .5rem; left: .5rem; z-index: 1; width: 1.25rem; height: 1.25rem; accent-color: var(--action); }
/* height:auto is load-bearing. The markup carries width/height attributes (the
   server's, and the JS sets them on dynamically added tiles), which map to
   presentational hints. Overriding only width leaves the height hint standing,
   and aspect-ratio is ignored the moment both dimensions are specified — so the
   tile grew to the scan's full intrinsic height and object-fit letterboxed a
   thin band of image into it. The sibling grids escape this by setting
   height:100% inside a parent that owns the ratio; this label has no ratio of
   its own, so the image defines the box. */
.cred-evidence-options img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); }
.cred-evidence-options span { padding: .5rem; color: var(--ink-2); font-size: var(--text-xs); font-weight: 600; text-align: center; }
.cred-evidence-options label:focus-within { outline: 3px solid var(--focus-outer); outline-offset: 2px; }
.tpcred-ok { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .3rem; color: var(--sage-deep); font-size: var(--text-xs); font-weight: 650; }

.credential-admin .adbody { gap: 1.5rem; }
.credential-tabs { display: flex; width: 100%; gap: .25rem; overflow-x: auto; }
.credential-tabs a { display: inline-flex; min-height: var(--control-h); flex: 0 0 auto; align-items: center; gap: .5rem; padding: 0 .875rem; text-decoration: none; }
.credential-tabs strong { display: inline-grid; min-width: 1.5rem; min-height: 1.5rem; place-items: center; padding: 0 .375rem; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.credential-tabs .on strong { background: var(--action); color: var(--action-ink); }
.credential-queue { display: grid; gap: 0; }
.credential-queue > h2 { margin: .5rem 0 .75rem; color: var(--ink); font-size: var(--text-lg); letter-spacing: -.02em; }
.credential-tutor { padding: 1rem 0; border-top: 1px solid var(--line-strong); }
.credential-tutor__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.credential-tutor__head h2 { min-width: 0; margin: 0; color: var(--ink); font-size: var(--text-base); overflow-wrap: anywhere; }
.credential-tutor__head a { flex: 0 0 auto; color: var(--action); font-size: var(--text-xs); font-weight: 650; text-decoration: none; }
.credential-review { padding: 1rem 0 1rem 1rem; border-bottom: 1px solid var(--line); }
.credential-review:last-child { border-bottom: 0; }
.credential-review__head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.credential-review__head > div { min-width: 0; }
.credential-review__kind { display: block; margin-bottom: .2rem; color: var(--muted); font-size: var(--text-xs); }
.credential-review__head h3 { margin: 0; color: var(--ink); font-size: var(--text-base); line-height: 1.35; overflow-wrap: anywhere; }
.credential-review .status-chip { flex: 0 0 auto; max-width: 12rem; white-space: normal; text-align: center; }
.credential-evidence { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; margin-top: .875rem; }
.credential-evidence__item { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); }
.credential-evidence__item > a { display: block; aspect-ratio: 4 / 3; }
.credential-evidence img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface); }
.credential-evidence__item figcaption { position: absolute; inset: 0; padding: .75rem; background: var(--danger-soft); color: var(--danger); font-size: var(--text-xs); line-height: 1.4; }
.credential-evidence__item figcaption strong,
.credential-evidence__item figcaption > span { display: block; }
.credential-evidence__recovery { display: flex !important; align-items: center; gap: .75rem; margin-top: .625rem; }
.credential-evidence__recovery :is(button, a) { display: inline-flex; min-height: var(--control-h); align-items: center; border: 0; background: transparent; color: var(--action); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.credential-review__load,
.credential-review__missing { margin: .625rem 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.credential-review__load.is-error,
.credential-review__missing { color: var(--danger); }
.credential-review__decision { margin-top: .75rem; padding: .75rem; border-radius: var(--radius-control); background: var(--surface-2); }
.credential-review__decision p { margin: 0; color: var(--ink-2); font-size: var(--text-xs); line-height: 1.5; }
.credential-review__decision p + p { margin-top: .25rem; }
.credential-review__decision .credential-review__meta { color: var(--muted); }
.credential-review__actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .625rem; margin-top: .875rem; }
.credential-review__actions .btn-sm,
.credential-reject > summary { display: inline-flex; min-height: var(--control-h); align-items: center; justify-content: center; padding: 0 1rem; border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: 650; cursor: pointer; }
.credential-review__actions button:disabled { opacity: .5; cursor: not-allowed; }
.credential-reject { min-width: min(100%, 24rem); }
.credential-reject > summary { width: fit-content; border: 1px solid var(--line); color: var(--danger); list-style: none; }
.credential-reject > summary::-webkit-details-marker { display: none; }
.credential-reject[open] > summary { margin-bottom: .75rem; border-color: var(--danger); }
.credential-reject form { display: grid; gap: .75rem; padding: .875rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-2); }
.credential-reject label { display: grid; gap: .375rem; color: var(--ink-2); font-size: var(--text-xs); font-weight: 650; }
.credential-reject label small { color: var(--muted); font-weight: 450; }
.credential-reject :is(select, textarea) { width: 100%; min-height: var(--control-h); padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; }
.credential-reject textarea { resize: vertical; }
.credential-reject .btn-reject { justify-self: start; }
.credential-unlinked { padding: .75rem 0 .25rem 1rem; }
.credential-unlinked h3 { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.credential-unlinked p { max-width: 65ch; margin: .375rem 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.credential-evidence--unlinked { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 36rem; opacity: .8; }
.credential-evidence--unlinked a { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); }
.credential-empty { padding: 2.5rem 1rem; text-align: center; }
.credential-empty > i { display: block; margin-bottom: .5rem; color: var(--sage-deep); font-size: 1.75rem; }
.credential-empty h2 { margin: 0; color: var(--ink); font-size: var(--text-lg); }
.credential-empty p { margin: .375rem 0 0; color: var(--muted); font-size: var(--text-sm); }

@media (max-width: 48rem) {
  .cred-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--control-h); }
  .cred-fields label:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .cred-fields label:nth-child(1) { grid-column: 1; }
  .cred-fields label:nth-child(3) { grid-column: 2; }
  .cred-fields .cred-x { grid-column: 3; }
  .cred-evidence-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-evidence { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  .credential-review { padding-left: 0; }
  .credential-review__head,
  .credential-tutor__head { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .credential-review .status-chip { align-self: flex-start; }
  .credential-evidence { grid-template-columns: 1fr; }
  .credential-evidence--unlinked { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credential-review__actions > :is(button, details),
  .credential-reject,
  .credential-reject > summary { width: 100%; }
}

/* Two of the four stat tiles now stand for something you can open, so they are
   links. The number was the tutor's most useful signal and led nowhere: the
   page printed "Học viên đã dạy: 12" with no route to those twelve people. */
a.dbstat { display: block; color: inherit; text-decoration: none; }
a.dbstat:hover { border-color: var(--line-strong) !important; background: var(--surface-2) !important; }
a.dbstat:hover .dbstat-label { color: var(--ink-2) !important; }

/* Tutor profile: let the person lead, then make the booking decision explicit. */
.tphead {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-color: transparent;
  background: var(--welcome-soft);
}
.tphead-name {
  margin: 0;
  font: 500 clamp(2rem, 4vw, 3.5rem)/1 var(--font-editorial);
  letter-spacing: -.035em;
}
.tpcard > h2,
.tp-avail-head :is(h2, h3) {
  margin: 0 0 .75rem;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.25;
}
.tpbook-title { margin: 0; color: var(--ink); font-size: var(--text-lg); line-height: 1.2; letter-spacing: -.02em; }
.tpbook-copy { margin: .5rem 0 1.25rem; color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }

/* Tutor editor: secondary payout fields stay available without dominating the
   profile work, and the primary save remains reachable above mobile app tabs. */
.ep-payment-details { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ep-payment-details > summary {
  display: flex;
  min-height: var(--control-h);
  align-items: center;
  color: var(--action);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}
.ep-payment-details > summary:focus-visible { outline: 2px solid var(--focus-outer); outline-offset: 2px; }
.ep-payment-details[open] > summary { margin-bottom: .25rem; }

@media (max-width: 39.99rem) {
  .tphead-name { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  body.has-app-tabs .ep-savebar { bottom: calc(4.75rem + var(--safe-bottom)); }
  .ep-workbench--tutor { padding-bottom: calc(10rem + var(--safe-bottom)); }
}