/* ═══════════════════════════════════════════════════════════════════════
   LOMAinsights — shared public design primitives (--rb-* / .rb-* )

   Scope rule: every selector in this file is nested under .ribbon-public,
   the body class used by redesigned public marketing and tool surfaces.
   Nothing here can reach the homepage (.home), the healthcare demo, the
   logistics demo, or the protected pilot.

   Colour, spacing, type and motion values come from /home/tokens.css, the
   homepage-derived logo palette, which is the single source of truth. This
   file adds no new palette.

   Static-first: no element starts hidden here. GSAP only enhances.
   ═══════════════════════════════════════════════════════════════════════ */

.ribbon-public {
    /* ── Legacy variable compatibility ──────────────────────────────
       Older component stylesheets (industries/gallery.css, assessment)
       reference the Swiss-grid variable names. Map them onto the ribbon
       tokens so those components inherit the new system without needing
       /styles.css to be loaded. */
    --ink: var(--hm-on-paper);
    --muted: var(--hm-on-paper-muted);
    --line: var(--hm-line-paper);
    --line-soft: rgba(23, 32, 63, 0.07);
    --line-strong: rgba(23, 32, 63, 0.2);
    --accent: var(--hm-teal-deep);
    --accent-ink: #fff;
    --surface: #fff;
    --surface-alt: var(--hm-paper-2);
    --ok: #0d6a4f;
    --warn: #8a5a00;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-display: var(--hm-display);
    --text-h1: clamp(2.1rem, 4.4vw, 3.25rem);
    --text-h2: var(--hm-h2);
    --text-h3: var(--hm-h3);
    --text-base: var(--hm-body);
    --text-body: var(--hm-body);
    --text-sm: var(--hm-small);
    --text-xs: 0.8125rem;
    --text-mono: var(--hm-micro);

    --track-head: -0.03em;
    --track-tight: -0.015em;
    --track-mono: 0.12em;
    --measure: 68ch;

    --s-1: var(--hm-1);
    --s-2: var(--hm-2);
    --s-3: var(--hm-3);
    --s-4: var(--hm-4);
    --s-5: var(--hm-5);
    --s-6: var(--hm-6);
    --s-7: var(--hm-7);
    --s-8: var(--hm-8);
    --s-9: var(--hm-9);
    --gutter: clamp(20px, 5vw, 56px);
    --container: var(--hm-max);
    --radius: var(--hm-radius);
    --ease: var(--hm-ease);
    --ease-out: var(--hm-ease);

    margin: 0;
    background: var(--hm-paper);
    color: var(--hm-on-paper);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--hm-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.ribbon-public h1,
.ribbon-public h2,
.ribbon-public h3,
.ribbon-public h4 { margin: 0; line-height: 1.1; letter-spacing: -0.028em; font-weight: 600; }
.ribbon-public h1 { line-height: 1.04; letter-spacing: -0.04em; }
.ribbon-public p { margin: 0; }
.ribbon-public img, .ribbon-public svg { max-width: 100%; }
.ribbon-public a { color: var(--hm-teal-deep); }

.ribbon-public :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--hm-teal-deep);
    outline-offset: 3px;
    border-radius: var(--hm-radius-sm);
}
.ribbon-public .rb-ink :where(a, button, input, select, summary):focus-visible { outline-color: var(--hm-lavender); }

.ribbon-public :where([id], [tabindex="-1"]) { scroll-margin-top: var(--hm-anchor-offset); }

/* ── Layout ────────────────────────────────────────────────────────── */
.rb-shell { width: 100%; max-width: var(--hm-max); margin: 0 auto; padding-inline: clamp(20px, 5vw, 56px); }
.rb-section { padding-block: clamp(48px, 7vw, 96px); }
.rb-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.rb-ink { background: radial-gradient(120% 90% at 80% 6%, var(--hm-ink-3) 0%, var(--hm-ink-2) 44%, var(--hm-ink) 100%); color: var(--hm-on-ink); }
.rb-ink h1, .rb-ink h2, .rb-ink h3 { color: var(--hm-on-ink); }
.rb-ink p { color: var(--hm-on-ink-muted); }
.rb-ink a { color: var(--hm-lavender); }
.rb-paper-2 { background: var(--hm-paper-2); }

.rb-skip {
    position: absolute; left: -9999px; top: 0; z-index: 1000;
    background: var(--hm-ink); color: var(--hm-on-ink);
    padding: var(--hm-3) var(--hm-5); border-radius: 0 0 var(--hm-radius-sm) 0;
    text-decoration: none;
}
.rb-skip:focus { left: 0; }

.rb-sr, .ribbon-public .in-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}

/* ── Header ────────────────────────────────────────────────────────── */
/* The public header and footer are owned by /brand/navigation.css so the
   marketing surfaces cannot drift apart. The .rb-header / .rb-footer
   classes stay on the elements as hooks for the assessment print rules. */

