/* ═══════════════════════════════════════════════════════════════════════
   COMPONENT KIT — global tokens, reset, and shared shell architecture
   ───────────────────────────────────────────────────────────────────────
   Standalone reference kit. Every component HTML file loads only this
   stylesheet. Shared component chrome lives here; a page <style> block
   is only for specimen layout that is not part of the system.
   Prefer tokens (--space-*, --text-*, --radius-*, --shadow*) at the
   call site.
═══════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Spacing: compact additions + the original system scale. */
  --space-0125: 2px;
  --space-025:  4px;
  --space-05:   8px;
  --space-1:   12px;  --space-2: 24px;  --space-3: 30px;
  --space-4:   39px;  --space-5: 63px;  --space-6: 96px;

  /* Radius: 6px is the component default; 12px is reserved for larger surfaces. */
  --radius:      12px;
  --radius-sm:    6px;
  --radius-full: 9999px;

  /* Color. *-text tokens are the AA label colors (11–12px). Fills
     (--success, --warn, --error, --info) are borders, icons, and tint
     sources — not label paint. Soft is the badge (and error alert) fill.
     Wash is the lighter large-surface tint. *-border is the alert stroke.
     Mixes are opaque so badge and alert contrast does not depend on the parent.
     Info is the accent hue; do not add a second blue. */
  --bg:        #FAFAFA;   --surface:   #FFFFFF;
  --surface-2: #F2F2F2;
  --text:      #111416;   --text-2:    #666D7B;
  --border:    #8A8A8C;   --accent:    #1A7EAA;
  --accent-hover: #18749C;
  --accent-text:  #1B6E96;
  --on-accent:    #FFFFFF;
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, var(--surface));
  --accent-wash:  color-mix(in srgb, var(--accent) 6%, var(--surface));

  /* Primary is ink, not the blue accent. Accent stays links, tabs,
     selection, and the focus ring. Hover is charcoal; active steps
     back toward ink, darker than the hover. */
  --btn-primary:        #000000;
  --btn-primary-hover:  #24272B;
  --btn-primary-active: #111416;
  --on-btn-primary:     #FFFFFF;

  --success: #00A470;
  --success-text: #0E7850;
  --success-soft: color-mix(in srgb, var(--success) 14%, var(--surface));
  --success-wash: color-mix(in srgb, var(--success) 8%, var(--surface));
  --warn:    #F89B17;
  --warn-text: #9F5A03;
  --warn-soft: color-mix(in srgb, var(--warn) 16%, var(--surface));
  --warn-wash: color-mix(in srgb, var(--warn) 10%, var(--surface));
  --error:   #DA3540;
  --error-text: #C62A42;
  --error-soft: #FFECEC;
  --error-wash: color-mix(in srgb, var(--error) 8%, var(--surface));

  --info: var(--accent);
  --info-text: var(--accent-text);
  --info-soft: var(--accent-soft);
  --info-wash: var(--accent-wash);

  --info-border: color-mix(in srgb, var(--info) 35%, var(--border));
  --success-border: color-mix(in srgb, var(--success) 35%, var(--border));
  --warn-border: color-mix(in srgb, var(--warn) 40%, var(--border));
  --error-border: color-mix(in srgb, var(--error) 35%, var(--border));

  --shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07);
  --shadow-pop:  0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;

  /* Shared control geometry. Compact inputs use these instead of one-off sizes. */
  --control-height-xs: 28px;
  --control-height-sm: 32px;
  --control-height-md: 36px;
  /* One box for .icon-btn and the default .btn--icon. */
  --icon-btn-size: var(--control-height-xs);
  --control-width-hex: 88px;
  --control-width-compact: 56px;
  --textarea-min-height: 80px;

  /* Touch icon-button target. Compact .icon-btn stays --control-height-xs / 16px glyph. */
  --control-height-touch: 44px;
  --icon-btn-size-touch: var(--control-height-touch);
  --icon-size-md: 20px;

  /* Focus defaults to accent. Override --focus-color to recolor rings
     without a second focus stylesheet. Selection is a separate state. */
  --focus-color: var(--accent);
  --focus-outline: 2px solid var(--focus-color);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 12%, transparent);
  --error-outline: 2px solid var(--error);
  --error-ring: 0 0 0 3px var(--error-soft);
  --selected-color: var(--accent);
  --selected-ring: 0 0 0 1px var(--selected-color);
  --selection-bg: var(--accent-wash);
  --selection-text: var(--text);

  --duration-fast: 120ms;
  --duration:      200ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
  --bg:      #111416;  --surface:  #1C1F22;
  --surface-2: #24272B;
  --text:    #FFFFFF;  --text-2:   #9CA3AF;
  --border:  #6E7271;
  /* Fills are restated so dark mode does not silently keep a light-only value. */
  --accent:       #1A7EAA;
  --accent-hover: #177A9E;
  --on-accent:    #FFFFFF;
  --accent-text:  #2399DC;
  /* Inverted plate: a light fill with ink type, so the solid control
     still reads against the dark surface. */
  --btn-primary:        #FFFFFF;
  --btn-primary-hover:  #F2F2F2;
  --btn-primary-active: #E5E5E5;
  --on-btn-primary:     #111416;
  --success:      #00A470;
  --success-text: #14AA75;
  --warn:         #F89B17;
  --warn-text:    #F89B17;
  --error:        #DA3540;
  --error-text:   #FF8B91;
  --error-soft:   #3A1E20;
  /* Washes, *-border, and the selection pair are color-mix / aliases on
     :root, so they follow these dark fills. Info and focus stay on accent. */
  --info: var(--accent);
  --info-text: var(--accent-text);
  --info-soft: var(--accent-soft);
  --info-wash: var(--accent-wash);
  --focus-color: var(--accent);
  --selected-color: var(--accent);
  --shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.28);
  --shadow-pop:  0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
}

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

