/* ══════════════════════════════════════════════════════════════════════════════
   Elakis - Design System v4
   Loaded last: redefines the tokens from style.css/v2.css and restyles the shell.

   Principles
   · Warm paper in light, deep ink in dark - never pure #fff/#000.
   · Colour is meaning. The only saturated things on screen are availability
     rings and post-type accents. Everything else is greyscale.
   · Motion is spring-based and short (160-320ms). It confirms, never entertains.
   · Every interactive target is ≥44px on touch.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 1. TOKENS ───── */

:root {
    /* Surfaces - warm paper */
    --bg:            #FAFAF7;
    --bg-2:          #F2F1EB;
    --surface:       #FFFFFF;
    --surface-2:     #F6F5F0;
    --surface-3:     #EFEDE6;

    /* Ink */
    --text:          #17161C;
    --text-2:        #56545F;
    --text-3:        #8F8C9B;

    --border:        #E7E4DC;
    --border-2:      #D8D4C9;
    --border-color:  #E7E4DC;

    --accent:        #17161C;
    --accent-fg:     #FDFCF8;

    /* Brand - used sparingly: focus rings, active nav, gradients */
    --brand:         #5B4BE0;
    --brand-soft:    rgba(91, 75, 224, .10);

    /* Availability - the only always-saturated colours in the product */
    --av-green:      #21B573;
    --av-blue:       #3B8FF3;
    --av-yellow:     #E9A317;
    --av-red:        #E5484D;

    /* Post-type accents (kept from v2, retuned) */
    --paper:         #6B5CA5;
    --update:        #2F7D5C;
    --conf:          #A5602F;
    --seek:          #2F6EA5;
    --like:          #E0245E;

    /* Glass */
    --glass:         rgba(255, 255, 255, .72);
    --glass-line:    rgba(0, 0, 0, .06);

    /* Elevation */
    --shadow-sm:     0 1px 2px rgba(24, 22, 30, .05), 0 1px 3px rgba(24, 22, 30, .04);
    --shadow:        0 2px 6px rgba(24, 22, 30, .05), 0 6px 18px rgba(24, 22, 30, .06);
    --shadow-md:     0 4px 12px rgba(24, 22, 30, .07), 0 14px 38px rgba(24, 22, 30, .10);
    --shadow-lg:     0 8px 24px rgba(24, 22, 30, .10), 0 28px 68px rgba(24, 22, 30, .14);

    /* Geometry */
    --r-xs:          8px;
    --r-sm:          12px;
    /* Was missing from the scale while css already referenced it (.ob-shot,
       the onboarding screenshot frame), so that element had been rendering
       with square corners - var() with no fallback resolves to nothing. */
    --r-md:          16px;
    --r:             18px;
    --r-lg:          24px;
    --r-xl:          30px;
    --r-pill:        999px;

    --nav-h:         62px;
    --header-h:      56px;
    --gutter:        16px;
    --col:           640px;

    /* Type */
    --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --serif:         'Newsreader', Georgia, serif;

    /* Motion */
    --spring:        cubic-bezier(.22, 1, .36, 1);
    --ease:          .18s cubic-bezier(.2, .8, .2, 1);
    --ease-out:      cubic-bezier(.2, .8, .2, 1);
}

/* Dark - declared twice so the OS preference and the manual toggle both win
   in the right direction. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:           #0B0B0E;
        --bg-2:         #121217;
        --surface:      #16161C;
        --surface-2:    #1D1D25;
        --surface-3:    #24242E;
        --text:         #F2F0EB;
        --text-2:       #A5A2B0;
        --text-3:       #6D6A79;
        --border:       #26262F;
        --border-2:     #34343F;
        --border-color: #26262F;
        --accent:       #F2F0EB;
        --accent-fg:    #0B0B0E;
        --brand:        #8B7BFF;
        --brand-soft:   rgba(139, 123, 255, .14);
        --av-green:     #35D08A;
        --av-blue:      #5AA9FF;
        --av-yellow:    #F5BC46;
        --av-red:       #FF5F63;
        --paper:        #A99AE0;
        --update:       #6FC39E;
        --conf:         #E0A274;
        --seek:         #7AB8E8;
        --like:         #FF4F7E;
        --glass:        rgba(22, 22, 28, .74);
        --glass-line:   rgba(255, 255, 255, .07);
        --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
        --shadow:       0 2px 8px rgba(0,0,0,.45);
        --shadow-md:    0 8px 28px rgba(0,0,0,.55);
        --shadow-lg:    0 16px 52px rgba(0,0,0,.65);
    }
}

:root[data-theme="dark"] {
    --bg:           #0B0B0E;
    --bg-2:         #121217;
    --surface:      #16161C;
    --surface-2:    #1D1D25;
    --surface-3:    #24242E;
    --text:         #F2F0EB;
    --text-2:       #A5A2B0;
    --text-3:       #6D6A79;
    --border:       #26262F;
    --border-2:     #34343F;
    --border-color: #26262F;
    --accent:       #F2F0EB;
    --accent-fg:    #0B0B0E;
    --brand:        #8B7BFF;
    --brand-soft:   rgba(139, 123, 255, .14);
    --av-green:     #35D08A;
    --av-blue:      #5AA9FF;
    --av-yellow:    #F5BC46;
    --av-red:       #FF5F63;
    --paper:        #A99AE0;
    --update:       #6FC39E;
    --conf:         #E0A274;
    --seek:         #7AB8E8;
    --like:         #FF4F7E;
    --glass:        rgba(22, 22, 28, .74);
    --glass-line:   rgba(255, 255, 255, .07);
    --shadow-sm:    0 1px 2px rgba(0,0,0,.4);
    --shadow:       0 2px 8px rgba(0,0,0,.45);
    --shadow-md:    0 8px 28px rgba(0,0,0,.55);
    --shadow-lg:    0 16px 52px rgba(0,0,0,.65);
}

/* ────────────────────────────────────────────────────────────── 2. BASE ───── */

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
}

#app-shell { height: 100dvh; }

::selection { background: var(--brand-soft); color: var(--text); }

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* Thin, unobtrusive scrollbars that still exist */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

.muted { color: var(--text-3); }
.center { text-align: center; }

/* Press feedback (wired globally in ui.js) */
.pressing { transform: scale(.965) !important; }
button, .pressable { transition: transform .12s var(--ease-out), background var(--ease), color var(--ease), border-color var(--ease), opacity var(--ease); }

/* ─────────────────────────────────────────────────── 3. REVEAL / MOTION ───── */

.will-reveal { opacity: 0; transform: translateY(10px); }
.will-reveal.revealed {
    opacity: 1; transform: none;
    transition: opacity .42s var(--ease-out) var(--reveal-delay, 0ms),
                transform .52s var(--spring)   var(--reveal-delay, 0ms);
}

@keyframes floatIn  { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes shimmer  { to { background-position: 200% 0; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes softPulse{ 0%,100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .will-reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────── 3b. ICON SYSTEM ───── */

/* Every icon is a 24-grid stroke mark that inherits colour and scales with the
   text beside it. One rule, no per-icon sizing. */
.ic {
    width: 1.08em; height: 1.08em;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -.17em;
    stroke: currentColor;
    fill: none;
}
.ic-lg { width: 1.3em; height: 1.3em; }

/* Any "icon + label" pair lines up the same way everywhere. */
.presence-line, .chip-activity, .dist-label, .glance-line,
.room-member-line, .user-row-sub, .ping-row-means, .convo-last {
    display: flex; align-items: center; gap: 7px; min-width: 0;
}
.presence-line > span, .chip-activity > span, .dist-label > span,
.glance-line > span, .room-member-line > span, .user-row-sub > span,
.ping-row-means > span, .convo-last > span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.presence-line .ic { font-size: 1.05em; }

.icon-round .ic, .quick-ping .ic, .ping-back .ic,
.btn-reject .ic, .icon-btn .ic { width: 17px; height: 17px; }
.chat-input-row button .ic, .comment-input-row button .ic { width: 16px; height: 16px; }
.toast-icon .ic { width: 17px; height: 17px; }

/* Small canvas: a heavier stroke keeps the mark legible at ~13px. */
.av-badge .ic { width: 1em; height: 1em; vertical-align: 0; stroke-width: 2.4; }

.links-badge .ic { width: 9px; height: 9px; stroke-width: 2.8; vertical-align: 0; }
.links-badge.small .ic { width: 8px; height: 8px; }

/* "Warmth" fills in when it's yours. */
.like-btn .ic { width: 16px; height: 16px; transition: transform .25s var(--spring); }
.like-btn.liked .ic { fill: currentColor; transform: scale(1.1); }
.d-save.saved .ic { fill: currentColor; }

.digest-done-btn { display: inline-flex; align-items: center; gap: 7px; }

/* ───────────────────────────────────────────────────────── 4. AVATARS ───── */

.av {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}
.av-inner {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface-2);
    display: grid; place-items: center;
    transition: box-shadow .3s var(--ease-out);
}
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.av-fallback {
    font-size: .92em; font-weight: 700; letter-spacing: -.02em;
    color: var(--text-3); line-height: 1;
}

.av-xs { width: 26px; height: 26px; font-size: 12px; }
.av-sm { width: 36px; height: 36px; font-size: 15px; }
.av-md { width: 44px; height: 44px; font-size: 18px; }
.av-lg { width: 58px; height: 58px; font-size: 23px; }
.av-xl { width: 96px; height: 96px; font-size: 38px; }

/* Availability ring - sits outside the image so it never crops a face. */
.av.ring .av-inner { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
.av.ring-green  { --ring: var(--av-green);  }
.av.ring-blue   { --ring: var(--av-blue);   }
.av.ring-yellow { --ring: var(--av-yellow); }
.av.ring-red    { --ring: var(--av-red);    }

/* Only "free" pulses - it's an invitation, so it should feel like one. */
.av.ring-green::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    animation: availPulse 2.6s var(--ease-out) infinite;
    pointer-events: none;
}
@keyframes availPulse {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--av-green) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--av-green) 0%,  transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--av-green) 0%,  transparent); }
}

