/* ===================================================================
   doop — Material 3 design system (light · comfy · dark-green primary)
=================================================================== */

:root {
  /* ---- Material 3 tonal surfaces (warm neutral with a hint of green) ---- */
  --bg-0:        #f4f6f1;   /* app background        */
  --bg-1:        #eaeee5;   /* sunk / sidebar        */
  --bg-2:        #e3e8dd;   /* input fields, deep    */
  --surface:     #ffffff;   /* cards                 */
  --surface-2:   #f3f5ee;   /* hover                 */
  --surface-3:   #e8ece3;   /* pressed               */
  --surface-tint:#dde6d8;   /* container tonal       */

  --border:      #d8ddd2;
  --border-2:    #c4cabd;

  /* ---- Text on surfaces ---- */
  --text:        #1a1f1a;   /* on-surface            */
  --text-2:      #404740;   /* on-surface-variant    */
  --text-3:      #6a7268;   /* tertiary text         */
  --text-4:      #9aa298;   /* faint                 */

  /* ---- Primary: dark green (Material 800-ish) ---- */
  --accent:      #2e7d32;   /* primary               */
  --accent-2:    #1b5e20;   /* primary-darker        */
  --accent-3:    #0e4a13;   /* deepest               */
  --on-accent:   #ffffff;
  --accent-container:     #c5e8c8;  /* primary container */
  --accent-container-2:   #dff1e1;  /* lighter mint      */
  --on-accent-container:  #002106;
  --accent-soft: rgba(46, 125, 50, 0.10);
  --accent-glow: rgba(46, 125, 50, 0.18);

  /* ---- Secondary palette accents ---- */
  --amber:       #b07d2c;
  --amber-container: #ffe0a3;
  --rose:        #b3261e;
  --rose-container:  #f9dedc;
  --blue:        #2a6a9c;
  --blue-container: #cfe5f8;
  --violet:      #6750a4;
  --violet-container: #e8def8;

  /* ---- Type ---- */
  --font-sans:    "Sukhumvit Set", "SukhumvitSet-Text", "Sukhumvit", "DM Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "Sukhumvit Set", "SukhumvitSet-Text", "Sukhumvit", "DM Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
  --font-display: "Sukhumvit Set", "SukhumvitSet-Bold", "Sukhumvit", "DM Sans", system-ui, sans-serif;

  /* ---- Shape (Material 3 leans rounded) ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation (Material 3 elevation tokens) ---- */
  --elev-1: 0 1px 2px rgba(20, 36, 22, 0.06), 0 1px 3px rgba(20, 36, 22, 0.06);
  --elev-2: 0 1px 2px rgba(20, 36, 22, 0.06), 0 2px 6px rgba(20, 36, 22, 0.08);
  --elev-3: 0 1px 3px rgba(20, 36, 22, 0.06), 0 4px 8px rgba(20, 36, 22, 0.08);
  --elev-4: 0 2px 4px rgba(20, 36, 22, 0.06), 0 8px 16px rgba(20, 36, 22, 0.10);
  --elev-5: 0 4px 8px rgba(20, 36, 22, 0.06), 0 16px 32px rgba(20, 36, 22, 0.12);

  /* ---- Comfy density defaults ---- */
  --density-pad: 22px;
  --density-gap: 16px;
  --density-row: 72px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }

/* Scrollbars (Material-y, light) */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 999px;
  border: 3px solid var(--bg-0);
}
*::-webkit-scrollbar-thumb:hover { background: #a9b3a3; }

/* =============================================================
   Buttons — Material 3 (filled · tonal · outlined · text · FAB)
============================================================= */

/* default = tonal (filled with primary container) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
  background: var(--accent-container-2);
  color: var(--on-accent-container);
  border: none;
  position: relative; overflow: hidden;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}
.btn:hover { background: var(--accent-container); box-shadow: var(--elev-1); }
.btn:active { transform: translateY(0.5px); box-shadow: var(--elev-2); }

/* filled / primary */
.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--elev-1);
}
.btn.primary:hover { background: var(--accent-2); box-shadow: var(--elev-2); }
.btn.primary:active { box-shadow: var(--elev-3); }

/* outlined */
.btn.ghost {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.btn.ghost:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent-2); }

/* text */
.btn.text {
  background: transparent;
  color: var(--accent);
  padding: 0 12px;
}
.btn.text:hover { background: var(--accent-soft); box-shadow: none; }

.btn.icon { width: 40px; padding: 0; justify-content: center; }

/* FAB-ish big primary */
.btn.fab {
  height: 56px; padding: 0 26px;
  border-radius: var(--r-lg);
  box-shadow: var(--elev-3);
  font-size: 15px;
}
.btn.fab:hover { box-shadow: var(--elev-4); }

