/* ═══════════════════════════════════════════════════════════════════
   DataraFlow public footer (templates/footer.html; behaviour in
   static/js/site_foot.js). Owner-approved iteration I3 of footer lab 2:
   brand and socials beside the five link groups, a slim "I'm here to"
   audience strip, the 24-week DATARAFLOW wordmark with a tiny globe in
   the O, and the legal row.

   Round 4 (Tassy, 7 Oct: "light, not black, not dark"; earlier "free like a
   bird ... edges curving"): a soft light sheet one tone darker than the
   page, following the dark theme in dark, with a large curved top edge the
   page flows into and no border, generous space between every part, Inter
   for all small text and Bricolage only for the big type (the wordmark and
   the brand name). Colours are tokens only (df-tokens.css). Flat shapes:
   no offset shadows, no outline borders on cards or pills.
   ═══════════════════════════════════════════════════════════════════ */

/* The wordmark's fill animates through this custom property. */
@property --done { syntax: '<percentage>'; inherits: true; initial-value: 0%; }

.df-sitefoot {
    position: relative; overflow: hidden; margin: 0;
    background: var(--df-foot-bg); color: var(--df-foot-ink);
    padding: 88px 40px 0;
    /* The curved top edge: a sheet entering from the bottom of the page. */
    border-radius: 48px 48px 0 0;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    /* No mobile text autosizing: the wordmark is fitted to the pixel. */
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* A faint 48px grid, as on the prototype. */
.df-sitefoot::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--df-foot-ink) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--df-foot-ink) 4%, transparent) 1px, transparent 1px);
    background-size: 48px 48px;
}
/* In dark the sheet is close to the page colour: a hairline that follows
   the curve marks its edge. */
[data-theme="dark"] .df-sitefoot { box-shadow: inset 0 1px 0 var(--df-foot-line); }

.df-sf-in { position: relative; max-width: 1240px; margin: 0 auto; }
.df-sitefoot a { color: inherit; text-decoration: none; }
.df-sitefoot :focus-visible { outline: 2px solid var(--df-foot-accent); outline-offset: 3px; border-radius: 8px; }
.df-sitefoot h2, .df-sitefoot h3, .df-sitefoot p { margin: 0; }
.df-sitefoot ul { list-style: none; margin: 0; padding: 0; }

/* ── Top: identity beside the link groups ───────────────────────── */
/* Identity beside the columns, then the audience line on its own row. */
.df-sf-top {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr);
    grid-template-areas: 'id cols' 'aud aud'; gap: 72px 64px;
}
.df-sf-id { grid-area: id; }
.df-sf-brand {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    font-weight: 800; font-size: 21px; letter-spacing: -.015em;
}
.df-sf-brand img { width: 26px; height: auto; display: block; }
.df-sitefoot .df-sf-tag { font-size: 14.5px; line-height: 1.65; color: var(--df-foot-ink-2); margin: 18px 0 28px; max-width: 30ch; }

.df-sf-soc { display: flex; flex-wrap: wrap; gap: 8px; }
/* Official marks on chips of the page's own surface (white in light). */
.df-sf-soc a {
    width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center;
    background: var(--df-surface); color: var(--df-foot-ink);
    transition: background-color 150ms var(--df-ease), transform 150ms var(--df-ease);
}
.df-sf-soc a:hover { background: color-mix(in srgb, var(--df-surface) 80%, var(--df-foot-ink)); transform: translateY(-1px); }
.df-sf-soc svg { width: 18px; height: 18px; overflow: visible; display: block; }

.df-sf-cols { grid-area: cols; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 40px 40px; align-content: start; }
.df-sitefoot .df-sf-h {
    margin: 4px 0 18px; font-size: 12px; font-weight: 600; line-height: 1.3;
    letter-spacing: .08em; text-transform: uppercase; color: var(--df-foot-ink-3);
}
.df-sf-cols ul { display: flex; flex-direction: column; gap: 6px; }
.df-sf-lk { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 15px; line-height: 1.5; color: var(--df-foot-ink); transition: color 150ms var(--df-ease); }
.df-sf-lk:hover, .df-sf-lk[aria-current="page"] { color: var(--df-foot-accent); }
.df-sf-here {
    font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    background: color-mix(in srgb, var(--df-foot-accent) 16%, transparent); color: var(--df-foot-accent);
    padding: 2px 7px; border-radius: 99px; white-space: nowrap;
}

/* ── The audience line ──────────────────────────────────────────
   One quiet row (Tassy, 7 Oct: the card band was "busy"): a label, five
   small pills, and one short answer with one text link. No card. */