html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: 'Rethink Sans', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.5; min-height: 100vh;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
svg { display: block; }

/* ── Layout scaffold (for kit demo pages only) ────────────────────── */
.stage {
  max-width: 960px;
  margin-inline: auto;
  padding: var(--space-4) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stage__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
}
.stage__title {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
}
.stage__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-2);
  margin-bottom: var(--space-1);
}
.theme-toggle {
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 100;
}
/* Specimen column shared by editor panels. Not a product component. */
.kit-frame { width: 340px; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   SHARED CONTROLS — .btn, .side-nav, reference utilities
   -------------------------------------------------------------------
   These are intentionally global. Demo pages and documentation consume
   the same component rules and spacing tokens, so token changes cascade
   through the kit instead of being duplicated per page.
═══════════════════════════════════════════════════════════════════ */

/* Button ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-025);
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  font-size: var(--text-sm);
  padding: var(--space-05) var(--space-1);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn--sm { font-size: var(--text-xs); padding: var(--space-025) var(--space-05); }
.btn--md { font-size: var(--text-sm); padding: var(--space-05) var(--space-1); }
.btn--lg { font-size: var(--text-base); padding: var(--space-1) var(--space-2); }

.btn--primary { background: var(--btn-primary); border-color: var(--btn-primary); color: var(--on-btn-primary); }
.btn--primary:hover:not(:disabled) { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.btn--primary:active:not(:disabled) { background: var(--btn-primary-active); border-color: var(--btn-primary-active); }
.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--text); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn--danger { background: var(--error); border-color: var(--error); color: var(--on-accent); }
.btn--danger:hover:not(:disabled) { filter: brightness(.92); }
.btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--accent-text);
  padding-inline: var(--space-025);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.btn--link:hover:not(:disabled) { background: transparent; text-decoration: underline; }
/* Same outer box as .icon-btn. .btn--md / .btn--lg step up the control scale.
   Do not set inline width or height on either control. */
.btn--icon,
.btn--icon.btn--sm {
  width: var(--icon-btn-size);
  height: var(--icon-btn-size);
  padding: 0;
  aspect-ratio: auto;
  flex: none;
}
.btn--icon.btn--md {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
}
.btn--icon.btn--lg {
  width: var(--control-height-md);
  height: var(--control-height-md);
}
.btn--full { width: 100%; }

/* Bordered/filled twin of .icon-btn--touch (44×44, 20×20 glyph). */
.btn--icon.btn--touch {
  width: var(--icon-btn-size-touch);
  height: var(--icon-btn-size-touch);
  padding: 0;
  aspect-ratio: auto;
  flex: none;
}
.btn--icon.btn--touch svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* Form controls ----------------------------------------------------
   Shared input geometry. Size variants are intentionally small and
   derive from the same compact spacing scale used by editor controls. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-025);
  width: 100%;
  max-width: 320px;
}
.field__label { font-size: var(--text-sm); font-weight: 600; }
.field__label .req { color: var(--error-text); margin-left: var(--space-0125); }
.field__hint { font-size: var(--text-xs); color: var(--text-2); }
.field__error { font-size: var(--text-xs); color: var(--error-text); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-05) var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-base);
  transition: border-color var(--duration-fast) var(--ease),
              box-shadow var(--duration-fast) var(--ease),
              background var(--duration-fast) var(--ease);
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--text-2); }
.input:focus,
.select:focus,
.textarea:focus,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: none;
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}
.input::placeholder,
.textarea::placeholder { color: var(--text-2); }
.textarea { min-height: var(--textarea-min-height); resize: vertical; font-family: inherit; }

.input--sm,
.select--sm {
  min-height: var(--control-height-sm);
  padding: var(--space-025) var(--space-05);
  font-size: var(--text-sm);
}
.input--xs,
.select--xs {
  min-height: var(--control-height-xs);
  padding: var(--space-0125) var(--space-05);
  font-size: var(--text-xs);
}
.input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.input--hex { width: var(--control-width-hex); }
.input--compact { width: var(--control-width-compact); }

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--error); }
.field--invalid .input:focus,
.field--invalid .input:focus-visible,
.field--invalid .select:focus,
.field--invalid .select:focus-visible,
.field--invalid .textarea:focus,
.field--invalid .textarea:focus-visible {
  /* The border is already --error at rest, so the soft halo alone does not
     show focus. The outline is the visible focus indicator (3:1 on --surface). */
  outline: var(--error-outline);
  outline-offset: var(--space-0125);
  box-shadow: var(--error-ring);
}
.field--disabled .field__label { color: var(--text-2); }
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--surface-2);
  color: var(--text-2);
  cursor: not-allowed;
}

.input-group { position: relative; }
.input-group .input { padding-left: calc(var(--control-height-xs) + var(--space-05)); }
.input-group__icon {
  position: absolute;
  left: var(--space-05);
  top: 50%;
  width: 16px;
  height: 16px;
  color: var(--text-2);
  pointer-events: none;
  transform: translateY(-50%);
}
.input-group__clear {
  position: absolute;
  right: var(--space-05);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--text-2);
  color: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.input-group__clear svg { width: 9px; height: 9px; }