.av-badge {
    position: absolute; right: -3px; bottom: -3px;
    width: 1.55em; height: 1.55em;
    display: grid; place-items: center;
    font-size: .72em; line-height: 1;
    background: var(--surface);
    border: 1.5px solid var(--bg);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}
.av-xs .av-badge { display: none; }

/* ───────────────────────────────────────────── 5. BUTTONS & CONTROLS ───── */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    font-family: var(--font);
    font-size: .875rem; font-weight: 600; letter-spacing: -.01em;
    padding: 11px 20px;
    min-height: 42px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}
.btn.sm { font-size: .78rem; padding: 8px 15px; min-height: 34px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-quiet { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-3); }

.btn-danger { background: var(--av-red); color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(1.06); }

.icon-round {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: .9rem;
    cursor: pointer;
    flex-shrink: 0;
}
.icon-round:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }

/* Existing button classes, retuned */
.btn-ghost {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 20px;
    border-radius: var(--r-pill);
    font-size: .84rem; font-weight: 600;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-2); }

.mini-btn {
    background: var(--surface-2);
    border: 1px solid transparent;
    color: var(--text-2);
    font-size: .74rem; font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-pill);
}
.mini-btn:hover { background: var(--surface-3); color: var(--text); }

.text-btn { color: var(--text-2); font-size: .82rem; font-weight: 500; min-height: 36px; padding: 8px 12px; }
.text-btn:hover { background: var(--surface-2); color: var(--text); }

/* On phones the header is tight and "Log out" is a tiny target for a rare,
   destructive-ish action. It already lives on the profile screen as "Sign out",
   so drop the duplicate rather than shrink everything around it. */
@media (max-width: 680px) { #logout-btn { display: none; } }

/* Inputs */
.input, .form-input, .form-textarea,
#search-input, #paper-search-input, #scholar-query-input, #status-input,
.comment-input-row input, .chat-input-row input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 12px 15px;
    font-size: .9rem;
    font-family: var(--font);
    color: var(--text);
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.input::placeholder, .form-input::placeholder, textarea::placeholder { color: var(--text-3); }
.input:focus, .form-input:focus, .form-textarea:focus,
#search-input:focus, #paper-search-input:focus, #status-input:focus,
.comment-input-row input:focus, .chat-input-row input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
}
#search-input, .chat-input-row input, .comment-input-row input { border-radius: var(--r-pill); }

.field-label {
    display: block;
    font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-3);
    margin: 18px 0 8px;
}
.field-label:first-child { margin-top: 0; }
.field-opt { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .7; }
.field-hint { font-size: .76rem; color: var(--text-3); line-height: 1.55; margin-top: 8px; }

/* Segmented control */
.explore-toggle {
    display: flex; gap: 4px;
    padding: 10px var(--gutter) 4px;
    max-width: var(--col); margin: 0 auto; width: 100%;
}
.seg-btn {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid transparent;
    color: var(--text-2);
    font-size: .8rem; font-weight: 600;
    padding: 10px 6px;
    min-height: 40px;
    border-radius: var(--r-pill);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
    background: var(--accent); color: var(--accent-fg);
    box-shadow: var(--shadow-sm);
}

/* ──────────────────────────────────────────────────── 6. SHELL / NAV ───── */

.app-screen { inset: 0; bottom: 0; background: var(--bg); }

.app-header {
    height: var(--header-h);
    padding: 0 var(--gutter);
    gap: 10px;
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--glass-line);
    position: relative; z-index: 20;
}
.app-header h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.03em; }
.brand-h { font-family: var(--serif); font-size: 1.35rem !important; font-weight: 600; letter-spacing: -.03em; }
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Bottom nav: a floating glass pill on mobile */
#bottom-nav {
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: var(--nav-h);
    padding: 0 4px;
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--glass-line);
    border-top: 1px solid var(--glass-line);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-md);
    z-index: 60;
}

.nav-btn {
    gap: 4px;
    font-size: .6rem; font-weight: 700;
    letter-spacing: .05em;
    color: var(--text-3);
    border-radius: var(--r-pill);
    position: relative;
}
.nav-btn .nav-icon { width: 21px; height: 21px; transition: transform .3s var(--spring); }
.nav-btn.active { color: var(--text); }
.nav-btn.active .nav-icon { transform: translateY(-1px) scale(1.06); }
.nav-btn.active::before {
    content: '';
    position: absolute; top: 6px; left: 50%;
    width: 34px; height: 34px; margin-left: -17px;
    border-radius: 50%;
    background: var(--brand-soft);
    animation: popIn .3s var(--spring);
}
.nav-btn .nav-icon, .nav-btn span { position: relative; z-index: 1; }

.notif-badge {
    position: absolute; top: -1px; right: -4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--av-red); color: #fff;
    font-size: .58rem; font-weight: 800; line-height: 16px;
    text-align: center;
    border-radius: var(--r-pill);
    border: 2px solid var(--bg);
    box-sizing: content-box;
    animation: popIn .28s var(--spring);
}

/* Scroll containers clear the floating nav */
.feed-scroll, .explore-results, .paper-results, .chats-list, .requests-list {
    padding-bottom: calc(var(--nav-h) + 34px + env(safe-area-inset-bottom, 0px));
}
#profile-screen { padding-bottom: 0; }
.profile-body { padding-bottom: calc(var(--nav-h) + 40px + env(safe-area-inset-bottom, 0px)) !important; }
.chat-thread { padding-bottom: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px)); }
.chat-input-row { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* FAB */
.fab {
    bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px));
    right: 18px;
    width: 56px; height: 56px;
    font-size: 0;
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: var(--shadow-md);
    z-index: 55;
}
.fab::before {
    content: '';
    width: 20px; height: 2px;
    background: currentColor; border-radius: 2px;
    box-shadow: 0 0 0 0 currentColor;
    position: absolute;
}
.fab::after {
    content: '';
    width: 2px; height: 20px;
    background: currentColor; border-radius: 2px;
    position: absolute;
    transition: transform .3s var(--spring);
}
.fab:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.fab:hover::after { transform: rotate(90deg); }

/* ──────────────────────────────────────────────────── 7. SECTION HEADS ───── */

.section-label {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: .66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-3);
    padding: 18px var(--gutter) 10px;
    max-width: var(--col); margin: 0 auto; width: 100%;
}
.section-note {
    text-transform: none; letter-spacing: 0; font-weight: 500;
    font-size: .68rem; font-style: italic; opacity: .8;
}

.feed-scroll { padding-top: 8px; }

/* ─────────────────────────────────────────────────── 8. PRESENCE CARD ───── */

.presence-wrap { max-width: var(--col); margin: 0 auto; width: 100%; padding: 12px var(--gutter) 4px; }

.presence-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 16px 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    animation: floatIn .5s var(--spring);
}
.presence-card::before {
    content: '';
    position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--av-green), var(--av-blue), var(--av-yellow), var(--av-red));
    opacity: .8;
}

