/* ===================== app-design-system.css =====================
   Language App – Design System (Standardized)
   - Tokens (expanded ramps, spacing, type, motion)
   - Components (app bar, cards, chips/pills, buttons, stars, progress, translation, bottom bar, IPA grid, sheet)
   - Utilities (spacing, layout, visibility)
==================================================================== */

/* ===== 1) TOKENS ========================================================= */
:root{
  /* Primary — pine/teal, richer & cooler */
  --primary-50:  #F0F6F4;
  --primary-100: #D7E7E1;
  --primary-200: #9BC5B4;
  --primary-300: #68A38C;
  --primary-400: #3F856B;
  --primary-500: #2A6B52; /* base (matches welcome & landing) */
  --primary-600: #215744; /* AA on white for regular text */
  --primary-700: #184435;
  --primary-800: #113327; /* deep accent used in hero gradient */
  --primary-900: #0B241B;

  /* Secondary — warm amber for emphasis (kept, nudged for harmony) */
  --secondary-100:#FFF4E5;
  --secondary-200:#FFE0B8;
  --secondary-300:#FFCE8A;
  --secondary-400:#F2BD73;
  --secondary-500:#E6B05D; /* base (unchanged hue, slightly brighter tints) */
  --secondary-600:#C6913E;

  /* Semantic */
  --fg:#1F2C2B;
  --fg-muted:#66726C;       /* slightly deeper to match richer primary */
  --bg:#F5F7F6;             /* tiny cool shift for cohesion */
  --surface:#FFFFFF;
  --border:rgba(0,0,0,.10);
  --focus:#E6B05D;          /* keep warm focus ring for accessibility */
  --on-secondary:#1F2C2B;
  --button-bg:var(--surface);
  --button-fg:var(--fg);
  --button-ghost-bg:transparent;
  --button-border:var(--border);
  --button-disabled-bg:color-mix(in oklab, var(--surface) 85%, var(--border));
  --button-disabled-fg:color-mix(in oklab, var(--fg-muted) 80%, var(--fg));

  /* Feedback */
  --ok:#1E6A3E;             /* aligned with primary family, good AA on white */
  --warn:#E6B05D;
  --err:#B00020;

  /* Progress */
  --progress-track:#D9E4E0; /* lighter, cooler track */
  --progress-fill:var(--primary-600);

  /* Optional tokens for hero/banner gradients (used on welcome) */
  --hero-start:#113327;
  --hero-end:#2A6B52;

  /* Sizing / Rhythm */
  --radius-sm:8px;
  --radius:16px;
  --radius-pill:9999px;
  --shadow-1:0 1px 8px rgba(0,0,0,.08);
  --shadow-2:0 2px 12px rgba(0,0,0,.10);
  --shadow-3:0 10px 28px rgba(0,0,0,.20);
  --container:1100px;
  --appbar-h:56px;

  /* Type scale */
  --fs-2xl:2rem;     /* 32px */
  --fs-xl:1.6rem;    /* 25.6px */
  --fs-lg:1.25rem;   /* 20px */
  --fs-md:1rem;      /* 16px */
  --fs-sm:.875rem;   /* 14px */
  --lh-tight:1.2;
  --lh-body:1.6;
  --skeleton-sm:12px;
  --skeleton-md:16px;
  --skeleton-lg:44px;

  /* Spacing (8-pt base) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms;
  --dur:200ms;

  /* Grid helpers */
  --gap:14px;
  --cols:4;
  --tile-min:110px;
  --tile-max:160px;

  /* Stars */
  --star-size:64px;
  --star-gap:2px;
  --star-outline: rgba(59,113,89,.55);

  /* Z */
  --z-appbar:5;
  --z-sheet:40;
  --z-dialog:50;
  --z-toast:60;
  --bottom-h: 72px;
}

