/* Company landing page styles. Uses the design-system tokens vendored next
 * to it (colors_and_type.css) so light/dark + type scale stay consistent
 * with the marketing site. Kept small and SSR-friendly (no JS). */

* { box-sizing: border-box; }

:root {
  /* Padlock glyph, used as a mask so it inherits currentColor (the gated
   * value affordance). Inlined so no extra asset/request is needed. */
  --lock-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm3 8H9V6a3 3 0 0 1 6 0v3z'/%3E%3C/svg%3E");
  /* Per-numeric coverage-flag glyphs (mask → currentColor). Provenance shown
   * as a quiet icon; the literal label + explanation ride in the title/aria.
   *   reported  → a filing/document,  derived → a "follows-from" arrow,
   *   estimated → an approximation (≈). */
  --cov-reported-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H6v18h12V8z'/%3E%3Cpath d='M13 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h4'/%3E%3C/svg%3E");
  --cov-derived-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4v8a3 3 0 0 0 3 3h9'/%3E%3Cpath d='M14 11l4 4-4 4'/%3E%3C/svg%3E");
  --cov-estimated-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9c1.8-2.4 4.2-2.4 6 0s4.2 2.4 6 0 4.2-2.4 6 0'/%3E%3Cpath d='M3 15c1.8-2.4 4.2-2.4 6 0s4.2 2.4 6 0 4.2-2.4 6 0'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-canvas);
}

/* Sticky-footer frame, matching the marketing site's `.page` so a short
 * profile-only page still pins the footer to the viewport bottom. */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.grow { flex: 1; }

.company-page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ---------- Site chrome (shared with the marketing site) ----------
 * Brand nav + footer, on the same design-system tokens as site.css, so a
 * company page reads as part of plaingraph. The supplied wordmark inherits
 * currentColor (ink-on-light) and its accent dot reads --mark-accent. */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg-canvas) 92%, transparent);
  border-bottom: 1px solid var(--border-subtle);
}
.site-head-inner {
  max-width: 820px; margin: 0 auto;
  height: 60px; padding: 0 20px;
  display: flex; align-items: center; gap: var(--space-6);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand .logo { display: block; height: 30px; width: auto; }
.site-head-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-4); }
.status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-muted);
}
.status .dot {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--match-500);
}
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-link {
  font: var(--weight-medium) 13px/1 var(--font-sans);
  color: var(--fg-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--fg-strong); }
@media (max-width: 880px) { .nav-links { display: none; } }

.btn {
  font: var(--weight-medium) 13px/1 var(--font-sans);
  padding: 9px 15px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn.primary { background: var(--accent-600); color: var(--fg-on-accent); }
.btn.primary:hover { background: var(--accent-700); }

.site-foot { background: var(--bg-canvas); border-top: 1px solid var(--border-subtle); }
.site-foot-inner {
  max-width: 820px; margin: 0 auto;
  padding: 28px 20px; display: flex; align-items: center;
  gap: var(--space-5); font-size: var(--text-sm); color: var(--fg-muted);
  flex-wrap: wrap;
}
.site-foot-inner .brand .logo { height: 26px; }
.site-foot .link {
  color: var(--fg-link); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg-link) 30%, transparent);
  text-underline-offset: 2px;
}
.site-foot .link:hover { text-decoration-color: var(--fg-link); }
.site-foot-legal {
  max-width: 820px; margin: 0 auto;
  padding: 14px 20px 28px;
  display: flex; align-items: center; gap: var(--space-4);
  font-size: var(--text-xs); color: var(--fg-subtle);
  flex-wrap: wrap;
}
.site-foot-legal .link {
  color: var(--fg-muted); text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg-muted) 30%, transparent);
  text-underline-offset: 2px;
}
.site-foot-legal .link:hover { text-decoration-color: var(--fg-muted); }

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
  flex-wrap: wrap;
}
.company-id { flex: 1 1 320px; min-width: 0; } /* shrink/wrap long names */

.company-header h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  margin: 0 0 10px;
}

/* Breadcrumb above the H1: Home › company. */
.breadcrumb {
  font-size: var(--text-xs);
  color: var(--fg-muted);
  margin: 0 0 10px;
}
.breadcrumb a { color: var(--fg-link); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--fg-disabled); margin: 0 7px; }

