/* ==========================================================================
   FL510 Design System — BASE LAYER (BACKLOG 49a)
   --------------------------------------------------------------------------
   STRICTLY OPT-IN. Everything here is scoped under `.ds`. Nothing binds to a
   bare html/body/input/button selector, so existing pages that do NOT carry
   the .ds class are byte-for-byte unaffected (behavior-preserving: no reflow).
   A surface ADOPTS the design system by adding class="ds" to a container; all
   descendants then inherit the mobile-first base.

   MOBILE-FIRST: base styles target the ~390px phone viewport. Every media
   query is min-width (never max-width) so larger screens layer ON TOP of the
   phone baseline — the phone is the design target, not a shrink-down.

   Verified rules applied (docs/AREAS/mobile-design-standards.md):
   - rule 5  fluid type via clamp() with a rem term ALWAYS in the preferred
             value (a vw-only preferred value breaks user zoom).
   - rule 7  >=16px computed font-size on ALL inputs in scope (iOS Safari
             auto-zooms focused inputs at <=15px).
   - rule 3  >=44px touch targets on interactive elements (repo working
             standard); WCAG 2.2 SC 2.5.8 legal floor is 24px (--ds-touch-floor).

   Quarantine resolutions (recorded in mobile-design-standards.md with sources):
   - 100dvh vs 100vh: MDN says vh==lvh (can be obscured by browser UI) and dvh
     resizes on scroll (jank/perf). Use 100svh (stable small-viewport) for
     full-height shells, with 100vh as the pre-svh fallback declared first.
     https://developer.mozilla.org/en-US/docs/Web/CSS/length
   - env(safe-area-inset-*): pad sticky bottom chrome with
     calc(base + env(safe-area-inset-bottom)); returns 0 on non-notched
     viewports (degrades gracefully). NOTE: iOS needs viewport-fit=cover on the
     viewport meta for non-zero insets — the current _Layout meta lacks it, so
     insets are 0 today and this is a documented future _Layout addition; the
     rule is written now so adopting surfaces get it for free once cover lands.
     https://developer.mozilla.org/en-US/docs/Web/CSS/env
   ========================================================================== */

/* --- Box model + text rendering for the scope only --- */
.ds,
.ds *,
.ds *::before,
.ds *::after {
    box-sizing: border-box;
}

.ds {
    color: var(--ds-text-primary);
    background: var(--ds-surface);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Fluid body size: rem term present in the preferred value (rule 5). */
    font-size: clamp(var(--ds-type-sm), 0.85rem + 0.4vw, var(--ds-type-base));
}

/* --- Fluid type ramp (clamp, rem term always present — rule 5) --- */
.ds h1, .ds .ds-h1 {
    font-size: clamp(var(--ds-type-2xl), 1.4rem + 2.2vw, var(--ds-type-3xl));
    line-height: 1.15;
    margin: 0 0 var(--ds-space-3);
    letter-spacing: -0.01em;
}
.ds h2, .ds .ds-h2 {
    font-size: clamp(var(--ds-type-xl), 1.2rem + 1.2vw, var(--ds-type-2xl));
    line-height: 1.2;
    margin: 0 0 var(--ds-space-3);
}
.ds h3, .ds .ds-h3 {
    font-size: clamp(var(--ds-type-lg), 1.05rem + 0.5vw, var(--ds-type-xl));
    line-height: 1.25;
    margin: 0 0 var(--ds-space-2);
}
.ds p, .ds .ds-body {
    font-size: clamp(var(--ds-type-sm), 0.85rem + 0.4vw, var(--ds-type-base));
    margin: 0 0 var(--ds-space-3);
}
.ds .ds-muted {
    color: var(--ds-text-secondary);
}
.ds .ds-small {
    font-size: var(--ds-type-sm);
}

.ds a {
    color: var(--ds-accent);
    text-decoration-thickness: from-font;
}

