/* ============================================================
   V9 kit — component styles. Breakpoints: 700px phone / 1023px tablet.
   Laws: no drop shadows (tone + hairline elevation), accent rationed,
   transform/opacity motion only (see motion.css), 3 radius tiers.
   ============================================================ */

/* ---------- page scaffold ---------- */
/* V9 pages own ALL their padding (no coupling to legacy .main values).
   The legacy container's padding is zeroed whenever it hosts a v9 page. */
.main:has(.v9-page) { padding: 0; }
.v9-page {
  display: grid;
  /* minmax(0,1fr), NOT bare auto: an unwrappable child (segmented control,
     long mono string) must never size the column past the viewport. The
     legacy shell learned this the hard way; in V9 it's structural. */
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--v9-space-6);
  background: var(--v9-bg);
  color: var(--v9-text);
  font-family: var(--v9-font-ui);
  min-height: 100%;
  padding-block: var(--v9-space-6);
  /* Reading/form pages cap at 1400px centered; grids opt out via .is-wide. */
  padding-inline: max(var(--v9-space-6), calc((100% - 1400px) / 2));
}
.v9-page.is-wide { padding-inline: var(--v9-space-6); }
@media (max-width: 700px) {
  .v9-page, .v9-page.is-wide {
    padding: var(--v9-space-4);
    gap: var(--v9-space-4);
  }
}

/* ---------- shared text voices ---------- */
.v9-eyebrow {
  font-family: var(--v9-font-mono);
  font-size: var(--v9-text-xs);
  font-weight: 500;
  letter-spacing: var(--v9-track-eyebrow);
  text-transform: uppercase;
  color: var(--v9-text-faint);
}
.v9-mono {
  font-family: var(--v9-font-mono);
  font-variant-numeric: tabular-nums;
}
.v9-title {
  margin: 0;
  font-size: var(--v9-text-xl);
  font-weight: var(--v9-weight-display);
  letter-spacing: var(--v9-track-display);
  line-height: 1.05;
}

/* ---------- buttons ---------- */
.v9-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* In grid parents, hold natural width — never stretch into a full-width
     bar (the modal demo's yellow Close). Ignored in flex contexts. */
  justify-self: start;
  gap: var(--v9-space-2);
  min-height: 2.25rem;
  padding: 0 var(--v9-space-4);
  border-radius: var(--v9-r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--v9-text);
  font: 500 var(--v9-text-sm) var(--v9-font-ui);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;   /* buttons built from <a> must not underline */
}
.v9-btn:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }
.v9-btn-primary {
  background: var(--v9-accent);
  color: var(--v9-accent-ink);
  font-weight: 600;
}
.v9-btn-primary:hover { background: var(--v9-accent-press); }
.v9-btn-line { border-color: var(--v9-line-strong); }
.v9-btn-line:hover { background: var(--v9-hover); border-color: var(--v9-text-faint); }
.v9-btn-ghost { color: var(--v9-text-mute); }
.v9-btn-ghost:hover { background: var(--v9-hover); color: var(--v9-text); }

/* ---------- page header ---------- */
.v9-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v9-space-4);
  flex-wrap: wrap;
}
.v9-page-head-copy { display: grid; gap: var(--v9-space-1); min-width: 0; }
.v9-page-head-titlerow { display: flex; align-items: baseline; gap: var(--v9-space-3); }
.v9-page-count { font-size: var(--v9-text-sm); color: var(--v9-text-faint); }
.v9-page-head-actions {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  margin-left: auto;
}
@media (max-width: 700px) {
  .v9-page-head-actions { width: 100%; }
  .v9-page-head-actions .v9-btn-primary { flex: 1; }
}

/* ---------- stat strip ---------- */
.v9-statstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--v9-space-2) var(--v9-space-8);
  padding: var(--v9-space-3) var(--v9-space-4);
  border-block: 1px solid var(--v9-line);
}
.v9-stat { display: flex; align-items: baseline; gap: var(--v9-space-2); min-width: 0; }
.v9-stat-value { font-size: var(--v9-text-lg); font-weight: 500; }
.v9-stat-value.is-accent { color: var(--v9-accent); }
.v9-stat-value.is-pos { color: var(--v9-pos); }
.v9-stat-value.is-neg { color: var(--v9-neg); }
.v9-stat-value.is-warn { color: var(--v9-warn); }
@media (max-width: 700px) {
  .v9-statstrip { gap: var(--v9-space-1) var(--v9-space-6); padding-inline: 0; }
  .v9-stat-value { font-size: var(--v9-text-md); }
}

/* ---------- toolbar ---------- */
.v9-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v9-space-2) var(--v9-space-4);
  padding: var(--v9-space-2) var(--v9-space-3);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-md);
  background: var(--v9-surface);
}
.v9-toolbar-groups {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--v9-space-2) var(--v9-space-4);
  min-width: 0;
}
.v9-toolbar-groups > * { flex: 0 0 auto; }   /* nothing grows into gaps */
.v9-toolbar-always { display: flex; align-items: center; gap: var(--v9-space-2); }
.v9-toolbar-end {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  margin-left: auto;
}
.v9-toolbar-toggle { display: none; }
@media (max-width: 1023px) {
  .v9-toolbar-toggle { display: inline-flex; }
  .v9-toolbar-groups { display: none; }
  .v9-toolbar-groups.is-open {
    display: flex;
    flex-basis: 100%;
    order: 10;
    padding-top: var(--v9-space-2);
    border-top: 1px solid var(--v9-line);
  }
}