.company-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  margin: 0 0 6px;
}
.company-meta a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--fg-link) 30%, transparent);
  text-underline-offset: 2px;
}
.company-meta a:hover { text-decoration-color: var(--fg-link); }

/* One-line factual summary sentence (GEO-extractable). */
.company-summary {
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin: 8px 0 0;
  max-width: 70ch;
}
.as-of {
  flex: none;
  align-self: flex-start;
  margin: 4px 0 0; /* nudge down to align with the H1, not above it */
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--bg-selected);
  color: var(--fg-link);
}
.badge-ok { background: var(--accent-50); color: var(--accent-700); }
.badge-warn { background: #FBECEC; color: #9B1C1C; }

/* CSS-only tooltip (no JS): the help cursor signals there's more, and the
 * styled bubble replaces the slow/unstyled native title. Shown on hover and
 * on keyboard/touch focus. */
.tip {
  cursor: help;
  position: relative;
  outline: none;
}
.tip:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.tip:hover::after,
.tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--fg-strong);
  color: var(--bg-surface);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  box-shadow: 0 6px 20px rgba(15, 20, 27, 0.22);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 22px;
}
.card h2 {
  font-size: var(--text-xl);
  color: var(--fg-strong);
  margin: 0 0 16px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.card .period { font-size: var(--text-xs); color: var(--fg-subtle); font-weight: var(--weight-regular); }
.card.is-probabilistic { border-style: dashed; }

.tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--fg-subtle);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  padding: 1px 6px;
}

/* Provenance lead for a derived card (implied valuation): the free confidence
 * band + source-filing line that anchors the card above the gated figures. */
.prov-lead {
  margin: 0 0 14px;
  font-size: var(--text-sm);
  color: var(--fg-default);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.figures > div { display: flex; flex-direction: column; gap: 2px; }
.figures dt { font-size: var(--text-xs); color: var(--fg-muted); }
.figures dd { margin: 0; font-size: var(--text-lg); color: var(--fg-strong); }

.val { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }

/* Year-on-year delta chip next to a headline figure (factual delta of two
 * as-reported periods — shown, not gated). */
.yoy {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  white-space: nowrap;
}
.vs-prior { font-size: var(--text-xs); margin: 12px 0 0; }

/* Point-in-time depth signal: we hold N periods, but the assembled series is
 * behind the API. Low-key, factual, with the access link. */
.history-depth {
  margin: 10px 0 0;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}
.history-depth a { color: var(--fg-link); }

/* Gated derived figure — present but value-masked (the number is never in the
 * HTML). Styled as an actionable "Unlock" pill (padlock + label), so it reads
 * as a one-click paywall to the trial, not a broken/redacted value. */
.gated {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-link);
  text-decoration: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--bg-selected);
  cursor: pointer;
}
.gated::before {
  content: "";
  width: 10px; height: 10px;
  /* small padlock glyph, currentColor */
  background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat;
  mask: var(--lock-mask) center / contain no-repeat;
  opacity: 0.9;
}
.gated:hover { background: var(--accent-50); color: var(--accent-700); }
.gated-cta { margin: 12px 0 0; font-size: var(--text-sm); color: var(--fg-muted); }
.gated-cta a { color: var(--fg-link); }

/* Coverage flags — small, monospace, low-key; provenance not decoration. */
.cov {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-subtle);
}
.cov-unavailable { color: var(--fg-disabled); }
.cov-derived { color: var(--accent-600); }
/* A heuristic PDF extract — flag it a touch warmer so "estimated" reads as a
   caveat, not an as-filed fact (matches the coverage-page framing). */