.input-group:has(.input-group__clear) .input {
  padding-right: calc(18px + var(--space-1));
}

/* Side navigation -------------------------------------------------- */
.side-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.side-nav__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}
.side-nav__label {
  padding-inline: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.side-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-025);
}
.side-nav__link {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: var(--space-05) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.side-nav__link:hover { background: var(--surface-2); color: var(--text); }
.side-nav__link[aria-current="location"] { background: var(--accent-wash); color: var(--accent-text); }
.side-nav__list .side-nav__list { padding-left: var(--space-1); }
.side-nav__list .side-nav__list .side-nav__link { font-weight: 500; }

/* Documentation/reference primitives ------------------------------ */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lede { max-width: 68ch; color: var(--text-2); font-size: var(--text-base); }

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
}
.callout__icon {
  width: 20px;
  height: 20px;
  color: var(--accent-text);
  margin-top: var(--space-025);
}
.callout__title { font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--space-05); }
.callout__body { color: var(--text-2); font-size: var(--text-sm); }

.code-inline {
  padding: var(--space-025) var(--space-05);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: 600 .88em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-block {
  overflow-x: auto;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: var(--text-sm)/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
}

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th,
.data-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  font-size: var(--text-sm);
}
.data-table th { color: var(--text-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; }
.data-table tr:last-child td { border-bottom: 0; }

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--space-2);
}
.resource-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.resource-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); box-shadow: var(--shadow-pop); }
.resource-card__meta { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.resource-card__title { font-size: var(--text-lg); font-weight: 700; }
.resource-card__description { color: var(--text-2); font-size: var(--text-sm); }
.resource-card__action { margin-top: auto; color: var(--accent-text); font-size: var(--text-sm); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════
   SHELL ARCHITECTURE — .panel
   ───────────────────────────────────────────────────────────────────
   Every container-style component (card, modal, drawer, popover,
   dropdown menu body) is built from this one shell so headers stay
   visually identical everywhere. Structure:

     .panel
       .panel__header
         .panel__title       (+ optional .panel__subtitle)
         .panel__actions      (icon buttons, close, overflow menu)
       .panel__body
       .panel__footer         (optional — actions, pagination, meta)

   Modifiers:
     .panel--flush   removes body padding (for tables/lists/media)
     .panel--pop     applies the elevated "pop" shadow (modals, menus)
     .panel--plain   removes the header's bottom border (quiet variant)
═══════════════════════════════════════════════════════════════════ */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel--pop { box-shadow: var(--shadow-pop); }

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-05);
  padding: var(--space-05);
  border-bottom: 1px solid var(--border);
}

.panel--plain > .panel__header { border-bottom-color: transparent; }

.panel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-0125);
  min-width: 0;
}

.panel__title {
  font-size: var(--text-base);
  font-weight: 555;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel__subtitle {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.panel__actions {
  display: flex;
  align-items: center;
  gap: var(--space-025);
  flex-shrink: 0;
}

.panel__body {
  padding: var(--space-1);
  flex: 1 1 auto;
}

.panel--flush > .panel__body { padding: 0; }

.panel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-05);
  padding: var(--space-05) var(--space-1);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* Icon button used in panel headers (close, overflow, etc.) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn--touch {
  width: var(--icon-btn-size-touch);
  height: var(--icon-btn-size-touch);
  flex: none;
}
.icon-btn--touch svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* ── Focus, selection, and scroll baseline ────────────────────────── */
:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}
::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* ═══════════════════════════════════════════════════════════════════
   MAP EDITOR PRIMITIVES
   ───────────────────────────────────────────────────────────────────
   Shared atoms for the Atelier-style property panels (Color Library,
   Place Card, Map Layers). Every panel that edits a fill, border, or
   layer property is built from these instead of one-off markup:

     .field-label        section label above a row/group ("Fill", "Icon")
     .prop-row            a labelled section: label + one or more combos
     .swatch              color swatch button (opens the color panel)
     .combo               THE shared strip for color/stroke: optional .swatch + hex + opacity + width
     .combo__hex           # + hex text — always this atom for hex (never .input--hex alone in panels)
     .combo__opacity       number + % — always this atom for opacity
     .combo__width         icon + number — always this atom for weight/thickness
                           All three segments share --control-height-sm
     .list-row            draggable row (handle + label + trailing slot)
     .tile-grid            grid of selectable icon/pattern tiles
     .tile                 one selectable tile in a .tile-grid
═══════════════════════════════════════════════════════════════════ */

.field-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-025);
}

.prop-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-0125);
  padding: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.prop-row:last-child { border-bottom: none; }
.prop-row--tight { gap: var(--space-05); }

.prop-row__body {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  flex-wrap: wrap;
}

/* ── Swatch ────────────────────────────────────────────────────────
   Color swatch button. Sizes: --sm (20px), default (32px), --lg (56px+).
   Always shows the checker pattern under transparent colors. */
.swatch {
  --swatch-size: 32px;
  width: var(--swatch-size);
  height: var(--swatch-size);
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--swatch-color, var(--surface-2));
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  position: relative;
  transition: box-shadow var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.swatch::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--swatch-color, transparent);
}
button.swatch { cursor: pointer; }
button.swatch:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
button.swatch:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.swatch--sm { --swatch-size: 20px; }
.swatch--lg { --swatch-size: 56px; border-radius: var(--radius-sm); }
.swatch--selected { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--selected-color); }