.presence-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.presence-copy { flex: 1; min-width: 0; }
.presence-kicker {
    font-size: .62rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-3); margin-bottom: 3px;
}
.presence-line {
    font-size: 1rem; font-weight: 650; letter-spacing: -.02em;
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.presence-line.muted { font-weight: 500; }
.presence-note {
    font-family: var(--serif); font-style: italic;
    font-size: .88rem; color: var(--text-2);
    margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Availability picker */
.avail-row { display: flex; gap: 6px; margin-bottom: 12px; }
.avail-dot {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px;          /* the app's primary control - keep it thumb-sized */
    padding: 8px 6px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font);
    font-size: .72rem; font-weight: 650;
    color: var(--text-2);
    cursor: pointer;
}
.avail-dot .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--c); flex-shrink: 0;
    transition: box-shadow .25s var(--ease-out), transform .25s var(--spring);
}
.avail-dot.dot-green  { --c: var(--av-green);  }
.avail-dot.dot-blue   { --c: var(--av-blue);   }
.avail-dot.dot-yellow { --c: var(--av-yellow); }
.avail-dot.dot-red    { --c: var(--av-red);    }
.avail-dot:hover { background: var(--surface-3); color: var(--text); }
.avail-dot.on {
    background: color-mix(in srgb, var(--c) 12%, var(--surface));
    border-color: var(--c);
    color: var(--text);
}
.avail-dot.on .dot { transform: scale(1.15); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 26%, transparent); }
.avail-row.wide .avail-dot { flex-direction: column; gap: 7px; padding: 14px 6px; min-height: 76px; }
.avail-row.wide .dot { width: 12px; height: 12px; }
.avail-blurb {
    font-size: .8rem; color: var(--text-2); line-height: 1.5;
    font-family: var(--serif); font-style: italic;
    min-height: 2.4em;
}
.avail-label { white-space: nowrap; }
/* Never hide the labels: four unlabelled coloured dots are a guessing game.
   The compact row uses short labels (Free / Out / Busy / Focus) instead. */
@media (max-width: 400px) {
    .avail-dot { font-size: .68rem; padding: 8px 4px; gap: 5px; }
    .avail-row { gap: 4px; }
    .avail-row.wide .avail-label { font-size: .66rem; }
}

/* Activity chips */
.act-scroller {
    display: flex; gap: 7px;
    overflow-x: auto;
    padding: 2px 0 6px;
    margin: 0 -4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
}
.act-scroller::-webkit-scrollbar { display: none; }
.act-scroller > :first-child { margin-left: 4px; }
.act-scroller > :last-child  { margin-right: 24px; }

.act-grid { display: flex; flex-wrap: wrap; gap: 7px; }

.act-chip {
    display: inline-flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    padding: 9px 14px;
    min-height: 42px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font);
    font-size: .78rem; font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    scroll-snap-align: start;
    white-space: nowrap;
}
.act-chip .ic { width: 16px; height: 16px; opacity: .85; }
.act-chip:hover { background: var(--surface-3); color: var(--text); }
.act-chip.on {
    background: var(--accent); color: var(--accent-fg);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}
.act-chip.act-clear { background: transparent; border-color: var(--border); color: var(--text-3); }

.presence-sheet .sheet-actions { margin-top: 22px; }
.sheet-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }
@media (min-width: 520px) { .sheet-actions .btn { flex: 0 0 auto; } }

/* ────────────────────────────────────────────────── 9. CIRCLE STRIP ───── */

.circle-strip {
    gap: 10px;
    padding: 4px var(--gutter) 16px;
    scrollbar-width: none;
    max-width: var(--col); margin: 0 auto; width: 100%;
}
.status-chip {
    width: 244px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 14px 14px 10px;
    box-shadow: var(--shadow-sm);
    transition: transform .28s var(--spring), box-shadow .28s var(--ease-out), border-color var(--ease);
}
.status-chip:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.status-chip.is-pinned { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }

.chip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.chip-body { flex: 1; min-width: 0; }
.chip-name {
    font-size: .84rem; font-weight: 700; letter-spacing: -.02em;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-clock { font-size: .66rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.chip-activity {
    font-size: .8rem; font-weight: 600; color: var(--text);
    margin-top: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip-text {
    font-family: var(--serif);
    font-size: .92rem; line-height: 1.5; color: var(--text-2);
    margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.chip-text-empty { font-style: italic; color: var(--text-3); }
.chip-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--border); }
.chip-meta { font-size: .64rem; color: var(--text-3); flex: 1; }

.pin-flag {
    font-size: .5rem; font-weight: 800; letter-spacing: .09em;
    color: var(--brand);
    background: var(--brand-soft);
    border: none;
    padding: 2px 7px; border-radius: var(--r-pill);
}

.like-btn { border-radius: var(--r-pill); padding: 5px 9px; }
.like-btn.liked { color: var(--like); background: color-mix(in srgb, var(--like) 10%, transparent); }

/* ──────────────────────────────────────────────────── 10. QUICK PINGS ───── */

.quick-pings { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.quick-ping {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 50%;
    font-size: .82rem; line-height: 1;
    cursor: pointer;
}
.quick-ping:hover { background: var(--surface-2); border-color: var(--border-2); transform: translateY(-1px); }
.quick-ping.more { font-size: .9rem; color: var(--text-3); }
.quick-ping.sent { animation: pingSent .7s var(--spring); border-color: var(--av-green); }
@keyframes pingSent {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45) rotate(-8deg); }
    100% { transform: scale(1); }
}

.ping-sheet .ping-target { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ping-target-name { font-size: .95rem; font-weight: 700; }
.ping-target-sub { font-size: .78rem; color: var(--text-3); }

.ping-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ping-opt {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: 'ic label' 'ic means';
    align-items: center;
    gap: 0 12px;
    text-align: left;
    padding: 13px 15px;
    background: var(--surface-2);
    border: 1.5px solid transparent;
    border-radius: var(--r);
    cursor: pointer;
    font-family: var(--font);
}
.ping-opt:hover { background: var(--surface-3); border-color: var(--border-2); transform: translateX(2px); }
.ping-ic { grid-area: ic; display: grid; place-items: center; color: var(--text-2); }
.ping-ic .ic { width: 22px; height: 22px; }
.ping-opt:hover .ping-ic { color: var(--brand); }
.ping-label { grid-area: label; font-size: .88rem; font-weight: 700; color: var(--text); }
.ping-means { grid-area: means; font-size: .76rem; color: var(--text-2); line-height: 1.4; }

.ping-inbox { display: flex; flex-direction: column; gap: 4px; }
.ping-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: var(--r-sm);
}
.ping-row.unseen { background: var(--brand-soft); }
.ping-row-body { flex: 1; min-width: 0; }
.ping-row-top { display: flex; align-items: baseline; gap: 8px; }
.ping-row-name { font-size: .85rem; font-weight: 700; }
.ping-row-time { font-size: .66rem; color: var(--text-3); margin-left: auto; }
.ping-row-means { font-size: .8rem; color: var(--text-2); margin-top: 2px; }
.ping-back {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); font-size: .9rem; cursor: pointer; flex-shrink: 0;
}
.ping-back:hover { background: var(--surface-2); color: var(--text); }

/* ───────────────────────────────────────────────────────── 10b. PINS ───── */

.pin-explainer {
    font-size: .76rem; line-height: 1.55;
    color: var(--text-3);
    margin: -6px 0 14px;
    text-align: center;
}

.pins-manager { display: flex; flex-direction: column; gap: 4px; }
.pin-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--r-sm);
}
.pin-row:hover { background: var(--surface-2); }
.pin-row-body { flex: 1; min-width: 0; }
.pin-row-name { font-size: .86rem; font-weight: 700; }
.pin-row-sub {
    font-size: .72rem; color: var(--text-3); margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A post that reached you because you pinned its author, not because you're
   friends - worth signalling so the feed never feels like it guessed. */
.pin-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .58rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 3px 8px; border-radius: var(--r-pill);
    margin-right: 8px; flex-shrink: 0;
}
.pin-pill .ic { width: 10px; height: 10px; }

/* ──────────────────────────────────────────────────────── 11. ROOMS ───── */

.rooms-strip {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding: 2px var(--gutter) 16px;
    scrollbar-width: none;
    max-width: var(--col); margin: 0 auto; width: 100%;
}
.rooms-strip::-webkit-scrollbar { display: none; }

