/* ============================================================================
   Sherbet site: the legal pages and the share card

   Serves the four legal pages (privacy, terms, refunds, support) and og.html,
   the source of the share card. The three home page designs carry their own
   style sheets in v/<letter>/style.css (SPEC-044), so this file keeps only what
   these five pages use.

   Design system notes, so nothing here reads as arbitrary:

   - THREE ACCENTS, EACH WITH ONE MEANING. Raspberry is the value you copied
     (your own data), lemon is the moment Sherbet matches it, blueberry is the
     field it goes into. Each is used only for its job.
   - THE GROUND IS NOT BLACK. #0e0e14 is pulled toward the app's real
     Palette.panelBase (#3c3c47) - a cool desaturated indigo-slate.
   - THE PAGE COMMITS TO DARK. It does not follow the visitor's theme: the
     product is a dark glassmorphic Mac app.
     color-scheme is set explicitly so scrollbars and controls follow.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
    color-scheme: dark;

    --ink: #0e0e14;

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);

    /* Measured against --ink, not eyeballed. text 17.5:1, text-2 6.6:1,
       text-3 4.7:1 - all clear WCAG AA for body copy. text-3 is deliberately
       LIGHTER than the app's own 0.34 tertiary: that value lives on a blurred
       glass panel, and on a flat page it measures 2.8:1 and fails. */
    --text: #f4f4f8;
    --text-2: rgba(235, 235, 245, 0.62);
    --text-3: rgba(235, 235, 245, 0.50);

    /* The semantic accents. Do not use these decoratively.
       Each is declared ONCE, as raw channels, so every tint and every alpha
       derives from it: rgb(var(--field-rgb) / 0.2). */
    --value-rgb: 255 100 130;   /* raspberry - what you copied */
    --field-rgb: 94 158 255;    /* blueberry - the field it belongs in */

    --value: rgb(var(--value-rgb));
    --field: rgb(var(--field-rgb));

    /* Readable-on-dark tint of the field accent, for link text that has to
       pass AA. Derived, not hand-picked. */
    --field-text: color-mix(in srgb, var(--field) 62%, #fff);

    /* Type. Bricolage Grotesque is the brand wordmark face and carries every
       display line; Geist and Geist Mono are the neutral technical pair it
       plays against. The share card's field and notch still deliberately use
       the system font instead, because that is what makes a fake window read
       as a real one. */
    --display: "Bricolage Grotesque", "Geist", ui-sans-serif, system-ui, sans-serif;
    --body: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif;

    --shell: 1180px;
    --pad-x: clamp(20px, 5vw, 48px);

    --r-sm: 8px;

    /* The app's own motion language (Motion in Theme.swift): 0.18s standard. */
    --t-standard: 180ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------ base -- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* The nav is sticky and 64px tall, so an anchor jump has to stop short of
       it or the target heading lands underneath the bar. */
    scroll-padding-top: 64px;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Grain. Fixed, so it reads as a property of the surface rather than of the
   content scrolling past it. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }

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

:focus-visible {
    outline: 2px solid var(--field);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    background: var(--field);
    color: #06070b;
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--t-standard) var(--ease);
}
.skip-link:focus-visible { transform: none; }

/* ------------------------------------------------------------ typography -- */

h1, h2 {
    font-family: var(--display);
    font-weight: 800;
    font-variation-settings: "wdth" 96, "opsz" 48;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0;
    text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.1vw, 3.5rem); line-height: 1.03; }
h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); }

p { margin: 0; text-wrap: pretty; }

.lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    color: var(--text-2);
    line-height: 1.62;
    max-width: 56ch;
}

/* The utility face carries every label, tag and piece of machine data on the
   page. It is how a reader tells "this is a name for something" from prose. */
.eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.5;
    flex: none;
}

kbd, .kbd {
    font-family: var(--mono);
    font-size: 0.8em;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    color: var(--text);
    white-space: nowrap;
}

/* -------------------------------------------------------------- layout -- */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

/* --------------------------------------------------------------- nav -- */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-standard) var(--ease);
}
.nav[data-stuck="true"] { border-bottom-color: var(--line); }

.nav__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 64px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    margin-right: auto;
}
.brand svg { width: 26px; height: 26px; flex: none; }

/* The mark is defined once in each page's <defs> and referenced with <use>. */
.svg-defs { position: absolute; }

/* =========================================================== the field ====
   The field and the notch HUD as the share card (og.html) draws them: a still
   of a value Sherbet has just filled.
   ======================================================================== */

.field {
    display: block;
    position: relative;
}

.field__label {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 7px;
}

.field__box {
    position: relative;
    display: flex;
    align-items: center;
    /* No gap: the hint keeps its own distance with `margin-left: auto`. */
    gap: 0;
    min-height: 44px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--line);
    font-family: var(--system);
    font-size: 0.9375rem;
    color: var(--text);
    overflow: hidden;
    transition: border-color var(--t-standard) var(--ease),
                box-shadow var(--t-standard) var(--ease),
                background-color var(--t-standard) var(--ease);
}

