:root {
  /* Soft paper + ink palette with gentle green/terracotta accents */
  --bg: #fdf7ef;
  --fg: #1f2933;
  --muted: #6b7280;
  --line: #e5e7eb;
  --shadow: rgba(15, 23, 42, 0.18);
  --accent: #16a34a;    /* leafy green */
  --accent-warm: #ea580c; /* terracotta/orange */
  --accent-2: #92400e;  /* warm ink */
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(1200px 420px at 0% 0%, rgba(22,163,74,0.12), transparent 65%),
    radial-gradient(1200px 420px at 100% 0%, rgba(234,88,12,0.10), transparent 65%),
    linear-gradient(180deg, #fdf7ef 0%, #fbf3e4 28%, #fbf3e4 100%);
  color: var(--fg);
  font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* NEW: center main page blocks and keep a comfortable max width */
body > .titlebar,
body > .menubar,
body > .layout,
body > .foot {
  max-width: 900px; /* slightly narrower for a tighter page */
  margin-inline: auto;
  padding-inline: 10px;
}

/* Header */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 20;
  text-align: center;
  padding: 10px 10px 6px;
  border-bottom: 1px solid rgba(209,213,219,0.4);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(253,246,236,0.98));
  box-shadow:
    0 6px 18px rgba(15,23,42,0.08);
}
.titlebar h1 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.95);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.titleMain {
  font-size: 20px;
}
.titleTag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 70%, var(--accent-2) 30%);
}
.titlebar h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 140px;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--accent) 0%, var(--accent-warm) 100%);
  opacity: 0.9;
}
.titlebar .subtitle {
  margin: 4px auto 4px;
  max-width: 520px;
  color: color-mix(in srgb, var(--muted) 80%, #000 20%);
  font-size: 12px;
  line-height: 1.5;
}
.titlebar p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.explainer {
  margin-top: 2px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--muted) 80%, #000 20%);
}
.explainerKey {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(209,213,219,0.9);
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
  color: var(--accent-2);
}
.titlebar .quickActions {
  display: inline-flex;
  gap: 6px;
  margin-left: 10px;
}
.titlebar .quickActions button {
  padding: 3px 8px;
  font-size: 11px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 3px 8px rgba(15,23,42,0.10);
}

/* Menubar */
.menubar {
  position: sticky;
  top: 64px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 6px;
  border-bottom: 1px solid rgba(209,213,219,0.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(253,246,236,0.97));
  backdrop-filter: blur(4px);
}
.menus {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Motif bar: soft, obvious, but not loud */
.motifBar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 14px;
  row-gap: 6px;
  padding: 10px 14px 12px;
  border-radius: 16px;
  /* remove hard border, use color block + shadow instead */
  border: none;
  background:
    radial-gradient(320px 160px at 0% 0%, rgba(22,163,74,0.20), transparent 70%),
    radial-gradient(260px 160px at 100% 0%, rgba(234,88,12,0.18), transparent 70%),
    rgba(255,255,255,0.96);
  box-shadow:
    0 6px 18px rgba(15,23,42,0.16);
  flex-basis: 100%;
}
.motifLabelBlock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 6px;
  /* sit on its own row spanning all columns */
  grid-column: 1 / -1;
}
.motifBar .motifLabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-2);
}
.motifBar .motifHint {
  font-size: 10px;
  color: var(--muted);
  max-width: 260px;
}
.motifBar .inline {
  margin: 0;
  /* lay out label text above control for clarity */
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
/* force Motif strength onto its own row so it doesn’t run on */
.motifBar .inline:nth-of-type(3) {
  flex-basis: 100%;
  max-width: 260px;
}
.motifBar input[type="text"] {
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
  border-radius: 999px;
  border: 1px solid rgba(209,213,219,0.7);
  padding: 5px 11px;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.10);
}

/* Sense/Wildness bar: small always-visible strip under motifs */
.senseBar {
  margin: 8px 0 4px;
  padding: 6px 12px 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(22,163,74,0.10), rgba(234,88,12,0.08));
  box-shadow: 0 3px 10px rgba(15,23,42,0.12);
}
.senseBar .inline {
  margin: 0;
  justify-content: center;
}
.senseBar input[type="range"] {
  width: 140px;
}