.room-card {
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
    min-width: 232px;
    padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-sm);
    font-family: var(--font);
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
.room-card.im-in { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.room-ic { display: grid; place-items: center; color: var(--text-2); flex-shrink: 0; }
.room-ic .ic { width: 22px; height: 22px; }
.room-card.im-in .room-ic { color: var(--brand); }
.room-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.room-name { font-size: .87rem; font-weight: 700; letter-spacing: -.02em; }
.room-count { font-size: .68rem; color: var(--text-3); }
.room-stack { display: flex; align-items: center; }
.room-stack .av { margin-left: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.room-stack .av:first-child { margin-left: 0; }
.room-more { font-size: .62rem; font-weight: 700; color: var(--text-3); margin-left: 5px; }

.room-blurb { font-family: var(--serif); font-style: italic; font-size: .88rem; color: var(--text-2); line-height: 1.6; margin-bottom: 16px; }
.room-members { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.room-member { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: var(--r-sm); }
.room-member.is-me { background: var(--surface-2); }
.room-member-body { flex: 1; min-width: 0; }
.room-member-name { font-size: .85rem; font-weight: 700; }
.room-member-line { font-size: .78rem; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-member-time { font-size: .66rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.room-join { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.room-join .field-hint { margin-bottom: 10px; }

/* ─────────────────────────────────────────────────── 12. DAILY WRAP ───── */

.wrap-teaser {
    display: flex; align-items: center; gap: 12px;
    max-width: var(--col); margin: 0 auto 4px; width: 100%;
    padding: 14px 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, var(--surface)), var(--surface));
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
    border-radius: var(--r-lg);
    animation: floatIn .5s var(--spring);
}
.wrap-teaser-copy { flex: 1; min-width: 0; }
.wrap-teaser-title { font-size: .88rem; font-weight: 700; letter-spacing: -.02em; }
.wrap-teaser-sub { font-size: .75rem; color: var(--text-2); margin-top: 2px; }

.wrap-sheet .wrap-lede {
    font-family: var(--serif); font-size: 1.05rem; line-height: 1.65;
    color: var(--text); margin-bottom: 22px;
}
.wrap-block { margin-bottom: 24px; }
.wrap-block-title {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--text-3); margin-bottom: 10px;
}

.rhythm { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.rhythm-bar {
    flex: 1;
    height: max(3px, var(--h));
    background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 45%, transparent));
    border-radius: 3px 3px 1px 1px;
    min-height: 3px;
    opacity: .9;
    transition: height .5s var(--spring);
}
.rhythm-axis {
    display: flex; justify-content: space-between;
    font-size: .6rem; color: var(--text-3); margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.dist { display: flex; flex-direction: column; gap: 9px; }
.dist-row { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: 10px; }
.dist-label { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist-track { height: 8px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.dist-fill {
    display: block; height: 100%; width: var(--w);
    background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--av-blue)));
    border-radius: var(--r-pill);
    animation: growBar .6s var(--spring);
}
@keyframes growBar { from { width: 0; } }
.dist-n { font-size: .72rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }

.wrap-days { display: flex; flex-direction: column; gap: 22px; }
.wrap-day { border-top: 1px solid var(--border); padding-top: 16px; }
.wrap-day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.wrap-day-name { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; }
.wrap-day-date { font-size: .72rem; color: var(--text-3); }
.wrap-narrative { font-family: var(--serif); font-size: .95rem; line-height: 1.7; color: var(--text-2); margin-bottom: 12px; }
.wrap-timeline { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.wrap-entry {
    display: grid; grid-template-columns: 52px 12px 1fr;
    align-items: baseline; gap: 8px;
    padding: 5px 0;
    font-size: .8rem;
}
.wrap-time { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: .72rem; }
.wrap-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--border-2);
    align-self: center;
}
.wrap-dot.dot-green  { background: var(--av-green);  }
.wrap-dot.dot-blue   { background: var(--av-blue);   }
.wrap-dot.dot-yellow { background: var(--av-yellow); }
.wrap-dot.dot-red    { background: var(--av-red);    }
.wrap-what { line-height: 1.5; }
.wrap-extra { color: var(--text-2); font-weight: 400; }

/* ─────────────────────────────────────────────────────── 13. POSTS ───── */

.posts-container { gap: 12px; padding: 4px var(--gutter); max-width: var(--col); }

.post-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 20px 10px;
    box-shadow: var(--shadow-sm);
    transition: transform .26s var(--spring), box-shadow .26s var(--ease-out), border-color var(--ease);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); }
.post-update     { border-left-color: var(--update); }
.post-paper      { border-left-color: var(--paper);  }
.post-conference { border-left-color: var(--conf);   }
.post-seeking    { border-left-color: var(--seek);   }
.post-card:hover.post-update     { border-left-color: var(--update); }
.post-card:hover.post-paper      { border-left-color: var(--paper);  }
.post-card:hover.post-conference { border-left-color: var(--conf);   }
.post-card:hover.post-seeking    { border-left-color: var(--seek);   }

/* ── Report reason picker ─────────────────────────────────────────────────── */

.reason-list { display: flex; flex-direction: column; gap: 2px; }

.reason-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    min-height: 52px;
    padding: 11px 14px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background var(--ease);
}
.reason-row:hover { background: var(--surface-2); }
.reason-label { font-size: .88rem; font-weight: 600; color: var(--text); }
.reason-hint  { font-size: .74rem; color: var(--text-3); }

/* ── Comment moderation affordances ───────────────────────────────────────── */

.comment-report, .comment-reply, .comment-delete {
    border: 0;
    background: none;
    padding: 0 0 0 8px;
    font-size: .68rem;
    color: var(--text-3);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ease), color var(--ease);
}
.comment-item:hover .comment-report,
.comment-item:hover .comment-reply,
.comment-item:hover .comment-delete,
.comment-report:focus-visible,
.comment-reply:focus-visible,
.comment-delete:focus-visible { opacity: 1; }
.comment-report:hover { color: var(--av-red); }
.comment-delete:hover { color: var(--av-red); }
.comment-reply:hover { color: var(--text); }
/* Touch devices have no hover, so never hide the only way to report. */
@media (hover: none) { .comment-report, .comment-reply, .comment-delete { opacity: 1; } }

.comment-replies {
    margin: 7px 0 0 18px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.comment-deleted .comment-text { color: var(--text-3); font-style: italic; }
.reply-composer { margin: 8px 0 0 34px; }

.comment-under-review { opacity: .7; }
.comment-review {
    font-size: .66rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--av-red);
    padding-left: 8px;
}

/* Hidden by a moderator, or by enough independent reports. Only ever rendered
   on the author's own copy - everyone else's list drops the post entirely. */
.post-under-review {
    border-left-color: var(--av-red);
    background: color-mix(in srgb, var(--av-red) 4%, var(--surface));
}
.review-strip {
    font-size: .68rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--av-red);
    margin-bottom: 10px;
}

.post-head { gap: 11px; margin-bottom: 11px; }
.post-author { font-size: .88rem; font-weight: 700; letter-spacing: -.02em; }
.post-sub { font-size: .7rem; color: var(--text-3); }
.post-type {
    font-size: .62rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 9px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, currentColor 12%, transparent);
}
.post-type::before { width: 6px; height: 6px; }

.post-text {
    font-family: var(--serif);
    font-size: 1.06rem; line-height: 1.68;
    letter-spacing: -.005em;
    margin-bottom: 12px;
}

.attach-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--paper);
    border-radius: var(--r);
    padding: 13px 15px;
}
.attach-title { font-size: .93rem; font-weight: 650; line-height: 1.45; }

.tag-chip {
    background: var(--surface-2);
    border: 1px solid transparent;
    color: var(--text-2);
    font-size: .71rem; font-weight: 600;
    padding: 5px 12px;
    border-radius: var(--r-pill);
}
.tag-chip:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); }

.post-foot { gap: 4px; padding-top: 10px; }
.foot-btn { font-size: .74rem; padding: 7px 12px; border-radius: var(--r-pill); }
.foot-btn:hover { background: var(--surface-2); color: var(--text); }
.foot-btn.on { color: var(--paper); background: color-mix(in srgb, var(--paper) 12%, transparent); }
.own-count { font-size: .64rem; }

.caught-up {
    font-family: var(--serif); font-style: italic;
    font-size: 1rem; color: var(--text-3);
    text-align: center;
    padding: 40px 24px 12px;
}

.comments-wrap { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }
.comment-input-row button, .chat-input-row button {
    background: var(--accent); color: var(--accent-fg);
    display: grid; place-items: center;
}

/* ────────────────────────────────────────────── 14. TOASTS & OVERLAYS ───── */

.toast-host {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px));
    z-index: 400;
    display: flex; flex-direction: column-reverse; gap: 8px;
    width: min(94vw, 440px);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-line);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg);
    font-size: .84rem; font-weight: 500;
    color: var(--text);
    opacity: 0; transform: translateY(14px) scale(.96);
    transition: opacity .28s var(--ease-out), transform .34s var(--spring);
}
.toast.in { opacity: 1; transform: none; }
.toast-icon { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }
.toast-msg { flex: 1; min-width: 0; line-height: 1.4; }
.toast-action {
    background: none; border: none; flex-shrink: 0;
    color: var(--brand); font-size: .8rem; font-weight: 700;
    font-family: var(--font); cursor: pointer;
    padding: 4px 6px;
}
.toast-warn  { border-color: color-mix(in srgb, var(--av-yellow) 45%, transparent); }
.toast-error { border-color: color-mix(in srgb, var(--av-red) 45%, transparent); }

/* Bottom sheets */
.sheet-overlay {
    position: fixed; inset: 0; z-index: 350;
    background: rgba(10, 10, 14, 0);
    backdrop-filter: blur(0px);
    display: flex; align-items: flex-end; justify-content: center;
    transition: background .3s var(--ease-out), backdrop-filter .3s var(--ease-out);
}
.sheet-overlay.in { background: rgba(10, 10, 14, .46); backdrop-filter: blur(6px); }

.sheet {
    width: 100%; max-width: 560px;
    max-height: 88dvh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 8px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateY(102%);
    transition: transform .38s var(--spring);
}
.sheet-overlay.in .sheet { transform: none; }
.sheet-tall { min-height: 72dvh; }

