/* Silver Vista — index.css
   Components: masthead + submenus, breadcrumbs, specimen labels, index grid,
   reference rail, pill tags, zone bands, jobs checklists, finder, compare tray,
   forms, glossary, footer. */

/* ------------------------------------------------------------- masthead -- */
.sv-masthead {
  border-bottom: 1px solid var(--sv-rule);
  background: var(--sv-page);
}
.sv-masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-block: .9rem;
}
.sv-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--sv-ink);
  margin-right: auto;
}
.sv-brand svg { width: 34px; height: 34px; flex: none; }
.sv-brand-name {
  font-family: var(--sv-serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.sv-brand-tag {
  display: block;
  font-family: var(--sv-sans);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-muted);
}

.sv-nav-toggle {
  display: none;
  border: 1px solid var(--sv-edge);
  padding: .45rem .8rem;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--sv-radius);
}

.sv-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.15rem; list-style: none; padding: 0; margin: 0; }
.sv-nav li { margin: 0; position: relative; }
.sv-nav a, .sv-nav button {
  display: inline-block;
  padding: .4rem 0;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sv-ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sv-nav a:hover, .sv-nav button:hover { border-bottom-color: var(--sv-accent); color: var(--sv-accent-deep); }
.sv-nav a[aria-current="page"] { border-bottom-color: var(--sv-accent); }
.sv-nav-parent[aria-expanded="true"] { border-bottom-color: var(--sv-accent); }
.sv-nav-parent::after { content: " \25BE"; font-size: .7em; }

.sv-submenu {
  position: absolute;
  top: 100%; left: -.75rem;
  z-index: 40;
  min-width: 15rem;
  background: var(--sv-page);
  border: 1px solid var(--sv-rule);
  padding: .35rem 0;
  display: none;
}
.sv-submenu[data-open="true"] { display: block; }
.sv-submenu ul { display: block; }
.sv-submenu li + li { border-top: 1px solid var(--sv-rule); }
.sv-submenu a {
  display: block;
  padding: .5rem .9rem;
  text-transform: none;
  letter-spacing: 0;
  font-size: .9rem;
  border-bottom: 0;
}
.sv-submenu a:hover { background: var(--sv-panel); border-bottom: 0; }

.sv-shortlist-count {
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sv-muted);
  border: 1px solid var(--sv-edge);
  padding: .25rem .55rem;
  border-radius: var(--sv-radius);
  text-decoration: none;
}

@media (max-width: 860px) {
  .sv-nav-toggle { display: inline-block; }
  .sv-nav { flex-basis: 100%; display: none; border-top: 1px solid var(--sv-rule); padding-block: .5rem; }
  .sv-nav[data-open="true"] { display: block; }
  .sv-nav > ul { display: block; }
  .sv-nav > ul > li { border-bottom: 1px solid var(--sv-rule); }
  .sv-nav > ul > li:last-child { border-bottom: 0; }
  .sv-nav > ul > li > a, .sv-nav-parent { display: block; width: 100%; text-align: left; padding: .7rem 0; }
  .sv-submenu { position: static; border: 0; border-top: 1px dashed var(--sv-rule); min-width: 0; padding: 0 0 .5rem .9rem; }
}

/* ---------------------------------------------------------- breadcrumbs -- */
.sv-crumbs { padding-block: .8rem; border-bottom: 1px solid var(--sv-rule); }
.sv-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: .78rem; letter-spacing: .04em; }
.sv-crumbs li { margin: 0; color: var(--sv-muted); }
.sv-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--sv-rule); }
.sv-crumbs a { color: var(--sv-muted); }
.sv-crumbs [aria-current="page"] { color: var(--sv-ink); }

/* -------------------------------------------------------------- header -- */
.sv-page-head { padding-top: 2.2rem; border-bottom: 1px solid var(--sv-rule); padding-bottom: 1.6rem; }
.sv-eyebrow {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sv-accent);
  margin-bottom: .5rem;
}
.sv-standfirst {
  font-family: var(--sv-serif);
  font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem);
  line-height: 1.5;
  color: var(--sv-muted);
  max-width: 60ch;
  margin-top: .9rem;
}
.sv-updated { font-size: .78rem; color: var(--sv-muted); margin-top: .9rem; letter-spacing: .03em; }

