/* ---------------------------------------------------------------------
   UI Element Compendium — application chrome.
   Specimen-catalogue aesthetic: quiet page furniture, one expressive
   element (the specimen plate). Tokens live in tokens.css; this file is
   rules only. All CSS transitions/animations live inside the
   prefers-reduced-motion: no-preference block near the bottom — never
   write a bare transition/animation outside it.
   --------------------------------------------------------------------- */

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

html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  color: var(--fg);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

p { margin: 0 0 var(--space-3); }

a { color: inherit; }

code, pre, .mono { font-family: var(--font-mono); }

/* -------------------- layout shell -------------------- */

.theme-toggle {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
  border-radius: 999px;
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
}

/* -------------------- skip link -------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--bg-raised);
  color: var(--fg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/* -------------------- catalogue ref -------------------- */

.catalogue-ref {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

/* -------------------- badges -------------------- */

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  background: var(--bg-raised);
}

.badge--core {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

.badge--quiet {
  color: var(--fg-muted);
  background: transparent;
}

/* -------------------- masthead -------------------- */

.masthead {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.masthead__title { margin-bottom: var(--space-1); }

.masthead__sub {
  margin: 0;
  color: var(--fg-muted);
  max-width: 40rem;
}

.masthead .theme-toggle {
  position: absolute;
  top: var(--space-5);
  right: var(--space-4);
}

kbd {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  background: var(--bg-raised);
}

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

/* -------------------- browse layout -------------------- */

.browse {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

@media (min-width: 60rem) {
  .browse {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }
}

/* One breakpoint (60rem/960px) tells the whole story below the sidebar
   layout above: the category list stops being a sidebar and becomes a
   horizontally scrolling strip at exactly the width the two-column browse
   grid gives way to a single column, so there is no width band where it is
   neither. The same breakpoint also raises tweak-control touch targets and
   stacks the entry action links, since both only need the extra room once
   the layout has already gone single-column.
   (.specimen's own reset lives beside its base rule further down — a
   media-scoped override needs to out-order, not just out-specify, the
   unconditional rule it's overriding, and that rule is declared later.) */
@media (max-width: 60rem) {
  .browse__nav ul {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-1);
  }
  .tweaks__controls input, .tweaks__controls select { min-height: 44px; }
  .entry__actions a { display: block; padding: var(--space-3) 0; }
}

.browse__navtitle {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.browse__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.browse__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--fg-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
}

.browse__nav a[aria-current="page"] {
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
}

.cat__code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.cat__name { flex: 1; }

.cat__count {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

/* Overrides the generic `main` element rule (max-width/margin/padding),
   which is meant for a top-level <main> but this one sits as a grid item
   inside .browse alongside the category nav. */
.browse__main {
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* -------------------- search bar -------------------- */

.searchbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.searchbar input[type="search"] {
  flex: 1;
  min-width: 12rem;
}

.searchbar input,
.searchbar select,
.searchbar button {
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
}

.searchbar button {
  cursor: pointer;
}

.empty {
  color: var(--fg-muted);
  padding: var(--space-5) 0;
}

/* -------------------- browse grid & cards -------------------- */

.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--fg);
}

.card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.card__cat {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.card__name {
  margin: 0;
  font-size: var(--step-1);
}

.card__def {
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--step--1);
  flex: 1;
}

.card__badges {
  display: flex;
  gap: var(--space-2);
}

/* -------------------- entry layout -------------------- */

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

/* The specimen plate is the design's one expressive moment and the spec
   asks for the element to be "centred and given generous room". Measured
   at 1280px before this pass: main was 1152px, but the entry grid put the
   specimen in a 355px sidebar beside 709px of prose, leaving the iframe
   179px wide — the signature element in the sidebar, the body text in the
   spotlight. Now the plate leads at (roughly) the entry's full width, the
   tweak panel sits in a fixed-width column beside it, and the prose below
   reads at a comfortable measure instead of stretching edge to edge. */
.entry__prose { max-width: 42rem; }

.specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-4);
}

/* Grid items default to min-width: auto, i.e. their content's min-content
   size — without overriding it, a wide code line or a dense table example
   would force its track to grow past minmax()'s 0 minimum ("grid
   blowout"), which is exactly how the specimen got squeezed in the first
   place. Overflow is handled inside each child instead (.code__panel pre,
   .grid). */
.specimen > * { min-width: 0; }
.specimen > .plate { grid-column: 1; }
.specimen > .tweaks { grid-column: 2; }
.specimen > .code { grid-column: 1 / -1; }

/* Below 60rem .specimen itself drops to a single track (declared with
   .browse's matching breakpoint further up) — without resetting these
   placements too, "grid-column: 2" has no explicit column 2 left to land
   in, and the grid fabricates one, squeezing the plate into a sliver
   beside it instead of stacking everything in one column. */
@media (max-width: 60rem) {
  .specimen { grid-template-columns: minmax(0, 1fr); }
  .specimen > .plate, .specimen > .tweaks, .specimen > .code { grid-column: 1; }
}

.entry__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.entry__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.entry__aliases {
  color: var(--fg-muted);
  font-size: var(--step--1);
}

