/* ============================================================================
   PETER DICKINSON VDL — PATTERNS
   The reusable pieces of the editorial index. Each block names the markup it
   expects. Site-specific pieces (gate, conversation morph, galleries, logout)
   stay in reference-styles.css; copy from there when a page needs one.
   ============================================================================ */

/* ---- theme toggle: sun/moon segmented pill, top-left (Lucide icons)
   <div class="theme-toggle"><button class="theme-seg" data-set="light">…</button>
   <button class="theme-seg" data-set="dark">…</button></div> ---- */
.theme-toggle {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-full);
  background: var(--bg-deep);
}
.theme-seg {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink-dim);
  cursor: pointer;
  transition: background-color 180ms var(--e-standard), color 180ms var(--e-standard);
}
.theme-seg:hover { color: var(--ink); }
.theme-seg svg { width: 14px; height: 14px; }
html:not(.dark) .theme-seg[data-set="light"],
html.dark .theme-seg[data-set="dark"] {
  background: var(--surface);
  color: var(--ink);
}

/* ---- index: a stack of sections ---- */
.index { display: grid; }

/* ---- section: right-aligned label | entries column
   <section class="section"><div class="section-label">Label</div>
   <div class="entries">…rows…</div></section> ---- */
.section {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  column-gap: var(--s-7);
  align-items: start;
  margin-bottom: var(--s-7);
}
.section.tight { margin-bottom: var(--s-4); } /* sits close to the next section */
.section:last-child { margin-bottom: 0; }
.section-label {
  text-align: right;
  text-transform: uppercase;
  font-weight: var(--fw-head);
  color: var(--ink);
  letter-spacing: 0.02em;
  padding-top: 1px;
}
.entries { display: flex; flex-direction: column; }

/* ---- rows: uppercase entries. Static rows are plain text; link rows are
   <a class="row-head">; expanding rows are <button class="row-head"> with a
   .caret first, then a .reveal sibling. ---- */
.row { text-transform: uppercase; position: relative; }
.row.open { z-index: 3; }
.section-label, .row {
  transition: opacity var(--d-base) var(--e-standard),
    transform 420ms var(--e-out) var(--move-delay, 0ms);
}
/* everything below an open row dims and lifts; stagger via --move-delay */
.section-label.dimmed, .row.dimmed {
  opacity: 0.38;
  transform: translateY(-14px);
  pointer-events: none;
}
.row-head {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5ch;
  color: var(--ink-mid);
  background: none;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: default;
  padding: 0;
  transition: color var(--d-fast) var(--e-standard);
}
a.row-head { cursor: pointer; text-decoration: none; }
button.row-head { cursor: pointer; }
.row-head:hover { color: var(--ink); }
.caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.78em;
  height: 0.78em;
  transform: rotate(-90deg);
  transition: transform var(--d-base) var(--e-out);
  color: var(--ink-mid);
  align-self: center;
}
.caret svg { width: 100%; height: 100%; }
.row.open .caret { transform: rotate(0deg); }
.row.static .row-head { cursor: default; color: var(--ink-mid); }
.row.static .row-head:hover { color: var(--ink-mid); }

/* ---- reveal pulldown: grid-rows 0fr → 1fr, no measured heights
   <div class="reveal"><div class="reveal-inner"><div class="reveal-pad pad-text">
   <h3 class="reveal-head">…</h3><div class="reveal-text"><p>…</p></div>
   </div></div></div> ---- */
.reveal {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.row.open .reveal { grid-template-rows: 1fr; }
.reveal-inner { overflow: hidden; }
.reveal-pad {
  position: relative;
  padding: var(--s-5) 0 var(--s-7);
  text-transform: none;
  letter-spacing: normal;
}
.pad-text { max-width: 640px; }
.pad-gallery { max-width: 100%; padding-bottom: 112px; }

/* text reveal: 15px head, 12px body, both full ink */
.reveal-head {
  font-size: 15px;
  font-weight: var(--fw-head);
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: var(--s-3);
}
.reveal-text p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 52ch;
  margin-bottom: var(--s-3);
}
.reveal-text p:last-child { margin-bottom: 0; }

/* ---- media cell: a 16:9 frame, soft placeholder, cover-fit media ---- */
.cell {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--media);
}
.cell > img, .cell > video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- pills. Two kinds, never outlined:
   nav-pill = soft surface fill with a shadow (secondary)
   app-pill = inverted ink fill (the one CTA) ---- */
.nav-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 160ms var(--e-standard);
}
.nav-pill:hover { opacity: 0.8; }
.app-pill {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--r-full);
  background: var(--pill-bg);
  color: var(--pill-fg);
  text-decoration: none;
  font-size: var(--t-small);
  letter-spacing: 0.01em;
  white-space: nowrap;
  width: fit-content;
  transition: opacity var(--d-fast) var(--e-standard);
}
.app-pill:hover { opacity: 0.85; }

/* ---- micro label: 11px uppercase tracked, dim ---- */
.meta {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---- responsive: label stacks above entries ---- */
@media (max-width: 720px) {
  body { padding-left: 24px; padding-right: 24px; }
  .section { grid-template-columns: 1fr; row-gap: var(--s-2); }
  .section-label { text-align: left; }
}