/* ── Combo row ─────────────────────────────────────────────────────
   A joined strip of inputs sharing one visual boundary: swatch, then
   hex, then opacity, then (optionally) a width stepper. Each segment
   keeps its own focus ring; dividers come from adjacent borders. */
.combo {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  width: 100%;
  min-height: var(--control-height-sm);
}
.combo > .swatch {
  align-self: center;
  flex-shrink: 0;
}

.combo__hex,
.combo__opacity,
.combo__width {
  display: flex;
  align-items: center;
  gap: var(--space-025);
  height: var(--control-height-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding-inline: var(--space-05);
  transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.combo__hex,
.combo__opacity,
.combo__width { min-width: 0; }
.combo__hex:focus-within,
.combo__opacity:focus-within,
.combo__width:focus-within {
  border-color: var(--focus-color);
  box-shadow: var(--focus-ring);
}

.combo__hex {
  flex: 1 1 var(--control-width-hex);
  min-width: var(--control-width-hex);
}
.combo__hex .combo__prefix { color: var(--text-2); font-size: var(--text-sm); }
.combo__input {
  flex: 1; min-width: 0; border: none; background: none;
  font-size: var(--text-sm);
}
.combo__hex .combo__input {
  text-transform: uppercase; letter-spacing: .02em;
}

.combo__opacity { flex: 0 0 var(--control-width-compact); justify-content: space-between; }
.combo__opacity .combo__input { text-align: right; }
.combo__opacity .combo__suffix { color: var(--text-2); font-size: var(--text-sm); }

.combo__width { flex: 0 1 var(--control-width-compact); justify-content: center; }
.combo__width svg { width: 14px; height: 14px; color: var(--text-2); flex-shrink: 0; }
.combo__width .combo__input { text-align: center; }
/* Apply while that segment is the active control. Do not leave it on at rest. */
.combo__width--active { border-color: var(--focus-color); box-shadow: var(--focus-ring); }

.combo__input:focus-visible { outline: none; }

.visibility-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-xs);
  height: var(--control-height-xs);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.visibility-toggle:hover { background: var(--surface-2); color: var(--text); }
.visibility-toggle:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.visibility-toggle svg { width: 16px; height: 16px; }
.visibility-toggle[aria-pressed="false"] .visibility-toggle__open,
.visibility-toggle[aria-pressed="true"] .visibility-toggle__closed { display: none; }

/* ── List row ──────────────────────────────────────────────────────
   Layer/place row: handle · label · trailing slot (swatch, toggle).
   map-layers.html reorders by dragging the handle with a pointer.
   Reuses .swatch for the trailing color. */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  padding: var(--space-05) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: background var(--duration-fast) var(--ease);
}
.list-row:hover { background: var(--surface-2); }
.list-row--active { background: var(--surface-2); }
.list-row--dragging { opacity: .55; }

.list-row__handle {
  display: inline-flex;
  color: var(--text-2);
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
}
.list-row__handle:active { cursor: grabbing; }
.list-row__handle svg { width: 14px; height: 16px; }

.list-row__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row__meta {
  font-size: var(--text-xs);
  color: var(--text-2);
  flex-shrink: 0;
}

.list-row__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  flex-shrink: 0;
}

/* ── Tile grid ─────────────────────────────────────────────────────
   Selectable icon / pattern grid (icon picker, pattern picker, density
   and line-weight pickers). One shared component, sized by modifier. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 9), 1fr);
  gap: var(--space-025);
}
.tile-grid--compact { --tile-cols: 4; }

.tile {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.tile:hover { background: var(--surface-2); }
.tile svg, .tile img { width: 60%; height: 60%; }
.tile--selected { border-color: var(--selected-color); box-shadow: var(--selected-ring); color: var(--accent-text); }
.tile:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.tile--empty { color: var(--text-2); }


/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS — chrome that ships with global.css
   ───────────────────────────────────────────────────────────────────
   Badge, chip, choice controls, tabs, menu, modal, alert, toast,
   tooltip, color picker, Color Scale, Place Card, and Map Layers.
   Page <style> blocks should not redeclare these.
   Canonical forks (tabs, search, icon buttons): docs/PATTERNS.md.
   Status, focus, and selection: docs/STATUS-FOCUS.md.
═══════════════════════════════════════════════════════════════════ */

/* Badge / chip ---------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-025);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-025) var(--space-05);
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.badge--neutral { background: var(--surface-2); color: var(--text-2); }
.badge--accent  { background: var(--accent-soft); color: var(--accent-text); }
.badge--success { background: var(--success-soft); color: var(--success-text); }
.badge--warn    { background: var(--warn-soft); color: var(--warn-text); }
.badge--error   { background: var(--error-soft); color: var(--error-text); }
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-025) var(--space-05);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid transparent;
}
.chip--selected {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.chip__remove {
  display: inline-flex;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: var(--radius-full);
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: .7;
}
.chip__remove:hover { opacity: 1; background: rgba(0,0,0,.08); }
.chip__remove svg { width: 10px; height: 10px; }
.chip__swatch { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }

/* Choice controls ------------------------------------------------- */
.checkbox-row,
.radio-row {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  font-size: var(--text-sm);
}
.checkbox-row input,
.radio-row input { width: 16px; height: 16px; accent-color: var(--accent); }

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 40px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
.switch__track {
  width: 40px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--border);
  position: relative;
  transition: background var(--duration-fast) var(--ease);
  flex-shrink: 0;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: var(--space-0125);
  left: var(--space-0125);
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--on-accent);
  box-shadow: var(--shadow);
  transition: transform var(--duration-fast) var(--ease);
}
.switch input:checked ~ .switch__track { background: var(--accent); }
.switch input:checked ~ .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible ~ .switch__track {
  outline: var(--focus-outline);
  outline-offset: var(--space-0125);
}

