/* KagTuk web — the night. Tokens mirror ios/App/Sources/NightKit.swift
   (Night.ink/muted/gold/rose…, the sky gradient, the sibling-set wheel).
   When a color or radius changes in NightKit, change it here too. */
:root {
  --ink: #EEF1FF;
  --muted: #9AA4C7;
  --gold: #E8B64C;
  --rose: #F2789F;
  --jade: #46D5B3;
  --orchid: #C88BFA;
  --indigo: #6F86F7;
  --coral: #EF8A70;
  --lime: #B7D65C;
  --tangerine: #F6913F;
  --on-gold: #1A1206;
  --on-ink: #0C1029;
  --sky-top: #181F4A;
  --sky-mid: #0C1029;
  --sky-deep: #06081A;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.09);
  --line: rgba(255,255,255,0.12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  --gold-gradient: linear-gradient(180deg, #F7B25A 0%, #E07A2B 100%);
  --radius: 20px;
  --radius-sm: 14px;
  --col: 640px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  background: radial-gradient(120% 120% at 50% 14%, var(--sky-top) 0, var(--sky-mid) 46%, var(--sky-deep) 100%);
  background-attachment: scroll; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }
::selection { background: rgba(232,182,76,0.35); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; letter-spacing: 0.1px; }
.serif { font-family: var(--serif); }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
.rose { color: var(--rose); }
.small { font-size: 11.5px; }
.tiny { font-size: 10.5px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.hidden { display: none !important; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* stars */
.sky-stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; }

/* glass surfaces */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.glass-sm { border-radius: var(--radius-sm); }
.well {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 24px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  font-size: 11px; font-weight: 600; color: var(--muted);
}
.pill.gold { background: rgba(232,182,76,0.16); border-color: rgba(232,182,76,0.45); color: var(--gold); }
.pill.rose { background: rgba(242,120,159,0.85); border-color: transparent; color: var(--on-ink); }
.pill.jade { background: rgba(70,213,179,0.16); border-color: rgba(70,213,179,0.45); color: var(--jade); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 999px;
  font-weight: 600; font-size: 13.5px;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink);
  transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.btn:hover { background: var(--glass-strong); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.gold { background: var(--gold-gradient); border-color: transparent; color: var(--on-gold); box-shadow: 0 6px 18px rgba(232,150,60,0.35); }
.btn.gold:hover { filter: brightness(1.05); }
.btn.rose { background: rgba(242,120,159,0.16); border-color: rgba(242,120,159,0.5); color: var(--rose); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--ink); background: var(--glass); }
.btn.sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.btn.lg { height: 48px; padding: 0 26px; font-size: 15px; }
.btn.wide { width: 100%; }
.iconbtn {
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass); border: 1px solid var(--line); color: var(--muted);
}
.iconbtn:hover { color: var(--ink); background: var(--glass-strong); }

/* inputs */
.input {
  width: 100%; height: 44px; padding: 0 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm); outline: none;
}
.input:focus { border-color: rgba(232,182,76,0.6); }
textarea.input { height: auto; min-height: 90px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; background-image: none; }
select.input option { color: #111; background: #fff; }
.label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 6px; }
.switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.15); transition: background .15s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: var(--tangerine); }
.switch.on::after { transform: translateX(18px); }
.switch.rose.on { background: rgba(242,120,159,0.85); }

/* avatars / rings (StoryAvatar) */
.avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.07); flex: none;
  color: var(--ink); overflow: visible;
}
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* a face that opens a profile has to look like it does (founder,
   2026-09-08). The one avatar that already navigated never showed a
   pointer, which is why nobody found it. */
.avatar[role="button"] { cursor: pointer; }
.who-link { cursor: pointer; }
.who-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.avatar .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ring, rgba(255,255,255,0.75)); pointer-events: none; }
.avatar .emoji { line-height: 1; user-select: none; }
.avatar .dot { position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--jade); border: 2px solid var(--sky-mid); }
.avatar .dashed { position: absolute; inset: -3px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.35); }

