/* Blocks design system — entry point. SPA: imported by assets/styles/base.css.
   SSR: emitted as /ds/blocks.css by vite.config.ts (dsBundlePlugin). */
/* ════════════════════════════════════════════════════════════════════════
   Blocks design system — TOKENS (single source of truth)
   docs/design-system.md · docs/plans/2026-09-27-minecraft-design-system.md

   Loaded by BOTH the Vue SPA (via assets/styles/base.css) and every SSR page
   (via /ds/blocks.css, emitted by vite.config.ts → dsBundlePlugin). This is
   the ONLY file allowed to contain raw colour literals (stylelint enforces).

   Section 1: role tokens — use these in new code.
   Section 2: legacy aliases — kept so un-migrated CSS keeps rendering; each
              maps onto a role. Do not use them in new code.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* ── Surfaces: deepslate page, stone panel, raised control, inset slot ── */
  --surface-0: #1C1C20;
  --surface-1: #2A2A2F;
  --surface-2: #3A3A40;
  --surface-3: #4A4A51;
  --surface-inset: #151518;

  /* ── Lines ── */
  --line: #000000;          /* outer block edge (panels, buttons, slots) */
  --line-strong: #6A6A72;   /* visible edge on hover / emphasis */
  --line-subtle: #3C3C43;   /* dividers inside a panel */

  /* ── Bevel (the Minecraft GUI edge). Hard 2px, never blurred. ── */
  --bevel-hi: rgba(255, 255, 255, 0.14);
  --bevel-lo: rgba(0, 0, 0, 0.45);
  /* The ONLY box-shadows allowed outside this file (stylelint): */
  --bevel-raised: inset 2px 2px 0 var(--bevel-hi), inset -2px -2px 0 var(--bevel-lo);
  --bevel-pressed: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi);
  --bevel-inset: inset 2px 2px 0 var(--bevel-lo), inset -2px -2px 0 var(--bevel-hi);

  /* ── Text ── */
  --text: #F4F4F5;
  --text-muted: #BDBDC5;

  /* ── The one accent: green = "you can act here" ── */
  --accent: #2F7A1F;          /* primary button / selected fill */
  --accent-pressed: #245F18;
  --accent-text: #7FD35E;     /* links and accent text on page surfaces */
  --on-accent: #FFFFFF;
  --hover-fg: #FFFF55;        /* Minecraft menu hover: text turns yellow */
  --on-accent-hover: #FFFF55;

  /* ── Feedback ── */
  --danger: #FF6B6B;          /* danger text/icon */
  --danger-bg: #A1262B;       /* danger fill (on-accent text) */
  --success: var(--accent-text);
  --heart: #FF5D6C;

  /* ── Focus: MC yellow ring + black halo (WCAG 2.4.11, 3:1 on every surface) ── */
  --focus: #FFFF55;
  --focus-halo: #000000;

  /* ── Edition dots (badge dot only — never a fill) ── */
  --edition-java: #6CC04A;
  --edition-bedrock: #A6ADB4;

  /* ── Disabled (colour, never opacity: F-17) ── */
  --disabled-bg: #2E2E34;
  --disabled-fg: #A3A3AD;
  --disabled-border: #4A4A52;

  /* ── Dark floating map overlays — dark in BOTH themes ── */
  --on-overlay: #FFFFFF;
  --on-overlay-muted: #C8CCD2;

  /* ── Scrim behind modals/drawers ── */
  --scrim: rgba(0, 0, 0, 0.7);

  /* ── MC item tooltip ── */
  --mc-tooltip-bg: #100010F0;
  --mc-tooltip-border: #5000A0;
  --mc-tooltip-border-inner: #28007F;
  --mc-tooltip-edge: 0 0 0 1px var(--mc-tooltip-border-inner) inset;

  /* ── Fonts: exactly two families ── */
  --font-display: 'Monocraft', ui-monospace, monospace;
  --font-sans: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ── Type scale: 6 steps. Monocraft only at 16/24/32. ── */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --lh-ui: 1.4;
  --lh-prose: 1.65;
  --measure: 70ch;

  /* ── Spacing: 4px grid ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── Layout ── */
  --content-max: 1100px;
  --page-padding: 20px;
  --card-padding: 16px;
  --section-gap: 16px;
}

