/* PS-FEED-001 — Living Stream Feed design preview (Fable).
   Ported from the approved Feed Vision Handoff v1 prototype stylesheet so the
   implementation matches mockups/production/01–18, then extended with the
   interactive layer (real buttons, focus visibility, dialogs, reduced motion).
   Token values come from specs/design_tokens.json in the handoff package.

   CHROME RULE (Pete, 2026-07-16): the page renders under the site's real
   global header from base.html. Every rule here is nested under #feed-app
   (native CSS nesting) so the preview can never restyle the global
   navigation — and the site's styles stay out of the preview via the
   higher-specificity #feed-app prefix. The mockup's own top bar is gone;
   Capture lives in the community sidebar instead. */

#feed-app {
  /* Deep Navy Gold (2026-07-17): feed onto the shared navy + marigold. */
  --indigo: #203767;
  --indigo-strong: #132447;
  --indigo-soft: #E7ECF4;
  --azure: #2f5296;
  --cyan: #2f5296;
  --amber: #B87900;
  --ink: #101b30;
  --text: #1B2C47;
  --muted: #6F7F99;
  --line: #DDE4F0;
  --line-soft: #E8EDF5;
  --cloud: #F6F8FC;
  --white: #FFFFFF;
  --success: #2B9B6D;
  --danger: #C04B55;
  --shadow-1: 0 10px 30px rgba(32, 48, 90, .07);
  --shadow-2: 0 24px 70px rgba(17, 31, 68, .16);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --nav-w: 214px;
  --site-header-h: 64px;   /* the real global header's min-height */
  --feed-w: 860px;         /* wider on desktop (Pete, 2026-07-17) */
  --rail-w: 320px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  font-family: Inter, "Inter Display", Arial, sans-serif;
  color: var(--text);
  background: var(--cloud);
  -webkit-font-smoothing: antialiased;

  & *, & *::before, & *::after { box-sizing: border-box; }
  button, input, textarea { font: inherit; }
  button { cursor: pointer; }
  img { max-width: 100%; display: block; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
  .icon { width:18px; height:18px; display:inline-block; flex:0 0 auto; }
  .icon.sm { width:15px; height:15px; }
  .icon.lg { width:22px; height:22px; }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, textarea:focus-visible {
    outline:2px solid var(--indigo); outline-offset:2px; border-radius:10px;
  }

  /* ---- shell: community sidebar + stream, under the real site header ---- */
  .app-shell { min-height:calc(100vh - var(--site-header-h)); display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); }
  .sidebar {
    position:sticky; top:var(--site-header-h); height:calc(100vh - var(--site-header-h));
    background:rgba(255,255,255,.92); border-right:1px solid var(--line);
    padding:18px 17px 20px; backdrop-filter: blur(18px);
  }
  .sidebar-capture { width:100%; margin:2px 0 8px; }
  .nav-section-label { margin:19px 13px 9px; text-transform:uppercase; font-size:10px; letter-spacing:1.35px; font-weight:800; color:#92A1B8; }
  .nav { display:flex; flex-direction:column; gap:6px; }
  .nav-item { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:12px; color:#52637D; font-size:14px; font-weight:650; text-decoration:none; }
  .nav-item:hover { background:#F2F5FB; color:#3D4E6B; }
  .nav-item.active { color:#203767; background:#E7ECF4; }
  .nav-item.active:hover { background:#E7ECF4; color:#203767; }
  /* The Break, embedded in the community shell: its bk-* styles come from
     style.css; this just seats the block inside the feed's main column. */
  .break-inner { width:min(100%, 1260px); }
  .break-embed { display:block; margin-top:4px; }

  /* Dark theme: the community app sheet deliberately stays LIGHT (one
     coherent white layer in the dark shell), so the Break's planted cards
     must keep their light tokens too — the site-wide dark card pass would
     otherwise paint dark cards onto the white sheet with flipped type. */
  body[data-theme="dark"] & .ps-card {
    background: #ffffff;
    border-color: rgba(116, 150, 215, 0.22);
    box-shadow: 0 5px 14px rgba(34, 66, 120, 0.055), 0 18px 44px rgba(34, 66, 120, 0.09);
  }

  body[data-theme="dark"] & {
    --ps-card-surface-top: rgba(255, 255, 255, 0.95);
    --ps-card-surface-mid: rgba(248, 251, 255, 0.90);
    --ps-card-surface-bottom: rgba(235, 242, 255, 0.82);
    --ps-card-border: rgba(116, 150, 215, 0.22);
    --ps-card-border-highlight: rgba(255, 255, 255, 0.92);
    --ps-card-title: #0a1b36;
    --ps-card-body: #42516a;
    --ps-card-muted: #6f7d94;
    --ps-shadow-quiet: 0 4px 12px rgba(34, 66, 120, 0.045), 0 14px 34px rgba(34, 66, 120, 0.075);
    --ps-shadow-standard: 0 5px 14px rgba(34, 66, 120, 0.055), 0 18px 44px rgba(34, 66, 120, 0.09);
    --ps-shadow-primary: 0 8px 20px rgba(34, 66, 120, 0.07), 0 24px 64px rgba(34, 66, 120, 0.13);
    /* The shared body-level tokens the Break internals read (mood rows,
       poll chips, soft buttons) — re-asserted to their light-sheet values. */
    --surface: #ffffff;
    --surface-soft: #f4f8fd;
    --border: #d9e2ec;
    --text: #061a3a;
    --text-muted: #49617a;
  }

  .side-week { margin:18px 4px 0; padding:14px 15px; background:#F5F8FE; border:1px solid #E3E9F4; border-radius:14px; }
  .side-week-title { margin:0 0 9px; font-size:10px; text-transform:uppercase; letter-spacing:1.35px; font-weight:800; color:#92A1B8; }
  .side-week-list { list-style:none; margin:0; padding:0; display:grid; gap:7px; color:#5A6B85; font-size:12px; }
  .side-week-list strong { color:#203767; font-weight:800; }
  .sidebar-bottom { position:absolute; bottom:19px; left:17px; right:17px; display:flex; flex-direction:column; gap:6px; }
  .user-row { display:flex; align-items:center; gap:10px; padding:10px 12px; }
  .avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; flex:0 0 auto; box-shadow:0 0 0 3px rgba(255,255,255,.9); }
  .avatar.sm { width:32px; height:32px; font-size:10px; }
  .avatar.xs { width:26px; height:26px; font-size:9px; }
  .av-pc{background:#314A76}.av-dm{background:#4C7DED}.av-mr{background:#C58A23}.av-ap{background:#1BA6B8}.av-ak{background:#4AA371}.av-jl{background:#8E63D8}

  .btn { height:42px; border-radius:13px; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 15px; color:#53637A; font-weight:700; font-size:13px; text-decoration:none; }
  .btn:hover { background:#F7F9FD; }
  .btn.primary { background:var(--indigo); border-color:var(--indigo); color:#fff; box-shadow:0 10px 24px rgba(79,91,213,.22); }
  .btn.primary:hover { background:var(--indigo-strong); border-color:var(--indigo-strong); }
  .btn.soft { background:var(--indigo-soft); border-color:#CDD8EA; color:#203767; }
  .btn.icon-only { width:42px; padding:0; }

  .main { min-width:0; padding:28px 42px 70px; }
  .main-inner { width:min(100%, 1260px); margin:0 auto; }
  .main-inner.no-rail { width:min(100%, var(--feed-w)); }
  .page-head { display:flex; align-items:flex-end; justify-content:space-between; margin:0 0 15px; }
  .page-title { font-family:var(--serif); font-size:43px; line-height:1; color:var(--ink); letter-spacing:-1.2px; margin:0; font-weight:600; }
  .page-subtitle { margin:8px 0 0; color:#71819A; font-size:14px; }
  .page-title-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .preview-badge { display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; background:#FBF3E3; color:#8A6A1E; font-family:Inter,Arial,sans-serif; font-size:12px; font-weight:750; letter-spacing:.2px; }
  .preview-note { margin:10px 0 0; max-width:640px; color:#8A99AE; font-size:12px; line-height:1.5; }
  /* Feed ⇄ The Break: one ecosystem, one prominent segmented switcher
     (Pete, 2026-07-17). Sits top-right of the page head on both views. */
  .feed-switch { display:flex; gap:6px; padding:6px; background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow-1); }
  .feed-switch__tab { display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 20px; border-radius:12px; color:#5A6B85; font-size:14px; font-weight:760; text-decoration:none; white-space:nowrap; }
  .feed-switch__tab:hover { background:#F2F5FB; color:#3D4E6B; }
  .feed-switch__tab.active { background:var(--indigo); color:#fff; box-shadow:0 8px 18px rgba(79,91,213,.26); }
  .feed-switch__tab.active:hover { background:var(--indigo-strong); color:#fff; }
  .content-grid { display:grid; grid-template-columns:minmax(0,var(--feed-w)) var(--rail-w); gap:36px; align-items:start; }
  .main-inner.no-rail .content-grid { grid-template-columns:minmax(0,1fr); }
  .feed-column { min-width:0; }
  .composer { display:flex; align-items:center; gap:12px; min-height:68px; padding:12px 13px; background:rgba(255,255,255,.84); border:1px solid var(--line); border-radius:19px; box-shadow:var(--shadow-1); margin-bottom:8px; }
  .composer-input { flex:1; color:#73829A; font-size:14px; background:none; border:0; text-align:left; padding:10px 4px; border-radius:12px; min-height:44px; }
  .composer-input:hover { color:#5A6B85; }
  .composer-actions { display:flex; gap:8px; align-items:center; }
  .pill-btn { height:36px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:#fff; color:#64738A; display:flex; align-items:center; gap:7px; font-weight:650; font-size:12px; }
  .pill-btn:hover { background:#F7F9FD; }
  .mic-btn { width:38px; height:38px; border:1px solid #DCE1FF; border-radius:12px; background:#EEF0FF; color:#4C5AE0; display:grid; place-items:center; }
  .mic-btn:hover { background:#E3E7FF; }
  .date-label { margin:21px 0 3px; color:#8C9AB0; font-weight:800; letter-spacing:1.25px; font-size:10px; text-transform:uppercase; }
  .post { padding:23px 0 26px; border-bottom:1px solid var(--line); }
  .post:first-of-type { padding-top:21px; }
  .post-head { display:flex; align-items:flex-start; gap:12px; }
  .post-author { flex:1; min-width:0; }
  .author-name { color:var(--ink); font-size:14px; font-weight:800; line-height:1.2; }
  .author-meta { margin-top:4px; color:#7B8AA1; font-size:11px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
  .dot { width:5px; height:5px; border-radius:50%; display:inline-block; background:var(--azure); }
  .dot.amber{background:var(--amber)}.dot.cyan{background:var(--cyan)}.dot.green{background:var(--success)}
  .more { border:0; background:transparent; color:#8A98AD; font-size:20px; line-height:1; padding:0 0 0 10px; border-radius:8px; }
  .more:hover { color:#5D6D85; }
  .post-body { margin-left:50px; }
  .post-title { margin:15px 0 6px; color:var(--ink); font-size:18px; line-height:1.28; font-weight:780; letter-spacing:-.2px; }
  .post-title.editorial { font-family:var(--serif); font-size:27px; line-height:1.13; font-weight:600; }
  .post-copy { color:#3B4A62; font-size:14px; line-height:1.55; margin:0 0 14px; max-width:700px; }
  .media { position:relative; width:100%; overflow:hidden; border-radius:18px; background:#DCE3EE; border:1px solid rgba(15,35,70,.10); }
  .media.landscape { aspect-ratio: 16/7; }
  .media.video { aspect-ratio:16/8.1; }
  .media img { width:100%; height:100%; object-fit:cover; }
  .media-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(5,16,34,.72),rgba(8,20,40,.08) 52%,rgba(8,20,40,.06)); }
  .media-badge { position:absolute; left:14px; top:13px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.55); color:#30415B; border-radius:999px; padding:6px 10px; font-size:10px; font-weight:800; backdrop-filter:blur(12px); }
  .play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; border:2px solid rgba(255,255,255,.9); background:rgba(8,20,40,.43); display:grid; place-items:center; color:#fff; box-shadow:0 12px 35px rgba(0,0,0,.25); padding:0; }
  .play:after { content:""; margin-left:4px; border-left:17px solid #fff; border-top:11px solid transparent; border-bottom:11px solid transparent; }
  .play:hover { background:rgba(8,20,40,.58); }
  .video-caption { position:absolute; left:22px; bottom:20px; right:22px; color:#fff; }
  .video-caption h3{font-family:var(--serif);font-size:27px;margin:0 0 5px;line-height:1.08;font-weight:600}
  .video-caption p{margin:0;opacity:.9;font-size:13px}
  .duration { position:absolute; right:13px; bottom:12px; background:rgba(7,19,38,.75); color:#fff; border-radius:8px; padding:5px 7px; font-size:10px; font-weight:800; }
  .gallery { display:grid; grid-template-columns:1.25fr .75fr; grid-template-rows:1fr 1fr; gap:5px; height:360px; overflow:hidden; border-radius:18px; }
  .gallery .g1 { grid-row:1/3; }
  .gallery img { width:100%; height:100%; object-fit:cover; }

  /* ---- Polaroid frame: a member-chosen way to share a picture. White
     instant-photo mat, thick bottom border, handwritten caption, a small
     tilt so it reads hand-placed rather than templated. Its local viewport
     clips only transformed horizontal paint, preventing the tilted edge and
     shadow from widening the mobile document while leaving vertical depth. ---- */
  .polaroid-viewport { width:100%; min-width:0; overflow-x:clip; overflow-y:visible; }
  .polaroid { margin:6px auto 4px; padding:16px 16px 0; max-width:540px; background:#FDFDFB; border:1px solid #E7E4DA; border-radius:5px; box-shadow:0 3px 8px rgba(32,48,90,.10), 0 18px 40px rgba(32,48,90,.16); transform:rotate(-1.4deg); }
  .polaroid img { width:100%; aspect-ratio:4/3.4; object-fit:cover; border-radius:2px; }
  .polaroid-caption { padding:13px 6px 17px; font-family:"Caveat","Segoe Script",cursive; font-size:22px; line-height:1.15; color:#4A4335; text-align:center; }

  /* ---- Film-strip frame: a member-chosen way to share a video. The video
     sits INSIDE a piece of film — dark stock with sprocket holes running
     above and below the picture. ---- */
  .filmstrip { margin:6px 0 4px; padding:0 12px; background:#14161B; border-radius:12px; box-shadow:0 18px 40px rgba(10,16,30,.30); }
  .film-holes { display:flex; justify-content:space-between; padding:8px 4px; }
  .film-holes i { width:24px; height:13px; border-radius:3px; background:#F4F3EF; opacity:.9; }
  .filmstrip .media.video { border-radius:4px; border-color:rgba(255,255,255,.14); }
  .post-linkline { margin-top:10px; display:flex; gap:8px; align-items:center; color:#728198; font-size:11px; }
  .post-linkline strong { color:#3E4E67; }
  .actions { margin-top:13px; display:flex; align-items:center; gap:25px; color:#66768D; font-size:12px; font-weight:700; }
  .action { display:flex; align-items:center; gap:7px; background:none; border:0; color:inherit; padding:6px 2px; border-radius:9px; }
  .action:hover { color:#3E4E67; }
  .action.primary-action { color:#4A57D8; }
  .action.primary-action:hover { color:var(--indigo-strong); }
  .action.save { margin-left:auto; }
  .action[aria-pressed="true"] { color:var(--indigo-strong); }
  .action[aria-pressed="true"] .icon { fill:currentColor; }
  .reply-preview { margin:16px 0 0 0; padding:10px 0 0 55px; border-left:2px solid #C9D0FF; }
  .reply-row { display:flex; gap:10px; }
  .reply-text { color:#4A5B73; font-size:12px; line-height:1.45; }
  .reply-text strong { color:var(--ink); }
  .reply-link { margin-top:8px; color:#4B57D7; font-size:11px; font-weight:800; background:none; border:0; padding:2px 0; display:inline-block; }
  .reply-link:hover { color:var(--indigo-strong); }
  .voice-player { display:flex; align-items:center; gap:11px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
  .voice-play { width:34px;height:34px;border-radius:50%;background:var(--indigo);color:white;display:grid;place-items:center;border:0;flex:0 0 auto; }
  .voice-play:hover { background:var(--indigo-strong); }
  .wave { flex:1; min-width:0; height:28px; display:flex; align-items:center; gap:3px; }
  .wave span { flex:0 1 3px; width:3px; border-radius:2px; background:#AAB3EE; }
  .wave span:nth-child(3n){height:23px}.wave span:nth-child(3n+1){height:11px}.wave span:nth-child(3n+2){height:17px}
  .voice-time { flex:0 0 auto; font-size:11px; color:#5d6b82; font-weight:700; }
  .context-rail { position:sticky; top:calc(var(--site-header-h) + 28px); display:flex; flex-direction:column; gap:16px; }

  /* ---- Sticky-note reminder pad: pinned at the top of the right rail.
     A pad of yellow notes with a dashed rule between reminders; each
     reminder can also be sent to the Slate Board. ---- */
  .sticky-pad { position:relative; padding:16px 16px 13px; background:linear-gradient(180deg,#FFF7BC 0%,#FFEE9E 100%); border:1px solid #EBDA85; border-radius:4px 4px 16px 4px; box-shadow:0 3px 7px rgba(120,96,10,.14), 0 16px 34px rgba(120,96,10,.20); transform:rotate(.7deg); }
  .sticky-pad-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 4px; }
  .sticky-pad h3 { margin:0; font-family:"Caveat","Segoe Script",cursive; font-size:24px; line-height:1; color:#5A4A12; }
  .sticky-pin { width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 34% 30%, #F6D468, #A97C12); box-shadow:0 2px 5px rgba(90,74,18,.45); }
  .sticky-list { list-style:none; margin:0; padding:0; }
  .sticky-note-row { display:flex; align-items:center; gap:9px; padding:9px 2px; border-bottom:1px dashed rgba(122,99,22,.35); }
  .sticky-note-text { flex:1; min-width:0; color:#4A3D10; font-size:13px; line-height:1.4; font-weight:600; }
  .sticky-board-btn { flex:0 0 auto; padding:4px 10px; border:1px solid rgba(122,99,22,.42); border-radius:999px; background:rgba(255,255,255,.6); color:#6B570F; font-size:11px; font-weight:750; white-space:nowrap; }
  .sticky-board-btn:hover { background:rgba(255,255,255,.85); }
  .sticky-board-btn[aria-pressed="true"] { background:#5A4A12; border-color:#5A4A12; color:#FFF7BC; }
  .sticky-add { display:flex; gap:7px; margin-top:11px; }
  .sticky-add input { flex:1; min-width:0; padding:8px 11px; border:1px solid rgba(122,99,22,.38); border-radius:10px; background:rgba(255,255,255,.68); color:#4A3D10; font-size:13px; }
  .sticky-add input::placeholder { color:#8A7530; }
  .sticky-add-btn { width:36px; border:1px solid rgba(122,99,22,.42); border-radius:10px; background:#F5D96B; color:#5A4A12; font-size:19px; font-weight:800; line-height:1; }
  .sticky-add-btn:hover { background:#F0CE4D; }
  .sticky-hint { margin:9px 2px 0; color:#8A7530; font-size:11px; line-height:1.4; }
  .rail-panel { background:rgba(255,255,255,.88); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow-1); }
  .rail-title { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
  .rail-title h3 { font-family:var(--serif); font-size:21px; color:var(--ink); margin:0; font-weight:600; }
  .spark { width:32px; height:32px; border-radius:10px; background:#E8FAFC; color:#1FA5B0; display:grid; place-items:center; }
  .rail-sub { margin:-2px 0 12px; font-size:12px; line-height:1.45; color:#74849B; }
  .catch-item { padding:13px 0; border-top:1px solid var(--line-soft); }
  .catch-item:first-of-type{border-top:0}
  .catch-item strong{display:block;color:var(--ink);font-size:12px;line-height:1.35}
  .catch-item span{display:block;margin-top:4px;color:#7A899F;font-size:11px;line-height:1.35}
  .rail-cta { margin-top:14px; width:100%; height:42px; border:0; border-radius:12px; background:#EEF0FF; color:#4B58D8; font-size:12px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
  .rail-cta:hover { background:#E3E7FF; }
  .rail-note { padding:0 2px 0 18px; border-left:2px solid var(--cyan); color:#74839A; font-size:11px; line-height:1.45; }
  .rail-note strong{color:#42506A}
  .notice { display:flex; gap:12px; padding:16px 18px; border:1px solid var(--line); background:#fff; border-radius:16px; color:#5D6D84; font-size:12px; line-height:1.5; }
  .notice .symbol { width:34px;height:34px;border-radius:11px;background:#EEF0FF;color:var(--indigo);display:grid;place-items:center;flex:0 0 auto; }
  .empty-state { text-align:center; padding:100px 30px 90px; }
  .empty-illustration { width:110px; height:110px; margin:0 auto 26px; border-radius:35px; background:linear-gradient(145deg,#E4E8FF,#F7F8FF); position:relative; box-shadow:inset 0 0 0 1px #DDE2F5; }
  .empty-illustration:before { content:""; position:absolute; width:46px;height:52px;border:3px solid var(--indigo);border-radius:12px;left:30px;top:27px; }
  .empty-illustration:after { content:""; position:absolute;width:28px;height:3px;background:var(--cyan);left:40px;top:47px;box-shadow:0 11px 0 var(--azure),0 22px 0 var(--amber); }
  .empty-state h2{font-family:var(--serif);color:var(--ink);font-size:29px;margin:0 0 10px;font-weight:600}
  .empty-state p{max-width:440px;margin:0 auto 22px;color:#74839A;font-size:14px;line-height:1.55}
  .skeleton .sk { background:linear-gradient(90deg,#E9EDF4 25%,#F4F6FA 37%,#E9EDF4 63%); background-size:400% 100%; animation:none; border-radius:8px; }
  .skeleton .post-head .sk{width:170px;height:14px;margin-top:8px}
  .skeleton .post-title.sk{width:62%;height:20px}
  .skeleton .line{height:12px;margin:8px 0}
  .skeleton .media{background:#E5EAF1;border:0}
  .skeleton .avatar{background:#E2E7EF;box-shadow:none}
  .error-panel { margin:42px 0; padding:30px; border:1px solid #F0D4D7; background:#FFF9FA; border-radius:20px; display:flex; gap:18px; align-items:flex-start; }
  .error-icon { width:46px;height:46px;border-radius:15px;background:#FBE8EA;color:#B74550;display:grid;place-items:center;flex:0 0 auto;font-weight:900;font-size:20px}
  .error-panel h2{color:var(--ink);font-size:18px;margin:2px 0 7px}
  .error-panel p{color:#6D7C92;font-size:13px;line-height:1.5;margin:0 0 15px}

  /* Modal and voice states. The overlay must clear every site-chrome layer,
     including the current 9999 ceiling, plus Community's mobile bar. */
  .overlay { position:fixed; inset:0; background:rgba(8,18,37,.42); backdrop-filter:blur(8px); z-index:10050; display:grid; place-items:center; padding:24px; }
  .voice-modal { width:min(760px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); display:flex; flex-direction:column; background:#fff; border:1px solid rgba(255,255,255,.8); border-radius:28px; box-shadow:var(--shadow-2); overflow:hidden; }
  .modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 25px 17px; border-bottom:1px solid var(--line-soft); }
  .modal-head h2{font-family:var(--serif);color:var(--ink);font-size:26px;margin:0;font-weight:600}
  .close{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#75839A;display:grid;place-items:center}
  .close:hover { background:#F5F7FC; }
  .listening-body { padding:35px 38px 30px; text-align:center; }
  .listening-ring { width:128px;height:128px;margin:0 auto 25px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#203767 0 38%,#3a5aa0 39% 50%,#DFE6F5 51% 62%,#F5F7FC 63%);box-shadow:0 20px 55px rgba(32,55,103,.25);color:#fff; }
  .listening-title { font-size:21px;color:var(--ink);font-weight:800;margin:0 0 8px}
  .listening-help{color:#76869D;font-size:13px;margin:0 0 20px}
  .live-transcript{font-family:var(--serif);font-size:26px;line-height:1.45;color:#273852;max-width:620px;margin:0 auto 28px;min-height:112px}
  .live-transcript .cursor{display:inline-block;width:2px;height:27px;background:var(--indigo);vertical-align:-4px;margin-left:4px}
  .audio-level { height:46px; display:flex; align-items:center; justify-content:center; gap:5px; margin:0 0 28px; }
  .audio-level i { display:block;width:4px;border-radius:3px;background:linear-gradient(#3a5aa0,#203767); }
  .audio-level i:nth-child(5n){height:38px}.audio-level i:nth-child(5n+1){height:14px}.audio-level i:nth-child(5n+2){height:27px}.audio-level i:nth-child(5n+3){height:21px}.audio-level i:nth-child(5n+4){height:33px}
  .modal-actions{display:flex;align-items:center;justify-content:center;gap:11px}
  .stop-btn{height:46px;padding:0 22px;border:0;border-radius:14px;background:var(--indigo);color:#fff;font-weight:800}
  .cancel-btn{height:46px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:#fff;color:#687891;font-weight:750}
  .stop-btn:hover{background:var(--indigo-strong)}
  .cancel-btn:hover{background:#F5F7FC}
  .review-body { display:grid; grid-template-columns:minmax(0,1fr) 265px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .review-main { padding:24px 26px 27px; }
  .review-side { padding:24px 22px; background:#F8FAFE; border-left:1px solid var(--line); }
  .field-label{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:#8A99AE;font-weight:800;margin:0 0 8px;display:block}
  .transcript-box{border:1px solid var(--line);border-radius:15px;background:#fff;padding:15px 16px;color:#35465F;font-size:14px;line-height:1.55;min-height:112px}
  .proposal{margin-top:18px;border:1px solid #DDE2F7;border-radius:16px;padding:16px;background:#FBFCFF}
  .proposal-head{display:flex;align-items:center;gap:8px;color:#4A56D4;font-size:12px;font-weight:800;margin-bottom:10px}
  .proposal h3{color:var(--ink);font-size:18px;margin:0 0 7px}
  .proposal p{font-size:13px;line-height:1.5;color:#56667D;margin:0}
  .chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
  .chip{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 9px;background:#EEF1F8;color:#5B6B82;font-size:10px;font-weight:750;border:0}
  .chip.ai{background:#E7FAFC;color:#167E89}
  .chip.project{background:#EDF0FF;color:#4B57D4}
  button.chip:hover{background:#E4E9F4}
  button.chip.project:hover{background:#E2E7FF}
  .transcript-box.editable { width:100%; resize:vertical; }
  .transcript-box.editable:focus { border-color:#B9C2F5; outline:none; box-shadow:0 0 0 3px rgba(79,91,213,.14); }

  /* ---- Composer attachments: photo / video / document / audio. Attached
     items become chips with a remove ✕; photo and video chips carry their
     frame option (Polaroid / film strip). ---- */
  .review-audio { margin:0 0 10px; }
  .attach-row { display:flex; flex-wrap:wrap; gap:8px; }
  .attach-row .pill-btn { height:34px; }
  .attach-chip { display:inline-flex; align-items:center; gap:9px; padding:7px 8px 7px 12px; background:#F2F5FB; border:1px solid var(--line); border-radius:11px; color:#3D4E6B; font-size:12px; font-weight:700; }
  .frame-opt { display:inline-flex; align-items:center; gap:5px; padding-left:9px; border-left:1px solid #D5DCE8; color:#5A6B85; font-size:11.5px; font-weight:600; cursor:pointer; }
  .frame-opt input { accent-color:var(--indigo); }
  .attach-x { border:0; background:none; color:#8A99AE; font-size:13px; line-height:1; padding:3px 5px; border-radius:7px; }
  .attach-x:hover { color:#B74550; background:#F5E9EB; }
  .privacy-option{display:flex;align-items:flex-start;gap:10px;padding:11px 10px;border-radius:12px;margin-bottom:5px;cursor:pointer;position:relative}
  .privacy-option:hover{background:#F1F3FB}
  .privacy-option.selected{background:#EDEFFF}
  .privacy-option.selected:hover{background:#EDEFFF}
  .privacy-option input{position:absolute;opacity:0;pointer-events:none}
  .radio{width:17px;height:17px;border:2px solid #A8B3C5;border-radius:50%;margin-top:1px;display:grid;place-items:center;flex:0 0 auto}
  .selected .radio{border-color:var(--indigo)}
  .selected .radio:after{content:"";width:7px;height:7px;background:var(--indigo);border-radius:50%}
  .privacy-option strong{display:block;color:var(--ink);font-size:12px}
  .privacy-option span{display:block;margin-top:3px;color:#7A899F;font-size:10px;line-height:1.35}
  .privacy-option .radio{display:grid;margin-top:1px}
  .privacy-option > span:last-child{margin-top:0}
  .privacy-option:has(input:focus-visible){outline:2px solid var(--indigo);outline-offset:2px}
  .review-footer{grid-column:1/3;position:sticky;bottom:0;z-index:1;display:flex;align-items:center;gap:10px;padding:16px 22px;border-top:1px solid var(--line);background:#fff}
  .review-footer .meta{font-size:11px;color:#7A899F}
  .review-footer .btn{margin-left:auto}
  /* Detail */
  .back-link{display:flex;align-items:center;gap:8px;color:#586880;font-size:12px;font-weight:750;margin-bottom:18px;background:none;border:0;padding:6px 4px 6px 0;border-radius:9px}
  .back-link:hover{color:#384862}
  .detail-header{padding-bottom:22px;border-bottom:1px solid var(--line)}
  .thread{padding:10px 0 0 50px}
  .comment{display:flex;gap:11px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
  .comment-body{flex:1}
  .comment-head{display:flex;gap:7px;align-items:baseline}
  .comment-name{color:var(--ink);font-size:13px;font-weight:800}
  .comment-time{color:#8795A8;font-size:10px}
  .comment-copy{margin:6px 0 8px;color:#46566D;font-size:13px;line-height:1.5}
  .comment-actions{display:flex;gap:16px;color:#728198;font-size:10px;font-weight:750;align-items:center}
  .comment-action{background:none;border:0;color:inherit;padding:4px 0;font-size:10px;font-weight:750}
  .comment-action:hover{color:#42536E}
  .offer-help{display:inline-flex;align-items:center;gap:6px;color:#3E55D4;background:#EEF0FF;border-radius:999px;padding:5px 8px;border:0;font-size:10px;font-weight:750}
  .offer-help:hover{background:#E3E7FF}
  .offer-help[aria-pressed="true"]{background:var(--indigo);color:#fff}
  .comment-composer{margin:20px 0 0 50px;padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:#fff;display:flex;align-items:center;gap:10px}
  .comment-composer input{border:0;outline:none;flex:1;color:#35465F;font-size:12px;min-width:0}
  .comment-composer input::placeholder{color:#728198}
  .comment-composer:focus-within{border-color:#B9C2F5;box-shadow:0 0 0 3px rgba(79,91,213,.12)}
  /* Interactive layer additions */
  .post.just-previewed { animation:ps-post-in .36s var(--ease); }
  .overlay { animation:ps-overlay-in .22s var(--ease); }
  .audio-level.live i { animation:ps-wave .9s ease-in-out infinite alternate; transform-origin:center; }
  .audio-level.live i:nth-child(3n){animation-duration:.72s}
  .audio-level.live i:nth-child(4n){animation-duration:1.05s}
  .audio-level.live i:nth-child(7n){animation-delay:.18s}
  .live-transcript .cursor { animation:ps-cursor 1s steps(1) infinite; }

  .mobile-bottom { display:none; }

  @media (prefers-reduced-motion: reduce) {
    & *, & *::before, & *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .audio-level.live i { animation:none; }
    .live-transcript .cursor { animation:none; }
    .post.just-previewed { animation:none; }
  }

  /* responsive */
  @media (max-width: 1100px) {
    & { --nav-w:86px; --feed-w:720px; }
    .nav-item span, .nav-section-label, .sidebar-bottom .user-copy { display:none; }
    .sidebar-capture span { display:none; }
    .nav-item{justify-content:center;padding:0}
    .sidebar{padding-left:12px;padding-right:12px}
    .sidebar-bottom{left:12px;right:12px}
    .user-row{justify-content:center;padding:8px}
    .main{padding-left:30px;padding-right:30px}
    .content-grid{grid-template-columns:minmax(0,1fr)}
    .context-rail{display:none}
    .main-inner{width:min(100%,var(--feed-w))}
  }
  @media (max-width: 700px) {
    & { background:#fff; }
    .app-shell{display:block;min-height:auto}
    .sidebar{display:none}
    .main{padding:0 0 78px;min-height:calc(100vh - var(--site-header-h))}
    .main-inner,.main-inner.no-rail{width:100%}
    .page-head{padding:18px 17px 11px;display:block;margin:0}
    .page-title{font-size:33px}
    .page-title-row{align-items:flex-start}
    .page-subtitle{font-size:12px;margin-top:5px}
    .preview-note{font-size:11px}
    .feed-tabs{padding:0 17px;gap:23px}
    .feed-tab{font-size:12px;padding-bottom:12px}
    .composer{margin:12px 14px 2px;border-radius:17px;min-height:58px;padding:10px 11px}
    .composer .avatar{width:34px;height:34px}
    .composer-actions .pill-btn{display:none}
    .mic-btn{width:36px;height:36px}
    .post{padding:19px 15px 22px}
    .post-head{gap:10px}
    .avatar{width:34px;height:34px}
    .post-body{margin-left:44px}
    .post-title{font-size:16px;margin-top:11px}
    .post-title.editorial{font-size:23px}
    .post-copy{font-size:13px}
    .media.landscape{aspect-ratio:16/9}
    .media.video{aspect-ratio:16/10}
    .gallery{height:260px}
    .actions{gap:18px;font-size:11px}
    .action.save{margin-left:auto}
    .post-linkline{font-size:10px}
    .reply-preview{padding-left:42px;margin-left:0}
    .mobile-bottom{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:67px;background:rgba(255,255,255,.96);border-top:1px solid var(--line);z-index:1250;padding-bottom:5px}
    .mobile-nav{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#74839A;font-size:9px;font-weight:700;background:none;border:0;text-decoration:none;min-height:44px}
    .mobile-nav.active{color:var(--indigo)}
    .capture-fab{width:48px;height:48px;border-radius:50%;background:var(--indigo);color:white;display:grid;place-items:center;margin-top:-14px;box-shadow:0 10px 26px rgba(79,91,213,.35);border:4px solid #fff}
    .overlay{padding:0;align-items:end}
    .voice-modal{width:100%;max-width:none;border-radius:25px 25px 0 0;max-height:92vh}
    .modal-head{padding:18px 18px 14px}
    .modal-head h2{font-size:22px}
    .listening-body{padding:25px 19px 23px}
    .listening-ring{width:105px;height:105px}
    .live-transcript{font-size:21px;min-height:96px}
    .review-body{display:block;max-height:68vh;overflow:auto}
    .review-main,.review-side{padding:18px}
    .review-side{border-left:0;border-top:1px solid var(--line)}
    .review-footer{grid-column:auto;padding:13px 14px;position:sticky;bottom:0}
    .review-footer .meta{display:none}
    .review-footer .btn{width:100%;margin-left:0}
    .review-footer .cancel-btn{display:none}
    .thread{padding-left:44px}
    .comment-composer{margin-left:44px;margin-right:15px}
    .detail-header{padding:0 15px 15px}
    .back-link{margin:17px 15px 0;padding-top:0}
    .video-caption h3{font-size:22px}
  }
  @media (max-width: 360px) {
    .voice-player{gap:8px;padding-inline:10px}
    .wave{gap:2px}
  }
}

/* Keyframes must live at the top level (they are page-scoped anyway —
   this stylesheet only loads on the Feed preview). */
@keyframes ps-post-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes ps-overlay-in { from { opacity:0; } to { opacity:1; } }
@keyframes ps-wave { from { transform:scaleY(.45); } to { transform:scaleY(1.25); } }
@keyframes ps-cursor { 50% { opacity:0; } }

/* Site-chrome adjustments for this page only (body class set by the
   template): keep the floating Ask-AI toggle and footer clear of the
   preview's fixed mobile bottom bar. The global header itself is never
   touched. */

/* style.css isolates .main-content so ordinary page content cannot paint over
   site chrome. Community's fixed dialogs must escape that stacking context
   and cover the entire viewport, so only the two Feed surfaces relax it while
   a dialog exists. Closed Community pages keep the normal isolation/pixels.
   The overlay remains explicitly above style.css's current 9999 ceiling. */
body.feed-preview-page .main-content:has(#overlayRoot > .overlay),
body.community-tabs-page .main-content:has(#overlayRoot > .overlay) { isolation: auto; }
@media (max-width: 700px) {
  body.feed-preview-page #chat-toggle { bottom: 84px; }
  body.feed-preview-page .footer { padding-bottom: 90px; }
  /* base.html's mobile tabbar clones the profile sub-header tabs to the
     bottom of the screen; on this page the community bottom bar owns
     that space, and the same tabs stay reachable in the sub-header. */
  body.feed-preview-page #mobile-tabbar { display: none !important; }
}

/* PS-FEED-002 (v1.2): purposeful Respond tray replaces the single
   Encourage action. Quiet, idempotent, no public leaderboards. The
   [hidden] guard keeps the closed state closed — display:flex used to
   defeat the hidden attribute and the tray showed on every post. */
#feed-app .respond-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 10px 0 2px;
}

#feed-app .respond-tray[hidden] { display: none; }
#feed-app .respond-option {
  min-height: 2.5rem;
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: #45566F;
  font-size: 0.8rem;
  font-weight: 650;
}
#feed-app .respond-option:hover { background: #F5F7FC; }
#feed-app .respond-option[aria-pressed="true"] {
  background: var(--indigo);
  border-color: var(--indigo);
  color: #fff;
}

/* =====================================================================
   LAYERED INK & SIGNAL GOLD (PS-THEME-002, 2026-07-16)
   body[data-theme="dark"]: the feed keeps its white app sheet — one
   deliberate paper layer floating in the dark shell (the prototype
   hardcodes white surfaces + navy type throughout, so the sheet stays
   coherent) — with indigo accents collapsed to signal gold.
   ===================================================================== */
body[data-theme="dark"] {
  --indigo: #8a6500;
  --indigo-soft: rgb(216 169 40 / 14%);
}

body[data-theme="dark"] .nav-item.active,
body[data-theme="dark"] .nav-item.active:hover { color: #6f5100; background: rgb(216 169 40 / 16%); }

body[data-theme="dark"] .mic-btn {
  border-color: rgb(216 169 40 / 45%);
  background: rgb(216 169 40 / 14%);
  color: #8a6500;
}

body[data-theme="dark"] .mic-btn:hover { background: rgb(216 169 40 / 22%); }

body[data-theme="dark"] .rail-cta { background: rgb(216 169 40 / 15%); color: #6f5100; }
body[data-theme="dark"] .rail-cta:hover { background: rgb(216 169 40 / 24%); }

body[data-theme="dark"] .notice .symbol { background: rgb(216 169 40 / 15%); color: #8a6500; }

body[data-theme="dark"] .listening-ring {
  background: radial-gradient(circle, #d8a928 0 38%, #e3b83a 39% 50%, #f5e7b6 51% 62%, #fbf6e4 63%);
  box-shadow: 0 20px 55px rgba(216, 169, 40, .3);
  color: #0b0c0e;
}

body[data-theme="dark"] .audio-level i { background: linear-gradient(#e3b83a, #8a6500); }

body[data-theme="dark"] .transcript-box.editable:focus {
  border-color: #d8a928;
  box-shadow: 0 0 0 3px rgba(216, 169, 40, .18);
}

body[data-theme="dark"] .privacy-option.selected,
body[data-theme="dark"] .privacy-option.selected:hover { background: rgb(216 169 40 / 13%); }

body[data-theme="dark"] .offer-help { color: #6f5100; background: rgb(216 169 40 / 15%); }
body[data-theme="dark"] .offer-help:hover { background: rgb(216 169 40 / 24%); }

body[data-theme="dark"] .comment-composer:focus-within {
  border-color: #d8a928;
  box-shadow: 0 0 0 3px rgba(216, 169, 40, .15);
}

/* The preview app declares its palette on #feed-app, so the mono remap
   must land there too (body-level vars lose to the closer declaration). */
body[data-theme="dark"] #feed-app {
  --indigo: #8a6500;
  --indigo-strong: #6f5100;
  --indigo-soft: rgb(216 169 40 / 14%);
  --azure: #d8a928;
  --cyan: #bf8f17;
  --amber: #d8a928;
  --ink: #0b0c0e;
  --text: #24262a;
  --muted: #66645f;
  --line: #ddd9d0;
  --line-soft: #e9e5dc;
  --cloud: #faf9f5;
  --shadow-1: 0 10px 30px rgba(11, 12, 14, .06);
  --shadow-2: 0 24px 70px rgba(11, 12, 14, .12);
}

body[data-theme="dark"] #feed-app .capture-fab {
  background: #d8a928;
  color: #0b0c0e;
  box-shadow: 0 10px 26px rgba(216, 169, 40, .35);
}

/* Same fixes again at #feed-app specificity (the app's own rules carry
   the ID prefix, which beats plain body-scoped overrides). */
body[data-theme="dark"] #feed-app .nav-item.active,
body[data-theme="dark"] #feed-app .nav-item.active:hover { color: #6f5100; background: rgb(216 169 40 / 16%); }

body[data-theme="dark"] #feed-app .mic-btn {
  border-color: rgb(216 169 40 / 45%);
  background: rgb(216 169 40 / 14%);
  color: #8a6500;
}

body[data-theme="dark"] #feed-app .mic-btn:hover { background: rgb(216 169 40 / 22%); }

body[data-theme="dark"] #feed-app .rail-cta { background: rgb(216 169 40 / 15%); color: #6f5100; }
body[data-theme="dark"] #feed-app .rail-cta:hover { background: rgb(216 169 40 / 24%); }

body[data-theme="dark"] #feed-app .notice .symbol { background: rgb(216 169 40 / 15%); color: #8a6500; }

body[data-theme="dark"] #feed-app .listening-ring {
  background: radial-gradient(circle, #d8a928 0 38%, #e3b83a 39% 50%, #f5e7b6 51% 62%, #fbf6e4 63%);
  box-shadow: 0 20px 55px rgba(216, 169, 40, .3);
  color: #0b0c0e;
}

body[data-theme="dark"] #feed-app .audio-level i { background: linear-gradient(#e3b83a, #8a6500); }

body[data-theme="dark"] #feed-app .transcript-box.editable:focus {
  border-color: #d8a928;
  box-shadow: 0 0 0 3px rgba(216, 169, 40, .18);
}

body[data-theme="dark"] #feed-app .privacy-option.selected,
body[data-theme="dark"] #feed-app .privacy-option.selected:hover { background: rgb(216 169 40 / 13%); }

body[data-theme="dark"] #feed-app .offer-help { color: #6f5100; background: rgb(216 169 40 / 15%); }
body[data-theme="dark"] #feed-app .offer-help:hover { background: rgb(216 169 40 / 24%); }

body[data-theme="dark"] #feed-app .comment-composer:focus-within {
  border-color: #d8a928;
  box-shadow: 0 0 0 3px rgba(216, 169, 40, .15);
}

/* Community is a genuine dark composition, unlike the standalone Feed
   preview's deliberate paper sheet. Its dialogs therefore need their own
   dark surfaces rather than inheriting Community's light text onto #fff. */
body[data-theme="dark"].community-tabs-page #feed-app .voice-modal {
  --comm-modal-surface: #0c1924;
  --comm-modal-raised: #12212c;
  --comm-modal-soft: #13252f;
  --comm-modal-control: #152630;
  --comm-modal-title: #f3efe5;
  --comm-modal-text: #dce5dc;
  --comm-modal-muted: #b7c4bf;
  --comm-modal-border: #607a6c;
  --comm-modal-accent: #b3d793;
  --comm-modal-accent-ink: #07131e;
  color: var(--comm-modal-text);
  background: linear-gradient(145deg, #10212d 0%, var(--comm-modal-surface) 58%, #08141f 100%);
  border-color: var(--comm-modal-border);
  box-shadow: 0 30px 90px rgb(0 0 0 / 58%), 0 0 0 1px rgb(179 215 147 / 10%);
}

body[data-theme="dark"].community-tabs-page #feed-app .overlay {
  background: rgb(2 8 14 / 76%);
}

body[data-theme="dark"].community-tabs-page #feed-app .modal-head {
  background: rgb(14 29 40 / 96%);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .modal-head h2,
body[data-theme="dark"].community-tabs-page #feed-app .listening-title,
body[data-theme="dark"].community-tabs-page #feed-app .proposal h3,
body[data-theme="dark"].community-tabs-page #feed-app .privacy-option strong {
  color: var(--comm-modal-title);
}

body[data-theme="dark"].community-tabs-page #feed-app .close,
body[data-theme="dark"].community-tabs-page #feed-app .cancel-btn,
body[data-theme="dark"].community-tabs-page #feed-app .voice-modal .pill-btn {
  color: var(--comm-modal-text);
  background: var(--comm-modal-control);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .close:hover,
body[data-theme="dark"].community-tabs-page #feed-app .cancel-btn:hover,
body[data-theme="dark"].community-tabs-page #feed-app .voice-modal .pill-btn:hover {
  color: var(--comm-modal-title);
  background: #20362f;
}

body[data-theme="dark"].community-tabs-page #feed-app .listening-body,
body[data-theme="dark"].community-tabs-page #feed-app .review-main {
  background: transparent;
}

body[data-theme="dark"].community-tabs-page #feed-app .listening-help,
body[data-theme="dark"].community-tabs-page #feed-app .privacy-option span,
body[data-theme="dark"].community-tabs-page #feed-app .review-footer .meta,
body[data-theme="dark"].community-tabs-page #feed-app .field-label,
body[data-theme="dark"].community-tabs-page #feed-app .frame-opt,
body[data-theme="dark"].community-tabs-page #feed-app .voice-time {
  color: var(--comm-modal-muted);
}

body[data-theme="dark"].community-tabs-page #feed-app .live-transcript,
body[data-theme="dark"].community-tabs-page #feed-app .proposal p {
  color: var(--comm-modal-text);
}

body[data-theme="dark"].community-tabs-page #feed-app .listening-ring {
  color: var(--comm-modal-accent-ink);
  background: radial-gradient(circle, #96bb76 0 38%, #b3d793 39% 50%, #365341 51% 62%, #152630 63%);
  box-shadow: 0 20px 55px rgb(83 122 78 / 34%);
}

body[data-theme="dark"].community-tabs-page #feed-app .audio-level i {
  background: linear-gradient(#b3d793, #607f55);
}

body[data-theme="dark"].community-tabs-page #feed-app .live-transcript .cursor {
  background: var(--comm-modal-accent);
}

body[data-theme="dark"].community-tabs-page #feed-app .review-side {
  background: var(--comm-modal-raised);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .review-footer {
  background: #0a1721;
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .transcript-box {
  color: var(--comm-modal-text);
  caret-color: var(--comm-modal-accent);
  background: var(--comm-modal-control);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .transcript-box::placeholder {
  color: var(--comm-modal-muted);
}

body[data-theme="dark"].community-tabs-page #feed-app .proposal {
  background: var(--comm-modal-soft);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .proposal-head {
  color: #c7e6aa;
}

body[data-theme="dark"].community-tabs-page #feed-app .chip {
  color: #d2ded8;
  background: #1c2b35;
  border: 1px solid var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .chip.ai {
  color: #b7e4d6;
  background: #163237;
}

body[data-theme="dark"].community-tabs-page #feed-app .chip.project {
  color: #d2deb6;
  background: #203039;
}

body[data-theme="dark"].community-tabs-page #feed-app .chip[aria-disabled="true"] {
  color: var(--comm-modal-muted);
  background: #172630;
  border-style: dashed;
  opacity: 1;
}

body[data-theme="dark"].community-tabs-page #feed-app .attach-chip,
body[data-theme="dark"].community-tabs-page #feed-app .voice-player,
body[data-theme="dark"].community-tabs-page #feed-app .notice {
  color: var(--comm-modal-text);
  background: var(--comm-modal-control);
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .frame-opt {
  border-color: var(--comm-modal-border);
}

body[data-theme="dark"].community-tabs-page #feed-app .attach-x {
  color: var(--comm-modal-muted);
}

body[data-theme="dark"].community-tabs-page #feed-app .attach-x:hover {
  color: #ffc3c8;
  background: #43252d;
}

body[data-theme="dark"].community-tabs-page #feed-app .privacy-option:hover {
  background: #1b302d;
}

body[data-theme="dark"].community-tabs-page #feed-app .privacy-option.selected,
body[data-theme="dark"].community-tabs-page #feed-app .privacy-option.selected:hover {
  background: #263c34;
}

body[data-theme="dark"].community-tabs-page #feed-app .radio {
  border-color: #92ae8f;
}

body[data-theme="dark"].community-tabs-page #feed-app .selected .radio {
  border-color: var(--comm-modal-accent);
}

body[data-theme="dark"].community-tabs-page #feed-app .selected .radio::after {
  background: var(--comm-modal-accent);
}

body[data-theme="dark"].community-tabs-page #feed-app .notice .symbol {
  color: var(--comm-modal-accent);
  background: #22392f;
}

body[data-theme="dark"].community-tabs-page #feed-app .notice strong {
  color: var(--comm-modal-title) !important;
}

body[data-theme="dark"].community-tabs-page #feed-app .stop-btn,
body[data-theme="dark"].community-tabs-page #feed-app .voice-modal .btn.primary {
  color: var(--comm-modal-accent-ink);
  background: var(--comm-modal-accent);
  border-color: var(--comm-modal-accent);
  box-shadow: 0 12px 28px rgb(97 133 84 / 30%);
}

body[data-theme="dark"].community-tabs-page #feed-app .stop-btn:hover,
body[data-theme="dark"].community-tabs-page #feed-app .voice-modal .btn.primary:hover {
  color: var(--comm-modal-accent-ink);
  background: #c9e9ab;
  border-color: #c9e9ab;
}

body[data-theme="dark"].community-tabs-page #feed-app .voice-modal button:disabled {
  color: #9ba9a4;
  background: #18242d;
  border-color: #607a6c;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

body[data-theme="dark"].community-tabs-page #feed-app .voice-modal :is(button, input, textarea, [tabindex]):focus-visible,
body[data-theme="dark"].community-tabs-page #feed-app .privacy-option:has(input:focus-visible) {
  outline: 2px solid var(--comm-modal-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(12 25 36 / 88%);
}