/* layout */
.shell { position: relative; z-index: 1; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 28px; max-width: 1280px; margin: 0 auto; padding: 22px 28px 60px; min-height: 100vh; }
.shell.narrow { grid-template-columns: 240px minmax(0, 1fr); }
.sidebar { position: sticky; top: 22px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.brand img { width: 34px; height: 34px; }
.brand b { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; border-radius: 14px; color: var(--muted); font-weight: 600; font-size: 14px; }
.nav a:hover { color: var(--ink); background: var(--glass); }
.nav a.active { color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line); }
.nav a .badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.nav svg { width: 18px; height: 18px; }
.main { min-width: 0; }
.rail { position: sticky; top: 22px; align-self: start; display: flex; flex-direction: column; gap: 16px; }
.page-title { font-size: 28px; }
.page-sub { font-family: var(--serif); font-style: italic; color: var(--muted); margin-top: 4px; }
.section-title { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: 0.2px; margin: 18px 0 10px; }
.card { padding: 14px 16px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.rowcard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 54px; cursor: pointer; }
.rowcard:hover { background: var(--glass-strong); }
.chev { color: var(--muted); }
.divider { height: 1px; background: var(--line); margin: 6px 0; }
.error { color: var(--rose); font-size: 12.5px; }
.note { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.fab { position: fixed; right: 36px; bottom: 36px; width: 60px; height: 60px; border-radius: 50%; background: var(--gold-gradient); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(240,145,63,0.45); z-index: 20; }
.fab:hover { filter: brightness(1.06); }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,6,20,0.72); backdrop-filter: blur(6px); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; padding: 22px 24px 24px; background: linear-gradient(180deg, #151B44, #0C1029); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.modal.wide { width: min(820px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-head h2 { font-size: 20px; }

/* home: centre column + rail */
.home-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 28px; align-items: start; }
.home-grid .rail { position: sticky; top: 22px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } .home-grid .rail { display: none; } }

/* feed */
.feed { display: flex; flex-direction: column; gap: 16px; }
.post { padding: 14px 16px; }
.post .head { display: flex; align-items: center; gap: 10px; }
.post .body { margin: 10px 0 6px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.post .body.story { font-family: var(--serif); font-style: italic; font-size: 15.5px; flex: 1; min-width: 0; margin: 4px 0 6px; }
.media-wrap { margin: 10px 0; }
/* one at a time, swipeable — the strip takes the shape of the slide you
   are on (founder ruling 2026-09-04) */
/* ONE SWIPE, ONE PICTURE (founder ruling 2026-09-04): a transform pager,
   not native scroll-snap — the box changes shape with every picture, and
   resizing a scroll container mid-fling loses the snap. */
.media-grid { position: relative; overflow: hidden; border-radius: 14px; touch-action: pan-y;
  /* the track is absolutely positioned, so the box has no height of
     its own: without a shape to start from it collapses to nothing and
     the picture never appears. The real one replaces this inline as
     soon as a size is known (founder 2026-09-04). */
  aspect-ratio: 4 / 3; }
/* The track FILLS the box (founder 2026-09-04: a landscape picture in a
   moment whose box is locked to a portrait was landing at the top with a
   gap under it). A percentage height against a box whose own height comes
   from aspect-ratio does not resolve, so the slide collapsed to the
   picture's own height; inset:0 makes it definite and the picture centres. */
.media-track { position: absolute; inset: 0; display: flex; }
.media-grid .m { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.media-grid .m img, .media-grid .m video { -webkit-user-drag: none; user-select: none; }
/* chevrons over the picture's edges — desktop only, where there is no swipe */
.edge-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(6,9,26,0.55); border: 1px solid rgba(255,255,255,0.16); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; opacity: 0; transition: opacity .15s; z-index: 2; }
.media-grid:hover .edge-arrow { opacity: 1; }
.edge-arrow.left { left: 8px; } .edge-arrow.right { right: 8px; }
.edge-arrow:disabled { opacity: 0 !important; pointer-events: none; }
/* the row under the picture: ‹ dots › */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; }
.pager-arrow { width: 24px; height: 24px; border-radius: 50%; color: var(--muted); font-size: 17px; line-height: 1; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid var(--line); }
.pager-arrow:hover:not(:disabled) { color: var(--ink); background: rgba(255,255,255,0.12); }
.pager-arrow:disabled { opacity: 0.3; cursor: default; }
.dots { display: flex; gap: 6px; justify-content: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); cursor: pointer; }
.dots i.on { background: var(--gold); }
/* the letterbox around a landscape picture in a locked box is the CARD,
   not a lighter panel (founder 2026-09-04: "that gap space same color as
   the feed box … so that it is smooth") */