/* ------------------------------------------------------ specimen label -- */
.sv-specimen {
  border: 1px solid var(--sv-rule);
  border-radius: var(--sv-radius);
  padding: .95rem 1rem 1rem;
  background: var(--sv-page);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.sv-specimen-name {
  font-family: var(--sv-sans);
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.25;
  margin: 0;
}
.sv-specimen-name a { text-decoration: none; color: var(--sv-ink); }
.sv-specimen-name a:hover { color: var(--sv-accent-deep); text-decoration: underline; }
.sv-specimen-bot { font-style: italic; font-size: .86rem; color: var(--sv-muted); margin: -.35rem 0 0; }
.sv-specimen p { margin: 0; font-size: .92rem; }
.sv-specimen-foot { font-size: .8rem; color: var(--sv-muted); border-top: 1px solid var(--sv-rule); padding-top: .5rem; margin: 0; }

/* ----------------------------------------------------------- pill tags -- */
.sv-tags { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.sv-tags li { margin: 0; }
.sv-tag {
  display: inline-block;
  border: 1px solid var(--sv-edge);
  border-radius: var(--sv-radius);
  padding: .12rem .45rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sv-muted);
  white-space: nowrap;
}
.sv-tag-water { border-color: var(--sv-accent); color: var(--sv-accent); }
.sv-tag-season { border-color: var(--sv-warn); color: var(--sv-warn); }
.sv-tag-soil { border-color: var(--sv-second); color: var(--sv-second); }

/* --------------------------------------------------------- index grids -- */
.sv-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0;
  border-top: 1px solid var(--sv-rule);
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}
.sv-index > li {
  margin: 0;
  border-bottom: 1px solid var(--sv-rule);
  border-right: 1px solid var(--sv-rule);
  padding: 1rem 1.1rem;
}
.sv-index > li > .sv-specimen { border: 0; padding: 0; }

.sv-linklist { border-top: 1px solid var(--sv-rule); margin-top: 1.2rem; list-style: none; padding: 0; }
.sv-linklist li { margin: 0; border-bottom: 1px solid var(--sv-rule); }
.sv-linklist a { display: block; padding: .8rem 0; text-decoration: none; font-weight: 600; }
.sv-linklist a:hover { color: var(--sv-accent-deep); }
.sv-linklist span { display: block; font-weight: 400; font-size: .88rem; color: var(--sv-muted); }

/* ---------------------------------------------------------------- rail -- */
.sv-rail-facts {
  border: 1px solid var(--sv-rule);
  border-radius: var(--sv-radius);
  padding: 1rem;
  background: var(--sv-panel);
  font-size: .88rem;
  position: sticky;
  top: 1rem;
}
.sv-rail-facts + .sv-rail-facts { margin-top: 1.25rem; position: static; }
.sv-rail-facts h2, .sv-rail-facts h3 {
  font-family: var(--sv-sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin: 0 0 .7rem;
}
.sv-rail-facts dl { margin: 0; }
.sv-rail-facts dt { font-weight: 650; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-muted); margin-top: .7rem; }
.sv-rail-facts dt:first-child { margin-top: 0; }
.sv-rail-facts dd { margin: .1rem 0 0; }
.sv-rail-facts ul { list-style: none; padding: 0; margin: 0; }
.sv-rail-facts li { margin: 0; border-top: 1px solid var(--sv-rule); }
.sv-rail-facts li:first-child { border-top: 0; }
.sv-rail-facts li a { display: block; padding: .45rem 0; text-decoration: none; }
@media (max-width: 900px) { .sv-rail-facts { position: static; } }

/* ---------------------------------------------------------- zone bands -- */
.sv-zone-band {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.25rem;
  border-top: 1px solid var(--sv-rule);
  padding: 1.1rem 0;
  align-items: start;
}
.sv-zone-band:last-of-type { border-bottom: 1px solid var(--sv-rule); }
.sv-zone-key {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sv-accent);
  padding-top: .15rem;
}
.sv-zone-key span { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sv-muted); margin-top: .25rem; font-size: .8rem; }
.sv-zone-band p { margin-top: 0; }
.sv-zone-band p + p { margin-top: .7rem; }
@media (max-width: 640px) { .sv-zone-band { grid-template-columns: minmax(0, 1fr); gap: .5rem; } }

/* ------------------------------------------------------------- callout -- */
.sv-note {
  border-left: 3px solid var(--sv-accent);
  background: var(--sv-panel);
  padding: .9rem 1.1rem;
  margin-top: 1.6rem;
  font-size: .93rem;
}
.sv-note > :first-child { margin-top: 0; }
.sv-note-caution { border-left-color: var(--sv-warn); }
.sv-note-title {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: .3rem;
}

