/* Status PRODUCT chrome (STAR-166 R14): landing, docs, pricing, legal, sign-in and the dashboard, i.e. every
   page rendered without a customer status page. base.html loads it, after styles.css and /static/product-tokens.css,
   only when body.product is set. Customer status pages never load it, so they keep the neutral, light-first look of
   styles.css (customers bring their own logo and two colours), and the seed-fleet page keeps fleet.css.

   The fleet palette (neutrals, --text-muted #9aa3b5, the one amber action colour, --focus), radii, spacing, the
   self-hosted Plex stacks and the wordmark + lockup come from product-tokens.css (a byte copy, sha256-checked). This
   file only applies them: dark only, flat amber pill actions, Plex Mono hairline chips, chamfered panels (R6, R9,
   R11). No inline style anywhere (CSP style-src 'self'). */
body.product {
  color-scheme: dark;
  --radius: var(--radius-sm);
  --text-link: var(--accent);
  /* semantic status colours, the dark set from styles.css (product chrome is always dark) */
  --s-operational: #3cc078;
  --s-degraded: #e0b422;
  --s-partial_outage: #f08a3a;
  --s-major_outage: #ef6b6b;
  --s-maintenance: #6aa0f5;
  --s-nodata: #2a2e4a;
  --s-unknown: #9aa0b8;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
}
body.product code,
body.product pre,
body.product kbd {
  font-family: var(--font-mono);
}
body.product .top {
  max-width: 860px;
}
body.product .top nav a,
body.product .foot a {
  color: var(--text-muted);
  text-decoration: none;
}
body.product .top nav a:hover,
body.product .foot a:hover {
  color: var(--text);
}
body.product .foot {
  border-top-color: var(--border);
}
body.product a:focus-visible,
body.product input:focus-visible,
body.product select:focus-visible,
body.product button:focus-visible {
  outline-color: var(--focus);
}

/* Lockup: .brand/.mark/.wordmark from product-tokens.css. "Starhold" of the product name is drawn as the wordmark,
   so the visible text stays the product name; any other name follows behind a hairline. */
body.product .brand .product-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-2);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text);
}
body.product .brand .product-name.sep {
  padding-left: var(--sp-2);
  border-left: 1px solid var(--border-strong);
}
body.product .brand:hover .product-name {
  color: var(--accent);
}

/* Actions (R9): flat amber pill for the primary, a quiet pill with a strong hairline for the rest. */
body.product .cta,
body.product button {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}
body.product .cta:hover,
body.product button:hover {
  border-color: var(--accent);
}
body.product .cta.primary,
body.product button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
body.product .cta.primary:hover,
body.product button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-ink);
}
body.product button.danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger);
}
body.product input:not([type=checkbox]),
body.product select,
body.product textarea {
  background: var(--surface-2);
  border-color: var(--border);
  border-radius: var(--radius-sm);
}

/* Panels are hull plates (R6): radius <= 6px, a --chamfer off the top-right corner, flat surface, 1px border.
   clip-path removes the border along the cut, so ::after draws its hairline back on cards. Not on pre: it scrolls
   horizontally, and an absolute ::after would scroll with the code and cross it (review m5). No lift, no shadow. */
body.product .card,
body.product pre {
  position: relative;
  border-radius: var(--radius-sm);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
}
body.product .card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--chamfer);
  height: var(--chamfer);
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--border) calc(50% - 1px), var(--border) calc(50% + 1px), transparent calc(50% + 1px));
}
body.product pre {
  background: var(--surface-2);
}
@media (max-width: 520px) {
  body.product .card,
  body.product pre {
    clip-path: polygon(0 0, calc(100% - var(--chamfer-sm)) 0, 100% var(--chamfer-sm), 100% 100%, 0 100%);
  }
  body.product .card::after {
    width: var(--chamfer-sm);
    height: var(--chamfer-sm);
  }
}
body.product .banner,
body.product .legal .summary,
body.product .error,
body.product .warn {
  border-radius: var(--radius-sm);
}

/* Chips (R11): hairline frame, tiny leading square, Plex Mono, the small chamfer. Text verbatim. */
body.product .tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--text-muted);
  clip-path: polygon(0 0, calc(100% - var(--chip-cut)) 0, 100% var(--chip-cut), 100% 100%, 0 100%);
}
body.product .tag::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  background: currentColor;
}
body.product .tag::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: var(--chip-cut);
  height: var(--chip-cut);
  pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--border-strong) calc(50% - 1px), var(--border-strong) calc(50% + 1px), transparent calc(50% + 1px));
}
body.product table.pricing .num {
  font-variant-numeric: tabular-nums;
}