.media-grid .m { position: relative; border-radius: 14px; overflow: hidden; background: transparent; }
/* founder ruling 2026-09-04: nothing in the feed is ever cropped */
.media-grid .m img, .media-grid .m video { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-grid { margin: 0 auto; }


.react { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.react button { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; padding: 2px 0; }
.react button .glyph { width: 22px; height: 22px; }
.react button.muted .glyph { width: 17px; height: 17px; }
.react button .emoji { font-size: 20px; line-height: 1; }
.react button .count { font-size: 13px; color: var(--muted); }
.react button.on { color: var(--rose); }
.react-right { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
@media (max-width: 760px) { .react button .glyph { width: 20px; height: 20px; } .react button.muted .glyph { width: 16px; height: 16px; } }
.reactors { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.reactors i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: 36px; min-width: 200px; padding: 6px; background: #151B44; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.5); z-index: 30; }
.menu-list button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 13px; }
.menu-list button:hover { background: var(--glass-strong); }
.menu-list button.danger { color: var(--rose); }
.comments-box { padding: 4px 14px; }
/* a desktop feed card unfolds its thread in place (founder, 2026-09-16) */
.inline-comments { margin-top: 10px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); }
.inline-comments h3 { margin: 8px 0 8px !important; font-size: 15px !important; }
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.07); }
.comment:first-child { border-top: 0; }
.comment .bubble { flex: 1; min-width: 0; }
.comment .bubble .who { font-size: 12.5px; font-weight: 700; }
.comment .bubble .text { font-size: 13.5px; line-height: 1.45; margin-top: 2px; word-break: break-word; }
.comment .acts { display: flex; gap: 14px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.comment .acts button { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.comment .acts button.on { color: var(--rose); }
.comment.reply { padding-left: 36px; border-top: 0; padding-top: 6px; }
.replying { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 10px; }
.replying button { color: var(--rose); font-weight: 700; }
.thread-gutter { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; min-width: 0; }
.thread-gutter .line { position: relative; }
.thread-gutter .line::before { content: ""; position: absolute; left: 12px; top: 0; bottom: -16px; width: 2px; background: rgba(255,255,255,0.08); }
.thread-gutter .line i { position: absolute; left: 6px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--orchid)); box-shadow: 0 0 12px var(--dot, var(--orchid)); }

/* stories row */
.stories { display: flex; gap: 18px; padding: 6px 2px 14px; overflow-x: auto; }
.story { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 70px; flex: none; cursor: pointer; }
.story .halo { position: absolute; inset: -6px; border-radius: 50%; background: var(--ring); opacity: 0.14; }
.story .plus { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--tangerine); border: 2.5px solid var(--sky-mid); color: var(--on-gold); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.story .name { font-size: 10.5px; color: var(--muted); max-width: 70px; }
.story.mine .name { color: var(--ink); }

/* tonight strip */
.tonight { display: flex; gap: 10px; overflow-x: auto; padding: 3px 0; }
/* EdgeScroller (ui.js, 2026-09-18): no scrollbar ever — an edge with more
   behind it fades the panels out (a mask, so the sky shows through) and
   carries a faint arrowhead; hovering the fade brings the arrowhead up,
   a click moves one panel */