/* Dark mode ready (optional) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101413;
    --surface:#151b1a;
    --fg:#e9f0ee;
    --fg-muted:#aab6b1;
    --border:rgba(255,255,255,.12);
    --star-outline: rgba(221,204,171,.55);
    --bottom-h: 72px;
    --button-bg:var(--surface);
    --button-fg:var(--fg);
    --button-ghost-bg:transparent;
    --button-border:var(--border);
    --button-disabled-bg:color-mix(in oklab, var(--surface) 85%, #000);
    --button-disabled-fg:color-mix(in oklab, var(--fg-muted) 80%, var(--fg));
  }
}

/* ===== 2) BASE =========================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Roboto,system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--fg);
  background:var(--bg);
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Type */
.h1{font-size:var(--fs-2xl);font-weight:900;margin:.2rem 0}
.h2{font-size:var(--fs-xl);font-weight:800;margin:.2rem 0}
.h3{font-size:var(--fs-lg);font-weight:800;margin:.2rem 0}
.h4{font-size:1.05rem;font-weight:800;margin:.1rem 0 var(--space-2)}
.p{font-size:var(--fs-md);line-height:1.6;margin:.4rem 0}
.small{font-size:var(--fs-sm)}
.muted{color:var(--fg-muted)}
.overline,.eyebrow{font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--fg-muted);margin:0}
.subtitle{font-size:var(--fs-md);line-height:var(--lh-body);color:var(--fg-muted);margin:.2rem 0}
.lead{font-size:var(--fs-lg);font-weight:600;line-height:1.4;margin:.2rem 0}
.caption{font-size:.95rem;line-height:1.4;color:var(--fg-muted);margin:0}
.caption-strong{font-size:.95rem;line-height:1.4;color:var(--fg-muted);margin:0;font-weight:600}
.stat-label{font-size:.95rem;font-weight:600;color:var(--fg-muted);display:flex;align-items:center;gap:4px}

/* ===== 3) LAYOUT PRIMITIVES ============================================= */
.container{max-width:var(--container);margin:0 auto;padding:var(--space-4)}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.center{display:grid;place-items:center}
.spacer{flex:1}

/* Utilities (tiny set) */
.mt-1{margin-top:var(--space-1)} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)}
.mb-3{margin-bottom:var(--space-3)}
.pad-3{padding:var(--space-3)}
.justify-between{justify-content:space-between}
.align-center{align-items:center}
.gap-3{gap:var(--space-3)}
.kbd{display:inline-block;padding:2px 6px;border:1px solid var(--border);border-radius:6px;font-size:12px;background:var(--surface)}

/* Shared breakpoint helper */
@media (max-width: 640px){
  .hide-mobile{display:none !important}
}

/* Density switch */
body[data-density="compact"] .card__body{padding:var(--space-3)}
body[data-density="compact"] .btn{padding:8px 12px}

/* ===== 4) COMPONENTS ===================================================== */
/* App Bar */
.app-bar{
  height:var(--appbar-h);
  background:var(--primary-500);
  color:#fff;
  display:flex;align-items:center;gap:var(--space-2);
  padding:0 var(--space-2);
  position:sticky;top:0;z-index:var(--z-appbar)
}
.app-bar.surface{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-1)}
.app-title{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px}

/* Keep the app bar on a single row and space groups */
.app-bar > .row,
.app-bar .row.align-center.justify-between{
  display:flex;
  width:100%;
  justify-content:space-between !important;
  align-items:center;
  flex-wrap:nowrap;       /* prevent wrapping */
}

/* IMPORTANT: only the top-level row should be full width */
.app-bar > .row { width: 100%; }

/* Nested rows (left group & right group) should size to content */
.app-bar > .row > .row { width:auto; }

/* Ensure the left group (back + title) hugs content so title aligns with back */
.app-bar > .row > .row:first-child{
  flex:0 1 auto;
  align-items:center;
  gap:var(--space-2);
}

/* Push the trailing action group (e.g., help “?”) to the right edge */
.app-bar > .row > :last-child{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: var(--space-1, 4px);
}

.content { padding-top: var(--space-3); }