/* Tabs ------------------------------------------------------------
   One treatment. tabs.html and map-layers.html both use it.
   Underline is the default; .tabs--pill is the alternate. */
.tabs { display: flex; flex-direction: column; min-width: 0; }
.tabs__list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.tabs__tab {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  padding: var(--space-05);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.tabs__tab:hover { color: var(--text); }
.tabs__tab[aria-selected="true"] { color: var(--accent-text); border-color: var(--accent); }
.tabs__count { color: var(--text-2); font-weight: 400; margin-left: var(--space-025); }
.tabs__panel { padding-top: var(--space-1); font-size: var(--text-sm); color: var(--text-2); }
.tabs__panel[hidden] { display: none; }

.tabs--pill .tabs__list {
  border-bottom: none;
  background: var(--surface-2);
  padding: var(--space-025);
  border-radius: var(--radius-full);
  display: inline-flex;
}
.tabs--pill .tabs__tab {
  border-radius: var(--radius-full);
  border-bottom: none;
  margin-bottom: 0;
  padding: var(--space-05) var(--space-1);
}
.tabs--pill .tabs__tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

/* Menu ------------------------------------------------------------ */
.menu { position: relative; display: inline-block; }
.menu__panel {
  position: absolute;
  top: calc(100% + var(--space-05));
  left: 0;
  width: 220px;
  opacity: 0;
  transform: translateY(calc(var(--space-025) * -1));
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  z-index: 60;
}
.menu__panel[hidden] { display: none; }
.menu.is-open .menu__panel { opacity: 1; transform: translateY(0); pointer-events: auto; }

.menu-list { display: flex; flex-direction: column; padding: var(--space-05); }
.menu-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  width: 100%;
  text-align: left;
  font-size: var(--text-sm);
  padding: var(--space-05);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.menu-list__item:hover { background: var(--surface-2); }
.menu-list__item svg { width: 15px; height: 15px; color: var(--text-2); flex-shrink: 0; }
.menu-list__item--danger { color: var(--error-text); }
.menu-list__item--danger svg { color: var(--error-text); }
.menu-list__divider { height: 1px; background: var(--border); margin: var(--space-05) var(--space-025); }

/* Modal -----------------------------------------------------------
   Native <dialog class="modal">. Do not set display on .modal except
   under [open] — an unconditional display value overrides the UA
   closed state and puts the dialog back in the accessibility tree.
   The dialog body is a .panel.panel--pop. */
.modal {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}
.modal:not([open]) { display: none; }
.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  overflow: auto;
}
.modal::backdrop { background: rgba(17, 20, 22, .45); }
.modal[open]::backdrop { animation: modal-fade var(--duration) var(--ease); }
.modal[open] .panel { animation: modal-panel-in var(--duration) var(--ease); }
@keyframes modal-fade { from { opacity: 0; } }
@keyframes modal-panel-in {
  from { opacity: 0; transform: translateY(var(--space-05)) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal[open]::backdrop,
  .modal[open] .panel { animation: none; }
}
.modal .panel {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius);
}

/* Alert / toast --------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-05);
  padding: var(--space-05) var(--space-1);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  background: var(--surface);
}
.alert__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--space-0125); }
.alert__body { flex: 1; }
.alert__title { font-weight: 700; margin-bottom: var(--space-0125); }
.alert--info {
  border-color: var(--info-border);
  background: var(--info-wash);
  color: var(--info-text);
}
.alert--success {
  border-color: var(--success-border);
  background: var(--success-wash);
  color: var(--success-text);
}
.alert--warn {
  border-color: var(--warn-border);
  background: var(--warn-wash);
  color: var(--warn-text);
}
.alert--error {
  border-color: var(--error-border);
  background: var(--error-soft);
  color: var(--error-text);
}

.toast-tray {
  position: fixed;
  bottom: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 300;
  width: 320px;
  max-width: calc(100vw - var(--space-4));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-05);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: var(--space-05) var(--space-1);
  animation: toast-in var(--duration) var(--ease);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(var(--space-05)); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}
.toast__icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--space-0125); }
.toast--success .toast__icon { color: var(--success-text); }
.toast--error .toast__icon { color: var(--error-text); }
.toast__body { flex: 1; font-size: var(--text-sm); }
.toast__title { font-weight: 700; }
.toast__dismiss {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: var(--space-0125);
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.toast__dismiss:hover { background: var(--surface-2); color: var(--text); }
.toast__dismiss svg { width: 10px; height: 10px; }

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

/* Tooltip --------------------------------------------------------- */
.tooltip-wrap { position: relative; display: inline-flex; }
.tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-05));
  transform: translateX(-50%) translateY(var(--space-025));
  background: var(--text);
  color: var(--bg);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-025) var(--space-05);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
  z-index: 50;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
}
.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.tooltip--right {
  left: calc(100% + var(--space-05));
  bottom: 50%;
  transform: translateY(50%) translateX(calc(var(--space-025) * -1));
  top: auto;
}
.tooltip--right::after {
  top: 50%;
  left: -5px;
  transform: translateY(-50%) rotate(-90deg);
  border-top-color: var(--text);
}
.tooltip-wrap:hover .tooltip--right,
.tooltip-wrap:focus-within .tooltip--right { transform: translateY(50%) translateX(0); }