.edge-scroller { position: relative; }
.edge-track { position: relative; scrollbar-width: none; -ms-overflow-style: none; }
.edge-track::-webkit-scrollbar { display: none; }
.edge-scroller.can-next .edge-track {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}
.edge-scroller.can-back .edge-track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px);
  mask-image: linear-gradient(to right, transparent, #000 64px);
}
.edge-scroller.can-back.can-next .edge-track {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
.edge-nav {
  position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2;
  display: flex; align-items: center; color: var(--ink);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
.edge-nav.back { left: 0; justify-content: flex-start; padding-left: 8px; }
.edge-nav.next { right: 0; justify-content: flex-end; padding-right: 8px; }
.edge-nav svg { transition: transform .18s ease; }
.can-back .edge-nav.back, .can-next .edge-nav.next { opacity: 0.35; pointer-events: auto; cursor: pointer; }
@media (hover: hover) {
  .can-back .edge-nav.back:hover, .can-next .edge-nav.next:hover { opacity: 1; }
  .edge-nav.back:hover svg { transform: translateX(-2px) scale(1.1); }
  .edge-nav.next:hover svg { transform: translateX(2px) scale(1.1); }
}
/* a finger swipes: the arrowhead stays faint and takes only a sliver of
   the edge, so a swipe that starts near it still moves the row */
@media (hover: none) { .edge-nav { width: 34px; padding: 0 !important; justify-content: center !important; } }
/* the Stories row: the arrowhead sits on the faces, not between face and name */
.edge-scroller.faces .edge-nav { bottom: 34px; }
.tonight .t { flex: none; display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 12px 14px 12px 12px; border-left: 3px solid var(--accent, var(--jade)); }
.tonight .t b { display: block; font-size: 13px; }
/* the sub line only — a bare `.t span` also shrank the face emoji inside
   the tile avatar to 11px */
.tonight .t > div > span { font-size: 11px; color: var(--muted); }
/* the joins strip (2026-09-18): up to three overlapped faces per shelf */
.tonight .t.join-tile { cursor: pointer; }
.join-faces { display: inline-flex; align-items: center; flex: none; }
.join-face { display: inline-flex; position: relative; border-radius: 50%; background: #101530; }
.joined-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; }
.joined-row { padding: 10px 12px; gap: 12px; cursor: pointer; }
.joined-row:hover { background: rgba(255,255,255,0.06); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 13px; }
.chip.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--jade)); }