html[data-theme="light"] {
  color-scheme: light;
  /* Birch / sandstone */
  --surface-0: #EAE6DA;
  --surface-1: #F7F5EE;
  --surface-2: #DDD8CA;
  --surface-3: #CFC9B8;
  --surface-inset: #E2DDD0;

  --line: #2B2720;
  --line-strong: #6E6656;
  --line-subtle: #C9C3B3;

  --bevel-hi: rgba(255, 255, 255, 0.75);
  --bevel-lo: rgba(0, 0, 0, 0.18);

  --text: #1A1712;
  --text-muted: #4A4438;

  --accent: #2F7A1F;
  --accent-pressed: #245F18;
  --accent-text: #1F5E14;
  --on-accent: #FFFFFF;
  --hover-fg: #1A1712;
  --on-accent-hover: #FFFF55;

  --danger: #A1262B;
  --danger-bg: #A1262B;
  --heart: #B3121F;

  --focus: #1A1712;
  --focus-halo: #FFFFFF;

  --edition-java: #2F7A1F;
  --edition-bedrock: #5E6670;

  --disabled-bg: #E0DED8;
  --disabled-fg: #5C5C63;
  --disabled-border: #B9B7B0;
}

/* Mobile: only the large steps tighten; the small steps never go below the
   desktop floor (F-02). */
@media (max-width: 768px) {
  :root {
    --text-xl: 20px;
    --text-2xl: 24px;
    --page-padding: 12px;
    --card-padding: 12px;
    --section-gap: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Section 2 — LEGACY ALIASES (deprecated; migrate to role tokens)
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--surface-0);
  --bg-card: var(--surface-1);
  --bg-input: var(--surface-2);
  --bg-hover: var(--surface-3);
  --header-top: var(--surface-1);
  --footer-bottom: var(--surface-inset);
  --border: var(--line);
  --border-light: var(--line-strong);
  --border-subtle: var(--line-subtle);
  --text-dim: var(--text-muted);
  --text-shadow: transparent;
  --heading-shadow: none;
  --accent-shadow: none;
  --readable-shadow: none;

  /* Accents collapse onto the one accent + text (principle 1 and 2). */
  --gold: var(--text);
  --on-gold: var(--surface-0);
  --green: var(--accent-text);
  --green-dark: var(--accent);
  --green-darker: var(--accent-pressed);
  --aqua: var(--accent-text);
  --red: var(--danger);
  --badge-java-bg: var(--surface-2);
  --badge-java-fg: var(--text);
  --badge-bedrock-bg: var(--surface-2);
  --badge-bedrock-fg: var(--text);

  /* Shadows become bevels. */
  --shadow-sm: var(--bevel-raised);
  --shadow-md: var(--bevel-raised);
  --shadow-lg: var(--bevel-raised);
  --shadow-xl: var(--bevel-raised);
  --shadow-inset: var(--bevel-inset);
  --shadow-active: var(--bevel-pressed);

  /* Fonts: one sans for every reading/operating role. */
  --font-heading: var(--font-display);
  --font-mono: var(--font-display);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-numeric: var(--font-sans);
  --letter-spacing: 0;

  /* Type: old 12-step scale folded onto the 6 steps. */
  --fs-3xs: var(--text-xs);
  --fs-2xs: var(--text-xs);
  --fs-xs: var(--text-sm);
  --fs-sm: var(--text-sm);
  --fs-md: var(--text-md);
  --fs-base: var(--text-md);
  --fs-lg: var(--text-md);
  --fs-xl: var(--text-lg);
  --fs-2xl: var(--text-xl);
  --fs-3xl: var(--text-2xl);
  --fs-icon: 44px;
  --fs-display-sm: 16px;
  --fs-display-md: 24px;
  --fs-display-lg: 32px;

  /* Spacing: old 2px-step scale snapped to the 4px grid. */
  --sp-1: var(--space-1);
  --sp-2: var(--space-1);
  --sp-3: var(--space-2);
  --sp-4: var(--space-2);
  --sp-5: var(--space-3);
  --sp-6: var(--space-3);
  --sp-7: var(--space-4);
  --sp-8: var(--space-4);
  --sp-9: var(--space-5);
  --sp-10: var(--space-6);
  --sp-11: var(--space-7);
  --sp-12: 40px;
  --chip-padding-y: var(--space-2);
  --chip-padding-x: var(--space-3);
  --btn-padding-y: var(--space-2);
  --btn-padding-x: var(--space-4);
}

