/* graphs.css — the graphs landing page.
   Built from _figures.css (the inline-SVG visual language) plus the
   page layout. Loaded only by pages/graphs.html. */

/* =======================================================================
   Graph figures — shared visual language for the hand-built inline SVG
   diagrams used by the graphs landing concepts.

   Every colour here resolves from the sitewide tokens, so light and dark
   both work with one copy of the markup. The SVG files carry no fill or
   stroke attributes of their own; they only carry classes.

   --g-warn is the one addition to the two-accent palette. A cyclic
   dependency, a removed edge and an untested branch all need to read as
   "this is the problem" and neither blue nor green says that. It is
   themed separately because amber on the light surface needs to go darker
   to stay legible.
   ======================================================================= */
:root { --g-warn: #F59E0B; --g-warn-rgb: 245, 158, 11; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --g-warn: #B45309; --g-warn-rgb: 180, 83, 9; }
}
:root[data-theme="light"] { --g-warn: #B45309; --g-warn-rgb: 180, 83, 9; }

.g-figure {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  padding: clamp(0.75rem, 2vw, 1.25rem);
}
.g-figure figcaption {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.g-svg { display: block; width: 100%; height: auto; }

/* nodes ---------------------------------------------------------------- */
.g-node        { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; }
.g-node-focus  { fill: rgba(var(--accent-1-rgb), 0.14); stroke: var(--accent-1); stroke-opacity: 1; stroke-width: 1.5; }
.g-node-warn   { fill: rgba(var(--g-warn-rgb), 0.10); stroke: var(--g-warn); stroke-opacity: 0.85; stroke-width: 1.3; }
.g-node-add    { fill: rgba(var(--accent-2-rgb), 0.12); stroke: var(--accent-2); stroke-opacity: 0.9; stroke-width: 1.3; }

/* edges ---------------------------------------------------------------- */
.g-edge      { fill: none; stroke: currentColor; stroke-opacity: 0.26; stroke-width: 1.4; }
.g-edge-hot  { fill: none; stroke: var(--accent-1); stroke-opacity: 0.95; stroke-width: 2; }
.g-edge-add  { fill: none; stroke: var(--accent-2); stroke-opacity: 0.95; stroke-width: 2; }
.g-edge-warn { fill: none; stroke: var(--g-warn); stroke-opacity: 0.95; stroke-width: 1.8; }
.g-arrow      { fill: currentColor; fill-opacity: 0.32; }
.g-arrow-hot  { fill: var(--accent-1); }
.g-arrow-warn { fill: var(--g-warn); }

/* text ----------------------------------------------------------------- */
.g-label {
  fill: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.g-label-focus { fill: var(--accent-1); font-weight: 600; }
.g-label-warn  { fill: var(--g-warn); }
.g-label-add   { fill: var(--accent-2); }
.g-member {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.g-sub, .g-axis {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 11px;
}
.g-edge-label {
  fill: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 10.5px;
}
.g-edge-label-warn { fill: var(--g-warn); font-weight: 600; }
.g-divider  { stroke: currentColor; stroke-opacity: 0.16; stroke-width: 1; }
.g-uml-tri  { fill: var(--surface); stroke: currentColor; stroke-opacity: 0.35; stroke-width: 1.2; }

/* dense real-scale figure ---------------------------------------------- */
.g-hair    { stroke: currentColor; stroke-opacity: 0.13; stroke-width: 0.7; }
.g-dot     { fill: currentColor; fill-opacity: 0.42; }
.g-dot-hot { fill: var(--accent-1); fill-opacity: 0.95; }
.g-swatch-add  { fill: var(--accent-2); }
.g-swatch-warn { fill: var(--g-warn); }

@media (prefers-reduced-motion: no-preference) {
  .g-edge, .g-edge-hot, .g-edge-add, .g-edge-warn { transition: stroke-opacity 0.25s var(--ease); }
}

/* stale-vs-generated contrast pair ------------------------------------- */
.g-stale       { stroke-opacity: 0.14; fill-opacity: 0.45; }
.g-stale-label { fill: var(--text-muted); fill-opacity: 0.7; }
.g-stamp {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.g-stamp-live { fill: var(--accent-2); }


/* =======================================================================
   Concept A — "The Graph Itself"
   Product-first. The visitor arrives from a graphs ad and sees a graph
   inside the first screen, with the six types one click apart.
   Only one primary action on the page: start the trial.
   ======================================================================= */

/* --- hero -------------------------------------------------------------
   The whole premise of this concept is that somebody arriving from a graphs
   ad sees a graph without scrolling, so the copy above the panel is kept
   deliberately short: two lines of headline, one line of lede, one button
   row. The trust note moves below the panel rather than pushing it down. */
.gr-hero { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.gr-hero-copy { max-width: 820px; margin: 0 auto 2rem; }
.gr-hero-copy h1 {
  text-wrap: balance;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: 0.85rem;
}
.gr-hero-copy .lead { max-width: 56ch; }
.gr-hero-copy .p-hero-actions { margin-top: 1.75rem; }
.gr-hero-note { margin-top: 1.25rem; text-align: center; }

/* --- view switcher ---------------------------------------------------- */
.gr-views {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.gr-views-bar {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--navbar-highlight);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.u-view-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.u-view-btn:hover { color: var(--text-primary); background: var(--input-bg); }
.u-view-btn.is-active {
  color: var(--accent-1);
  background: rgba(var(--accent-1-rgb), 0.12);
  border-color: rgba(var(--accent-1-rgb), 0.35);
}
.u-view-btn:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
.gr-views-stage { padding: clamp(1rem, 2.5vw, 1.75rem); }
/* The figures inside the stage supply their own frame via .g-figure on the
   graphs pages; inside this panel that second border would double up. */
.gr-views-stage .g-figure { border: 0; background: transparent; padding: 0; }
.u-view { display: none; }
.u-view.is-active { display: block; }

/* --- proof ribbon ----------------------------------------------------- */
.gr-ribbon { padding-top: 0; }
.gr-ribbon-label {
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* --- real scale ------------------------------------------------------- */
.gr-stats { margin-top: 2rem; }
/* .stats-row supplies only the column template; .grid supplies display:grid.
   Both classes are required, same as index.html and autosar.html. */
.gr-scale-media { padding: clamp(0.75rem, 2vw, 1.25rem); }
.gr-figure-flush { border: 0; background: transparent; padding: 0; }

/* --- working with graphs --------------------------------------------- */
.gr-work-card { display: flex; flex-direction: column; }
.gr-work-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 1.25rem;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gr-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.gr-work-card h3 { margin-bottom: 0.6rem; font-size: 1.0625rem; }

/* --- proof ------------------------------------------------------------ */
.gr-proof-grid { margin-bottom: 2rem; }
.gr-case-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gr-case-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.gr-case-link span { font-weight: 500; font-size: 0.8125rem; color: var(--accent-1); }
.gr-case-link:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* --- breakpoints ------------------------------------------------------ */
@media (max-width: 1100px) {
  .gr-case-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .p-row { grid-template-columns: minmax(0, 1fr); }
  .gr-stats { flex-wrap: wrap; gap: 1.25rem 2rem; }
}
@media (max-width: 760px) {
  .gr-case-row { grid-template-columns: minmax(0, 1fr); }
  .gr-hero-copy { margin-bottom: 2rem; }
  /* Below this width the 660-unit viewBox would shrink the node labels to
     roughly 7px. The figure scrolls sideways instead so the code names stay
     readable; overflow-x on the figure keeps it off the page scrollbar. */
  .gr-views-stage, .gr-scale-media { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gr-views-stage .g-svg, .gr-scale-media .g-svg { min-width: 540px; }
  .u-view-btn { font-size: 0.8125rem; padding: 0.45rem 0.8rem; }
}
@media (max-width: 480px) {
  .gr-work-shot { aspect-ratio: 16 / 11; }
}