/* @outfitter/ui - platform design system.
   No colors, no font families: everything resolves from the operator's
   theme.css tokens (see tokens.md). Copied into each operator's site as
   /assets/ui.css by tools/stamp.sh, which also fails the publish if this
   copy is stale. */

/* --- base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* The document ground is the footer's dark, so a page shorter than the
   window (credits, 404, the location pages) and rubber-band overscroll
   show the footer color, never a strip of paper below it. The body paints
   paper and stretches to the viewport with the footer pinned to its end. */
html { scroll-behavior: smooth; background: var(--dark); }
body {
  margin: 0;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.05;
  margin: 0 0 .4em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.45rem; letter-spacing: .05em; }
p { margin: 0 0 1em; }
a { color: var(--primary); }
.container { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.kicker {
  font-family: var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .95rem;
  color: var(--accent-deep);
  margin: 0 0 .5rem;
}
.hero .kicker, .section-dark .kicker, .site-footer .kicker { color: var(--accent); }
.muted { color: var(--muted); }
.todo { color: var(--muted); font-style: italic; }

/* --- skip link + focus ------------------------------------------------- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- nav ---------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--dark) 92%, transparent);
  backdrop-filter: blur(6px);
  color: var(--dark-ink);
}
.nav-inner {
  max-width: 68rem; margin: 0 auto; padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.nav-brand {
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .06em;
  color: var(--dark-ink); text-decoration: none; margin-right: auto;
  display: flex; align-items: center; gap: .5rem;
}
.nav-brand img { width: 26px; height: 26px; }
.nav a:not(.nav-brand):not(.btn) {
  color: var(--dark-ink); text-decoration: none; font-size: .95rem;
}
.nav a:not(.nav-brand):not(.btn):hover { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
/* Mobile menu. The toggle ships with the hidden attribute and assets/nav.js
   reveals it (and adds .nav-js) as soon as the bar has parsed, so without
   JavaScript the links simply wrap under the brand as they always did. The
   breakpoint is 60rem, the narrowest width at which brand, six links and
   the button fit on one row; nav.js reads the same query. */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0; margin-left: .25rem;
  background: transparent; border: 2px solid transparent; border-radius: var(--radius);
  color: var(--dark-ink); cursor: pointer;
}
.nav-toggle:hover { color: var(--accent); }
.nav-toggle svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .nav-toggle-close, .nav.is-open .nav-toggle .nav-toggle-open { display: none; }
.nav.is-open .nav-toggle .nav-toggle-close { display: block; }
.nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 59.99rem) {
  .nav-js .nav-toggle:not([hidden]) { display: inline-flex; }
  .nav-js .nav-links { display: none; }
  .nav-js.is-open .nav-links {
    display: flex; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: .3rem 0 1rem; border-top: 1px solid color-mix(in srgb, var(--dark-ink) 18%, transparent);
    max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  }
  .nav-js.is-open .nav-links a:not(.btn) {
    padding: .85rem .25rem; font-size: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dark-ink) 12%, transparent);
  }
  .nav-js.is-open .nav-links .btn { margin-top: 1rem; text-align: center; }
}
/* Narrow phones: the brand is the long part of the bar, so it shrinks (and
   may shrink further, wrapping its own text) rather than pushing the toggle
   onto a second row. Fits on one line down to 320px. */
@media (max-width: 26rem) {
  .nav-inner { padding-left: 1rem; padding-right: 1rem; gap: .75rem; }
  .nav-brand { font-size: 1.05rem; letter-spacing: .04em; min-width: 0; }
}

/* --- buttons ------------------------------------------------------------ */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .08em;
  padding: .55rem 1.3rem; border-radius: var(--radius); border: 2px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
/* Dark contexts recolor plain links to the accent; a primary button there
   must keep its ink or it reads as an empty amber block. */
