/* Balboa Bunkers home page. Tokens are in skin.css. */

body.bb-home { margin: 0; background: var(--night); color: var(--ink); font: 1.125rem/1.6 var(--body); }
.bb-home a { color: inherit; }
.bb-home :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.bb-skip { position: absolute; left: 1rem; top: -4rem; background: var(--amber); color: var(--on-amber); padding: .5rem 1rem; z-index: 5; }
.bb-skip:focus { top: 1rem; }

/* Header */
.bb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; max-width: 72rem; margin: 0 auto; padding: 1.25rem 1.25rem; }
.bb-mark { display: inline-flex; align-items: baseline; gap: .6rem; text-decoration: none; line-height: 1; text-transform: uppercase; }
.bb-mark-top { font: 700 1.75rem var(--display); letter-spacing: .06em; }
.bb-mark-bottom { font: 500 .75rem var(--mono); letter-spacing: .24em; color: var(--amber); }
.bb-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center; }
.bb-nav a { text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.bb-nav a:hover { border-bottom-color: var(--amber); }
.bb-nav-ask { font-weight: 600; color: var(--amber); }
.bb-line { height: 1px; background: var(--line); }

/* Hero */
.bb-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem 4.5rem; align-items: center; max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.25rem 5rem; }
.bb-hero h1 { font: 700 clamp(2.5rem, 6.4vw, 4.75rem)/.98 var(--display); letter-spacing: -.005em; text-transform: uppercase; margin: 0 0 1.5rem; text-wrap: balance; }
.bb-lede { font-size: 1.25rem; max-width: 36rem; margin: 0 0 2rem; color: var(--ink-soft); }
.bb-actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin: 0; }

.bb-button { display: inline-block; font: 700 1rem var(--body); letter-spacing: .02em; text-decoration: none; cursor: pointer; background: var(--amber); color: var(--on-amber); border: 2px solid var(--amber); padding: .75rem 1.5rem; border-radius: 2px; transition: background .15s, border-color .15s; }
.bb-button:hover { background: var(--amber-dark); border-color: var(--amber-dark); }
.bb-home a.bb-button { color: var(--on-amber); }
.bb-textlink { font-weight: 600; text-underline-offset: .25em; text-decoration-thickness: 2px; text-decoration-color: var(--amber); }

/* Release gates: what has to clear before the invoice goes */
.bb-gates { margin: 0; padding: 1.5rem; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--amber); border-radius: 2px; }
.bb-gates figcaption { margin: 0 0 1rem; font: 500 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bb-gates ol { list-style: none; margin: 0; padding: 0; }
.bb-gates li { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: baseline; padding: .75rem 0; border-top: 1px solid var(--line); }
.bb-gates li:first-child { border-top: 0; padding-top: 0; }
.bb-gates li span:first-child { font-weight: 600; }
.bb-gates li span:last-child { font: 500 .75rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }
.bb-gates li.bb-open span:last-child { color: var(--amber); }
.bb-gates li.bb-held span:last-child { color: var(--bad); }
.bb-gates-note { margin: 1rem 0 0; font-size: .875rem; color: var(--ink-soft); }

/* Sections */
.bb-section { max-width: 72rem; margin: 0 auto; padding: 4.5rem 1.25rem; border-top: 1px solid var(--line); }
.bb-section h2 { font: 700 clamp(1.875rem, 3.6vw, 2.75rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 1.75rem; }
.bb-section h3 { font: 600 1.25rem/1.3 var(--body); margin: 0 0 .5rem; color: var(--amber); }
.bb-section p { margin: 0 0 1rem; max-width: 40rem; }

.bb-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.bb-controls article { padding: 1.75rem; border: 1px solid var(--line); margin: -1px 0 0 -1px; background: var(--panel); }
.bb-controls p { color: var(--ink-soft); margin: 0; }

.bb-site { background: var(--panel); max-width: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bb-site > div { max-width: 72rem; margin: 0 auto; }
.bb-site ul { margin: 0 0 1.25rem; padding-left: 1.25rem; max-width: 40rem; }
.bb-site li { margin-bottom: .5rem; }
.bb-site a { text-decoration-color: var(--amber); text-underline-offset: .2em; }

.bb-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.bb-split-link { display: grid; gap: .75rem; justify-items: start; }
.bb-split-link span { color: var(--ink-soft); font-size: .9375rem; }

/* Request form: the core lays the fields out, the skin dresses them */
.bb-request { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2rem 4rem; }
.bb-form .pc-intake { gap: 1.25rem; }
.bb-form .pc-field { font-weight: 600; font-size: .9375rem; }
.bb-form .pc-control { font: 400 1rem var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--ink-soft); border-radius: 2px; padding: .625rem .75rem; }
.bb-form .pc-intake-foot p { font-weight: 600; }
.bb-form [data-state="ok"] { color: var(--ok); }
.bb-form [data-state="bad"] { color: var(--bad); }

.bb-foot { border-top: 4px solid var(--amber); background: var(--panel); padding: 2rem 1.25rem 3rem; text-align: center; }
.bb-foot p { margin: .25rem 0; color: var(--ink-soft); }
.bb-foot .bb-foot-mark { font: 700 1.375rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.bb-foot a { text-decoration-color: var(--amber); text-underline-offset: .2em; }

/* Not-found and plain text pages: the hero in one column */
.bb-lost { grid-template-columns: minmax(0, 1fr); }
.bb-plain { max-width: 48rem; margin: 0 auto; padding: 4rem 1.25rem 5rem; }
.bb-plain h1 { font: 700 clamp(2.25rem, 5vw, 3.5rem)/1 var(--display); text-transform: uppercase; margin: 0 0 1.5rem; }
.bb-plain h2 { font: 600 1.375rem/1.3 var(--body); color: var(--amber); margin: 2.5rem 0 .5rem; }
.bb-plain p, .bb-plain li { max-width: 40rem; }
.bb-plain code { font: 500 .9375rem var(--mono); background: var(--panel-high); padding: .1rem .35rem; }

@media (max-width: 52rem) {
  .bb-hero, .bb-split, .bb-request { grid-template-columns: 1fr; }
  .bb-hero { padding-top: 3rem; padding-bottom: 3.5rem; }
  .bb-controls { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bb-button { transition: none; } }