.field__value {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    grid-area: 1 / 1;
}

/* The value sits in a one-cell grid, so it takes the free width of the row. */
.field__slot {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    flex: 1;
}

/* A value that arrived from the clipboard keeps a raspberry tick, so "this is
   yours, Sherbet only moved it" survives after the fill. */
.field__from {
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--value);
    opacity: 0;
    transition: opacity var(--t-standard) var(--ease);
}

.field__hint {
    /* `auto` keeps it right-aligned; the padding is what guarantees a gap from
       the value even when the slot has grown to meet it, now that the box
       itself carries no gap. */
    margin-left: auto;
    padding-left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-3);
    opacity: 0;
    transition: opacity var(--t-standard) var(--ease);
    flex: none;
}

.island__mark { width: 18px; height: 18px; flex: none; }

.island__body { min-width: 0; }

.island__label {
    display: block;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(235, 235, 245, 0.66);
    line-height: 1.4;
}

/* Raspberry: the value is yours. It appears here first and then again as the
   tick beside the filled field, which is how the colour earns its meaning
   without a legend. */
.island__value {
    display: block;
    font-family: var(--system);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--value);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.island__keys { margin-left: auto; display: flex; gap: 4px; flex: none; }
.island__keys .kbd {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.16);
    font-size: 0.6875rem;
    padding: 2px 6px;
}

/* The share card's headline: the concession is set back so the claim reads as
   the turn in the sentence. 3.98:1 - below AA body, above the 3:1 large-text
   threshold, and this clause is only ever set at 37px or larger. */
.h1-concede { color: rgba(235, 235, 245, 0.45); display: block; }
.h1-claim { display: block; }

.tint-value { color: var(--value); }
.tint-field { color: var(--field); }

/* The HUD and the field it filled, joined by the drop the island makes. */
.payoff { display: grid; justify-items: start; gap: 0; }

.payoff__drop {
    width: 2px;
    height: 26px;
    margin-left: 26px;
    background: linear-gradient(180deg, var(--field), rgb(var(--field-rgb) / 0));
}

/* On a narrow screen the keycap hint is the first thing to go. */
@media (max-width: 560px) {
    .island-static .island__keys { display: none; }
    .island-static { max-width: 100%; }
    .island-static .island__value { overflow: hidden; text-overflow: ellipsis; }
}

/* ================================================================ footer */

.foot__req {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-3);
}

.foot {
    border-top: 1px solid var(--line);
    padding-block: clamp(44px, 6vh, 68px) 40px;
    font-size: 0.875rem;
    color: var(--text-3);
}
.foot__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px 28px;
    align-items: center;
}
.foot__inner > :last-child { justify-self: end; }
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a:hover { color: var(--text); }
@media (max-width: 720px) {
    .foot__inner { grid-template-columns: minmax(0, 1fr); }
    .foot__inner > :last-child { justify-self: start; }
}

.foot__note {
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-3);
    max-width: 74ch;
}

/* A still of the notch HUD, for places that describe it rather than run it. */
.island-static {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border-radius: 16px;
    background: #000;
    border: 1px solid var(--line);
    max-width: 100%;
}
.island-static .island__value { font-size: 0.8438rem; }

/* ============================================================ legal pages ==
   Privacy, terms, refunds, support (SPEC-035). Long-form prose on the page's
   own tokens: one narrow column, the display face only for headings, links
   underlined so they never rely on colour alone (axe link-in-text-block). */

.legal { padding-block: clamp(40px, 7vh, 84px) clamp(56px, 9vh, 110px); }
/* A bare .shell--narrow would lose to .shell, which has the same specificity. */
.legal .shell--narrow { max-width: 820px; }
.legal ul + p, .legal p + ul { margin-top: 14px; }
.legal h1 { margin-bottom: 18px; }
.legal__meta {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--text-3);
    display: grid;
    gap: 4px;
    margin-bottom: clamp(28px, 4vw, 44px);
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.legal__seller { color: var(--text-2); }
.legal h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-top: clamp(32px, 4.5vw, 48px);
    margin-bottom: 12px;
}
.legal p, .legal li { color: var(--text-2); font-size: 1rem; line-height: 1.68; max-width: 68ch; }
.legal p + p { margin-top: 14px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal code {
    font-family: var(--mono);
    font-size: 0.875em;
    color: var(--text);
    overflow-wrap: anywhere;
}
.legal a {
    color: var(--field-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.legal a:hover { color: var(--text); }
.legal .lede { max-width: 62ch; }
.nav__back { color: var(--text-2); font-size: 0.9375rem; margin-left: auto; }
.nav__back:hover { color: var(--text); }

/* ====================================================== reduced motion =====
   LAST IN THE FILE ON PURPOSE. These are overrides, and a base rule written
   after them wins on source order at equal specificity. Keep this section at
   the bottom.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}