.sheet-grip {
    width: 40px; height: 4px;
    background: var(--border-2);
    border-radius: var(--r-pill);
    margin: 6px auto 12px;
    flex-shrink: 0;
    cursor: pointer;
}
.sheet-head { margin-bottom: 16px; flex-shrink: 0; }
.sheet-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.03em; }
.sheet-sub { font-size: .8rem; color: var(--text-3); margin-top: 3px; line-height: 1.5; }
.sheet-body { overflow-y: auto; flex: 1; margin: 0 -20px; padding: 0 20px 4px; -webkit-overflow-scrolling: touch; }
body.sheet-open { overflow: hidden; }

@media (min-width: 620px) {
    .sheet-overlay { align-items: center; padding: 24px; }
    .sheet { border-radius: var(--r-xl); border-bottom: 1px solid var(--border); transform: translateY(24px) scale(.97); opacity: 0; }
    .sheet-overlay.in .sheet { transform: none; opacity: 1; }
    .sheet-grip { display: none; }
    .sheet { padding-top: 24px; }
}

/* Dialogs */
.dialog-overlay {
    position: fixed; inset: 0; z-index: 420;
    display: grid; place-items: center;
    padding: 24px;
    background: rgba(10, 10, 14, 0);
    backdrop-filter: blur(0);
    transition: background .24s, backdrop-filter .24s;
}
.dialog-overlay.in { background: rgba(10, 10, 14, .5); backdrop-filter: blur(6px); }
.dialog {
    width: min(94vw, 400px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    transform: scale(.94); opacity: 0;
    transition: transform .28s var(--spring), opacity .2s;
}
.dialog-overlay.in .dialog { transform: none; opacity: 1; }
.dialog-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.dialog-msg { font-size: .87rem; color: var(--text-2); line-height: 1.6; margin-top: 8px; }
.dialog-actions { display: flex; gap: 8px; margin-top: 22px; }
.dialog-actions .btn { flex: 1; }
.dialog-actions .btn:empty { display: none; }

/* Compose modal → sheet treatment */
.modal-overlay { background: rgba(10, 10, 14, .46); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 300; }
.modal-card {
    background: var(--surface);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border: 1px solid var(--border); border-bottom: none;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    gap: 14px;
    box-shadow: var(--shadow-lg);
    animation: sheetUp .38s var(--spring);
}
@keyframes sheetUp { from { transform: translateY(100%); } }
.modal-header h3 { font-size: 1.1rem; letter-spacing: -.03em; }
#status-input { height: 96px; border-radius: var(--r); }
.type-chip, .vis-chip {
    font-size: .76rem; font-weight: 600;
    padding: 9px 14px; min-height: 38px;
    border-radius: var(--r-pill);
    border: 1.5px solid transparent;
    background: var(--surface-2); color: var(--text-2);
}
.type-chip.active, .vis-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
/* Frozen while editing an existing post: the active one still reads as the
   current choice, the rest recede rather than inviting a tap that does nothing. */
/* Local emulator sign-in. Cannot render on a deployed host - see
   mountEmulatorSignIn in js/app.js - so it is styled plainly on purpose. */
.emulator-signin {
    margin-top: 14px; padding: 12px; display: grid; gap: 8px;
    border: 1px dashed var(--border-2); border-radius: var(--r);
    text-align: left;
}
.emulator-signin p { margin: 0; font-size: .72rem; color: var(--text-3); }
.emulator-signin input {
    padding: 8px 10px; font-size: .8rem; border-radius: var(--r-sm);
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
}

.type-chip.is-locked, .vis-chip.is-locked { cursor: default; }
.type-chip.is-locked:not(.active), .vis-chip.is-locked:not(.active) { opacity: .4; }
#post-status { background: var(--accent); color: var(--accent-fg); padding: 12px 26px; min-height: 44px; border-radius: var(--r-pill); font-weight: 650; }
@media (min-width: 620px) {
    .modal-card { border-radius: var(--r-xl); border-bottom: 1px solid var(--border); animation: popIn .3s var(--spring); }
}

/* Side panel */
.side-panel { background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); border-radius: var(--r-xl) 0 0 var(--r-xl); }
.panel-overlay { background: rgba(10, 10, 14, .4); backdrop-filter: blur(4px); }

/* ──────────────────────────────────────────────────── 15. SKELETONS ───── */

.sk {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 300% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--r-xs);
}
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-avatar.sm { width: 36px; height: 36px; }
.sk-line { height: 10px; margin-bottom: 8px; }
.sk-line.w90 { width: 90%; } .sk-line.w80 { width: 80%; } .sk-line.w70 { width: 70%; }
.sk-line.w60 { width: 60%; } .sk-line.w50 { width: 50%; } .sk-line.w40 { width: 40%; }
.sk-line.w30 { width: 30%; } .sk-line.w24 { width: 24%; }
.sk-lines { flex: 1; min-width: 0; }
.sk-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sk-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 12px;
}
.sk-chip {
    display: flex; gap: 10px; width: 244px; flex-shrink: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: 14px;
}
.sk-listrow { display: flex; gap: 12px; align-items: center; padding: 12px; }

/* ─────────────────────────────────────────────────── 16. GLANCE MODE ───── */

#glance-screen {
    position: fixed; inset: 0; z-index: 500;
    background: var(--bg);
    display: flex; flex-direction: column;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 18px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: floatIn .34s var(--spring);
}
.glance-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; flex-shrink: 0; }
.glance-title { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; }
.glance-stamp { font-size: .78rem; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.glance-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.glance-row {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 12px;
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--border);
    animation: floatIn .4s var(--spring) both;
}
.glance-row:nth-child(2) { animation-delay: .04s; }
.glance-row:nth-child(3) { animation-delay: .08s; }
.glance-row:nth-child(4) { animation-delay: .12s; }
.glance-row:nth-child(5) { animation-delay: .16s; }
.glance-row:nth-child(6) { animation-delay: .2s; }
.glance-body { flex: 1; min-width: 0; }
.glance-name { font-size: .9rem; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.glance-clock { font-size: .66rem; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.glance-line { font-size: .84rem; color: var(--text); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance-note { font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glance-meta { display: flex; gap: 8px; align-items: center; font-size: .64rem; color: var(--text-3); margin-top: 4px; }
.glance-avail { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.glance-avail.avail-green  { color: var(--av-green);  }
.glance-avail.avail-blue   { color: var(--av-blue);   }
.glance-avail.avail-yellow { color: var(--av-yellow); }
.glance-avail.avail-red    { color: var(--av-red);    }
.glance-empty { text-align: center; color: var(--text-3); font-size: .86rem; line-height: 1.7; padding: 48px 20px; }
.glance-foot { display: flex; justify-content: center; padding-top: 16px; flex-shrink: 0; }
body.glance-open #bottom-nav, body.glance-open .fab { display: none !important; }

/* ───────────────────────────────────────────────────────── 17. LOGIN ───── */

#login-screen { background: var(--bg); overflow: hidden; }
#login-screen::before,
#login-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
}
#login-screen::before {
    width: 46vmax; height: 46vmax; top: -14vmax; left: -12vmax;
    background: radial-gradient(circle, var(--brand), transparent 70%);
}
#login-screen::after {
    width: 40vmax; height: 40vmax; bottom: -14vmax; right: -10vmax;
    background: radial-gradient(circle, var(--av-green), transparent 70%);
    opacity: .32;
}

.login-container { position: relative; z-index: 1; max-width: 420px; }
.login-container h1 {
    font-family: var(--serif);
    font-size: clamp(3rem, 12vw, 4.4rem);
    font-weight: 600; letter-spacing: -.05em;
    margin-bottom: 10px;
}
.login-subtitle { font-size: 1rem; color: var(--text-2); margin-bottom: 28px; }

.login-rings { display: flex; justify-content: center; gap: 14px; margin-bottom: 30px; }
.login-ring {
    width: 12px; height: 12px; border-radius: 50%;
    animation: softPulse 2.6s var(--ease-out) infinite;
}
.login-ring:nth-child(1) { background: var(--av-green);  animation-delay: 0s;   }
.login-ring:nth-child(2) { background: var(--av-blue);   animation-delay: .4s;  }
.login-ring:nth-child(3) { background: var(--av-yellow); animation-delay: .8s;  }
.login-ring:nth-child(4) { background: var(--av-red);    animation-delay: 1.2s; }

.login-principles { gap: 11px; margin-bottom: 32px; }
.login-principles li { font-size: .86rem; color: var(--text-2); padding-left: 22px; }
.login-principles li::before { content: '·'; font-size: 1.6rem; line-height: .6; top: 2px; color: var(--brand); }

.google-btn {
    background: var(--accent); color: var(--accent-fg);
    padding: 15px 34px; min-height: 50px;
    font-size: .95rem; font-weight: 650;
    box-shadow: var(--shadow-md);
}
.google-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lg); opacity: 1; }

