/* Frame · fix round 2 (design-reverify.md, qa-baseline.md). Loaded last, after motion.css.
   Every rule names the finding it closes. */

/* ===== P1 #1  768–1279 px: no sideways scroll. Columns flex, the rail is an 88 px icon rail (DESIGN.md §C) ===== */
.primary { width: auto !important; flex: 0 1 var(--col); min-width: 0; }
.layout.wide .primary { width: auto !important; flex: 0 1 var(--col-wide); min-width: 0; }
@media (min-width: 768px) and (max-width: 1279px) {
  :root { --rail: 88px; }
  .sidenav { width: 88px !important; flex: 0 0 88px; }
  .sidenav .wordmark .wm-text { display: none !important; }
  .sidenav .wordmark { width: 48px; padding: 0; justify-content: center; }
  .sidenav .post-btn { width: 52px !important; height: 52px !important; min-width: 52px; padding: 0 !important; border-radius: 50% !important; }
  .sidenav .post-btn .lbl { display: none !important; }
  .layout { max-width: 100vw; }
  html, body { overflow-x: hidden; }
}

/* ===== P1 #3  focus never lands under the sticky bars (WCAG 2.4.11) ===== */
html { scroll-padding-top: 124px; }
html[data-page=profile] { scroll-padding-top: 180px; }
@media (max-width: 767px) {
  html { scroll-padding-top: 120px; scroll-padding-bottom: 80px; }
  html[data-page=profile] { scroll-padding-top: 176px; }
}

/* ===== P1 #4  error / offline block: 20/700 title, muted line, Try again is the one purple button ===== */
.err-block { padding: 40px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.err-block.is-page { padding-top: 72px; }
.err-block .err-title { margin: 0; font: 700 20px/24px var(--font-sys, system-ui, sans-serif); color: var(--text); }
.err-block .err-body { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.rail-err { padding: 8px 16px 16px; margin: 0; font-size: 13px; color: var(--muted); }

/* ===== Decision (a)  one purple fill per screen ===== */
.layout[data-page=error] .post-btn, .layout[data-page=notfound] .post-btn { background: var(--surface-2) !important; color: var(--text) !important; box-shadow: none !important; }
.layout[data-page=create] .m-bar .nav-create .nav-icon { background: var(--text) !important; color: var(--bg) !important; }

/* ===== Decision (c)  no blur behind modals; plain overlay + hairline border ===== */
.modal-back { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(0,0,0,.6) !important; }
[data-theme="light"] .modal-back { background: rgba(15,14,20,.4) !important; }
.modal { border: 1px solid var(--divider); }
@media (prefers-reduced-transparency: reduce) {
  .topbar, .m-top, .m-bar, .dc-head, .chips-row, .p-tabs { background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ===== P2 purple leaks ===== */
.vr-btn.like.on .vr-ic { color: #fff !important; } .vr-btn.like.on svg { fill: currentColor; }
.set-item.active { color: var(--text) !important; font-weight: 700; background: var(--hover) !important; box-shadow: none !important; }
.set-item.active .ic { color: var(--text) !important; }
.pe-flag .ic svg { fill: currentColor; color: var(--muted); }

/* ===== P2 #6  visible focus on the inline composer ===== */
.composer:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
/* lower priority: the inline Home composer is a flat row in the timeline, not a rounded card */
.layout[data-page=home] #main .composer { border: 0 !important; border-bottom: 1px solid var(--divider) !important; border-radius: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none; }
.layout[data-page=home] #main .composer:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }

/* ===== P3 Dusk: its own divider (hairlines were 1.07:1 on surface-2) ===== */
[data-theme="dim"] { --divider: #332E3D; }

/* ===== QA-008  the mobile bottom bar is opaque everywhere except Watch ===== */
@media (max-width: 767px) {
  .layout:not([data-page=watch]) .m-bar { background: var(--bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* ===== QA-009  DM GIFs: the art fills its box exactly (no lighter strip above, no clipped bottom) ===== */
.msg-gif figure.gif { display: block; line-height: 0; }
.msg-gif figure.gif img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== shared helpers ===== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 8px; background: var(--bg); color: var(--text); border: 1px solid var(--divider); font-weight: 700; }
.skip-link:focus { top: 8px; }

/* ===== one purple per screen: Join is a secondary action, styled like Follow (hardening-checks now counts small fills too) ===== */
[data-join].btn-primary { background: var(--text) !important; color: var(--bg) !important; border: 0 !important; }

/* ===== Phase 2 policy UI ===== */
.held-wrap { border-bottom: 1px solid var(--divider); }
.held-card { padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--surface-1); }
.bubble-row .held-card { border-radius: 12px; max-width: 320px; }
.held-title { font-weight: 700; display: flex; gap: 8px; align-items: center; } .held-title .ic { width: 18px; height: 18px; color: var(--muted); }
.held-card p { margin: 0 0 4px; font-size: 14px; }
.n-icon.report .ic { color: var(--muted); }
.av-deleted { background: var(--surface-2) !important; color: var(--muted) !important; }
.dm-deleted-note { padding: 14px 16px; border-top: 1px solid var(--divider); color: var(--muted); font-size: 14px; text-align: center; }
.age-hint { margin: -4px 0 12px; }

/* ---------- Connections (Phase 3): neutral text badges, no platform colours or logos ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.src-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--divider); border-radius: var(--r-btn); font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg); white-space: nowrap; letter-spacing: 0; flex: 0 0 auto; }
.ext-open { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--divider); width: fit-content; }
.ext-open:hover { border-bottom-color: var(--text); }
.ext-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.demo-banner { display: flex; gap: 10px; align-items: flex-start; margin: 12px 16px; padding: 10px 12px; border: 1px dashed var(--border-strong, var(--divider)); border-radius: var(--r-box); font-size: 13px; line-height: 18px; color: var(--text); background: var(--surface-1); }
.demo-banner .ic svg { width: 16px; height: 16px; } .demo-chip { margin: 4px 16px; font-size: 12px; color: var(--muted); }
.ext-state { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 8px 16px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--r-box); font-size: 13px; line-height: 18px; background: var(--bg); }
.ext-state > span:not(.src-badge) { flex: 1 1 200px; } .ext-state .btn-sm { height: 30px; }
.avatar.ext-av { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-weight: 700; border: 1px solid var(--divider); }
.ext-notif .avs { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ext-notif .n-quote { margin: 4px 0 6px; font-size: 14px; }
.conn-list { display: grid; gap: 12px; padding: 8px 16px 16px; }
.conn-card { border: 1px solid var(--divider); border-radius: var(--r-box); padding: 16px; display: grid; gap: 10px; }
.conn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .conn-head h3 { font-size: 17px; margin: 0; } .conn-name { display: grid; gap: 2px; }
.conn-scopes summary { cursor: pointer; font-weight: 600; font-size: 14px; } .conn-scopes ul { margin: 8px 0; padding-left: 20px; font-size: 14px; line-height: 20px; }
.conn-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.conn-status .st { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; } .conn-status .st .ic svg { width: 16px; height: 16px; }
.conn-status .st.warn { color: var(--text); font-weight: 600; } .conn-status .st.ok { color: var(--muted); }
.conn-toggles { border-top: 1px solid var(--divider); } .conn-toggles .toggle-row { padding-left: 0; padding-right: 0; }
.conn-spend { display: flex; gap: 6px; align-items: center; } .conn-errs { margin: 0; padding-left: 18px; }
.conn-dev { display: flex; gap: 8px; align-items: center; border-top: 1px dashed var(--divider); padding-top: 10px; } .conn-dev select { height: 32px; }
.btn-danger-text { color: var(--danger); }
.dm-ext-head { padding: 14px 16px 6px; font-size: 13px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--divider); }
.dm-ext-note { padding: 8px 16px 16px; margin: 0; } .ro-tag { font-size: 12px; }
.ext-ro { display: grid; gap: 8px; } .ext-win { display: flex; gap: 6px; align-items: center; padding: 6px 4px 0; }
.ext-owner-note { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--divider); }
.ext-owner-note > span:nth-child(2) { flex: 1 1 200px; }
.ext-post { padding: 14px 16px; border-bottom: 1px solid var(--divider); display: grid; gap: 8px; }
.ext-post-head { display: flex; gap: 10px; align-items: center; } .ext-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ext-text { font-size: 15px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ext-media { display: grid; gap: 4px; border-radius: var(--r-media, 12px); overflow: hidden; } .ext-media.n2, .ext-media.n4 { grid-template-columns: 1fr 1fr; }
.ext-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); }
.ext-post-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.ext-explore { padding-bottom: 4px; border-bottom: 1px solid var(--divider); }
.ext-rail { padding: 8px 0; } .ext-rail-head { display: flex; gap: 10px; align-items: baseline; padding: 0 16px 8px; flex-wrap: wrap; } .ext-rail-head h2 { font-size: 17px; margin: 0; }
.ext-rail-row { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ext-post.compact { flex: 0 0 260px; border: 1px solid var(--divider); border-radius: var(--r-box); scroll-snap-align: start; } .ext-post.compact .ext-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ext-tiles { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 16px 12px; }
.ins-sec { padding: 16px; border-bottom: 1px solid var(--divider); display: grid; gap: 12px; }
.ins-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ins-head h2 { font-size: 19px; margin: 0; }
.ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ins-tile { border: 1px solid var(--divider); border-radius: var(--r-box); padding: 12px; } .ins-val { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-sub { font-size: 14px; margin: 0; } .ins-top { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.ins-top li > * { margin-right: 10px; } .ins-limits { margin: 0; padding-left: 18px; }