/* Color picker ----------------------------------------------------
   The Color Library specimen is a static anatomy diagram: the field
   does not write the swatch. Slider stops are picker physics. */
.color-picker { display: flex; flex-direction: column; gap: var(--space-1); }
.color-picker__field {
  width: 100%;
  aspect-ratio: 1 / 0.82;
  border-radius: var(--radius-sm);
  position: relative;
  cursor: crosshair;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent),
    var(--picker-hue, var(--accent));
}
.color-picker__cursor {
  position: absolute;
  top: 14%;
  left: 16%;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.color-picker__controls { display: flex; align-items: center; gap: var(--space-1); }
.color-picker__eyedropper {
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  flex-shrink: 0;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.color-picker__eyedropper:hover { background: var(--surface-2); color: var(--text); }
.color-picker__sliders { flex: 1; display: flex; flex-direction: column; gap: var(--space-05); }
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.slider:focus { outline: none; }
.slider:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.slider--hue { background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.slider--alpha {
  background:
    linear-gradient(to right, transparent, var(--picker-hue, var(--accent))),
    repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 / 8px 8px;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--space-05);
}
.swatch-grid .swatch { width: 100%; height: auto; aspect-ratio: 1; }

/* Place Card ------------------------------------------------------ */
.icon-picker-trigger {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  transition: background var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}
.icon-picker-trigger:hover { background: var(--surface-2); }
.icon-picker-trigger:focus-visible {
  outline: none;
  border-color: var(--focus-color);
  background: var(--accent-wash);
  color: var(--accent-text);
}
.icon-picker-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
}
.icon-picker-trigger--empty {
  border-style: dashed;
  border-color: var(--text-2);
  background: var(--surface);
  color: var(--text-2);
}
.icon-picker-trigger svg { width: 28px; height: 28px; }

.place-card__body { display: flex; flex-direction: column; gap: var(--space-1); }
.place-card__icon-row { display: flex; align-items: flex-start; gap: var(--space-05); }

.icon-edit-panel {
  flex: 1;
  min-width: 0;
  padding: var(--space-05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.icon-edit-panel[hidden] { display: none; }
.icon-edit-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-05);
  margin-bottom: var(--space-05);
}
.icon-edit-panel__title { font-size: var(--text-sm); font-weight: 700; }
.icon-edit-panel .tile-grid { --tile-cols: 5; }
.icon-edit-panel .tile { background: var(--surface); }

/* Map Layers chrome ---------------------------------------------- */
.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-05) var(--space-1);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  align-self: flex-start;
}
.upload-btn:hover { background: var(--border); }
.upload-btn svg { width: 16px; height: 16px; color: var(--text-2); }

.plain-field {
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--space-025) var(--space-05);
  transition: background var(--duration-fast) var(--ease);
}
.plain-field:hover { background: var(--surface-2); }
.plain-field:focus-visible,
.plain-field:focus {
  outline: none;
  background: var(--surface-2);
  box-shadow: var(--focus-ring);
}
.plain-field--title { font-size: var(--text-xl); font-weight: 700; }
.plain-field--title::placeholder { color: var(--text-2); font-weight: 700; }
.plain-field--desc { font-size: var(--text-sm); color: var(--text-2); }
.plain-field--desc::placeholder { color: var(--text-2); }

.layer-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
}
.layer-head .swatch { --swatch-size: 40px; }
.layer-head__title { font-size: var(--text-lg); font-weight: 700; }

.tile--icon svg { width: 55%; height: 55%; }
.subgrid-pair { display: flex; gap: var(--space-1); }
.subgrid-pair > div { flex: 1; min-width: 0; }

/* Color Scale chrome ---------------------------------------------
   Ramp math stays in color-scale.html. These rules are the panel
   chrome only; they are not a second token scale. Chips, endpoints,
   steps, and popover cells use the shared .swatch. */
.cs-stack { display: flex; flex-direction: column; gap: var(--space-1); }
.cs-section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cs-helper { font-size: var(--text-xs); color: var(--text-2); line-height: 1.45; }

.cs-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-05);
  padding-top: var(--space-025);
}
.cs-chip { position: relative; }
.cs-chip__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--text);
  color: var(--surface);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 1;
}
.cs-chip__remove svg { width: 8px; height: 8px; }
.cs-chip:hover .cs-chip__remove,
.cs-chip:focus-within .cs-chip__remove { opacity: 1; }
.cs-empty { font-size: var(--text-xs); color: var(--text-2); font-style: italic; }

.cs-add { align-items: center; }
.cs-add .combo__hex { flex: 1 1 auto; }
.cs-add .combo__hex.is-err { border-color: var(--error); box-shadow: var(--error-ring); }

.cs-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-05);
  padding: var(--space-05) var(--space-1);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.cs-upload:hover,
.cs-upload.is-drag,
.cs-upload:focus-within {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-text);
}
.cs-upload:focus-within { border-color: var(--focus-color); box-shadow: var(--focus-ring); }
.cs-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cs-upload.is-err { color: var(--error-text); border-color: var(--error); }

