/* ===========================================================================
   feed.css — the "Feeds" page (news feed driven by a user playlist).
   Reuses the noteworthy taste DNA (tokens · pill nav · .seg · .btn · .skel from
   taste.css/taste-core.css). Only feed-specific structure lives here:
   playlist pills · lens+ring toolbar · feed card · at-a-glance side · item modal.
   Palette: ivory canvas + black, gain green / loss red, flat (shadow on overlays only).
   =========================================================================== */

/* head reuses portfolio .head/.kicker/h1/.serif; just the playlist pill row here */
.fd-plrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.fd-pl{border:none;background:var(--ivory);border-radius:var(--pill);padding:9px 18px;font:inherit;
  font-weight:700;font-size:14px;color:var(--black);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.15s}
.fd-pl:hover{opacity:.72}
.fd-pl.on{background:var(--black);color:var(--ivory)}
.fd-pl .ct{color:var(--muted);font-size:12px;font-weight:600}
.fd-pl.on .ct{color:rgba(240,238,233,.6)}
.fd-pl-new{background:var(--black);color:var(--ivory)}   /* solid black pill — matches the Playlist page's "+ New" */
.fd-pl-new:hover{opacity:.85}

/* toolbar: lens seg (left) + ring (right) */
.fd-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 40px;margin:38px 0 4px}
.fd-barlead{display:flex;flex-direction:column;gap:2px}
.fd-barlead-t{font-size:18px;font-weight:700;letter-spacing:-.3px}
.fd-barlead-s{font-size:12.5px;color:var(--muted);font-weight:500}
.fd-mnote{font-size:11.5px;color:var(--dim);line-height:1.5;margin:14px 0 2px}
.fc-reason.theme{background:#E8F1EC;color:#2C6B4A}
.fc-reason.impact{background:#F4EEE2;color:#8A6A20}
.fd-ring{min-width:280px;max-width:340px;flex:1}
.fd-ring-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.fd-ring-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}
.fd-ring-val{font-size:13px;font-weight:700;color:var(--black)}
.fd-ring-slide{display:flex;align-items:center;gap:12px}
.fd-ring-end{font-size:11px;color:var(--dim);font-weight:700}
/* the range input styling comes from taste.css .add-lev-slider */

/* body: main stream + sticky side */
.fd-body{padding:24px 40px 90px}
.fd-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.fd-stream{display:flex;flex-direction:column;gap:10px;min-width:0}
.fd-side{position:sticky;top:104px}
.fd-glance{background:var(--ivory);border-radius:var(--radius-sm);padding:18px 20px}
.fd-glance-h{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase;margin-bottom:14px}
.fd-glance-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;margin-bottom:14px}
.fd-glance-nums .v{display:block;font-size:22px;font-weight:700;letter-spacing:-.5px}
.fd-glance-nums .k{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:1px}
.fd-glance-lens{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--border-medium);padding-top:12px}
.fd-glance-lens .row{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.fd-glance-lens .row .ln{display:flex;align-items:center;gap:7px;color:var(--muted)}
.fd-glance-lens .row .ln svg{width:14px;height:14px;opacity:.7}
.fd-glance-lens .row .n{font-weight:700}

/* ═══ MDXFeed engine — group bar + list (reusable across pages) ═══ */
.mdxfeed{display:block}
.mf-groupbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.mf-gl{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--muted);text-transform:uppercase}
.mf-list{display:flex;flex-direction:column;gap:10px}
.mf-cards{display:flex;flex-direction:column;gap:10px}
.mf-ghead{display:flex;align-items:center;gap:10px;margin:20px 0 4px}
.mf-ghead:first-child{margin-top:0}
.mf-gn{font-size:16px;font-weight:700;letter-spacing:-.2px}
.mf-gc{font-size:12px;font-weight:700;color:var(--muted);background:var(--ivory);border-radius:var(--pill);padding:2px 10px}
.mf-sentinel{height:1px}
.mf-more{display:block;margin:22px auto 0;border:1.5px solid var(--border-medium);background:transparent;
  border-radius:var(--pill);padding:11px 26px;font:inherit;font-weight:700;font-size:14px;color:var(--black);cursor:pointer;transition:.15s}