/* tree */
.tree-wrap { position: relative; height: calc(100vh - 120px); min-height: 560px; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: radial-gradient(120% 100% at 50% 0%, rgba(24,31,74,0.6), rgba(6,8,26,0.4)); }
.tree-wrap svg { width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; }
.tree-badge { cursor: pointer; }
.tree-chip { cursor: pointer; }
.tree-wrap svg:active { cursor: grabbing; }
.tree-chrome { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.tree-chrome > * { pointer-events: auto; }
.tree-pill { height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(12,16,41,0.8); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.tree-card { cursor: pointer; }
.tree-card .card-bg { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.15); }
.tree-card.focus .card-bg { stroke: var(--ring); }
.tree-card text { font-family: var(--sans); fill: var(--ink); }
.tree-card .sub { fill: var(--muted); font-size: 8.8px; }
.tree-card .age { fill: var(--ring); }
.tree-card:hover .card-bg { fill: rgba(255,255,255,0.1); }

/* dates ring */
.date-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.date-row .when { margin-left: auto; padding: 0 10px; height: 26px; border-radius: 999px; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; background: rgba(255,255,255,0.08); color: var(--muted); }
.date-row .when.soon { background: rgba(70,213,179,0.18); color: var(--jade); }
.presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.preset { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 62px; justify-content: center; border-radius: 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: 10px; color: var(--muted); }
.preset span { font-size: 20px; }
.preset.on { background: rgba(232,182,76,0.18); border-color: rgba(232,182,76,0.75); color: var(--ink); }

/* chats */
.chat-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; height: calc(100vh - 120px); min-height: 520px; }
.chat-list { overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.chat-room { display: flex; flex-direction: column; min-height: 0; }
.chat-msgs { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72%; padding: 9px 13px; border-radius: 18px; background: rgba(255,255,255,0.07); border: 1px solid var(--line); font-size: 13.5px; align-self: flex-start; }
.msg.me { align-self: flex-end; background: rgba(232,182,76,0.2); border-color: rgba(232,182,76,0.4); }
.msg .who { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 2px; }
.msg .when { display: block; font-size: 9.5px; color: var(--muted); margin-top: 3px; text-align: right; }
.chat-input { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }

/* profile */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px 20px; }
.stats { display: flex; gap: 10px; width: 100%; }
.stat { flex: 1; text-align: center; padding: 12px; }
.stat b { display: block; font-size: 22px; }
.stat span { font-size: 11.5px; color: var(--muted); }
.tabs { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.tabs button { flex: 1; height: 36px; border-radius: 999px; font-weight: 600; color: var(--muted); }
.tabs button.on { background: var(--ink); color: var(--on-ink); }
/* INSTAGRAM'S GRID (founder, 2026-09-16): three across, a hairline between, 3:4 portrait, corners barely rounded */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.05); cursor: pointer; }
/* the kept-story shelf (ADR 0026): gold-ringed circles under the actions */
/* the highlight shelves (founder, 2026-09-16/17): its own panel under the profile card, same width; circles a step bigger than a story ring; "+ New" leads */
.shelf-panel { width: 100%; margin-top: 10px; padding: 10px 14px; }
.shelf { display: flex; gap: 16px; overflow-x: auto; width: 100%; justify-content: flex-start; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.hl { display: flex; flex-direction: column; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--ink); cursor: pointer; width: 74px; flex: none; }
.hl:disabled { cursor: default; opacity: 0.6; }
/* the ring wears the person's set colour (--set on the shelf panel), never gold (founder, 2026-09-17) */
.hl .face, .hl-face { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.07) center / cover no-repeat; border: 2px solid var(--set, var(--gold)); display: grid; place-items: center; font-size: 18px; color: var(--ink); flex: none; }
.hl.empty .face, .hl-face.dashed { border: 2px dashed rgba(255,255,255,0.3); color: var(--gold); font-size: 22px; }
.hl .lbl { font-size: 11px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; background: transparent; border: 0; color: var(--ink); cursor: pointer; border-top: 1px solid rgba(255,255,255,0.07); }
.hl-row:first-child { border-top: 0; }
.hl-row .hl-face { width: 48px; height: 48px; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pick-tile { aspect-ratio: 3 / 4; border-radius: 10px; background: rgba(255,255,255,0.07) center / cover no-repeat; border: 1px solid rgba(255,255,255,0.12); color: var(--gold); font-size: 22px; font-weight: 700; cursor: pointer; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.pick-tile.on { border: 2.5px solid var(--gold); }
/* one-tap answers on a relative's story */
.quick-reacts { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; gap: 6px; align-items: center; }
.quick-reacts button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); font-size: 20px; border: 0; cursor: pointer; transition: transform 0.15s; }
.quick-reacts button.on { background: rgba(232,182,76,0.45); transform: scale(1.15); }
.quick-reacts .tiny { color: #fff; font-weight: 600; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 12px; line-height: 1.3; color: var(--ink); text-align: center; }
.tile .txt > span { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.tile .txt.story { font-family: var(--serif); font-style: italic; }
.tile .dotk { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; }
/* hidden from the profile: only the owner sees it, dimmed (2026-09-16) */
.tile.hidden img, .tile.hidden video, .tile.hidden .txt { opacity: 0.45; }
.tile .tile-hidden { position: absolute; left: 8px; bottom: 8px; font-size: 14px; background: rgba(0,0,0,0.55); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; }
.tile .tile-more { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; border: 0; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.tile:hover .tile-more { opacity: 1; }
@media (max-width: 760px) { .tile .tile-more { opacity: 0.85; } }

/* settings */
.setting { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-height: 54px; }
.setting .ic { width: 24px; color: var(--indigo); text-align: center; }
.setting b { display: block; font-weight: 500; font-size: 14px; }
.setting span { display: block; font-size: 11px; color: var(--muted); }
.setting:hover { background: var(--glass-strong); cursor: pointer; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: #151B44; border: 1px solid var(--line); color: var(--ink); font-size: 13px; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.toast.error { border-color: rgba(242,120,159,0.6); color: var(--rose); }
/* a deploy landed while this tab was open (update.js) */
.update-nudge { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px; border-radius: 999px; background: #151B44; border: 1px solid rgba(232,182,76,0.5); color: var(--ink); font-size: 13px; z-index: 60; box-shadow: 0 12px 40px rgba(0,0,0,0.45); max-width: calc(100vw - 32px); }
.update-nudge .btn { height: 32px; padding: 0 14px; }

/* auth */
.auth { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.auth .box { width: min(440px, 100%); padding: 30px 30px 26px; }
.auth h1 { font-size: 30px; }
.code { letter-spacing: 8px; font-size: 24px; text-align: center; font-family: var(--serif); }

@media (max-width: 1100px) { .shell { grid-template-columns: 220px minmax(0,1fr); } .rail { display: none; } }
.fab-compose { display: none; }
@media (max-width: 760px) {
  body { font-size: 14px; }
  .shell, .shell.narrow { display: block; padding: 18px 12px 96px; overflow-x: hidden; }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .home-grid > * { min-width: 0; }
  /* the sidebar becomes the iOS-style bottom tab bar */
  .sidebar { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; z-index: 40; flex-direction: row; align-items: center; gap: 0; padding: 6px 8px; border-radius: 999px; background: rgba(12,16,41,0.92); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,0.55); backdrop-filter: blur(14px); }
  .sidebar .brand, .sidebar .note, .sidebar > div { display: none; }
  .nav { display: flex; flex: 1; justify-content: space-around; }
  .nav a { flex-direction: column; gap: 3px; height: 50px; padding: 0 6px; border-radius: 16px; font-size: 9.5px; font-weight: 600; }
  .nav a.active { background: transparent; border: 0; color: var(--ink); }
  .nav a.active::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--jade); margin-top: 1px; }
  .nav svg { width: 22px; height: 22px; }
  .nav a .badge { position: absolute; top: -2px; right: -2px; margin: 0; min-width: 16px; height: 16px; font-size: 9px; }
  .nav a { position: relative; }
  .fab-compose { display: flex; position: fixed; right: 18px; bottom: 82px; width: 56px; height: 56px; border-radius: 50%; background: var(--gold-gradient); color: #fff; font-size: 30px; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(240,145,63,0.45); z-index: 41; }
  .page-title { font-size: 24px; }
  .home-grid { grid-template-columns: 1fr; } .home-grid .rail { display: none; }
  .tonight .t { min-width: 170px; }
  /* five generation chips never fit a phone: one scrolling row, like iOS */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex: none; }
  .chat-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .chat-room { height: 60vh; }
  /* the tree earns the screen on a phone (founder, 2026-09-04) */
  .tree-wrap { height: calc(100dvh - 132px); min-height: 460px; border-radius: 18px; }
  .shell.tree-shell { padding-left: 6px; padding-right: 6px; }
  .tree-chrome { flex-wrap: wrap; gap: 6px; }
  .tree-pill { height: 34px; padding: 0 12px; font-size: 12px; }
  .tree-zoom { display: none; }
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal, .modal.wide { width: 100%; max-height: 94vh; border-radius: 24px 24px 0 0; padding: 18px 16px 24px; }
  .presets { grid-template-columns: repeat(5, 1fr); gap: 6px; } .preset { height: 58px; font-size: 9px; }
  .grid3 { gap: 6px; }
  .stats { gap: 6px; } .stat b { font-size: 18px; }
  .profile-head { padding: 18px 14px 16px; }
  .auth { padding: 18px; align-items: start; padding-top: 12vh; }
  .auth .box { padding: 24px 20px 22px; }
  .auth h1 { font-size: 26px; }
  .toast { bottom: 90px; max-width: calc(100% - 40px); text-align: center; }
  /* the box already carries the photo ratio and the screen cap */
}
@keyframes spin { to { transform: rotate(360deg); } }

/* full-screen viewer */
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(2,3,12,0.96); display: flex; align-items: center; justify-content: center; }
.viewer-stage { max-width: 100vw; max-height: 100vh; display: flex; align-items: center; justify-content: center; }
.viewer-stage img { max-width: 100vw; max-height: 100vh; width: auto; height: auto; object-fit: contain; display: block; }
.viewer-stage video { width: 100vw; height: 100vh; object-fit: contain; display: block; background: #000; }
.viewer-close { position: fixed; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #fff; font-size: 18px; z-index: 101; }
.viewer-count { position: fixed; top: 24px; left: 20px; color: rgba(255,255,255,0.8); font-size: 13px; z-index: 101; }
.viewer-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(6,9,26,0.62); border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 30px; line-height: 1; z-index: 101; display: grid; place-items: center; }
.viewer-arrow:hover:not(:disabled) { background: rgba(6,9,26,0.85); }
.viewer-arrow:disabled { opacity: 0.25; cursor: default; }
.viewer-arrow.left { left: 14px; } .viewer-arrow.right { right: 14px; }
/* ‹ dots › under the picture, full screen — works on a phone too */
.viewer-pager { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 999px; background: rgba(6,9,26,0.62); border: 1px solid rgba(255,255,255,0.16); z-index: 101; }
.viewer-pager .dots i { width: 7px; height: 7px; }
.media-grid .m.playing .play { display: none; }
.media-grid .m .snd { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.media-grid .m .snd { display: inline-flex; }
.media-grid .m .snd .sl { display: none; }
.media-grid .m.muted .snd .wv { display: none; }
.media-grid .m.muted .snd .sl { display: block; }
.media-grid .m .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; pointer-events: none; }
.media-grid .m { cursor: zoom-in; }
.nav a.tab-plus, .m-only { display: none; }
@media (max-width: 760px) {
  .viewer-arrow { display: none; }
  .modal.full { max-height: 100vh; height: 100vh; border-radius: 0; }
  .m-hide { display: none !important; }
  .m-only { display: inline-flex; }
  .nav a span { display: none; }
  /* icons sit dead-centre in the bar; the active dot hangs below without pushing the icon up */
  .nav a { height: 46px; padding: 0 10px; justify-content: center; }
  .nav a.active::after { position: absolute; left: 50%; bottom: 3px; margin: 0; transform: translateX(-50%); }
  .nav a.tab-plus { display: flex; width: 56px; height: 56px; padding: 0; margin-top: -30px; border-radius: 50%; background: var(--gold-gradient); color: #fff; font-size: 32px; font-weight: 500; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(240,145,63,0.5); border: 3px solid var(--sky-mid); flex: none; }
  .nav a.tab-plus::after { display: none; }
  .fab-compose { display: none; }
  .settings-tabs { margin: 0 -12px; padding: 0 12px; }
}
/* settings: sections as top tabs */
.settings-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs button { flex: none; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.settings-tabs button.on { background: var(--ink); color: var(--on-ink); border-color: transparent; }

/* the wordmark: Kag in gold, Tuk in jade (founder ruling 2026-09-03) */
.wm-kag { color: #E06A3C; background: linear-gradient(180deg, #FFCEA4 0%, #E06A3C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* the logo ring's own fade */
.wm-tuk { color: var(--jade); }
.glyph { display: block; }
.hdr { display: inline-flex; align-items: center; gap: 8px; }
.glass-circle { position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.glass-circle:hover { background: rgba(255,255,255,0.1); color: var(--ink); }
.glass-circle + .glass-circle { margin-left: 6px; }
.unread-cap { position: absolute; top: -3px; right: -4px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px; background: var(--gold); color: var(--on-gold); font-size: 9.5px; font-weight: 700; line-height: 14px; text-align: center; }
.m-brand { display: none; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 19px; font-weight: 600; }
@media (max-width: 760px) { .m-brand { display: flex !important; } }

/* phone comment sheet (founder 2026-09-03): never wider than the device,
   no focus zoom, the close always reachable, a Done at the bottom */
@media (max-width: 760px) {
  /* the iOS sheet: full screen, pinned to the visual viewport (JS in Modal), Done top-right */
  .modal, .modal.wide, .modal.full { position: fixed; left: 0; top: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; overflow-x: hidden; overflow-y: auto; padding: 0 16px 24px; -webkit-overflow-scrolling: touch; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: #151B44; margin: 0 -16px 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
  .modal-head h2 { font-size: 18px; }
  .modal-done-top { color: var(--gold); font-weight: 700; font-size: 16px; padding: 6px 2px 6px 10px; }
  .modal form.row { flex-wrap: nowrap; }
  .modal form.row .input { min-width: 0; flex: 1; }
  .modal form.row .btn { flex: none; }
  .input, textarea.input, select.input { font-size: 16px; }
  .comment .text { overflow-wrap: anywhere; }
  .m-brand { justify-content: space-between; }
  .m-brand .hdr { margin-left: auto; }
  .home-title-icons { display: none !important; }
  .modal-done { display: flex; }
}
.modal-done { display: none; justify-content: center; margin-top: 12px; }

/* report a message (UGC parity with the app, guideline 1.2) */
.msg { position: relative; }
.msg .flag { position: absolute; right: -26px; top: 6px; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); font-size: 11px; opacity: 0; transition: opacity 0.15s; }
.msg:hover .flag, .msg:focus-within .flag { opacity: 1; }
.msg.me .flag { display: none; }
@media (max-width: 760px) { .msg .flag { right: 2px; top: -8px; opacity: 0.55; background: rgba(0,0,0,0.35); } }

/* form labels (invite claim, settings forms) */
.lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.btn.wide { width: 100%; }

/* edit proposals (ADR 0021): the creator's approval card */
.changes { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.change { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.change > .tiny { width: 110px; flex: none; }
.change s { text-decoration: line-through; }
/* account merges (ADR 0019 / 0020): the ranked list, the Tonight tile, the preview, the hero, the review */
.merge-card { border-color: rgba(232,182,76,0.45); }
.merge-list-card { padding: 10px 8px 6px; }
.merge-list { display: flex; flex-direction: column; }
.merge-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; }
.merge-row:hover { background: rgba(255,255,255,0.05); }
.merge-row > .grow { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.merge-row b { font-size: 12.5px; }
.merge-row .why { font-size: 10.5px; color: var(--muted); }
.merge-row .pct { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.merge-row .pct.mid { color: var(--ink); }
.merge-row .pct.hi { color: var(--gold); }
.merge-row .chev { color: var(--muted); font-size: 16px; line-height: 1; }
.evidence .ev { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; padding: 2px 0; }
.evidence .ev .dots { font-size: 8px; letter-spacing: 1px; width: 26px; flex: none; }
.evidence .ev.for .dots { color: var(--jade, #46D5B3); }
.evidence .ev.against .dots { color: var(--rose, #F2789F); }
.evidence .ev.against { color: var(--muted); }
.matches { display: flex; flex-direction: column; gap: 4px; }
.match { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.match > .tiny { width: 74px; flex: none; }
.merge-card .btn, .merge-hero .btn { white-space: nowrap; }
.merge-hero { margin-bottom: 12px; }
@media (min-width: 761px) { .merge-tile { display: none !important; } }
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-col { min-width: 0; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { padding: 5px 11px; font-size: 12px; color: var(--muted); background: transparent; }
.seg button.on { background: rgba(232,182,76,0.18); color: var(--gold); }
.picks { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.pick { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pick button { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: 12.5px; color: var(--ink); }
.pick button i { font-style: normal; color: var(--muted); font-size: 11px; margin-left: 4px; }
.pick button.on { border-color: rgba(232,182,76,0.6); background: rgba(232,182,76,0.14); }

/* Inbox — the web twin of iOS InboxScreen (ADR 0012). Grouped rows in one
   glass card, faces overlapping with the kind badge at the corner, a gold
   dot while unseen. The bell used to open notification SETTINGS; the founder
   asked for the notifications themselves (2026-09-07). */
.inbox-new { display: inline-block; margin-left: 10px; padding: 0 10px; height: 22px; line-height: 22px; border-radius: 999px; background: rgba(232,182,76,0.16); color: var(--gold); font-size: 11px; font-weight: 700; vertical-align: middle; font-family: var(--sans); }
.inbox-card { padding: 0; overflow: hidden; }
.inbox-row.seen { opacity: 0.7; }
.inbox-sep { height: 1px; background: rgba(255,255,255,0.08); margin-left: 72px; }
.inbox-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: transparent; border: 0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.inbox-row:hover { background: rgba(255,255,255,0.04); }
.inbox-faces { position: relative; display: flex; align-items: center; min-width: 48px; flex: 0 0 auto; }
.inbox-face { display: inline-flex; border-radius: 50%; background: #101530; }
.inbox-badge { position: absolute; right: -2px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--on-gold); }
.inbox-text { min-width: 0; flex: 1 1 auto; }
.inbox-title { font-size: 13px; line-height: 1.35; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-title b { font-weight: 650; }
.inbox-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.inbox-quiet { text-align: center; padding: 54px 20px; color: var(--muted); }
.inbox-quiet .inbox-stars { color: rgba(255,255,255,0.25); letter-spacing: 6px; font-size: 13px; margin-bottom: 14px; }
.inbox-quiet p { font-family: var(--serif); font-style: italic; font-size: 15px; margin: 0; }