@media (max-width: 768px) {
  :root { --fs-display-lg: 24px; }
}

/* Blocks design system — FONTS. Exactly two families (SIL OFL 1.1, self-hosted):
   Monocraft = display (logo, h1, h2, seed values), Noto Sans = everything else. */

@font-face {
  font-family: 'Noto Sans';
  src: url('/fonts/NotoSans-latin-wght.woff2') format('woff2-variations'),
       url('/fonts/NotoSans-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: 'Noto Sans';
  src: url('/fonts/NotoSans-latin-ext-wght.woff2') format('woff2-variations'),
       url('/fonts/NotoSans-latin-ext-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

@font-face {
  font-family: 'Monocraft';
  src: url('/fonts/Monocraft-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monocraft';
  src: url('/fonts/Monocraft-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Blocks design system — BASE (element defaults shared by SPA and SSR). */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Blocky: no rounded corners anywhere. */
*, *::before, *::after { border-radius: 0 !important; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.5;
  background: var(--surface-0);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body * { text-shadow: none !important; }

/* ── Hierarchy by size, never by colour: headings are --text. ──
   Pixel font only on h1/h2, only at crisp sizes. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}
h1 { font-size: var(--fs-display-lg); line-height: 1.25; }
h2 { font-size: var(--fs-display-md); line-height: 1.3; }
h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
}
h3 { font-size: var(--text-md); }

button, input, select, textarea { font-family: var(--font-sans); }
button, select, input, label, summary, nav { line-height: var(--lh-ui); }

/* Links: accent text; yellow/strong on hover (Minecraft menu behaviour).
   :where() keeps specificity at zero so components can override. */
:where(a) { color: var(--accent-text); text-underline-offset: 2px; }
:where(a:hover) { color: var(--hover-fg); }
/* WCAG 1.4.1: links inside running text are underlined, not colour-only. */
:where(p, li, dd, td) > :where(a:not([class])) { text-decoration: underline; }

/* The seed is the one datum in the pixel face (monospace → digits line up). */
.seed-value {
  font-family: var(--font-display);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* Inline code (usually a seed or command in guide prose) uses the pixel face:
   it is monospace, so no third font family is ever needed. */
code, kbd, samp { font-family: var(--font-display); font-size: 0.95em; }
pre { font-family: var(--font-sans); }

/* Every other number: sans + tabular figures. */
.numeric { font-variant-numeric: tabular-nums; }

/* Pixelated rendering only for map tiles, pixel icons and the logo — NOT global. */
.map-canvas,
.logo-icon,
.qf-icon,
.chip-icon,
.ed-icon-svg,
.dist-icon,
.about-avatar,
.theme-icon,
.insight-icon,
.struct-icon,
.sm-icon,
.card-thumb img,
.seed-thumb img,
.mc-slot img,
.mc-slot canvas,
.mc-tag__icon,
.mc-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

button,
a,
select,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  /* Two-tone ring: --focus against the page, --focus-halo against the control,
     so the indicator clears 3:1 on every surface in both themes (WCAG 2.4.11). */
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

/* Skip link — first tab stop on every page (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 10000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  color: var(--text);
  border: 2px solid var(--focus);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus,
.skip-link:focus-visible { top: var(--space-2); }
main:focus { outline: none; box-shadow: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prose containers get a comfortable measure. Opt in with .prose. */
.prose { max-width: var(--measure); }
.prose p,
.prose li { line-height: var(--lh-prose); }
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { margin-top: var(--space-7); font-size: var(--fs-display-sm); }
.prose h3 { margin-top: var(--space-5); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose h1, .prose h2, .prose h3 { max-width: none; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface-0); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border: 1px solid var(--line-subtle); }

/* ════════════════════════════════════════════════════════════════════════
   Blocks design system — COMPONENTS (global, `mc-` prefixed)
   Shared verbatim by the Vue primitives in components/ui/ and the SSR
   templates. The Vue primitives render exactly these classes and carry no
   visual CSS of their own, so an SSR page and the SPA can never drift.
   Reference: docs/design-system.md
   ════════════════════════════════════════════════════════════════════════ */

/* ── Layout ─────────────────────────────────────────────────────────────── */
.mc-container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.mc-stack > * + * { margin-top: var(--space-4); }
.mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}
.mc-grid--dense { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.mc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ── Page header: h1 + one lead line. No eyebrow. ───────────────────────── */
.mc-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-6) 0 var(--space-6);
}
.mc-page-header__title { margin: 0; }
.mc-page-header__lead {
  margin-top: var(--space-2);
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--text-md);
}
.mc-page-header__meta { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-sm); }
.mc-page-header__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
@media (max-width: 700px) {
  .mc-page-header { flex-direction: column; margin-top: var(--space-4); }
  .mc-page-header--compact .mc-page-header__lead,
  .mc-page-header--compact .mc-page-header__meta { display: none; }
}

/* ── Section: h2 + optional one-line description ───────────────────────── */
.mc-section { margin-block: var(--space-7); }
.mc-section:first-child { margin-top: 0; }
.mc-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.mc-section__title { margin: 0; font-size: var(--fs-display-md); }
.mc-section__title--sm { font-size: var(--fs-display-sm); }
.mc-section__desc { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--text-md); }

/* ── Surfaces ──────────────────────────────────────────────────────────── */
/* Panel: the only raised container. */
.mc-panel {
  background: var(--surface-1);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
  color: var(--text);
}
.mc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  border-bottom: 2px solid var(--line-subtle);
}
.mc-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  color: var(--text);
}
.mc-panel__actions { display: flex; gap: var(--space-2); }
.mc-panel__body { padding: var(--card-padding); }
.mc-panel__body > * + * { margin-top: var(--space-3); }

/* Slot: inset well for inputs, maps and thumbnails (inventory slot). */
.mc-slot {
  display: block;
  background: var(--surface-inset);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-inset);
  line-height: 0;
  overflow: hidden;
}
.mc-slot img,
.mc-slot canvas { display: block; width: 100%; height: auto; }

