/* service-bundle-core · landing/document component layer.
 *
 * CORE-SERVED since the 2026-08-24 design-normalization pass (one copy at
 * /core-static/landing-base.css; per-bundle copies retired). SLIMMED in the
 * same pass: base layout, the header, headings, links, buttons and the pill
 * base moved to estate.css (the codified estate layer); this file keeps the
 * ticket-family document + marketing components. Load order (shell-enforced):
 * fonts → tokens → landing-base (ticket+showcase only) → estate → app.css.
 * No @import — the shell links tokens.css first.
 *
 * Status pill colors ride the --c-status-* token pairs in tokens.css
 * (2026-08-24: raw hex absorbed; dark re-pitch now lives in the token flip).
 * embed.css remains the no-chrome counterpart for embed mode — keep the
 * component classes in sync when either changes.
 */

code {
  background: var(--c-surface);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: .9em;
  font-family: var(--c-font-mono);
}
pre {
  background: var(--c-surface);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 4px;
  border-left: 3px solid var(--c-accent);
}
pre code { background: none; padding: 0; }
.key-box {
  background: var(--c-warn-soft);
  border: 2px solid var(--c-warn);
  padding: .8rem 1rem;
  border-radius: var(--c-radius);
  margin: 1rem 0;
  font-family: var(--c-font-mono);
  font-size: .95em;
  word-break: break-all;
}
.key-box-label {
  font-size: .75em;
  color: var(--c-status-diagnosing-fg);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}
.disclaimer {
  background: var(--c-surface);
  border-left: 4px solid var(--c-border-2);
  padding: .8rem 1rem;
  margin: 1.5rem 0;
  font-size: .9rem;
  color: var(--c-text-2);
}
.disclaimer-strong {
  background: var(--c-danger-soft);
  border-left: 4px solid var(--c-danger);
  padding: .8rem 1rem;
  margin: 1.5rem 0;
  font-size: .9rem;
  color: var(--c-danger);
  font-weight: 500;
}
.info-callout {
  background: var(--c-info-soft);
  border-left: 4px solid var(--c-accent);
  padding: .8rem 1rem;
  margin: 1.5rem 0;
  font-size: .95rem;
}
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: .93em;
}
th, td {
  padding: .5rem .7rem;
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}
th { background: var(--c-surface-2); font-weight: 600; }
ul, ol { padding-left: 1.5rem; }
li { margin: .3rem 0; }

/* ── service-bundle component layer ───────────────────────────────── */

/* ticket / status pills — colors from the --c-status-* semantic pairs */
.pill-received   { background: var(--c-status-received-bg);   color: var(--c-status-received-fg); }
.pill-diagnosing { background: var(--c-status-diagnosing-bg); color: var(--c-status-diagnosing-fg); }
.pill-quoted     { background: var(--c-status-quoted-bg);     color: var(--c-status-quoted-fg); }
.pill-approved   { background: var(--c-status-approved-bg);   color: var(--c-status-approved-fg); }
.pill-repair     { background: var(--c-status-repair-bg);     color: var(--c-status-repair-fg); }
.pill-ready      { background: var(--c-status-ready-bg);      color: var(--c-status-ready-fg); font-weight: 700; }
.pill-pickedup   { background: var(--c-status-pickedup-bg);   color: var(--c-status-pickedup-fg); }
.pill-declined   { background: var(--c-status-declined-bg);   color: var(--c-status-declined-fg); }
.pill-abandoned  { background: var(--c-status-abandoned-bg);  color: var(--c-status-abandoned-fg); }

/* primitive composition chips */
.prim-chip {
  display: inline-block;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: 4px;
  padding: .2rem .5rem;
  margin: .15rem;
  font-size: .8rem;
  font-family: var(--c-font-mono);
}
.prim-chip.t1 { border-left: 3px solid var(--c-accent); }
.prim-chip.t2 { border-left: 3px solid var(--c-warn); }
.prim-chip.t3 { border-left: 3px solid var(--c-text-3); }

/* tier pricing cards */
.tier-grid { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0; }
.tier-card {
  flex: 1 1 200px;
  border: 1px solid var(--c-border);
  border-radius: var(--c-radius);
  padding: 1rem;
}
.tier-card.featured { border: 2px solid var(--c-accent); }
.tier-card .price { font-size: 1.5rem; color: var(--c-action); font-weight: 700; }
.tier-card .price small { font-size: .8rem; color: var(--c-text-3); font-weight: 400; }

/* mockup-demo banner — marks non-production demos honestly */
.mockup-banner {
  background: var(--c-warn-soft);
  border: 1px dashed var(--c-status-diagnosing-fg);
  color: var(--c-status-diagnosing-fg);
  padding: .5rem 1rem;
  border-radius: var(--c-radius);
  font-size: .85rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* operator-portal grid */
.op-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.op-row {
  border: 1px solid var(--c-border-2);
  border-radius: var(--c-radius);
  padding: .7rem .9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
}
.op-row .meta { font-size: .85rem; color: var(--c-text-3); }