.auth-splash { background: var(--bg); }
.splash-logo { font-family: var(--serif); font-size: 2.4rem; letter-spacing: -.05em; }
.splash-spinner { border-color: var(--border); border-top-color: var(--brand); }

/* ──────────────────────────────────────────────────── 18. MISC PANES ───── */

.empty-state { color: var(--text-3); font-size: .87rem; line-height: 1.75; padding: 56px 28px; }
.empty-state.small { padding: 20px 14px; font-size: .8rem; }

.user-row, .convo-row, .request-item { border-radius: var(--r); padding: 11px 12px; gap: 13px; }
.user-row:hover, .convo-row:hover, .request-item:hover { background: var(--surface); }
.user-row-handle, .convo-name { font-size: .89rem; font-weight: 700; letter-spacing: -.02em; }
.user-row-sub, .convo-last { font-size: .73rem; }

.explore-results, .chats-list, .requests-list { max-width: var(--col); margin: 0 auto; width: 100%; padding-left: 8px; padding-right: 8px; }

.paper-card { border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.paper-title { font-size: 1.02rem; line-height: 1.45; }

.digest-card { border-radius: var(--r); padding: 12px 15px; gap: 13px; }
.digest-card:hover { border-color: var(--border-2); }
.digest-hint { border-radius: var(--r-lg); font-size: .9rem; }

.msg-bubble { position: relative; border-radius: 20px; padding: 10px 15px; font-size: .88rem; box-shadow: var(--shadow-sm); }
.msg-bubble.mine { border-bottom-right-radius: 7px; }
.msg-bubble.theirs { border-bottom-left-radius: 7px; }
.msg-report {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 4px;
    border: 0;
    background: none;
    padding: 4px;
    color: var(--text-3);
    font-size: .68rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--ease), color var(--ease);
}
.msg-bubble:hover .msg-report, .msg-report:focus-visible { opacity: 1; }
.msg-report:hover { color: var(--av-red); }
@media (hover: none) { .msg-report { opacity: 1; } }

.profile-avatar-wrap { gap: 12px; margin-bottom: 24px; }
.profile-name { font-size: 1.32rem; font-weight: 750; letter-spacing: -.035em; }
.profile-handle { font-size: .88rem; color: var(--text-3); font-weight: 500; }
.profile-affil { font-size: .84rem; }
.profile-bio { font-family: var(--serif); font-size: .95rem; line-height: 1.7; max-width: 380px; }
.current-status-box { border-radius: var(--r-lg); padding: 16px 18px; background: var(--surface); }
.current-status-text { font-family: var(--serif); font-size: .98rem; line-height: 1.6; }
.profile-action-btn { border-radius: var(--r-pill); padding: 13px; min-height: 46px; font-weight: 650; }
.link-pill { border-radius: var(--r-pill); background: var(--surface-2); border-color: transparent; }
.link-pill:hover { background: var(--surface-3); }
.save-profile-btn { border-radius: var(--r-pill); min-height: 48px; font-weight: 650; }
.links-badge { background: var(--surface-3); }

.time-nudge {
    background: var(--glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-line);
    box-shadow: var(--shadow-lg);
    bottom: calc(var(--nav-h) + 26px + env(safe-area-inset-bottom, 0px));
    z-index: 200;
}

.suspend-banner { border-radius: 0; font-size: .8rem; }

/* ──────────────────────────────────────────────────── 19. RESPONSIVE ───── */

/* Small phones */
@media (max-width: 380px) {
    :root { --gutter: 12px; }
    .status-chip { width: 210px; }
    .room-card { min-width: 200px; }
    .nav-btn span:not(.notif-badge) { font-size: .55rem; }
    .presence-line { font-size: .92rem; }
}

/* Touch ergonomics + no iOS zoom-on-focus */
@media (max-width: 680px) {
    input, textarea, select { font-size: 16px !important; }
    .post-card { padding: 16px 16px 8px; }
    .sheet-body { padding-bottom: 10px; }
}

/* Tablet: wider column, roomier cards */
@media (min-width: 680px) {
    :root { --gutter: 20px; --col: 660px; }
    .post-card { padding: 20px 24px 12px; }
    .status-chip { width: 264px; }
}

/* Desktop: side rail */
@media (min-width: 960px) {
    :root { --col: 680px; }

    #bottom-nav {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 244px; height: 100dvh;
        flex-direction: column; justify-content: space-between;
        gap: 4px; padding: 26px 14px 40px;
        border-radius: 0;
        border: none; border-right: 1px solid var(--border);
        background: var(--bg);
        backdrop-filter: none; -webkit-backdrop-filter: none;
        box-shadow: none;
    }
    .bottom-nav-brand { display: block; padding: 0 14px 26px; }
    .bottom-nav-brand .brand-logo { height: 2.35rem; width: auto; }
    .nav-btn {
        flex: 0 0 auto; width: 100%;
        flex-direction: row; justify-content: flex-start; gap: 15px;
        padding: 13px 16px; min-height: 48px;
        font-size: .93rem; font-weight: 600;
        text-transform: none; letter-spacing: -.01em;
    }
    .nav-btn::before { display: none; }
    .nav-btn:hover { background: var(--surface-2); }
    .nav-btn.active { background: var(--surface-2); color: var(--text); }
    .nav-icon { width: 22px; height: 22px; }
    .notif-badge { position: static; margin-left: auto; border-color: transparent; }
    .nav-icon-wrap { position: static; }

    .app-screen { left: 244px; bottom: 0; }
    .fab { right: 40px; bottom: 40px; }
    .toast-host { left: calc(50% + 122px); bottom: 32px; }
    .time-nudge { left: calc(50% + 122px); bottom: 32px; }

    .feed-scroll, .explore-results, .paper-results, .chats-list,
    .requests-list, .profile-body, .chat-thread {
        padding-bottom: 48px !important;
    }
    .app-header { padding: 0 28px; }

    .search-wrapper, .explore-toggle, .paper-results, .local-file-row,
    .explore-results, .chats-list, .chat-thread, .scholar-note,
    #scholar-profile-card, .profile-body {
        max-width: 720px; margin-left: auto; margin-right: auto; width: 100%;
    }

    .ping-grid { grid-template-columns: 1fr 1fr; }
    .ping-opt:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Large desktop: give the reading column air */
@media (min-width: 1280px) {
    :root { --col: 720px; }
}

/* ── Beta badge ───────────────────────────────────────────────────────────── */

.beta-tag {
    display: inline-block;
    font-family: var(--font);
    /* Capped, not purely relative. The login heading is clamp(3rem, 12vw, 4.4rem),
       so a plain .34em made the badge 24px, wide enough to push itself onto its
       own line under the wordmark. It should read as a footnote at every size. */
    font-size: clamp(.5rem, .3em, .78rem);
    white-space: nowrap;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--brand-soft);
    color: var(--brand);
    padding: .35em .5em;
    border-radius: var(--r-xs);
    vertical-align: super;
    margin-left: .3em;
    line-height: 1;
    /* The brand word is serif and optically heavy; the tag should read as a
       footnote to it, never as part of the name. */
}

.brand-h .beta-tag,
.splash-logo .beta-tag { font-size: clamp(.5rem, .34em, .7rem); }

/* ── Brand logo ───────────────────────────────────────────────────────────── */
/* Sized in em so it scales with whatever container's font-size it's dropped
   into (.splash-logo, h1, .brand-h, .ob-brand) without per-context rules.
   Two <img> theme variants ship together; visibility follows the same
   light/dark selectors the color tokens use, so a manual toggle and the OS
   preference both resolve the same way. */

.brand-logo { display: inline-block; height: 1.35em; width: auto; vertical-align: -0.22em; }

.brand-logo-dark { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand-logo-light { display: none; }
    :root:not([data-theme="light"]) .brand-logo-dark { display: inline-block; }
}

:root[data-theme="dark"] .brand-logo-light { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: inline-block; }

/* ── Onboarding ───────────────────────────────────────────────────────────── */

#onboarding {
    position: fixed;
    inset: 0;
    /* Must beat #login-screen's z-index: 1000 (.full-screen, style.css) - an ID
       selector here already wins on specificity over that class, but the old
       value (900) was still numerically lower and lost anyway. Onboarding
       fires from the login screen and has to render on top of it, or it's
       invisible: the promise it returns just sits there with nothing visibly
       wrong, since nothing threw. */
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gutter);
    overflow-y: auto;
    background:
        radial-gradient(1100px 620px at 12% -10%, var(--brand-soft), transparent 60%),
        radial-gradient(900px 520px at 100% 110%, var(--brand-soft), transparent 55%),
        var(--bg);
}

body.onboarding-open { overflow: hidden; }

.ob-card {
    width: 100%;
    max-width: 480px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 26px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    animation: ob-in .42s var(--spring) both;
}

@keyframes ob-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.ob-brand {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--text);
}

.ob-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.03em;
    margin: 8px 0 0;
    color: var(--text);
}
.ob-title-lg { font-size: 2.1rem; }