/* ── Buttons (also reskins the legacy .btn markup emitted by JS) ───── */
.rb-btn,
.ribbon-public .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--hm-2);
    min-height: 48px; padding: var(--hm-3) var(--hm-6);
    border-radius: var(--hm-radius-pill); border: 1px solid transparent;
    font: inherit; font-size: var(--hm-small); font-weight: 600; letter-spacing: 0.01em;
    text-decoration: none; cursor: pointer; text-align: center;
    background: transparent; color: inherit;
    transition: transform var(--hm-dur-hover) var(--hm-ease),
                background-color var(--hm-dur-hover) var(--hm-ease),
                color var(--hm-dur-hover) var(--hm-ease),
                border-color var(--hm-dur-hover) var(--hm-ease);
}
.rb-btn--primary,
.ribbon-public .btn-primary {
    background: linear-gradient(105deg, var(--hm-teal-deep) 0%, var(--hm-indigo) 100%);
    color: #fff; border-color: transparent;
}
.rb-btn--primary:hover,
.ribbon-public .btn-primary:hover { transform: translateY(-2px); color: #fff; }

.rb-btn--quiet,
.ribbon-public .btn-secondary,
.ribbon-public .btn-ghost {
    border-color: currentColor; color: inherit; background: transparent;
}
.rb-btn--quiet:hover,
.ribbon-public .btn-secondary:hover,
.ribbon-public .btn-ghost:hover { transform: translateY(-2px); border-color: var(--hm-teal-deep); color: var(--hm-teal-deep); }
.rb-ink .rb-btn--quiet:hover,
.rb-ink .btn-secondary:hover,
.rb-ink .btn-ghost:hover { border-color: var(--hm-teal); color: var(--hm-teal); }

.rb-btn--sm,
.ribbon-public .btn-sm { min-height: 40px; padding: var(--hm-2) var(--hm-5); font-size: var(--hm-micro); }

.ribbon-public .btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Typography helpers ───────────────────────────────────────────── */
.rb-eyebrow {
    font-size: var(--hm-micro); font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--hm-teal-deep); margin: 0 0 var(--hm-4);
}
.rb-ink .rb-eyebrow { color: var(--hm-lavender); }
.rb-display { font-size: clamp(2.35rem, 5.4vw, 4.25rem); letter-spacing: -0.042em; }
.rb-display em {
    font-style: normal;
    background: linear-gradient(96deg, var(--hm-lavender) 0%, var(--hm-slate) 34%, var(--hm-teal) 78%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rb-h2 { font-size: var(--hm-h2); }
.rb-lead { font-size: var(--hm-lead); line-height: 1.5; max-width: 60ch; }
.rb-measure { max-width: 68ch; }

.rb-head { max-width: 64ch; margin-bottom: clamp(24px, 3.5vw, 44px); }
.rb-head p { margin-top: var(--hm-4); color: var(--hm-on-paper-muted); font-size: var(--hm-lead); }
.rb-ink .rb-head p { color: var(--hm-on-ink-muted); }

/* ── Panels, grids, notes ─────────────────────────────────────────── */
.rb-panel {
    background: #fff; border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-lg);
    padding: clamp(20px, 3vw, 32px); box-shadow: var(--hm-shadow);
}
.rb-ink .rb-panel { background: rgba(255, 255, 255, 0.05); border-color: var(--hm-line-ink); box-shadow: none; }
.rb-panel h3 { font-size: var(--hm-h3); }
.rb-panel p { color: var(--hm-on-paper-muted); font-size: var(--hm-small); }
.rb-ink .rb-panel p { color: var(--hm-on-ink-muted); }
.rb-panel ul { margin: 0; padding-left: 1.15em; color: var(--hm-on-paper-muted); font-size: var(--hm-small); display: grid; gap: var(--hm-2); }
.rb-ink .rb-panel ul { color: var(--hm-on-ink-muted); }

.rb-grid { display: grid; gap: var(--hm-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.rb-note {
    border: 1px solid var(--hm-line-paper); border-left: 3px solid var(--hm-teal);
    border-radius: var(--hm-radius); background: #fff;
    padding: var(--hm-4) var(--hm-5); display: grid; gap: var(--hm-2);
    font-size: var(--hm-small);
}
.rb-note strong { color: var(--hm-on-paper); }
.rb-note p, .rb-note li { color: var(--hm-on-paper-muted); margin: 0; }
.rb-ink .rb-note { background: rgba(255, 255, 255, 0.05); border-color: var(--hm-line-ink); border-left-color: var(--hm-teal); }
.rb-ink .rb-note strong { color: var(--hm-on-ink); }
.rb-ink .rb-note p, .rb-ink .rb-note li { color: var(--hm-on-ink-muted); }

.rb-pill {
    display: inline-flex; align-items: center; gap: var(--hm-2);
    border: 1px solid var(--hm-line-paper); border-radius: var(--hm-radius-pill);
    padding: 4px var(--hm-3); font-size: var(--hm-micro); font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-on-paper-muted);
    background: var(--hm-paper-2);
}
.rb-ink .rb-pill { background: rgba(255, 255, 255, 0.06); border-color: var(--hm-line-ink); color: var(--hm-on-ink-muted); }
.rb-pills { display: flex; flex-wrap: wrap; gap: var(--hm-2); }

.rb-actions { display: flex; flex-wrap: wrap; gap: var(--hm-3); margin-top: var(--hm-6); }

/* ── Ribbon rule: a thin gradient divider derived from the mark ───── */
.rb-rule {
    height: 4px; border: 0; margin: 0; border-radius: var(--hm-radius-pill);
    background: linear-gradient(90deg, var(--hm-lavender), var(--hm-slate) 28%, var(--hm-teal) 58%, var(--hm-indigo));
}

/* ── Footer ───────────────────────────────────────────────────────── */
/* Owned by /brand/navigation.css — see the header note above. */

/* ── Motion ───────────────────────────────────────────────────────── */
/* Nothing starts hidden in CSS. ribbon.js sets the from-state only after
   GSAP has loaded and only when motion is allowed. */
@media (prefers-reduced-motion: reduce) {
    .ribbon-public * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}