/* A soft rounded lane, no border: the one place the footer "enters a card". */
.df-sf-aud {
    grid-area: aud; display: flex; align-items: center; gap: 10px 16px; min-height: 56px; min-width: 0;
    padding: 8px 24px 8px 22px; border-radius: 999px;
    background: color-mix(in srgb, var(--df-surface) 70%, transparent);
}
.df-sf-q { font-size: 14px; color: var(--df-foot-ink-2); white-space: nowrap; flex: none; }
.df-sf-seg { display: inline-flex; flex: none; gap: 2px; background: color-mix(in srgb, var(--df-foot-ink) 6%, transparent); border-radius: 999px; padding: 3px; }
.df-sf-seg button {
    font: inherit; font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer;
    min-height: 32px; padding: 0 13px; white-space: nowrap; border-radius: 999px;
    background: transparent; color: var(--df-foot-ink-2);
    transition: background-color 180ms var(--df-ease), color 180ms var(--df-ease), transform 120ms var(--df-ease);
}
.df-sf-seg button:hover { color: var(--df-foot-ink); }
.df-sf-seg button:active { transform: scale(.95); }
.df-sf-seg button[aria-checked="true"] { background: var(--df-foot-ink); color: var(--df-foot-bg); }

.df-sitefoot .df-sf-ans { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--df-foot-ink-2); }
.df-sf-a { display: none; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.df-sf-a.is-on { display: flex; }
.df-sf-a.is-swap { animation: df-sf-swap 220ms var(--df-ease); }
@keyframes df-sf-swap { from { opacity: 0; transform: translateX(-4px); } }
.df-sf-say { flex: none; }
.df-sf-a a {
    color: var(--df-foot-accent); font-weight: 550; min-width: 0;
    /* Block, not flex, so a long article title ends in an ellipsis. */
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 32px;
}
.df-sf-a a:hover { color: var(--df-foot-accent-deep); }
.df-sf-dot { width: 7px; height: 7px; border-radius: 9px; background: var(--df-foot-closed); flex: none; }
.df-sf-dot.is-open { background: var(--df-brand-teal); }

/* Without the script: the Apply answer alone, no pills to press. */
.df-sitefoot:not([data-ready]) .df-sf-q,
.df-sitefoot:not([data-ready]) .df-sf-seg { display: none; }

/* ── The 24-week wordmark ───────────────────────────────────────── */
.df-sf-wm { position: relative; margin-top: 72px; border-radius: 8px; user-select: none; -webkit-user-select: none; }
.df-sf-wm[role="slider"] { cursor: ew-resize; touch-action: pan-y; }
.df-sitefoot .df-sf-wm:focus-visible { outline-offset: 6px; }
.df-sf-cap { position: relative; height: 30px; pointer-events: none; }
.df-sf-chip {
    position: absolute; bottom: 10px; left: 0; transform: translateX(-50%); white-space: nowrap;
    font-size: 13.5px; color: var(--df-foot-ink-2); display: flex; gap: 7px; align-items: baseline;
    transition: left 140ms var(--df-ease);
}
.df-sf-chip b { color: var(--df-foot-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.df-sf-chip i { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--df-foot-now); }
/* Until the script has placed it, the caption sits at the current week. */
.df-sitefoot:not([data-ready]) .df-sf-chip { left: calc(var(--done) - 2%); transform: none; }

.df-sf-word {
    position: relative; white-space: nowrap; line-height: .74; padding-top: .04em;
    font-family: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    font-size: 16.4vw; /* the script fits it to the exact content width */
    transition: --done 1.2s var(--df-ease);
}
@media (min-width: 1288px) { .df-sf-word { font-size: 200px; } }
/* The optical size is pinned so the letters keep one shape at every size;
   otherwise a phone-size word gets wider letters than the one it was
   measured with, and overruns its fit. */
.df-sf-L {
    display: inline-block; font-stretch: 75%; font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800;
    text-transform: uppercase; letter-spacing: -.012em;
}
.df-sf-L span { display: inline-block; }
/* One wordmark: every layer is the same markup at the same position; the
   colour layers are clipped by rectangles. */
.df-sf-L1, .df-sf-L2, .df-sf-LT { position: absolute; left: 0; top: 0; padding-top: .04em; pointer-events: none; }
.df-sf-L0 { color: color-mix(in srgb, var(--df-foot-ink) 8%, transparent); }
.df-sf-L1 {
    color: transparent;
    background: linear-gradient(90deg, var(--df-brand-blue), var(--df-brand-cyan) 60%, var(--df-brand-teal)) no-repeat;
    background-size: max(var(--done), 1px) 100%;
    -webkit-background-clip: text; background-clip: text;
    clip-path: inset(-10% calc(100% - var(--done)) -10% 0);
}
.df-sf-L2 { color: color-mix(in srgb, var(--df-foot-ink) 20%, transparent); clip-path: inset(-10% calc(100% - var(--sc)) -10% var(--done)); }
.df-sf-LT {
    color: transparent;
    background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 24 - 1px), color-mix(in srgb, var(--df-foot-ink) 13%, transparent) calc(100% / 24 - 1px) calc(100% / 24));
    -webkit-background-clip: text; background-clip: text;
}
.df-sf-edge {
    position: absolute; top: .04em; bottom: 0; width: 2px; margin-left: -1px; left: var(--done);
    background: var(--df-foot-now); border-radius: 2px;
    box-shadow: 0 0 14px 2px color-mix(in srgb, var(--df-foot-now) 45%, transparent);
    opacity: 0; transition: opacity 500ms 800ms; pointer-events: none;
}
.df-sf-wm.has-week.is-filled .df-sf-edge,
.df-sitefoot:not([data-ready]) .df-sf-wm.has-week .df-sf-edge { opacity: .9; }
.df-sf-mk {
    position: absolute; top: -4px; bottom: 0; width: 1px; left: var(--scx, 0);
    background: color-mix(in srgb, var(--df-foot-ink) 55%, transparent);
    opacity: 0; transition: opacity 200ms, left 140ms var(--df-ease); pointer-events: none;
}
.df-sf-wm.is-scrub .df-sf-mk, .df-sf-wm:focus-visible .df-sf-mk { opacity: 1; }
/* Without a running cohort the caption only appears while scrubbing. */
.df-sf-wm:not(.has-week) .df-sf-chip { opacity: 0; transition: opacity 200ms; }
.df-sf-wm:not(.has-week).is-scrub .df-sf-chip, .df-sf-wm:not(.has-week):focus-visible .df-sf-chip { opacity: 1; }

/* The globe in the O: placed by the script, brighter on "Look around". */
.df-sf-globe { position: absolute; width: 0; height: 0; opacity: .6; transition: opacity 400ms; pointer-events: none; }
.df-sf-wm.is-globe .df-sf-globe { opacity: 1; }

/* ── Legal row ──────────────────────────────────────────────────── */
/* Right padding keeps "Log in" clear of the floating theme switch. */
.df-sf-bot {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
    gap: 4px 28px; padding: 32px 64px 40px 0; margin-top: 8px; font-size: 13.5px; color: var(--df-foot-ink-2);
}
.df-sf-bot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--df-foot-line); }
.df-sf-bot a { min-height: 32px; display: inline-flex; align-items: center; }
.df-sf-bot a:hover { color: var(--df-foot-accent); }

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .df-sitefoot { padding: 72px 32px 0; }
    .df-sf-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'id' 'cols' 'aud'; gap: 56px; }
    .df-sf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; gap: 40px 32px; }
    .df-sf-wm { margin-top: 64px; }
}

/* ── Phone ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .df-sitefoot { padding: 56px 20px 0; border-radius: 32px 32px 0 0; }
    .df-sf-top { gap: 40px; }
    .df-sf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
    .df-sitefoot .df-sf-h { margin-bottom: 10px; }
    .df-sf-cols ul { gap: 0; }
    .df-sf-lk { min-height: 44px; font-size: 15.5px; line-height: 1.35; }
    /* Label and pills on one row (the pills scroll sideways), the answer
       on one line under them; the lane becomes a rounded card. */
    .df-sf-aud { flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px 6px; border-radius: 24px; }
    .df-sf-seg { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .df-sf-seg::-webkit-scrollbar { display: none; }
    /* The last pill runs under the card edge: a soft fade says "swipe"
       instead of a word cut in half. */
    .df-sf-seg { padding-right: 28px; -webkit-mask: linear-gradient(90deg, black calc(100% - 28px), transparent); mask: linear-gradient(90deg, black calc(100% - 28px), transparent); }
    .df-sf-seg button { min-height: 36px; flex: none; }
    /* Room for two lines whatever is chosen, so switching never jumps. */
    .df-sitefoot .df-sf-ans { flex-basis: 100%; min-height: 66px; }
    /* A phone is too narrow for a sentence and its link on one line: the
       link wraps under the sentence rather than being cut off. */
    .df-sf-a { flex-wrap: wrap; row-gap: 0; }
    .df-sf-a a { line-height: 44px; max-width: 100%; }
    .df-sf-bot a { min-height: 44px; }
    .df-sf-soc a { width: 44px; height: 44px; }
    .df-sf-wm { margin-top: 44px; }
    .df-sf-chip { font-size: 12.5px; }
    .df-sf-bot { justify-content: flex-start; gap: 0 18px; font-size: 13px; padding: 20px 0 24px; }
    .df-sf-bot > span { width: 100%; padding-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .df-sitefoot *, .df-sitefoot *::before { transition: none !important; animation: none !important; }
}
@media print { .df-sf-aud, .df-sf-wm { display: none; } }