.ob-body {
    font-size: .92rem;
    line-height: 1.68;
    color: var(--text-2);
    margin: 0;
}
.ob-body.small { font-size: .85rem; }

.ob-req {
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-3);
    margin-left: 6px;
}

.ob-actions { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.ob-actions .btn { min-height: 48px; flex: 1; font-weight: 650; }

/* ── Consent ──────────────────────────────────────────────────────────────── */

.ob-privacy { list-style: none; margin: 14px 0 4px; padding: 0; display: grid; gap: 11px; }

.ob-privacy li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--text-2);
}
.ob-privacy b { color: var(--text); font-weight: 650; }

.ob-tick {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--av-green) 16%, transparent);
    color: var(--av-green);
    margin-top: 1px;
}
.ob-tick .ic { width: 13px; height: 13px; }
.ob-tick-warn {
    background: color-mix(in srgb, var(--av-yellow) 18%, transparent);
    color: var(--av-yellow);
}

.ob-accept {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-top: 18px;
    padding: 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: .84rem;
    line-height: 1.6;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.ob-accept:hover { border-color: var(--border-2); }
.ob-accept:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-soft);
}
.ob-accept input {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    margin: 0;
    accent-color: var(--brand);
    cursor: pointer;
}
.ob-accept a { color: var(--brand); font-weight: 600; }

.ob-actions .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Invitation ───────────────────────────────────────────────────────────── */

.ob-choices { display: grid; gap: 10px; margin-top: 20px; }

.ob-choice {
    display: grid;
    gap: 3px;
    text-align: left;
    padding: 17px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface-2);
    cursor: pointer;
    transition: transform .2s var(--spring), border-color var(--ease), background var(--ease);
}
.ob-choice:hover { transform: translateY(-2px); border-color: var(--border-2); }
.ob-choice-primary { border-color: var(--brand); background: var(--brand-soft); }
.ob-choice-primary:hover { border-color: var(--brand); }

.ob-choice-icon { color: var(--brand); }
.ob-choice-icon .ic { width: 22px; height: 22px; }
.ob-choice-title { font-size: .98rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.ob-choice-sub { font-size: .78rem; color: var(--text-3); }

/* ── Tour: 3D carousel ────────────────────────────────────────────────────── */

.ob-tour { max-width: 560px; }

.ob-tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.ob-stage {
    position: relative;
    height: 388px;
    margin: 20px -26px 0;
    perspective: 1400px;
    perspective-origin: 50% 45%;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
}
.ob-stage:active { cursor: grabbing; }

.ob-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.ob-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px 20px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--tint, var(--brand));
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    transform-style: preserve-3d;
    transition: transform .5s var(--spring), opacity .4s var(--ease-out);
    will-change: transform;
    cursor: pointer;
    user-select: none;
}
.ob-slide.is-active { box-shadow: var(--shadow-lg); cursor: default; }

.ob-slide-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--tint) 14%, transparent);
    color: var(--tint);
}
.ob-slide-icon .ic { width: 22px; height: 22px; }

.ob-slide-title {
    font-family: var(--serif);
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 2px 0 0;
    color: var(--text);
}

.ob-slide-body {
    font-size: .83rem;
    line-height: 1.62;
    color: var(--text-2);
    margin: 0;
}

.ob-slide-num {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-3);
}

/* ── Feature preview mockups ──────────────────────────────────────────────────
   Small live recreations of the real UI, built from the same classes and tokens
   as the app itself, rather than pasted screenshots. That way a redesign can
   never leave the tour showing a screen that no longer exists. The bottom edge
   fades into the card so it reads as a glimpse, not a pasted-in image. ────── */

.ob-shot {
    position: relative;
    height: 92px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface-2);
    overflow: hidden;
}
.ob-shot::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 42%, var(--surface) 96%);
    pointer-events: none;
}
.ob-shot-inner {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
}

.ob-shot-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-shot-text b { font-size: .82rem; color: var(--text); }
.ob-shot-text span { font-size: .72rem; color: var(--text-3); }

.ob-slot {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px dashed var(--border-2);
    flex: none;
}

.ob-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 600;
    color: var(--text-2);
    background: var(--surface-3);
    border: 1px solid transparent;
    padding: 8px 13px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ob-chip .ic { width: 14px; height: 14px; }
.ob-chip.on { color: var(--text); background: var(--surface); border-color: var(--tint, var(--border-2)); }

.ob-shot-wrap { align-items: flex-end; gap: 7px; padding: 16px 18px 12px; }
.ob-wrap-bar {
    flex: 1;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: color-mix(in srgb, var(--tint, var(--brand)) 55%, var(--surface-3));
    min-height: 6px;
}

.ob-shot-feed { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 14px 16px; }
.ob-mini-post { height: 11px; border-radius: var(--r-sm); background: var(--surface-3); }
.ob-mini-post.short { width: 60%; }
.ob-mini-end { font-size: .68rem; font-weight: 650; color: var(--text-3); text-align: center; margin-top: 2px; }

.ob-mini-page {
    width: 34px; height: 46px;
    border-radius: 3px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    flex: none;
    box-shadow: var(--shadow-sm);
}
.ob-mini-page + .ob-mini-page { margin-left: -22px; transform: rotate(-5deg); }

.ob-shot-digest { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 12px 16px; }
.ob-digest-row { display: flex; align-items: center; gap: 8px; }
.ob-bar { flex: 1; height: 9px; border-radius: var(--r-pill); background: var(--surface-3); }
.ob-bar.short { flex: none; width: 50%; }

.ob-slide-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ob-where {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-3);
    min-width: 0;
}
.ob-where .ic { width: 12px; height: 12px; flex: none; color: var(--tint, var(--text-3)); }
.ob-where span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Carousel controls ────────────────────────────────────────────────────── */

.ob-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }

.ob-arrow {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--ease), color var(--ease), opacity var(--ease);
}
.ob-arrow:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.ob-arrow:disabled { opacity: .3; cursor: default; }
.ob-arrow .ic { width: 18px; height: 18px; }
.ob-next-arrow .ic { transform: rotate(180deg); }

.ob-dots { display: flex; gap: 7px; align-items: center; }

.ob-dot {
    width: 7px; height: 7px;
    padding: 0;
    border: none;
    border-radius: var(--r-pill);
    background: var(--border-2);
    cursor: pointer;
    transition: background var(--ease), transform var(--ease), width var(--ease);
}
.ob-dot.on { background: var(--brand); width: 20px; }

/* ── Profile form ─────────────────────────────────────────────────────────── */

.ob-form .form-label { margin-top: 12px; }
.ob-handle-preview { font-weight: 650; color: var(--brand); }
.ob-welcome { max-width: 700px; max-height: min(880px, calc(100vh - 48px)); overflow-y: auto; }
.ob-welcome-section { margin-top: 22px; }
.ob-welcome-section h3 { margin: 0 0 10px; font-size: .8rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .06em; }
.ob-people { display: grid; gap: 8px; }
.ob-person-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.ob-person-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ob-person-info b { font-size: .86rem; }
.ob-person-info > span { color: var(--text-3); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-shared-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ob-shared-tags .tag-chip { font-size: .62rem; padding: 2px 7px; pointer-events: none; }
.ob-digest .digest-card { margin-bottom: 7px; }
.ob-digest .digest-actions { flex-shrink: 0; }

/* ── Responsive and motion ────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .ob-card { padding: 24px 18px 20px; }
    .ob-title { font-size: 1.4rem; }
    .ob-title-lg { font-size: 1.75rem; }
    .ob-stage { height: 410px; margin: 18px -18px 0; }
    .ob-slide { width: 260px; margin-left: -130px; }
}

/* Short viewports: let the card scroll rather than pushing its button away. */
@media (max-height: 760px) {
    #onboarding { align-items: flex-start; }
    .ob-stage { height: 358px; }
}

@media (prefers-reduced-motion: reduce) {
    .ob-card { animation: none; }
    .ob-slide { transition: opacity .2s linear; }
    .ob-choice { transition: none; }
    .ob-choice:hover { transform: none; }
}

/* ── Bug report ───────────────────────────────────────────────────────────── */

.bug-form { display: flex; flex-direction: column; gap: 4px; }
.bug-form .form-label { margin-top: 10px; }
.bug-form .form-textarea { width: 100%; resize: vertical; }
.bug-form .bug-send { margin-top: 16px; min-height: 46px; }

.bug-context {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface-2);
}

.bug-context summary {
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-2);
}

.bug-context-body {
    font-size: .74rem;
    line-height: 1.6;
    color: var(--text-3);
    margin: 8px 0 6px;
    overflow-wrap: anywhere;
}

.bug-ua {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .68rem;
    opacity: .8;
}

/* ── Desktop side rail: undo the mobile bar's full-height buttons ──────────── */

/* style.css sets `.nav-btn { height: 100% }`, which is right for a horizontal
   bar and wrong for a vertical rail: each button claimed the entire rail, so
   only "Home" was ever on screen and the sidebar looked empty. */