.section-dark .btn-primary, .site-footer .btn-primary, .hero .btn-primary, .cta-band .btn-primary { color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
/* Ghost buttons read as ink on light sections and as light ink on the hero
   and dark sections (session 9 audit: the old dark-ink default was invisible
   on paper). */
.btn-ghost { border-color: var(--primary); color: var(--primary); background: transparent; }
.hero .btn-ghost, .section-dark .btn-ghost, .site-footer .btn-ghost { border-color: var(--dark-ink); color: var(--dark-ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.hero .btn-ghost:hover, .section-dark .btn-ghost:hover { color: var(--accent); }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative; min-height: 92svh; display: grid; align-items: end;
  overflow: hidden; background: var(--dark); color: var(--dark-ink);
}
.hero-photo {
  position: absolute; inset: -8%; width: 116%; height: 116%; max-width: none;
  object-fit: cover;
  animation: kenburns 42s ease-in-out infinite alternate;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, color-mix(in srgb, var(--dark) 88%, transparent) 0%,
      color-mix(in srgb, var(--dark) 30%, transparent) 45%, transparent 75%),
    linear-gradient(to right, color-mix(in srgb, var(--dark) 45%, transparent), transparent 60%);
}
/* The side padding repeats .container's: this rule outranks it by order and
   used to zero it, which put the hero copy on the screen edge on any
   viewport narrower than the container (session 11). */
.hero-content { position: relative; padding: 4.5rem 1.25rem 4rem; }
.hero .deck { max-width: 34rem; font-size: 1.15rem; }
.hero-ctas { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -2.5%); }
}
@supports (animation-timeline: scroll()) {
  .hero-content {
    animation: hero-drift linear both;
    animation-timeline: scroll();
    animation-range: 0 90svh;
  }
  @keyframes hero-drift {
    to { transform: translateY(9rem); opacity: .1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo, .hero-content { animation: none; }
}

/* --- sections ------------------------------------------------------------ */
.section { padding: 4.5rem 0; }
.section-alt { background: color-mix(in srgb, var(--surface) 55%, var(--paper)); }
.section-dark {
  background: var(--dark); color: var(--dark-ink);
  position: relative; overflow: hidden;
}
.section-dark .backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .28;
}
.section-dark .container { position: relative; }
.section-dark a { color: var(--accent); }
.lede { font-size: 1.2rem; max-width: 44rem; }

/* --- cards ---------------------------------------------------------------- */
.cards { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin: 2rem 0 0; }
/* A tighter minimum for grids of many small cards: four across on a laptop,
   two on a tablet, so eight cards never leave a stranded row (session 11). */
.cards-tight { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-body h3 { margin: 0; }
.card-body p { margin: 0; font-size: .98rem; }
.card-body .meta { margin-top: auto; padding-top: .8rem; font-size: .9rem; color: var(--muted); }
/* A heading or paragraph that follows a card grid needs the same breathing
   room the grid took above it; without this the next section title sits on
   the cards (found on the mountains index, session 11). */
.cards + h2 { margin-top: 2.8rem; }
.cards + p { margin-top: 1.6rem; }

/* --- feature split -------------------------------------------------------- */
.feature { display: grid; gap: 2.2rem; align-items: center; margin-top: 2rem; }
@media (min-width: 46rem) { .feature { grid-template-columns: 1.1fr 1fr; } }
.feature img { border-radius: var(--radius); width: 100%; }
.fact-row { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: 1rem 0 1.2rem; }
.fact { min-width: 7rem; }
.fact b { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .04em; }
.fact span { font-size: .85rem; color: var(--muted); }
.section-dark .fact span { color: color-mix(in srgb, var(--dark-ink) 70%, transparent); }

/* --- booking shell --------------------------------------------------------- */
/* A fixed column rhythm (1 / 2 / 3 across breakpoints) rather than auto-fit,
   so every control is the same width whatever the product's filter count,
   and the search button always sits on its own row under the fields. */
.booking-shell {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; margin-top: 2rem;
  display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 30rem) { .booking-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 46rem) { .booking-shell { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.booking-shell label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); min-width: 0; }
.booking-shell input, .booking-shell select {
  font: inherit; padding: 0 .7rem; border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px); background: var(--paper); color: var(--ink);
  width: 100%; min-width: 0; height: 2.8rem; line-height: 1.2;
}
.booking-shell input[type="date"] { appearance: none; -webkit-appearance: none; }
#book-form > .btn, #home-book > .btn { grid-column: 1 / -1; justify-self: start; }
#book-results > :first-child { margin-top: 1.6rem; }
.booking-shell .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.booking-note { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--muted); }
/* checkout: riders, waiver, pay (session 7) */
.booking-checkout { margin-top: 1.5rem; }
.booking-shell h4 { grid-column: 1 / -1; margin: .6rem 0 0; font-size: 1rem; }
.rider-row {
  grid-column: 1 / -1; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: 1px solid var(--line); border-radius: calc(var(--radius) - 4px); padding: .9rem 1rem .5rem; margin: 0;
}
.rider-row legend { font-size: .85rem; color: var(--muted); padding: 0 .3rem; }
.booking-shell label.check { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; color: var(--ink); font-size: .92rem; }
.booking-shell label.check input { width: 1.1rem; height: 1.1rem; margin: 0; }
.waiver-text {
  grid-column: 1 / -1; max-height: 14rem; overflow-y: auto; white-space: pre-wrap;
  font-size: .88rem; line-height: 1.5; padding: .9rem 1rem; border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px); background: var(--paper); color: var(--ink);
}