.cs-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-05);
}
.cs-toolbar__title { font-size: var(--text-base); font-weight: 700; }

/* Three seed cards stay in view; more scales scroll. */
.cs-scales {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 1280px;
  overflow: auto;
  padding-right: 2px;
}
.cs-scales::-webkit-scrollbar { width: 4px; }
.cs-scales::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.cs-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
}
.cs-card--unsafe { border-color: var(--warn); }
.cs-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-05);
}
.cs-card__ends {
  display: flex;
  align-items: center;
  gap: var(--space-05);
  min-width: 0;
  flex-wrap: wrap;
}
.cs-end { display: flex; align-items: center; gap: var(--space-025); min-width: 0; }
.cs-end__hex {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.cs-arrow { font-size: var(--text-xs); color: var(--text-2); font-weight: 700; }

.cs-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-05);
}
.cs-steps { display: flex; align-items: center; gap: var(--space-025); }
.cs-steps__label { font-size: var(--text-xs); color: var(--text-2); font-weight: 600; }
.cs-steps__opts {
  display: flex;
  gap: 1px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.cs-steps__opt {
  border: none;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px var(--space-025);
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
}
.cs-steps__opt.is-active { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }

.cs-row { display: flex; gap: 2px; }
.cs-step { flex: 1; min-width: 0; }
.cs-step .swatch { width: 100%; height: auto; aspect-ratio: 1; }
.cs-step .swatch.is-flash { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--selected-color); }

.cs-readout {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.cs-warn {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text);
  background: var(--surface);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: var(--space-025) var(--space-05);
}

.cs-previews { display: flex; flex-direction: column; gap: var(--space-05); }
.cs-preview__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 2px;
}
.cs-preview svg { display: block; width: 100%; height: 44px; border-radius: var(--radius-sm); }

.cs-pop {
  position: fixed;
  z-index: 40;
  display: none;
  width: 196px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1);
  box-shadow: var(--shadow-pop);
}
.cs-pop[hidden] { display: none; }
.cs-pop.is-open { display: block; }
.cs-pop__title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: var(--space-05);
}
.cs-pop__specials { display: flex; gap: var(--space-025); margin-bottom: var(--space-05); }
.cs-pop__spec {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-025);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.cs-pop__spec .swatch { width: 100%; height: 16px; pointer-events: none; }
.cs-pop__spec-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  text-align: center;
}
.cs-pop__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-025); }
.cs-pop__grid .swatch { width: 100%; height: auto; aspect-ratio: 1; }

.cs-note {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.45;
  padding-top: var(--space-05);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════
   DOCUMENTATION SHELL — responsive reference template
   -------------------------------------------------------------------
   Use .docs-page on <body>, then .docs-topbar + .docs-layout with a
   .docs-sidebar and .docs-content. The shell consumes the same tokens
   as every kit component and is suitable for product/reference docs.
═══════════════════════════════════════════════════════════════════ */
.docs-page {
  --docs-sidebar-width: 264px;
  --docs-content-width: 920px;
  background: var(--bg);
}
.docs-topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
}
.docs-topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  font-weight: 750;
}
.docs-topbar__mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--surface);
  font-size: var(--text-sm);
  font-weight: 800;
}
.docs-topbar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-topbar__meta { color: var(--text-2); font-size: var(--text-xs); font-weight: 600; }
.docs-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-05); }
.docs-menu-button { display: none; }

.docs-layout {
  display: grid;
  grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
  min-height: calc(100vh - 64px);
}
.docs-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.docs-sidebar__footer {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-1) 0;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--text-xs);
}
.docs-main { min-width: 0; }
.docs-content {
  width: min(100%, calc(var(--docs-content-width) + (var(--space-4) * 2)));
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}
.docs-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.docs-hero h1 {
  max-width: 18ch;
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.docs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.docs-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(64px + var(--space-2));
}
.docs-section:last-child { border-bottom: 0; }
.docs-section__header { display: flex; flex-direction: column; gap: var(--space-1); max-width: 72ch; }
.docs-section__header h2 { font-size: var(--text-xl); line-height: 1.2; }
.docs-section__header p { color: var(--text-2); }
.docs-subsection {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  scroll-margin-top: calc(64px + var(--space-2));
}
.docs-subsection__header { display: flex; flex-direction: column; gap: var(--space-05); }
.docs-subsection__header h3 { font-size: var(--text-lg); line-height: 1.3; }
.docs-subsection__header p { max-width: 72ch; color: var(--text-2); font-size: var(--text-sm); }
.docs-prose { max-width: 72ch; display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-2); }
.docs-prose strong { color: var(--text); }
.docs-prose ul, .docs-prose ol { padding-left: var(--space-2); display: flex; flex-direction: column; gap: var(--space-05); }

