/* Shared card vocabulary, in two scopes, and the split is the point. */

/*
 * The landing page keeps the cooler values it was designed against, because the
 * landing carries blue artwork and the surfaces are supposed to sit under it.
 */
.fork-landing {
  --card-page: #090c10;
  --card-surface: #0f141b;
  --card-raised: #121820;
  --card-hover: #171e27;
  --card-text: #ebedef;
  --card-secondary: #a0a6ae;
  --card-muted: #858d98;
  --card-line: rgba(255, 255, 255, .06);
  --card-line-interactive: rgba(255, 255, 255, .13);
  --card-selected: #2a3038;
  --card-knob: #6e7681;
  --card-track-on: #39414a;
  --card-accent: var(--accent-blue);
  --card-positive: #68c89b;
  --card-negative: #ed8b8b;
  --card-radius: 12px;
  --card-control-radius: 6px;
  --card-space-1: 4px;
  --card-space-2: 8px;
  --card-space-3: 12px;
  --card-space-4: 16px;
  --card-space-5: 24px;
  --card-space-6: 32px;
  --card-transition: 160ms ease;
}

/*
 * The dashboard gets the neutral set, and it is a *different* set from the one
 * above rather than the same one inherited.
 *
 * This is the part that only became visible by looking at the rendered page. The
 * base surface is `#0f141b` — 15, 20, 27 — so the blue channel sits 12 above the
 * red, and a wall of panels in it reads as cool even with every literal
 * hand-picked colour removed. The overview had already noticed this and carried a
 * private copy of the palette in overview.css with the cast taken out:
 *
 *     --card-surface: #141618      instead of #0f141b
 *     --card-raised:  #191b1e      instead of #121820
 *     --card-hover:   #202327      instead of #171e27
 *
 * Converting the other four tabs onto the *base* tokens would have given them
 * 390 corrected rules and left every one of their surfaces the same bluish cast
 * the overview was written to avoid — the numbers would have said "zero blue
 * literals" and the page would still have looked blue. So the neutral set moves
 * up here, to where the vocabulary is defined, and every tab inherits it.
 *
 * `#view-manage-guild` is the wrapper around every tab, and `.fork-dashboard-overview`
 * is kept for the two tabs that also carry it, so the overview is unchanged by
 * this and the other seven tabs simply arrive at the same place.
 */
.fork-dashboard-overview, #view-manage-guild {
  --card-page: #0b0d0f;
  --card-surface: #141618;
  --card-raised: #191b1e;
  --card-hover: #202327;
  --card-text: #ebedef;
  --card-secondary: #a5a8ac;
  --card-muted: #858a91;
  --card-line: rgba(255, 255, 255, .07);
  --card-line-interactive: rgba(255, 255, 255, .13);
  --card-selected: #2a3038;
  --card-knob: #6e7681;
  --card-track-on: #39414a;
  --card-accent: var(--accent-blue);
  --card-positive: #68c89b;
  --card-negative: #ed8b8b;
  --card-radius: 12px;
  --card-control-radius: 6px;
  --card-space-1: 4px;
  --card-space-2: 8px;
  --card-space-3: 12px;
  --card-space-4: 16px;
  --card-space-5: 24px;
  --card-space-6: 32px;
  --card-transition: 160ms ease;
}

/*
 * Three tokens the palette was missing, and every one of them exists because a
 * state pair had quietly collapsed into a single value.
 *
 * The migration from the four tabs' hand-picked blues onto this vocabulary mapped
 * every colour to a token *by its own lightness*, which preserves how light a
 * colour is and throws away how it relates to the colour next to it. A toggle is
 * four colours that only mean anything in relation: a recessed track, a knob
 * visible against it, a filled track when on, and a knob visible against *that*.
 * Mapped by lightness, all four landed on `--card-hover` and the control became an
 * invisible circle inside an invisible pill. Measured across the four converted
 * tabs, 18 such pairs collapsed, and three of them were worse than cosmetic:
 *
 *     .moderation-table tbody tr:hover td  ==  tr.is-selected td
 *     .channel-row-item:hover              ==  .channel-row-item.is-selected
 *
 * A selected ledger row and a selected channel stopped being distinguishable from
 * the row under the cursor. That is a lost capability, not a duller colour.
 *
 * So: `--card-selected` sits visibly above `--card-hover` and is the only fill
 * that may mean "this one is the one", and `--card-knob` / `--card-track-on`
 * exist so a switch has something to be seen against. They are steps in the same
 * ramp as the surfaces above, not new hues.
 */
