/* ===================================================================
   Terminal Palette — homepage
   Organised by page section. Theme hex values never appear here;
   they come from app/themes.py via the template and app.js.
   =================================================================== */

/* -------------------------------------------------- 1. Tokens ---- */
:root {
  /* Light mode: restrained warm-gray surfaces, no near-white page areas. */
  --bg:            #E9E6E0;
  --panel:         #F1EEE8;
  --text:          #242320;
  --text-2:        #625E57;
  --border:        #CFC9BF;
  --border-subtle: #DDD7CE;
  /* Rust, deepened just enough to hold 4.5:1 as small text on the softer
     surfaces (5.09:1 on panel, 4.73:1 on page). */
  --accent:        #A4492B;
  --accent-hover:  #8E3D22;
  --active:        #E0DCD3;

  --panel-hover:   #F5F2EC;
  --border-hover:  #BDB6AA;
  --icon-muted:    #847E73;

  /* Solid rust for filled buttons. Held at the darker value in both modes so
     the white button label keeps its contrast ratio. */
  --accent-solid:       #B95735;
  --accent-solid-hover: #98452C;

  /* Terminal colours are theme-driven and never follow light/dark mode.
     The window chrome is fixed for the same reason. */
  --term-bg:     #151718;
  --term-fg:     #E6E2D9;
  --term-green:  #8FB673;
  --term-blue:   #667C87;
  --term-chrome:      #E4E0D8;
  --term-chrome-line: #CFCAC1;
  --term-chrome-text: #4A4741;

  /* Typography and layout metrics are mode-independent and MUST stay in the
     base :root block — the dark block below overrides colour tokens only. */
  --sans:  Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono:  SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  --shell:  1560px;
  /* Capped at 32px: the gutter scales with vw while the sidebar is a fixed
     width, so an uncapped gutter shrinks sidebar content as the window grows. */
  --gutter: clamp(16px, 2.6vw, 32px);
  --header-h: 90px;

  --sidebar-w: 250px;
  --details-w: 290px;
  /* Interior edge of the sidebar, against the column divider. Kept off
     --gutter so the sidebar's left edge still aligns with the header. */
  --sidebar-pad-r: 20px;
}

/* Dark appearance. Set on <html> by the inline script in base.html. Only the
   interface tokens change — terminal previews are untouched. */
:root[data-theme="dark"] {
  --bg:            #1A1917;
  --panel:         #212020;
  --text:          #EDE9E1;
  --text-2:        #A19B92;
  --border:        #35332F;
  --border-subtle: #2B2926;
  --accent:        #D2704B;
  --accent-hover:  #E08A66;
  --active:        #2C2A27;

  --panel-hover:   #292827;
  --border-hover:  #46433D;
  --icon-muted:    #8B857C;

  --accent-solid-hover: #A94E2F;
}

/* -------------------------------------------------- 2. Reset ----- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Sticky footer: the feature strip takes the leftover space via its own
     auto margin, so nothing else is stretched. The skip link, sprite and
     live region are absolutely positioned and stay out of this flow. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button {
  font: inherit;
  color: inherit;
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------- 3. Icons ----- */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; }
.icon-xs { width: 13px; height: 13px; }
.icon.solid { fill: currentColor; stroke: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.v-rule {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex: none;
}

.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-2);
}

.rubric {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-2);
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.16;
  color: var(--text);
}

.lede {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.62;
}

/* -------------------------------------------------- 5. Header ---- */
.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand { display: flex; align-items: center; gap: 13px; }

.logo-mark {
  display: grid;
  grid-template-columns: repeat(2, 13px);
  grid-auto-rows: 13px;
  gap: 3px;
  flex: none;
}
.logo-mark span { border-radius: 3px; display: block; }
.logo-mark span:nth-child(1) { background: var(--term-blue); }
.logo-mark span:nth-child(2) { background: #D9CDB6; }
.logo-mark span:nth-child(3) { background: var(--term-green); }
.logo-mark span:nth-child(4) { background: var(--accent); }

.brand-text { display: flex; flex-direction: column; gap: 3px; }

.brand-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.brand-tagline {
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: .005em;
}

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 30px; }
.site-nav a {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
  padding-bottom: 5px;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.is-active { color: var(--text); border-bottom-color: var(--accent); }

.header-controls { display: flex; align-items: center; gap: 16px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-2);
  padding: 6px;
  border-radius: 3px;
  transition: color .15s ease, background-color .15s ease;
}
.icon-btn:hover { color: var(--text); background: var(--active); }
.icon-btn .count { font-size: 12px; font-variant-numeric: tabular-nums; }
.icon-btn[aria-pressed="true"] { color: var(--accent); }
.icon-btn[aria-pressed="true"] .icon { fill: currentColor; }

/* -------------------------------------------------- 6. Workspace - */
.workspace {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--details-w);
  /* Height follows content. Columns top-align and end where their content
     ends, so the dividers may stop at different points — that is expected. */
  align-items: start;
}

.sidebar {
  border-right: 1px solid var(--border);
  padding: 30px var(--sidebar-pad-r) 22px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.center {
  min-width: 0;
  padding: 30px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.details {
  border-left: 1px solid var(--border);
  padding: 28px var(--gutter) 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -------------------------------------------------- 7. Sidebar --- */
.sidebar-intro { display: flex; flex-direction: column; gap: 10px; }
/* 26px keeps "Clearer sessions." (the wider of the two lines, 7.16em in
   Georgia) at ~186px inside the 198px content box, so the heading sets as
   exactly two lines at every desktop width. */
.sidebar-intro .display { font-size: 26px; line-height: 1.14; margin-top: 2px; }


.moods { display: flex; flex-direction: column; gap: 12px; }
.moods ul { display: flex; flex-direction: column; gap: 1px; }

.mood {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 3px;
  color: var(--text-2);
  font-size: 13px;
  text-align: left;
  transition: background-color .15s ease, color .15s ease;
}
.mood:hover { background: var(--active); color: var(--text); }
.mood .mood-label { flex: 1; min-width: 0; }
.mood .mood-count {
  font-size: 11.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.mood.is-selected {
  background: var(--active);
  color: var(--text);
  font-weight: 500;
}

.tip {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 3px;
  padding: 15px 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tip-icon { color: var(--accent); }
.tip-title { font-size: 13px; font-weight: 600; }
.tip p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; }


.sidebar-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 14px;
}
.foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--text-2);
  padding: 4px 2px;
}
.foot-btn:hover { color: var(--text); }

/* -------------------------------------------------- 8. Hero ------ */
.hero {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 3px;
  padding: 26px;
  display: grid;
  grid-template-columns: minmax(220px, .82fr) minmax(0, 1.18fr);
  gap: 30px;
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 13px; }
.hero-copy .display { font-size: 33px; }

/* -------------------------------------------------- 9. Terminal -- */
.terminal {
  border: 1px solid #34383A;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(23, 23, 20, .13);
  background: var(--term-bg);
  min-width: 0;
}

.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--term-chrome);
  border-bottom: 1px solid var(--term-chrome-line);
  padding: 0 10px;
  height: 30px;
}
.terminal-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--term-chrome-text);
}
.terminal-controls { display: flex; align-items: center; gap: 14px; color: var(--term-chrome-text); }
.terminal-controls .icon { stroke-width: 1.4; }

.terminal-scroll { overflow-x: auto; }

.terminal-body {
  margin: 0;
  padding: 16px 18px 18px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--term-fg);
  background: var(--term-bg);
  white-space: pre;
  min-width: max-content;
}
.terminal-body .tprompt { color: var(--term-green); }

.tcursor {
  display: inline-block;
  width: .58em;
  height: 1.02em;
  vertical-align: -0.16em;
  background: var(--term-green);
}

/* ------------------------------------------- 10. Featured -------- */
.featured { display: flex; flex-direction: column; gap: 16px; }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Compact search, sized to sit inside the existing heading row. */
.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 240px;
  min-width: 0;
}
.search-icon {
  position: absolute;
  left: 9px;
  color: var(--icon-muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 7px 28px 7px 30px;
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--text-2); }
.search input:hover { border-color: var(--border-hover); }
/* Our own clear button replaces the native one. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.search-clear {
  position: absolute;
  right: 5px;
  padding: 4px;
  border-radius: 3px;
  color: var(--icon-muted);
  transition: color .15s ease, background-color .15s ease;
}
.search-clear:hover { color: var(--text); background: var(--active); }

.result-count {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


.theme-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 3px;
  padding: 15px 15px 0;
  transition: border-color .15s ease, background-color .15s ease;
}
.theme-card:hover { border-color: var(--border-hover); background: var(--panel-hover); }
.theme-card[hidden] { display: none; }

/* Pagination row, directly beneath the grid. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.page-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.page-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--active);
}
.page-btn:disabled { opacity: .45; cursor: default; }
/* The sprite chevron points down; rotate it for each direction. */
.page-prev .icon { transform: rotate(90deg); }
.page-next .icon { transform: rotate(-90deg); }

.page-status {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grid-empty {
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 26px 20px;
  text-align: center;
  font-size: 12.5px;
  color: var(--text-2);
}

.theme-card.is-selected {
  border-color: var(--accent);
  box-shadow: inset 2px 0 0 var(--accent);
}

.card-fav {
  position: absolute;
  top: 10px;
  right: 9px;
  z-index: 2;
  padding: 5px;
  border-radius: 3px;
  color: var(--icon-muted);
  transition: color .15s ease, background-color .15s ease;
}
.card-fav:hover { color: var(--accent); background: var(--active); }
.card-fav[aria-pressed="true"] { color: var(--accent); }
.card-fav[aria-pressed="true"] .icon { fill: currentColor; }

.card-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  padding-right: 26px;
}
.card-desc {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  min-height: 2.5em;
}

.swatches {
  display: flex;
  margin-top: 13px;
  height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.swatches span { flex: 1 1 0; min-width: 0; }

.card-foot {
  margin-top: auto;
  padding-top: 11px;
}
.card-select {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: 2px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color .15s ease;
}
.card-select:hover { color: var(--accent); }
.theme-card.is-selected .card-select { color: var(--accent); }

/* ------------------------------------------- 11. Details --------- */
.details-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding-top: 4px;
}

.mini-term {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--mini-bg, var(--panel));
}
.mini-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--term-chrome);
  border-bottom: 1px solid var(--term-chrome-line);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.dot-rust  { background: var(--accent); }
.dot-amber { background: #D9A15C; }
.dot-green { background: var(--term-green); }

.mini-scroll { overflow-x: auto; }
.mini-body {
  margin: 0;
  padding: 12px 13px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.62;
  white-space: pre;
  min-width: max-content;
  background: var(--mini-bg);
  color: var(--mini-fg);
}
.mini-body .tprompt { color: var(--mini-accent); }
.mini-body .tcursor { background: var(--mini-accent); }

/* PuTTY-style decimal RGB groups */
/* Vertical rhythm is tightened here; no rows or groups are removed. */
.color-groups { display: flex; flex-direction: column; gap: 12px; }

.color-group {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

.group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.group-label { font-size: 12.5px; font-weight: 600; }

.chip {
  width: 22px; height: 22px;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex: none;
}

.channels { display: flex; flex-direction: column; }
.channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}
.ch-label { flex: 1; font-size: 12px; color: var(--text-2); }
.ch-value {
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}


.copy-btn {
  position: relative;
  padding: 5px;
  border-radius: 3px;
  color: var(--icon-muted);
  transition: color .15s ease, background-color .15s ease;
}
.copy-btn:hover { color: var(--text); background: var(--active); }

/* Shared copied-value feedback */
.copy-btn .ic-check { display: none; }
.copy-btn.is-copied { color: var(--accent); }
.copy-btn.is-copied .ic-copy { display: none; }
.copy-btn.is-copied .ic-check { display: block; }

.details-desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
}


/* Appearance toggle: sun in light mode, moon in dark. */
.appearance-btn .ic-moon { display: none; }
:root[data-theme="dark"] .appearance-btn .ic-sun { display: none; }
:root[data-theme="dark"] .appearance-btn .ic-moon { display: block; }

.meta { display: flex; flex-direction: column; gap: 11px; }
.meta-list { display: flex; flex-direction: column; }
.meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.meta-row dt { font-size: 12.5px; color: var(--text-2); }
.meta-row dd { font-size: 12.5px; text-align: right; }

.pill {
  display: inline-block;
  border: 1px solid var(--border);
  background: var(--active);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  color: var(--text-2);
}

.details-fav { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.fav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-2);
  padding: 5px 2px;
  transition: color .15s ease;
}
.fav-toggle:hover { color: var(--accent); }
.fav-toggle[aria-pressed="true"] { color: var(--accent); }
.fav-toggle[aria-pressed="true"] .icon { fill: currentColor; }

/* ------------------------------------------- 12. Feature strip --- */
.feature-strip {
  border-top: 1px solid var(--border);
  background: var(--panel);
  /* Absorbs leftover viewport height on a short page; resolves to 0 when the
     content is taller. Nothing above it is stretched. */
  margin-top: auto;
}
.strip-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Icon sits inline to the left of the heading; the body copy spans both
   columns so it starts at the icon's left edge, not indented to the heading. */
.feature {
  padding: 28px 26px;
  border-left: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 5px;
  align-content: start;
}
.feature:first-child { border-left: 0; padding-left: 0; }
.feature-icon {
  color: var(--accent);
  width: 19px;
  height: 19px;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.feature h2 {
  font-size: 13px;
  font-weight: 600;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}
.feature p {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  grid-column: 1 / -1;
  grid-row: 2;
}

/* ------------------------------------------- 13. Responsive ------ */
@media (max-width: 1240px) {
  :root { --sidebar-w: 240px; --details-w: 280px; }
  /* Narrower sidebar here, so the heading steps down to hold two lines. */
  .sidebar-intro .display { font-size: 25px; }
  .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 1040px) {
  .workspace { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .details {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:nth-child(3) { border-left: 0; padding-left: 0; }
  .feature:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 820px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 14px 24px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-nav { margin-left: 0; order: 3; width: 100%; }
  .site-nav ul { flex-wrap: wrap; gap: 18px 22px; }
  .header-controls { margin-left: auto; }

  .workspace { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding-right: var(--gutter);
  }
  .sidebar-foot { margin-top: 8px; }
  .details-fav { margin-top: 8px; }
}

@media (max-width: 560px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .card-desc { min-height: 0; }
  /* Search takes its own row below the heading and count. */
  .search { flex: 1 1 100%; order: 3; }
  .strip-inner { grid-template-columns: minmax(0, 1fr); }
  .feature { border-left: 0; padding-left: 0; }
  .feature + .feature { border-top: 1px solid var(--border-subtle); }
  .sidebar-intro .display { font-size: 27px; }
  .hero-copy .display { font-size: 27px; }
  .hero { padding: 22px 18px; }
  .brand-tagline { display: none; }
}

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