/* --- Focus visibility (keyboard + roving-tabindex grid) --- */
.ds :focus-visible {
    outline: 3px solid var(--ds-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* --- Interactive targets: >=44px working standard (rule 3) --- */
.ds .ds-btn,
.ds button.ds-btn,
.ds a.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-btn-min-h);
    min-width: var(--ds-touch-min);
    padding: 0 var(--ds-btn-pad-x);
    border: 1px solid transparent;
    border-radius: var(--ds-btn-radius);
    background: var(--ds-btn-bg);
    color: var(--ds-btn-fg);
    font: inherit;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ds-motion-fast) var(--ds-ease),
                transform var(--ds-motion-fast) var(--ds-ease);
}
.ds .ds-btn:active {
    transform: translateY(1px);
}
.ds .ds-btn--ghost {
    background: transparent;
    color: var(--ds-btn-ghost-fg);
    border-color: var(--ds-line);
}
.ds .ds-btn--danger {
    background: var(--ds-danger);
    color: #fff;
}

/* --- Chips (filter pills / tail toggles) --- */
.ds .ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: var(--ds-chip-min-h);
    padding: 0 var(--ds-chip-pad-x);
    border: 1px solid var(--ds-chip-border);
    border-radius: var(--ds-chip-radius);
    background: var(--ds-surface-raised);
    color: var(--ds-text-primary);
    font: inherit;
    font-size: var(--ds-type-sm);
    cursor: pointer;
}
.ds .ds-chip__swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex: 0 0 auto;
}
.ds .ds-chip[aria-pressed="true"] {
    border-color: var(--ds-accent);
    box-shadow: inset 0 0 0 1px var(--ds-accent);
}

/* --- Cards --- */
.ds .ds-card {
    background: var(--ds-card-bg);
    border: 1px solid var(--ds-card-border);
    border-radius: var(--ds-card-radius);
    padding: var(--ds-card-pad);
    box-shadow: var(--ds-card-shadow);
}

/* --- Form controls: >=16px computed font-size (rule 7) --- */
.ds input,
.ds select,
.ds textarea {
    font: inherit;
    font-size: max(16px, var(--ds-type-base)); /* never below the iOS no-zoom floor */
    min-height: var(--ds-field-min-h);
    width: 100%;
    padding: var(--ds-space-2) var(--ds-space-3);
    border: 1px solid var(--ds-field-border);
    border-radius: var(--ds-field-radius);
    background: var(--ds-field-bg);
    color: var(--ds-text-primary);
}
.ds textarea {
    min-height: calc(var(--ds-field-min-h) * 2);
    resize: vertical;
}
.ds label,
.ds .ds-label {
    display: block;
    font-size: var(--ds-type-sm);
    font-weight: 600;
    margin-bottom: var(--ds-space-1);
    color: var(--ds-text-secondary);
}
.ds .ds-field {
    margin-bottom: var(--ds-space-4);
}

/* --- Layout helpers --- */
.ds .ds-stack > * + * { margin-top: var(--ds-space-4); }
.ds .ds-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    align-items: center;
}
.ds .ds-container {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
    padding-inline: var(--ds-space-4);
}

/* --- Sticky bottom chrome: safe-area aware (quarantine resolution) --- */
.ds .ds-bottom-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-4);
    padding-bottom: calc(var(--ds-space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--ds-surface);
    border-top: 1px solid var(--ds-line);
}

/* --- Full-height shell: stable small-viewport unit (quarantine resolution) --- */
.ds .ds-viewport-fill {
    min-height: 100vh;   /* fallback for engines without svh */
    min-height: 100svh;  /* stable: not resized by browser-UI show/hide */
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .ds * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* --- Progressive layout uplift (min-width ONLY — mobile-first) --- */
@media (min-width: 600px) {
    .ds .ds-container {
        padding-inline: var(--ds-space-5);
    }
}
@media (min-width: 900px) {
    .ds .ds-container {
        max-width: 960px;
    }
}