/* Dropdown menus: pill summaries with clear cards inside */
details.menu {
  position: relative;
  display: inline-block;
}
details.menu > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg);
  list-style: none;
  padding: 6px 12px;
  border-radius: 999px;
  /* soften border into a faint outline */
  border: 1px solid rgba(209,213,219,0.65);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 3px 10px rgba(148,163,184,0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease, border-color 0.15s ease;
}
details.menu > summary::-webkit-details-marker {
  display: none;
}
details.menu > summary::after {
  content: "▾";
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
}
details.menu[open] > summary {
  background: #ffffff;
  border-color: rgba(148,163,184,1);
  box-shadow: 0 8px 18px rgba(15,23,42,0.16);
  transform: translateY(-1px);
}
/* playful category colors – indexed by menu order after motifBar */
.menus details.menu:nth-of-type(2) > summary { /* Lexicon */
  border-color: rgba(22,163,74,0.55);
  background:
    linear-gradient(135deg, rgba(22,163,74,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(3) > summary { /* Structure */
  border-color: rgba(234,88,12,0.55);
  background:
    linear-gradient(135deg, rgba(234,88,12,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(4) > summary { /* Groove */
  border-color: rgba(8,145,178,0.55);
  background:
    linear-gradient(135deg, rgba(8,145,178,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(5) > summary { /* Master Feel */
  border-color: rgba(147,51,234,0.55);
  background:
    linear-gradient(135deg, rgba(147,51,234,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(6) > summary { /* Scenes */
  border-color: rgba(59,130,246,0.55);
  background:
    linear-gradient(135deg, rgba(59,130,246,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(7) > summary { /* Presets */
  border-color: rgba(236,72,153,0.55);
  background:
    linear-gradient(135deg, rgba(236,72,153,0.12), rgba(255,255,255,0.98));
}
.menus details.menu:nth-of-type(8) > summary { /* Export & Share */
  border-color: rgba(148,163,184,0.7);
  background:
    linear-gradient(135deg, rgba(148,163,184,0.10), rgba(255,255,255,0.98));
}
details.menu > summary:hover {
  box-shadow: 0 7px 18px rgba(15,23,42,0.20);
  transform: translateY(-1px);
}
.details.menu .groupBody {
  position: absolute;
  top: 100%;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px;
  min-width: 260px;
  max-width: min(90vw, 880px);
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(22,163,74,0.06), transparent 70%),
    radial-gradient(420px 260px at 100% 0%, rgba(234,88,12,0.06), transparent 70%),
    #fefcf8;
  /* remove hard card border, rely on shadow and color */
  border: none;
  border-radius: 14px;
  box-shadow: 0 18px 32px rgba(15,23,42,0.20);
  z-index: 100;
}

/* Each control inside dropdown gets its own card-like backing */
details.menu .groupBody .inline {
  flex: 1 1 210px;
  padding: 6px 10px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,251,0.98));
  /* remove inner borders */
  border: none;
  font-size: 12px;
  box-shadow: 0 2px 7px rgba(15,23,42,0.10);
}

/* Transport */
.transportBar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 7px 4px 5px;
  border-top: 1px solid rgba(209,213,219,0.25);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.97), rgba(253,246,236,0.98));
}

/* Make primary poem buttons feel more “fun” and distinct */
.transportBar button:first-of-type {
  background:
    linear-gradient(135deg, #16a34a, #22c55e);
  color: #f9fafb;
  border-color: rgba(22,163,74,0.85);
  box-shadow: 0 6px 14px rgba(22,163,74,0.35);
}
.transportBar button:first-of-type:hover {
  background:
    linear-gradient(135deg, #15803d, #22c55e);
}
.transportBar button:nth-of-type(2) {
  background:
    linear-gradient(135deg, #f97316, #fb923c);
  color: #111827;
  border-color: rgba(234,88,12,0.85);
  box-shadow: 0 6px 14px rgba(234,88,12,0.35);
}
.transportBar button:nth-of-type(3),
.transportBar button:nth-of-type(4),
.transportBar button:nth-of-type(5) {
  background:
    linear-gradient(135deg, #f4f4f5, #ffffff);
}

/* Layout */
.layout {
  display: flex;
  flex-direction: column;
  /* allow the poem area to size naturally, scroll the page if needed */
  min-height: calc(100vh - 140px);
}

.sidebar {
  display: none;
}

.stage {
  position: relative;
  background:
    radial-gradient(900px 520px at 85% 0%, rgba(15,23,42,0.03), transparent 65%),
    radial-gradient(780px 520px at 10% 6%, rgba(22,163,74,0.08), transparent 70%),
    linear-gradient(180deg, #fdf7ef 0%, #fdf7ef 100%);
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.poemContainer {
  width: 100%;
  max-width: 760px;
  margin: 14px auto 18px;
  padding: 10px 14px 18px;
}

/* Three-column track layout */
.poemGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: flex-start;
}

.poemColumn {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.poemColumnTitle {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 6px;
}

/* Give the poem block a playful “notebook” frame instead of generic border */
.poem {
  margin: 0;
  white-space: pre-wrap;
  font-family: "Literata", "Georgia", "Times New Roman", serif;
  font-size: 15.5px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: #111827;
  padding: 24px 24px 26px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(255,251,242,0.99)),
    repeating-linear-gradient(
      180deg,
      rgba(209,213,219,0.14) 0 1px,
      transparent 1px 24px
    );
  box-shadow:
    0 18px 40px rgba(15,23,42,0.26),
    0 0 0 1px rgba(255,255,255,0.92);
  position: relative;
}
.poem::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(234,88,12,0.35), rgba(22,163,74,0.4));
  opacity: 0.9;
}

/* Combined output is only used for export actions */
.poemCombined {
  display: none;
}

/* Generic details.group styles (kept for structural compatibility) */
details.group {
  /* remove obvious borders so they fade into the notebook */
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.96);
  margin-bottom: 8px;
}
details.group > summary {
  cursor: pointer;
  list-style: none;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
details.group > summary::-webkit-details-marker {
  display: none;
}
details.group > summary::after {
  content: "▾";
  color: var(--muted);
}
details.group[open] > summary::after {
  content: "▴";
}
.groupBody {
  padding: 4px 8px 8px;
}

.inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin: 3px 0;
}
.inline input[type="text"] {
  flex: 1;
}

/* Controls */
button {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  background: rgba(255,255,255,0.98);
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
}
button:hover {
  background: radial-gradient(circle at 0 0, rgba(22,163,74,0.10), transparent 55%), #ecfdf3;
  border-color: var(--accent);
  box-shadow: 0 7px 18px rgba(15,23,42,0.18);
  transform: translateY(-1px);
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="range"] {
  appearance: none;
  width: 120px;
  height: 14px;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0 var(--val, 50%), #e5e7eb 0);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
  margin-top: -4px;
}
input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #e5e7eb;
}
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--accent);
}

select,
input[type="text"] {
  border-radius: 10px;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font-size: 12px;
  background: #fff;
}

/* Help panels */
.helpPanel {
  position: fixed;
  right: 10px;
  top: 78px;
  width: min(680px, calc(100vw - 20px));
  max-height: min(65vh, calc(100vh - 100px));
  overflow: auto;
  z-index: 1000;
  background:
    radial-gradient(420px 220px at 0% 0%, rgba(22,163,74,0.09), transparent 70%),
    radial-gradient(420px 220px at 100% 0%, rgba(234,88,12,0.09), transparent 70%),
    #fdfaf4;
  border-radius: 14px;
  /* drop the heavy border, rely on color + shadow */
  border: none;
  box-shadow: 0 18px 40px rgba(15,23,42,0.26);
}
.helpPanel[hidden] {
  display: none;
}
.helpContent {
  padding: 10px;
  font-size: 12px;
}
.helpContent h2 {
  font-size: 14px;
  margin: 4px 0 6px;
}
.helpContent p {
  margin: 2px 0 8px;
  color: #374151;
}

/* Status bar */
.statusBar {
  position: fixed;
  bottom: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 8px 20px rgba(15,23,42,0.20);
  font-size: 11px;
  color: #111827;
  z-index: 1000;
}
.statusBar .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Footer */
.foot {
  border-top: 1px solid rgba(209,213,219,0.35);
  padding: 8px 10px;
  font-size: 11px;
  color: var(--muted);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.98),
    rgba(253,246,236,0.98)
  );
}

/* Responsive */
@media (max-width: 900px) {
  .layout {
    min-height: auto;
  }
  .stage {
    min-height: 50vh;
  }
  .titlebar h1 {
    font-size: 18px;
  }
  .titleMain {
    font-size: 18px;
  }
  .titleTag {
    font-size: 10px;
  }
  .poemContainer {
    margin-top: 4px;
  }
  /* Stack tracks vertically on smaller screens */
  .poemGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  details.menu > summary {
    font-size: 10px;
    padding-inline: 10px;
  }
  /* stack track mixer cards on mobile */
  .trackQuick {
    flex-direction: column;
  }
  /* make motif bar a simple vertical stack on narrow screens */
  .motifBar {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }
  .motifBar .motifLabelBlock {
    grid-column: 1 / -1;
  }
}

/* existing menu styling already applies to the new Poet Styles menu */