/* ── Button ────────────────────────────────────────────────────────────── */
.mc-btn,
.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-2);
  color: var(--text);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.mc-btn:hover:not(:disabled):not([aria-disabled='true']),
.pixel-btn:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--surface-3);
  color: var(--hover-fg);
}
.mc-btn:active:not(:disabled):not([aria-disabled='true']),
.pixel-btn:active:not(:disabled):not([aria-disabled='true']) {
  box-shadow: var(--bevel-pressed);
}
.mc-btn--primary { background: var(--accent); color: var(--on-accent); }
.mc-btn--primary:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--accent);
  color: var(--on-accent-hover);
}
.mc-btn--danger { background: var(--danger-bg); color: var(--on-accent); }
.mc-btn--danger:hover:not(:disabled):not([aria-disabled='true']) {
  background: var(--danger-bg);
  color: var(--on-accent-hover);
}
.mc-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--text-muted);
}
.mc-btn--ghost:hover:not(:disabled):not([aria-disabled='true']) { background: var(--surface-2); }
.mc-btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.mc-btn--md { font-size: var(--text-sm); }
.mc-btn--icon { padding: 0; width: 44px; }
.mc-btn--block { display: flex; width: 100%; }
/* Toggle buttons: selected = accent fill + ✓ (never colour-only). */
.mc-btn[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); }
.mc-btn[aria-pressed='true']::before { content: '\2713'; content: '\2713' / ''; font-weight: 700; }
.mc-btn:disabled,
.mc-btn[aria-disabled='true'],
.pixel-btn:disabled,
.pixel-btn[aria-disabled='true'] {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  border-color: var(--disabled-border);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Card: <article> + one stretched link; real buttons sit above it. ──── */
.mc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
  color: var(--text);
  min-width: 0;
}
.mc-card:hover { background: var(--surface-2); }
/* Keyboard focus on the stretched link outlines the whole card. */
.mc-card:has(.mc-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.mc-card__media { padding: var(--space-2) var(--space-2) 0; }
.mc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--card-padding);
  flex: 1;
  min-width: 0;
}
.mc-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.mc-card__meta { color: var(--text-muted); font-size: var(--text-sm); }
/* Badges keep their own width inside the column-flex card body. */
.mc-card__body > .mc-badge { align-self: flex-start; }
.mc-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--card-padding);
  border-top: 2px solid var(--line-subtle);
}
.mc-card__link { color: inherit; text-decoration: none; }
.mc-card__link:hover { color: inherit; }
.mc-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mc-card :where(button:not(.mc-card__link), .mc-above) { position: relative; z-index: 2; }
/* A card whose action is a button (not a navigation) uses the same stretched
   pattern; strip the UA button chrome so it reads as the card title. */
button.mc-card__link {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}
/* Link card: title + one line of description, no media. */
.mc-card--link .mc-card__title { color: var(--accent-text); }
.mc-card--link:hover .mc-card__title { color: var(--hover-fg); }

/* ── Badge: neutral label, optional edition dot ────────────────────────── */
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--line-subtle);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.mc-badge__dot { width: 8px; height: 8px; flex-shrink: 0; background: currentColor; }
.mc-badge--java .mc-badge__dot { background: var(--edition-java); }
.mc-badge--bedrock .mc-badge__dot { background: var(--edition-bedrock); }
.mc-badge--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Chip: toggle filter / removable filter / quiet link ───────────────── */
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  color: var(--text);
  border: 2px solid var(--line-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}
.mc-chip:hover { border-color: var(--line-strong); color: var(--hover-fg); }
.mc-chip.is-active,
.mc-chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent-pressed);
  color: var(--on-accent);
}
.mc-chip.is-active::before,
.mc-chip[aria-pressed='true']::before {
  content: '\2713';
  content: '\2713' / '';
  font-weight: 700;
}
.mc-chip--quiet.is-active::before { content: none; }
.mc-chip--quiet {
  background: none;
  border-color: transparent;
  color: var(--accent-text);
  text-decoration: underline;
  padding-inline: var(--space-2);
}
.mc-chip-group { display: inline-flex; }
.mc-chip-group > .mc-chip:first-child { border-right: none; }
.mc-chip__remove { padding: 0; font-size: var(--text-lg); line-height: 1; }
.mc-chip__remove:hover { color: var(--danger); border-color: var(--danger); }
.mc-chip__icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Structure tag: icon + name + distance (neutral; icon carries colour) ─ */
.mc-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--surface-inset);
  border: 1px solid var(--line-subtle);
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: nowrap;
}
.mc-tag__icon { width: 16px; height: 16px; flex-shrink: 0; }
.mc-tag__value { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mc-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; }

/* ── Seed value + copy ─────────────────────────────────────────────────── */
.mc-seed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}
.mc-seed__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  color: var(--text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: none;
}
.mc-seed--lg .mc-seed__value { font-size: var(--fs-display-md); }

/* ── Stat list: label/value rows ───────────────────────────────────────── */
.mc-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.mc-stats > dt,
.mc-stats > dd {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-subtle);
}
.mc-stats > dt { color: var(--text-muted); font-size: var(--text-sm); }
.mc-stats > dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-left: var(--space-3);
}
.mc-stats > dt:last-of-type,
.mc-stats > dd:last-of-type { border-bottom: none; }

/* ── Form fields ───────────────────────────────────────────────────────── */
.mc-field { display: grid; gap: var(--space-1) var(--space-3); }
.mc-field--inline {
  grid-template-columns: minmax(88px, max-content) 1fr;
  grid-template-areas: 'label control' '. hint';
  align-items: center;
}
.mc-field--stacked { grid-template-columns: 1fr; grid-template-areas: 'label' 'control' 'hint'; }
.mc-field__label { grid-area: label; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
/* min-width: 0 is load-bearing: without it a wide control (MapControls' layer
   row) blows the grid column past the viewport instead of scrolling. */
.mc-field__control { grid-area: control; min-width: 0; }
.mc-field__hint { grid-area: hint; margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.mc-field__hint--notice { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .mc-field--inline { grid-template-columns: 1fr; grid-template-areas: 'label' 'control' 'hint'; }
}
.mc-input,
.mc-select {
  min-height: 44px;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-inset);
  color: var(--text);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-inset);
  font-family: var(--font-sans);
  font-size: var(--text-md);
}
.mc-input::placeholder { color: var(--text-muted); }
.mc-input--seed { font-family: var(--font-display); font-size: var(--fs-display-sm); }

/* Segmented control: a radiogroup rendered as joined buttons. Checked = accent
   fill + ✓ (never colour-only). */
.mc-segmented { display: inline-flex; flex-wrap: wrap; }
.mc-segmented > .mc-btn + .mc-btn { border-left: none; }
.mc-segmented > .mc-btn[aria-checked='true'] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--bevel-pressed);
}
.mc-segmented > .mc-btn[aria-checked='true']::before {
  content: '\2713';
  content: '\2713' / '';
  font-weight: 700;
}

/* ── Disclosure ────────────────────────────────────────────────────────── */
.mc-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.mc-disclosure > summary::-webkit-details-marker { display: none; }
.mc-disclosure > summary::before { content: '\25B8'; content: '\25B8' / ''; color: var(--text-muted); }
.mc-disclosure[open] > summary::before { content: '\25BE'; content: '\25BE' / ''; }
.mc-disclosure__body { padding: var(--space-2) 0 var(--space-3); }

/* ── Callout / empty state ─────────────────────────────────────────────── */
.mc-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--text-muted);
  border: 2px dashed var(--line-subtle);
}
.mc-note {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-inset);
  border-left: 4px solid var(--accent);
  color: var(--text);
}

/* ── Modal ─────────────────────────────────────────────────────────────── */
.mc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--scrim);
}
.mc-modal { width: min(680px, 100%); max-height: 85vh; overflow-y: auto; }
.mc-modal__head { position: sticky; top: 0; z-index: 1; background: var(--surface-1); }
.mc-modal__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--card-padding);
  background: var(--surface-1);
  border-top: 2px solid var(--line-subtle);
}
@media (max-width: 700px) {
  .mc-modal-backdrop { padding: 0; align-items: flex-end; }
  .mc-modal { max-height: 92vh; width: 100%; }
}

/* ── MC item tooltip ───────────────────────────────────────────────────── */
.mc-tooltip {
  background: var(--mc-tooltip-bg);
  border: 2px solid var(--mc-tooltip-border);
  box-shadow: var(--mc-tooltip-edge);
  padding: var(--space-1) var(--space-2);
  color: var(--on-overlay);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  pointer-events: none;
  white-space: nowrap;
}

/* ── Divider ───────────────────────────────────────────────────────────── */
.mc-divider { border: 0; border-top: 2px solid var(--line-subtle); margin: var(--space-6) 0; }

/* ── Ad slot frame: reserves space so ads never cause layout shift ─────── */
.mc-ad { margin-block: var(--space-6); min-height: 100px; }

/* ── Seed card ─────────────────────────────────────────────────────────── */
/* SeedCard.vue and the SSR partial api/src/templates/_seed_card.html render the
   same skeleton: .mc-card.mc-seed-card > media slot → .mc-seed (stretched link
   + Copy) → .mc-card__meta → .mc-tags (≤ 3 .mc-tag) → footer badges + like. */
.mc-seed-card .mc-card__meta,
.mc-seed-card .mc-tags { margin: 0; }
.mc-seed-card .mc-seed__copy { flex-shrink: 0; }
.mc-seed-card__badges { gap: var(--space-1); }
.mc-seed-card__likes {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   ── Site shell ──  header, nav, dropdown menus, footer, toast, loading.
   Rendered by BOTH web-vue/src/components/layout/* and
   api/src/templates/base.html (SSR uses native <details> for the menus).
   The legacy class names on the same elements (.site-nav-link,
   .tools-menu-trigger, .my-menu-trigger, .footer-link, …) are test/e2e hooks
   only — they carry no styles.
   ════════════════════════════════════════════════════════════════════════ */
.mc-header {
  /* Own stacking layer so the dropdowns open above sticky page bars (≤101),
     but below toasts (600) and modals (800). */
  position: relative;
  z-index: 200;
  background: var(--surface-1);
  border-bottom: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
}
.mc-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--page-padding);
}
.mc-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

/* Logo: the Monocraft wordmark. "Chunk" --text, "Scan" --accent-text. */
.mc-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  -webkit-font-smoothing: none;
}
.mc-logo:hover { color: var(--text); }
.mc-logo__icon { width: 32px; height: 32px; flex-shrink: 0; border: 2px solid var(--line); }
.mc-logo__accent { color: var(--accent-text); }

/* Primary nav: plain text links; current = --accent-text + 2px underline. */
.mc-nav { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.mc-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--lh-ui);
  text-decoration: none;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.mc-nav__link::-webkit-details-marker { display: none; }
.mc-nav__link:hover { background: var(--surface-2); color: var(--hover-fg); }
.mc-nav__link[aria-current='page'] {
  color: var(--accent-text);
  border-bottom-color: currentColor;
  font-weight: 600;
}
.mc-nav__link[aria-expanded='true'],
details[open] > .mc-nav__link { background: var(--surface-2); }
.mc-nav__caret { font-size: var(--text-xs); color: var(--text-muted); }

/* Dropdown menu (Tools, My stuff): a raised stone panel. */
.mc-menu-wrap { position: relative; }
.mc-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 50;
  min-width: 260px;
  padding: var(--space-2);
  background: var(--surface-1);
  border: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
  color: var(--text);
}
.mc-menu--end { left: auto; right: 0; }
.mc-menu__group + .mc-menu__group { margin-top: var(--space-2); }
.mc-menu__label {
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-1);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
}
.mc-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-2);
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mc-menu__item:hover { background: var(--surface-2); color: var(--hover-fg); }
.mc-menu__item:disabled { color: var(--disabled-fg); cursor: default; }
.mc-menu__item[aria-current='page'] {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mc-menu__item--more { color: var(--accent-text); }
.mc-menu__icon { width: 20px; flex-shrink: 0; text-align: center; }
.mc-menu__text { display: flex; flex-direction: column; min-width: 0; }
.mc-menu__desc { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.mc-menu__divider { border: 0; border-top: 2px solid var(--line-subtle); margin: var(--space-2) 0; }
.mc-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

/* Phones: logo + actions on row one, the nav becomes a scrollable second row,
   menus open as a bottom sheet. Nothing is hidden. */
@media (max-width: 640px) {
  .mc-header__inner { flex-wrap: wrap; row-gap: var(--space-1); }
  .mc-logo { font-size: var(--fs-display-sm); gap: var(--space-2); }
  .mc-nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mc-nav::-webkit-scrollbar { display: none; }
  .mc-nav > * { flex-shrink: 0; }
  .mc-menu {
    position: fixed;
    inset: auto 0 0 0;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* Footer: calm, muted links in sans-headed groups. */
.mc-footer {
  margin-top: var(--space-8);
  background: var(--surface-1);
  border-top: 2px solid var(--line);
  box-shadow: var(--bevel-raised);
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.mc-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-7) var(--page-padding) var(--space-6);
}
.mc-footer__ad { display: flex; justify-content: center; width: 100%; }
.mc-footer__groups {
  display: grid;
  /* 104px min: three columns on a 390px phone instead of two, which cut the
     mobile footer by ~150px; desktop still spreads the six groups in a row. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--space-6) var(--space-4);
}
.mc-footer__group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.mc-footer__heading {
  margin: 0 0 var(--space-1);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
}
.mc-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mc-footer__link:hover { color: var(--accent-text); text-decoration: underline; }
.mc-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 2px solid var(--line-subtle);
}
.mc-footer__brand { color: var(--text); font-weight: 600; }
.mc-footer__kofi-icon { width: 16px; height: 16px; color: var(--heart); }

/* Toast: a small stone panel with the accent edge, bottom right. */
.mc-toast {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 600;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-1);
  border: 2px solid var(--line);
  border-left: 4px solid var(--accent);
  box-shadow: var(--bevel-raised);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(80px);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.mc-toast.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* Loading: three square pixels. */
.mc-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
}
.mc-loading__dots { display: flex; gap: var(--space-2); }
.mc-loading__dots > span {
  width: 8px;
  height: 8px;
  background: var(--text-muted);
  animation: mc-loading-dot 1.2s steps(2, end) infinite;
}
.mc-loading__dots > span:nth-child(2) { animation-delay: 0.2s; }
.mc-loading__dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mc-loading-dot {
  0%, 80%, 100% { background: var(--line-subtle); }
  40% { background: var(--accent-text); }
}
.mc-loading__text { color: var(--text-muted); font-size: var(--text-sm); }
/* Header "My stuff" trigger on /liked or /my-seeds: accent text + underline. */
.mc-header__actions .mc-btn[aria-current='page'] {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Seed detail ──────────────────────────────────────────────────────────
   Shared by api/src/templates/seed_detail.html (SSR) and SeedDetailPage.vue /
   components/seed/SeedDetailSections.vue (SPA) so both render the same page.
   Layout only: every colour, font and bevel comes from the components above. */
/* SSR only: base.html's legacy `.content ul/ol/h2` margins out-rank single
   classes; neutralise them for this page's own lists and headings. */
.mc-sd :where(ul, ol, dl)[class] { margin: 0; }
.mc-sd .mc-section__head h2,
.mc-sd .mc-panel__head h2 { margin: 0; }
.mc-sd .mc-ad > .ssr-ad-slot { margin: 0; }
.mc-sd-badges { padding: var(--space-3) 0 0; list-style: none; }
.mc-sd-seedbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
}
.mc-sd-seedbar > .mc-seed { justify-content: flex-start; gap: var(--space-3); }
.mc-sd-map { max-width: 600px; }
.mc-sd-map .mc-slot img { aspect-ratio: 1 / 1; }
.mc-sd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) 0 var(--space-4);
  list-style: none;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.mc-sd-legend > li,
.mc-sd-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.mc-sd-legend svg { width: 16px; height: 16px; flex-shrink: 0; }
.mc-sd-glance { margin-block: var(--space-6); align-items: start; }
.mc-sd-glance .mc-disclosure { margin-top: var(--space-2); }
.mc-sd-empty { color: var(--text-muted); font-size: var(--text-sm); }
/* "What's nearby": one row per structure type, nearest first. */
.mc-sd-nearby { display: grid; gap: var(--space-2); list-style: none; padding: 0; }
.mc-sd-nearby > li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--space-2);
  align-items: baseline;
}
.mc-sd-nearby .mc-tag__icon { align-self: center; }
.mc-sd-nearby__all { display: block; color: var(--text-muted); font-size: var(--text-sm); }
/* Similar seeds: the whole card is one link (no nested controls). */
.mc-sd-related { list-style: none; padding: 0; }
.mc-sd-related > li { display: flex; }
.mc-sd-related .mc-card { flex: 1; }
.mc-sd-card-link { display: flex; flex-direction: column; flex: 1; }
.mc-sd-card-link .mc-card__media,
.mc-sd-card-link .mc-card__meta { display: block; }
.mc-sd-card-link .mc-slot img { aspect-ratio: 340 / 227; }
/* Mobile: one card eager, the rest behind a CSS-only checkbox toggle (the
   cards stay in the DOM; desktop shows them all and hides the toggle). */