.cov-estimated { color: #9B1C1C; }

/* Icon coverage flags — a quiet glyph in place of the repeated word. The
   literal label + explanation surface on hover (title) and to assistive tech
   (aria-label); the raw source code stays in data-source. The glyph is a mask
   so it inherits the per-kind currentColor above. */
.cov-icon {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.1em;
  background: currentColor;
  opacity: 0.7;
  cursor: help;
  -webkit-mask: var(--cov-mask) center / contain no-repeat;
  mask: var(--cov-mask) center / contain no-repeat;
}
.cov-icon.cov-reported { --cov-mask: var(--cov-reported-mask); }
.cov-icon.cov-derived { --cov-mask: var(--cov-derived-mask); }
.cov-icon.cov-estimated { --cov-mask: var(--cov-estimated-mask); opacity: 0.85; }
.cov-icon:hover { opacity: 1; }

.charges { margin: 12px 0 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.charges li { font-size: var(--text-sm); color: var(--fg-default); }

/* Register-level "data held for this type of company" card (non-showcase
 * pages): one row per kind — bold kind label (+ "derived" tag where
 * plaingraph-computed) over a muted one-line description. */
.data-held-lead { margin: 0 0 12px; font-size: var(--text-sm); color: var(--fg-default); }
.data-held { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.data-held li { font-size: var(--text-sm); }
.data-held .kind { font-weight: var(--weight-medium); color: var(--fg-strong); margin-right: 6px; }
.data-held .kind-detail { display: block; color: var(--fg-muted); }
.data-held-note { margin: 14px 0 0; font-size: var(--text-xs); }
.data-held-note a { color: var(--fg-link); }

/* ---------- Showcase tier (extended sections; gated on data.showcase) ----------
 * Curated ~8-company demo set only — plans/portal-commercial-launch-plan.md
 * workstream D5. Reuses the .card / .tag / .gated / .badge tokens above so the
 * extended sections read as part of the same page, not a bolted-on skin. */

/* Multi-period mini-table: horizontally scrollable on its own (never the
 * page body) once period count pushes past the card width. */
.mini-table-wrap { overflow-x: auto; }
.mini-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.mini-table th, .mini-table td {
  padding: 6px 12px; text-align: right; white-space: nowrap;
  font-size: var(--text-sm); border-bottom: 1px solid var(--border-subtle);
}
.mini-table th[scope="row"] { text-align: left; color: var(--fg-muted); font-weight: var(--weight-regular); }
.mini-table thead th { color: var(--fg-subtle); font-weight: var(--weight-medium); font-size: var(--text-xs); }
.mini-table-note { margin: 10px 0 0; font-size: var(--text-sm); color: var(--fg-muted); }

/* Recent events timeline: small table-like rows (label / date), the same
 * risk treatment (left accent bar, risk-colored label, risk-tinted
 * background) as the watch-notification emails and dashboard for a
 * distress kind — portal/worker/src/watch/email_render.ts:DISTRESS_KINDS.
 * Unlike the emails (which bake literal hex because mail clients strip
 * CSS vars, see portal/worker/src/email/theme.ts), the site can use the
 * --risk-* design tokens directly, so this now genuinely shares the
 * palette instead of a hand-copied approximation of it. */
.events-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.event-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 10px; border-left: 3px solid transparent; border-radius: 4px;
}
.event-row .event-label { font-size: var(--text-sm); color: var(--fg-default); font-weight: var(--weight-medium); }
.event-row .event-date { font-size: var(--text-xs); color: var(--fg-subtle); white-space: nowrap; }
.event-row.is-distress {
  border-left-color: var(--risk-500);
  background: var(--risk-50);
}
.event-row.is-distress .event-label { color: var(--risk-600); }

/* Funding-rounds timeline: date + confidence + gated figures, mirroring the
 * implied-valuation card's masking treatment (the reconstructed money figures
 * are plaingraph IP, never emitted). */
.funding-rounds { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.funding-rounds li { font-size: var(--text-sm); color: var(--fg-default); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Showcase API-CTA upgrade: the "try it now" line + the extra copyable
 * snippets sit under the standard CTA paragraph, unchanged on non-showcase
 * pages. */
.cta-demo-note { margin: 14px 0 6px; font-size: var(--text-sm); color: var(--fg-muted); }

.cta {
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 20px 22px;
}
.cta h2 { font-size: var(--text-lg); color: var(--fg-strong); margin: 0 0 12px; }
.snippet {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  margin: 0 0 10px;
}
.cta a { color: var(--fg-link); }

.provenance {
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}
.provenance a { color: var(--fg-link); }