/* ============================================================================
   Rooted Stack — Components
   Two layers:
   1) Legacy rl-* classes, redefined against the authoritative palette so the
      whole existing surface re-themes with no per-view churn.
   2) New rs-* component vocabulary for the richer design language.
   ============================================================================ */

/* ─────────────────────────  LAYOUT CHROME  ───────────────────────── */
.rl-header, .rs-header {
    background: var(--rs-deep-water);
    padding: 0 var(--rs-gutter);
    position: sticky; top: 0; z-index: var(--rs-z-header);
    border-bottom: 1px solid rgba(127,176,166,.18);
}
.rl-header-inner, .rs-header-inner {
    max-width: var(--rs-maxw); margin: 0 auto;
    height: var(--rs-header-h);
    display: flex; align-items: center; justify-content: space-between; gap: var(--rs-space-4);
}
.rl-logo, .rs-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.rl-logo:hover, .rs-logo:hover { text-decoration: none; }
.rl-logo-mark, .rs-logo-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: linear-gradient(150deg, var(--rs-ink) 0%, var(--rs-deep-water) 55%, var(--rs-sea-glass) 100%);
    display: grid; place-items: center; flex: none;
}
.rl-logo-word, .rs-logo-word {
    font-family: var(--rs-serif); font-weight: 400; font-size: 20px; color: var(--rs-on-ink); letter-spacing: .01em;
}
.rl-header a.rl-back, .rs-header .rs-navlink {
    color: var(--rs-on-ink-muted); text-decoration: none; font-size: var(--rs-fs-sm); font-weight: 500;
    transition: color var(--rs-dur-2) var(--rs-ease);
}
.rl-header a.rl-back:hover, .rs-header .rs-navlink:hover { color: var(--rs-on-ink); text-decoration: none; }
.rs-header .rs-navlink[aria-current] { color: var(--rs-on-ink); }

.rl-main, .rs-main {
    flex: 1; width: 100%; max-width: var(--rs-maxw); margin: 0 auto;
    padding: clamp(28px, 5vw, 52px) var(--rs-gutter) var(--rs-space-20);
}

.rl-footer, .rs-footer {
    background: var(--rs-ink); color: var(--rs-on-ink-muted);
    font-size: var(--rs-fs-sm); padding: var(--rs-space-6) var(--rs-gutter); text-align: center;
}
.rl-footer a, .rs-footer a { color: rgba(244,239,228,.8); text-decoration: none; }
.rl-footer a:hover, .rs-footer a:hover { color: var(--rs-on-ink); text-decoration: underline; }

/* ─────────────────────────  EYEBROW / SECTION HEADER  ───────────────────────── */
.rl-eyebrow, .rs-eyebrow-pill {
    display: inline-block;
    background: rgba(127,176,166,.14);
    border: 1px solid rgba(127,176,166,.36);
    border-radius: var(--rs-radius-pill);
    padding: 4px 14px; margin-bottom: 14px;
    color: var(--rs-teal-400); font-family: var(--rs-sans);
    font-size: var(--rs-fs-xs); font-weight: 600;
    letter-spacing: var(--rs-track-caps); text-transform: uppercase;
}
.rl-h1 {
    font-family: var(--rs-serif); font-weight: 400;
    font-size: var(--rs-fs-h1); line-height: var(--rs-lh-snug); color: var(--rs-text-strong);
    letter-spacing: -0.01em;
}
.rl-sub { color: var(--rs-text-body); font-size: var(--rs-fs-lead); line-height: var(--rs-lh-body); }

.rs-section-head { margin-bottom: var(--rs-space-6); }
.rs-section-head .rs-h2 { margin-top: 6px; }

/* ─────────────────────────  BUTTONS  ─────────────────────────
   Primary = Deep Water. Links/quiet = Hibiscus. Ochre is NEVER a button. */
.rl-btn, .rs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--rs-action); color: var(--rs-on-ink);
    text-decoration: none; padding: 12px 22px; border-radius: var(--rs-radius-md);
    font-family: var(--rs-sans); font-size: var(--rs-fs-sm); font-weight: 600;
    border: 1px solid transparent; cursor: pointer; line-height: 1.1;
    transition: background var(--rs-dur-2) var(--rs-ease), transform var(--rs-dur-1) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease);
}
.rl-btn:hover, .rs-btn:hover { background: var(--rs-action-hover); color: var(--rs-on-ink); text-decoration: none; box-shadow: var(--rs-shadow-raised); }
.rl-btn:active, .rs-btn:active { transform: translateY(1px); }
.rl-btn--block, .rs-btn--block { width: 100%; }

