/* =============================================================================
 * Contractor Showcase — single-source-of-truth stylesheet
 *
 * Density model:
 *   ONE knob (`--density`) controls all spacing. Lower it for tighter, raise
 *   it for airier. Every padding / gap / margin in the file derives from the
 *   `--space-N` scale, which itself derives from `--density`.
 *
 *   Default 0.85 = ~15% tighter than baseline. Set to 1.0 for baseline,
 *   0.7 for compact, 1.15 for airy.
 *
 * Architecture:
 *   1. Token import     — Open Props (CDN, no install)
 *   2. Layer order      — declared once, enforces specificity
 *   3. Site tokens      — density, spacing scale, color, type, elevation
 *   4. Base             — element resets and typography
 *   5. Layout           — page-shell + section rhythm
 *   6. Components       — semantic class names (.hero, .metric-card, ...)
 *   7. Utilities        — small set of one-shot helpers
 * ============================================================================= */

/* 1. TOKEN IMPORT */
@import "https://unpkg.com/[email protected]/open-props.min.css";

/* 2. LAYER ORDER */
@layer reset, tokens, base, layout, components, utilities;

/* 3. SITE TOKENS */
@layer tokens {
  :root {
    color-scheme: dark;

    /* === DENSITY KNOBS ===================================================
     * Two universal multipliers — change one number, affect the whole site.
     *
     *   --density     scales every padding / gap / margin (spacing scale)
     *   --font-scale  scales body font-size (and everything in em downstream)
     *
     * Defaults are tighter-than-baseline. Set both to 1.0 to undo.
     * =================================================================== */
    --density: 0.85;
    --font-scale: 0.94;

    /* Spacing scale — auto-scales with --density */
    --space-1: calc(0.25rem * var(--density));
    --space-2: calc(0.5rem  * var(--density));
    --space-3: calc(0.75rem * var(--density));
    --space-4: calc(1rem    * var(--density));
    --space-5: calc(1.25rem * var(--density));
    --space-6: calc(1.5rem  * var(--density));
    --space-7: calc(2rem    * var(--density));
    --space-8: calc(2.75rem * var(--density));
    --space-9: calc(4rem    * var(--density));
    --space-10: calc(5.5rem * var(--density));

    /* Layout-level spacing (clamped responsive, scale-derived) */
    --shell-pad-x:    clamp(var(--space-4), 4vw,    var(--space-8));
    --section-rhythm: clamp(var(--space-6), 3.2vw,  var(--space-8));
    --hero-pad-y:     clamp(var(--space-6), 3.5vw,  var(--space-8));
    --card-pad:       clamp(var(--space-3), 1.4vw,  var(--space-5));
    --card-pad-lg:    clamp(var(--space-4), 1.8vw,  var(--space-6));

    /* Reading rhythm */
    --leading-tight:  1.12;
    --leading-snug:   1.4;
    --leading-normal: 1.5;

    /* Type scale */
    --fs-mono-xs:  0.72rem;
    --fs-mono-sm:  0.78rem;
    --fs-xs:       0.82rem;
    --fs-sm:       0.9rem;
    --fs-md:       0.98rem;
    --fs-lg:       1.05rem;
    --fs-xl:       1.18rem;

    --shell-max: 1200px;

    /* Brand */
    --brand-primary: #2563eb;
    --brand-primary-strong: #1d4ed8;
    --brand-primary-deep: #1e3a8a;
    --brand-accent: #7c3aed;
    --brand-accent-strong: #6d28d9;
    --brand-accent-deep: #4c1d95;
    --brand-amber: #f59e0b;
    --brand-amber-strong: #d97706;
    --brand-emerald: #10b981;
    --brand-emerald-strong: #059669;

    /* Severity / status palette */
    --severity-high: #dc2626;
    --severity-high-soft: rgba(220, 38, 38, 0.18);
    --severity-high-text: #fca5a5;
    --severity-medium: #d97706;
    --severity-medium-soft: rgba(245, 158, 11, 0.18);
    --severity-medium-text: #fcd34d;
    --severity-low: #ca8a04;
    --severity-low-soft: rgba(202, 138, 4, 0.18);
    --severity-low-text: #fde68a;
    --status-success: #059669;
    --status-success-soft: rgba(5, 150, 105, 0.18);
    --status-success-text: #86efac;
    --status-info: #2563eb;
    --status-info-soft: rgba(37, 99, 235, 0.18);
    --status-info-text: #93c5fd;
    --status-violet: #7c3aed;
    --status-violet-soft: rgba(124, 58, 237, 0.18);
    --status-violet-text: #c4b5fd;
    --status-neutral: #475569;
    --status-neutral-soft: #1e293b;
    --status-neutral-text: #cbd5e1;

    /* Surfaces + text */
    --surface-page: #0b1120;
    --surface-page-tint: #111c33;
    --surface-card: #111c33;
    --surface-card-hover: #1e293b;
    --border-subtle: #334155;
    --border-strong: #475569;
    --border-card: #334155;
    --text-headline: #e2e8f0;
    --text-body: #cbd5e1;
    --text-muted: #94a3b8;
    --text-subtle: #64748b;
    --text-on-brand: #ffffff;

    /* Elevation */
    --elev-1: 0 1px 2px rgb(0 0 0 / 0.40);
    --elev-2: 0 1px 3px rgb(0 0 0 / 0.50), 0 1px 2px rgb(0 0 0 / 0.40);
    --elev-3: 0 4px 6px rgb(0 0 0 / 0.50), 0 2px 4px rgb(0 0 0 / 0.40);
    --elev-4: 0 10px 15px rgb(0 0 0 / 0.55), 0 4px 6px rgb(0 0 0 / 0.40);
    --elev-5: 0 20px 25px rgb(0 0 0 / 0.60), 0 8px 10px rgb(0 0 0 / 0.40);

    /* Radii */
    --radius-1: 6px;
    --radius-2: 10px;
    --radius-3: 14px;
    --radius-pill: 999px;

    /* Fonts */
    --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono-stack: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
  }
}