/* =============================================================
   Chip — Material 3 (filter / assist / input)
============================================================= */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--border-2);
  font-size: 13px; font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.chip.accent {
  background: var(--accent-container);
  color: var(--on-accent-container);
  box-shadow: none;
}
.chip.solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.chip.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0;
}

.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--text-2);
  box-shadow: inset 0 -1px 0 var(--border-2);
}

.divider { height: 1px; background: var(--border); }

/* =============================================================
   Lyrics rendering — classic inline (chord above lyric)
============================================================= */

.lyrics {
  font-family: var(--font-mono);
  white-space: pre;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
}
.lyric-section { margin-bottom: 18px; }
.lyric-pair { margin-bottom: 6px; }
.lyric-pair:last-child { margin-bottom: 0; }
.lyric-pair.chord-cells {
  font-family: var(--font-mono), "Sarabun", "Noto Sans Thai", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
}
.lyric-section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.chord-line {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  white-space: pre;
  line-height: 1.25;
  letter-spacing: 0;
  /* allow chord tokens that overhang the lyric to spill without breaking layout */
}
.lyric-line {
  font-family: var(--font-mono);
  color: var(--text);
  white-space: pre;
  line-height: 1.55;
}

/* =============================================================
   Tab nav — Material 3 segmented / pill nav
============================================================= */

.tabnav {
  display: flex; gap: 4px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-1);
  /* On narrower screens (iPad portrait, phones) let the row scroll horizontally
     rather than overflow the header. */
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.tabnav::-webkit-scrollbar { display: none; }
.tabnav button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  min-height: 40px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
  color: var(--text-2);
  transition: all 0.15s ease;
  flex-shrink: 0;
  scroll-snap-align: center;
  white-space: nowrap;
}
.tabnav button:hover { color: var(--text); background: var(--surface-2); }
.tabnav button.active {
  background: var(--accent-container);
  color: var(--on-accent-container);
}
/* Touch devices: bigger hit targets */
@media (hover: none) and (pointer: coarse) {
  .tabnav button { min-height: 44px; padding: 12px 18px; }
}

/* =============================================================
   Card — Material 3 (elevated · filled · outlined)
============================================================= */

.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--density-pad);
  box-shadow: var(--elev-1);
}
.card.outlined {
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--surface);
}
.card.filled {
  background: var(--bg-1);
  box-shadow: none;
}

/* =============================================================
   Fields — Material 3 (filled text field)
============================================================= */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 12px; color: var(--text-3); font-weight: 600;
  letter-spacing: 0.04em;
}
.input, .textarea, .select {
  background: var(--bg-1);
  border: none;
  border-radius: var(--r-md);
  padding: 14px 16px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  box-shadow: inset 0 -1px 0 var(--border-2);
  transition: background 0.15s, box-shadow 0.15s;
}
.input:hover, .textarea:hover { background: var(--surface-3); }
.input:focus, .textarea:focus, .select:focus {
  background: var(--surface-2);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.textarea { min-height: 120px; font-family: var(--font-mono); line-height: 1.7; resize: vertical; }

/* =============================================================
   Density modes
============================================================= */

.density-compact  { --density-pad: 14px; --density-gap: 10px; --density-row: 56px; }
.density-comfy    { --density-pad: 22px; --density-gap: 16px; --density-row: 72px; }
.density-spacious { --density-pad: 30px; --density-gap: 22px; --density-row: 88px; }

/* =============================================================
   Responsive — portrait iPad and below (≤ 1024px)
============================================================= */

/* iPad landscape (≤1280) — tighten but keep labels */
@media (max-width: 1280px) {
  header { padding: 0 18px !important; }
  header .doop-brand-row { gap: 16px !important; }
  header .tabnav button { padding: 10px 14px; font-size: 13.5px; }
}

@media (max-width: 1024px) {
  /* iPad landscape boundary / smaller tablets */
  header .tabnav button { padding: 10px 12px; font-size: 13px; }
  header .tabnav button span { display: inline; }
  /* Hide the search-bar text on tighter screens — leave a search icon button */
  header .doop-searchbar { display: none; }

  /* Sidebars narrow */
  aside.doop-filter-rail   { width: 240px; padding: 18px 16px; }
  aside.doop-shows-list    { width: 260px; }
  aside.doop-tagging-side  { width: 240px; padding: 18px 16px; }

  /* Add Song 2-column → stack */
  .doop-twocol { grid-template-columns: 1fr !important; }

  /* Cards: a touch less padding */
  .card { padding: 18px; }

  /* Discover song title smaller */
  .doop-song-title { font-size: 40px !important; }

  /* Stats grid in shows: 2x2 instead of 4x1 */
  .doop-stats-grid { grid-template-columns: 1fr 1fr !important; }
  .doop-stats-grid > div:nth-child(3) { border-left: none !important; border-top: 1px solid var(--border); }
  .doop-stats-grid > div:nth-child(4) { border-top: 1px solid var(--border); }
}

/* iPad portrait (~834px) — keep labels but compact them */
@media (max-width: 900px) {
  header .tabnav button { padding: 10px 12px; font-size: 12.5px; gap: 6px; }
  /* Hide brand wordmark to make room for tabs */
  header .doop-brand-row > div:first-child > span { display: none; }
}

@media (max-width: 820px) {
  /* Smaller iPads / phone landscape: collapse to icon-only tabs */
  header { padding: 0 14px !important; height: 60px !important; }
  header .doop-brand-row { gap: 12px !important; }
  header .tabnav { padding: 3px; }
  header .tabnav button {
    padding: 10px 12px; font-size: 12px;
  }
  header .tabnav button .doop-tab-label { display: none; }   /* icons-only tabs */
  header .tabnav button { min-width: 44px; justify-content: center; }

  /* Sidebars: convert to full-width "drawer" feel inline */
  aside.doop-filter-rail,
  aside.doop-shows-list,
  aside.doop-tagging-side {
    width: 100% !important;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* Flex containers that were row → column */
  .doop-pane { flex-direction: column !important; }

  /* Discover song title even smaller */
  .doop-song-title { font-size: 32px !important; }

  /* Padding shrink */
  .doop-content-pad { padding: 24px 18px 80px !important; }

  .doop-stats-grid { grid-template-columns: 1fr 1fr !important; }

  /* Auth panel: stack vertically */
  .doop-auth-grid { grid-template-columns: 1fr !important; grid-template-rows: 240px 1fr !important; }
  .doop-auth-brand { padding: 24px !important; }
  .doop-auth-brand h1 { font-size: 32px !important; }
  .doop-auth-brand .doop-auth-chord { display: none; }
  .doop-auth-brand .doop-auth-features { display: none !important; }

  /* Action bar in landing: smaller */
  .doop-action-bar .btn { height: 44px !important; }
}

/* =============================================================
   Phone (≤640px) — overrides on top of the tablet rules above.
   The iPad-portrait rules at 820/900px still apply; this layer only
   tightens what's specific to phones (cramped one-column patterns).
============================================================= */
@media (max-width: 640px) {
  /* Header: extra compact, no fancy elevation */
  header { padding: 0 10px !important; height: 56px !important; }
  header .doop-brand-row { gap: 8px !important; }
  header .tabnav { padding: 2px; }
  header .tabnav button { padding: 9px 10px; min-width: 40px; }

  /* Hide the settings icon-button — frees room for the avatar */
  header > div:last-child > button[title="Settings"] { display: none; }

  /* Tweak avatar size */
  header > div:last-child > div[title*="click to sign out"] {
    width: 36px !important; height: 36px !important; font-size: 12px !important;
  }

  /* Discover song title */
  .doop-song-title { font-size: 26px !important; line-height: 1.1 !important; }

  /* Content padding super tight on phones */
  .doop-content-pad { padding: 18px 14px 80px !important; }

  /* Filter rail / shows list / tagging rail — short drawer */
  aside.doop-filter-rail,
  aside.doop-shows-list,
  aside.doop-tagging-side {
    max-height: 32vh;
    padding: 14px 14px 18px !important;
  }

  /* Add-Song / Bulk-add / two-col forms always stack */
  .doop-twocol { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Cards: tighter padding */
  .card { padding: 14px; border-radius: 12px; }

  /* Lyrics flow: smaller column gap so two short lines can sit side-by-side */
  .lyric-flow { column-gap: 18px !important; }

  /* Discover action bar sticks to bottom and wraps */
  .doop-action-bar {
    flex-wrap: wrap;
    border-radius: 18px !important;
    bottom: 12px !important;
  }

  /* Search: preview pane becomes a full-screen overlay on phones */
  .doop-search-preview {
    position: fixed !important;
    inset: 56px 0 0 0 !important;    /* below the header */
    width: 100vw !important;
    z-index: 50;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.1);
  }

  /* Shows perform header: stack title block above buttons */
  .doop-pane > div > div[style*="space-between"] { gap: 8px !important; }

  /* Buttons: ensure 44px touch target everywhere */
  .btn, .chip { min-height: 36px; }
  @media (hover: none) and (pointer: coarse) {
    .btn, .chip { min-height: 44px; }
  }

  /* Auth screen brand panel: trim further */
  .doop-auth-grid { grid-template-rows: 180px 1fr !important; }
  .doop-auth-brand h1 { font-size: 24px !important; }
  .doop-auth-brand p,
  .doop-auth-brand .doop-auth-features { display: none !important; }
}

/* Make tap-and-hold interactions feel native on touch */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-tap-highlight-color: transparent; }
  .btn, button.chip, .tabnav button {
    -webkit-tap-highlight-color: rgba(46,125,50,0.15);
  }
}

/* =============================================================
   Util
============================================================= */

.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; }
.gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }

/* keep .grain class harmless even if still in DOM */
.grain { display: none; }