.rs-btn--secondary {
    background: transparent; color: var(--rs-deep-water);
    border-color: var(--rs-line); box-shadow: none;
}
.rs-btn--secondary:hover { background: rgba(15,58,62,.05); color: var(--rs-deep-water); border-color: var(--rs-sea-glass); box-shadow: none; }

.rs-btn--ghost { background: transparent; color: var(--rs-link); border-color: transparent; box-shadow: none; }
.rs-btn--ghost:hover { background: rgba(194,69,45,.07); color: var(--rs-link); box-shadow: none; }

.rs-btn--on-ink { background: var(--rs-chart-paper); color: var(--rs-deep-water); }
.rs-btn--on-ink:hover { background: #fff; color: var(--rs-deep-water); }

.rs-btn--sm { padding: 8px 14px; font-size: var(--rs-fs-xs); }
.rs-btn--lg { padding: 15px 28px; font-size: var(--rs-fs-body); }
.rs-btn[disabled], .rs-btn:disabled { opacity: .5; cursor: not-allowed; }

.rs-link { color: var(--rs-link); font-weight: 600; text-decoration: none; }
.rs-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.rs-link--arrow::after { content: " \2192"; }

/* ─────────────────────────  CARDS  ───────────────────────── */
.rl-card, .rs-card {
    background: var(--rs-surface);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius-lg);
    box-shadow: var(--rs-shadow-card);
}
.rs-card--pad { padding: clamp(18px, 3vw, 28px); }
.rs-card--sage { background: var(--rs-surface-sage); border-color: var(--rs-sea-glass); }
.rs-card--ink { background: var(--rs-deep-water); border-color: transparent; color: var(--rs-on-ink); }
.rs-card--ink .rs-h1, .rs-card--ink .rs-h2, .rs-card--ink .rs-h3 { color: var(--rs-on-ink); }
.rs-card--ink .rs-body, .rs-card--ink .rs-sm { color: var(--rs-on-ink-muted); }

/* Interactive card (listing / provider). Lifts on hover, quietly. */
a.rs-card, .rs-card--link { transition: transform var(--rs-dur-2) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease), border-color var(--rs-dur-2) var(--rs-ease); }
a.rs-card:hover, .rs-card--link:hover { transform: translateY(-3px); box-shadow: var(--rs-shadow-pop); border-color: var(--rs-sea-glass); text-decoration: none; }

/* ─────────────────────────  BADGES / TAGS  ─────────────────────────
   Ochre stays out of badges — it belongs to pins. */
.rs-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--rs-sans); font-size: var(--rs-fs-xs); font-weight: 700;
    line-height: 1; padding: 4px 10px; border-radius: var(--rs-radius-pill);
    letter-spacing: .02em;
}
.rs-badge--featured { background: var(--rs-deep-water); color: var(--rs-on-ink); }
.rs-badge--verified { background: rgba(127,176,166,.22); color: var(--rs-teal-800); border: 1px solid var(--rs-sea-glass); }
.rs-badge--live { background: var(--rs-hibiscus); color: #fff; }
.rs-badge--live .rs-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: rs-pulse 1.8s var(--rs-ease-out) infinite; }
.rs-badge--scheduled { background: var(--rs-paper-2); color: var(--rs-deep-water); border: 1px solid var(--rs-line); }
.rs-badge--soft { background: rgba(15,58,62,.06); color: var(--rs-text-body); }

.rs-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--rs-mono); font-size: var(--rs-fs-xs); text-transform: uppercase;
    letter-spacing: .08em; color: var(--rs-text-muted);
    border: 1px solid var(--rs-line); border-radius: var(--rs-radius-xs);
    padding: 3px 8px; background: var(--rs-surface);
}

@keyframes rs-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6);} 70% { box-shadow: 0 0 0 6px rgba(255,255,255,0);} 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0);} }

/* ─────────────────────────  CHIPS / PILLS (filters)  ───────────────────────── */
.rs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rs-sans); font-size: var(--rs-fs-sm); font-weight: 600;
    text-decoration: none; padding: 6px 13px; border-radius: var(--rs-radius-pill);
    border: 1px solid var(--rs-line); color: var(--rs-text-body); background: var(--rs-surface);
    cursor: pointer; line-height: 1.15;
    transition: background var(--rs-dur-2) var(--rs-ease), border-color var(--rs-dur-2) var(--rs-ease), color var(--rs-dur-2) var(--rs-ease);
}
.rs-chip:hover { border-color: var(--rs-sea-glass); color: var(--rs-deep-water); text-decoration: none; }
.rs-chip[aria-pressed="true"], .rs-chip--on {
    background: var(--rs-deep-water); border-color: var(--rs-deep-water); color: var(--rs-on-ink);
}
.rs-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rs-chip-label { font-size: var(--rs-fs-xs); color: var(--rs-text-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Coordinate chip — proof the map is running underneath. */
.rs-coord-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--rs-mono); font-size: var(--rs-fs-coord); letter-spacing: var(--rs-track-coord);
    text-transform: uppercase; color: var(--rs-text-muted);
    background: var(--rs-surface); border: 1px solid var(--rs-line);
    border-radius: var(--rs-radius-pill); padding: 4px 11px;
}
.rs-coord-chip::before { content: "\25C9"; color: var(--rs-ochre); font-size: .85em; }