.mf-more:hover{background:var(--ivory)}
/* group "see all" drill → the entity's own page (each group = one source query with a TRUE total) */
.mf-seeall{display:inline-flex;align-items:center;gap:5px;margin:12px 0 4px;font:inherit;font-weight:700;font-size:13px;
  color:var(--black);text-decoration:none;padding:4px 2px;transition:gap .15s}
.mf-seeall:hover{gap:10px;text-decoration:underline}

/* ═══════════════════════════ FEED CARD — the single card-surface source ═══════════════════════════
   Uses the shared --card-* tokens (mdx-tokens.css) so it's identical to the related-asset card (.rl-card):
   white · ONE uniform 1px hairline on every side (no left accent — direction is shown by the coloured
   avatar tile + ▲/▼ + chips) · no rest shadow · on hover the hairline darkens + a soft shadow (no lift).
   The var() fallbacks keep it correct even if a stale-cached mdx-tokens hasn't loaded the tokens yet.
   State variants (.pos/.neg/.note) below only tint — they must NOT redefine the border/radius/shadow.
   NOTE: .fcard is deliberately excluded from taste-core's black-outline card hover. ═════════════════ */
.fcard{position:relative;display:block;background:var(--card-bg,#fff);color:var(--black);cursor:pointer;
  border:1px solid var(--card-border-color,rgba(0,0,0,.08));border-radius:var(--radius-sm);padding:15px 18px;
  transition:box-shadow .16s ease,border-color .16s ease}
.fcard:not(.exp):hover{border-color:var(--card-border-hover,rgba(0,0,0,.22));box-shadow:var(--card-shadow-hover,0 2px 10px rgba(0,0,0,.05))}
/* expanded (reading) = the SAME soft grey hairline + shadow as hover — NOT a black frame */
.fcard.exp{border-color:var(--card-border-hover,rgba(0,0,0,.22));box-shadow:var(--card-shadow-hover,0 2px 10px rgba(0,0,0,.05));cursor:default}

/* ── geo flag facepile (top-right): primary front, involved stacked behind; fans out on card hover ── */
.fc-head{padding-right:70px}
.fc-geo{position:absolute;top:13px;right:16px;display:flex;flex-direction:row}
.fc-flag{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;line-height:1;
  overflow:hidden;background:var(--ivory);box-shadow:0 0 0 1.5px var(--ivory),0 1px 2px rgba(0,0,0,.14);
  margin-left:-11px;flex:0 0 auto;transition:margin-left .22s cubic-bezier(.34,1.15,.4,1)}
.fc-flag:first-child{margin-left:0}
.fc-flag img{width:100%;height:100%;display:block;object-fit:cover}
.fc-flag.emoji{font-size:15px}
.fc-flag.region,.fc-flag.more{font-size:9px;font-weight:800;letter-spacing:.02em;color:#fff}
.fc-flag.region{background:linear-gradient(135deg,var(--primary,#6E6496),var(--primary-dark,#4b4173))}
.fc-flag.more{background:var(--black);color:var(--ivory);font-size:10px}
/* flag facepile fan-out — the flags spread `())))` → `()()()` when the card is EXPANDED (mobile tap-to-read)
   OR hovered (desktop). Expanded fan/collapse follows the card immediately (chips shrink when the news does). */
.fcard.exp .fc-geo .fc-flag{margin-left:3px}
.fcard.exp .fc-geo .fc-flag:first-child{margin-left:0}
/* NARROW SCREENS: keep the facepile STACKED by default; it fans out only when the card is EXPANDED (tap to
   read the news) and collapses back when the card closes — via the `.fcard.exp` rule above. EXCEPTION: a 4+
   fanned facepile (~130-222px) would overlay the phone card's kicker/title, so 4+ flags stay STACKED even
   when expanded (we pin them back here). ≤3 fan normally. No margin change for 4+ → nothing animates → no
   flicker. `:has(.fc-flag:nth-child(4))` = the facepile carries a 4th flag = >3. */
@media(max-width:640px){
  /* 4+ flags NEVER fan — stacked in BOTH states AND `transition:none` so nothing animates on expand OR
     collapse (guard the exit too, not just the enter). ≤3 still fan via the base .fcard.exp rule. */
  .fc-geo:has(.fc-flag:nth-child(4)) .fc-flag{margin-left:-11px;transition:none}
  .fc-geo:has(.fc-flag:nth-child(4)) .fc-flag:first-child{margin-left:0}
}
@media(hover:hover){
  .fcard:hover .fc-geo .fc-flag{margin-left:3px}
  .fcard:hover .fc-geo .fc-flag:first-child{margin-left:0}
  /* on hover-OUT, linger 3s before collapsing back `()()()` → `())))`. The 3s delay lives on the base flag
     so it applies when returning to the collapsed state; fan-OUT (hover OR expand) sets delay:0 → instant.
     Scoped to hover devices so a mobile tap-expand collapses its chips immediately. */
  .fc-geo .fc-flag{transition-delay:3s}
  .fcard:hover .fc-geo .fc-flag,.fcard.exp .fc-geo .fc-flag{transition-delay:0s}
}
.fc-badges{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.fc-reason{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:var(--pill);padding:4px 11px;font-size:12px;font-weight:700;color:var(--black)}
.fc-reason svg{width:13px;height:13px;opacity:.75}
.fc-reason.theme{background:#E8F1EC;color:#2C6B4A}
.fc-reason.impact{background:#F4EEE2;color:#8A6A20}
.fc-reason.ripple{background:#EDE9F4;color:#5D4B93}
.fc-dir{font-size:12px;font-weight:700}
.fc-dir.up{color:var(--gain)} .fc-dir.down{color:var(--loss)}
.fc-dup{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border-radius:var(--pill);padding:3px 10px;font-size:11px;font-weight:700;color:var(--muted)}
.fc-dup svg{width:11px;height:11px}
.fc-impact{background:#FCECEC;color:var(--under);border-radius:var(--pill);padding:3px 9px;font-size:11px;font-weight:700}
.fc-title{font-size:15.5px;font-weight:700;line-height:1.32;letter-spacing:-.2px}
.fcard:hover .fc-title{opacity:.8}
.fc-brief{margin-top:6px;font-size:12.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcard.exp .fc-brief{display:block;overflow:visible;-webkit-line-clamp:unset;font-size:13.5px;color:var(--black);margin-top:8px}
/* one tidy metadata zone under the brief: an icon-led ROW per group (stocks · megatrends), aligned */
.fc-tags{margin-top:12px;padding-top:11px;border-top:1px solid var(--border-medium);display:flex;flex-direction:column;gap:7px}
.fc-zrow{display:flex;align-items:flex-start;gap:9px}
.fc-zic{flex:none;width:15px;height:15px;margin-top:2px;color:var(--muted);opacity:.55;display:flex}
.fc-zic svg{width:15px;height:15px}
.fc-zchips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
/* chips: affected tickers (dir-coloured) · megatrend tier-1 (violet, dir-coloured) */
/* chips are links now (ticker → /asset/{ticker}, theme → /explore/{slug}) — kill the default a styling */
a.fc-tk,a.fc-mt,a.ex-note-chip{text-decoration:none;cursor:pointer;transition:filter .12s}
a.fc-tk:hover,a.fc-mt:hover,a.ex-note-chip:hover{filter:brightness(.95)}
.fc-tk{font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:6px;padding:3px 8px;background:#EDEAE3;color:var(--muted)}
.fc-tk.up{background:#E6F4EC;color:#1f7a46}.fc-tk.down{background:#FBE9E9;color:#c0392b}
.fc-tk.more{background:var(--bg);color:var(--muted);cursor:default}
.fc-mt{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;background:#EDE9F4;color:#5D4B93}
.fc-mt.up{background:#E6F4EC;color:#1f7a46}.fc-mt.down{background:#FBE9E9;color:#c0392b}
.fc-mt.more{background:var(--bg);color:var(--muted)}
/* expanded: full node list */
.fc-mtd{margin-bottom:12px}
.fc-mtd-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.fc-mtd-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0;font-size:12.5px}
.fc-mtd-n{font-weight:600;color:var(--black)}
.fc-mtd-n.up{color:var(--gain)}.fc-mtd-n.down{color:var(--loss)}
.fc-mtd-a{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:var(--bg);border-radius:5px;padding:2px 7px;flex:none}
/* expand block */
.fc-more{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-medium)}
.fc-span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:10px}
.fc-span svg{width:12px;height:12px}
.fc-ers{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.fc-er{font-size:12.5px;line-height:1.5;color:var(--muted)}
.fc-er-t{font-weight:700;color:var(--black)}
.fc-er-t.up{color:var(--gain)}.fc-er-t.down{color:var(--loss)}
.fc-src{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ivory);text-decoration:none;background:var(--black);border-radius:var(--pill);padding:8px 15px}
.fc-src:hover{opacity:.7}
.fc-meta{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);font-weight:600}
.fc-meta .dot{opacity:.5}
.fc-toggle{margin-left:auto;color:var(--black);font-weight:700}
.fcard:hover .fc-toggle{text-decoration:underline}

/* empty + loading */
.fd-empty{text-align:center;padding:64px 24px;color:var(--muted)}
.fd-empty svg{width:34px;height:34px;opacity:.4;margin-bottom:12px}
.fd-empty p{font-size:14px;font-weight:500;margin-bottom:16px}
.fd-skelcard{height:96px;border-radius:var(--radius-sm)}

/* ── playlist / item manager modal (reuses .add-* overlay from taste.css) ── */
.fd-modal{background:var(--ivory);border-radius:var(--radius);max-width:480px;width:100%;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;max-height:92vh}
.fd-mhead{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 12px}
.fd-mhead .kicker{color:var(--muted);font-weight:700;letter-spacing:1px;font-size:12px;text-transform:uppercase}
.fd-mhead h2{font-size:26px;font-weight:700;letter-spacing:-.5px;line-height:1.05;margin-top:5px}
.fd-mx{border:none;background:var(--bg);width:34px;height:34px;border-radius:50%;font-size:21px;cursor:pointer;color:var(--black);line-height:1;flex:0 0 auto}
.fd-mx:hover{opacity:.6}
.fd-mbody{padding:0 24px 24px;overflow:auto}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;min-height:20px;margin-bottom:16px}
.fd-chip{display:inline-flex;align-items:center;gap:7px;border-radius:var(--pill);padding:6px 12px;font-size:13px;font-weight:700}
.fd-chip.stock{background:#E7EEF4;color:#2F5D80}
.fd-chip.theme{background:#EDE9F4;color:#5D4B93}
.fd-chip.country{background:#E8F1EC;color:#2C6B4A}
.fd-chip.gics{background:#F4EEE2;color:#8A6A20}
.fd-chip x,.fd-chip .x{cursor:pointer;opacity:.6;font-style:normal;font-weight:700}
.fd-chip .x:hover{opacity:1}
.fd-mempty{font-size:12.5px;color:var(--muted)}
.fd-kindseg{margin-bottom:14px;width:100%}
.fd-kindseg button{flex:1}
.fd-picklist{max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px;margin-top:4px}
.fd-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;
  cursor:pointer;border:none;background:none;font:inherit;text-align:left;color:var(--black)}
.fd-pick:hover{background:var(--bg)}
.fd-pick[disabled]{opacity:.45;cursor:default}
.fd-pick .nm{font-size:14px;font-weight:600}.fd-pick .sub{color:var(--muted);font-size:12px}
.fd-pick .plus{color:var(--muted);font-weight:700}
.fd-cgrid{display:flex;flex-wrap:wrap;gap:8px}

/* responsive */
@media(max-width:900px){
  .fd-grid{grid-template-columns:minmax(0,1fr)}   /* minmax(0,…) not bare 1fr → the column can't blow past the viewport on a card's min-content */
  .fd-side{position:static}
  .fd-bar{padding-left:16px;padding-right:16px}
  .fd-body{padding-left:16px;padding-right:16px}
  .head h1{font-size:38px}
}

/* ── note card (kind:'note') — a personal-knowledge card in the SAME stream as news. Distinct violet
   tint so it reads as "yours" (the .fcard.note SURFACE is defined once, below with the other variants). ── */
.fc-reason.note{background:#EDE9F4;color:#5D4B93}
.fc-ntype{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;background:var(--bg);color:var(--muted)}
.fc-nsrc{display:inline-flex;align-items:center;gap:4px}
.fc-nsrc svg{width:11px;height:11px;opacity:.7}
.fc-nbody{font-size:13.5px;line-height:1.6;color:var(--black);white-space:pre-wrap;margin-top:2px}
.fc-nbody.loading{color:var(--muted)}
/* rendered markdown note body (renderMd in feed-engine.js) — override pre-wrap, style the md subset */
.fc-nbody.md{white-space:normal}
.fc-nbody.md>*:first-child{margin-top:0}
.fc-nbody.md h1,.fc-nbody.md h2,.fc-nbody.md h3,.fc-nbody.md h4{margin:14px 0 5px;line-height:1.3;font-weight:700;color:var(--black)}
.fc-nbody.md h1{font-size:16px}.fc-nbody.md h2{font-size:15px}.fc-nbody.md h3{font-size:14px}.fc-nbody.md h4{font-size:13.5px}
.fc-nbody.md p{margin:6px 0}
.fc-nbody.md ul{margin:6px 0;padding-left:18px}
.fc-nbody.md li{margin:3px 0}
.fc-nbody.md strong{font-weight:700}
.fc-nbody.md em{font-style:italic}
.fc-nbody.md code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:rgba(0,0,0,.05);padding:1px 4px;border-radius:4px}
.fc-nbody.md hr{border:0;border-top:1px solid var(--border-medium);margin:12px 0}
.fc-nbody.md table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12.5px}
.fc-nbody.md th,.fc-nbody.md td{border:1px solid var(--border-medium);padding:5px 8px;text-align:left;vertical-align:top}
.fc-nbody.md th{background:rgba(0,0,0,.04);font-weight:700}
.fc-nbody.md a{color:var(--accent,#0a58ca);text-decoration:underline}

/* ══ card redesign — social-feed anchor: leading avatar tile + elevation + colored kicker ══ */
/* (border now lives on the base .fcard = the shared --card-* standard; the old override here that forced a
   3px hairline on EVERY side's left is gone — neutral cards are a clean uniform 1px like .rl-card.) */

/* header: avatar + (kicker · title) */
.fc-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:2px}
.fc-av{width:40px;height:40px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#2A2823;color:var(--ivory);box-shadow:0 2px 6px rgba(31,28,20,.14)}
.fc-av svg{width:19px;height:19px;opacity:.96}
.fc-av.theme{background:#2C6B4A}.fc-av.impact{background:#8A6A20}.fc-av.ripple{background:#5B6B8A}
.fc-av.note{background:#5D4B93;box-shadow:0 2px 8px rgba(93,75,147,.32)}
.fc-hmain{flex:1;min-width:0}
.fc-kicker{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;font-weight:800;
  letter-spacing:.02em;color:var(--muted);margin-bottom:4px}
.fc-kicker.theme{color:#2C6B4A}.fc-kicker.impact{color:#8A6A20}.fc-kicker.ripple,.fc-kicker.note{color:#5D4B93}
.fc-kmuted{color:var(--muted);font-weight:600}
.fc-hmain .fc-title{font-size:15.5px;line-height:1.35}
/* note card identity: violet-tinted surface + uniform 1px violet hairline (no 3px accent → borders stay equal) */
.fcard.note{background:#F7F5FB;border-color:#E6E0F2;
  box-shadow:0 1px 2px rgba(93,75,147,.06),0 6px 18px rgba(93,75,147,.08)}

.fc-nsrc{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:#5D4B93}
.fc-nsrc svg{width:11px;height:11px;opacity:.8}
/* news avatar: TYPE icon (svg) + tile colour = direction + amber dot when impact is strong (≥4) */
.fc-av{position:relative}
.fc-av.news.pos{background:#1f9d57}
.fc-av.news.neg{background:#d23b3b}
.fc-av.news.mixed{background:#2A2823}
/* strong-impact dot uses ::before (::after is the hover tooltip — one pseudo each, no clash) */
.fc-av.strong::before{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:#F5A623;border:2px solid var(--ivory);box-shadow:0 1px 3px rgba(245,166,35,.5);z-index:1}
/* avatar hover tooltip — tells what the icon means (category label) */
.fc-av[data-tip]{cursor:help}
.fc-av[data-tip]:hover{z-index:6}
.fc-av[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:-2px;top:calc(100% + 9px);
  white-space:nowrap;background:#2A2823;color:#F7F6F2;font-size:11px;font-weight:700;letter-spacing:.01em;
  padding:5px 9px;border-radius:8px;z-index:9;box-shadow:0 6px 18px rgba(31,28,20,.22);pointer-events:none}

/* ── mode bar: Feeds [Timeline|By stock|By theme]  Notes [All] (single active across both segs) ── */
.fd-modebar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:0 0 22px}
.fd-ml{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
.fd-ml:not(:first-child){margin-left:6px}

/* ── notes gallery (masonry) — THE single source for the note-gallery component. Used by the Feed
   Notes view AND the /explore Notes tab (both load feed.css); explore.css does NOT redefine these,
   so the two can't drift. Card markup = shared MDXFeed.noteGalleryCard. ── */
.ex-notes{column-count:3;column-gap:16px}
.ex-notes-lead{font-size:15px;color:var(--muted);font-weight:500;margin-bottom:20px}
.ex-notes-lead b{color:var(--black);font-weight:700}
.ex-note{break-inside:avoid;background:#F6F4FA;border:1px solid #ECE7F3;border-left:3px solid #7A6CA8;border-radius:14px;padding:15px 17px;margin:0 0 16px}
.ex-note-subj{font-weight:700;font-size:15px;line-height:1.35;color:var(--black)}
.ex-note-sum{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ex-note-tags{margin-top:11px;display:flex;flex-wrap:wrap;gap:6px}
.ex-note-chip{background:#fff;border:1px solid #ECE7F3;border-radius:var(--pill);padding:3px 10px;font-size:11px;font-weight:700;color:var(--black)}
.ex-note-meta{margin-top:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11px}
.ex-note-type{background:#EAE4F5;color:#5B4B8A;border-radius:var(--pill);padding:3px 10px;font-weight:700;text-transform:capitalize}
.ex-note-agent{color:var(--muted);font-weight:700}
.ex-note-date{color:var(--dim,#ABA298);font-weight:600;margin-left:auto}
@media(max-width:1100px){.ex-notes{column-count:2}}
@media(max-width:620px){.ex-notes{column-count:1}}
/* [hidden] guard: .fd-grid sets display:grid + .ex-notes sets column-count → both override the UA
   [hidden]{display:none}, so the attribute alone won't hide them. Force it for the mode switch. */
.fd-grid[hidden]{display:none}
.ex-notes[hidden]{display:none}
/* notes gallery — empty state (pencil badge, ported from explore) + skeleton card */
.ex-notes-empty{column-span:all;break-inside:avoid;text-align:center;padding:72px 20px 60px}
.ex-notes-empty-art{width:76px;height:76px;border-radius:50%;background:#F0ECF7;color:#7A6CA8;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px}
.ex-notes-empty-art svg{width:32px;height:32px}
.ex-notes-empty h3{font-size:24px;font-weight:700;letter-spacing:-.3px;color:var(--black);margin-bottom:10px}
.ex-notes-empty p{font-size:15px;color:var(--muted);line-height:1.6;max-width:400px;margin:0 auto;font-weight:500}
/* skeleton-card modifier is `.skc` (NOT `.sk`) — `.sk` is a generic shimmer utility in explore.css
   whose border-radius/display would otherwise override these cards on the explore page. */
.ex-note.skc{display:block;pointer-events:none;border-radius:14px}
.ex-note.skc .skel{display:block}
/* feed stream skeleton — .fcard shell with block shimmer lines (matches the note skeleton) */
.fcard.skc{display:block;pointer-events:none;border-radius:var(--radius-sm)}
.fcard.skc .skel{display:block}

/* edit-note button — top-right on both note surfaces (feed stream .fcard.note + gallery .ex-note).
   Appears on hover (desktop) / always (touch). Opens the full-screen editor (/note-editor/). */
.fcard.note, .ex-note { position: relative; }
.mdx-note-edit{
  position:absolute; top:9px; right:9px; z-index:2;
  width:30px; height:30px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #E6E0F2; border-radius:9px; background:rgba(255,255,255,.85); color:#7A6CA8;
  cursor:pointer; opacity:0; transition:opacity .12s, background .12s, color .12s;
}
.mdx-note-edit svg{ width:15px; height:15px; }
.fcard.note:hover .mdx-note-edit, .ex-note:hover .mdx-note-edit, .mdx-note-edit:focus-visible{ opacity:1; }
.mdx-note-edit:hover{ background:#7A6CA8; color:#fff; }
/* touch devices have no hover → keep the affordance visible */
@media (hover: none){ .mdx-note-edit{ opacity:.9; } }