/* --- footer ----------------------------------------------------------------- */
.site-footer {
  background: var(--dark); color: var(--dark-ink);
  padding: 2.8rem 0 2rem; margin-top: auto; font-size: .95rem;
}
.site-footer a { color: var(--accent); }
.footer-cols { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: space-between; }
.footer-brand { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .06em; }
.small-print { margin-top: 1.6rem; font-size: .8rem; opacity: .65; }
/* On light sections the note is muted ink at full opacity so its links keep contrast. */
.section .small-print { opacity: 1; color: var(--muted); }
.section .small-print a { color: var(--primary); }

/* --- inner pages ----------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--dark); color: var(--dark-ink);
  padding: 4.2rem 0 2.6rem;
}
.page-hero .backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .25;
}
.page-hero .container { position: relative; }
.page-hero .kicker { color: var(--accent); }
.breadcrumbs { font-size: .85rem; margin: 0 0 1rem; }
.breadcrumbs a { color: inherit; opacity: .8; text-decoration: underline; text-underline-offset: .15em; }
.breadcrumbs a:hover { opacity: 1; }
.breadcrumbs span[aria-hidden] { opacity: .5; padding: 0 .35rem; }
.prose { max-width: 44rem; }
.prose h2 { margin-top: 1.6em; }

/* --- price table ------------------------------------------------------------ */
.price-table { border-collapse: collapse; width: 100%; max-width: 34rem; margin: 1.2rem 0; }
.price-table th, .price-table td {
  text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--line);
}
.price-table th { font-family: var(--font-display); letter-spacing: .05em; font-weight: 400; }
.price-table td:last-child, .price-table th:last-child { text-align: right; }
.price { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .03em; }
.price small { font-size: .85rem; font-family: var(--font-body); color: var(--muted); letter-spacing: 0; }
.included { font-size: .92rem; color: var(--muted); }

/* --- tour pages: photo gallery and itinerary (session 9) ------------------ */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1.5rem 0 2rem; }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery figcaption { padding: .6rem .8rem .7rem; font-size: .85rem; color: var(--muted); }
.gallery figcaption a { color: inherit; }
.itinerary { list-style: none; margin: 1.2rem 0 2rem; padding: 0; max-width: 44rem; counter-reset: stop; }
.itinerary li { position: relative; padding: 0 0 1.2rem 3rem; border-left: 2px solid var(--line); margin-left: 1.1rem; }
.itinerary li:last-child { padding-bottom: 0; border-left-color: transparent; }
.itinerary li::before {
  counter-increment: stop; content: counter(stop);
  position: absolute; left: -1.15rem; top: 0; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--primary); color: var(--primary-ink);
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .04em;
  display: grid; place-items: center;
}
.itinerary b { display: block; }
.itinerary .mile { font-size: .85rem; color: var(--muted); }
.itinerary p { margin: .25rem 0 0; }
.tour-split { display: grid; gap: 2rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .tour-split { grid-template-columns: 1.2fr .8fr; align-items: start; } }
/* The prose column and the aside start on the same line: a heading that
   opens the prose keeps no top margin, so the box beside it sits level with
   the section it annotates rather than floating above it (session 11). */