/* 4. BASE */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--surface-page);
    background-image:
      radial-gradient(ellipse 1100px 500px at 50% -150px, rgb(37 99 235 / 0.04), transparent 60%);
    color: var(--text-body);
    font-family: var(--font-text);
    font-size: calc(1rem * var(--font-scale));
    line-height: var(--leading-normal);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--text-headline);
    line-height: var(--leading-tight);
    letter-spacing: -0.022em;
    margin: 0;
  }

  h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; }
  h2 { font-size: clamp(1.45rem, 2.6vw, 2rem);  font-weight: 800; letter-spacing: -0.03em; }
  h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
  h4 { font-size: 1rem;    font-weight: 600; }

  p { margin: 0; max-inline-size: 65ch; }

  a {
    color: var(--brand-primary);
    text-decoration: none;
    text-decoration-skip-ink: auto;
    transition: color 0.15s, text-decoration-color 0.15s;
  }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 2px; }

  code, kbd, samp {
    font-family: var(--font-mono-stack);
    font-size: 0.86em;
    background: var(--surface-page-tint);
    padding: 0.1em 0.32em;
    border-radius: 4px;
    color: var(--text-headline);
    border: 1px solid var(--border-subtle);
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }

  /* Grid + flex children must allow shrink-below-content for code wrapping */
  .feature-card,
  .commit-card,
  .bug-card,
  .metric-card,
  .phase-card,
  .reco-item { min-inline-size: 0; }

  hr {
    border: 0;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, var(--border-subtle) 20%, var(--border-subtle) 80%, transparent);
    margin-block: var(--space-7);
  }
}

/* 5. LAYOUT */
@layer layout {
  .shell {
    max-inline-size: var(--shell-max);
    margin-inline: auto;
    padding-inline: var(--shell-pad-x);
  }

  .section {
    padding-block: var(--section-rhythm);
  }

  .section + .section {
    padding-block-start: 0;
  }

  .section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
  }

  .section-head__hint {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-sm);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .section-intro {
    max-inline-size: 75ch;
    color: var(--text-body);
    margin-block-end: var(--space-5);
    font-size: var(--fs-md);
    line-height: var(--leading-normal);
  }
}

