/* The feed's stylesheet.
 *
 * A real file rather than a <style> block, because it is emitted on the social
 * feed AND on every public club, player, coach and tournament profile. Inlined,
 * those 96 KB were re-downloaded on every one of those page views; as a file
 * the browser fetches it once and the profile pages cost a cache hit.
 *
 * Edited by hand — there is no build step for it. Bump nothing: the <link> is
 * cache-busted from this file's mtime, so saving it is enough.
 *
 * The palette is the app's own: Deep Court Blue #0b3d75, the teal-mint #24d0a6
 * the header stripe uses, and Neon Lime #C8F000 for the marks that say "the
 * analyser made this". Everything is a token below, so a colour is changed in
 * one place instead of forty.
 */
  /* Declared on :root, not on .fd-shell. The toasts, the lightbox and the
     dialog are rendered at the end of <body> — outside the shell — and a custom
     property only inherits DOWN, so scoping these to the shell left every
     overlay with unresolvable var()s. Every name is --fd- prefixed, so nothing
     in the app's own token set can collide with them. */
  :root {
    --fd-ink:        #0D1B2A;
    --fd-ink-soft:   #40506a;
    --fd-muted:      #6b7c93;
    --fd-faint:      #93a3b8;
    --fd-line:       #e6ecf4;
    --fd-line-soft:  #f1f5fa;
    --fd-surface:    #ffffff;
    --fd-sunk:       #f4f7fb;
    --fd-blue:       #0b3d75;
    --fd-blue-deep:  #003B6F;
    --fd-teal:       #24d0a6;
    --fd-lime:       #C8F000;
    --fd-rose:       #e11d48;
    --fd-amber:      #b45309;
    --fd-r:          14px;
    --fd-r-lg:       20px;
    --fd-shadow:     0 1px 2px rgba(13,27,42,.04), 0 8px 24px rgba(11,61,117,.05);
    --fd-shadow-up:  0 2px 4px rgba(13,27,42,.05), 0 18px 44px rgba(11,61,117,.10);
    --fd-ease:       cubic-bezier(.22,.61,.36,1);

    /* Added in the design pass. A card, a panel and a hero were all one flat
       border and one flat shadow before; these are the three depths the page
       now actually uses, plus the two gradients that carry the brand — the
       navy the app is built on and the teal→lime stripe its header wears. */
    --fd-shadow-card: 0 1px 1px rgba(13,27,42,.03), 0 8px 20px -10px rgba(11,61,117,.22);
    --fd-shadow-hi:   0 2px 4px rgba(13,27,42,.05), 0 24px 50px -20px rgba(11,61,117,.34);
    --fd-grad-navy:   linear-gradient(135deg, #0d4b8f 0%, #0b3d75 45%, #04305f 100%);
    --fd-grad-accent: linear-gradient(90deg, #24d0a6, #C8F000);
    --fd-grad-lime:   linear-gradient(135deg, #dbff4d, #C8F000);
    /* How far below the app's own sticky header the feed's sticky bits park.
       One number, because the tab strip and the new-posts pill have to agree. */
    --fd-sticky-top:  84px;
  }

  .fd-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 1.75rem 1rem 5rem;
    font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
    color: var(--fd-ink);
  }

  /* The overlays live outside .fd-shell, so they carry the font themselves. */
  .fd-toasts, .fd-dialog, .fd-lightbox { font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif; }
  .fd-dialog *, .fd-lightbox *, .fd-toasts * { box-sizing: border-box; }
  .fd-dialog :focus-visible, .fd-lightbox :focus-visible { outline: 2px solid var(--fd-teal); outline-offset: 2px; }

  .fd-shell *, .fd-shell *::before, .fd-shell *::after { box-sizing: border-box; }
  .fd-shell :focus-visible { outline: 2px solid var(--fd-teal); outline-offset: 2px; border-radius: 6px; }

  /* Two columns only when there is honestly room for two. Below that the rail
     drops under the timeline rather than squeezing the posts. */
  .fd-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  @media (min-width: 1024px) {
    .fd-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; }
    .fd-rail   { position: sticky; top: 88px; }
  }
  .fd-main { min-width: 0; }

  /* ── page head ─────────────────────────────────────────────── */
  .fd-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fd-blue); margin-bottom: .35rem;
  }
  .fd-eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--fd-lime); }
  .fd-head h1 {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(2rem, 4vw, 2.6rem); line-height: 1.05; margin: 0;
    color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-head p { margin: .35rem 0 0; color: var(--fd-muted); font-size: .93rem; max-width: 46ch; }

  /* ── tabs ──────────────────────────────────────────────────── */
  .fd-tabs {
    display: inline-flex; gap: .25rem; margin: 1.1rem 0 1.25rem; padding: .25rem;
    background: var(--fd-sunk); border: 1px solid var(--fd-line); border-radius: 999px;
  }
  .fd-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1.05rem; border-radius: 999px; text-decoration: none;
    font-size: .86rem; font-weight: 700; color: var(--fd-muted);
    transition: background .18s var(--fd-ease), color .18s var(--fd-ease);
  }
  .fd-tab:hover { color: var(--fd-blue); }
  .fd-tab.is-on { background: var(--fd-surface); color: var(--fd-blue-deep); box-shadow: 0 1px 3px rgba(13,27,42,.10); }

  /* ── card shell ────────────────────────────────────────────── */
  .fd-card {
    background: var(--fd-surface); border: 1px solid var(--fd-line);
    border-radius: var(--fd-r-lg); margin-bottom: 1rem;
    box-shadow: var(--fd-shadow);
    transition: box-shadow .25s var(--fd-ease), border-color .25s var(--fd-ease);
  }
  .fd-card:hover { border-color: #dbe4f0; box-shadow: var(--fd-shadow-up); }
  .fd-card.is-going { opacity: 0; transform: scale(.97); transition: opacity .2s, transform .2s; }
  .fd-card.is-new   { animation: fd-drop .45s var(--fd-ease); }
  @keyframes fd-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

  /* ── buttons ───────────────────────────────────────────────── */
  .fd-btn {
    border: 0; border-radius: 999px; padding: .6rem 1.35rem;
    font-family: inherit; font-weight: 700; font-size: .875rem; cursor: pointer;
    background: var(--fd-blue); color: #fff; display: inline-flex; align-items: center;
    justify-content: center; gap: .45rem; text-decoration: none; line-height: 1.2;
    transition: transform .16s var(--fd-ease), box-shadow .2s var(--fd-ease), background .2s, opacity .2s;
  }
  .fd-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11,61,117,.28); }
  .fd-btn:active:not(:disabled) { transform: translateY(0); }
  .fd-btn:disabled { opacity: .4; cursor: not-allowed; }
  .fd-btn-ghost { background: var(--fd-sunk); color: var(--fd-ink-soft); border: 1px solid var(--fd-line); }
  .fd-btn-ghost:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(13,27,42,.08); background: #eef3f9; }
  .fd-btn-danger { background: var(--fd-rose); }
  .fd-btn-danger:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(225,29,72,.3); }
  .fd-btn .fd-spin { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: fd-rot .7s linear infinite; display: none; }
  .fd-btn.is-busy .fd-spin { display: block; }
  @keyframes fd-rot { to { transform: rotate(360deg); } }

  /* ── avatars ───────────────────────────────────────────────── */
  .fd-av {
    position: relative; flex-shrink: 0; border-radius: 50%; overflow: visible;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; color: #fff; letter-spacing: .02em; user-select: none;
    background: linear-gradient(140deg,
      hsl(var(--fd-av-hue, 210) 62% 52%),
      hsl(calc(var(--fd-av-hue, 210) + 28) 55% 34%));
    box-shadow: 0 0 0 1px rgba(13,27,42,.06);
  }
  .fd-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
  .fd-av-sm { width: 30px; height: 30px; font-size: .66rem; }
  .fd-av-md { width: 42px; height: 42px; font-size: .8rem; }
  .fd-av-lg { width: 76px; height: 76px; font-size: 1.5rem; }
  .fd-av-club, .fd-av-tournament { border-radius: 14px; }
  .fd-av-club img, .fd-av-tournament img { border-radius: 13px; }
  .fd-av-kind {
    position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px;
    border-radius: 50%; background: var(--fd-surface); color: var(--fd-blue);
    font-size: 10px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(13,27,42,.18);
  }
  .fd-av-lg .fd-av-kind { width: 26px; height: 26px; font-size: 14px; }

  /* ── composer ──────────────────────────────────────────────── */
  .fd-composer { padding: 1rem 1.1rem; }
  .fd-composer-head { display: flex; gap: .75rem; align-items: flex-start; }
  .fd-composer textarea {
    width: 100%; border: 0; padding: .55rem 0 0; font: inherit; font-size: 1.02rem;
    line-height: 1.5; resize: none; outline: none; min-height: 2.4rem; max-height: 40vh;
    color: var(--fd-ink); background: transparent; overflow-y: auto;
  }
  .fd-composer textarea::placeholder { color: var(--fd-faint); }
  .fd-composer-body { flex: 1; min-width: 0; }

  /* Drag a photo anywhere over the composer and it says so. */
  /* Room for the overlay to say it, even when the card is folded to one line. */
  .fd-composer.is-drop { border-color: var(--fd-teal); box-shadow: 0 0 0 4px rgba(36,208,166,.15); min-height: 136px; }
  .fd-drop-hint { display: none; align-items: center; gap: .5rem; margin-top: .6rem; font-size: .85rem; font-weight: 700; color: var(--fd-teal); }
  .fd-composer.is-drop .fd-drop-hint { display: flex; }

  .fd-attached { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
  .fd-chip-img { position: relative; width: 78px; height: 78px; border-radius: 12px; overflow: hidden; border: 1px solid var(--fd-line); background: var(--fd-sunk); }
  .fd-chip-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fd-chip-x {
    position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: 0;
    border-radius: 50%; background: rgba(13,27,42,.72); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 12px; padding: 0;
    backdrop-filter: blur(4px);
  }
  .fd-chip-x:hover { background: var(--fd-rose); }
  .fd-chip-file {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .55rem .5rem .8rem;
    border: 1px solid var(--fd-line); border-radius: 999px; background: var(--fd-sunk);
    font-size: .82rem; font-weight: 600; color: var(--fd-ink-soft); max-width: 100%;
  }
  .fd-chip-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem; }
  .fd-chip-file .fd-chip-x { position: static; width: 20px; height: 20px; background: #d6dfeb; color: var(--fd-ink-soft); }

  .fd-composer-row {
    display: flex; align-items: center; gap: .35rem; margin-top: .85rem;
    padding-top: .8rem; border-top: 1px solid var(--fd-line-soft); flex-wrap: wrap;
  }
  .fd-tool {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    border: 0; background: none; font: inherit; font-size: .84rem; font-weight: 600;
    color: var(--fd-muted); padding: .45rem .7rem; border-radius: 10px;
    transition: background .18s, color .18s;
  }
  .fd-tool:hover { background: rgba(36,208,166,.1); color: #0f8f72; }
  .fd-tool i { font-size: 1.1rem; }

  /* Who am I posting as — a pair of real identities, not a dropdown of strings. */
  .fd-as { display: inline-flex; gap: .2rem; padding: .2rem; background: var(--fd-sunk); border: 1px solid var(--fd-line); border-radius: 999px; }
  .fd-as label { display: inline-flex; }
  .fd-as input { position: absolute; opacity: 0; pointer-events: none; }
  .fd-as span {
    display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .75rem;
    border-radius: 999px; font-size: .78rem; font-weight: 700; color: var(--fd-muted); cursor: pointer;
    transition: background .18s, color .18s;
  }
  .fd-as input:checked + span { background: var(--fd-surface); color: var(--fd-blue-deep); box-shadow: 0 1px 3px rgba(13,27,42,.12); }
  .fd-as input:focus-visible + span { outline: 2px solid var(--fd-teal); outline-offset: 1px; }

  .fd-counter { font-size: .76rem; font-weight: 700; color: var(--fd-faint); font-family: 'JetBrains Mono', monospace; }
  .fd-counter.is-near { color: var(--fd-amber); }
  .fd-counter.is-over { color: var(--fd-rose); }
  .fd-msg { font-size: .82rem; font-weight: 600; margin-top: .55rem; min-height: 1.1em; color: var(--fd-muted); }
  .fd-msg.is-bad  { color: var(--fd-rose); }
  .fd-msg.is-warn { color: var(--fd-amber); }

  /* ── composer: tags ────────────────────────────────────────── */
  .fd-tagbar {
    display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; position: relative;
    margin-top: .7rem; padding: .4rem .6rem; border: 1px dashed var(--fd-line);
    border-radius: 12px; background: var(--fd-sunk);
  }
  .fd-tagbar > i { color: var(--fd-faint); font-size: 1rem; }
  .fd-tagchips { display: contents; }
  .fd-tagchip {
    display: inline-flex; align-items: center; gap: .2rem; background: rgba(11,61,117,.08);
    color: var(--fd-blue); border-radius: 999px; padding: .18rem .3rem .18rem .6rem;
    font-size: .78rem; font-weight: 700;
  }
  .fd-tagchip button {
    border: 0; background: none; color: inherit; cursor: pointer; opacity: .6;
    padding: 0 .1rem; display: flex; font-size: .9rem; line-height: 1;
  }
  .fd-tagchip button:hover { opacity: 1; color: var(--fd-rose); }
  .fd-tagbar input {
    flex: 1; min-width: 7rem; border: 0; background: none; font: inherit;
    font-size: .82rem; outline: none; color: var(--fd-ink); padding: .2rem 0;
  }
  .fd-tagbar input::placeholder { color: var(--fd-faint); }

  .fd-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 30;
    background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(11,61,117,.16); padding: .25rem; display: none;
    max-height: 220px; overflow-y: auto;
  }
  .fd-suggest.is-on { display: block; }
  .fd-suggest button {
    display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit;
    font-size: .84rem; font-weight: 600; color: var(--fd-ink-soft); padding: .45rem .6rem;
    border-radius: 8px; cursor: pointer;
  }
  .fd-suggest button:hover { background: var(--fd-sunk); color: var(--fd-blue); }

  /* ── composer: emoji, visibility, progress ─────────────────── */
  .fd-emoji-wrap { position: relative; display: inline-flex; }
  .fd-emoji {
    position: absolute; left: 0; bottom: calc(100% + .4rem); z-index: 30;
    width: 232px; padding: .45rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: .1rem;
    background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: 14px;
    box-shadow: 0 16px 40px rgba(11,61,117,.18);
  }
  .fd-emoji[hidden] { display: none; }
  .fd-emoji button {
    border: 0; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1;
    padding: .3rem; border-radius: 8px;
  }
  .fd-emoji button:hover { background: var(--fd-sunk); transform: scale(1.15); }

  .fd-vis { display: inline-flex; align-items: center; gap: .3rem; color: var(--fd-muted); padding-left: .35rem; }
  .fd-vis i { font-size: 1rem; }
  .fd-vis select {
    border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600;
    color: var(--fd-muted); cursor: pointer; outline: none; padding: .3rem .1rem;
  }
  .fd-vis:hover, .fd-vis:hover select { color: var(--fd-blue); }

  .fd-progress { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
  .fd-progress[hidden] { display: none; }
  .fd-progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--fd-sunk); overflow: hidden; }
  .fd-progress-bar span {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--fd-teal), var(--fd-lime));
    transition: width .2s linear;
  }
  .fd-progress-num { font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 700; color: var(--fd-muted); }

  /* ── composer: attachment chips ────────────────────────────── */
  .fd-chip-alt {
    position: absolute; left: 3px; bottom: 3px; border: 0; border-radius: 6px; cursor: pointer;
    background: rgba(13,27,42,.72); color: #fff; font-size: .58rem; font-weight: 800;
    letter-spacing: .06em; padding: .15rem .3rem; backdrop-filter: blur(4px);
  }
  .fd-chip-alt:hover { background: var(--fd-blue); }
  .fd-chip-alt.is-set { background: var(--fd-lime); color: #29350e; }

  .fd-chip-video { position: relative; width: 100%; border: 1px solid var(--fd-line); border-radius: 14px; overflow: hidden; background: #0b1220; }
  .fd-chip-video video { display: block; width: 100%; max-height: 260px; background: #000; }
  .fd-chip-meta {
    display: block; padding: .45rem .7rem; font-size: .76rem; font-weight: 600;
    color: var(--fd-muted); background: var(--fd-surface); border-top: 1px solid var(--fd-line);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fd-chip-video .fd-chip-x { top: 6px; right: 6px; }

  /* ── tags, on a card and in the rail ───────────────────────── */
  .fd-hash {
    color: var(--fd-blue); font-weight: 700; text-decoration: none;
    border-radius: 4px; transition: background .15s, color .15s;
  }
  .fd-hash:hover { color: #0f8f72; background: rgba(36,208,166,.12); }
  .fd-tags { display: flex; flex-wrap: wrap; gap: .35rem .6rem; padding: 0 1.1rem .85rem; font-size: .85rem; }
  .fd-cloud { display: flex; flex-wrap: wrap; gap: .35rem; }
  .fd-cloud .fd-hash {
    background: var(--fd-sunk); border: 1px solid var(--fd-line); padding: .28rem .7rem;
    border-radius: 999px; font-size: .8rem;
  }
  .fd-cloud .fd-hash:hover { background: rgba(36,208,166,.12); border-color: rgba(36,208,166,.4); }

  /* A runtime badge, so a video reads as a video before it is played. */
  .fd-runtime {
    position: absolute; right: .6rem; bottom: 3.4rem; z-index: 2; pointer-events: none;
    background: rgba(6,12,22,.78); color: #fff; border-radius: 6px; padding: .1rem .4rem;
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
  }

  /* ── post card ─────────────────────────────────────────────── */
  .fd-top { display: flex; align-items: center; gap: .7rem; padding: .95rem 1.1rem .7rem; }
  .fd-who { min-width: 0; flex: 1; }
  .fd-who a.fd-name { color: var(--fd-ink); text-decoration: none; }
  .fd-name { display: inline-block; font-weight: 700; font-size: .95rem; line-height: 1.25; }
  .fd-who a.fd-name:hover { color: var(--fd-blue); text-decoration: underline; text-underline-offset: 2px; }
  .fd-meta { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: .78rem; color: var(--fd-faint); }
  .fd-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
  .fd-tag {
    display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px;
    padding: .1rem .5rem; font-size: .66rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase;
  }
  .fd-tag-auto { background: var(--fd-lime); color: #29350e; }
  .fd-tag-private { background: #eef2f8; color: var(--fd-ink-soft); }

  .fd-body { padding: 0 1.1rem .85rem; font-size: .97rem; line-height: 1.62; color: #22344b; white-space: pre-wrap; overflow-wrap: anywhere; }
  .fd-body a { color: var(--fd-blue); }

  /* ── media ─────────────────────────────────────────────────── */
  .fd-media { display: grid; gap: 2px; background: var(--fd-line-soft); overflow: hidden; }
  .fd-media.n-1 { grid-template-columns: 1fr; }
  .fd-media.n-2 { grid-template-columns: 1fr 1fr; }
  .fd-media.n-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .fd-media.n-3 > :first-child { grid-row: span 2; }
  .fd-media.n-4 { grid-template-columns: 1fr 1fr; }
  .fd-media figure { margin: 0; position: relative; background: #0b1220; cursor: zoom-in; overflow: hidden; }
  .fd-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fd-media.n-1 img { max-height: 560px; object-fit: contain; background: #0b1220; }
  .fd-media.n-2 figure, .fd-media.n-4 figure { aspect-ratio: 1 / 1; }
  /* The tall cell takes its height from the two square ones beside it; giving
     it an aspect-ratio as well would fight the grid rows it already spans. */
  .fd-media.n-3 figure + figure { aspect-ratio: 1 / 1; }
  .fd-media figure::after {
    content: ''; position: absolute; inset: 0; background: rgba(11,61,117,0);
    transition: background .25s var(--fd-ease); pointer-events: none;
  }
  .fd-media figure:hover::after { background: rgba(11,61,117,.12); }
  .fd-media video { display: block; width: 100%; max-height: 560px; background: #000; }
  .fd-media figure.is-video { cursor: default; }
  .fd-media figure.is-video::after { content: none; }

  /* An analyser-cut highlight: a poster with a play affordance, not a photo. */
  .fd-shot { display: block; position: relative; background: #0b1220; overflow: hidden; }
  .fd-shot img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .5s var(--fd-ease); }
  .fd-shot:hover img { transform: scale(1.03); }
  .fd-shot::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(4,10,20,.72) 0%, rgba(4,10,20,.12) 45%, transparent 70%);
  }
  .fd-shot-play {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  }
  .fd-shot-play i {
    width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); backdrop-filter: blur(8px); color: #fff; font-size: 1.6rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.35);
    transition: transform .25s var(--fd-ease), background .25s;
  }
  .fd-shot:hover .fd-shot-play i { transform: scale(1.08); background: rgba(200,240,0,.9); color: #1b2a12; }
  .fd-shot-label {
    position: absolute; left: 1rem; bottom: .95rem; z-index: 2; display: inline-flex; align-items: center; gap: .4rem;
    color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
    font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  }
  .fd-shot-label::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--fd-lime); }

  /* ── actions ───────────────────────────────────────────────── */
  .fd-actions { display: flex; align-items: center; gap: .15rem; padding: .45rem .6rem; border-top: 1px solid var(--fd-line-soft); }
  .fd-act {
    border: 0; background: none; color: var(--fd-muted); font: inherit; font-size: .85rem;
    font-weight: 600; padding: .5rem .75rem; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    transition: background .18s, color .18s;
  }
  .fd-act i { font-size: 1.08rem; line-height: 1; }
  .fd-act:hover { background: var(--fd-sunk); color: var(--fd-blue); }
  .fd-act[disabled] { cursor: default; opacity: .75; }
  .js-like:hover { background: rgba(225,29,72,.08); color: var(--fd-rose); }
  .js-like.is-on { color: var(--fd-rose); font-weight: 800; }
  .js-like.is-on i { animation: fd-pop .35s var(--fd-ease); }
  @keyframes fd-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
  .fd-act.danger:hover { background: #fef2f2; color: var(--fd-rose); }

  /* ── overflow menu ─────────────────────────────────────────── */
  .fd-menu { position: relative; margin-left: auto; }
  /* A hovered card has a transform, which makes it a stacking context: the
     pop's z-index then only counts INSIDE that card, and the next card —
     positioned, and later in the page — painted over the open menu. So the
     card holding an open menu is lifted above its neighbours. 14 keeps it
     under the sticky tab strip (16) and the new-posts pill (15). */
  .fd-card:has(.fd-menu.is-open) { z-index: 14; }
  .fd-menu-pop {
    position: absolute; right: 0; top: calc(100% + .35rem); z-index: 50; min-width: 200px;
    background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: 14px;
    box-shadow: 0 18px 44px rgba(11,61,117,.18); padding: .3rem; display: none;
  }
  .fd-menu.is-open .fd-menu-pop { display: block; animation: fd-drop .16s var(--fd-ease); }
  .fd-menu-pop button, .fd-menu-pop a {
    display: flex; width: 100%; align-items: center; gap: .55rem; border: 0; background: none;
    font: inherit; font-size: .86rem; font-weight: 600; color: var(--fd-ink-soft);
    padding: .55rem .65rem; border-radius: 10px; cursor: pointer; text-align: left; text-decoration: none;
  }
  .fd-menu-pop button:hover, .fd-menu-pop a:hover { background: var(--fd-sunk); color: var(--fd-blue); }
  .fd-menu-pop .is-danger:hover { background: #fef2f2; color: var(--fd-rose); }

  /* ── share menu (computers) ────────────────────────────────── */
  /* Same component as the overflow menu, so an outside click closes it too.
     It sits in the actions row, not at the card's right edge, so it opens
     rightwards from the button instead of being pushed to the end. */
  .fd-share-menu { margin-left: 0; }
  .fd-share-menu .fd-menu-pop { left: 0; right: auto; min-width: 220px; }
  .fd-share-menu .fd-menu-pop hr { border: 0; border-top: 1px solid var(--fd-line-soft); margin: .3rem .25rem; }
  .fd-share-menu .fd-menu-pop i { font-size: 1.1rem; }
  .fd-share-menu .is-whatsapp i { color: #25d366; }
  .fd-share-menu .is-facebook i { color: #1877f2; }
  .fd-share-menu .is-x i        { color: var(--fd-ink); }
  .fd-share-menu .is-linkedin i { color: #0a66c2; }
  .fd-share-menu .is-email i    { color: var(--fd-muted); }
  .fd-share-note {
    display: flex; gap: .4rem; align-items: flex-start; margin: .15rem .15rem .35rem;
    padding: .45rem .55rem; border-radius: 10px; background: var(--fd-sunk);
    font-size: .78rem; line-height: 1.35; color: var(--fd-muted);
  }

  /* ── comments ──────────────────────────────────────────────── */
  .fd-comments { border-top: 1px solid var(--fd-line-soft); padding: .85rem 1.1rem 1rem; display: none; background: #fbfdff; border-radius: 0 0 var(--fd-r-lg) var(--fd-r-lg); }
  .fd-comments.is-open { display: block; }
  .fd-comment { display: flex; gap: .6rem; padding: .4rem 0; }
  .fd-comment-bubble { background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: 4px 14px 14px 14px; padding: .5rem .8rem; min-width: 0; }
  .fd-comment .n { font-size: .8rem; font-weight: 700; color: var(--fd-ink); text-decoration: none; }
  .fd-comment a.n:hover { color: var(--fd-blue); text-decoration: underline; }
  .fd-comment .w { font-size: .72rem; color: var(--fd-faint); margin-left: .35rem; font-weight: 500; }
  .fd-comment .t { font-size: .89rem; color: #2b3d55; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
  .fd-comment-tools { display: flex; gap: .1rem; align-self: center; opacity: 0; transition: opacity .18s; }
  .fd-comment:hover .fd-comment-tools, .fd-comment:focus-within .fd-comment-tools { opacity: 1; }
  .fd-comment-tools button {
    border: 0; background: none; color: var(--fd-faint); cursor: pointer; padding: .3rem;
    border-radius: 8px; font-size: .95rem; line-height: 1; display: flex;
  }
  .fd-comment-tools button:hover { background: #fef2f2; color: var(--fd-rose); }
  .fd-comment-empty { font-size: .85rem; color: var(--fd-faint); padding: .4rem 0 .2rem; }

  /* position: relative so the "@" picker, which is absolutely positioned,
     hangs off the form rather than off whatever ancestor happens to be
     positioned further up the card. */
  .fd-comment-form { display: flex; gap: .5rem; margin-top: .7rem; align-items: center; position: relative; }
  .fd-comment-form input {
    flex: 1; min-width: 0; border: 1px solid var(--fd-line); border-radius: 999px;
    padding: .6rem 1rem; font: inherit; font-size: .88rem; outline: none; background: var(--fd-surface);
    transition: border-color .18s, box-shadow .18s;
  }
  .fd-comment-form input:focus { border-color: var(--fd-teal); box-shadow: 0 0 0 3px rgba(36,208,166,.15); }
  .fd-comment-form .fd-btn { padding: .55rem 1.05rem; }
  .fd-locked { font-size: .82rem; color: var(--fd-faint); margin: .6rem 0 0; display: flex; align-items: center; gap: .35rem; }
  .fd-locked a { color: var(--fd-blue); font-weight: 700; }


  /* Loading rows, so an opened thread has shape before it has content. */
  .fd-skel { display: flex; gap: .6rem; padding: .45rem 0; }
  .fd-skel i, .fd-skel b {
    display: block; border-radius: 8px;
    background: linear-gradient(90deg, #eef2f7 25%, #f7fafd 50%, #eef2f7 75%);
    background-size: 200% 100%; animation: fd-shimmer 1.2s linear infinite;
  }
  .fd-skel i { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
  .fd-skel b { height: 34px; flex: 1; max-width: 70%; }
  @keyframes fd-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* ── empty state ───────────────────────────────────────────── */
  .fd-empty { text-align: center; padding: 2.75rem 1.5rem 3rem; }
  .fd-empty svg { width: 96px; height: 96px; margin-bottom: 1rem; }
  .fd-empty strong { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.55rem; color: var(--fd-blue-deep); letter-spacing: .01em; }
  .fd-empty p { margin: .35rem auto 1.2rem; color: var(--fd-muted); font-size: .92rem; max-width: 38ch; }

  .fd-more { text-align: center; margin: 1.4rem 0 0; min-height: 2.6rem; }

  /* ── rail ──────────────────────────────────────────────────── */
  .fd-rail { display: grid; gap: 1rem; }
  .fd-panel { background: var(--fd-surface); border: 1px solid var(--fd-line); border-radius: var(--fd-r-lg); padding: 1.05rem 1.1rem; box-shadow: var(--fd-shadow); }
  .fd-panel h2 {
    font-family: 'Barlow Condensed', sans-serif; font-size: .82rem; letter-spacing: .13em;
    text-transform: uppercase; color: var(--fd-blue); margin: 0 0 .8rem; font-weight: 700;
  }
  .fd-sugg { display: flex; align-items: center; gap: .65rem; padding: .5rem 0; border-bottom: 1px solid var(--fd-line-soft); }
  .fd-sugg:last-of-type { border-bottom: 0; }
  .fd-sugg .who { min-width: 0; flex: 1; }
  .fd-sugg .who a { display: block; font-size: .87rem; font-weight: 700; color: var(--fd-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fd-sugg .who a:hover { color: var(--fd-blue); }
  .fd-sugg .who small { font-size: .74rem; color: var(--fd-faint); }
  .fd-sugg .fd-btn { padding: .34rem .85rem; font-size: .78rem; }
  .fd-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
  .fd-tips li { display: flex; gap: .6rem; font-size: .83rem; color: var(--fd-muted); line-height: 1.5; }
  .fd-tips i { color: var(--fd-teal); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
  .fd-tips b { color: var(--fd-ink); font-weight: 700; }

  /* ── profile header ────────────────────────────────────────── */
  .fd-profile { border-radius: var(--fd-r-lg); overflow: hidden; border: 1px solid var(--fd-line); background: var(--fd-surface); box-shadow: var(--fd-shadow); margin-bottom: 1.25rem; }
  .fd-profile-cover {
    height: 128px;
    background:
      radial-gradient(ellipse at 78% 120%, rgba(200,240,0,.4), transparent 60%),
      radial-gradient(ellipse at 12% 0%, rgba(36,208,166,.45), transparent 62%),
      linear-gradient(120deg, #0b3d75, #003B6F);
    position: relative;
  }
  .fd-profile-cover::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size: 44px 44px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
  }
  .fd-profile-main { display: flex; align-items: flex-end; gap: 1rem; padding: 0 1.25rem 1.15rem; margin-top: -38px; flex-wrap: wrap; }
  .fd-profile-main .fd-av { box-shadow: 0 0 0 4px var(--fd-surface), 0 8px 24px rgba(11,61,117,.22); }
  .fd-profile-text { flex: 1; min-width: 0; padding-bottom: .2rem; }
  .fd-profile h1 { font-family: 'Barlow Condensed', Impact, sans-serif; font-size: 1.95rem; margin: .35rem 0 0; color: var(--fd-blue-deep); line-height: 1.1; }
  .fd-stats { display: flex; gap: 1.2rem; margin-top: .3rem; font-size: .84rem; color: var(--fd-muted); }
  .fd-stats b { font-family: 'JetBrains Mono', monospace; color: var(--fd-ink); font-weight: 700; }
  .fd-kind-pill {
    display: inline-flex; align-items: center; gap: .3rem; background: rgba(36,208,166,.12);
    border: 1px solid rgba(36,208,166,.35); color: #0f7a63; border-radius: 999px;
    padding: .1rem .55rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  }

  /* ── new-posts pill ────────────────────────────────────────── */
  .fd-new { position: sticky; top: .75rem; z-index: 15; text-align: center; height: 0; overflow: visible; }
  .fd-new button {
    border: 0; background: var(--fd-blue); color: #fff; border-radius: 999px;
    padding: .55rem 1.25rem; font-family: inherit; font-weight: 700; font-size: .85rem;
    cursor: pointer; box-shadow: 0 10px 26px rgba(11,61,117,.35); display: none;
    align-items: center; gap: .45rem;
  }
  .fd-new.is-on button { display: inline-flex; animation: fd-drop .35s var(--fd-ease); }

  /* ── lightbox ──────────────────────────────────────────────── */
  .fd-lightbox {
    position: fixed; inset: 0; z-index: 200; background: rgba(6,12,22,.92);
    backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 3.5rem 1rem;
  }
  .fd-lightbox.is-on { display: flex; animation: fd-fade .2s var(--fd-ease); }
  @keyframes fd-fade { from { opacity: 0; } to { opacity: 1; } }
  .fd-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .fd-lightbox button {
    position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; display: flex;
    align-items: center; justify-content: center; backdrop-filter: blur(6px);
  }
  .fd-lightbox button:hover { background: rgba(255,255,255,.24); }
  .fd-lightbox button[hidden] { display: none; }
  .fd-lb-x { top: 1rem; right: 1rem; }
  .fd-lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
  .fd-lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
  .fd-lb-count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .8rem; font-family: 'JetBrains Mono', monospace; }

  /* ── dialog ────────────────────────────────────────────────── */
  .fd-dialog {
    position: fixed; inset: 0; z-index: 210; background: rgba(9,18,32,.55);
    backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 1rem;
  }
  .fd-dialog.is-on { display: flex; animation: fd-fade .18s var(--fd-ease); }
  .fd-dialog-box {
    background: var(--fd-surface); border-radius: var(--fd-r-lg); width: min(420px, 100%);
    padding: 1.4rem; box-shadow: 0 30px 80px rgba(9,18,32,.35); animation: fd-rise .22s var(--fd-ease);
  }
  @keyframes fd-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
  .fd-dialog h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; margin: 0 0 .35rem; color: var(--fd-blue-deep); }
  .fd-dialog p { margin: 0 0 1rem; font-size: .9rem; color: var(--fd-muted); line-height: 1.55; }
  .fd-dialog-foot { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1.1rem; }

  /* The sign-in gate's second door. A link rather than a button, because
     registration goes somewhere else on purpose and should not look like the
     equal-weight alternative to coming straight back here. */
  .fd-dialog-alt { margin: .9rem 0 0; font-size: .85rem; color: var(--fd-muted); }
  .fd-dialog-alt a { color: var(--fd-blue); font-weight: 700; text-decoration: none; }
  .fd-dialog-alt a:hover { text-decoration: underline; text-underline-offset: 2px; }
  .fd-reasons { display: grid; gap: .4rem; margin-bottom: .9rem; }
  .fd-reasons label {
    display: flex; align-items: center; gap: .6rem; border: 1px solid var(--fd-line);
    border-radius: 12px; padding: .6rem .8rem; font-size: .88rem; font-weight: 600;
    color: var(--fd-ink-soft); cursor: pointer; transition: border-color .18s, background .18s;
  }
  .fd-reasons label:hover { background: var(--fd-sunk); }
  .fd-reasons input { accent-color: var(--fd-blue); }
  .fd-reasons input:checked ~ span { color: var(--fd-blue-deep); }
  .fd-reasons label:has(input:checked) { border-color: var(--fd-blue); background: rgba(11,61,117,.05); }
  .fd-dialog textarea {
    width: 100%; border: 1px solid var(--fd-line); border-radius: 12px; padding: .65rem .8rem;
    font: inherit; font-size: .88rem; resize: vertical; min-height: 68px; outline: none;
  }
  .fd-dialog textarea:focus { border-color: var(--fd-teal); box-shadow: 0 0 0 3px rgba(36,208,166,.15); }

  /* ── toasts ────────────────────────────────────────────────── */
  .fd-toasts { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 220; display: grid; gap: .5rem; pointer-events: none; width: min(420px, calc(100vw - 2rem)); }
  .fd-toast {
    display: flex; align-items: center; gap: .6rem; background: #0D1B2A; color: #fff;
    border-radius: 999px; padding: .7rem 1.15rem; font-size: .86rem; font-weight: 600;
    box-shadow: 0 14px 40px rgba(9,18,32,.35); animation: fd-rise .25s var(--fd-ease);
  }
  .fd-toast i { font-size: 1.05rem; }
  .fd-toast.is-good i { color: var(--fd-lime); }
  .fd-toast.is-bad  i { color: #fb7185; }
  .fd-toast.is-going { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; }

  .fd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* ── odds and ends ─────────────────────────────────────────── */
  .fd-push { margin-left: auto; }
  .fd-attached:empty { display: none; }
  .fd-tips a { color: var(--fd-blue); font-weight: 700; text-decoration: none; }
  .fd-tips a:hover { text-decoration: underline; }

  /* The guest's composer: what an account is for, said plainly. */
  .fd-guest { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.2rem; flex-wrap: wrap; }
  .fd-guest > i {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
    background: rgba(36,208,166,.12); color: #0f8f72;
  }
  .fd-guest strong { display: block; font-size: .98rem; color: var(--fd-ink); }
  .fd-guest p { margin: .15rem 0 0; font-size: .87rem; color: var(--fd-muted); max-width: 44ch; }
  .fd-guest-actions { display: flex; gap: .5rem; margin-left: auto; flex-wrap: wrap; }


  /* ══════════════════════════════════════════════════════════════
     DESIGN PASS
     Everything above builds the feed's structure. Everything below is the
     layer that makes it look like a product rather than a wireframe: the
     hero band, the sticky tab strip, and the depth/gradient treatment the
     cards, panels and buttons share. It is appended rather than merged into
     the rules above so the two are separable — a rule here always wins on
     source order, and deleting this block restores the plain feed intact.
     ══════════════════════════════════════════════════════════════ */

  /* ── page wash ─────────────────────────────────────────────────
     Fixed, not scrolled: the tint belongs to the window, so it stays put
     while a long feed moves past it. z-index -1 keeps it behind the shell's
     own content without needing a wrapper element. */
  .fd-shell { position: relative; }
  .fd-shell::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(1100px 480px at 50% -200px, rgba(36,208,166,.15), transparent 70%),
      radial-gradient(760px 400px at 100% -40px, rgba(200,240,0,.10), transparent 70%);
  }

  /* ── hero ──────────────────────────────────────────────────────
     isolation: isolate so the decorative layers stack inside the hero and
     cannot slide under a card that happens to follow it. */
  .fd-hero {
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: 26px; margin: 0 0 1.4rem;
    padding: 1.9rem 1.7rem 1.75rem;
    background: linear-gradient(135deg, #0b3d75 0%, #00305c 55%, #021f3d 100%);
    color: #fff;
    box-shadow: 0 26px 60px -30px rgba(3,32,64,.8), 0 2px 4px rgba(3,32,64,.14);
  }
  /* Glow + court grid, in one layer. */
  .fd-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse at 6% -10%, rgba(36,208,166,.45), transparent 55%),
      radial-gradient(ellipse at 96% 118%, rgba(200,240,0,.26), transparent 55%),
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: auto, auto, 46px 46px, 46px 46px;
  }
  /* The same teal→lime stripe the app header wears, so the page reads as
     part of the product rather than as a page inside it. */
  .fd-hero::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 3;
    background: linear-gradient(90deg, transparent, #24d0a6 20%, #C8F000 50%, #24d0a6 80%, transparent);
  }
  .fd-hero-art {
    position: absolute; right: -4%; top: 0; bottom: 0; width: min(48%, 400px); z-index: 1;
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
    mask-image: linear-gradient(90deg, transparent, #000 45%);
  }
  .fd-hero-art svg { width: 100%; height: 100%; display: block; }
  .fd-hero-in { position: relative; z-index: 2; max-width: 44rem; }
  .fd-hero h1 {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: clamp(2.2rem, 5vw, 3.05rem); line-height: 1.02; margin: 0;
    color: #fff; letter-spacing: .012em;
    text-shadow: 0 2px 30px rgba(0,20,45,.45);
  }
  .fd-hero p {
    margin: .5rem 0 0; font-size: .95rem; line-height: 1.6;
    color: rgba(226,238,252,.82); max-width: 48ch;
  }
  .fd-eyebrow-on-dark { color: rgba(214,255,110,.95); margin-bottom: .5rem; }

  /* The three numbers. column-reverse, so the markup can stay a real <dl>
     — term then description — while the number reads first. */
  .fd-hero-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; }
  .fd-stat {
    display: flex; flex-direction: column-reverse; gap: .15rem;
    padding: .55rem .95rem .6rem; border-radius: 15px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .fd-stat dd {
    margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 1.3rem;
    font-weight: 700; line-height: 1; color: #fff;
  }
  .fd-stat dt {
    display: flex; align-items: center; gap: .3rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(206,228,250,.72);
  }
  .fd-stat-auto { background: rgba(200,240,0,.10); border-color: rgba(200,240,0,.32); }
  .fd-stat-auto dd { color: var(--fd-lime); }
  .fd-stat-auto dt { color: rgba(214,255,110,.85); }
  .fd-stat-auto dt i { font-size: .8rem; }

  /* ── tabs, now sticky ──────────────────────────────────────────
     Parked below the app's own sticky header. z-index sits under the
     header's 50 and over the cards, so it slides beneath the site chrome
     rather than through it. */
  .fd-tabs {
    position: sticky; top: var(--fd-sticky-top); z-index: 16;
    margin: 0 0 1.15rem; padding: .28rem;
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    border-color: rgba(226,236,246,.9);
    box-shadow: 0 8px 22px -14px rgba(11,61,117,.55);
  }
  .fd-tab { padding: .5rem 1.15rem; }
  .fd-tab i { font-size: 1.02rem; }
  .fd-tab.is-on {
    background: var(--fd-grad-navy); color: #fff;
    box-shadow: 0 8px 18px -8px rgba(11,61,117,.7);
  }
  .fd-tab.is-on i { color: var(--fd-lime); }
  .fd-tab:not(.is-on):hover { background: rgba(11,61,117,.06); }

  /* The new-posts pill has to clear the tab strip it now sits under. */
  .fd-new { top: calc(var(--fd-sticky-top) + 3.5rem); }
  .fd-new button {
    background: var(--fd-grad-navy);
    box-shadow: 0 12px 28px -10px rgba(11,61,117,.75), 0 0 0 3px rgba(255,255,255,.7);
  }
  .fd-new button i { color: var(--fd-lime); }

  /* ── cards ─────────────────────────────────────────────────────
     A hairline of the brand gradient across the top on hover: enough to say
     "this row is live" without a border colour change on every card. */
  .fd-card {
    position: relative; border-radius: 22px; margin-bottom: 1.15rem;
    box-shadow: var(--fd-shadow-card);
    transition: box-shadow .28s var(--fd-ease), border-color .28s var(--fd-ease),
                transform .28s var(--fd-ease);
  }
  .fd-card::after {
    content: ''; position: absolute; left: 1.35rem; right: 1.35rem; top: 0; height: 2px;
    border-radius: 0 0 2px 2px; background: var(--fd-grad-accent);
    opacity: 0; transition: opacity .28s var(--fd-ease); pointer-events: none;
  }
  .fd-card:hover {
    transform: translateY(-2px); border-color: #d7e2ef; box-shadow: var(--fd-shadow-hi);
  }
  .fd-card:hover::after { opacity: .9; }
  .fd-card.fd-empty:hover, .fd-composer:hover { transform: none; }

  /* ── buttons ───────────────────────────────────────────────────*/
  .fd-btn { background: var(--fd-grad-navy); box-shadow: 0 6px 16px -9px rgba(11,61,117,.9); }
  .fd-btn:hover:not(:disabled) { box-shadow: 0 14px 28px -12px rgba(11,61,117,.75); }
  .fd-btn-ghost { background: var(--fd-sunk); box-shadow: none; }
  .fd-btn-danger { background: linear-gradient(135deg, #f0416a, #e11d48); }

  /* Post is the one lime button on the page. It is the only control here
     that creates something, and the brand's accent should be spent on it
     rather than on decoration. */
  #fd-post {
    background: var(--fd-grad-lime); color: #223206;
    box-shadow: 0 8px 20px -10px rgba(160,200,0,.95);
  }
  #fd-post:hover:not(:disabled) { box-shadow: 0 14px 28px -12px rgba(160,200,0,.85); }
  #fd-post .fd-spin { border-color: rgba(34,50,6,.3); border-top-color: #223206; }

  /* ── avatars ───────────────────────────────────────────────────*/
  .fd-av {
    box-shadow: 0 0 0 1px rgba(13,27,42,.06), 0 6px 14px -7px rgba(11,61,117,.6);
    transition: transform .28s var(--fd-ease);
  }
  .fd-card:hover .fd-top > a .fd-av, .fd-card:hover .fd-top > .fd-av { transform: scale(1.05); }
  .fd-av-kind { box-shadow: 0 1px 4px rgba(13,27,42,.28), 0 0 0 1.5px var(--fd-surface); }

  /* ── composer ──────────────────────────────────────────────────*/
  .fd-composer { padding: 1.15rem 1.2rem 1.1rem; }
  .fd-composer:focus-within {
    border-color: rgba(36,208,166,.5);
    box-shadow: 0 0 0 4px rgba(36,208,166,.12), var(--fd-shadow-hi);
  }
  .fd-composer textarea { font-size: 1.05rem; }
  .fd-tool {
    border-radius: 999px; padding: .45rem .85rem;
    box-shadow: inset 0 0 0 1px transparent;
  }
  .fd-tool:hover { box-shadow: inset 0 0 0 1px rgba(36,208,166,.32); }
  .fd-tagbar { border-color: #dde6f1; }
  .fd-tagbar:focus-within { border-style: solid; border-color: rgba(36,208,166,.5); background: rgba(36,208,166,.05); }
  .fd-progress-bar { background: #e6edf6; }

  /* ── post header ───────────────────────────────────────────────*/
  .fd-top { padding: 1rem 1.15rem .65rem; }
  .fd-name { font-size: .96rem; }
  .fd-tag-auto {
    background: var(--fd-grad-lime); color: #29350e;
    box-shadow: 0 3px 10px -3px rgba(180,220,0,.95);
  }
  .fd-tag-private { background: #eaf0f8; }

  /* ── media, inset instead of full-bleed ────────────────────────
     A photo that ran edge to edge inside a 22px-radius card left two square
     corners against a rounded shell. Inset by a hair and rounded, it reads
     as part of the card. */
  .fd-media, .fd-shot {
    margin: .15rem .7rem .35rem; border-radius: 16px;
    box-shadow: 0 1px 3px rgba(13,27,42,.10);
  }
  .fd-media { background: #e9eff7; }
  .fd-shot-play i { box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 14px 34px rgba(0,0,0,.45); }

  /* ── actions ───────────────────────────────────────────────────*/
  .fd-actions { padding: .4rem .7rem .55rem; gap: .2rem; }
  .fd-act { border-radius: 999px; padding: .5rem .85rem; }
  .fd-act .js-like-count, .fd-act .js-comment-count {
    font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700;
  }
  .js-share:hover { background: rgba(36,208,166,.1); color: #0f8f72; }

  /* ── comments ──────────────────────────────────────────────────*/
  .fd-comments { background: linear-gradient(180deg, #fafcff, #f6f9fd); }
  .fd-comment-bubble { box-shadow: 0 1px 2px rgba(13,27,42,.04); }

  /* ── rail ──────────────────────────────────────────────────────*/
  .fd-rail { gap: 1.15rem; }
  .fd-panel { border-radius: 22px; padding: 1.15rem 1.15rem 1.25rem; box-shadow: var(--fd-shadow-card); }
  .fd-panel h2 {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .85rem;
    font-size: .8rem;
  }
  .fd-panel h2 i { font-size: 1rem; color: var(--fd-teal); letter-spacing: 0; }
  /* A rule that runs out to the panel edge, so each heading reads as a
     divider rather than as another line of text. */
  .fd-panel h2::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--fd-line), transparent);
  }

  .fd-sugg-list { display: grid; gap: .1rem; }
  .fd-sugg {
    border-bottom: 0; margin: 0 -.55rem; padding: .55rem; border-radius: 14px;
    transition: background .18s var(--fd-ease);
  }
  .fd-sugg:hover { background: var(--fd-sunk); }
  .fd-sugg .who small { display: inline-flex; align-items: center; gap: .28rem; }
  .fd-sugg .who small i { font-size: .82rem; color: var(--fd-teal); }
  .fd-sugg .fd-btn-ghost { background: var(--fd-surface); }
  .fd-sugg:hover .fd-btn-ghost { background: var(--fd-surface); border-color: rgba(36,208,166,.45); color: #0f8f72; }

  /* Trending as a ranking with weight behind it, rather than a flat cloud of
     chips that gave a topic used once the same footprint as one used forty
     times. */
  .fd-trend { list-style: none; margin: 0; padding: 0; display: grid; gap: .05rem; }
  .fd-trend a {
    display: grid; grid-template-columns: 1.35rem minmax(0, 1fr);
    grid-template-areas: 'rank name' '.    bar';
    gap: .3rem .55rem; align-items: center;
    margin: 0 -.55rem; padding: .5rem .55rem; border-radius: 14px;
    text-decoration: none; transition: background .18s var(--fd-ease);
  }
  .fd-trend a:hover { background: var(--fd-sunk); }
  .fd-trend-rank {
    grid-area: rank; text-align: center; font-family: 'JetBrains Mono', monospace;
    font-size: .76rem; font-weight: 700; color: var(--fd-faint);
  }
  .fd-trend li:nth-child(-n+3) .fd-trend-rank { color: var(--fd-teal); }
  .fd-trend-name { grid-area: name; display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
  .fd-trend-name b {
    flex: 1; min-width: 0; font-size: .86rem; font-weight: 700; color: var(--fd-blue-deep);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .fd-trend-name small {
    flex-shrink: 0; font-family: 'JetBrains Mono', monospace;
    font-size: .7rem; color: var(--fd-faint);
  }
  .fd-trend a:hover .fd-trend-name b { color: #0f8f72; }
  .fd-trend-bar { grid-area: bar; height: 4px; border-radius: 999px; background: var(--fd-line-soft); overflow: hidden; }
  .fd-trend-bar i { display: block; height: 100%; border-radius: 999px; background: var(--fd-grad-accent); }

  .fd-tips li { align-items: flex-start; }
  .fd-tips i {
    width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center;
    justify-content: center; font-size: .82rem; margin-top: 0;
    background: rgba(36,208,166,.12); color: #0f8f72;
  }

  /* The rail's sign-in ask. Dark, because it is the one thing in the column
     that is asking for something rather than showing something. */
  .fd-panel-cta {
    position: relative; overflow: hidden; text-align: center;
    background: linear-gradient(160deg, #0b3d75, #02264a);
    border-color: rgba(255,255,255,.1); color: #fff;
    box-shadow: 0 20px 44px -24px rgba(3,32,64,.85);
  }
  .fd-panel-cta::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(36,208,166,.32), transparent 62%);
  }
  .fd-panel-cta > * { position: relative; z-index: 1; }
  .fd-panel-cta > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 14px; font-size: 1.35rem;
    background: rgba(200,240,0,.14); color: var(--fd-lime); margin-bottom: .6rem;
  }
  .fd-panel-cta strong {
    display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem;
    letter-spacing: .01em;
  }
  .fd-panel-cta p { margin: .3rem 0 1rem; font-size: .84rem; line-height: 1.55; color: rgba(222,236,250,.78); }
  .fd-panel-cta .fd-btn { width: 100%; background: var(--fd-grad-lime); color: #223206; }

  /* ── guest card ────────────────────────────────────────────────*/
  .fd-guest { position: relative; overflow: hidden; }
  .fd-guest::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--fd-grad-accent);
  }
  .fd-guest { padding-left: 1.45rem; }

  /* ── empty state ───────────────────────────────────────────────*/
  .fd-empty { padding: 3rem 1.5rem 3.25rem; }
  .fd-empty svg {
    width: 104px; height: 104px;
    filter: drop-shadow(0 12px 22px rgba(11,61,117,.14));
  }
  .fd-empty strong { font-size: 1.7rem; }

  /* ── load more ─────────────────────────────────────────────────*/
  .fd-more .fd-btn-ghost { background: var(--fd-surface); box-shadow: var(--fd-shadow-card); }

  /* ── profile / topic header ────────────────────────────────────*/
  .fd-profile { border-radius: 26px; box-shadow: var(--fd-shadow-card); }
  .fd-profile-cover { height: 150px; }
  .fd-profile-cover::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, transparent, #24d0a6 20%, #C8F000 50%, #24d0a6 80%, transparent);
  }

  /* ── phone ─────────────────────────────────────────────────── */

  /* ── composer, second pass ─────────────────────────────────────
     The share box was a control panel at rest: an empty topic field, a
     six-control toolbar and a disabled Post button all sitting under a
     one-line prompt that nobody had typed into yet. It now has two states.
     Folded, it is a face and an invitation. Open — the moment focus, a
     restored draft or a dropped photo says a post is being written — it
     unfolds into the full set, grouped so the tools sit on one side and
     sending sits on the other. */
  .fd-composer { position: relative; padding: 1.15rem 1.2rem 1.1rem; }
  .fd-composer:not(.is-open) { padding: .85rem 1.05rem; }
  .fd-composer .fd-composer-head { align-items: center; }
  .fd-composer.is-open .fd-composer-head { align-items: flex-start; }
  .fd-composer-av { flex: none; }

  /* Folded, the prompt is a pill you can obviously click into. Open, it gets
     out of the way and behaves like the writing surface it is. */
  .fd-composer:not(.is-open) textarea {
    padding: .72rem 1rem; min-height: 0; font-size: .97rem;
    background: var(--fd-sunk); border: 1px solid var(--fd-line);
    border-radius: 999px; cursor: text;
    transition: background .2s var(--fd-ease), border-color .2s var(--fd-ease);
  }
  .fd-composer:not(.is-open):hover textarea {
    background: var(--fd-surface); border-color: rgba(36,208,166,.45);
  }
  .fd-composer.is-open textarea { padding: .4rem 0 .1rem; }

  /* The three folded pieces. Kept out of the layout entirely rather than
     merely faded, so the resting card is genuinely one line tall. */
  .fd-composer:not(.is-open) .fd-composer-id,
  .fd-composer:not(.is-open) .fd-tagbar,
  .fd-composer:not(.is-open) .fd-composer-row { display: none; }
  .fd-composer.is-open .fd-composer-id,
  .fd-composer.is-open .fd-tagbar,
  .fd-composer.is-open .fd-composer-row { animation: fd-unfold .24s var(--fd-ease); }
  @keyframes fd-unfold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* "Posting as" — the switch that changes the avatar, next to the avatar. */
  .fd-composer-id { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
  .fd-composer-idlabel {
    font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--fd-faint);
  }

  /* Tools on the left, sending on the right — two jobs, two clusters, instead
     of one wrapping line where Post landed wherever the row happened to end. */
  .fd-composer-row {
    justify-content: space-between; gap: .5rem;
    margin-top: .8rem; padding-top: .75rem;
  }
  .fd-toolset, .fd-sendset { display: flex; align-items: center; gap: .3rem; min-width: 0; }
  .fd-sendset { gap: .45rem; }
  .fd-counter { flex: none; }

  /* The visibility control was a bare <select> standing beside two pill
     groups. It is now the same shape as everything else on the row. */
  .fd-vis {
    padding: .3rem .5rem .3rem .7rem; border-radius: 999px;
    background: var(--fd-sunk); border: 1px solid var(--fd-line);
    transition: border-color .18s var(--fd-ease), background .18s var(--fd-ease);
  }
  .fd-vis:hover { border-color: rgba(36,208,166,.45); background: var(--fd-surface); }
  .fd-vis:focus-within { border-color: rgba(36,208,166,.6); background: var(--fd-surface); }
  .fd-vis select {
    appearance: none; -webkit-appearance: none; padding: .15rem 0;
    font-size: .78rem; font-weight: 700;
  }
  .fd-vis-caret { font-size: .95rem; color: var(--fd-faint); margin-left: -.1rem; }
  .fd-vis i#fd-vis-icon { color: var(--fd-teal); }

  #fd-post { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.2rem; }
  #fd-post i { font-size: 1rem; }
  #fd-post:disabled { background: var(--fd-sunk); color: var(--fd-faint); box-shadow: none; opacity: 1; }

  /* Drop target: the card already catches a file dropped anywhere on it, so
     the card is what should say so — a line of small print under the prompt
     was easy to miss with a photo held over it. */
  .fd-drop-hint {
    position: absolute; inset: 0; z-index: 5; margin: 0;
    flex-direction: column; justify-content: center; gap: .3rem;
    border-radius: inherit; text-align: center; pointer-events: none;
    background: rgba(244,251,249,.92); backdrop-filter: blur(3px);
    box-shadow: inset 0 0 0 2px var(--fd-teal);
  }
  .fd-drop-hint i { font-size: 1.9rem; color: var(--fd-teal); }
  .fd-drop-hint b { font-size: .98rem; color: var(--fd-blue-deep); }
  .fd-drop-hint small { font-size: .8rem; font-weight: 600; color: var(--fd-muted); }
  .fd-composer.is-drop { border-color: var(--fd-teal); box-shadow: 0 0 0 4px rgba(36,208,166,.15); }

  @media (max-width: 640px) {
    /* Two words on a button beat an icon nobody is sure about — but not at
       the cost of wrapping the row onto three lines. Labels go, Post stays. */
    .fd-tool .fd-label { display: none; }
    .fd-tool { padding: .5rem .6rem; }
    .fd-composer-row { flex-wrap: nowrap; }
    .fd-sendset { flex: 1; justify-content: flex-end; }
    .fd-vis { padding-left: .55rem; }
    .fd-vis select { max-width: 6.2rem; }
    .fd-composer-id { gap: .35rem; }
    .fd-as span { padding: .3rem .6rem; font-size: .74rem; }
  }

  @media (max-width: 640px) {
    .fd-shell { padding: 1.25rem .75rem 4.5rem; --fd-sticky-top: 80px; }
    .fd-card { border-radius: 18px; }
    .fd-act { padding: .55rem .6rem; }
    .fd-act .fd-label { display: none; }
    .fd-composer, .fd-top { padding-left: .9rem; padding-right: .9rem; }
    .fd-body { padding-left: .9rem; padding-right: .9rem; }
    .fd-media, .fd-shot { margin-left: .5rem; margin-right: .5rem; border-radius: 13px; }
    .fd-card::after { left: 1rem; right: 1rem; }

    /* The hero keeps its band and loses its ornament: the court sits behind
       the headline at this width, and a stat strip of three cannot be three
       across on a 360px screen. */
    .fd-hero { border-radius: 20px; padding: 1.4rem 1.15rem 1.35rem; }
    .fd-hero-art { width: 62%; opacity: .22; }
    .fd-hero p { font-size: .9rem; }
    .fd-hero-stats { gap: .4rem; }
    .fd-stat { flex: 1 1 8.5rem; padding: .5rem .7rem .55rem; }
    .fd-stat dd { font-size: 1.15rem; }
    .fd-stat dt { font-size: .62rem; letter-spacing: .07em; }

    .fd-tabs { display: flex; width: 100%; }
    .fd-tab { flex: 1; justify-content: center; }
    .fd-panel { border-radius: 18px; }
    .fd-profile-cover { height: 118px; }
  }

  /* Between phone and the two-column breakpoint the rail is already stacked
     under the timeline; the hero is the only thing that still wants room. */
  @media (max-width: 1023px) and (min-width: 641px) {
    .fd-hero { padding-right: 2.2rem; }
  }

  /* The feed section on a public profile page. Given its own top margin and a
     rule above it, because it is dropped into pages this stylesheet does not
     otherwise control and cannot assume what it lands under. */
  .fd-profile-feed { padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid var(--fd-line); }
  .fd-profile-feed-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem;
  }
  .fd-profile-feed-head h2 {
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem; margin: 0;
    color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-profile-feed-head small { color: var(--fd-muted); font-size: .84rem; }
  .fd-profile-feed-head a { font-size: .86rem; font-weight: 700; text-decoration: none; color: var(--fd-blue); }
  .fd-profile-feed-head a:hover { text-decoration: underline; }
  .fd-profile-feed + .fd-profile-feed-head { margin-top: 2rem; }

  /* ── reactions, reposts, saves ─────────────────────────────────── */
  .fd-react-wrap { position: relative; display: inline-flex; }
  .fd-react-pop {
    position: absolute; bottom: calc(100% + .35rem); left: 0; z-index: 30;
    display: flex; gap: .1rem; padding: .3rem;
    background: var(--fd-surface); border: 1px solid var(--fd-line);
    border-radius: 999px; box-shadow: var(--fd-shadow-up);
  }
  .fd-react-pop[hidden] { display: none; }
  .fd-react-pop button {
    border: 0; background: none; cursor: pointer; font: inherit;
    display: inline-flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .35rem .5rem; border-radius: 10px; line-height: 1;
  }
  .fd-react-pop button:hover { background: var(--fd-sunk); transform: translateY(-2px); }
  .fd-react-pop button i { font-size: 1.25rem; }
  .fd-react-pop button span { font-size: .62rem; font-weight: 700; color: var(--fd-muted); }

  .fd-act.js-save.is-on, .fd-act.js-repost.is-on { color: var(--fd-teal); }

  /* The quoted original inside a repost. Set back and quieter than the card
     around it, so it reads as something being passed on rather than as a
     second post competing with the first. */
  .fd-quote {
    display: block; margin: .1rem 0 .2rem; padding: .7rem .85rem;
    border: 1px solid var(--fd-line); border-radius: var(--fd-r);
    background: var(--fd-sunk); text-decoration: none; color: inherit;
  }
  .fd-quote:hover { border-color: #cbd8e8; }
  .fd-quote.is-gone { color: var(--fd-faint); font-size: .86rem; font-style: italic; }
  .fd-quote-head { display: flex; align-items: center; gap: .45rem; font-size: .84rem; margin-bottom: .3rem; }
  .fd-quote-head b { color: var(--fd-ink); }
  .fd-quote-head time { color: var(--fd-faint); font-size: .78rem; }
  .fd-quote-body { display: block; font-size: .89rem; color: var(--fd-ink-soft); line-height: 1.5; }
  .fd-quote-media { display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; font-size: .78rem; color: var(--fd-muted); }

  /* The "@" picker. Positioned over the composer body rather than pushing it
     down — a box that reflows the textarea while someone is typing in it moves
     the words out from under the caret. */
  .fd-mention-pop {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    max-height: 220px; overflow-y: auto;
  }
  /* A comment box is the last thing on a card, so its list opens upwards —
     downwards would put it off the bottom of the page. */
  .fd-mention-pop.is-up { top: auto; bottom: calc(100% + .3rem); }
  .fd-mention-pop b { font-weight: 700; }
  .fd-mention-pop small { color: var(--fd-faint); font-weight: 500; }

  /* A mention reads as a name first and a link second — the same weight as
     the surrounding sentence, only coloured. */
  .fd-mention { color: var(--fd-blue); font-weight: 700; text-decoration: none; }
  .fd-mention:hover { text-decoration: underline; }

  /* ── promoted placements ───────────────────────────────────────
     Built from the same tokens as everything else, and deliberately quieter
     than a post card: a placement that shouts is the thing readers learn to
     skip, and the "Promoted" flag is doing the disclosure work anyway. */
  .fd-promo-link {
    display: flex; gap: .8rem; align-items: flex-start;
    text-decoration: none; color: inherit; border-radius: var(--fd-r);
  }
  .fd-promo-link:hover .fd-promo-title { color: var(--fd-blue); }
  .fd-promo-link:focus-visible { outline: 2px solid var(--fd-teal); outline-offset: 3px; }

  .fd-promo-media {
    width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden;
    background: var(--fd-sunk); display: flex; align-items: center; justify-content: center;
  }
  .fd-promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .fd-promo-fallback {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.5rem;
    color: var(--fd-faint); line-height: 1;
  }

  .fd-promo-body { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
  .fd-promo-title { font-size: .95rem; font-weight: 700; color: var(--fd-ink); line-height: 1.3; }
  .fd-promo-sub {
    font-size: .84rem; color: var(--fd-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .fd-promo-cta {
    font-size: .8rem; font-weight: 700; color: var(--fd-blue);
    display: inline-flex; align-items: center; gap: .25rem; margin-top: .18rem;
  }

  /* The in-feed card sits in the timeline, so it carries its own label —
     the rail's panel heading does that job in the other position. */
  .fd-promo-feed { padding: 1rem 1.1rem; }
  .fd-promo-flag {
    font-family: 'Barlow Condensed', sans-serif; font-size: .68rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--fd-muted);
  }

  /* Our own "Advertise with CV 360" card (feed/_house-ad). Louder than a paid
     card on purpose — it is selling the space, and it only ever appears when
     nobody has bought it — but still a card in the feed's own palette. */
  .fd-house-ad {
    background: linear-gradient(135deg, var(--fd-blue-deep), #0f5a8f 62%, #13806f);
    border-color: transparent; color: #fff; position: relative; overflow: hidden;
  }
  .fd-house-ad::after {
    content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px;
    border-radius: 50%; background: var(--fd-lime); opacity: .15; pointer-events: none;
  }
  .fd-house-link {
    display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1.15rem;
    color: inherit; text-decoration: none; position: relative; z-index: 1;
  }
  .fd-house-link:focus-visible { outline: 2px solid var(--fd-lime); outline-offset: -4px; border-radius: inherit; }
  .fd-house-icon {
    width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: var(--fd-lime); font-size: 1.5rem;
  }
  .fd-house-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
  .fd-house-flag {
    font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--fd-lime);
  }
  .fd-house-title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: #fff; }
  .fd-house-sub { font-size: .84rem; line-height: 1.45; color: rgba(255,255,255,.82); margin: 0; }
  .fd-house-ad .fd-house-cta {
    flex: none; background: var(--fd-lime); border-color: var(--fd-lime); color: #0b2540; white-space: nowrap;
  }
  .fd-house-link:hover .fd-house-cta { filter: brightness(1.05); }
  .fd-house-ad.is-rail { padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
  .fd-house-ad.is-rail .fd-house-sub { margin: .1rem 0 .7rem; position: relative; z-index: 1; }
  .fd-house-ad.is-rail .fd-house-cta { width: 100%; justify-content: center; position: relative; z-index: 1; }
  @media (max-width: 560px) {
    .fd-house-link { flex-wrap: wrap; }
    .fd-house-ad .fd-house-link .fd-house-cta { width: 100%; justify-content: center; }
  }

  .fd-promo-ask p { margin: 0 0 .8rem; font-size: .86rem; color: var(--fd-muted); line-height: 1.5; }
  .fd-promo-ask .fd-btn { width: 100%; }

  /* ════════════════════════════════════════════════════════════════
     Discover: a page you browse, not a column you scroll
     ════════════════════════════════════════════════════════════════ */

  /* ── the bar: tabs, search and filters as one sticky piece ────────
     The tab strip used to be sticky on its own. Now three controls travel
     together, because a filter you cannot reach without scrolling back to the
     top is a filter you set once and never change. */
  .fd-bar {
    position: sticky; top: var(--fd-sticky-top); z-index: 16;
    margin: 0 0 1.15rem; padding: .5rem .55rem;
    display: grid; gap: .5rem;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    border: 1px solid rgba(226,236,246,.9); border-radius: 18px;
    box-shadow: 0 10px 26px -16px rgba(11,61,117,.6);
  }
  /* Inside the bar the tabs are just a control again — the bar is what sticks. */
  .fd-bar .fd-tabs {
    position: static; margin: 0; box-shadow: none;
    background: var(--fd-sunk); border: 1px solid var(--fd-line);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .fd-bar-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

  /* ── search ───────────────────────────────────────────────────── */
  .fd-search {
    flex: 1 1 15rem; min-width: 0; display: flex; align-items: center; gap: .45rem;
    background: var(--fd-surface); border: 1px solid var(--fd-line);
    border-radius: 999px; padding: .2rem .28rem .2rem .8rem;
    transition: border-color .18s var(--fd-ease), box-shadow .18s var(--fd-ease);
  }
  .fd-search:focus-within { border-color: rgba(36,208,166,.6); box-shadow: 0 0 0 3px rgba(36,208,166,.14); }
  .fd-search > i { color: var(--fd-faint); font-size: 1.02rem; flex: none; }
  .fd-search input[type="search"] {
    flex: 1; min-width: 0; border: 0; outline: none; background: none;
    font: inherit; font-size: .88rem; color: var(--fd-ink); padding: .42rem 0;
  }
  .fd-search input[type="search"]::-webkit-search-cancel-button { display: none; }
  .fd-search input::placeholder { color: var(--fd-faint); }
  .fd-search-x {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; color: var(--fd-muted);
    background: var(--fd-sunk); text-decoration: none; font-size: .9rem;
  }
  .fd-search-x:hover { background: #e7edf6; color: var(--fd-blue); }
  .fd-search .fd-btn { flex: none; padding: .45rem .9rem; border-radius: 999px; }
  .fd-search .fd-btn i { display: none; }

  /* ── filter chips ─────────────────────────────────────────────── */
  .fd-chips {
    display: flex; align-items: center; gap: .3rem; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none; padding: .05rem .1rem;
  }
  .fd-chips::-webkit-scrollbar { display: none; }
  .fd-chips-gap { flex: 1 0 .5rem; }
  .fd-chip {
    flex: none; display: inline-flex; align-items: center; gap: .32rem;
    padding: .34rem .72rem; border-radius: 999px; text-decoration: none;
    font-size: .79rem; font-weight: 700; color: var(--fd-muted);
    background: var(--fd-sunk); border: 1px solid transparent; white-space: nowrap;
    transition: background .16s var(--fd-ease), color .16s var(--fd-ease), border-color .16s var(--fd-ease);
  }
  .fd-chip i { font-size: .92rem; }
  .fd-chip:hover { background: #e7edf6; color: var(--fd-blue); }
  .fd-chip.is-on {
    background: var(--fd-grad-navy); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(11,61,117,.8);
  }
  .fd-chip.is-on i { color: var(--fd-lime); }
  .fd-chip-sort { background: transparent; border-color: var(--fd-line); }
  .fd-chip-sort i { color: #f97316; }
  .fd-chip-sort.is-on i { color: var(--fd-lime); }

  /* The new-posts pill parks under a bar that is now two rows tall. */
  .fd-new { top: calc(var(--fd-sticky-top) + 6.9rem); }

  /* ── trending, as a strip, for the width where the rail is not beside you ── */
  .fd-trend-strip {
    display: none; align-items: center; gap: .4rem; overflow-x: auto;
    margin: 0 0 1rem; padding-bottom: .2rem;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .fd-trend-strip::-webkit-scrollbar { display: none; }
  .fd-trend-strip > span {
    flex: none; display: inline-flex; align-items: center; gap: .3rem;
    font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
    letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--fd-muted);
  }
  .fd-trend-strip > span i { color: #f97316; }
  .fd-trend-strip a {
    flex: none; padding: .3rem .68rem; border-radius: 999px; text-decoration: none;
    font-size: .79rem; font-weight: 700; color: var(--fd-blue);
    background: var(--fd-surface); border: 1px solid var(--fd-line); white-space: nowrap;
  }
  .fd-trend-strip a:hover { border-color: rgba(36,208,166,.5); color: #0f8f72; }
  @media (max-width: 1023px) {
    .fd-trend-strip { display: flex; }
    /* …and the rail's own copy stands down, so the same eight topics are not
       on the page twice. */
    .fd-layout.is-discover .fd-panel-trend { display: none; }
  }

  /* ── latest clips ─────────────────────────────────────────────── */
  .fd-clips { margin: 0 0 1.15rem; }
  .fd-clips-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .55rem; }
  .fd-clips-head h2 {
    display: flex; align-items: center; gap: .4rem; margin: 0;
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.15rem; font-weight: 700;
    color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-clips-head h2 i { color: var(--fd-teal); font-size: 1.05rem; }
  .fd-clips-head a { font-size: .8rem; font-weight: 700; color: var(--fd-blue); text-decoration: none; white-space: nowrap; }
  .fd-clips-head a:hover { color: var(--fd-teal); }
  .fd-clips-row {
    display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .35rem;
    scroll-snap-type: x proximity; scrollbar-width: thin;
  }
  .fd-clips-row::-webkit-scrollbar { height: 6px; }
  .fd-clips-row::-webkit-scrollbar-thumb { background: #dbe4f0; border-radius: 99px; }
  .fd-clip {
    flex: none; width: 208px; scroll-snap-align: start; text-decoration: none; color: inherit;
    display: grid; gap: .4rem;
  }
  .fd-clip-shot {
    position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px;
    overflow: hidden; background: var(--fd-sunk); border: 1px solid var(--fd-line);
    transition: transform .2s var(--fd-ease), box-shadow .2s var(--fd-ease);
  }
  .fd-clip:hover .fd-clip-shot { transform: translateY(-2px); box-shadow: var(--fd-shadow-hi); }
  .fd-clip-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* No poster is the normal case for an older clip: a court in the brand's own
     colours beats a grey box, and it cannot 404. */
  .fd-clip-ph {
    position: absolute; inset: 0; background: var(--fd-grad-navy);
    background-image:
      linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
      var(--fd-grad-navy);
    background-size: 100% 50%, 50% 100%, auto;
  }
  .fd-clip-play {
    position: absolute; inset: 0; margin: auto; width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--fd-blue-deep);
    font-size: 1.35rem; box-shadow: 0 6px 18px rgba(4,26,52,.35);
  }
  .fd-clip-time, .fd-clip-auto {
    position: absolute; bottom: .4rem; padding: .12rem .42rem; border-radius: 6px;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  }
  .fd-clip-time { right: .4rem; background: rgba(4,26,52,.78); color: #fff; }
  .fd-clip-auto {
    left: .4rem; background: var(--fd-lime); color: #223206;
    display: inline-flex; align-items: center; gap: .2rem;
  }
  .fd-clip-meta { display: grid; gap: .1rem; }
  .fd-clip-meta b {
    font-size: .82rem; font-weight: 700; line-height: 1.35; color: var(--fd-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .fd-clip:hover .fd-clip-meta b { color: var(--fd-blue); }
  .fd-clip-meta small { font-size: .74rem; color: var(--fd-faint); }

  /* ── browse: the clubs, players and tournaments themselves ────── */
  .fd-browse { padding: 1.05rem 0 .9rem; }
  .fd-browse-head { padding: 0 1.15rem; margin-bottom: .5rem; }
  .fd-browse-head h2 {
    display: flex; align-items: center; gap: .4rem; margin: 0;
    font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700;
    color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-browse-head h2 i { color: var(--fd-teal); font-size: 1.05rem; }
  .fd-browse-head p { margin: .15rem 0 0; font-size: .84rem; color: var(--fd-muted); line-height: 1.5; }
  .fd-browse-group + .fd-browse-group { margin-top: .5rem; }
  .fd-browse-group h3 {
    margin: .55rem 0 .35rem; padding: 0 1.15rem;
    display: flex; align-items: center; gap: .35rem;
    font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
    letter-spacing: .11em; font-size: .74rem; font-weight: 700; color: var(--fd-muted);
  }
  .fd-browse-group h3 i { color: var(--fd-teal); font-size: .95rem; letter-spacing: 0; }
  .fd-browse-row {
    display: flex; gap: .6rem; overflow-x: auto; padding: .1rem 1.15rem .4rem;
    scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none;
  }
  .fd-browse-row::-webkit-scrollbar { display: none; }
  .fd-browse-card {
    flex: none; width: 9.5rem; scroll-snap-align: start;
    display: grid; justify-items: center; gap: .5rem; text-align: center;
    padding: .85rem .6rem .75rem; border-radius: 16px;
    background: var(--fd-sunk); border: 1px solid transparent;
    transition: background .18s var(--fd-ease), border-color .18s var(--fd-ease), transform .18s var(--fd-ease);
  }
  .fd-browse-card:hover { background: var(--fd-surface); border-color: var(--fd-line); transform: translateY(-2px); box-shadow: var(--fd-shadow-card); }
  .fd-browse-link { display: grid; justify-items: center; gap: .35rem; text-decoration: none; color: inherit; min-width: 0; width: 100%; }
  .fd-browse-link b {
    font-size: .84rem; font-weight: 700; color: var(--fd-ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .fd-browse-link:hover b { color: var(--fd-blue); }
  .fd-browse-link small { font-size: .72rem; color: var(--fd-faint); }
  .fd-browse-card .fd-btn { padding: .3rem .8rem; font-size: .76rem; width: 100%; justify-content: center; }

  /* ── follow, in every place it now appears ────────────────────── */
  .fd-follow {
    flex: none; display: inline-flex; align-items: center; gap: .22rem;
    padding: .3rem .7rem; margin-left: auto; border-radius: 999px;
    border: 1px solid rgba(36,208,166,.5); background: rgba(36,208,166,.08);
    color: #0f8f72; font: inherit; font-size: .77rem; font-weight: 700; cursor: pointer;
    transition: background .16s var(--fd-ease), color .16s var(--fd-ease), border-color .16s var(--fd-ease);
  }
  .fd-follow i { font-size: .9rem; }
  .fd-follow:hover { background: rgba(36,208,166,.16); }
  /* Followed is a quieter state than following-is-offered: the button has done
     its job and should stop competing with the post. */
  .js-follow.is-on { background: var(--fd-sunk); border-color: var(--fd-line); color: var(--fd-muted); }
  .js-follow.is-on i { display: none; }
  .fd-follow:disabled { opacity: .6; cursor: default; }
  /* The card header has a menu button after this; keep them apart. */
  .fd-top .fd-follow + .fd-menu { margin-left: .35rem; }

  /* Where an auto post came from, beside the chip that says how it was made. */
  .fd-from { color: var(--fd-faint); font-size: .78rem; }

  /* ── search results heading ───────────────────────────────────── */
  .fd-results { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
  .fd-results h2 {
    margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 1.35rem;
    font-weight: 700; color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-results a { font-size: .8rem; font-weight: 700; color: var(--fd-muted); text-decoration: none; white-space: nowrap; }
  .fd-results a:hover { color: var(--fd-rose); }

  /* ── the end of the feed ──────────────────────────────────────── */
  .fd-end { text-align: center; padding: 1.9rem 1.5rem 1.75rem; margin-top: 1.15rem; }
  .fd-end > i { font-size: 1.9rem; color: var(--fd-teal); }
  .fd-end strong {
    display: block; margin-top: .35rem; font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.35rem; color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-end p { margin: .25rem auto 1rem; color: var(--fd-muted); font-size: .88rem; max-width: 42ch; line-height: 1.55; }
  .fd-end-acts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
  .fd-end-acts .fd-btn { font-size: .82rem; }

  /* ── skeletons ────────────────────────────────────────────────── */
  .fd-skels { display: none; text-align: left; }
  .fd-more.is-loading .fd-skels { display: grid; gap: 1.15rem; margin-bottom: 1rem; }
  .fd-more.is-loading > .fd-btn { display: none; }
  .fd-skel {
    background: var(--fd-surface); border: 1px solid var(--fd-line);
    border-radius: 22px; padding: 1.1rem 1.15rem;
  }
  .fd-skel-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
  .fd-skel-av { width: 42px; height: 42px; border-radius: 50%; flex: none; }
  .fd-skel-lines { display: grid; gap: .4rem; flex: 1; }
  .fd-skel-lines i { height: 10px; border-radius: 5px; display: block; }
  .fd-skel-lines i:first-child { width: 34%; }
  .fd-skel-lines i:last-child  { width: 18%; }
  .fd-skel-body { display: grid; gap: .5rem; }
  .fd-skel-body i { height: 11px; border-radius: 5px; display: block; }
  .fd-skel-body i:first-child { width: 92%; }
  .fd-skel-body i:last-child  { width: 64%; }
  .fd-skel-av, .fd-skel-lines i, .fd-skel-body i {
    background: linear-gradient(90deg, #eef2f8 25%, #f7fafd 37%, #eef2f8 63%);
    background-size: 400% 100%;
    animation: fd-shimmer 1.4s ease-in-out infinite;
  }
  @keyframes fd-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

  @media (max-width: 640px) {
    /* The bar becomes three rows on a phone: tabs, then search, then chips.
       The search field is what wants the whole width. */
    .fd-bar { padding: .45rem .45rem .5rem; border-radius: 16px; }
    .fd-bar-top { gap: .45rem; }
    .fd-search { flex: 1 1 100%; order: 2; }
    .fd-bar .fd-tabs { order: 1; width: 100%; }
    .fd-search .fd-btn { padding: .45rem .6rem; }
    .fd-search .fd-btn span { display: none; }
    .fd-search .fd-btn i { display: block; }
    .fd-new { top: calc(var(--fd-sticky-top) + 9.6rem); }
    .fd-clip { width: 178px; }
    .fd-browse-head, .fd-browse-group h3 { padding-left: .95rem; padding-right: .95rem; }
    .fd-browse-row { padding-left: .95rem; padding-right: .95rem; }
    /* Offering a follow is a plus sign; having followed is a word. The icon
       for the "on" state is hidden everywhere, so a bare icon there would be a
       button with nothing in it. */
    .fd-follow span { display: none; }
    .fd-follow.is-on span { display: inline; }
    .fd-follow { padding: .3rem .5rem; }
    .fd-follow.is-on { padding: .3rem .62rem; }
    .fd-follow i { font-size: 1.05rem; }
    .fd-from { display: none; }
  }


  /* ── browse, second pass ───────────────────────────────────────
     The card was a heading over three unlabelled sideways scrollers: no way to
     tell there was more than the six tiles you could see, and no way to reach
     it. Each group now says how many there are and links to the shelf, and the
     card itself ends in the button that opens the whole directory. */
  .fd-browse { padding: 1.15rem 0 .35rem; }
  .fd-browse-head {
    display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap;
    margin-bottom: .35rem;
  }
  .fd-browse-head > div { flex: 1 1 16rem; min-width: 0; }
  .fd-browse-head .fd-btn { flex: none; padding: .5rem 1rem; }

  /* Group heading as a row: what it is on the left, how many and where the
     rest of them live on the right. */
  .fd-browse-group h3 {
    justify-content: flex-start; gap: .4rem;
    border-top: 1px solid var(--fd-line-soft); padding-top: .7rem; margin-top: .7rem;
  }
  .fd-browse-group:first-of-type h3 { border-top: 0; padding-top: 0; }
  .fd-browse-n {
    font-family: 'JetBrains Mono', monospace; font-size: .7rem; font-weight: 700;
    color: var(--fd-faint); letter-spacing: 0; background: var(--fd-sunk);
    border-radius: 999px; padding: .1rem .45rem;
  }
  .fd-browse-all {
    margin-left: auto; display: inline-flex; align-items: center; gap: .2rem;
    text-decoration: none; letter-spacing: .04em; font-size: .72rem;
    color: var(--fd-blue); text-transform: none;
  }
  .fd-browse-all:hover { color: #0f8f72; }

  /* The scroller keeps a hint that it scrolls: a fade on the right edge, so a
     row of six that continues past the fold looks like it continues. */
  .fd-browse-group { position: relative; }
  .fd-browse-group::after {
    content: ''; position: absolute; right: 0; bottom: .4rem; width: 2.2rem; top: 2rem;
    background: linear-gradient(90deg, transparent, var(--fd-surface) 70%);
    pointer-events: none; border-radius: 0 16px 16px 0;
  }
  .fd-browse-card { width: 10.25rem; padding: .95rem .65rem .8rem; }
  .fd-browse-card .fd-av { transition: transform .2s var(--fd-ease); }
  .fd-browse-card:hover .fd-av { transform: scale(1.06); }

  /* The card's own footer — the button the module was missing. */
  .fd-browse-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    flex-wrap: wrap; margin-top: .5rem; padding: .75rem 1.15rem 0;
    border-top: 1px solid var(--fd-line-soft);
  }
  .fd-browse-foot p { margin: 0; font-size: .8rem; color: var(--fd-muted); }
  .fd-browse-foot .fd-btn { flex: none; }

  /* ── browse directory (/feed/browse) ───────────────────────────── */
  .fd-dir-head { max-width: 46rem; margin: 0 0 1.35rem; }
  .fd-dir-back {
    display: inline-flex; align-items: center; gap: .3rem; margin-bottom: .7rem;
    font-size: .82rem; font-weight: 700; color: var(--fd-muted); text-decoration: none;
  }
  .fd-dir-back:hover { color: var(--fd-blue); }
  .fd-dir-head h1 {
    font-family: 'Barlow Condensed', Impact, sans-serif; margin: 0;
    font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05;
    color: var(--fd-blue-deep); letter-spacing: .01em;
  }
  .fd-dir-head p { margin: .35rem 0 0; color: var(--fd-muted); font-size: .93rem; }

  .fd-tab-n {
    font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700;
    background: rgba(11,61,117,.08); color: var(--fd-muted);
    border-radius: 999px; padding: .05rem .38rem; margin-left: .1rem;
  }
  .fd-tab.is-on .fd-tab-n { background: rgba(255,255,255,.18); color: #fff; }

  .fd-dir-count { margin: 0 0 .9rem; font-size: .86rem; color: var(--fd-muted); }
  .fd-dir-count b { color: var(--fd-ink); }

  /* auto-fill, not auto-fit: a search that returns two clubs should show two
     cards, not two cards stretched across the whole column.
     
     The track is CAPPED as well as floored, and the row packs left. Without
     the cap, a full-width page with three tournaments on it either stretched
     three cards to 600px each or left them marooned at the far left of a dozen
     empty columns. Bounded both ways, a sparse shelf just looks like a short
     shelf. */
  .fd-dir-grid {
    display: grid; gap: .8rem; margin-bottom: 1.35rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 16rem));
    justify-content: start;
  }
  .fd-dir-card {
    display: grid; justify-items: center; gap: .55rem; text-align: center;
    padding: 1.25rem .75rem 1rem;
    background: var(--fd-surface); border: 1px solid var(--fd-line);
    border-radius: 18px; box-shadow: var(--fd-shadow-card);
    transition: transform .2s var(--fd-ease), box-shadow .2s var(--fd-ease), border-color .2s var(--fd-ease);
  }
  .fd-dir-card:hover {
    transform: translateY(-2px); border-color: #d7e2ef; box-shadow: var(--fd-shadow-hi);
  }
  .fd-dir-link {
    display: grid; justify-items: center; gap: .45rem;
    text-decoration: none; color: inherit; width: 100%; min-width: 0;
  }
  .fd-dir-card .fd-av { transition: transform .2s var(--fd-ease); }
  .fd-dir-card:hover .fd-av { transform: scale(1.06); }
  .fd-dir-link b {
    font-size: .9rem; font-weight: 700; color: var(--fd-ink); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .fd-dir-link:hover b { color: var(--fd-blue); }
  .fd-dir-link small { font-size: .74rem; color: var(--fd-faint); }
  .fd-dir-card .fd-btn { width: 100%; justify-content: center; padding: .42rem .8rem; font-size: .78rem; }

  /* The pager is this page's own markup, so this styles that and nothing else. */
  .fd-dir-pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap; margin-bottom: 2rem;
  }
  .fd-dir-pager-count { font-size: .8rem; color: var(--fd-muted); }
  .fd-dir-pager-count b { color: var(--fd-ink); font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
  .fd-dir-pages { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
  .fd-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.2rem; height: 2.2rem; padding: 0 .55rem; border-radius: 10px;
    font-size: .84rem; font-weight: 700; text-decoration: none;
    color: var(--fd-ink-soft); background: var(--fd-surface);
    border: 1px solid var(--fd-line);
    transition: border-color .18s var(--fd-ease), color .18s var(--fd-ease), background .18s var(--fd-ease);
  }
  .fd-page i { font-size: 1.05rem; }
  .fd-page:hover { border-color: rgba(36,208,166,.5); color: var(--fd-blue); background: var(--fd-surface); }
  .fd-page.is-on {
    background: var(--fd-grad-navy); border-color: transparent; color: #fff;
    box-shadow: 0 8px 18px -10px rgba(11,61,117,.8);
  }
  .fd-page.is-off { opacity: .4; pointer-events: none; }
  .fd-page-gap { color: var(--fd-faint); padding: 0 .1rem; font-weight: 700; }

  @media (max-width: 640px) {
    .fd-dir-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
    .fd-dir-card { padding: 1rem .6rem .85rem; border-radius: 16px; }
    .fd-browse-foot { padding-left: .9rem; padding-right: .9rem; }
    .fd-browse-foot .fd-btn { width: 100%; justify-content: center; }
    .fd-browse-head { padding-left: .9rem; padding-right: .9rem; }
  }


  /* ── full width ────────────────────────────────────────────────
     Following is a column you read: one post after another, and 1120px is
     about right for that. Discover is a page you SCAN — a browse grid, a clip
     shelf and a filter bar — and the directory at /feed/browse is nothing but
     grid. Both were being folded into a column two thirds the width of the
     screen they were on, so the cap comes off for those two, with gutters that
     grow with the viewport instead of a fixed 1rem that leaves content pinned
     to the glass on a wide monitor.

     A neutral name, not `is-discover`: the directory is not the Discover tab,
     and a page should not have to claim to be one to be allowed the width. */
  .fd-shell.is-wide {
    max-width: none;
    padding-left:  clamp(1rem, 3.5vw, 3rem);
    padding-right: clamp(1rem, 3.5vw, 3rem);
  }

  /* The rail was sized for a 1120px page. On a full-width one it can afford to
     be a real column rather than a sliver, and the gap can breathe. */
  @media (min-width: 1440px) {
    .fd-shell.is-wide .fd-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2.5rem; }
  }

  /* The one thing that must NOT stretch. A card can be as wide as the page,
     but a line of someone's post at 1800px is unreadable — around 90
     characters is where a paragraph stops scanning and starts sprawling. */
  .fd-shell.is-wide .fd-body,
  .fd-shell.is-wide .fd-comment-bubble { max-width: 90ch; }

  /* Grids that were built to fill get more to fill with, and the browse
     scrollers stop being scrollers once everything fits on one row. */
  @media (min-width: 1440px) {
    .fd-shell.is-wide .fd-browse-card { width: 11rem; }
    .fd-shell.is-wide .fd-clip        { width: 15rem; }
  }

  /* ── a photo being re-encoded before it is attached ──────────────
     The place is held at full size, so choosing four at once looks like four
     photos immediately rather than one appearing at a time. */
  .fd-chip-img.is-waiting {
    background: linear-gradient(90deg, #eef2f8 25%, #f7fafd 37%, #eef2f8 63%);
    background-size: 400% 100%;
    animation: fd-shimmer 1.4s ease infinite;
  }

  /* ── the post, while it is still going up ────────────────────────
     A real card in the timeline, not a bar on the composer: the person sees
     what they posted the moment they post it, and the wait belongs to the card
     rather than to them. Muted rather than dimmed — this is their post, it is
     simply not finished arriving. */
  .fd-ghost { padding: 1.1rem 1.15rem .95rem; border-style: dashed; border-color: #d8e2ee; }
  .fd-ghost:hover { border-color: #d8e2ee; box-shadow: var(--fd-shadow); }
  .fd-ghost-top { display: flex; align-items: center; gap: .7rem; }
  .fd-ghost-who { display: grid; gap: .1rem; min-width: 0; }
  .fd-ghost-who strong { font-size: .92rem; color: var(--fd-blue-deep); }
  .fd-ghost-state { font-size: .78rem; font-weight: 600; color: var(--fd-muted); }
  .fd-ghost-body {
    margin: .7rem 0 0; font-size: .95rem; line-height: 1.6; color: var(--fd-ink-soft);
    white-space: pre-wrap; overflow-wrap: anywhere;
  }
  .fd-ghost-media { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
  .fd-ghost-media img {
    width: 68px; height: 68px; object-fit: cover; border-radius: 10px;
    border: 1px solid var(--fd-line); display: block;
  }
  .fd-ghost-clip {
    display: inline-flex; align-items: center; gap: .35rem; padding: 0 .7rem; height: 68px;
    border-radius: 10px; background: var(--fd-sunk); border: 1px solid var(--fd-line);
    font-size: .78rem; font-weight: 700; color: var(--fd-ink-soft);
  }
  .fd-ghost-bar {
    height: 4px; border-radius: 999px; background: var(--fd-sunk);
    overflow: hidden; margin-top: .85rem;
  }
  .fd-ghost-bar span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--fd-teal), var(--fd-lime));
    transition: width .25s var(--fd-ease);
  }
  /* A failure is the one state that changes the card's colour, because it is
     the one state that needs an answer. */
  .fd-ghost.is-failed { border-color: #f4c3ce; background: #fffafb; }
  .fd-ghost.is-failed .fd-ghost-state { color: var(--fd-rose); }
  .fd-ghost.is-failed .fd-ghost-bar { display: none; }
  .fd-ghost-foot { display: flex; gap: .5rem; margin-top: .8rem; }
  .fd-ghost-foot[hidden] { display: none; }
  .fd-btn-sm { padding: .4rem .9rem; font-size: .8rem; gap: .3rem; }

  /* ── sound on a clip that started itself ─────────────────────────
     Only ever on screen while a clip is playing muted on its own, because that
     is the only moment there is sound a reader is not being given. */
  .fd-sound {
    position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
    width: 34px; height: 34px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13,27,42,.62); color: #fff; font-size: 1rem;
    backdrop-filter: blur(6px);
    transition: background .18s var(--fd-ease), transform .18s var(--fd-ease);
  }
  .fd-sound:hover { background: rgba(13,27,42,.85); transform: scale(1.06); }
  .fd-sound[hidden] { display: none; }

  /* The switch for all of that, sitting with the feed's other viewing choices. */
  .fd-chip-play { font-family: inherit; cursor: pointer; }
  .fd-chip-play.is-on { color: var(--fd-teal); border-color: rgba(36,208,166,.45); background: rgba(36,208,166,.08); }

  /* ── compose from anywhere, on a phone ───────────────────────────
     The button is only ever on a narrow screen; on a desktop the composer is
     already the first thing in the column and a floating twin of it would be
     one control too many. */
  .fd-fab { display: none; }
  .fd-sheet-veil { display: none; }
  .fd-sheet-grip, .fd-sheet-x { display: none; }

  @media (max-width: 640px) {
    .fd-fab {
      display: inline-flex; align-items: center; gap: .4rem;
      position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
      z-index: 120; border: 0; cursor: pointer;
      padding: .85rem 1.25rem; border-radius: 999px;
      font-family: inherit; font-weight: 800; font-size: .9rem; color: var(--fd-blue-deep);
      background: var(--fd-lime);
      box-shadow: 0 10px 28px rgba(11,61,117,.28);
      transition: transform .2s var(--fd-ease), opacity .2s var(--fd-ease);
    }
    .fd-fab i { font-size: 1.15rem; }
    .fd-fab:active { transform: scale(.95); }

    .fd-sheet-veil {
      display: block; position: fixed; inset: 0; z-index: 150;
      background: rgba(9,18,32,.45); backdrop-filter: blur(2px);
      animation: fd-fade .2s var(--fd-ease);
    }
    .fd-sheet-veil[hidden] { display: none; }

    /* The composer itself becomes the sheet — moved by a class, never by the
       DOM, so every listener bound to it above still holds. */
    body.fd-sheet-on { overflow: hidden; }
    body.fd-sheet-on .fd-fab { opacity: 0; pointer-events: none; }
    body.fd-sheet-on .fd-composer {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 160;
      margin: 0; max-height: 92vh; overflow-y: auto;
      border-radius: 22px 22px 0 0; border-bottom: 0;
      padding: 1.5rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));
      box-shadow: 0 -18px 50px rgba(9,18,32,.28);
      animation: fd-sheet-up .26s var(--fd-ease);
    }
    @keyframes fd-sheet-up { from { transform: translateY(100%); } to { transform: none; } }

    body.fd-sheet-on .fd-sheet-grip {
      display: block; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
      width: 38px; height: 4px; border-radius: 999px; background: #d8e2ee;
    }
    body.fd-sheet-on .fd-sheet-x {
      display: flex; align-items: center; justify-content: center;
      position: absolute; top: .5rem; right: .6rem; width: 32px; height: 32px;
      border: 0; border-radius: 50%; padding: 0; cursor: pointer;
      background: var(--fd-sunk); color: var(--fd-ink-soft); font-size: 1.05rem;
    }
    /* The emoji tray hangs off the bottom of the row; inside a scrolling sheet
       it would otherwise be clipped by the sheet's own edge. */
    body.fd-sheet-on .fd-emoji { bottom: auto; top: calc(100% + .4rem); }
  }

  @media (prefers-reduced-motion: reduce) {
    .fd-shell *, .fd-shell *::before, .fd-shell *::after,
    .fd-lightbox, .fd-lightbox *, .fd-dialog, .fd-dialog *,
    .fd-toasts *, .fd-fab, .fd-sheet-veil { animation: none !important; transition: none !important; }
    .fd-sound:hover { transform: none; }
    .fd-fab:active { transform: none; }
    .fd-btn:hover:not(:disabled) { transform: none; }
    .fd-browse-card:hover, .fd-clip:hover .fd-clip-shot { transform: none; }
    .fd-shot:hover img { transform: none; }
    .fd-card:hover { transform: none; }
    .fd-card:hover .fd-top > a .fd-av, .fd-card:hover .fd-top > .fd-av { transform: none; }
  }

  /* ── "About this ad" on promoted cards ─────────────────────────────────
     A <details> in the card's top-right corner; the card is position:relative
     so the popover anchors to it. */
  .fd-promo-feed, .fd-promo-rail { position: relative; }
  .fd-ad-about { position: absolute; top: .45rem; right: .45rem; z-index: 3; }
  .fd-ad-about > summary { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; color: var(--fd-faint); font-size: 1rem; }
  .fd-ad-about > summary::-webkit-details-marker { display: none; }
  .fd-ad-about > summary:hover, .fd-ad-about[open] > summary { background: var(--fd-sunk); color: var(--fd-ink-soft); }
  .fd-ad-about-pop { position: absolute; right: 0; top: 32px; width: min(290px, 80vw); background: var(--fd-surface);
    border: 1px solid var(--fd-line); border-radius: var(--fd-r); box-shadow: var(--fd-shadow-hi);
    padding: .85rem .95rem; font-size: .8rem; color: var(--fd-ink-soft); text-align: left; }
  .fd-ad-about-pop strong { display: block; font-size: .86rem; color: var(--fd-ink); margin-bottom: .25rem; }
  .fd-ad-about-pop p { margin: 0 0 .6rem; line-height: 1.45; }
  .fd-ad-about-pop a { color: var(--fd-blue); font-weight: 700; }
  .fd-ad-about-pop fieldset { border: 0; margin: 0 0 .5rem; padding: 0; display: grid; gap: .25rem; }
  .fd-ad-about-pop legend { font-weight: 700; color: var(--fd-ink); margin-bottom: .3rem; padding: 0; }
  .fd-ad-about-pop label { display: flex; gap: .4rem; align-items: center; cursor: pointer; }
  .fd-ad-about-pop textarea { width: 100%; border: 1px solid var(--fd-line); border-radius: 8px; padding: .4rem .5rem;
    font: inherit; margin-bottom: .5rem; resize: vertical; }
  .fd-ad-about-pop button { background: var(--fd-blue-deep); color: #fff; border: 0; border-radius: 999px;
    padding: .4rem .9rem; font-weight: 700; font-size: .8rem; cursor: pointer; }