/* ---------- segmented control ---------- */
.v9-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-pill);
  background: var(--v9-bg);
}
.v9-segment {
  border: 0;
  background: transparent;
  color: var(--v9-text-mute);
  font: 500 var(--v9-text-sm) var(--v9-font-ui);
  padding: 0.3rem 0.85rem;
  border-radius: var(--v9-r-pill);
  cursor: pointer;
}
.v9-segment[aria-pressed="true"] {
  background: var(--v9-raised);
  color: var(--v9-accent);
}
.v9-segment:focus-visible { outline: none; box-shadow: var(--v9-focus-glow); }

/* ---------- grid + list rows ---------- */
.v9-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--v9-tile-min, 11rem)), 1fr));
  gap: var(--v9-space-2);
  align-items: start;
}
/* Flex, not grid: the leading slot is optional, and a fixed grid template
   mis-places children when it's absent (Donovan caught the $ hugging the
   title). Flex degrades gracefully; trail pins right via margin-left auto. */
.v9-listrow {
  display: flex;
  align-items: center;
  gap: var(--v9-space-3);
  padding: var(--v9-space-2) var(--v9-space-3);
  border-bottom: 1px solid var(--v9-line);
}
.v9-listrow.is-clickable { cursor: pointer; }
.v9-listrow.is-clickable:hover { background: var(--v9-hover); }
.v9-listrow-lead:empty { display: none; }
.v9-listrow-lead { flex: 0 0 auto; }
.v9-listrow-main { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; }
.v9-listrow-title {
  font-size: var(--v9-text-md);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v9-listrow-meta { font-size: var(--v9-text-sm); color: var(--v9-text-mute); }
.v9-listrow-trail {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  flex: 0 0 auto;
  margin-left: auto;   /* pin to the row's right edge */
}

/* ---------- panel + collapse ---------- */
.v9-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v9-space-3);
  padding: var(--v9-space-4);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-md);
  background: var(--v9-surface);
}
.v9-panel-title { margin: 0; }
.v9-collapse { border-top: 1px solid var(--v9-line); }
.v9-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v9-space-3);
  padding: var(--v9-space-3) 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.v9-collapse-summary::-webkit-details-marker { display: none; }
.v9-collapse-chevron {
  color: var(--v9-text-faint);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--v9-t-std) var(--v9-ease), color var(--v9-t-micro) var(--v9-ease);
}
.v9-collapse[open] > .v9-collapse-summary .v9-collapse-chevron {
  transform: rotate(90deg);
  color: var(--v9-accent);
}
.v9-collapse-summary:hover .v9-eyebrow { color: var(--v9-text); }
.v9-collapse-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v9-space-3);
  padding-bottom: var(--v9-space-3);
}

/* ---------- overlays ---------- */
.v9-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(4, 4, 6, 0.6);
  display: grid;
}
.v9-sheet {
  position: fixed;
  z-index: 31;
  inset: auto 0 0 0;                /* phone: bottom sheet */
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v9-line-strong);
  border-bottom: 0;
  border-radius: var(--v9-r-md) var(--v9-r-md) 0 0;
  background: var(--v9-raised);
}
@media (min-width: 701px) {
  .v9-sheet {
    inset: 0 0 0 auto;              /* desktop: right drawer */
    width: min(26rem, 92vw);
    max-height: none;
    border: 0;
    border-left: 1px solid var(--v9-line-strong);
    border-radius: 0;
  }
  .v9-sheet.v9-slide-up { transform: translateX(100%); }
  .v9-sheet.v9-slide-up[data-open="true"] { transform: translateX(0); }
}
.v9-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v9-space-3);
  padding: var(--v9-space-3) var(--v9-space-4);
  border-bottom: 1px solid var(--v9-line);
}
.v9-sheet-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--v9-space-4);
  padding: var(--v9-space-4);
  overflow-y: auto;
}
.v9-modal {
  place-self: center;
  width: min(72rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-md);
  background: var(--v9-bg);
  position: relative;
}
@media (max-width: 700px) {
  /* Full-bleed on phone but the hairline frame survives as top/bottom edges —
     losing it entirely made the modal melt into the scrim (Donovan). */
  .v9-modal {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    border-inline: 0;
  }
}
/* Scroll lock while any V9 overlay is open (set by kit-pieces.js). Covers the
   document and the legacy .main scroll container during the migration. */
html[data-v9-lock], html[data-v9-lock] body { overflow: hidden !important; }
html[data-v9-lock] .main { overflow: hidden !important; }

