/* service-bundle-core · estate.css — THE codified estate design rule.
 *
 * Born in the 2026-08-24 design-normalization pass (operator-ruled). One
 * copy, core-served at /core-static/estate.css, loaded by EVERY acme surface
 * (hub · 8 ticket bundles · showcase · cleaning · dog-sitter) after
 * tokens.css/landing-base.css and before the bundle's app.css.
 *
 * THE RULE — one shell anatomy, estate-wide:
 *   [demo banner?] → header.band → [nav.ops when an operator is signed in]
 *   → .wrap (or .wrap-wide on gallery surfaces) → footer
 * The BAND is the estate's signature: a solid --c-action strip carrying the
 * business name + tagline in white. It is the ONE loud element — every
 * vertical's brand color lives there (and on actions); content chrome stays
 * quiet carbon. Headings are therefore text-colored, h2 is the uppercase
 * eyebrow, and brand color never decorates body copy.
 *
 * What belongs where:
 *   estate.css      — base, band, nav, headings, links, .btn, .pill base,
 *                     .card base, .tool-banner, footer (THIS file)
 *   landing-base.css— ticket-family document/marketing components
 *   app.css         — vertical-specific components ONLY; never token values,
 *                     never band/btn/pill/link rules
 * Packs load after everything and override only --c-* (+ blessed selectors).
 */

* { box-sizing: border-box; }
html { background: var(--c-bg); color: var(--c-text); }
body {
  margin: 0;
  font: 16px/var(--c-line) var(--c-font-sans);
  color: var(--c-text);
  background: var(--c-bg);
}

/* ── the band — estate signature ──
 * Two markup idioms, ONE rendering: header.band (field-service shells emit it
 * outside .wrap, naturally full-width) and `.wrap > header` (ticket-family
 * views keep their in-column <header>; the calc breakout stretches it
 * full-bleed so no per-view markup changes were needed). */
header.band, .wrap > header {
  background: var(--c-band);                                  /* no-gradient fallback */
  background: linear-gradient(135deg, var(--c-band), var(--c-band-2));
  color: #fff; padding: 12px 16px;
  border: 0; margin-top: 0; margin-bottom: 16px;
}
.wrap > header, .wrap > .tool-banner {          /* full-bleed breakout */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 16px); padding-right: calc(50vw - 50% + 16px);
}
.wrap > .tool-banner { margin-top: -16px; margin-bottom: 12px; }
header.band .biz, .wrap > header h1 {
  font-weight: 600; font-size: 17px; letter-spacing: .01em; margin: 0; color: #fff;
}
header.band .tag, .wrap > header .tagline {
  font-size: 13px; opacity: .85; margin-top: 2px; color: #fff;
}
header.band a, .wrap > header a { color: #fff; text-decoration: none; }

/* operator nav strip — only rendered when an operator is signed in */
nav.ops { display: flex; gap: 4px; background: var(--c-band-2); padding: 0 8px; flex-wrap: wrap; }
nav.ops a { color: #fff; text-decoration: none; padding: 10px 12px; font-size: 14px; font-weight: 600; opacity: .8; }
nav.ops a.on, nav.ops a:hover { opacity: 1; box-shadow: inset 0 -3px 0 #fff; }

/* ── demo banner (chrome.demo()-gated markup; estate-wide look) ── */
.tool-banner { background: var(--c-action); color: #fff; font-size: 12px;
               letter-spacing: .03em; text-align: center; padding: 6px 10px; }
.tool-banner a { color: #fff; text-decoration: underline; }

/* ── layout ── */
.wrap      { max-width: var(--c-maxw);      margin: 0 auto; padding: 16px; }
.wrap-wide { max-width: var(--c-maxw-wide); margin: 0 auto; padding: 16px 24px; }

/* ── headings — quiet; the band carries the brand ── */
h1 { font-size: 1.35rem; font-weight: 600; margin: .3rem 0 1rem; letter-spacing: -.01em; color: var(--c-text); }
h2 { font-size: .95rem; font-weight: 600; margin: 1.5rem 0 .5rem; color: var(--c-text-2);
     text-transform: uppercase; letter-spacing: .05em; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; color: var(--c-text); }

/* ── links ── */
a { color: var(--c-action); text-decoration: none; }
a:hover { color: var(--c-action-hover); text-decoration: underline; }

/* ── buttons — one spec ── */
.btn { display: inline-block; padding: 11px 15px; border-radius: var(--c-radius); border: 0;
       font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
       text-decoration: none; background: var(--c-action); color: #fff;
       box-shadow: var(--c-shadow-1);
       transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:hover { background: var(--c-action-hover); color: #fff; text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: var(--c-bg); color: var(--c-action-hover); border: 1px solid var(--c-border); }
/* Amber fill takes dark text (AA on #ff9800/#ffa726); danger keeps #fff on
   light and flips dark at the tail (#fff fails on dark-mode #ff6b6b). */
.btn.warn { background: var(--c-warn); color: #1a1a1a; }
.btn.bad  { background: var(--c-danger); }
.btn.wide { display: block; width: 100%; text-align: center; margin-top: 8px; }

/* ── pill base (status colors: landing-base .pill-* / per-bundle .s-*) ── */
.pill { display: inline-block; padding: 3px 8px; border-radius: 20px;
        font-size: 11px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

/* ── card base — soft depth (dark mode swaps shadows for borders via tokens) ── */
.card { background: var(--c-surface); border: 1px solid var(--c-border);
        border-radius: var(--c-radius); padding: 16px; margin-bottom: 12px;
        box-shadow: var(--c-shadow-1); }
.card.tap { display: block; text-decoration: none; color: inherit;
            transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.card.tap:hover, a.card:hover, a.card:focus-visible {
  border-color: var(--c-action); box-shadow: var(--c-shadow-2);
  transform: translateY(-1px); }

/* ── forms ── */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; }
input, textarea, select { width: 100%; padding: 10px; font-size: 15px;
        border: 1px solid var(--c-border); border-radius: var(--c-radius);
        font-family: inherit; background: var(--c-bg); color: var(--c-text); }
textarea { min-height: 64px; }

/* ── footer — quiet, centered ── */
footer { color: var(--c-text-3); font-size: 12px; text-align: center; padding: 20px 16px; }
footer a { color: var(--c-text-2); }

/* ── focus — one visible ring, estate-wide ── */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* ── dark residual pins (palette flips live in tokens.css) ── */
[data-theme="dark"] .btn.ghost { background: transparent; }
[data-theme="dark"] .btn.bad   { color: #1a1a1a; }

/* ── motion is optional ── */
@media (prefers-reduced-motion: reduce) {
  .btn, .card.tap, a.card { transition: none; }
  .btn:active, .card.tap:hover, a.card:hover, a.card:focus-visible { transform: none; }
}