/* ─────────────────────────  FORMS  ───────────────────────── */
.rl-field, .rs-field { margin-bottom: var(--rs-space-4); }
.rl-field label, .rs-field label, .rs-label-block {
    display: block; font-size: var(--rs-fs-sm); font-weight: 600; color: var(--rs-text); margin-bottom: 6px;
}
.rl-field input, .rs-field input, .rs-field select, .rs-field textarea, .rs-input {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--rs-line); border-radius: var(--rs-radius-md);
    font-family: var(--rs-sans); font-size: var(--rs-fs-body); color: var(--rs-text);
    background: var(--rs-surface); line-height: 1.4;
    transition: border-color var(--rs-dur-2) var(--rs-ease), box-shadow var(--rs-dur-2) var(--rs-ease);
}
.rl-field input:focus, .rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus, .rs-input:focus {
    outline: none; border-color: var(--rs-sea-glass); box-shadow: var(--rs-glow-focus);
}
.rs-field-hint { font-size: var(--rs-fs-xs); color: var(--rs-text-subtle); margin-top: 5px; }
.rs-field-error { font-size: var(--rs-fs-xs); color: var(--rs-hibiscus); margin-top: 5px; font-weight: 600; }
.rs-field--invalid input, .rs-field--invalid textarea { border-color: var(--rs-hibiscus); }

/* ─────────────────────────  ALERTS  ───────────────────────── */
.rl-alert, .rs-alert {
    border-radius: var(--rs-radius-md); padding: 13px 16px;
    font-size: var(--rs-fs-sm); line-height: 1.5; margin-bottom: var(--rs-space-4);
    border: 1px solid transparent;
}
.rl-alert--err, .rs-alert--err { background: rgba(194,69,45,.07); border-color: rgba(194,69,45,.30); color: var(--rs-hibiscus); }
.rl-alert--ok, .rs-alert--ok { background: rgba(127,176,166,.14); border-color: rgba(127,176,166,.45); color: var(--rs-teal-800); }
.rs-alert--info { background: rgba(15,58,62,.05); border-color: var(--rs-line); color: var(--rs-text-body); }
.rs-alert--warn { background: rgba(226,154,45,.10); border-color: rgba(226,154,45,.40); color: #8a5a12; }

/* ─────────────────────────  STATS  ───────────────────────── */
.rs-stats { display: flex; flex-wrap: wrap; gap: var(--rs-space-8); }
.rs-stat { display: flex; flex-direction: column; gap: 2px; }
.rs-stat-num { font-family: var(--rs-serif); font-weight: 400; font-size: var(--rs-fs-h2); line-height: 1; color: var(--rs-text-strong); }
.rs-stat-label { font-family: var(--rs-sans); font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: var(--rs-track-caps); color: var(--rs-text-muted); }

/* ─────────────────────────  EMPTY STATE  ───────────────────────── */
.rs-empty { text-align: center; padding: clamp(28px, 6vw, 56px) var(--rs-space-6); color: var(--rs-text-muted); }
.rs-empty-mark { width: 56px; height: 56px; margin: 0 auto var(--rs-space-4); display: grid; place-items: center; border-radius: 50%; background: rgba(127,176,166,.16); color: var(--rs-teal-400); }
.rs-empty h3 { font-family: var(--rs-serif); font-weight: 400; font-size: var(--rs-fs-h3); color: var(--rs-text-strong); margin-bottom: 6px; }

/* ─────────────────────────  PROGRESS (onboarding stepper)  ───────────────────────── */
.rs-progress { display: flex; align-items: center; gap: 0; width: 100%; }
.rs-progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; position: relative; text-align: center; }
.rs-progress-step::before,
.rs-progress-step::after {
    content: ""; position: absolute; top: 13px; height: 2px; background: var(--rs-line); z-index: 0;
}
.rs-progress-step::before { left: 0; width: 50%; }
.rs-progress-step::after { right: 0; width: 50%; }
.rs-progress-step:first-child::before, .rs-progress-step:last-child::after { display: none; }
.rs-progress-dot {
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
    background: var(--rs-surface); border: 2px solid var(--rs-line);
    font-family: var(--rs-mono); font-size: 12px; font-weight: 500; color: var(--rs-text-muted);
}
.rs-progress-name { font-size: var(--rs-fs-xs); color: var(--rs-text-muted); max-width: 12ch; }
.rs-progress-step--done .rs-progress-dot { background: var(--rs-sea-glass); border-color: var(--rs-sea-glass); color: var(--rs-deep-water); }
.rs-progress-step--done::before, .rs-progress-step--done::after { background: var(--rs-sea-glass); }
.rs-progress-step--current .rs-progress-dot { background: var(--rs-deep-water); border-color: var(--rs-deep-water); color: var(--rs-on-ink); }
.rs-progress-step--current::before { background: var(--rs-sea-glass); }
.rs-progress-step--current .rs-progress-name { color: var(--rs-deep-water); font-weight: 600; }

