/* ==========================================================================
   duno app shell (2026-11-11)
   Turns the "website with a top menu" into an app:
   - signed-in, 761px and wider: the top bar becomes a fixed left sidebar
     (full labels from 1280px, icons only below that)
   - posts are rows in one continuous timeline instead of stacked boxes
   - side columns are quiet filled panels, feed tabs stick to the top
   - phones keep the top bar + bottom tab bar
   Loaded last from header.php. Remove that <link> line to go back.
   ========================================================================== */
:root {
  --bg: #ffffff; --card: #ffffff; --elev: #ffffff; --soft: #f5f6f8;
  --ink: #12151a; --ink-2: #2f3540; --muted: #5f6875; --faint: #8b93a0;
  --line: #e6e8ed; --line-2: #eff1f4; --hover: #f2f3f6; --press: #e7e9ee; --field: #f1f3f6;
  --brand: #1d5fe0; --brand-600: #1549b5; --brand-50: #ebf1fe; --brand-100: #d5e2fd;
  --brand-grad: linear-gradient(#1d5fe0, #1d5fe0);
  --radius: 16px; --radius-sm: 10px; --radius-lg: 20px;
  --shadow-md: 0 8px 28px rgba(15, 20, 30, .14); --shadow-lg: 0 18px 48px rgba(15, 20, 30, .2);
  --side-w: 0px;
}
[data-theme="dark"] {
  --bg: #0c0e11; --card: #0c0e11; --elev: #1a1e24; --soft: #14171c;
  --ink: #eef0f3; --ink-2: #c9ced6; --muted: #9199a5; --faint: #6b7380;
  --line: #23272e; --line-2: #1b1f25; --hover: #171a20; --press: #1f242b; --field: #171a20;
  --brand: #6ea5ff; --brand-600: #9cc2ff; --brand-50: #14213a; --brand-100: #1b2d50;
  --brand-grad: linear-gradient(#6ea5ff, #6ea5ff);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
}
body { font-family: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; }
h1, h2, h3, .page-head h1 { font-weight: 800; letter-spacing: -.015em; }
.page-head h1 { font-size: 1.5rem; }

/* surfaces: outlined, never floating */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
[data-theme="dark"] .card { border-color: var(--line); background: var(--soft); }
.me-menu, .search-pop { background: var(--elev); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }

/* tabs and filters: ink, not green */
.tabs { border-bottom: 1px solid var(--line); gap: 0; }
.tab { padding: 14px 16px; font-weight: 600; font-size: .95rem; color: var(--muted); border-bottom: 3px solid transparent; }
.tab:hover { color: var(--ink); background: var(--hover); }
.tab.active { color: var(--ink) !important; font-weight: 800; border-bottom-color: var(--brand) !important; }
.chip.on, .chip.on:hover, .jb-dd.on > summary, .ct-tab.on { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--bg) !important; }
.ct-tab.on em { color: inherit; opacity: .7; }
.top-search input { border-radius: 999px !important; background: var(--field) !important; }
.top-search input:focus { border-color: var(--brand) !important; background: var(--bg) !important; }
.logo-mark { border-radius: 10px !important; }
.logo-word { color: var(--ink); }
body.search-open .topbar { z-index: 70; }

/* ---------- the timeline: posts are rows, not boxes ---------- */
.post, [data-theme="dark"] .post { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; }
.post-top { padding: 14px 12px 0 18px; }
.post-body { padding: 8px 18px 4px; font-size: 1rem; }
.post-stats { padding-left: 18px; padding-right: 18px; }
.post-actions { border-top: 0; padding: 2px 10px 8px; justify-content: space-between; }
.post-actions .btn-react, .post-actions .btn-comment, .post-actions .btn-repost, .post-actions .btn-share, .post-actions .btn-save { border-radius: 999px !important; height: 36px; font-weight: 500; }
.founder-feature { margin: 0; }
.founder-feature .post { border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.founder-flag { margin: 0; padding: 12px 18px 0; text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; color: var(--muted); }
.founder-flag + .post .post-top { padding-top: 8px; }
.pager { margin: 20px 0 40px; }

/* home feed (index.php adds .tl): one column with hairlines left and right */
.layout.tl > .main-col { border-left: 1px solid var(--line); border-right: 1px solid var(--line); min-height: 100vh; }
.tl > .main-col > .card, [data-theme="dark"] .tl > .main-col > .card { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; }
.tl > .main-col > .stories { padding: 16px 18px 12px; }
.tl > .main-col > .composer { padding: 14px 18px 10px; }
.tl .composer-row textarea { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 10px 0; font-size: 1.15rem; min-height: 48px; }
.tl .composer-row textarea::placeholder { color: var(--faint); }
.composer-foot select { max-width: 150px; font-size: .85rem; }
.tl > .main-col > .qotd { border-left: 0; padding: 14px 18px; }
.qotd-label { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--muted); }
.qotd-q { font-size: 1.1rem; font-weight: 700; margin: 4px 0 10px; }
.tl > .main-col > .tabs { position: sticky; top: var(--hdr-total, var(--header-h)); z-index: 20; margin: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tl > .main-col > .tabs .tab { flex: 1 0 auto; text-align: center; }
.tl .empty { border: 0 !important; background: transparent !important; }

/* side columns: quiet filled panels */
.side-col { gap: 16px; }
.side-col .card, [data-theme="dark"] .side-col .card { background: var(--soft); border: 0; border-radius: 18px; }
.side-card h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; }

/* ---------- sidebar pieces that only exist for the app shell ---------- */
.nav-more > summary { list-style: none; cursor: pointer; }
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-search, .nav-yours, .nav-more, .nav-strength, .me-dots, .me-sub { display: none; }
.nav-post { display: flex; align-items: center; gap: 8px; }
.me-stats { display: flex; gap: 6px; padding: 2px 6px 4px; }
.me-menu .me-stats a { flex: 1; display: block; padding: 8px 10px; background: var(--soft); border-radius: 12px; font-size: .8rem; color: var(--muted); }
.me-stats b { display: block; font-size: 1.05rem; color: var(--ink); }
.me-label b { font-weight: 700; }
.me-foot { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 8px 10px 4px; font-size: .76rem; }
.me-menu .me-foot a { display: inline; width: auto; padding: 0; color: var(--faint); font-size: inherit; }
.me-menu .me-foot a:hover { background: none; color: var(--ink); }

@media (min-width: 761px) {
  body.is-member { --side-w: 76px; --header-h: 0px; padding-left: var(--side-w); }
  .is-member .topbar { position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: var(--side-w); border: 0; border-right: 1px solid var(--line); background: var(--bg) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .is-member .tb-inner { flex-direction: column; align-items: stretch; height: 100%; max-width: none; margin: 0; padding: 12px 12px 10px; gap: 6px; }
  .is-member .logo { height: 48px; padding: 0 9px; flex: none; }
  .is-member .logo-word, .is-member .top-search { display: none; }
  .is-member .nav-links { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 2px; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); padding-bottom: 20px; }
  .is-member .nav-links::-webkit-scrollbar { display: none; }
  .is-member .nav-item { flex: none; flex-direction: row; justify-content: center; gap: 14px; min-width: 0; height: 44px; padding: 0; border: 0 !important; border-radius: 14px; color: var(--ink); font-size: 1.05rem; font-weight: 500; transition: background .12s; }
  .is-member .nav-item:hover { background: var(--hover); }
  .is-member .nav-item.active { font-weight: 800; }
  .is-member .nav-item.active .nav-ic svg { stroke-width: 2.6; }
  .is-member .nav-ic { width: 24px; height: 24px; align-items: center; justify-content: center; flex: none; }
  .is-member .nav-label { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .is-member .nav-badge { top: -7px; right: -9px; border-color: var(--bg); }
  .nav-search, .nav-more, .nav-yours { display: block; }
  .is-member .nav-search { display: flex; }
  .nav-more-list, .nav-yours { display: flex; flex-direction: column; gap: 2px; }
  .nav-yours { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .nav-sub { display: none; align-items: center; justify-content: space-between; padding: 6px 14px 4px; font-size: .8rem; font-weight: 700; color: var(--faint); }
  .nav-sub a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); }
  .nav-sub a:hover { background: var(--hover); color: var(--ink); }
  .is-member .nav-space { height: 40px; font-size: .95rem; }
  .nav-space .net-logo { border-radius: 7px; }
  .nav-emoji { font-size: 1.15rem; line-height: 1; }
  .nav-space-new .nav-ic { border: 1.5px dashed var(--faint); border-radius: 7px; color: var(--muted); }

  .is-member .nav-me { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; padding-top: 8px; flex: none; }
  .nav-post { flex-direction: column; }
  .is-member .qp-open { width: 48px; height: 48px; padding: 0; justify-content: center; font-size: 1.05rem; margin: 0 auto; }
  .is-member .qp-open span { display: none; }
  .is-member .create-toggle { width: 40px; height: 40px; background: transparent; border: 1px solid var(--line); color: var(--ink); }
  .is-member .create-toggle:hover { background: var(--hover); transform: none; }
  .is-member .me-chip { flex-direction: row; align-items: center; gap: 10px; width: 100%; padding: 6px; border-radius: 999px; color: var(--ink); text-align: left; justify-content: center; }
  .is-member .me-chip:hover { background: var(--hover); }
  .is-member .me-chip .avatar, .is-member .me-chip .av-on { width: 38px !important; height: 38px !important; }
  .is-member .me-label { display: none; }
  .is-member .nav-me .me-menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; max-height: calc(100vh - 90px); overflow-y: auto; }
  .is-member .create-menu { bottom: 0 !important; left: calc(100% + 8px) !important; }
  .is-member .me-discover, .is-member .me-discover-sep { display: none; }

  /* content */
  .is-member .shell { max-width: 1100px; margin: 0 auto; padding: 22px 24px 80px; }
  .is-member .shell:has(.layout.tl) { padding-top: 0; }
  .is-member .layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
  .is-member .layout.tl { grid-template-columns: minmax(0, 640px) minmax(0, 340px); justify-content: center; }
  .is-member .layout.np-wide { grid-template-columns: minmax(0, 1fr); }
  .is-member .tl > .side-col { padding-top: 16px; top: 0; max-height: 100vh; }
  body.is-member.dm-page .shell { max-width: none; padding: 0; }
  body.is-member .site-footer { display: none; }
  .is-member .top-search.expanded { display: flex; top: 14vh; }
  .is-member .top-search.expanded input { border-radius: 16px !important; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .is-member .layout, .is-member .layout.tl { grid-template-columns: minmax(0, 640px); justify-content: center; }
  .is-member .tl > .side-col { max-height: none; }
}
@media (min-width: 1280px) {
  body.is-member { --side-w: 272px; }
  .is-member .tb-inner { padding: 10px 14px 12px; }
  .is-member .logo { padding: 0 12px; }
  .is-member .logo-word { display: inline; font-size: 1.45rem; }
  .is-member .top-search { display: flex; flex: none; margin: 4px 0 8px; }
  .is-member .top-search input { padding-top: 10px; padding-bottom: 10px; }
  .is-member .search-pop { width: 420px; }
  .is-member .nav-search { display: none; }
  .is-member .nav-item { justify-content: flex-start; padding: 0 14px; }
  .is-member .nav-label { display: block; }
  .nav-sub { display: flex; }
  .nav-yours { border-top: 0; margin-top: 4px; padding-top: 0; }
  .is-member .nav-space { padding-left: 14px; font-weight: 500; }
  .nav-strength { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--soft); font-size: .82rem; color: var(--muted); text-decoration: none !important; }
  .nav-strength b { color: var(--ink); }
  .nav-post { flex-direction: row; }
  .is-member .qp-open { flex: 1; width: auto; height: 50px; font-size: 1.05rem; font-weight: 800; }
  .is-member .qp-open span { display: inline; }
  .is-member .create-toggle { width: 50px; height: 50px; }
  .is-member .create-menu { bottom: calc(100% + 8px) !important; left: 0 !important; }
  .is-member .me-chip { justify-content: flex-start; padding: 8px 10px; }
  .is-member .me-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1; font-size: .95rem; line-height: 1.2; }
  .me-sub { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--muted); font-weight: 500; }
  .me-sub .streak { font-size: .8rem; }
  .me-dots { display: inline-flex; color: var(--muted); }
}