/* One surface, one boundary. No decorative light layer or hover movement. */
.fork-landing :is(.feature-card, .product-preview, .quote-layout blockquote, .final-cta),
.fork-dashboard-overview :is(.dashboard-panel, .dashboard-stat-grid, .dashboard-closing-card) {
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--card-surface);
  box-shadow: none;
  backdrop-filter: none;
  color: var(--card-text);
}
.fork-landing :is(.proof-grid article, .feature-card, .steps article, .quote-layout blockquote, .final-cta)::before,
.fork-landing :is(.proof-grid article, .feature-card, .steps article, .quote-layout blockquote, .final-cta)::after,
.fork-dashboard-overview :is(.dashboard-stat-grid article, .dashboard-panel, .dashboard-closing-card)::before,
.fork-dashboard-overview :is(.dashboard-stat-grid article, .dashboard-panel, .dashboard-closing-card)::after { content: none; }

.fork-landing :is(.metric-icon, .component-icon), .fork-dashboard-overview .card-icon {
  width: 20px; height: 20px; flex: 0 0 20px; padding: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; filter: none; color: var(--card-secondary);
}
.fork-landing :is(.metric-icon, .component-icon) svg, .fork-dashboard-overview .card-icon {
  width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; filter: none;
}
.fork-landing .feature-card:focus-visible, .fork-dashboard-overview :is(button, a):focus-visible {
  outline: 2px solid var(--card-accent); outline-offset: 3px;
}

/* Landing metrics form a strip with quiet dividers. */
.fork-landing .proof-strip { padding: var(--card-space-5) 0; border-block: 1px solid var(--card-line); background: var(--card-page); backdrop-filter: none; }
.fork-landing .proof-grid { gap: 0; }
.fork-landing .proof-grid article {
  min-width: 0; min-height: 64px; display: grid; grid-template-columns: 20px minmax(0, 1fr);
  align-items: start; gap: var(--card-space-3); padding: 0 var(--card-space-5);
  border: 0; border-right: 1px solid var(--card-line); border-radius: 0; background: none;
  box-shadow: none; transform: none; transition: none;
}
.fork-landing .proof-grid article:first-child { padding-left: 0; }
.fork-landing .proof-grid article:last-child { border-right: 0; }
.fork-landing .proof-grid article > div { display: flex; flex-direction: column; gap: var(--card-space-2); }
.fork-landing .proof-grid small { order: -1; color: var(--card-secondary); font-size: 13px; line-height: 20px; }
.fork-landing .proof-grid strong { font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.fork-landing #stat-bot-status { font-size: 15px; line-height: 26px; letter-spacing: 0; }
.fork-landing #stat-bot-status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--card-space-2); border-radius: 50%; background: var(--card-muted); vertical-align: middle; }
.fork-landing #stat-bot-status[data-status="online"]::before { background: var(--card-positive); }
.fork-landing #stat-bot-status[data-status="offline"]::before { background: var(--card-negative); }

/* Introduction and preview beside a compact, predictable 12-column feature grid. */
.fork-landing .feature-section { background: rgba(9, 12, 16, .82); }
.fork-landing .feature-layout {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "intro features" "preview features" "caption features";
  gap: var(--card-space-5) var(--card-space-6); align-items: start;
}
.fork-landing .feature-intro { grid-area: intro; }
.fork-landing .feature-intro h2 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 600; letter-spacing: -1px; }
.fork-landing .feature-intro > p:last-child { color: var(--card-secondary); max-width: 44ch; }
.fork-landing .feature-cards { grid-area: features; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: auto; gap: var(--card-space-2); }
.fork-landing .feature-card {
  position: relative; display: flex; flex-direction: column; grid-column: span 6; grid-row: auto;
  gap: var(--card-space-3); min-height: 0; padding: var(--card-space-5);
  transition: background-color var(--card-transition), border-color var(--card-transition);
}
.fork-landing .feature-card:first-child { background: var(--card-raised); }
.fork-landing .feature-card > .component-icon { width: 20px; height: 20px; }
.fork-landing .feature-card:first-child .component-icon { color: var(--card-accent); }
.fork-landing .feature-card > div { margin: 0; padding: 0; }
.fork-landing .feature-card h3 { margin: 0 0 var(--card-space-2); font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.2px; }
.fork-landing .feature-card p { margin: 0; max-width: 32ch; font-size: 13px; line-height: 1.55; color: var(--card-secondary); }
.fork-landing .feature-card > b { position: absolute; top: var(--card-space-5); right: var(--card-space-5); color: var(--card-muted); font-size: 14px; line-height: 20px; font-weight: 400; }
.fork-landing .feature-card:hover { transform: none; background: var(--card-hover); border-color: var(--card-line-interactive); box-shadow: none; text-decoration: none; }
.fork-landing .feature-card:hover > b { color: var(--card-text); transform: none; }
.fork-landing .product-preview { grid-area: preview; height: 236px; }
.fork-landing .product-note { grid-area: caption; margin: 0; color: var(--card-secondary); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; transform: none; }
.fork-landing .product-note br { display: none; }
.fork-landing .preview-sidebar { border-color: var(--card-line); }
.fork-landing .preview-bar { background: var(--card-raised); border-color: var(--card-line); }
.fork-landing .preview-stats { gap: 0; background: var(--card-raised); }
.fork-landing .preview-stats i { border: 0; border-right: 1px solid var(--card-line); border-radius: 0; background: none; }
.fork-landing .preview-stats i:last-child { border: 0; }