/* Cards / Sections */
.card,.section{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-2);overflow:hidden}
.card__body,.section__body{padding:var(--space-4)}
.card__title,.section__title{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:1.25rem}
.card__title i,.section__title i{color:var(--primary-500)}
.section-lead{margin:0;color:var(--fg-muted);font-size:var(--fs-md);line-height:var(--lh-body)}

/* Pills & Chips */
.pill,.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:.01em;
}
.pill{background:var(--primary-100);color:var(--fg)}
.pill i{color:var(--primary-500)}
.chip{background:#fff;border:1px solid var(--border)}
.chip.chip--soft{
  background:color-mix(in oklab, var(--primary-500) 10%, var(--surface));
  color:color-mix(in oklab, var(--primary-700, var(--primary-500)) 65%, var(--fg));
  border-color:color-mix(in oklab, var(--primary-200, var(--border)) 50%, var(--border));
}
.chip.chip--tone-primary{
  background:color-mix(in oklab, var(--primary-500) 14%, transparent);
  color:color-mix(in oklab, var(--primary-700, var(--primary-500)) 70%, var(--fg));
  border-color:color-mix(in oklab, var(--primary-300, var(--border)) 60%, var(--border));
  box-shadow:0 4px 14px color-mix(in srgb, var(--primary-500) 20%, transparent);
}
.stat-chips{display:flex;flex-wrap:wrap;gap:8px}
.stat-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  font-size:.95rem;
  font-weight:600;
  color:var(--fg);
  background:color-mix(in oklab, var(--surface) 92%, var(--primary-100) 8%);
  border:1px solid color-mix(in oklab, var(--primary-200, var(--border)) 60%, var(--border));
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:10px 14px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background:var(--button-bg);
  color:var(--button-fg);
  font-weight:800;
  cursor:pointer;
  user-select:none;
  transition:
    transform var(--dur-fast) var(--ease),
    filter var(--dur-fast) var(--ease);
}
.btn:active {transform:translateY(1px)}
.btn.primary{background:var(--secondary-500);color:var(--on-secondary);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost{background:var(--button-ghost-bg);border-color:var(--button-border)}
.btn.icon{width:40px;height:40px;display:grid;place-items:center;padding:0;border-radius:50%}
.btn[disabled]{background:var(--button-disabled-bg);color:var(--button-disabled-fg);cursor:not-allowed}
.btn[data-size="sm"]{padding:6px 10px;font-size:var(--fs-sm)}
.btn[data-size="lg"]{padding:12px 18px;font-size:var(--fs-lg)}

/* Progress */
.progress{height:8px;background:#e7eee9;border-radius:9999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--primary-500);width:0%;transition:width var(--dur) var(--ease)}
.progress.thick{height:14px;background:var(--progress-track)}
.progress.thick>span{background:var(--progress-fill)}
.progress-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-2);
  color:var(--fg-muted);
  font-size:.95rem;
  font-weight:600;
}
.progress__meta{display:flex;justify-content:space-between;align-items:center;color:var(--fg-muted);font-size:.95rem;font-weight:600}

/* Translation block */
.translation{margin-top:var(--space-3);padding:var(--space-3);background:var(--primary-100);border:1px solid rgba(0,0,0,.06);border-radius:12px}
.translation[data-variant="elevated"]{background:var(--surface);box-shadow:var(--shadow-1)}
.translation .tr-primary{font-weight:800;font-size:1.05rem;margin:0 0 6px}
.translation .tr-example{margin:0;color:var(--fg-muted);font-style:italic}

/* Rating stars */
.rating{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px}
.rating__label{font-weight:600;font-size:.95rem;color:var(--fg-muted)}
.stars{display:flex;gap:var(--star-gap);justify-content:center;align-items:center}
.star{position:relative;width:var(--star-size);height:var(--star-size);display:grid;place-items:center;border:none;background:transparent;cursor:pointer;padding:0;margin:0;touch-action:manipulation}
.star svg{width:100%;height:100%}
.star svg path{fill:transparent;stroke:var(--star-outline);stroke-width:2;stroke-linejoin:round}
.star.selected svg path{fill:var(--secondary-500);stroke:var(--secondary-500)}