.tour-split .prose > :first-child { margin-top: 0; }
.tour-aside { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.tour-aside h2 { margin-top: 0; font-size: 1.15rem; }
.tour-aside ul { margin: .4rem 0 1rem; padding-left: 1.1rem; }
.tour-aside li { margin: .25rem 0; }
.tour-aside .price { font-family: var(--font-display); font-size: 2rem; letter-spacing: .04em; margin: 0; }
.tour-aside .price small { font-family: var(--font-body); font-size: .85rem; letter-spacing: 0; color: var(--muted); }

.policy-toc { padding-left: 1.3rem; margin: .4rem 0 0; font-size: .92rem; }
.policy-toc li { margin: .2rem 0; }
.policy-toc a { color: var(--primary); }
.tour-aside .price-table { max-width: none; margin: .6rem 0 1.2rem; font-size: .9rem; }
.tour-aside .price-table th { font-family: var(--font-body); letter-spacing: 0; color: var(--muted); text-align: left; font-size: .88rem; }
.prose h2[id^="p"] { scroll-margin-top: 5rem; }

/* --- FAQ -------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin: 0 0 .8rem; max-width: 46rem;
}
.faq-item summary {
  cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-deep); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .faq-a { padding: 0 1.1rem 1rem; }
.faq-item .faq-a p { margin: 0 0 .6em; }

/* --- CTA band ---------------------------------------------------------------- */
.cta-band { background: var(--primary); color: var(--primary-ink); padding: 2.6rem 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cta-band h2 { margin: 0; }
.cta-band p { margin: .2rem 0 0; opacity: .85; }

/* --- trail guide ------------------------------------------------------------- */
.trail-figure {
  margin: 1rem 0 2rem; padding: 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.trail-figure figcaption { color: var(--muted); font-size: .85rem; margin-top: .5rem; }
.figure-svg { width: 100%; height: auto; display: block; }
.figure-svg .svg-grid line { stroke: var(--line); stroke-width: 1; }
.figure-svg .svg-area { fill: var(--accent); opacity: .22; }
.figure-svg .svg-line, .figure-svg line.svg-line { stroke: var(--primary); stroke-width: 2.5; fill: none; }
.figure-svg .svg-route { stroke: var(--primary); stroke-width: 3; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.figure-svg .svg-start { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.figure-svg .svg-end { fill: var(--primary); stroke: var(--paper); stroke-width: 2; }
.figure-svg .svg-dot { fill: var(--muted); }
.figure-svg .svg-label, .figure-svg .svg-label text, .figure-svg text.svg-label {
  font-family: var(--font-body); font-size: 12px; fill: var(--muted);
}
.figure-svg .svg-strong { fill: var(--ink); font-weight: 600; }

.legality {
  margin: 1.2rem 0 2rem; padding: 1.2rem 1.4rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); max-width: 46rem;
}
.legality h3 { margin: 0 0 .1rem; }
.rule-applies { color: var(--muted); margin: 0 0 .8rem; font-size: .95rem; }
.rule-quote {
  margin: .9rem 0; padding: .1rem 1rem; border-left: 3px solid var(--accent);
  color: var(--ink); font-style: italic;
}
.rule-note { font-size: .95rem; margin: .6rem 0 0; }
.source-line { color: var(--muted); font-size: .85rem; }
.source-line a { color: inherit; }

.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rules-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.rules-table th, .rules-table td {
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line);
}
.rules-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rules-table tbody th { font-weight: 600; }

.badge {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.badge-yes { background: var(--allow); color: var(--allow-ink); }
.badge-no { background: var(--deny); color: var(--deny-ink); }
.badge-cond { border: 1.5px solid var(--accent-deep); color: var(--accent-deep); }

/* --- ops console (session 8) -------------------------------------------------
   A phone in a shop, one hand, bright sun: large type, tall tap targets,
   hard edges and strong ink on paper rather than tints, a thumb-reach tab
   bar. Same tokens as the public site; no colors of its own. */
.ops-body { padding-bottom: 5.5rem; font-size: 1.125rem; -webkit-text-size-adjust: 100%; }
.ops-top {
  position: sticky; top: 0; z-index: 20; background: var(--dark); color: var(--dark-ink);
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem 1rem; padding-top: max(.7rem, env(safe-area-inset-top));
}
.ops-brand { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: .06em; color: var(--dark-ink); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.ops-who { font-size: .85rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-main { max-width: 44rem; margin: 0 auto; padding: 1rem; }
.ops-h1 { font-size: 2.2rem; margin: 0 0 .5rem; }
.ops-h2 { font-size: 1.7rem; margin: 1.2rem 0 .5rem; }
.ops-card {
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin: 0 0 .9rem;
}
.ops-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ops-note { color: var(--muted); font-size: .95rem; margin: .4rem 0 0; }
.ops-error { color: var(--deny); font-weight: 600; margin: .5rem 0; }
.ops-ok { color: var(--allow); font-weight: 600; margin: .5rem 0; }
.ops-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 3rem; padding: .5rem 1.1rem; font: inherit; font-weight: 600; font-size: 1.05rem;
  border-radius: var(--radius); border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
  cursor: pointer; touch-action: manipulation;
}
.ops-btn:disabled { opacity: .45; cursor: not-allowed; }
.ops-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ops-btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ops-btn-danger { border-color: var(--deny); color: var(--deny); }
.ops-btn-block { width: 100%; }
.ops-btn-sm { min-height: 2.4rem; padding: .3rem .8rem; font-size: .95rem; }
.ops-actions { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin-top: .8rem; }
.ops-field { display: grid; gap: .3rem; margin: 0 0 .8rem; font-size: .95rem; color: var(--muted); }
.ops-field > span { font-weight: 600; color: var(--ink); }
.ops-field input, .ops-field select, .ops-field textarea {
  font: inherit; font-size: 1.05rem; min-height: 3rem; padding: .5rem .7rem;
  border: 2px solid var(--line); border-radius: calc(var(--radius) - 4px); background: var(--paper); color: var(--ink); width: 100%;
}
.ops-field textarea { min-height: 5rem; }
.ops-check { display: flex; align-items: center; gap: .6rem; min-height: 3rem; font-size: 1.05rem; color: var(--ink); }
.ops-check input { width: 1.5rem; height: 1.5rem; margin: 0; }
.ops-grid2 { display: grid; gap: 0 .8rem; grid-template-columns: 1fr 1fr; }
.ops-daynav { display: grid; grid-template-columns: 3.2rem 1fr 3.2rem; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.ops-daynav input { font: inherit; font-size: 1.05rem; min-height: 3rem; text-align: center; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.ops-item {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 0 0 .6rem; cursor: pointer;
}
.ops-item:active { border-color: var(--primary); }
.ops-item-top { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.ops-time { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .04em; }
.ops-name { font-weight: 700; font-size: 1.1rem; }
.ops-sub { color: var(--muted); font-size: .95rem; }
.ops-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; border: 2px solid var(--line); color: var(--ink); }
.ops-chip-ok { background: var(--allow); border-color: var(--allow); color: var(--allow-ink); }
.ops-chip-bad { background: var(--deny); border-color: var(--deny); color: var(--deny-ink); }
.ops-chip-warn { border-color: var(--accent-deep); color: var(--accent-deep); }
.ops-chip-out { background: var(--dark); border-color: var(--dark); color: var(--dark-ink); }
.ops-kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: .5rem 0; font-size: 1rem; }
.ops-kv dt { color: var(--muted); }
.ops-kv dd { margin: 0; word-break: break-word; }
.ops-kv a { color: var(--primary); font-weight: 600; }
.ops-list { list-style: none; padding: 0; margin: .4rem 0; }
.ops-list li { padding: .5rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ops-list li:first-child { border-top: 0; }
.ops-times { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.ops-times .ops-btn.is-picked { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.ops-waiver { max-height: 12rem; overflow-y: auto; white-space: pre-wrap; font-size: .9rem; line-height: 1.45; padding: .8rem; border: 2px solid var(--line); border-radius: calc(var(--radius) - 4px); background: var(--paper); }
.ops-hours { width: 100%; border-collapse: collapse; }
.ops-hours td, .ops-hours th { padding: .3rem .2rem; text-align: left; }
.ops-hours input { width: 100%; }
.ops-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--dark); border-top: 2px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.ops-tab { font: inherit; font-weight: 700; font-size: .9rem; min-height: 3.6rem; background: transparent; border: 0; color: var(--dark-ink); opacity: .75; cursor: pointer; }
.ops-tab.is-active { opacity: 1; color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
@media (min-width: 46rem) {
  .ops-tabs { position: sticky; top: 3.4rem; bottom: auto; max-width: 44rem; margin: 0 auto; border-radius: 0 0 var(--radius) var(--radius); }
  .ops-body { padding-bottom: 2rem; }
}