/* Shared layout for hello-world pages.
 *
 * Component-pages (index.html, hello.html, hello-surface.html) compose
 * everything inside <main class="page"> from RunsNative components —
 * run-text, run-link, run-stack, run-button, run-text-field, run-code-block.
 * Document CSS here is intentionally minimal: just the page wrapper, the
 * demo-card override that turns <run-link> into a block surface, and
 * legacy utility classes preserved for variants.html / bundle-test.html.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--run-font-family-body, system-ui, -apple-system, sans-serif);
  font-size: var(--run-font-size-base, 1rem);
  line-height: var(--run-line-height-normal, 1.5);
  color: var(--run-color-text-primary, #1e293b);
  background: var(--run-color-surface-default, #f8fafc);
}

/* ── run-text size escape hatch ────────────────────────────────────────────
 *
 * <run-text> caps the `size` attribute at xl (its VALID_SIZES enum), so
 * sizes 2xl/3xl/4xl/5xl/6xl silently fall back to 'md' — and 'md' maps to
 * --run-font-size-md, which smoke-professional does NOT ship (it uses
 * --run-font-size-base instead). Net effect: any heading attempt above
 * 'xl' renders at an undefined font-size token. The skin reads
 *   font-size: var(--run-text-size, <sizeTokenMap[size]>)
 * so setting --run-text-size on the host overrides the size attr entirely.
 * Brand still drives the value via tokens; we just bypass the enum gate.
 */

run-text.size-2xl { --run-text-size: var(--run-font-size-2xl); }
run-text.size-3xl { --run-text-size: var(--run-font-size-3xl); }
run-text.size-4xl { --run-text-size: var(--run-font-size-4xl); }
run-text.size-5xl { --run-text-size: var(--run-font-size-5xl); }
run-text.size-6xl { --run-text-size: var(--run-font-size-6xl); }

/* Display variant ships with a tight heading line-height in the skin only
 * when variant === 'heading'; for variant='display' the skin uses body
 * line-height, which reads loose at hero sizes. Override via the same
 * --run-text-line-height escape hatch the skin honors. */
run-text.size-3xl,
run-text.size-4xl,
run-text.size-5xl,
run-text.size-6xl {
  --run-text-line-height: var(--run-font-semantic-line-height-heading, 1.15);
}

/* ── Page wrapper ──────────────────────────────────────────────────────── */

main.page {
  display: block;
  max-width: 44rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

@media (max-width: 36rem) {
  main.page { padding: 2rem 1.25rem 3rem; }
}

/* ── <run-link class="demo-card"> ──────────────────────────────────────────
 *
 * Turns the default inline <run-link> into a block-level card surface.
 * Overrides both the host's :host { display:inline } and the inner
 * <a part="base"> which is in shadow DOM (reached via ::part(base)).
 * Card chrome lives on the host so background/border honor the brand
 * tokens directly.
 */

run-link.demo-card {
  display: block;
  background: var(--run-color-surface-raised, #ffffff);
  border: 1px solid var(--run-color-border-default, #e2e8f0);
  border-radius: var(--run-radius-lg, 8px);
  transition:
    border-color var(--run-duration-fast, 100ms) ease,
    box-shadow var(--run-duration-fast, 100ms) ease;
}

run-link.demo-card:hover,
run-link.demo-card:focus-within {
  border-color: var(--run-color-intent-primary-base, #2563eb);
  box-shadow: var(--run-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.08));
}

/* The inner <a part="base"> is what receives clicks and shows focus rings.
 * Make it block-level, remove link decoration (the card's hover swap and
 * focus-ring are the affordances now), and pad the content area. */
run-link.demo-card::part(base) {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 1.125rem 1.25rem;
  border-radius: var(--run-radius-lg, 8px);
}

/* Keep the focus-visible affordance on the inner anchor, but use a
 * brand-tinted ring that matches the card's hover treatment. */
run-link.demo-card:focus-within::part(base) {
  outline: 2px solid var(--run-color-focus-ring, #2563eb);
  outline-offset: 2px;
}

/* ── Legacy utility classes (variants.html, bundle-test.html) ──────────── */

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.section { margin-bottom: 2rem; }

.section-label {
  font-size: var(--run-font-size-xs, 11px);
  font-weight: var(--run-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--run-letter-spacing-wide, 0.06em);
  color: var(--run-color-text-tertiary, #94a3b8);
  margin-bottom: 0.75rem;
}

.crumbs {
  font-size: var(--run-font-size-sm, 0.875rem);
  color: var(--run-color-text-secondary, #475569);
  margin-bottom: 1.5rem;
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--run-color-intent-primary-base, #2563eb);
}

/* Legacy pages don't have main.page — restore body padding for them. */
body:has(.section) {
  padding: 2.5rem;
}

body:has(.section) > h1 {
  font-family: var(--run-font-family-heading, inherit);
  font-size: var(--run-font-size-lg, 1.125rem);
  font-weight: var(--run-font-weight-semibold, 600);
  margin: 0 0 2rem;
  color: var(--run-color-text-primary, #0f172a);
}