/* Bottom action bar */
.bottom{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  box-shadow: 0 -2px 10px rgba(0,0,0,.05);
  z-index: var(--z-sheet, 10);
}
.bar-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom))}
.left-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* Dialog / Overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:var(--space-4);z-index:var(--z-dialog)}
.dialog{background:#fff;border-radius:16px;max-width:520px;width:100%;box-shadow:var(--shadow-3);overflow:hidden}
.dialog header{background:var(--primary-500);color:#fff;padding:14px 16px;font-weight:900}
.dialog .body{padding:var(--space-4)}
.dialog .actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;background:#fafafa}

/* Skeleton loader */
.skeleton{position:relative;overflow:hidden;background:#e8eeeb}
.skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skeleton-line{display:inline-block;border-radius:6px;background:#e8eeeb;position:relative;overflow:hidden;line-height:1}
.skeleton-line::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);animation:shimmer 1.2s infinite}
.skeleton-line[data-size="sm"]{height:var(--skeleton-sm);min-width:60px}
.skeleton-line[data-size="md"]{height:var(--skeleton-md);min-width:90px}
.skeleton-line[data-size="lg"]{height:var(--skeleton-lg);min-width:140px}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* IPA Grid & Tiles */
.ipa-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--cols),1fr);align-items:stretch}
.ipa-tile{position:relative;width:100%;aspect-ratio:1/1;border:0;background:var(--primary-100);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:pointer;user-select:none;transition:transform var(--dur-fast) var(--ease) , box-shadow var(--dur) var(--ease);-webkit-appearance:none;appearance:none}
.ipa-tile:active{transform:scale(.985)}
.ipa-tile[data-state="active"]{outline:2px solid var(--secondary-500)}
.ipa-tile[disabled]{opacity:.5;pointer-events:none}
.ipa-symbol{font-size:clamp(1.3rem,5vw,2rem);font-weight:600;letter-spacing:.01em;color:var(--fg);line-height:1.2;text-align:center}
.ipa-bottom{width:84%;display:flex;flex-direction:column;align-items:center;gap:0}
.ipa-progress{width:100%;height:14px;border-radius:9999px;background:var(--progress-track);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ipa-bar{height:100%;width:0%;background:var(--progress-fill);border-radius:9999px;transition:width var(--dur) var(--ease)}

/* Bottom Sheet */
.sheet{position:fixed;left:0;right:0;bottom:0;top:0;background:var(--bg);transform:translateY(100%);transition:transform var(--dur) var(--ease);z-index:var(--z-sheet);display:flex;flex-direction:column}
.sheet.open{transform:translateY(0)}
.sheet__header{position:sticky;top:0;background:var(--primary-500);color:#fff;box-shadow:0 1px 8px rgba(0,0,0,.16);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 var(--space-2);height:56px}
.sheet__title{margin:0;font-size:1.1rem;font-weight:700;color:#fff}
.sheet__subtitle{margin:0;font-size:.9rem;color:rgba(255,255,255,.85)}
.sheet__body{padding:var(--space-3);overflow:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.word-card{background:var(--surface);border-radius:12px;padding:14px;box-shadow:var(--shadow-1)}
.word-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.word-main{font-size:1.05rem;font-weight:800;margin:0}
.word-ipa{margin:2px 0 0;font-style:italic;opacity:.75}
.playing{animation:playFeedback .5s ease}
@keyframes playFeedback{0%{box-shadow:0 0 0 0 rgba(59,113,89,.45)}50%{box-shadow:0 0 12px 4px rgba(59,113,89,.35)}100%{box-shadow:0 0 0 0 rgba(59,113,89,0)}}

/* Responsive tweaks */
@media (max-width: 480px) {
  star-rating {
    width: 100%;
    display: block;
  }
  .rating {
    align-items: stretch;
  }
  .rating__label {
    text-align: center;
  }
  .star {
    flex-basis: 0;
    flex-grow: 1;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: var(--star-size);
  }
}
@media (min-width:768px){
  .container{padding:var(--space-6)}
  .section__body{padding:var(--space-5)}
  .sheet__body{padding:var(--space-4)}
}

.has-bottom-padding{
  padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom));
}

/* === Word Chips (Design System Additions) === */
.word-list { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--space-2, 8px);
}

/* Button-like chip for example words */
.word {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--border-subtle, rgba(0,0,0,.08));
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #fff);
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  box-shadow: none;
  transition: box-shadow .15s var(--ease, ease), border-color .15s var(--ease, ease), transform .06s var(--ease, ease);
}
.word:hover { 
  border-color: color-mix(in oklab, var(--primary-500, #2e7d32) 35%, transparent); 
  box-shadow: 0 2px 8px rgba(0,0,0,.06); 
}
.word:active { transform: translateY(1px); }
.word:focus-visible { 
  outline: 2px solid var(--primary-500, #2e7d32); 
  outline-offset: 2px;
  box-shadow: none;
}
.word .material-icons { font-size: 18px; opacity: .9; }
.word .icon-badge { 
  display: inline-grid; 
  place-content: center; 
  inline-size: 22px; 
  block-size: 22px; 
  border-radius: 999px; 
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:var(--fs-sm);
  line-height:var(--lh-tight);
  font-weight:600;
}
.badge.badge-muted{
  background:color-mix(in oklab, var(--surface) 92%, var(--border) 8%);
  color:var(--fg-muted);
}

/* Target grapheme highlight inside a word */
.word b,
.highlight-accent { 
  color: var(--primary-500, #2e7d32); 
  font-weight: 700; 
}

/* Optional play feedback */
.is-playing .icon-badge { animation: ds-play-pulse 600ms var(--ease, ease-out) 1; }
@keyframes ds-play-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(46,125,50,.0); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary-500, #2e7d32) 20%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* ===== 4.1) FORM CONTROLS ================================================== */
/* Field wrapper */
.field{display:flex;flex-direction:column;gap:6px;max-width:680px}
.field.row{flex-direction:row;align-items:center;gap:12px}
  .label{font-weight:600;font-size:.95rem;margin-left:var(--space-2)}
  .hint{color:var(--fg-muted);font-size:.85rem}
.msg{font-size:.85rem;margin-left:var(--space-2)}
.msg--ok{color:var(--ok)} .msg--warn{color:var(--warn)} .msg--err{color:var(--err)}

/* Select field – add dropdown chevron similar to Bulma */
.field.row.field--select {
  position: relative;
}

.field.row.field--select .select {
  padding-right: 2.5rem; /* space for chevron */
  background-image: none; /* hide base select arrow for these fields */
}

.field.row.field--select::after {
  content: "";
  position: absolute;
  pointer-events: none;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--fg-muted); /* or even var(--fg) */
  border-top: 0;
  border-left: 0;
  transform: translateY(70%) rotate(45deg); /* vertically centered chevron */
}

/* Input base (text, email, password, search, number), textarea & select */
.input,
.textarea,
.select{
  width:100%;
  appearance:none;
  font:inherit;
  line-height:1.35;
  color:var(--fg);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 12px;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.textarea{min-height:96px;resize:vertical}

/* Hover / focus */
.input:hover,.textarea:hover,.select:hover{border-color:color-mix(in oklab, var(--fg) 18%, transparent)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-color:var(--focus);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--focus) 35%, transparent);
}

/* Disabled / read-only */
.input[disabled],.textarea[disabled],.select[disabled]{opacity:.6;cursor:not-allowed;background:#eef2f1}
.input[readonly]{background:color-mix(in oklab, var(--surface) 85%, var(--bg) 15%)}

/* Validation states via parent .field */
.field.success .input,.field.success .textarea,.field.success .select{border-color:color-mix(in oklab, var(--ok) 50%, transparent)}
.field.warn .input,.field.warn .textarea,.field.warn .select{border-color:color-mix(in oklab, var(--warn) 55%, transparent)}
.field.error .input,.field.error .textarea,.field.error .select{border-color:color-mix(in oklab, var(--err) 55%, transparent)}
.field.error .input:focus-visible,.field.error .textarea:focus-visible,.field.error .select:focus-visible{outline-color:var(--err)}

/* Size variants */
.input[data-size="sm"],.textarea[data-size="sm"],.select[data-size="sm"]{padding:8px 10px;font-size:.9rem}
.input[data-size="lg"],.textarea[data-size="lg"],.select[data-size="lg"]{padding:12px 14px;font-size:1.05rem}

/* Leading / trailing icons (optional) */
.field[data-affix]{position:relative}
.field[data-affix] .affix{
  position:absolute;top:0;bottom:0;display:grid;place-items:center;opacity:.85
}
.field[data-affix="prefix"] .affix{left:10px}
.field[data-affix="suffix"] .affix{right:10px}
.field[data-affix="prefix"] .input,
.field[data-affix="prefix"] .select{padding-left:38px}
.field[data-affix="suffix"] .input,
.field[data-affix="suffix"] .select{padding-right:38px}

/* Select chevron */
.select{
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23666' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:34px
}

/* Checkbox / Radio (native with accent-color) */
.control{display:flex;align-items:center;gap:8px}
input[type="checkbox"],input[type="radio"]{
  width:18px;height:18px;margin:0;accent-color:var(--primary-500);cursor:pointer
}
input[type="radio"]{border-radius:50%}
.control label{cursor:pointer}

/* Switch (toggle) */
/* Switch (toggle) */
.switch{display:inline-flex;align-items:center;gap:10px}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{
  width:42px;
  height:24px;
  border-radius:999px;
  background:#e7ebea;
  border:1px solid var(--border);
  position:relative;
  transition:
    background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

/* Center the thumb vertically using top:50% + translateY(-50%) */
.switch .thumb{
  position:absolute;
  top:50%;
  left:1px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:var(--shadow-1);
  transform:translate(0,-50%);
  transition:transform var(--dur-fast) var(--ease);
}

.switch input:checked + .track{
  background:color-mix(in oklab, var(--primary-500) 85%, white 15%);
  border-color:transparent;
}

/* Move thumb horizontally while keeping it vertically centered */
.switch input:checked + .track .thumb{
  transform:translate(18px,-50%);
}

.switch .label{font-weight:600}
.switch input:focus-visible + .track{
  outline:2px solid var(--focus);
  outline-offset:2px;
}


/* Inline groups */
.inline{display:flex;flex-wrap:wrap;gap:12px}
.inline .field{max-width:none}
.group{display:flex;flex-direction:column;gap:8px}
.form-sections{display:flex;flex-direction:column;gap:var(--space-3)}
.form-section{padding:var(--space-3) 0}
.form-section:first-of-type{padding-top:0}
.form-section:last-of-type{padding-bottom:var(--space-6)}

/* Compact density support */
body[data-density="compact"] .input,
body[data-density="compact"] .textarea,
body[data-density="compact"] .select{padding:8px 10px}

/* Password input with toggle */
.password-input-wrapper {
  position: relative;
}
.password-input-wrapper .input {
  padding-right: 40px !important; /* Use important to override other padding rules */
}
.password-toggle-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 12px;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
}
.password-toggle-btn:hover {
  color: var(--fg);
}
.password-toggle-btn .material-icons {
  vertical-align: middle;
}

/* ====================================================================
   Component: app-button
   - These styles support the <app-button> custom element.
   ==================================================================== */

/* Adding mobile-first responsive styles for buttons */
@media (max-width: 600px) {
  /*
    On small screens, reduce button padding and font size to save space,
    especially in bottom toolbars.
  */
  .btn {
    padding: 8px 12px;
    font-size: var(--fs-sm);
    gap: var(--space-1);
  }

  .btn .material-icons {
    /* Reduce icon size to match smaller text */
    font-size: 20px;
  }

  /* Make icon-only buttons slightly smaller */
  .btn.icon {
    width: 38px;
    height: 38px;
  }
}
.stack.tight{gap:4px;}
.card h3,
.card .h3{margin:0 0 4px;line-height:1.2;}
.card .muted.small{margin-top:0;}