/* Frame: minimal + directional layer (DESIGN.md §0 "Minimal + directional"). Loaded last.
   Rules of thumb: neutrals everywhere; purple only on what you can act on or what is current;
   one filled purple button per screen; no borders, dividers, gradients or decorative badges. Original. */

/* ===== Tokens ===== */
:root {
  --violet-50: #F4F1FF; --violet-100: #E9E3FF; --violet-200: #D3C8FF; --violet-300: #B4A3FF; --violet-400: #9A85FF;
  --violet-500: #7C5CFF; --violet-600: #6E4FF6; --violet-700: #5A33D6; --violet-800: #4626A8; --violet-900: #2E1A70;
  /* derived from the user's accent so optional accents keep AA */
  --accent-fill: color-mix(in srgb, var(--accent) 88%, #000);
  --on-accent: #FFFFFF;
  --accent-ink: color-mix(in srgb, var(--accent) 62%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: var(--accent);
  --hairline: transparent;
  --like: var(--accent-ink); --repost: var(--accent-ink);
  --ring-seen: var(--border-strong); --ring-close: var(--accent);
  --r-card: 14px; --r-chip: 999px;
  --fs-title: 22px; --fs-body: 15px; --fs-small: 13px;
}
[data-theme="light"] { --accent-ink: color-mix(in srgb, var(--accent) 78%, #000); --accent-soft: color-mix(in srgb, var(--accent) 10%, #fff); }
html[data-tone="light"] { --accent-fill: var(--accent); --on-accent: #0E0E11; }
html[data-tone="light"][data-theme="light"] { --accent-ink: color-mix(in srgb, var(--accent) 38%, #000); --accent-fill: color-mix(in srgb, var(--accent) 70%, #000); --on-accent: #FFFFFF; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Type: three sizes per screen ===== */
.t-display, .t-title1, .fr-title, .topbar h2, .dc-head .fr-title, .ev-title { font: 650 var(--fs-title)/28px var(--font-ui) !important; letter-spacing: -.015em !important; }
.t-micro, .sec-title, .card h3, .card-h h3, .fp-label, .set-sub { font-size: var(--fs-small) !important; line-height: 18px; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--muted); }
.page-lede { color: var(--muted); font-size: var(--fs-body); margin: 0 16px 20px; }
.link, .post-text a, .profile-bio a, .ev-ctx a, .ctx-foot a, .card-h a, .sec-link, .msg-gif-text a { color: var(--accent-ink); }
.trend .tag, .trend b, .now-tag { color: var(--text) !important; }

/* ===== Buttons: one strong primary ===== */
.btn { border: 0 !important; box-shadow: none !important; }
.btn-accent, .post-btn, .new-posts-pill button { background: var(--accent-fill) !important; color: var(--on-accent) !important; }
.btn-accent:hover, .post-btn:hover { background: color-mix(in srgb, var(--accent-fill) 88%, #000) !important; filter: none; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); }
.btn-primary:hover:not([disabled]) { background: color-mix(in srgb, var(--accent-fill) 88%, #000); }
.btn-primary[disabled] { background: var(--surface-2); color: var(--text-3); opacity: 1; }
.btn-outline, .follow-btn:not(.following), .btn-sq { background: var(--surface-2) !important; color: var(--text) !important; }
.btn-outline:hover, .follow-btn:not(.following):hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--text)) !important; }
.follow-btn.following { background: transparent !important; color: var(--muted) !important; }
.icon-btn { color: var(--muted); }
.icon-btn:hover { color: var(--text); background: var(--hover); }
.icon-btn.accent, .show-more, .card .more-link, .reply-audience, .dm-compose .icon-btn { color: var(--accent-ink); }
.toast { background: var(--text) !important; color: var(--bg) !important; box-shadow: var(--shadow); animation: mn-up .22s var(--ease-in); }

/* ===== Shell ===== */
.sidenav { border-right: 0; }
.wordmark .wm-text { font: 700 22px/1 var(--font-ui); letter-spacing: -.03em; }
.nav-item > span { color: var(--muted); font-weight: 500; position: relative; }
.nav-item:hover > span { background: transparent; color: var(--text); }
.nav-item.active > span { color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }
.nav-item.active .ic svg { stroke-width: 2; }
.nav-create .nav-icon { background: transparent !important; color: inherit !important; }
.nav-create .nav-icon .ic svg { width: 24px; height: 24px; stroke-width: 1.75; }
.nav-item.active .nav-icon .avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
/* counts become a single dot: something is waiting, details live on the page */
.nav-item .badge, .nav-icon .badge, .fr-bell .badge, .m-top .badge { font-size: 0 !important; min-width: 8px !important; width: 8px !important; height: 8px !important; padding: 0 !important; top: -1px !important; right: -2px !important; border-radius: 50% !important; background: var(--accent) !important; box-shadow: 0 0 0 2px var(--bg); }
.post-btn { box-shadow: none; }
.account-switch:hover { background: var(--hover); }
.sidebar .card, .card { background: transparent; border: 0; border-radius: 0; }
.sidebar .card { padding-left: 4px; padding-right: 4px; margin-bottom: 24px; }
.card .row:hover, .trend:hover, .user-row:hover, .dm-item:hover, .set-item:hover, .notif:hover { background: var(--row-hover); }
.searchbox { background: var(--surface-1); border: 0 !important; }
.searchbox:focus-within { background: var(--bg); box-shadow: 0 0 0 2px var(--accent); }
.topbar { border-bottom: 0 !important; }
.sample-tag { background: none !important; border: 0 !important; padding: 0 !important; color: var(--text-3) !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 12px !important; }
.sample-tag::before { content: "· "; }
.live-pill, .rise-pill, .quiet-pill { background: none !important; color: var(--muted) !important; padding: 0 !important; border: 0 !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
.live-pill { color: var(--accent-ink) !important; }
.live-pill::before { background: var(--accent) !important; }
.live-dot.on { background: var(--accent); }

/* Tabs: text tabs with a purple current-tab indicator */
.tab { color: var(--muted); }
.tab:hover { background: transparent; color: var(--text); }
.tab.active { color: var(--text); }
.tab.active > span::after { background: var(--accent) !important; height: 3px; border-radius: 3px; }
.seg-tabs { gap: 20px; padding: 0 16px 8px; }
.seg-tabs .tab, .chip-tab.tab { height: 36px; padding: 0 !important; border-radius: 0; background: transparent !important; color: var(--muted); }
.seg-tabs .tab.active, .chip-tab.tab.active { background: transparent !important; color: var(--text) !important; }
.seg-tabs .tab.active > span::after, .chip-tab.tab.active > span::after { display: block !important; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: var(--accent); }
.seg-tabs .tab > span, .chip-tab.tab > span { position: relative; height: 100%; display: inline-flex; align-items: center; }
.chip { background: transparent; border: 0 !important; color: var(--muted); }
.chip:hover { color: var(--text); background: var(--hover); }
.chip.on, .chip[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }

/* Directional motion: content enters from the side you navigated toward */
@keyframes mn-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@keyframes mn-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mn-sheet { from { transform: translateY(100%); } to { transform: none; } }
#main > * { animation: mn-in .18s var(--ease-in) both; }
.modal { animation: mn-up .25s var(--ease-in) both; }
.modal.sheet { animation: mn-sheet .28s var(--ease-in) both; }
html[data-rm] #main > *, html[data-rm] .modal, html[data-rm] .toast { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #main > *, .modal, .toast, .gp { animation: none !important; } }

/* ===== Stream ===== */
.feed-items { gap: 0; }
article.post, article.post:hover { background: transparent; border: 0; border-radius: 0; padding: 18px 16px 6px; }
article.post:hover { background: var(--row-hover); }
.post-media, .post-video, .link-card, .quote { border: 0 !important; border-radius: var(--r-card); }
.link-card, .quote { background: var(--surface-1); }
.post-actions .act { color: var(--text-3); }
.post-actions .act:hover { color: var(--accent-ink); }
.post-actions .act .cnt { font-size: var(--fs-small); }
.act.like.on, .act.like.on .ic, .act.rt.on, .act.gr.on, .act.bm.on { color: var(--accent-ink) !important; }
.act.like.on .ic svg { fill: currentColor; }
.composer { background: transparent; border: 0; margin: 4px 4px 8px; padding: 12px; }
.c-tools .icon-btn { color: var(--text-3); }
.c-tools .icon-btn:hover:not([disabled]) { color: var(--accent-ink); }
.c-tools [data-c=sens][disabled] { display: none; }
.composer.collapsed:not(:focus-within) .c-toolbar { display: none; }
.ctx-note { background: var(--surface-1); border: 0 !important; }
.caught-up { border: 0 !important; color: var(--muted); }
.new-posts-pill button { box-shadow: var(--shadow); }
.detail .stamp, .detail .stats, .detail .post-actions, .reply-row { border-color: transparent !important; }
.detail { border: 0 !important; background: transparent !important; }
.thread-line, .post .thread-line { background: var(--border) !important; }

/* Avatars: monochrome initials; colour comes only from photos */
.avatar { background: var(--surface-2) !important; color: var(--muted) !important; }
.avatar:has(img) { background: transparent !important; }

/* Story tray: purple frame = new, neutral = seen */
.story-tray { border: 0 !important; }
.ring.unseen, .p-av.ring.unseen { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.ring.seen { box-shadow: inset 0 0 0 1px var(--border-strong) !important; }
.st-add { background: var(--accent-fill) !important; color: var(--on-accent) !important; box-shadow: 0 0 0 2px var(--bg) !important; }
.st-arrow { background: var(--bg) !important; border: 0 !important; box-shadow: var(--shadow); }

/* ===== Discover ===== */
.now-card { background: var(--surface-1) !important; border: 0 !important; }
.now-card.lead::after { background: linear-gradient(transparent 40%, rgba(0,0,0,.72)) !important; } /* legibility scrim over photos only */
.trend-cards .trend { background: transparent !important; border: 0 !important; }
.pgrid .tile, .tile { border-radius: 4px; }

/* ===== Profile ===== */
.fr-cover { display: none; }
.fr-ph { padding-top: 24px !important; }
.fr-ph .profile-top .p-av, .fr-ph .profile-top { margin-top: 0 !important; }
.fr-ph .profile-name { font: 650 var(--fs-title)/28px var(--font-ui) !important; letter-spacing: -.015em; }
.fr-ph .profile-counts a { background: none !important; }
.fr-ph .profile-actions .btn { height: 36px; }
.p-tabs { border-bottom: 0 !important; }
.hl-cover { box-shadow: inset 0 0 0 1px var(--border) !important; }

/* ===== Messages ===== */
.dm-list, .dm-thread, .set-nav, .set-main, .dm-profile { border-color: transparent !important; }
.dm-item.active { background: var(--accent-soft) !important; }
.dm-item.active .name, .dm-item.active b { color: var(--text); }
.mine .msg { background: var(--accent-fill); color: var(--on-accent); }
.msg { background: var(--surface-1); border: 0 !important; }
.dm-compose { border-top: 0 !important; }
.dm-compose .box { background: var(--surface-1); border: 0 !important; }
.dm-compose .box:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.dm-req-banner, .dm-notes { border: 0 !important; }

/* ===== Activity ===== */
.notif { border: 0 !important; }
.notif.unread::before { left: 6px; top: 22px; bottom: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent) !important; }
.notif .n-icon, .n-icon.follow, .n-icon.story, .n-icon.tag, .n-icon.gif { background: transparent !important; color: var(--text-3) !important; }
.notif.unread .n-icon { color: var(--accent-ink) !important; }

/* ===== Settings ===== */
.set-item.active { background: var(--accent-soft) !important; color: var(--accent-ink); }
.set-item.active .ic { color: var(--accent-ink); }
.set-section, .set-group, .form-group { background: transparent !important; border: 0 !important; }
.theme-opt { border: 0 !important; box-shadow: inset 0 0 0 1px var(--border) !important; }
.theme-opt.on { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.swatch.on > span { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent) !important; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--accent-fill); }
.toggle.on, .switch.on, .checkbox.on { background: var(--accent-fill) !important; border-color: var(--accent-fill) !important; }
.field input, .field textarea, .field select, input.input, select.input, textarea.input { border: 0 !important; background: var(--surface-1) !important; }
.field:focus-within { box-shadow: none; }
.field:focus-within input, .field:focus-within textarea, .field:focus-within select { box-shadow: 0 0 0 2px var(--accent) !important; }
.field:focus-within label, .field:focus-within .lbl { color: var(--accent-ink); }

/* ===== Modals and sheets ===== */
.modal { border: 0 !important; }
.modal-head { border-bottom: 0 !important; }
.popover { border: 0 !important; box-shadow: var(--shadow) !important; animation: mn-up .16s var(--ease-in) both; }
html[data-rm] .popover { animation: none; }

/* ===== Create: steps + one primary ===== */
.steps { display: flex; gap: 8px; list-style: none; margin: 0 16px 20px; padding: 0; font-size: var(--fs-small); color: var(--text-3); }
.modal .steps { margin: 0 16px 12px; }
.steps li { display: inline-flex; align-items: center; gap: 6px; }
.steps li + li::before { content: ""; width: 20px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.steps li span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--muted); }
.steps li.on { color: var(--text); font-weight: 600; }
.steps li.on span { background: var(--accent-fill); color: var(--on-accent); }
.steps li.done span { background: var(--accent-soft); color: var(--accent-ink); }
.create-wrap { padding: 8px 0 32px; max-width: 520px; }
.create-lead { margin: 0 16px 28px; height: 52px; padding: 0 24px; font-size: 16px; gap: 10px; display: inline-flex; align-items: center; }
.mode-list { display: flex; flex-direction: column; margin: 0 4px; }
.mode-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; text-align: left; padding: 14px 12px; border-radius: 12px; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; }
.mode-row:hover { background: var(--row-hover); }
.mode-row .mode-t { font-weight: 600; }
.mode-row .mode-d { grid-row: 2; color: var(--muted); font-size: var(--fs-small); }
.mode-row .ic { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--text-3); }
.mode-row:hover .ic { color: var(--accent-ink); transform: translateX(2px); transition: transform .15s var(--ease); }
.mode-row.is-soon { opacity: .55; }
.create-foot { margin: 24px 16px 0; font-size: var(--fs-small); }
.create-pop .soon, .create-sheet .soon { background: none !important; color: var(--text-3) !important; }

/* ===== Watch ===== */
.vrail .icon-btn, .vrail button { background: transparent !important; }
.v-prog-fill { background: var(--accent) !important; }

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .m-top { border-bottom: 0 !important; }
  .m-bar { border-top: 0 !important; }
  .m-bar .nav-item > span { color: var(--muted); }
  .m-bar .nav-item.active > span { color: var(--accent-ink); background: none !important; }
  .m-bar .nav-item.active > span::before { content: ""; position: absolute; top: -6px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 3px; background: var(--accent); }
  .m-bar .nav-create .nav-icon { background: var(--accent-fill) !important; color: var(--on-accent) !important; }
  article.post { padding: 16px 12px 4px; }
  .create-lead { width: calc(100% - 32px); justify-content: center; }
}

/* ===================================================================
   GIFs (DESIGN.md §18)
   =================================================================== */
.gif-btn { font: 700 11px/1 var(--font-ui) !important; letter-spacing: .04em; width: auto !important; min-width: 34px; padding: 0 6px !important; }
.gif-btn::before { content: none; }
figure.gif { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: var(--surface-2); max-width: 100%; }
figure.gif img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gif-badge { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; background: rgba(14,14,17,.66); color: #fff; font: 700 10px/1 var(--font-ui); letter-spacing: .06em; cursor: pointer; }
figure.gif:not(.playing) .gif-badge { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); height: 40px; padding: 0 14px 0 10px; font-size: 11px; background: rgba(14,14,17,.72); }
.gif-badge .ic svg { width: 16px; height: 16px; fill: currentColor; }
.gif-badge:focus-visible { outline: 2px solid var(--accent); }
.post-gif { margin-top: 10px; max-width: 380px; }
.post-gif figure.gif { max-height: 420px; }
.c-gif { position: relative; max-width: 300px; margin-top: 8px; }
.c-gif .icon-btn { position: absolute; top: 6px; right: 6px; background: rgba(14,14,17,.7); color: #fff; }

/* Reaction strip */
.gif-strip:empty { display: none; }
.gif-strip { margin: 10px 0 2px; }
.gs-btn { display: inline-flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; border: 0; border-radius: 999px; background: var(--surface-1); color: var(--muted); font: 500 var(--fs-small)/18px var(--font-ui); cursor: pointer; }
.gs-btn:hover { color: var(--text); background: var(--surface-2); }
.gs-stack { display: inline-flex; }
.gs-stack img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 2px var(--surface-1); background: var(--surface-2); }
.gs-stack img + img { margin-left: -9px; }
.act.gr .ic svg { width: 18px; height: 18px; }

/* Who reacted */
.gr-list { padding: 4px 8px 16px; max-height: 70vh; overflow: auto; }
.gr-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.gr-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--text); }
.gr-name { display: flex; flex-direction: column; min-width: 0; color: var(--text); }
.gr-name:hover b { text-decoration: underline; }
.gr-user .muted { font-size: var(--fs-small); }
.gr-gif { width: 72px; flex: none; border-radius: 10px; }
.gr-gif .gif-badge { display: none; }

/* Picker */
.gp-layer { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.gp-layer .gp { pointer-events: auto; }
.gp { position: fixed; display: flex; flex-direction: column; background: var(--bg-elev); color: var(--text); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.is-pop .gp { animation: gp-down .2s var(--ease-in) both; }
.is-pop .gp[data-from="below"] { animation-name: gp-up; }
@keyframes gp-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes gp-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.is-sheet { pointer-events: auto; }
.is-sheet .gp-scrim { position: absolute; inset: 0; background: var(--overlay); animation: fr-fade .2s both; }
.is-sheet .gp { left: 0; right: 0; bottom: 0; height: 82vh; border-radius: 16px 16px 0 0; animation: mn-sheet .28s var(--ease-in) both; padding-bottom: env(safe-area-inset-bottom); }
.gp-layer.out .gp { opacity: 0; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out); }
.gp-layer.is-sheet.out .gp { transform: translateY(40%); }
html[data-rm] .gp, html[data-rm] .gp-scrim { animation: none !important; transition: none !important; }
.gp .sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 0; flex: none; }
.gp-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 4px 16px; }
.gp-title { margin: 0; font: 600 15px/20px var(--font-ui); }
.gp-search { display: flex; align-items: center; gap: 8px; margin: 6px 12px 8px; padding: 0 12px; height: 40px; border-radius: 999px; background: var(--surface-1); color: var(--text-3); }
.gp-search:focus-within { box-shadow: 0 0 0 2px var(--accent); background: var(--bg); }
.gp-search .ic svg { width: 18px; height: 18px; }
.gp-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 15px; }
.gp-search input::-webkit-search-cancel-button { filter: grayscale(1); }
.gp-chips { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px 8px; scrollbar-width: none; flex: none; }
.gp-chips::-webkit-scrollbar { display: none; }
.gp-chips .chip { flex: none; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 500; border-radius: 999px; cursor: pointer; text-transform: capitalize; }
.gp-body { flex: 1; overflow-y: auto; padding: 0 12px 12px; overscroll-behavior: contain; }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center; }
.is-sheet .gp-grid { grid-template-columns: repeat(2, 1fr); }
.gp-cell { position: relative; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.gp-tile { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 10px; }
.gp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.gp-tile:hover img { filter: brightness(1.06); }
.gp-fav { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(14,14,17,.6); color: #fff; opacity: 0; cursor: pointer; transition: opacity .12s; }
.gp-fav .ic svg { width: 15px; height: 15px; }
.gp-cell:hover .gp-fav, .gp-cell:focus-within .gp-fav, .gp-fav.on { opacity: 1; }
.gp-fav.on { background: var(--accent-fill); color: var(--on-accent); }
.gp-fav.on .ic svg { fill: currentColor; }
@media (hover: none) { .gp-fav { opacity: .85; } }
.gp-skel { animation: gp-pulse 1.2s ease-in-out infinite; }
@keyframes gp-pulse { 50% { opacity: .55; } }
html[data-rm] .gp-skel { animation: none; }
@media (prefers-reduced-motion: reduce) { .gp-skel { animation: none; } }
.gp-state:empty { display: none; }
.gp-state { text-align: center; padding: 28px 16px; color: var(--muted); font-size: 14px; }
.gp-state p { margin: 0 0 4px; }
.gp-empty-t { color: var(--text); font-weight: 600; font-size: 15px; }
.gp-state .btn { margin-top: 12px; }
.gp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px 10px; font-size: 12px; color: var(--text-3); flex: none; }
.gp-foot .link { background: none; border: 0; color: var(--accent-ink); font: 600 13px var(--font-ui); cursor: pointer; padding: 4px 0; }

/* DMs */
.msg.msg-gif { padding: 0 !important; background: transparent !important; overflow: hidden; max-width: 260px; }
.msg-gif figure.gif { width: 240px; border-radius: 16px; }
.msg-gif-text { padding: 6px 12px; }
.mine .msg.msg-gif .msg-gif-text { background: var(--accent-fill); color: var(--on-accent); border-radius: 14px; margin-top: 4px; }
.rx.rx-gif { padding: 0 !important; width: 30px; height: 30px; border-radius: 9px; overflow: hidden; border: 2px solid var(--bg) !important; background: var(--surface-2); cursor: pointer; }
.rx.rx-gif.mine { border-color: var(--accent) !important; }
.rx-gif .gif-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-gif-pick { font: 700 11px/1 var(--font-ui) !important; letter-spacing: .04em; padding: 0 10px !important; border-radius: 999px !important; color: var(--accent-ink) !important; }

/* Stories */
.sv-reply .gif-btn { color: #fff; background: rgba(255,255,255,.14); border-radius: 999px; height: 32px; margin-left: 6px; flex: none; }
.sv-quick { display: flex; flex-direction: column; gap: 8px; }
.sv-quick .sv-emoji { display: flex; gap: 4px; justify-content: space-around; }
.sv-gifbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.sv-gifbar:empty { display: none; }
.sv-gifbar button { flex: none; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.12); cursor: pointer; }
.sv-gifbar button:focus-visible { outline: 2px solid var(--accent); }
.sv-gifbar .gif-thumb { width: 100%; height: 100%; object-fit: cover; }

/* Activity */
.n-gif-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 6px; }
.n-gif { width: 72px; flex: none; border-radius: 10px; }
.n-gif .gif-badge { display: none; }
/* the inline composer shows its tools only once you start (one primary per screen) */
#main .composer:not(:focus-within):has(textarea:placeholder-shown):not(:has(.c-media-slot :is(img, video, figure))):not(:has(.c-poll-slot *)) .c-toolbar { display: none; }
.chips-row { gap: 20px !important; }
.note-bub { border: 0 !important; background: var(--surface-2) !important; }
.note-bub.liked { box-shadow: inset 0 0 0 1px var(--accent) !important; }
.now-card.lead .now-tag, .now-card .now-tag { font-family: var(--font-ui) !important; font-weight: 650 !important; letter-spacing: -.01em; }
.set-item.active { border: 0 !important; box-shadow: none !important; }
.poll-opt, .poll .opt, .poll-bar { border: 0 !important; }