/* ------------------------------------------------------------ data set -- */
.sv-table-wrap { overflow-x: auto; margin-top: 1.4rem; border: 1px solid var(--sv-rule); }
.sv-data { font-size: .88rem; min-width: 34rem; }
.sv-data caption { text-align: left; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-muted); padding: .7rem .8rem; border-bottom: 1px solid var(--sv-rule); }
.sv-data th, .sv-data td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--sv-rule); vertical-align: top; }
.sv-data thead th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-muted); background: var(--sv-panel); }
.sv-data tbody tr:last-child th, .sv-data tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------- steps / how -- */
.sv-steps { counter-reset: sv-step; list-style: none; padding: 0; margin-top: 1.4rem; border-top: 1px solid var(--sv-rule); }
.sv-steps > li {
  counter-increment: sv-step;
  border-bottom: 1px solid var(--sv-rule);
  padding: 1.1rem 0 1.1rem 3rem;
  position: relative;
  margin: 0;
}
.sv-steps > li::before {
  content: counter(sv-step);
  position: absolute; left: 0; top: 1.05rem;
  font-family: var(--sv-serif);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--sv-accent);
}
.sv-steps h3 { margin-top: 0; font-family: var(--sv-sans); font-size: 1rem; font-weight: 650; }

/* ---------------------------------------------------------- checklists -- */
.sv-jobs-zone { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.sv-jobs-zone button {
  border: 1px solid var(--sv-edge);
  border-radius: var(--sv-radius);
  padding: .4rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sv-muted);
}
.sv-jobs-zone button[aria-pressed="true"] { background: var(--sv-accent); border-color: var(--sv-accent); color: var(--sv-page); }

.sv-jobs-month { margin-top: 2rem; border-top: 1px solid var(--sv-rule); }
.sv-jobs-month h3 { margin: 0; padding-top: 1rem; }
.sv-jobs-list { list-style: none; padding: 0; margin: .6rem 0 1.2rem; }
.sv-jobs-row { display: flex; gap: .7rem; align-items: flex-start; border-bottom: 1px solid var(--sv-rule); padding: .6rem 0; margin: 0; }
.sv-jobs-row input[type="checkbox"] { margin-top: .28rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--sv-accent); }
.sv-jobs-row label { font-size: .95rem; }
.sv-jobs-row label b { display: block; font-weight: 650; }
.sv-jobs-row label span { color: var(--sv-muted); font-size: .88rem; }

.sv-btn {
  display: inline-block;
  border: 1px solid var(--sv-accent);
  border-radius: var(--sv-radius);
  background: transparent;
  color: var(--sv-accent);
  padding: .5rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.sv-btn:hover { background: var(--sv-accent); color: var(--sv-page); }
.sv-btn-quiet { border-color: var(--sv-edge); color: var(--sv-muted); }
.sv-btn-quiet:hover { background: var(--sv-panel); color: var(--sv-ink); }

/* -------------------------------------------------------------- finder -- */
.sv-finder { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: var(--sv-gap); align-items: start; margin-top: 2rem; }
@media (max-width: 900px) { .sv-finder { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

.sv-finder-controls {
  border: 1px solid var(--sv-rule);
  border-radius: var(--sv-radius);
  background: var(--sv-panel);
  padding: 1rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@media (max-width: 900px) { .sv-finder-controls { position: static; max-height: none; } }

.sv-filter-group { border: 0; padding: 0; margin: 0 0 1.1rem; }
.sv-filter-group legend {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sv-muted);
  padding: 0 0 .45rem; margin: 0;
}
.sv-filter-opt { display: flex; align-items: center; gap: .5rem; padding: .18rem 0; font-size: .89rem; }
.sv-filter-opt input { width: .95rem; height: .95rem; accent-color: var(--sv-accent); flex: none; }

.sv-results-head {
  display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--sv-rule); padding-bottom: .7rem;
}
.sv-count { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-muted); }
.sv-count b { color: var(--sv-ink); font-size: 1.05rem; }

.sv-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin-top: 1.25rem; list-style: none; padding: 0; }
.sv-results > li { margin: 0; }
.sv-specimen-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.sv-specimen-actions button {
  border: 1px solid var(--sv-edge); border-radius: var(--sv-radius);
  padding: .25rem .6rem; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sv-muted);
}
.sv-specimen-actions button[aria-pressed="true"] { border-color: var(--sv-accent); color: var(--sv-accent); background: var(--sv-panel); }

.sv-empty { border: 1px dashed var(--sv-edge); padding: 1.5rem; margin-top: 1.5rem; font-size: .95rem; }
.sv-empty p:first-child { margin-top: 0; }

/* --------------------------------------------------------- compare tray -- */
.sv-compare {
  position: sticky;
  bottom: 0;
  z-index: 30;
  border-top: 1px solid var(--sv-rule);
  background: var(--sv-panel);
  margin-top: 2.5rem;
}
.sv-compare[hidden] { display: none; }
.sv-compare-bar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; padding: .7rem 0; }
.sv-compare-bar p { margin: 0; font-size: .85rem; }
.sv-compare-bar .sv-btn { padding: .35rem .8rem; }
.sv-compare-body { border-top: 1px solid var(--sv-rule); padding-block: 1rem; max-height: 60vh; overflow: auto; }
.sv-compare-body[hidden] { display: none; }

/* --------------------------------------------------------------- forms -- */
.sv-form { margin-top: 1.5rem; max-width: 34rem; }
.sv-field { margin-bottom: 1.1rem; }
.sv-field label { display: block; font-size: .78rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--sv-muted); margin-bottom: .35rem; }
.sv-field input, .sv-field textarea, .sv-field select {
  width: 100%;
  border: 1px solid var(--sv-edge);
  border-radius: var(--sv-radius);
  background: var(--sv-page);
  padding: .55rem .7rem;
  font-size: .95rem;
}
.sv-field textarea { min-height: 9rem; resize: vertical; }
.sv-field input:focus, .sv-field textarea:focus, .sv-field select:focus { border-color: var(--sv-accent); }
.sv-hint { font-size: .82rem; color: var(--sv-muted); margin-top: .3rem; }
.sv-error { font-size: .84rem; color: var(--sv-second); font-weight: 600; margin-top: .3rem; min-height: 1.2em; }
.sv-form-status { border: 1px solid var(--sv-rule); padding: .9rem 1rem; margin-top: 1.2rem; font-size: .92rem; background: var(--sv-panel); }
.sv-form-status[hidden] { display: none; }

/* ------------------------------------------------------------ glossary -- */
.sv-alpha { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: 1.4rem; list-style: none; padding: 0; }
.sv-alpha li { margin: 0; }
.sv-alpha a {
  display: inline-block; min-width: 2rem; text-align: center;
  border: 1px solid var(--sv-edge); border-radius: var(--sv-radius);
  padding: .25rem .4rem; font-size: .8rem; font-weight: 650; text-decoration: none;
}
.sv-glossary { margin-top: 1.6rem; border-top: 1px solid var(--sv-rule); }
.sv-glossary dt { font-weight: 650; padding-top: .9rem; }
.sv-glossary dd { margin: .2rem 0 0; padding-bottom: .9rem; border-bottom: 1px solid var(--sv-rule); color: var(--sv-ink); font-size: .95rem; }
.sv-glossary-letter { font-family: var(--sv-serif); font-size: 1.5rem; margin-top: 2rem; padding-bottom: .3rem; border-bottom: 2px solid var(--sv-accent); }

/* ---------------------------------------------------------- accordions -- */
.sv-accordion { border-top: 1px solid var(--sv-rule); margin-top: 1.5rem; }
.sv-accordion-item { border-bottom: 1px solid var(--sv-rule); }
.sv-accordion-trigger {
  width: 100%; text-align: left; display: flex; justify-content: space-between;
  gap: 1rem; align-items: baseline; padding: .9rem 0; font-weight: 650; font-size: .98rem;
}
.sv-accordion-trigger::after { content: "+"; color: var(--sv-accent); font-size: 1.2rem; line-height: 1; }
.sv-accordion-trigger[aria-expanded="true"]::after { content: "\2013"; }
.sv-accordion-panel { padding-bottom: 1rem; }
.sv-accordion-panel[hidden] { display: none; }
.sv-accordion-panel > :first-child { margin-top: 0; }

/* -------------------------------------------------------------- figure -- */
.sv-figure { margin-top: 1.6rem; border: 1px solid var(--sv-rule); padding: 1rem; background: var(--sv-panel); }
.sv-figure svg, .sv-figure img { margin-inline: auto; }
.sv-figure figcaption { font-size: .8rem; color: var(--sv-muted); margin-top: .7rem; border-top: 1px solid var(--sv-rule); padding-top: .5rem; }

/* -------------------------------------------------------------- footer -- */
.sv-footer { border-top: 1px solid var(--sv-rule); background: var(--sv-panel); margin-top: 3rem; }
.sv-footer-inner { padding-block: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.75rem; }
.sv-footer h2 { font-family: var(--sv-sans); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sv-muted); margin: 0 0 .6rem; }
.sv-footer ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.sv-footer li { margin: 0 0 .35rem; }
.sv-footer p { font-size: .88rem; color: var(--sv-muted); }
.sv-footer-base { border-top: 1px solid var(--sv-rule); padding-block: 1.1rem; font-size: .82rem; color: var(--sv-muted); }
.sv-footer-base p { margin: 0; }
.sv-footer-base p + p { margin-top: .3rem; }

/* --------------------------------------------------------------- misc --- */
.sv-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sv-lede { font-size: 1.06rem; }
.sv-column > h2:first-child, .sv-column > h3:first-child { margin-top: 0; }

/* ------------------------------------------------- small layout helpers -- */
.sv-measure { max-width: var(--sv-measure); }
.sv-rail-inline { position: static; margin-top: 2rem; }
.sv-filters-title { margin-bottom: .8rem; }

/* Invalid form fields get a visible non-colour cue as well as the error text. */
.sv-field input[aria-invalid="true"],
.sv-field textarea[aria-invalid="true"],
.sv-field select[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--sv-second);
}