/* Linear progress bar */
.rs-bar { height: 8px; border-radius: var(--rs-radius-pill); background: var(--rs-line-soft); overflow: hidden; }
.rs-bar > i { display: block; height: 100%; background: var(--rs-sea-glass); border-radius: inherit; transition: width var(--rs-dur-3) var(--rs-ease); }

/* ─────────────────────────  TIMELINE / ACTIVITY  ───────────────────────── */
.rs-timeline { position: relative; padding-left: 24px; }
.rs-timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--rs-line); }
.rs-timeline-item { position: relative; padding-bottom: var(--rs-space-5); }
.rs-timeline-item::before { content: ""; position: absolute; left: -22px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rs-sea-glass); box-shadow: 0 0 0 3px var(--rs-chart-paper); }
.rs-timeline-item--now::before { background: var(--rs-hibiscus); }
.rs-timeline-time { font-family: var(--rs-mono); font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--rs-text-subtle); }

/* ─────────────────────────  CTA BLOCK  ───────────────────────── */
.rs-cta {
    background: var(--rs-deep-water); color: var(--rs-on-ink);
    border-radius: var(--rs-radius-xl); padding: clamp(28px, 5vw, 56px);
    position: relative; overflow: hidden;
}
.rs-cta .rs-h2, .rs-cta .rs-display { color: var(--rs-on-ink); }
.rs-cta .rs-lead { color: var(--rs-on-ink-muted); }
.rs-cta::after { /* faint graticule wash, echoing the chart */
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(127,176,166,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(127,176,166,.10) 1px, transparent 1px);
    background-size: 48px 48px;
}
.rs-cta > * { position: relative; }

/* ─────────────────────────  STORY CARD (Pin -> Place -> Person)  ───────────────────────── */
.rs-story { position: relative; border-radius: var(--rs-radius-lg); overflow: hidden; background: var(--rs-deep-water); color: var(--rs-on-ink); min-height: 320px; display: flex; }
.rs-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-story::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,58,62,0) 30%, rgba(15,58,62,.86) 100%); }
.rs-story-body { position: relative; z-index: 1; margin-top: auto; padding: var(--rs-space-6); }
.rs-story-quote { font-family: var(--rs-serif); font-style: italic; font-size: var(--rs-fs-quote); line-height: var(--rs-lh-quote); }
.rs-story-attr { font-family: var(--rs-mono); font-size: var(--rs-fs-xs); text-transform: uppercase; letter-spacing: var(--rs-track-caps); color: rgba(244,239,228,.8); margin-top: var(--rs-space-3); }

/* ─────────────────────────  TESTIMONIAL  ───────────────────────── */
.rs-testimonial { border-left: 3px solid var(--rs-sea-glass); padding-left: var(--rs-space-5); }
.rs-testimonial p { font-family: var(--rs-serif); font-style: italic; font-size: var(--rs-fs-quote); line-height: var(--rs-lh-quote); color: var(--rs-text-strong); }

/* ─────────────────────────  LISTING CARD  ───────────────────────── */
.rs-listing-card { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; position: relative; }
.rs-listing-photo { position: relative; display: grid; place-items: center; }
.rs-listing-photo-fallback { color: var(--rs-text-subtle); }
.rs-listing-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.rs-listing-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rs-listing-title { font-size: 1.15rem; line-height: 1.15; color: var(--rs-text-strong); }
.rs-listing-foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rs-listing-price { font-family: var(--rs-sans); font-weight: 700; color: var(--rs-text-strong); }
.rs-listing-unit { font-weight: 400; color: var(--rs-text-muted); font-size: var(--rs-fs-xs); }

/* ─────────────────────────  DIVIDER / RULE  ───────────────────────── */
.rs-rule { height: 1px; background: var(--rs-line); border: 0; margin: var(--rs-space-8) 0; }
.rs-rule--sea { background: linear-gradient(90deg, transparent, var(--rs-sea-glass), transparent); }