/* 6. COMPONENTS */
@layer components {

  /* ---- Hero ---- */
  .hero {
    position: relative;
    color: var(--text-on-brand);
    background:
      radial-gradient(ellipse 90% 70% at 25% 15%, rgb(124 58 237 / 0.55), transparent 65%),
      radial-gradient(ellipse 70% 60% at 80% 90%, rgb(245 158 11 / 0.20), transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 50%, rgb(37 99 235 / 0.50), transparent 65%),
      linear-gradient(135deg, #0a0e2e 0%, #1e1b4b 35%, var(--brand-accent-deep) 75%, var(--brand-primary-deep) 100%);
    padding-block: var(--hero-pad-y);
    overflow: hidden;
    isolation: isolate;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%23ffffff' fill-opacity='0.025'><circle cx='2' cy='2' r='1'/></g></svg>");
    z-index: 0;
  }

  .hero__inner { position: relative; z-index: 2; }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.92);
    margin-block-end: var(--space-4);
  }

  .hero__pulse {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--brand-emerald);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(16 185 129 / 0.7);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgb(16 185 129 / 0.55); transform: scale(1); }
    50% { box-shadow: 0 0 0 8px rgb(16 185 129 / 0); transform: scale(1.15); }
  }

  .hero__title {
    color: white;
    margin-block-end: var(--space-3);
    text-wrap: balance;
    text-shadow: 0 1px 30px rgb(0 0 0 / 0.2);
  }

  .hero__lede {
    color: rgb(226 232 240 / 0.92);
    font-size: clamp(0.98rem, 1.4vw, 1.1rem);
    line-height: var(--leading-snug);
    max-inline-size: 62ch;
    margin-block-end: var(--space-4);
  }

  .hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
    line-height: 1;
  }
  .chip:hover { transform: translateY(-1px); text-decoration: none; }

  .chip--solid {
    background: var(--brand-amber);
    color: #0f172a;
    box-shadow: 0 4px 14px rgb(245 158 11 / 0.35);
  }
  .chip--solid:hover { background: #fbbf24; box-shadow: 0 6px 18px rgb(245 158 11 / 0.5); color: #0f172a; }

  .chip--ghost {
    background: rgb(255 255 255 / 0.10);
    color: white;
    border: 1px solid rgb(255 255 255 / 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .chip--ghost:hover { background: rgb(255 255 255 / 0.18); color: white; }

  /* ---- Metric grid ---- */
  .metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
  }

  .metric-card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-3);
    padding: var(--card-pad);
    box-shadow: var(--elev-2);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    overflow: hidden;
    isolation: isolate;
  }
  .metric-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: var(--brand-primary);
  }
  .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--elev-4);
    border-color: var(--border-strong);
  }

  .metric-card__label {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
    font-weight: 600;
  }

  .metric-card__value {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.5vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--brand-primary-strong);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.035em;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-deep));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .metric-card__hint {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    margin: 0;
  }

  .metric-card--accent::before { background: var(--brand-accent); }
  .metric-card--accent .metric-card__value {
    background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-deep));
    background-clip: text;
    -webkit-background-clip: text;
  }
  .metric-card--success::before { background: var(--brand-emerald); }
  .metric-card--success .metric-card__value {
    background: linear-gradient(135deg, var(--brand-emerald), var(--brand-emerald-strong));
    background-clip: text;
    -webkit-background-clip: text;
  }
  .metric-card--warning::before { background: var(--brand-amber); }
  .metric-card--warning .metric-card__value {
    background: linear-gradient(135deg, var(--brand-amber), var(--brand-amber-strong));
    background-clip: text;
    -webkit-background-clip: text;
  }

  /* ---- Phase / arc cards ---- */
  .phase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
  }

  .phase-card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-3);
    padding: var(--card-pad-lg);
    box-shadow: var(--elev-2);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }
  .phase-card:hover { transform: translateY(-3px); box-shadow: var(--elev-4); }

  .phase-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    inline-size: 4px;
    background: var(--brand-primary);
  }
  .phase-card--audit::before { background: linear-gradient(180deg, var(--brand-accent), var(--brand-accent-deep)); }
  .phase-card--fix::before { background: linear-gradient(180deg, var(--brand-emerald), var(--brand-emerald-strong)); }
  .phase-card--perf::before { background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-deep)); }

  .phase-card__index {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-xs);
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
    font-weight: 600;
  }

  .phase-card__title {
    margin-block-end: var(--space-3);
    color: var(--text-headline);
  }

  .phase-card p {
    color: var(--text-body);
    line-height: var(--leading-snug);
    font-size: var(--fs-sm);
  }

  .phase-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-4);
  }

  /* ---- Commit cards ---- */
  .commit-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .commit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--card-pad-lg);
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-3);
    box-shadow: var(--elev-2);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  }
  .commit-card:hover {
    box-shadow: var(--elev-4);
    border-color: var(--brand-primary);
    transform: translateY(-2px);
  }

  @media (min-width: 760px) {
    .commit-card { grid-template-columns: 11rem minmax(0, 1fr); }
  }

  .commit-card__sha {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--status-info-soft);
    padding: 0.16rem 0.5rem;
    border-radius: 5px;
    border: 1px solid rgb(37 99 235 / 0.15);
    display: inline-block;
  }
  .commit-card__sha:hover { background: var(--status-info); color: white; text-decoration: none; }

  .commit-card__date {
    display: block;
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-sm);
    color: var(--text-muted);
    margin-block-start: var(--space-2);
  }

  .commit-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
  }

  .commit-card__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-headline);
    margin: 0;
    letter-spacing: -0.015em;
  }

  .commit-card p {
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: var(--leading-snug);
  }

  .commit-card__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding-block-start: var(--space-4);
    border-block-start: 1px dashed var(--border-subtle);
  }

  .commit-card__details > div { margin: 0; }

  .commit-card__detail-label {
    display: block;
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-1);
    font-weight: 600;
  }

  .commit-card__detail-value {
    color: var(--text-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    margin: 0;
  }

  /* ---- Bug queue grid ---- */
  .bug-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-2);
  }

  .bug-card {
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-inline-start: 3px solid var(--severity-medium);
    border-radius: var(--radius-2);
    padding: var(--space-3) var(--space-4);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    box-shadow: var(--elev-1);
  }
  .bug-card:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }
  .bug-card--high { border-inline-start-color: var(--severity-high); }

  .bug-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .bug-card__id {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--brand-primary);
  }

  .bug-card__title {
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: var(--leading-snug);
    margin: 0;
  }

  /* ---- Badges ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.28rem 0.6rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono-stack);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
  }
  .badge--high     { background: var(--severity-high-soft);   color: var(--severity-high-text);   border-color: rgb(220 38 38 / 0.2); }
  .badge--medium   { background: var(--severity-medium-soft); color: var(--severity-medium-text); border-color: rgb(217 119 6 / 0.2); }
  .badge--low      { background: var(--severity-low-soft);    color: var(--severity-low-text);    border-color: rgb(202 138 4 / 0.2); }
  .badge--success  { background: var(--status-success-soft);  color: var(--status-success-text);  border-color: rgb(5 150 105 / 0.2); }
  .badge--info     { background: var(--status-info-soft);     color: var(--status-info-text);     border-color: rgb(37 99 235 / 0.2); }
  .badge--neutral  { background: var(--status-neutral-soft);  color: var(--status-neutral-text);  border-color: rgb(71 85 105 / 0.2); }
  .badge--accent   { background: var(--status-violet-soft);   color: var(--status-violet-text);   border-color: rgb(124 58 237 / 0.2); }

  /* ---- Feature / quality grid ---- */
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
  }

  .feature-card {
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-3);
    padding: var(--card-pad-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--elev-2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .feature-card:hover { transform: translateY(-3px); box-shadow: var(--elev-4); }

  .feature-card__icon {
    inline-size: 2.4rem;
    block-size: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-2);
    background: linear-gradient(135deg, var(--status-info-soft), var(--status-violet-soft));
    color: var(--status-info-text);
    font-size: 1.25rem;
    border: 1px solid rgb(37 99 235 / 0.12);
  }

  .feature-card__title {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-headline);
    margin: 0;
  }

  .feature-card p {
    color: var(--text-body);
    font-size: var(--fs-sm);
    line-height: var(--leading-snug);
    margin: 0;
  }

  /* ---- Recommendation list ---- */
  .reco-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .reco-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: var(--card-pad);
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    border-inline-start: 4px solid var(--brand-primary);
    border-radius: var(--radius-2);
    box-shadow: var(--elev-1);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .reco-item:hover { transform: translateX(2px); box-shadow: var(--elev-3); }

  .reco-item--p0 { border-inline-start-color: var(--severity-high); }
  .reco-item--p1 { border-inline-start-color: var(--severity-medium); }
  .reco-item--p2 { border-inline-start-color: var(--status-info); }

  .reco-item__priority {
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-sm);
    font-weight: 800;
    letter-spacing: 0.05em;
    color: white;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-2);
    background: var(--severity-high);
    line-height: 1;
    align-self: start;
  }
  .reco-item--p1 .reco-item__priority { background: var(--severity-medium); }
  .reco-item--p2 .reco-item__priority { background: var(--status-info); }

  .reco-item__body h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-lg);
  }
  .reco-item__body p {
    font-size: var(--fs-sm);
    color: var(--text-body);
    line-height: var(--leading-snug);
    margin: 0;
  }

  /* ---- Footer ---- */
  .site-footer {
    margin-block-start: var(--section-rhythm);
    padding-block: var(--space-7);
    background: linear-gradient(180deg, var(--surface-page-tint), var(--surface-page));
    border-block-start: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--fs-sm);
  }

  .site-footer h3 {
    font-size: var(--fs-mono-sm);
    color: var(--text-headline);
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-mono-stack);
    font-weight: 700;
  }

  .site-footer ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .site-footer li {
    margin-block: var(--space-1);
    font-size: var(--fs-xs);
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-6);
    margin-block-end: var(--space-5);
  }

  .site-footer__legal {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border-subtle);
    font-family: var(--font-mono-stack);
    font-size: var(--fs-mono-sm);
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* 7. UTILITIES */
@layer utilities {
  .stack > * + * { margin-block-start: var(--space-3); }
  .text-mono { font-family: var(--font-mono-stack); }
  .text-muted { color: var(--text-muted); }
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}