.docs-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: var(--space-2);
}
.docs-preview {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.docs-preview__frame {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.docs-preview__nav {
  padding: var(--space-2) var(--space-1);
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.docs-preview__nav-line {
  height: 8px;
  margin-bottom: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--surface-2);
}
.docs-preview__nav-line--active { width: 76%; background: var(--accent-soft); }
.docs-preview__content { padding: var(--space-3); }
.docs-preview__eyebrow { width: 72px; height: 7px; border-radius: var(--radius-full); background: var(--accent-soft); margin-bottom: var(--space-1); }
.docs-preview__title { width: 58%; height: 18px; border-radius: var(--radius-sm); background: var(--text); opacity: .85; margin-bottom: var(--space-1); }
.docs-preview__copy { height: 8px; border-radius: var(--radius-full); background: var(--border); margin-bottom: var(--space-05); }
.docs-preview__copy:nth-child(4) { width: 82%; }
.docs-preview__section {
  height: 92px;
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-1);
}
.token-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: 124px;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.token-card__label { font-size: var(--text-xs); font-weight: 700; color: var(--text-2); }
.token-card__value { font-size: var(--text-lg); font-weight: 700; }
.token-card__sample { margin-top: auto; }
.token-space {
  display: block;
  height: 10px;
  width: min(100%, var(--token-space));
  min-width: 4px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.color-token {
  display: block;
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--token-color);
}

.docs-overlay {
  position: fixed;
  inset: 64px 0 0;
  z-index: 109;
  display: none;
  background: rgba(17, 20, 22, .38);
}

@media (max-width: 860px) {
  .docs-topbar { padding-inline: var(--space-1); }
  .docs-menu-button { display: inline-flex; }
  .docs-topbar__meta { display: none; }
  .docs-layout { display: block; }
  .docs-sidebar {
    position: fixed;
    top: 64px;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: min(86vw, var(--docs-sidebar-width));
    height: auto;
    transform: translateX(-100%);
    box-shadow: var(--shadow-pop);
    transition: transform var(--duration) var(--ease);
  }
  [data-nav-open="true"] .docs-sidebar { transform: translateX(0); }
  [data-nav-open="true"] .docs-overlay { display: block; }
  [data-nav-open="true"] body { overflow: hidden; }
  .docs-content { width: 100%; padding: var(--space-4) var(--space-2) var(--space-5); }
  .docs-anatomy { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .docs-topbar__name { max-width: 42vw; }
  .docs-topbar__actions .btn__label { display: none; }
  .docs-content { padding-inline: var(--space-1); }
  .docs-hero { padding-bottom: var(--space-4); }
  .docs-section { padding-block: var(--space-4); }
  .docs-preview { padding: var(--space-1); }
  .docs-preview__frame { grid-template-columns: 1fr; min-height: 260px; }
  .docs-preview__nav { display: none; }
  .data-table th, .data-table td { padding-inline: var(--space-1); }
}

/* ═══════════════════════════════════════════════════════════════════
   EMBED MODE — standalone component files inside index.html
   -------------------------------------------------------------------
   component-embed.js adds .component-embed only when a component page
   is rendered in an iframe. The component HTML remains the single
   source of truth: standalone and documentation views use the same file.
═══════════════════════════════════════════════════════════════════ */
.component-embed,
.component-embed body {
  min-height: 0;
  background: transparent;
}
.component-embed body { overflow: hidden; }
.component-embed .theme-toggle,
.component-embed .stage > .stage__title,
.component-embed .stage > .stage__label {
  display: none !important;
}
.component-embed .stage {
  width: 100%;
  max-width: none;
  padding: var(--space-2);
  gap: var(--space-2);
}
.component-embed .toast-tray {
  position: absolute;
}

/* Expand/collapse navigation -------------------------------------- */
.side-nav__tree { min-width: 0; }
.side-nav__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-025);
}
.side-nav__row > .side-nav__link { min-width: 0; }
.side-nav__toggle {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.side-nav__toggle:hover { background: var(--surface-2); color: var(--text); }
.side-nav__toggle:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.side-nav__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease);
}
.side-nav__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.side-nav__list[hidden] { display: none; }

/* Collapsible documentation sections ----------------------------- */
.docs-section__header--toggleable {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
}
.docs-section__heading {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.docs-section__toggle {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-2);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}
.docs-section__toggle:hover { background: var(--surface-2); color: var(--text); }
.docs-section__toggle:focus-visible { outline: var(--focus-outline); outline-offset: var(--space-0125); }
.docs-section__toggle svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease);
}
.docs-section__toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.docs-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.docs-section__body[hidden] { display: none; }

/* Live component references -------------------------------------- */
.component-reference {
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.component-reference:first-child { padding-top: 0; border-top: 0; }
.component-reference__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--space-2);
}
.component-reference__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}
.component-reference__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.component-reference__title {
  font-size: var(--text-lg);
  line-height: 1.3;
}
.component-reference__description {
  max-width: 72ch;
  color: var(--text-2);
  font-size: var(--text-sm);
}
.component-reference__source {
  display: inline-flex;
  align-items: center;
  gap: var(--space-05);
  min-height: 32px;
  padding: var(--space-05) var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--accent-text);
  font: 600 var(--text-xs)/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-decoration: none;
  white-space: nowrap;
}
.component-reference__source:hover { background: var(--accent-wash); text-decoration: underline; }
.component-reference__source svg { width: 14px; height: 14px; }
.component-preview-shell {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.component-preview {
  display: block;
  width: 100%;
  height: 240px;
  border: 0;
  background: transparent;
}
.component-source-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--text-sm);
}
.component-source-note strong { color: var(--text); }

@media (max-width: 560px) {
  .docs-section__header--toggleable,
  .component-reference__header {
    grid-template-columns: 1fr;
  }
  .docs-section__toggle { grid-row: 1; grid-column: 1; justify-self: end; }
  .docs-section__heading { padding-right: calc(36px + var(--space-1)); }
  .component-reference__source { justify-self: start; }
  .component-embed .stage { padding: var(--space-1); }
}