.mc-sd-more-label { margin-top: var(--space-3); }
.mc-sd-more-toggle:focus-visible ~ .mc-sd-more-label {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}
@media (max-width: 700px) {
  /* Mobile layout budget (e2e/layout-budgets.spec.ts): the three fact panels
     are ~20 read-only rows; tighter rows keep them scannable without the
     page growing by a screen. Not interactive, so no touch-target floor. */
  .mc-sd-glance .mc-stats > dt,
  .mc-sd-glance .mc-stats > dd { padding-block: var(--space-1); }
  .mc-sd-related > li:nth-child(n + 2) { display: none; }
  .mc-sd-more-toggle:checked ~ .mc-sd-related > li { display: flex; }
  .mc-sd-more-toggle:checked ~ .mc-sd-more-label { display: none; }
}
@media (min-width: 701px) {
  /* The toggle checkbox goes too: a focusable control whose only label is
     display:none has no accessible name (axe "label"). */
  .mc-sd-more-label,
  .mc-sd-more-toggle { display: none; }
}
.mc-sd-faq > .mc-disclosure { border-bottom: 1px solid var(--line-subtle); }
.mc-sd-faq .mc-disclosure__body > p { max-width: var(--measure); color: var(--text-muted); }
.mc-sd-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-6); }
.mc-sd-cta__text { flex: 1 1 220px; }
.mc-sd-links { margin-block: var(--space-6); }
.mc-sd-links__title { font-weight: 600; margin-bottom: var(--space-1); }
/* A row of chips, not a bulleted list (the UA disc markers rendered as stray
   dots between chips, and the SSR list indent forced extra wrapping). */
.mc-sd-links > ul { list-style: none; margin: 0; padding: 0; }
/* SSR menus are native <details>: hide the disclosure triangle. */
.mc-header summary { list-style: none; }
.mc-header summary::-webkit-details-marker { display: none; }