/* Steps are a sequence, not another set of floating cards. */
.fork-landing .setup-section { background: var(--card-page); border-color: var(--card-line); backdrop-filter: none; }
.fork-landing .steps { gap: 0; align-items: stretch; }
.fork-landing .steps article {
  grid-template-columns: 24px minmax(0, 1fr); gap: var(--card-space-3); align-content: start; align-items: start;
  padding: var(--card-space-4) var(--card-space-5); border: 0; border-left: 1px solid var(--card-line);
  border-radius: 0; background: none; box-shadow: none; transform: none; transition: none;
}
.fork-landing .steps article > b { width: 24px; height: 24px; border: 0; border-radius: 0; color: var(--card-muted); font-size: 12px; font-family: var(--font-mono); }
.fork-landing .steps article > .component-icon, .fork-landing .steps > i { display: none; }
.fork-landing .steps h3 { font-size: 14px; font-weight: 600; line-height: 1.4; margin-bottom: var(--card-space-2); }
.fork-landing .steps p { color: var(--card-secondary); font-size: 13px; line-height: 1.5; }
.fork-landing .quote-layout blockquote { min-height: 0; padding: var(--card-space-6); }
.fork-landing .quote-layout blockquote > span { position: static; display: block; height: 24px; color: var(--card-muted); font-size: 32px; }
.fork-landing .quote-layout blockquote p { color: var(--card-text); font-size: 15px; line-height: 1.6; }
.fork-landing .quote-layout blockquote footer { margin-top: var(--card-space-4); color: var(--card-text); font-size: 13px; }
.fork-landing .quote-layout blockquote small { color: var(--card-secondary); }
.fork-landing .final-cta { background: var(--card-raised); border-color: var(--card-line-interactive); }
.fork-landing .final-cta p { color: var(--card-secondary); font-size: 12px; }
.fork-landing .final-cta .btn-discord { background: var(--card-accent); border-color: transparent; border-radius: var(--card-control-radius); box-shadow: none; }
.fork-landing .final-cta .btn-discord:hover { filter: brightness(1.1); transform: none; box-shadow: none; }

@media (max-width: 1050px) {
  .fork-landing .setup-layout { grid-template-columns: 1fr; gap: var(--card-space-5); }
  .fork-landing .steps article:first-child { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .fork-landing .feature-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "features" "preview" "caption"; }
  .fork-landing .product-preview { width: 100%; max-width: 580px; }
  .fork-landing .product-note { display: block; }
  .fork-landing .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--card-space-5); }
  .fork-landing .proof-grid article:nth-child(odd) { padding-left: 0; }
  .fork-landing .proof-grid article:nth-child(even) { border-right: 0; }
}
@media (max-width: 560px) {
  .fork-landing .feature-card { grid-column: 1 / -1; }
  .fork-landing .proof-grid { grid-template-columns: minmax(0, 1fr); gap: var(--card-space-4); }
  .fork-landing .proof-grid article { padding: 0 0 var(--card-space-4); border: 0; border-bottom: 1px solid var(--card-line); }
  .fork-landing .proof-grid article:last-child { padding-bottom: 0; border-bottom: 0; }
  .fork-landing .steps { display: grid; }
  .fork-landing .steps article { padding: var(--card-space-4) 0; border: 0; border-bottom: 1px solid var(--card-line); }
  .fork-landing .steps article:last-child { border-bottom: 0; }
  .fork-landing .quote-layout { gap: var(--card-space-5); }
  .fork-landing .quote-layout blockquote { padding: var(--card-space-5); }
  .fork-landing .quote-layout blockquote footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .fork-landing .feature-card { transition: none; } }