/* Nick Studio: Cobblemon Rejects "Clean dark" house style, the same one the Discord
   bot's rendered cards use (infra/discord-bot/.../render/Theme.java): same surfaces,
   same single accent green, same footer line, same left accent bar on every card. Two
   font families: Inter for UI text, Monocraft (a Minecraft-style pixel face) for the
   hero name, presets and chat/tab previews. One accent colour; the only multi-coloured
   things on the page are the player's own name and the preset cards. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Monocraft (SIL OFL 1.1, IdreesInc/Monocraft): a monospaced, Minecraft-styled pixel
   face, self-hosted from public/fonts/OFL-monocraft.txt. Never Mojang's own font. Four
   static weights (Monocraft has no variable build), matched to real bold/italic faces so
   the browser never has to synthesise a slant on blocky pixel letterforms. */
@font-face {
  font-family: 'Monocraft';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monocraft-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Monocraft';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/monocraft-bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Monocraft';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/monocraft-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Monocraft';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/monocraft-bold-italic.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  /* Fixed brand tokens, pinned to Theme.java so the site matches the Discord cards
     exactly: BACKGROUND #1E1F22, SURFACE #2B2D31, TEXT #F2F3F5, MUTED #B5BAC1,
     ACCENT #5AC54F. Kept as plain hex rather than a converted oklch() so the match is
     exact and verifiable byte for byte, not approximated through a colour-space round trip. */
  --bg: #1E1F22;
  --surface: #2B2D31;
  --surface-raised: #313338;
  --surface-sunken: #17181A;
  --line: #3A3C41;
  --line-soft: #313338;

  --text: #F2F3F5;
  --muted: #B5BAC1;

  --accent: #5AC54F;
  --accent-strong: #4CAE42;
  --accent-ink: #12190F;

  /* One small semantic tone outside the brand palette, for the low-contrast preview
     hint only: not decoration, a status signal (the kind Discord's own dark UI also
     keeps separate from its single brand accent). */
  --warn: #F0B232;

  --radius-lg: 16px;
  --radius: 10px;
  --radius-sm: 7px;
  --gap: clamp(0.9rem, 2vw, 1.35rem);
  --gutter: 16px;
  --accent-bar: 4px;

  /* Shared by .topbar and .stage so the header and the content column always line up.
     Widened in the min-width layout blocks near the end of this file; the phone value
     here (matching today's single centred column) is the default. */
  --container-max: 680px;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel-font: 'Monocraft', ui-monospace, "Cascadia Code", monospace;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* Several rules below set `display` on these elements directly (.editor, .state-card
   variants), which in the cascade otherwise outranks the UA stylesheet's plain
   `[hidden] { display: none }` (equal specificity, author beats user-agent). Force it
   back so toggling the `hidden` attribute from app.js actually hides the section. */
[hidden] { display: none !important; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* Faint accent presence behind the page, the only place the green appears as a wash
   rather than a hard edge. Fixed, unanimated, cheap. */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(760px 420px at 15% -10%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 60%),
    var(--bg);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Topbar ----------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: clamp(1.1rem, 3vw, 1.8rem) var(--gutter) 0.4rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Hidden by default (and whenever #editor itself is hidden, via the `hidden` attribute
   app.js keeps in step); shown only from 1024px up, see the wide-layout block at the
   bottom of this file. */
.topbar-actions {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

/* The network logo is the same 64px server-list icon players see in Minecraft
   (infra/velocity/server-icon.png); it is a shaded render, not pixel art, so it is
   scaled smoothly rather than pixelated. */
.brand-mark {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 10px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.15; }

.brand {
  margin: 0;
  font-size: clamp(1.3rem, 3.6vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand-sub {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* --- Stage / state cards ------------------------------------------------------------ */

.stage {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 1.5rem) var(--gutter) clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.state-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: var(--accent-bar) solid var(--accent);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 6vw, 2.75rem) clamp(1.4rem, 5vw, 2.25rem);
  text-align: center;
  margin-top: clamp(1rem, 8vw, 3rem);
}

.state-card h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
}

.state-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.state-card code {
  font-family: var(--mono);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.1em 0.45em;
  color: var(--accent);
}

/* --- Editor layout -------------------------------------------------------------------- */

.editor {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Below 768px these wrappers are transparent: their panels flow as direct children of
   .editor, in source order, exactly as if the wrappers were not there at all. This is
   what keeps the phone layout byte-for-byte the same while still letting the min-width
   blocks near the end of this file turn each wrapper into a real column or footer row. */
.col, .editor-meta {
  display: contents;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(0.9rem, 2.5vw, 1.25rem);
}

.panel h2 {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.panel-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.panel-head-row h2 { margin: 0; }

.hint {
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  color: var(--muted);
}

/* --- Hero: the big editable canvas ----------------------------------------------------- */

.hero-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  border-left: var(--accent-bar) solid var(--accent);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: clamp(1.3rem, 4vw, 2.2rem) clamp(1rem, 4vw, 1.8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* A soft glow behind the hero, tinted to the first colour of the current style (set as
   --hero-glow on .hero-card itself via the CSSOM in app.js; a pseudo-element reads a
   custom property from its real host element even though it has no DOM node of its own). */
.hero-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(closest-side, var(--hero-glow, var(--accent)), transparent 70%);
  opacity: 0.20;
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.preview-label {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
}

.hero-text {
  position: relative;
  z-index: 1;
  font-family: var(--pixel-font);
  font-size: clamp(1.9rem, 8vw, 4rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
  word-break: break-word;
  max-width: 100%;
}
.hero-text.is-bold { font-weight: 700; }
.hero-text.is-italic { font-style: italic; }

.hero-letter {
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.1s ease, background 0.12s ease;
}
.hero-letter:hover { background: rgba(255, 255, 255, 0.08); }
.hero-letter:active { transform: translateY(1px); }
.hero-letter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.gradient-bar-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  padding-block: 0.6rem;
}

.gradient-bar {
  height: 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.gradient-handles {
  position: relative;
  height: 0;
}

/* Native colour inputs, restyled circular so they read as draggable-looking "handles"
   even though position is fixed (see app.js: stops are evenly spaced, not draggable).
   The swatch pseudo-elements are the standard cross-browser hook for this. */
.gradient-handle {
  position: absolute;
  top: -1.55rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 2px solid var(--text);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.gradient-handle::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
.gradient-handle::-webkit-color-swatch { border: none; border-radius: 50%; }
.gradient-handle::-moz-color-swatch { border: none; border-radius: 50%; }
.gradient-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.contrast-warning {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--warn);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.contrast-warning::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}

/* --- Mode switch --------------------------------------------------------------------- */

.mode-switch {
  display: flex;
  gap: 0.4rem;
}

.mode-btn {
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mode-btn:hover { border-color: var(--muted); color: var(--text); }
.mode-btn:active { transform: translateY(1px); }
.mode-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mode-btn[aria-checked="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* --- Colours panel: stepper, tools, rows ------------------------------------------------ */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.stepper-btn {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.stepper-btn:hover:not(:disabled) { border-color: var(--accent); }
.stepper-btn:active:not(:disabled) { transform: translateY(1px); }
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stepper-value {
  min-width: 1.4rem;
  text-align: center;
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0.9rem;
}

.tool-btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tool-btn:hover { border-color: var(--accent); color: var(--text); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stop-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.4rem;
  transition: border-color 0.15s ease;
}
/* The hero highlights a letter's colour row this way when clicked in letters mode
   (app.js focuses the row's native picker; :focus-within lights the whole row). */
.stop-row:focus-within { border-color: var(--accent); }

.stop-hex {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.5rem 0.4rem;
  border: none;
  border-radius: 6px;
  outline: none;
}

.stop-row input[type="color"] {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  cursor: pointer;
  flex: none;
}

.remove-stop {
  flex: none;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.remove-stop:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.remove-stop:disabled { opacity: 0.35; cursor: not-allowed; }
.remove-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ghost-btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.ghost-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ghost-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Presets: a gallery of cards, each a small hero of its own --------------------------- */

.preset-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
}

.preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.preset-card:hover { border-color: var(--muted); background: var(--surface-raised); }
.preset-card:active { transform: translateY(1px); }
.preset-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.preset-card.is-active { border-color: var(--accent); background: var(--surface-raised); }

.preset-name {
  font-family: var(--pixel-font);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.preset-dots {
  display: flex;
  gap: 0.25rem;
}

.preset-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Toggles ------------------------------------------------------------------------ */

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.8rem, 3vw, 1.6rem);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--muted);
  user-select: none;
}

.switch input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}

.switch-track {
  width: 2.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex: none;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--accent);
  border-color: var(--accent);
}
.switch input:checked + .switch-track::after {
  transform: translateX(1rem);
  background: var(--accent-ink);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch-label { color: var(--text); font-weight: 600; }

.speed-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.speed-control input[type="range"] {
  accent-color: var(--accent);
  width: clamp(6rem, 20vw, 9rem);
}

/* --- Live preview: real Minecraft-style chat/tab rows, not canvas ----------------------- */

.preview-panel .hint { margin: 0.6rem 0 0; }

.mc-chat, .mc-tab-row {
  margin: 0;
  font-family: var(--pixel-font);
  font-size: 1.1rem;
  padding: 0.6rem 0.75rem;
  background: rgba(8, 9, 11, 0.62);
  border: 1px solid var(--line);
}
.mc-chat { border-radius: var(--radius) var(--radius) 4px 4px; }
.mc-tab-row {
  border-top: none;
  border-radius: 4px 4px var(--radius) var(--radius);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mc-rank { color: #8E9297; }
.mc-colon { color: var(--text); }
.mc-msg { color: #DBDEE1; }
.mc-name.is-bold { font-weight: 700; }
.mc-name.is-italic { font-style: italic; }

.mc-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.anim-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* --- Actions ------------------------------------------------------------------------ */

.actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.primary-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.primary-btn:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.primary-btn:active:not(:disabled) { transform: translateY(1px); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.primary-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.status {
  margin: 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}
.status[data-tone="ok"] { color: var(--accent); }
.status[data-tone="error"] { color: var(--warn); }

.footer {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.footnote {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.link-btn {
  display: block;
  margin: 0.4rem auto 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.link-btn:hover { color: var(--text); text-decoration-color: currentColor; }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Motion --------------------------------------------------------------------------- */
/* The tab-list preview above renders the actual in-game animation the player is
   configuring, so it keeps running under reduced motion; everything else in the UI is a
   plain state change (colour/transform) with no decorative animation to suppress. */
@media (prefers-reduced-motion: reduce) {
  .mode-btn, .ghost-btn, .tool-btn, .stepper-btn, .preset-card, .primary-btn,
  .switch-track, .switch-track::after, .hero-letter {
    transition: none;
  }
}

/* --- Responsive: phone-first, no horizontal scroll at any width ----------------------- */

@media (max-width: 480px) {
  .toggle-row { gap: 0.9rem 1.2rem; }
  .actions { flex-direction: column; }
  .actions .primary-btn, .actions .ghost-btn { width: 100%; text-align: center; }
  .preset-list { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
}

/* --- Wide layout: tablet two-column fallback (768px up) --------------------------------
   Colours and the live previews stack in the left column, presets take the right column.
   Below this width .col/.editor-meta stay display:contents (set earlier in this file), so
   nothing here changes anything under 768px: the phone layout is untouched. */

@media (min-width: 768px) {
  :root { --container-max: 920px; }

  .editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero     hero"
      "colours  presets"
      "previews presets"
      "meta     meta";
    align-items: start;
    gap: var(--gap);
  }

  .hero-card { grid-area: hero; }
  .col-colours { grid-area: colours; }
  .col-presets { grid-area: presets; }
  .col-previews { grid-area: previews; }
  .editor-meta { grid-area: meta; }

  .col, .editor-meta {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    /* Without this a flex/grid item defaults to the height of its content, which is fine
       here, but it also stops that content (the preset gallery below) from ever shrinking
       enough for its own overflow:auto to kick in instead of just growing the row. */
    min-height: 0;
  }
}

/* --- Wide layout: desktop three-column grid (1024px up) --------------------------------
   Hero spans the top; Colours, the live previews and Presets sit side by side underneath,
   all starting on the same grid row so the three read as one tool. Save/Reset/Log out move
   into the sticky header (the .topbar-actions group in index.html, wired in app.js) so they
   stay visible while the columns scroll; the copies near the bottom of the form are hidden
   so there is exactly one focusable Save/Reset/Log out at this width. */

@media (min-width: 1024px) {
  :root { --container-max: 1240px; }

  .editor {
    grid-template-columns: 1.05fr 1fr 1fr;
    grid-template-areas:
      "hero    hero     hero"
      "colours previews presets"
      "meta    meta     meta";
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-block: 0.85rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
  }

  .topbar-actions { display: flex; }

  /* The header pair above is now the only Save/Reset/Log out on screen. */
  .editor-meta .actions,
  #logoutBtn {
    display: none;
  }

  /* Two columns of preset cards. The gallery scrolls inside its own panel once it runs
     past the height of the Colours/Live preview columns beside it, rather than stretching
     the whole row (and the page under it) to fit however many presets there are. */
  .col-presets .panel {
    display: flex;
    flex-direction: column;
    max-height: min(78vh, 46rem);
  }

  .col-presets .preset-list {
    grid-template-columns: repeat(2, 1fr);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 0.3rem;
  }
}