/* ---------- forms ---------- */
.v9-field {
  display: grid;
  /* Pin contents to the top: in a row of fields, a sibling with a hint line
     must not stretch the others' inputs taller or push them down (Donovan
     caught Set/Number misaligned against Condition). */
  align-content: start;
  gap: var(--v9-space-1);
  min-width: 0;
}
.v9-field-label { color: var(--v9-text-faint); }
.v9-field-hint { font-size: var(--v9-text-xs); color: var(--v9-text-faint); }
.v9-input {
  min-height: 2.25rem;
  padding: 0 var(--v9-space-3);
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-sm);
  background: var(--v9-surface);
  color: var(--v9-text);
  font: 400 var(--v9-text-md) var(--v9-font-ui);
}
.v9-input:focus-visible { outline: none; border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }
.v9-input::placeholder { color: var(--v9-text-faint); }
/* Native select arrows vanish on obsidian — draw our own chevron so the
   control reads as a dropdown (Donovan caught the dead-box look). */
.v9-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  padding-right: 2.4rem;
}

/* ---------- feedback ---------- */
.v9-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-pill);
  font: 500 var(--v9-text-xs) var(--v9-font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--v9-text-mute);
}
.v9-badge.is-accent { color: var(--v9-accent-ink); background: var(--v9-accent); border-color: transparent; }
.v9-badge.is-pos { color: var(--v9-pos); border-color: color-mix(in srgb, var(--v9-pos) 40%, transparent); }
.v9-badge.is-neg { color: var(--v9-neg); border-color: color-mix(in srgb, var(--v9-neg) 40%, transparent); }
.v9-badge.is-warn { color: var(--v9-warn); border-color: color-mix(in srgb, var(--v9-warn) 40%, transparent); }
.v9-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--v9-space-2);
  padding: var(--v9-space-12) var(--v9-space-4);
  border: 1px dashed var(--v9-line-strong);
  border-radius: var(--v9-r-md);
  color: var(--v9-text-mute);
  text-align: center;
}
/* Empty states center their action — overrides the kit-wide button default
   of justify-self: start (which exists to stop full-width stretching). */
.v9-empty > .v9-btn { justify-self: center; }

/* ---------- V9 modal (confirm) ---------- */
/* Same family as the checkout review modal: obsidian card, hairline header +
   footer dividers, surface-tinted footer, NO drop shadow (the dark backdrop +
   strong border do the lifting). z-index 1000 keeps it above the workspace dock
   (35) on phones, where the dock is a full-screen fixed panel. */
.v9-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--v9-space-4);
  background: rgba(4, 4, 6, 0.72);
  animation: v9-modal-in 160ms var(--v9-ease);
}
.v9-modal {
  width: min(23rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--v9-line-strong);
  border-radius: var(--v9-r-md);
  background: var(--v9-bg);
  color: var(--v9-text);
  font-family: var(--v9-font-ui);
  overflow: hidden;
}
.v9-modal-head {
  display: grid;
  gap: var(--v9-space-1);
  padding: var(--v9-space-4) var(--v9-space-4) var(--v9-space-3);
  border-bottom: 1px solid var(--v9-line);
}
.v9-modal-eyebrow { color: var(--v9-text-mute); }
.v9-modal.tone-danger .v9-modal-eyebrow { color: var(--v9-neg); }
.v9-modal.tone-warning .v9-modal-eyebrow { color: var(--v9-warn); }
.v9-modal-title {
  margin: 0;
  font: var(--v9-weight-display) var(--v9-text-lg)/1.12 var(--v9-font-ui);
  letter-spacing: var(--v9-track-display);
  color: var(--v9-text);
}
.v9-modal-body {
  padding: var(--v9-space-4);
  color: var(--v9-text-mute);
  line-height: 1.55;
  font-size: var(--v9-text-sm);
}
.v9-modal-body > p { margin: 0; }
.v9-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--v9-space-2);
  padding: var(--v9-space-3) var(--v9-space-4);
  border-top: 1px solid var(--v9-line);
  background: var(--v9-surface);
}
.v9-modal-foot .v9-btn { min-height: 2.4rem; padding-inline: var(--v9-space-4); }
.v9-btn-danger { background: var(--v9-neg); color: #fff; border-color: transparent; }
.v9-btn-danger:hover { filter: brightness(1.08); }
@keyframes v9-modal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
/* Phones: stretch the actions to full-width tap targets. */
@media (max-width: 480px) {
  .v9-modal-foot { gap: var(--v9-space-3); }
  .v9-modal-foot .v9-btn { flex: 1 1 0; min-height: 2.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v9-modal-backdrop { animation: none; }
}
@keyframes v9-shimmer { from { opacity: 0.45; } to { opacity: 0.9; } }
.v9-skeleton {
  border-radius: var(--v9-r-sm);
  background: var(--v9-raised);
  animation: v9-shimmer 700ms var(--v9-ease) infinite alternate;
}
.v9-skeleton.is-row { height: 2.5rem; }
.v9-skeleton.is-tile { aspect-ratio: 5 / 7; border-radius: var(--v9-r-md); }
@media (prefers-reduced-motion: reduce) { .v9-skeleton { animation: none; } }