.entry__section {
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}

.backlink {
  display: inline-block;
  font-size: var(--step--1);
  color: var(--fg-muted);
  text-decoration: none;
}

.entry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--step--1);
}

/* -------------------- category chips -------------------- */

.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 0.3em 0.8em;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--step--1);
}

.chip__code {
  font-family: var(--font-mono);
  color: var(--fg-muted);
}

/* -------------------- edit form & history -------------------- */

.edit-page, .history-page { max-width: 44rem; }

.edit__error {
  border: 1px solid var(--gold);
  background: var(--bg-raised);
  color: var(--fg);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin: 0 0 var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
}

.field textarea {
  font-family: var(--font-mono);
  resize: vertical;
}

.field textarea:invalid {
  border-color: var(--gold);
}

.edit__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.edit__actions button {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--fg);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.history-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--bg-raised);
}

.history-list__meta time {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.history-list__summary { margin: 0; }

.history-list__restore {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  flex-shrink: 0;
}

.history-list__restore:disabled {
  opacity: 0.6;
  cursor: default;
}

/* -------------------- notes prose -------------------- */

.prose p { margin: 0 0 var(--space-3); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--fg); }

/* -------------------- specimen plate -------------------- */

/* The plate's aurora mesh. Four radial gradients, leaning per category. */
.plate {
  position: relative;
  margin: 0; /* <figure> has a 40px inline UA margin by default */
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow: hidden;
  background: var(--bg-raised);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--plate-opacity);
  background:
    radial-gradient(60% 70% at 15% 20%, var(--mint) 0%, transparent 60%),
    radial-gradient(55% 65% at 85% 15%, var(--blush) 0%, transparent 60%),
    radial-gradient(65% 60% at 80% 85%, var(--sky) 0%, transparent 60%),
    radial-gradient(60% 70% at 20% 85%, var(--lavender) 0%, transparent 60%);
}
.plate[data-lean="mint"]::before   { background-position: -10% -10%; }
.plate[data-lean="blush"]::before  { background-position: 110% -10%; }
.plate[data-lean="sky"]::before    { background-position: 110% 110%; }
.plate[data-lean="lavender"]::before { background-position: -10% 110%; }
.plate__head, .plate__stage { position: relative; }

.plate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.plate__stamp {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15em 0.7em;
  background: var(--bg-raised);
}

.plate__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  border-radius: calc(var(--radius) - 6px);
  background: var(--bg-raised);
  padding: var(--space-4);
}

/* -------------------- interactive specimen -------------------- */
/* .specimen's grid layout is defined earlier, with .entry — it needs to sit
   next to .entry__prose's max-width and the specimen-plate-room comment
   explaining why. */

.stage {
  width: 100%;
  min-height: 8rem;
  border: 0;
  background: transparent;
}

.stage--empty {
  color: var(--fg-muted);
  text-align: center;
  margin: 0;
}

.tweaks {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  background: var(--bg-raised);
}

.tweaks__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.tweaks__reset {
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
}

.code {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  overflow-x: auto;
}

.code__tab {
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
}

.code__tab[aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--gold);
}

.code__panel {
  position: relative;
  padding: var(--space-4);
}

.code__panel[hidden] { display: none; }

.code__panel pre {
  margin: 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font: inherit;
  font-size: var(--step--1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
}

/* -------------------- command palette -------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh var(--space-3) var(--space-3);
  background: rgb(0 0 0 / 0.45);
}

.palette[hidden] { display: none; }

.palette__box {
  width: min(560px, 100%);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
  overflow: hidden;
}

.palette__input {
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-1);
  padding: var(--space-3) var(--space-4);
}

.palette__input:focus { outline: none; }

.palette__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  overflow-y: auto;
}

.palette__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: calc(var(--radius) - 6px);
  cursor: pointer;
}

.palette__item.is-active { background: var(--bg); }

.palette__name {
  font-weight: 600;
  color: var(--fg);
}

.palette__code {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--fg-muted);
}

.palette__def {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-muted);
  font-size: var(--step--1);
}

/* ALL motion lives in here. Never write a bare transition elsewhere. */
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 160ms ease, box-shadow 160ms ease; }
  .card:hover { transform: translateY(-2px); }
  .plate__stage { transition: opacity 120ms ease; }
  .theme-toggle { transition: background 160ms ease, border-color 160ms ease; }
  .palette__item { transition: background 120ms ease; }
  .chip { transition: border-color 160ms ease, background 160ms ease; }
  .code__tab { transition: color 160ms ease, border-color 160ms ease; }
  .copy, .tweaks__reset { transition: background 160ms ease, border-color 160ms ease; }
  .edit__actions button, .history-list__restore { transition: background 160ms ease, border-color 160ms ease; }
  .plate__stage.is-fresh { animation: shimmer 220ms ease-out; }
  @keyframes shimmer {
    from { opacity: 0.55; }
    to   { opacity: 1; }
  }
  .copy.is-copied { animation: stamp 200ms ease-out; }
  @keyframes stamp {
    from { transform: scale(0.94); }
    to   { transform: scale(1); }
  }
}
.copy.is-copied { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }