/* Trump's Truths (truth.pp.tools). Tokens, reset, the top nav, the author
   credit, .btn and the browser surfaces come from base.css, the shared pp.tools
   theme; the rules behind the values are in the pp.tools THEME.md. Posts use
   Truth Social's pieces (avatar, name, red badge, handle, ReTruth line, action
   icons) packed tighter, so the feed can be skimmed. */

:root {
    --truth-badge: #ff4775; /* Truth Social's verified badge, kept as theirs */
}

html { scrollbar-gutter: stable; }
button, input, select { font: inherit; }
[hidden] { display: none !important; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
.btn-sm { padding: 6px 12px; font-size: 13px; line-height: 20px; }
.btn-block { width: 100%; }
.discord-mark { width: 16px; height: 16px; flex-shrink: 0; }

.sound-toggle {
    flex-shrink: 0;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.sound-toggle b { font-weight: 400; }
.sound-toggle:hover { color: var(--brand); background: var(--bg-card-hover); border-color: var(--brand-dim); }
.sound-toggle[aria-pressed="true"] { color: var(--brand-bright); background: var(--brand-glow); border-color: var(--border-brand-strong); }

.account { display: flex; align-items: center; gap: 8px; min-width: 0; }
.account form { margin: 0; }
.account-avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}
.account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }

/* ── Page frame ──────────────────────────────────────────── */
.page {
    width: min(1080px, calc(100% - 40px));
    margin: 0 auto;
    padding: calc(var(--nav-height) + 1.25rem) 0 56px;
}
.page-narrow { width: min(640px, calc(100% - 32px)); }

.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 6px; }
h1 { margin: 0; font-size: clamp(22px, 3vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }

.live-state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.live-state b { font-weight: 400; }
.live-state span { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 4px var(--border); }
.live-state.connected { color: var(--text-primary); }
.live-state.connected span { background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "results side";
    align-items: start;
    gap: 24px;
}
.results { grid-area: results; min-width: 0; }
.side {
    grid-area: side;
    position: sticky;
    top: calc(var(--nav-height) + 14px);
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.panel { padding: 14px 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.label { margin: 0; color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }

/* ── Search, pinned under the nav ────────────────────────── */
.search-sticky {
    position: sticky;
    top: var(--nav-height);
    z-index: 20;
    padding: 8px 0 8px;
    background: var(--bg-base);
}

.search-panel { padding: 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
/* The controls drop under the search box rather than squeeze it. */
.search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.search-field { position: relative; flex: 1 1 240px; min-width: 0; }
.search-field svg { position: absolute; top: 50%; left: 12px; width: 17px; height: 17px; color: var(--text-secondary); transform: translateY(-50%); pointer-events: none; }
.search-field input {
    width: 100%;
    padding: 8px 40px 8px 38px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 15px;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.search-field input::placeholder { color: var(--text-secondary); }
.search-field input:hover { border-color: var(--text-muted); }
.search-field input:focus { border-color: var(--brand-dim); box-shadow: 0 0 0 3px var(--brand-glow); }
.kbd {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 0 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    transform: translateY(-50%);
    pointer-events: none;
}
.search-field input:focus ~ .kbd, .search-field input:not(:placeholder-shown) ~ .kbd { display: none; }

.chip, .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: 36px;
    padding: 4px 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); transition: background var(--transition); }
.chip:hover, .filters-toggle:hover { color: var(--brand); background: var(--bg-card-hover); border-color: var(--brand-dim); }
.chip[aria-pressed="true"], .filters-toggle[aria-expanded="true"] { color: var(--brand-bright); background: var(--brand-glow); border-color: var(--border-brand-strong); }
.chip[aria-pressed="true"]::before { background: var(--brand); }
.filters-toggle svg { width: 15px; height: 15px; }
.filters-toggle b {
    min-width: 18px;
    padding: 0 5px;
    background: var(--brand-glow);
    color: var(--brand-bright);
    border: 1px solid var(--border-brand-strong);
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Recent / Relevant / Oldest: the tabs recipe from THEME.md, sized to the chips. */
.seg { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 3px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-pill); }
.seg button {
    min-height: 28px;
    padding: 2px 11px;
    background: transparent;
    color: var(--text-secondary);
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 13px;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.seg button:hover:not(:disabled) { color: var(--text-primary); }
.seg button[aria-checked="true"] { background: var(--bg-card-hover); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.seg button:disabled { opacity: 0.4; cursor: not-allowed; }

.filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.field { display: flex; align-items: center; gap: 6px; }
.field span { color: var(--text-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.search-hint { flex-basis: 100%; margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.9; }
.search-hint code { white-space: nowrap; }
.search-hint code, .tips code {
    padding: 0 5px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11.5px;
}

select, input[type="date"] {
    min-height: 32px;
    padding: 4px 8px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition);
}
select:hover, input[type="date"]:hover { border-color: var(--border-strong); }
select:focus, input[type="date"]:focus { border-color: var(--brand-dim); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; }
.tz select { min-height: 26px; padding: 2px 6px; font-size: 12px; }

.results-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 16px;
    margin: 8px 2px 0;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}
.results-heading p { margin: 0; }
.results-heading strong { color: var(--text-primary); font-weight: 600; }
.results-heading em { color: var(--brand-bright); font-style: normal; font-weight: 600; }

/* Floats just under the pinned search, wherever the feed is scrolled to. */
.new-pill {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    padding: 7px 18px;
    background: var(--brand-gradient);
    color: #fff;
    border: 0;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(187, 134, 252, 0.35);
    transform: translateX(-50%);
    transition: box-shadow var(--transition);
}
.new-pill:hover { box-shadow: 0 6px 28px rgba(187, 134, 252, 0.5); }

/* ── Side panels ─────────────────────────────────────────── */
.live-card p { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.live-card p:last-child { margin-bottom: 0; }
.live-card .live-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(242, 184, 75, 0.12); }
.dot.on { background: var(--green); box-shadow: 0 0 0 4px var(--green-dim); }
.live-card .btn-brand { padding: 9px 16px; font-weight: 600; }
.live-card .test-note { color: var(--gold); font-size: 12px; }
.live-card .fine { margin-top: 10px; font-size: 12px; }
.live-card .fine a { text-decoration: underline; text-decoration-color: rgba(187, 134, 252, 0.3); text-underline-offset: 2px; }
/* Premium is gold across pp.tools (THEME.md): a tinted pill. */
.badge-premium {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(242, 184, 75, 0.15);
    color: var(--gold);
    border: 1px solid rgba(242, 184, 75, 0.28);
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tz { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tile { min-width: 0; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tile .label { font-size: 10.5px; }
.tile strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tile small { display: block; color: var(--text-secondary); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-foot { margin: 10px 0 0; color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.stats-foot b { color: var(--text-primary); font-weight: 600; }

/* ── Feed ────────────────────────────────────────────────── */
/* One card per truth, with space between, so each post reads as its own. */
.feed { display: grid; gap: 10px; margin-top: 2px; transition: opacity var(--transition); }
.feed:empty { display: none; }
.feed[aria-busy="true"] { opacity: 0.55; }

.sentinel { min-height: 48px; padding: 16px 0; color: var(--text-secondary); font-size: 13px; text-align: center; }
.empty { padding: 40px 20px; color: var(--text-secondary); text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.feed .empty { margin: 0; }
.empty h1 { margin-bottom: 10px; color: var(--text-primary); }
.empty p { max-width: 52ch; margin: 0 auto; line-height: 1.6; }
.empty.standalone { margin-top: 40px; }
.empty.standalone .btn { margin-top: 22px; }

/* ── A truth ─────────────────────────────────────────────── */
.truth {
    padding: 12px 16px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition);
}
.truth:hover { border-color: var(--border-brand); }
.truth.is-new { animation: arrive 3.5s ease-out; }
@keyframes arrive {
    0%, 55% {
        border-color: var(--brand);
        box-shadow: 0 0 0 1px var(--brand), 0 0 18px var(--brand-glow);
        background: linear-gradient(var(--brand-glow), var(--brand-glow)), var(--bg-surface);
    }
}
.truth > * + *, .quote > * + * { margin-top: 8px; }

.retruthed { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12.5px; font-weight: 600; }
.retruthed svg { width: 15px; height: 15px; color: var(--brand); }
.truth > .retruthed + * { margin-top: 6px; }

.head { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.avatar { flex: none; width: 36px; height: 36px; margin-right: 5px; border-radius: 50%; overflow: hidden; background: var(--bg-elevated); }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.name { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--text-primary); font-weight: 600; }
.name:hover { color: var(--text-primary); }
.name span { overflow: hidden; text-overflow: ellipsis; }
.name svg { flex: none; width: 16px; height: 16px; color: var(--truth-badge); }
.head .acct { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--text-secondary); }
.head .sep, .head .when { flex: none; color: var(--text-secondary); }
.head .when:hover { color: var(--brand-bright); }
.quote .avatar { width: 24px; height: 24px; margin-right: 2px; }

.text { font-size: 15px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.text p { margin: 0 0 12px; }
.text p:last-child { margin-bottom: 0; }
.text a { text-decoration: underline; text-decoration-color: rgba(187, 134, 252, 0.3); text-underline-offset: 2px; }
/* Truth Social shortens long links: the protocol and tail are hidden, the middle shown. */
.text .invisible { display: inline-block; width: 0; height: 0; overflow: hidden; font-size: 0; }
.text .ellipsis::after { content: "\2026"; }
.text .mention, .text .hashtag { text-decoration: none; }
/* Long posts are folded to nine lines until "Show more". */
.text.clamp {
    max-height: 180px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.more { display: block; padding: 0; background: none; border: 0; color: var(--brand); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.truth > .text + .more { margin-top: 2px; }
.more:hover { color: var(--brand-bright); }

/* Search matches: a solid tint and outline, easy to spot while skimming. */
mark {
    padding: 0 2px;
    background: rgba(187, 134, 252, 0.34);
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(187, 134, 252, 0.55);
}

.media { display: grid; gap: 2px; overflow: hidden; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-md); }
.media > a { display: block; min-height: 0; height: 100%; cursor: zoom-in; }
.media img, .media video { display: block; width: 100%; background: var(--bg-base); }
.media.n1 img, .media.n1 video { height: auto; max-height: 380px; object-fit: contain; }
.media.n2, .media.n3, .media.n4 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.media.n3, .media.n4 { grid-template-rows: 1fr 1fr; }
.media.n3 > :first-child { grid-row: span 2; }
.media.n2 > *, .media.n3 > *, .media.n4 > * { min-height: 0; }
.media.n2 img, .media.n2 video, .media.n3 img, .media.n3 video, .media.n4 img, .media.n4 video { height: 100%; object-fit: cover; }

.failed {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    height: 100%;
    padding: 16px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
}
a.failed:hover { color: var(--brand-bright); }

.card {
    display: flex;
    overflow: hidden;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: border-color var(--transition), background var(--transition);
}
.card:hover { color: var(--text-primary); background: var(--bg-card-hover); border-color: var(--border-brand-strong); }
.card img { flex: none; width: 96px; min-height: 72px; object-fit: cover; background: var(--bg-base); }
.card > div { min-width: 0; padding: 8px 12px; align-self: center; }
.card .provider { color: var(--text-secondary); font-size: 12px; }
.card .title, .card .desc { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }
.card .title { font-weight: 600; }
.card .desc { color: var(--text-secondary); font-size: 12.5px; }

.poll { display: grid; gap: 6px; }
.poll .option { padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; }

/* A quoted post: labelled, inset darker than the truth around it, inside the
   resting brand outline, so it can't be mistaken for a truth of its own. */
.quote {
    padding: 8px 12px 10px;
    background: var(--bg-base);
    border: 1px solid var(--border-brand);
    border-radius: var(--radius-sm);
}
.quote-label { color: var(--brand); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.quote > .quote-label + * { margin-top: 4px; }
.quote .text { font-size: 14px; }
.quote .media, .quote .card { border-radius: var(--radius-xs); }

/* Open on Truth Social and the copy buttons on the left, the exact time on the right. */
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; margin-left: -10px; }
.act-group { display: flex; align-items: center; gap: 2px; color: var(--text-secondary); }
.open-ts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    margin-right: 2px;
    color: inherit;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.open-ts svg { width: 15px; height: 15px; }
.open-ts:hover { color: var(--brand); background: var(--brand-glow); }
.act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.act svg { width: 18px; height: 18px; }
.act:hover { color: var(--brand); background: var(--brand-glow); }
.act.done { color: var(--green); background: var(--green-dim); }
.stamp { color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stamp:hover { color: var(--brand-bright); }
.when .ago { margin-left: 4px; font-size: 11.5px; opacity: 0.55; }
.when .ago:empty { display: none; }

/* Where exact matches end and near-spelling matches start. */
.near-divider { padding: 6px 4px 0; color: var(--text-secondary); font-size: 12.5px; }
.near-divider em { color: var(--brand-bright); font-style: normal; font-weight: 600; }

.single .truth { padding: 16px 18px 6px; }
.single .text { font-size: 16px; }
.single-foot { margin: 16px 0 0; text-align: center; font-size: 14px; }

/* ── Lightbox and toast ──────────────────────────────────── */
.lightbox { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; background: transparent; border: 0; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(7, 7, 14, 0.92); }
.lightbox img { max-width: 94vw; max-height: 84vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-close {
    position: fixed;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.lightbox-close:hover { color: var(--brand); background: var(--bg-card-hover); border-color: var(--brand-dim); }
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-open { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 600; }

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 200;
    max-width: calc(100% - 32px);
    padding: 9px 16px;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    transform: translateX(-50%);
}

.site-note { margin-top: 4px; font-size: 12px; }

/* ── Smaller screens ─────────────────────────────────────── */
@media (max-width: 960px) {
    .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "results"; gap: 4px; }
    .side { position: static; grid-template-columns: 1fr 1fr; margin-top: 6px; }
}

@media (max-width: 640px) {
    .nav-hint, .account-name { display: none; }
    .sound-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; font-size: 0; }
    .sound-toggle span { font-size: 18px; line-height: 1; }
    .page { width: calc(100% - 24px); padding-top: calc(var(--nav-height) + 0.9rem); }
    .side { grid-template-columns: minmax(0, 1fr); gap: 8px; }

    .live-card { padding: 10px 12px; }
    .live-card p { margin-bottom: 8px; }
    .live-card .live-line { font-size: 14px; }
    .stats-card { padding: 10px 12px; }
    .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .tile { padding: 6px 8px; }
    .tile .label { font-size: 9.5px; letter-spacing: 0.04em; }
    .tile strong { font-size: 17px; }
    .tile small, .stats-foot { display: none; }

    /* Pinning it would cost a quarter of a phone screen. */
    .search-sticky { position: static; padding-top: 4px; }
    .search-row { flex-wrap: wrap; }
    .search-field { flex-basis: 100%; }
    /* iOS zooms into any field whose text is smaller than 16px. */
    .search-field input, select, input[type="date"] { font-size: 16px; }
    .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .field { flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
    .field select, .field input { width: 100%; min-width: 0; }
    .search-hint { grid-column: 1 / -1; }
    .new-pill { position: fixed; top: calc(var(--nav-height) + 10px); z-index: 30; }

    /* The name matters more than the handle at this width; signed in, the
       heading already says realtime. */
    .head .acct, .live-card.is-on { display: none; }
    .truth { padding: 10px 12px 2px; }
    .quote { padding: 8px 10px 10px; }
    .card img { width: 72px; }
    .media.n1 img, .media.n1 video { max-height: 320px; }
    .stamp { order: -1; flex-basis: 100%; margin: 2px 0 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .truth.is-new { animation-timing-function: step-end; }
}