@media (min-width: 900px) {
    .nav-btn { height: auto; }

    /* With the buttons the right size the rail has room to spare, so give the
       reading column the width instead of leaving a dead margin. */
    #bottom-nav { justify-content: flex-start; }
}

/* ── Horizontal scrollers ─────────────────────────────────────────────────── */

.act-scroller,
.circle-strip,
.compose-types,
.explore-toggle {
    cursor: grab;
    overscroll-behavior-x: contain;
}
.act-scroller.is-dragging,
.circle-strip.is-dragging,
.compose-types.is-dragging,
.explore-toggle.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;      /* snapping fights a drag */
    user-select: none;
}
.is-dragging * { pointer-events: none; }

/* A pointer device gets no flick momentum, so hint that the row continues. */
@media (hover: hover) {
    .act-scroller { scroll-behavior: smooth; }
}

/* ── Activity screen ──────────────────────────────────────────────────────── */

.activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px var(--gutter) calc(var(--nav-h) + 28px);
    max-width: var(--col);
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.act-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    animation: ob-in .3s var(--spring) both;
}

/* A moderator note is not a notification, it is a message from a person who
   took an action against your account. It should not look like a ping. */
.act-warning {
    border-color: color-mix(in srgb, var(--av-red) 40%, var(--border));
    background: color-mix(in srgb, var(--av-red) 5%, var(--surface));
}

.act-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-2);
}
.act-icon-warn {
    background: color-mix(in srgb, var(--av-red) 15%, transparent);
    color: var(--av-red);
}
.act-icon .ic { width: 19px; height: 19px; }

.act-body { flex: 1; min-width: 0; cursor: pointer; }
.act-warning .act-body { cursor: default; }

.act-title {
    font-size: .88rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text);
    line-height: 1.35;
}

.act-text {
    font-size: .8rem;
    line-height: 1.55;
    color: var(--text-2);
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.act-time { font-size: .68rem; color: var(--text-3); margin-top: 5px; }

.act-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.act-actions .btn { min-height: 36px; padding: 0 14px; font-size: .78rem; }

.act-ping-glyph { color: var(--brand); display: grid; place-items: center; }
.act-ping-glyph .ic { width: 20px; height: 20px; }

/* Six tabs is one more than the bar was designed for; buy the room back from
   the label rather than letting the icons collide. */
@media (max-width: 420px) {
    .nav-btn span:not(.notif-badge) { font-size: .58rem; letter-spacing: -.01em; }
    .nav-btn { padding-left: 2px; padding-right: 2px; }
}

@media (max-width: 560px) {
    .act-row { flex-wrap: wrap; }
    .act-actions { width: 100%; justify-content: flex-start; padding-left: 52px; }
}

@media (min-width: 900px) {
    .activity-list { padding-bottom: 48px; max-width: 720px; }
}

.login-legal {
    margin-top: 16px;
    font-size: .72rem;
    line-height: 1.6;
    color: var(--text-3);
    text-align: center;
}
.login-legal a { color: var(--text-2); font-weight: 600; }

/* ── PDF reader ───────────────────────────────────────────────────────────── */

.reader-topbar { gap: 12px; flex-wrap: wrap; }

.reader-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
}

.reader-icon-btn {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: transparent;
    color: var(--text-2);
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
}
.reader-icon-btn:hover { background: var(--surface-3); color: var(--text); }

.reader-zoom-label,
.reader-pageno {
    font-size: .72rem;
    font-weight: 650;
    color: var(--text-3);
    min-width: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.reader-viewport { position: relative; flex: 1; min-width: 0; display: flex; }

.reader-pages {
    flex: 1;
    overflow: auto;
    padding: 20px 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    background: var(--bg-2);
    outline: none;
    overscroll-behavior: contain;
}

.pdf-page {
    position: relative;
    background: #fff;              /* a page is white; this is not themeable */
    box-shadow: var(--shadow);
    border-radius: 2px;
    flex: 0 0 auto;
}

.pdf-page canvas { display: block; border-radius: 2px; }

.pdf-page-num {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: .8rem;
    color: var(--text-3);
    pointer-events: none;
}
.pdf-page canvas ~ .pdf-page-num { display: none; }

/* ── Text layer ───────────────────────────────────────────────────────────── */
/* Invisible text positioned over the canvas. This is what makes a paper
   selectable, copyable and findable with the browser's own Ctrl+F. */

.textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    opacity: 1;
    text-align: initial;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 2;
}

.textLayer span,
.textLayer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
}

.textLayer ::selection { background: rgba(91, 75, 224, .35); }
.textLayer .highlight { background: rgba(233, 163, 23, .4); border-radius: 2px; }

/* ── Status and errors ────────────────────────────────────────────────────── */

.reader-status {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px;
    text-align: center;
    background: var(--bg-2);
    color: var(--text-2);
    font-size: .9rem;
}

.pdf-spinner {
    width: 26px; height: 26px;
    border: 2.5px solid var(--border-2);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pdf-error { font-weight: 650; color: var(--text); max-width: 42ch; line-height: 1.6; }
.pdf-error-sub { font-size: .82rem; color: var(--text-3); max-width: 42ch; line-height: 1.6; }

@media (max-width: 620px) {
    .reader-zoom { order: 3; }
    .reader-pageno { order: 4; }
    .reader-pages { padding: 12px 0 48px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pdf-spinner { animation-duration: 2s; }
}

/* ── Suspension appeal ───────────────────────────────────────────────────── */
.suspend-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.suspend-appeal-btn {
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;
}
.appeal-note { margin-bottom: 14px; }
.appeal-existing {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--border, #d8d8d4);
    background: var(--surface-2, rgba(0, 0, 0, .03));
    color: var(--text-2, #555);
    font-style: italic;
    border-radius: 0 6px 6px 0;
    white-space: pre-wrap;
}

/* ── Message unsend / tombstone ──────────────────────────────────────────── */
.msg-unsend {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 8px;
    font-size: 11px;
    color: var(--text-3, #8a8a86);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.msg-bubble:hover .msg-unsend,
.msg-bubble:focus-within .msg-unsend { opacity: 1; }
/* Touch devices have no hover, so the control must simply be visible. */
@media (hover: none) {
    .msg-unsend { opacity: .7; }
}
.msg-deleted { opacity: .72; }
.msg-tombstone { color: var(--text-3, #8a8a86); font-size: 13px; }

/* ── Accessibility ───────────────────────────────────────────────────────── */
/*
 * Visually hidden but read aloud. The availability ring is a colour, and a
 * colour is not information a screen reader can relay, so every avatar also
 * carries its state as real text.
 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * A second, non-colour encoding of availability. Red/green is the most common
 * colour-vision deficiency and it is exactly the pair this app leans on
 * hardest ("free" vs "do not disturb"), so the border style differs too:
 * solid when interruptible, progressively broken as it gets less so.
 */
.av[data-avail="green"]  { border-style: solid; }
.av[data-avail="blue"]   { border-style: double; }
.av[data-avail="yellow"] { border-style: dashed; }
.av[data-avail="red"]    { border-style: dotted; }

/* Keyboard users must be able to see what they are on. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent, #0e5c5e);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Discover card ───────────────────────────────────────────────────────── */
/*
 * Lives inside the feed column like everything else. The first version set no
 * max-width, so on a desktop it stretched the full shell while every post
 * beside it stopped at --col - which is what made it look broken rather than
 * merely plain: the Pin buttons ended up hundreds of pixels from the names
 * they belonged to.
 */
#discover-wrap {
    max-width: var(--col);
    margin: 0 auto;
    width: 100%;
    padding: 4px var(--gutter) 0;
}
.discover-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px 6px;
    margin-bottom: 12px;
}
.discover-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
/* Matches .section-label, so it reads as part of the page rather than a
   notice bolted onto it. */
.discover-title {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-3);
}
.discover-dismiss { flex: 0 0 auto; margin: -8px -8px 0 0; }
.discover-sub {
    margin: 6px 0 4px;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--text-2);
    max-width: 46ch;
}
.discover-people { display: flex; flex-direction: column; }
.discover-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
}
.discover-row:first-child { border-top: none; }
.discover-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.discover-info b {
    font-size: .9rem; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discover-info span {
    font-size: .76rem; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.discover-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.discover-pin { flex: 0 0 auto; }
/* Pinned is a finished state, not a disabled one - say so rather than just
   greying the control out. */
.discover-pin.pinned {
    background: var(--brand-soft);
    color: var(--brand);
    opacity: 1;
}

/* ── "Elsewhere on Elakis" ───────────────────────────────────────────────── */
/*
 * A real section of Home now, not an apology for an empty one, so it uses the
 * same uppercase label every other section does instead of a tinted callout.
 */
.wider-label { padding-top: 22px; }
.wider-label .section-note { max-width: 42ch; }

/* ── Digest share ────────────────────────────────────────────────────────── */
.digest-actions .d-share { white-space: nowrap; }