/* Story footer — minimal: reshare collapses to an icon, quick bar sits above the footer */
.sv-foot .sv-btn[data-reshare] { flex: none; width: 40px; height: 40px; padding: 0; border-radius: 999px; font-size: 0; display: inline-grid; place-items: center; background: var(--accent-fill); color: #fff; }
.sv-foot .sv-btn[data-reshare] svg { width: 20px; height: 20px; }
.sv-quick { bottom: 72px; }

/* Post rows: two type sizes only — 15 content, 13 meta (avatars/media glyphs excluded) */
article.post .meta, article.post .meta *, article.post .pe, article.post .pe *, article.post .ctx-head, article.post .ctx-foot, article.post .ctx-foot *, article.post .sample-tag, article.post .act .n, article.post .gs-label, article.post .poll-meta { font-size: 13px !important; }

/* Profile: leave room for the note bubble that sits above the avatar */
.fr-ph { padding-top: 44px !important; }
.err-frame { display: none !important; }

/* ===== Design-review fixes 1–6 (Oct 30, 2026) ===== */
/* 1. Mobile overflow: the mn-in slide (translateX 12px) pushed pages to 402px on a 390px screen. */
@media (max-width: 767px) { html, body, #root, .layout, #main { overflow-x: clip; } }
/* 2. Overlay text: real scrims and fixed light text in every theme. */
.now-card.lead::after { background: linear-gradient(to top, rgba(14,14,17,.88) 0%, rgba(14,14,17,.55) 55%, rgba(14,14,17,.35) 100%) !important; }
.now-card.lead, .now-card.lead .now-tag, .now-card.lead .now-meta, .now-card.lead .now-desc, .now-card.lead small, .now-card.lead p, .now-card.lead span:not(.live-pill):not(.rise-pill) { color: #F4F3F7 !important; }
.v-info { background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 55%, transparent 100%) !important; color: #F4F3F7 !important; }
.v-info * { color: #F4F3F7; }
.vrail { filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)) !important; }
.vr-btn, .vr-cnt { font-size: 13px !important; font-weight: 600 !important; }
/* 3. Contrast: small text and action icons use --muted (≥4.5:1), not --text-3. */
.steps, .gp-foot, .sample-tag, .post-actions .act { color: var(--muted) !important; }
.steps li.on { color: var(--text) !important; }
/* 4. Tap targets. */
.post-actions .act { min-height: 36px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.st-add { width: 28px !important; height: 28px !important; }
.st-add::after { content: ""; position: absolute; inset: -8px; }
.st-arrow, .gp-fav { width: 32px !important; height: 32px !important; }
@media (pointer: coarse) {
  .post-actions .act { min-height: 44px; min-width: 44px; }
  .st-arrow, .gp-fav { width: 44px !important; height: 44px !important; }
}
@media (max-width: 767px) { .tabs .tab, .seg-tabs .tab, .chip-tab.tab, .p-tabs .tab { min-height: 44px; } }
/* 5. Profile icon tabs keep a text label for assistive tech (visually hidden, not display:none). */
.p-tabs .tab em { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; display: block !important; }
.p-tabs .tab { position: relative; }
/* 6. One purple primary per screen. */
.layout[data-page=create] .post-btn, .layout[data-page=profile] .post-btn, .layout[data-page=lists] .post-btn { background: var(--surface-2) !important; color: var(--text) !important; box-shadow: none !important; }
.chip-tab.tab.active { border-color: transparent !important; }
.dm-item.active { box-shadow: none !important; background: var(--surface-2) !important; }
/* Trust & copy additions */
.tab-desc { margin: 4px 16px 8px; color: var(--muted); font-size: var(--fs-small); line-height: 18px; }
.post-ctx.suggested { color: var(--muted); }
.post-ctx.suggested b { color: var(--text); font-weight: 600; }
.terms-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 13px; color: var(--muted); line-height: 18px; }
.terms-row input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.legal-doc { padding: 16px; line-height: 1.6; max-width: 680px; }
.legal-doc .draft-tag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 8px; margin-bottom: 8px; }
.rep-list { display: grid; gap: 4px; margin: 0; }
.rep-list label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 4px; border-radius: 10px; cursor: pointer; }
.rep-list label:hover { background: var(--surface-1); }
.rep-extra { display: grid; gap: 10px; }
.mod-q { padding: 0 16px 32px; }
.mod-item { padding: 14px 0; border-bottom: 1px solid var(--border); display: grid; gap: 6px; }
.mod-item .mod-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.mod-item .mod-cat { font-weight: 600; color: var(--text); }
.mod-item .mod-due { color: var(--accent-ink); font-weight: 600; }
.mod-item .mod-due.over { color: #E5484D; }
.mod-item blockquote { margin: 0; padding: 8px 12px; background: var(--surface-1); border-radius: 10px; font-size: 14px; }
.mod-item .mod-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.msg-report-btn { opacity: 0; }
.bubble-row:hover .msg-report-btn, .bubble-row:focus-within .msg-report-btn { opacity: 1; }
@media (hover: none) { .msg-report-btn { opacity: .8; } }

/* QA-007: Lists — one primary (New list), monochrome tiles, no section dividers */
#l-new { display: inline-flex; align-items: center; gap: 6px; }
#l-new .ic svg { width: 16px; height: 16px; }
.list-thumb { background: var(--surface-2) !important; color: var(--muted); }