/* LVS v0.63 — existing identity, shared finishing layer. Canonical owner: DESIGN.md. */
:root {
  --ui-focus:#6550ad; --ui-error:#a12d47; --ui-track:transparent; --ui-thumb:#b2a6cb; --ui-thumb-hover:#817096;
  --ui-motion:180ms; --ui-ease:cubic-bezier(.2,.7,.3,1);
  --ui-cta:linear-gradient(135deg,#6550ad 0%,#955e96 48%,#a45f40 100%);
}
body.dark-mode { --color-text-sub:#b7adc8; --ui-focus:#c4b8e8; --ui-error:#ffb8c8; --ui-thumb:#655672; --ui-thumb-hover:#a094b8; color-scheme:dark; }
body.light-mode { color-scheme:light; }
html { scrollbar-gutter:stable; scroll-padding-top:100px; }
*,*::before,*::after { scrollbar-width:thin; scrollbar-color:var(--ui-thumb) var(--ui-track); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--ui-track); }
::-webkit-scrollbar-thumb { background:var(--ui-thumb); border:2px solid transparent; background-clip:padding-box; border-radius:12px; }
::-webkit-scrollbar-thumb:hover { background-color:var(--ui-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color:var(--ui-focus); }
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid var(--ui-focus); outline-offset:4px; }
:where(button,[role=button],summary) { cursor:pointer; touch-action:manipulation; }
:where(button,input,select,textarea) { font-family:inherit; }
:where(button:disabled,[aria-disabled=true]) { cursor:not-allowed; }
:where(input,select,textarea) { accent-color:var(--color-lilac,var(--accent)); }
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) { min-height:46px; line-height:1.6; transition:border-color var(--ui-motion),box-shadow var(--ui-motion); }
:where(input,select,textarea):focus-visible { outline-offset:2px; }
textarea { resize:none; min-height:128px; overflow-y:auto; }
input::placeholder,textarea::placeholder { opacity:1; }
:where(h1,h2,h3) { overflow-wrap:anywhere; }
:where(p,li,label) { line-break:strict; }
:where(p,li) { overflow-wrap:break-word; }
:where(main,section,article,.container,.form-group,.booking-card,.member-card) { min-width:0; }
:where(.btn-primary,.btn-outline,.btn-nav,.btn-option) { min-height:44px; line-height:1.6; transition:transform var(--ui-motion) var(--ui-ease),box-shadow var(--ui-motion),filter var(--ui-motion),border-color var(--ui-motion); }
/* Preserve purple → muted coral. White text needs a slightly deeper gradient. */
body :is(.btn-primary,.btn-nav),body.dark-mode :is(#courses,#partner-logigoe) .btn-primary { background:var(--ui-cta); color:#fff; }
:where(.btn-primary,.btn-outline,.btn-nav):active { transform:translateY(1px); }
:where(.btn-primary,.btn-nav):disabled { filter:saturate(.45); opacity:.58; transform:none; box-shadow:none; }
@media(hover:hover) { :where(.btn-primary,.btn-nav):hover { filter:brightness(1.06); } }
.theme-toggle-btn,.hamburger { min-width:44px; min-height:44px; flex-shrink:0; }
.header-inner { gap:12px; }
#main-nav a { display:inline-flex; align-items:center; min-height:44px; }
.mobile-menu { max-height:calc(100dvh - 76px); overflow-y:auto; overscroll-behavior:contain; }
.mobile-menu a { min-height:48px; display:flex; align-items:center; }
.mobile-menu.open { animation:ui-reveal var(--ui-motion) var(--ui-ease); }
.ui-skip-link { position:fixed; left:16px; top:12px; z-index:20000; transform:translateY(-180%); background:var(--color-surface,#211e2e); color:var(--color-text,#fff); padding:12px 18px; border:2px solid var(--ui-focus); border-radius:8px; }
.ui-skip-link:focus { transform:none; }
.ui-field-error { color:var(--ui-error); margin:8px 0 0; font-size:13px; line-height:1.7; }
[aria-invalid=true] { border-color:var(--ui-error)!important; }
.ui-password-wrap { position:relative; display:block; }
.ui-password-wrap input { padding-right:62px!important; }
.ui-password-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); min-width:48px; min-height:40px; padding:4px; border:0; border-radius:8px; background:transparent; color:var(--color-lilac-lt,var(--accent-lt)); font-size:12px; }
/* Page headings retain existing composition and hierarchy. */
.page-hero-title,.booking-hero h1 { line-height:1.5; letter-spacing:.015em; }
.page-hero-desc,.booking-hero>.container>p:not(.section-label) { max-width:760px; margin-left:auto; margin-right:auto; line-height:1.95; }
.section-desc,.about-text p,.contact-desc { line-height:1.95; }
:where(.column-card,.blog-card,.review-card,.cta-choice-card) { transition:transform var(--ui-motion),border-color var(--ui-motion),box-shadow var(--ui-motion); }
:where(.column-card,.blog-card):focus-within { border-color:var(--color-lilac); box-shadow:var(--shadow-sm); }
:where(.filter-btn,.blog-filter-btn,.faq-nav-btn,.pagination button,.pagination a) { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding-top:10px; padding-bottom:10px; }
:where(.column-card-title,.blog-card-title) { line-height:1.65; }
.article-content { line-height:2; }
.article-content p { margin-block:1.2em; }
.article-content h2,.article-content h3 { scroll-margin-top:100px; }
.article-content :is(pre,table) { max-width:100%; }
.article-content pre { overflow:auto; }
.faq-question { width:100%; text-align:left; border:0; background:transparent; font-family:inherit; font-size:inherit; min-height:62px; }
.faq-question:focus-visible { outline-offset:-4px; }
.faq-answer { line-height:1.95; }
.faq-item.open .faq-answer { animation:ui-reveal var(--ui-motion) var(--ui-ease); }
.faq-preview-q { min-height:56px; }
.faq-preview-item[open] .faq-preview-a { animation:ui-reveal var(--ui-motion) var(--ui-ease); }
.columns-loading,.columns-empty { min-height:140px; display:grid; place-content:center; gap:10px; text-align:center; }
.footer-nav-col a,.footer-bottom a,.legal-footer a { display:inline-flex; align-items:center; min-height:40px; }
/* Booking — preserve time selection and submission contracts. */
.booking-card { border-radius:18px; box-shadow:0 5px 22px rgba(70,50,110,.07); }
.booking-card h2 { line-height:1.55; margin-bottom:14px; }
.booking-card-intro,.booking-policy,.booking-pre-submit-notice,.form-help { line-height:1.85; }
.booking-form .form-group { margin-bottom:20px; }
.booking-form :is(input,select,textarea) { border-radius:10px; }
.booking-week-nav,.preference-remove,#booking-week-retry,#lesson-retry { min-height:44px; min-width:44px; }
.timerex-slot { min-height:44px; }
.booking-week-status.error { color:var(--ui-error); }
.booking-selection-panel { scroll-margin-top:100px; }
.booking-submit { white-space:normal; min-height:54px; padding-inline:18px!important; }
.booking-result { line-height:1.9; }
.booking-result:focus { outline:3px solid var(--ui-focus); outline-offset:6px; }
/* Member and subscriber surfaces share the same input and card rhythm. */
.member-card,.auth-card { border-radius:18px; }
.member-card h2,.auth-title { line-height:1.55; }
.member-card :is(label,p),.auth-desc { line-height:1.85; }
.member-auth-modes { gap:10px; }
#member-status,#member-note-state,#member-access-state,.auth-error { overflow-wrap:anywhere; }
.member-settings summary { min-height:48px; padding-block:12px; }
.auth-input { min-height:48px; }
.auth-btn { min-height:48px; }
.legal-content { font-size:16px; }
.legal-content h2 { padding-top:8px; scroll-margin-top:96px; }
.legal-header button { min-height:44px; }
/* Accessible app-owned informational dialog, never used to change business rules. */
.ui-dialog { margin:auto; width:min(480px,calc(100% - 32px)); max-height:calc(100dvh - 40px); overflow:auto; border:1px solid var(--color-border,var(--border)); border-radius:18px; padding:28px; background:var(--color-surface,var(--surface)); color:var(--color-text,var(--text)); box-shadow:0 20px 70px #0004; font-family:inherit; }
.ui-dialog::backdrop { background:#100b24a6; backdrop-filter:blur(3px); }
.ui-dialog h2 { font-size:20px; line-height:1.6; margin-bottom:12px; }
.ui-dialog p { white-space:pre-wrap; line-height:1.85; overflow-wrap:anywhere; }
.ui-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:24px; }
.ui-dialog-actions button { padding:10px 20px; min-height:44px; border:1px solid var(--color-border,var(--border)); border-radius:999px; font:inherit; font-weight:700; background:var(--color-bg2,var(--bg2)); color:inherit; }
.ui-dialog-actions .ui-dialog-primary { background:var(--ui-cta); color:#fff; border-color:transparent; }
.ui-dialog input { display:block; width:100%; margin-top:12px; padding:10px; background:var(--color-bg,var(--bg)); color:inherit; border:1px solid var(--color-border,var(--border)); border-radius:8px; }
@keyframes ui-reveal { from { opacity:.45; transform:translateY(-3px); } to { opacity:1; transform:none; } }
@media(max-width:1100px) and (min-width:901px) { #main-nav a { font-size:12px; } #main-nav ul { gap:10px; } .header-inner { gap:8px; } }
@media(max-width:900px) { .header-inner { justify-content:space-between; } .theme-toggle-btn { margin-left:auto; } }
@media(max-width:600px) {
 :where(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:16px!important; }
 .page-hero { padding:112px 0 40px; }
 .page-hero-title { font-size:28px; }
 .page-hero-desc { font-size:14px; }
 .booking-hero h1 { font-size:clamp(22px,6vw,28px); }
 .booking-hero>.container>p { font-size:14px; }
 .booking-card { padding:24px 18px; }
 .booking-grid { gap:22px; }
 .booking-week-head { gap:6px; padding-inline:8px; }
 .booking-week-range { font-size:13px; }
 .booking-week-nav { padding:6px 8px; }
 .booking-week-nav span { display:none; }
 .booking-pre-submit-notice { font-size:13px; }
 .booking-submit { font-size:14px!important; }
 .faq-question { padding:18px 16px; font-size:14px; }
 .faq-answer { padding-inline:16px; }
 .faq-nav { gap:8px; margin-bottom:32px; }
 .faq-cta { padding:32px 20px; }
 .auth-card { width:calc(100% - 32px); padding:30px 22px; }
 .member-card { padding:24px 20px; }
 .member-auth-modes { flex-wrap:wrap; }
 .member-top { gap:12px; }
 .ui-dialog { padding:24px 20px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto!important; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }
@media(forced-colors:active) { * { scrollbar-color:auto; } :focus-visible { outline-color:Highlight; } :is(.btn-primary,.btn-nav,.ui-dialog-primary) { border:1px solid ButtonText; } }
/* Navigation keeps labels intact as tap targets grow. */
#main-nav ul { gap:12px; }
#main-nav a { white-space:nowrap; font-size:13px; }
#main-nav .btn-nav { background:var(--ui-cta)!important; }
#site-header .logo { flex-shrink:0; }
@media(max-width:1200px) { #site-header #main-nav { display:none!important; } #site-header .hamburger { display:flex!important; justify-content:center; align-items:center; } #site-header .theme-toggle-btn { margin-left:auto; } }
@media(max-width:600px) { input[type=checkbox],input[type=radio] { min-width:20px; min-height:20px; } }
a[aria-disabled=true] { opacity:.5; cursor:default; pointer-events:none; }
/* Optional editorial thumbnails have a calm, stable fallback; brand artwork is untouched. */
img[hidden] { display:none!important; }
.ui-media-placeholder { display:grid; place-items:center; flex-shrink:0; color:var(--color-lilac); background:var(--grad-soft,var(--color-bg2)); font-size:40px; font-family:serif; }

/* v0.68: the existing 300px minimum track overflowed at 320px viewport. */
@media(max-width:360px) { .columns-grid { grid-template-columns:minmax(0,1fr); } }