/* ---------- phones: top bar + bottom tabs ---------- */
@media (max-width: 760px) {
  .is-member .topbar { background: color-mix(in srgb, var(--bg) 88%, transparent) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .is-member .me-chip { padding: 0; }
  .is-member .me-chip .avatar, .is-member .me-chip .av-on { width: 32px !important; height: 32px !important; }
  .shell { padding-top: 0; }
  .card { margin-bottom: 0; border-top: 0; }
  .side-col { padding: 12px; }
  .side-col .card { border-radius: 18px; }
  .bottombar { background: color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .bottombar a { color: var(--ink); }
  .bottombar a.active { color: var(--brand); }
  .bottombar .bb-label { display: none; }
  .bottombar .bb-icon svg { width: 26px; height: 26px; }
  .bb-post .bb-icon { border-radius: 999px; padding: 6px 14px; }
}

/* ==========================================================================
   Motion (2026-11-12): the feel of the hepays stream, for duno.
   Likes answer instantly (spring heart, ring, sparkles, rolling number, your
   face popping in), new posts grow into the timeline, more posts and tab
   changes ease in. Everything respects "reduce motion".
   ========================================================================== */
:root { --like: #f0245e; --like-50: #fde7ee; --spring: cubic-bezier(.3, 1.7, .5, 1); --glide: cubic-bezier(.2, .8, .2, 1); }
[data-theme="dark"] { --like: #ff4d7d; --like-50: #33131d; }

/* the like control: heart + number, no pill */
.post-vote, .post-vote:has(.pv-up.on) { background: transparent; border: 0; padding: 0; height: 36px; gap: 0; }
.pv-btn { position: relative; width: 36px; height: 36px; transition: background .15s, color .15s, transform .12s var(--glide); }
.pv-btn:hover { background: var(--hover); }
.pv-up:hover { color: var(--like); background: var(--like-50); }
.pv-btn:active { transform: scale(.82); }
.pv-up.on, .pv-up.on:hover { color: var(--like); background: transparent; }
.pv-up.on:hover { background: var(--like-50); }
.pv-up svg, .pv-down svg { transition: fill .15s, transform .12s; }
.pv-up.on svg, .pv-down.on svg { animation: none; }               /* no replay on every page load */
.pv-up.pop svg { animation: tlHeart .55s var(--spring); }
.pv-down.pop svg { animation: tlNudge .4s var(--glide); }
.pv-up.pop::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid var(--like); pointer-events: none; animation: tlRing .5s var(--glide) forwards; }
@keyframes tlHeart { 0% { transform: scale(.35); } 55% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes tlNudge { 0% { transform: translateY(0); } 45% { transform: translateY(4px) scale(.92); } 100% { transform: none; } }
@keyframes tlRing { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; border-width: 0; } }
.pv-score { display: inline-block; min-width: 18px; padding: 0 4px 0 0; font-weight: 600; color: var(--muted); transition: color .15s; }
.post-vote.is-up .pv-score, .post-vote:has(.pv-up.on) .pv-score { color: var(--like); font-weight: 700; }
.pv-score.roll-up { animation: tlRollUp .32s var(--glide); }
.pv-score.roll-down { animation: tlRollDown .32s var(--glide); }
@keyframes tlRollUp { 0% { transform: translateY(70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes tlRollDown { 0% { transform: translateY(-70%); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* who liked it: small face stack in front of "+N points" */
.post-actions + .post-stats { padding: 0 18px 12px; margin-top: -2px; }
.stat-score { gap: 6px; }
.stat-score .sh { stroke: var(--like); fill: var(--like); }
.pv-faces { display: inline-flex; align-items: center; }
.pv-faces:empty { display: none; }
.pv-faces .avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -7px; background: var(--soft); box-sizing: content-box; }
.pv-faces .avatar:first-child { margin-left: -2px; }
.pv-faces .avatar.is-new { animation: tlFace 1.1s var(--spring); }
@keyframes tlFace { 0% { transform: scale(0) rotate(-20deg); opacity: 0; box-shadow: 0 0 0 2px var(--like), 0 0 12px var(--like); } 55% { transform: none; opacity: 1; box-shadow: 0 0 0 2px var(--like), 0 0 12px var(--like); } 100% { box-shadow: 0 0 0 0 transparent; } }
.stat-score.stat-in { animation: tlStatIn .3s var(--glide); }
@keyframes tlStatIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* every action under a post gives when pressed */
.post-actions .btn-comment, .post-actions .btn-repost, .post-actions .btn-share, .post-actions .btn-save { transition: background .15s, color .15s, transform .12s var(--glide); }
.post-actions .btn-comment:active, .post-actions .btn-repost:active, .post-actions .btn-share:active, .post-actions .btn-save:active { transform: scale(.94) !important; }
.post-actions .btn-save svg { transition: fill .15s; }
.post-actions .btn-save.active svg { fill: currentColor; }
.btn:active { transform: scale(.97) !important; }
.btn { transition: background .15s, color .15s, border-color .15s, transform .12s var(--glide); }
.tab { transition: color .15s, border-color .2s, background .15s; }
.poll-fill { transition: width .6s var(--glide); }
.comment-thread.pc-new { animation: tlIn .32s var(--glide) both; }

/* the stream itself */
@keyframes tlIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
.post.tl-in { animation: tlIn .42s var(--glide) both; animation-delay: calc(var(--i, 0) * 50ms); }
#feed.tl-leaving, .tl-leaving { opacity: .45; transition: opacity .18s; pointer-events: none; }
.tl-swap > .post, .tl-swap > .founder-feature, .tl-swap > .card { animation: tlIn .36s var(--glide) both; }
.tl-swap > :nth-child(2) { animation-delay: 45ms; } .tl-swap > :nth-child(3) { animation-delay: 90ms; }
.tl-swap > :nth-child(4) { animation-delay: 135ms; } .tl-swap > :nth-child(n+5) { animation-delay: 180ms; }
.post-ghost { padding: 14px 18px; animation: tlGrow .34s var(--glide) both; }
@keyframes tlGrow { 0% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } 100% { max-height: 420px; opacity: .9; } }
.pg-bar { margin: 12px -18px -14px; }
.post.just-posted { animation: tlPosted 1.8s ease both; }
@keyframes tlPosted { 0% { opacity: .4; background: var(--brand-50); } 15% { opacity: 1; } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .pv-up.pop svg, .pv-down.pop svg, .pv-score.roll-up, .pv-score.roll-down, .pv-faces .avatar.is-new, .stat-score.stat-in,
  .post.tl-in, .tl-swap > *, .post-ghost, .post.just-posted, .comment-thread.pc-new { animation: none !important; }
  .pv-up.pop::after { display: none; }
  .btn:active, .pv-btn:active { transform: none !important; }
}