/* ============================================================================
   Parts — composer, aside cards, search, and the small chrome pieces.
   ========================================================================== */

/* ------------------------------------------------------------- icon button */
.iconbtn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  color: var(--text-1);
  transition: background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.iconbtn:hover { background: var(--ink-4); color: var(--text-0); }

.postbtn__short { display: none; }
@media (max-width: 1060px) {
  .postbtn__long { display: none; }
  .postbtn__short { display: grid; place-items: center; }
  .rail__post .btn { padding-inline: 0; width: 50px; margin-inline: auto; }
}

.railout { display: grid; gap: var(--s-4); }

/* ---------------------------------------------------------------- search */
/* CONSOLIDATED — `height` was declared 2 times.
        parts — composer, aside cards, search, and the small chrome pieces.: 46px   ->   R1 right rail: 52px   (R1 right rail renders)
   CONSOLIDATED — `top` was declared 2 times.
        parts — composer, aside cards, search, and the small chrome pieces.: var(--s-5)   ->   R1 right rail: var(--s-6)   (R1 right rail renders) */
.searchbox {
  position: sticky; z-index: 2;
  display: flex; align-items: center; gap: var(--s-4); padding-inline: var(--s-6);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  border: 1px solid transparent;
  transition: border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
  top: var(--s-6);
  height: 52px;
}
.searchbox:focus-within { border-color: var(--line-accent); background: var(--bg-1); }
.searchbox:focus-within .searchbox__icon { color: var(--accent); }
.searchbox__icon { color: var(--text-2); flex: none; transition: color var(--d-2) var(--ease-out); }
.searchbox__input { flex: 1; min-width: 0; font-size: var(--t-15); }
.searchbox__input::placeholder { color: var(--text-2); }
.searchbox__input::-webkit-search-cancel-button { display: none; }

/* ================================================================ COMPOSER */

.composer--inline { border-bottom: 1px solid var(--line); }
.composer__inner { padding: var(--s-5) var(--s-6) var(--s-4); }
.composer__inner.is-modal { padding: var(--s-4) var(--s-7) var(--s-6); }

.composer__row { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s-5); }
.composer__col { position: relative; min-width: 0; display: grid; gap: var(--s-4); }

.composer__area {
  width: 100%; min-height: 30px;
  padding: var(--s-4) 0 0;
  font-size: var(--t-20); line-height: 26px;
  letter-spacing: -0.016em;
  color: var(--text-0);
  overflow: hidden;
  transition: min-height var(--d-3) var(--ease-out);
}
.composer__area::placeholder { color: var(--text-2); }
.is-modal .composer__area { min-height: 110px; }
.is-focused .composer__area { min-height: 62px; }

.composer__drop { position: absolute; inset: -8px; pointer-events: none; border-radius: var(--r-md); }
.composer__drop.is-over {
  pointer-events: auto;
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.composer__replyingto { margin-bottom: var(--s-4); color: var(--text-2); font-size: var(--t-14); }
.composer__replyingto a { color: var(--accent); }

.composer__media { display: grid; gap: 4px; border-radius: var(--r-md); overflow: hidden; }
.composer__media--1 { grid-template-columns: 1fr; }
.composer__media--2 { grid-template-columns: 1fr 1fr; }
.composer__media--3, .composer__media--4 { grid-template-columns: 1fr 1fr; }
.composer__thumb { position: relative; aspect-ratio: 16/10; background: var(--bg-1); border-radius: var(--r-sm); overflow: hidden; }
.composer__media--1 .composer__thumb { aspect-ratio: 16/9; }
.composer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.composer__thumbx {
  position: absolute; right: 6px; top: 6px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: var(--r-pill);
  background: rgba(4,6,3,.78); backdrop-filter: blur(8px); color: var(--text-0);
  transition: background var(--d-2) var(--ease-out);
}
.composer__thumbx:hover { background: rgba(4,6,3,.95); }
.composer__thumbalt {
  position: absolute; left: 6px; bottom: 6px;
  padding: 3px 7px; border-radius: var(--r-xs);
  background: rgba(4,6,3,.78); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-1);
}
.composer__thumbalt.has-alt { color: var(--accent); }

/* ---- attachment states ----------------------------------------------------
   An image that is still uploading is DIMMED, not covered: the member has to
   keep being able to tell WHICH of four photos this thumbnail is, which is the
   whole reason the local preview is drawn before the transfer finishes. */
.composer__thumb.is-up img  { opacity: .58; filter: saturate(.7); }
.composer__thumb.is-bad img { opacity: .34; filter: saturate(0); }
.composer__thumb.is-bad { box-shadow: inset 0 0 0 1.5px var(--danger, #e0554b); }

/* Pinned to the bottom edge rather than centred, so it never lands on the
   subject of the photo. */
.composer__thumbbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(4,6,3,.55); overflow: hidden;
}
.composer__thumbbar i {
  display: block; height: 100%; background: var(--accent);
  transition: width var(--d-2) var(--ease-out);
}
/* A body of unknown length — `onProgress` is allowed to report null. The bar
   is full and sweeps, because a percentage we do not have is worse than none. */
.composer__thumbbar i.is-idk {
  transition: none;
  background: linear-gradient(90deg,
    transparent, var(--accent) 42%, var(--accent) 58%, transparent);
  animation: composer-idk 1.1s linear infinite;
}
@keyframes composer-idk { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .composer__thumbbar i.is-idk { animation: none; background: var(--accent); opacity: .55; }
}

/* The server's own sentence, on the thumbnail it is about. It takes the ALT
   button's corner rather than sharing it — there is nothing to describe yet. */
.composer__thumberr {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  padding: 4px 7px; border-radius: var(--r-xs);
  background: rgba(4,6,3,.86); backdrop-filter: blur(8px);
  font-size: 11.5px; line-height: 1.35; color: var(--danger, #e0554b);
}

.composer__diary {
  display: inline-flex; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--diary-accent) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--diary-accent) 34%, transparent);
  color: var(--text-0); font-size: var(--t-13); font-weight: 600;
  justify-self: start; max-width: 100%;
}
.composer__diary svg { color: var(--diary-accent); }
.composer__diarymeta { color: var(--text-2); font-weight: 500; }
.composer__diary button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 99px; color: var(--text-2); }
.composer__diary button:hover { background: var(--ink-5); color: var(--text-0); }

.composer__audience {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  margin-block: 2px;
  border-radius: var(--r-pill);
  color: var(--accent); font-size: var(--t-13); font-weight: 700;
  justify-self: start;
  transition: background var(--d-2) var(--ease-out);
}
.composer__audience:hover { background: var(--accent-dim); }

.composer__foot {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid transparent;
  transition: border-color var(--d-3) var(--ease-out);
}
.is-focused .composer__foot, .is-modal .composer__foot { border-top-color: var(--line); }

.composer__tools { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.composer__tool {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-pill); color: var(--accent);
  transition: background var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.composer__tool:hover { background: var(--accent-dim); }
.composer__tool:active { transform: scale(.9); }
@media (max-width: 520px) { .composer__tool:nth-child(n+4) { display: none; } }

.composer__actions { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.composer__div { width: 1px; height: 30px; background: var(--line); }
.composer__ring { position: relative; display: grid; place-items: center; color: var(--accent); }
.composer__ring.is-soft { color: var(--warn); }
.composer__ring.is-over { color: var(--danger); }
.composer__ringnum { position: absolute; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.composer__ring.is-over .composer__ringnum { color: var(--danger); }

/* --------------------------------------------------------- composer modal */
.composermodal { padding-bottom: var(--s-4); }
.composermodal__bar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
.composermodal__spacer { flex: 1; }
.composermodal__drafts { color: var(--accent); font-size: var(--t-14); font-weight: 700; padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); }
.composermodal__drafts:hover { background: var(--accent-dim); }
.composermodal__context { padding: 0 var(--s-7); }

.contextpost { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); }
.contextpost__rail { display: flex; flex-direction: column; align-items: center; }
.contextpost__line { flex: 1; width: 2px; margin-top: var(--s-4); background: var(--line-strong); border-radius: 2px; }
.contextpost__head { display: flex; gap: var(--s-3); align-items: center; font-size: var(--t-14); }
.contextpost__name { font-weight: 700; }
.contextpost__handle { color: var(--text-2); }
.contextpost__text { margin-top: 2px; color: var(--text-1); font-size: var(--t-14); }
.contextpost__reply { margin-top: var(--s-5); padding-bottom: var(--s-4); color: var(--text-2); font-size: var(--t-14); }
.contextpost__reply span { color: var(--accent); }

/* =============================================================== ASIDE CARDS */

/* CONSOLIDATED — `gap` was declared 2 times.
        aside cards: var(--s-6)   ->   R1 right rail: var(--s-7)   (R1 right rail renders) */
.asidecards { display: grid; gap: var(--s-7); }

.card ul li + li, .card ol li + li { border-top: 1px solid var(--line-soft); }

/* --- live runs --- */
/* CONSOLIDATED — `border-color` was declared 2 times.
        aside cards: var(--line-accent)   ->   R1 right rail: var(--line)   (R1 right rail renders) */
/* [five accent hues inside one 473px card] — the card frame is neutral now;
   colour is reserved for the one thing that carries meaning, the phase label. */
.card--live { border-color: var(--line); }
.livedot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: livePulse 2.2s var(--ease-out) infinite; }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* CONSOLIDATED — `gap` was declared 2 times (aside cards, R1 right rail), every time with the same value: var(--s-5).
   CONSOLIDATED — `grid-template-columns` was declared 2 times.
        aside cards: 52px minmax(0,1fr)   ->   R1 right rail: 56px minmax(0,1fr)   (R1 right rail renders) */
.liverun {
  display: grid;
  padding: var(--s-5) var(--s-6);
  transition: background var(--d-2) var(--ease-out);
  grid-template-columns: 56px minmax(0,1fr);
  gap: var(--s-5);
}
.liverun:hover { background: var(--ink-2); }
/* CONSOLIDATED — `height` was declared 2 times.
        aside cards: 52px   ->   R1 right rail: 56px   (R1 right rail renders)
   CONSOLIDATED — `width` was declared 2 times.
        aside cards: 52px   ->   R1 right rail: 56px   (R1 right rail renders) */
.liverun__cover { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-1); width: 56px; height: 56px; }
.liverun__cover img { width: 100%; height: 100%; object-fit: cover; }
.liverun__body { display: grid; gap: 3px; min-width: 0; }
/* CONSOLIDATED — `font-size` was declared 2 times (aside cards, R1 right rail), every time with the same value: var(--t-14). */
.liverun__title { font-weight: 700; letter-spacing: -0.012em; font-size: var(--t-14); }
/* CONSOLIDATED — `font-size` was declared 2 times (aside cards, R1 right rail), every time with the same value: var(--t-12). */
.liverun__meta { color: var(--text-2); font-size: var(--t-12); }
/* CONSOLIDATED — `margin-top` was declared 2 times.
        aside cards: 3px   ->   R1 right rail: var(--s-3)   (R1 right rail renders) */
.liverun__bar { display: block; height: 3px; border-radius: 3px; background: var(--ink-4); overflow: hidden; margin-top: var(--s-3); }
/* CONSOLIDATED — `background` was declared 2 times.
        aside cards    linear-gradient(90deg, var(--diary-accent), var(--phase))
        R1 right rail  var(--accent)   <- renders
   CONSOLIDATED — `box-shadow` was declared 2 times.
        aside cards: 0 0 10px var(--accent-glow)   ->   R1 right rail: none   (R1 right rail renders) */
.liverun__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: none; }
/* CONSOLIDATED — `display` was declared 2 times.
        aside cards: flex   ->   R1 right rail: grid   (R1 right rail renders)
   CONSOLIDATED — `gap` was declared 2 times.
        aside cards: var(--s-4)   ->   R1 right rail: var(--s-3)   (R1 right rail renders) */
.liverun__stat { font-size: var(--t-11); color: var(--text-2); font-variant-numeric: tabular-nums; display: grid; gap: var(--s-3); }
/* CONSOLIDATED — `color` was declared 2 times (aside cards, R1 right rail), every time with the same value: var(--phase).
   CONSOLIDATED — `font-weight` was declared 2 times (aside cards, R1 right rail), every time with the same value: 700. */
.liverun__phase { color: var(--phase); font-weight: 700; }

/* --- trends --- */
/* CONSOLIDATED — `align-items` was declared 2 times.
        aside cards: center   ->   R1 right rail: start   (R1 right rail renders)
   CONSOLIDATED — `gap` was declared 2 times.
        aside cards: var(--s-5)   ->   R1 right rail: var(--s-4)   (R1 right rail renders)
   CONSOLIDATED — `grid-template-columns` was declared 2 times.
        aside cards: auto minmax(0,1fr) auto   ->   R1 right rail: 22px minmax(0,1fr) auto   (R1 right rail renders) */
.trend {
  display: grid;
  padding: var(--s-5) var(--s-6);
  transition: background var(--d-2) var(--ease-out);
  grid-template-columns: 22px minmax(0,1fr) auto;
  align-items: start;
  gap: var(--s-4);
}
.trend:hover { background: var(--ink-2); }
/* CONSOLIDATED — `font-size` was declared 2 times.
        aside cards: var(--t-17)   ->   R1 right rail: var(--t-15)   (R1 right rail renders)
   CONSOLIDATED — `font-variant-numeric` was declared 2 times (aside cards, R1 right rail), every time with the same value: tabular-nums.
   CONSOLIDATED — `width` was declared 2 times.
        aside cards: 16px   ->   R1 right rail: 22px   (R1 right rail renders) */
.trend__rank { font-family: var(--font-dis); font-weight: 800; color: var(--text-3); font-size: var(--t-15); font-variant-numeric: tabular-nums; width: 22px; }
/* CONSOLIDATED — `gap` was declared 2 times.
        aside cards: 1px   ->   R1 right rail: 2px   (R1 right rail renders) */
.trend__body { display: grid; min-width: 0; gap: 2px; }
.trend__cat { font-size: var(--t-12); color: var(--text-2); }
.trend__tag { font-size: var(--t-15); font-weight: 700; letter-spacing: -0.014em; }
.trend__count { font-size: var(--t-12); color: var(--text-2); font-variant-numeric: tabular-nums; }
/* CONSOLIDATED — `color` was declared 2 times (aside cards, R1 right rail), every time with the same value: var(--accent). */
.trend__spike { color: var(--accent); }

/* --- follow row --- */
.followrow {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  transition: background var(--d-2) var(--ease-out);
}
.followrow:hover { background: var(--ink-2); }
.followrow__body { display: grid; gap: 1px; min-width: 0; }
.followrow__name { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-14); font-weight: 700; }
.followrow__handle { font-size: var(--t-13); color: var(--text-2); }
.followrow__bio { margin-top: 3px; font-size: var(--t-13); color: var(--text-1); line-height: var(--lh-13); }
.followrow__action { padding-top: 2px; }

/* --- footer --- */
.asidefoot { display: grid; gap: var(--s-4); padding: 0 var(--s-2) var(--s-9); }
.asidefoot nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.asidefoot nav a { font-size: var(--t-12); color: var(--text-3); }
.asidefoot nav a:hover { color: var(--text-1); text-decoration: underline; }
.asidefoot__stat, .asidefoot__copy { font-size: var(--t-12); color: var(--text-3); }

/* ============================================================== SHORTCUTS */
.sc { padding: var(--s-7); }
.sc__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-7); }
.sc__head h2 { font-family: var(--font-dis); font-size: var(--t-24); font-weight: 800; letter-spacing: var(--tracking-display); }
.sc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-8); }
@media (max-width: 560px) { .sc__grid { grid-template-columns: 1fr; } }
.sc__row { display: flex; align-items: center; gap: var(--s-5); }
.sc__keys { display: flex; gap: 4px; }
.sc__keys kbd {
  min-width: 24px; padding: 3px 6px; text-align: center;
  border-radius: var(--r-xs);
  background: var(--bg-3); border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
  font-family: var(--font-mono); font-size: var(--t-12); color: var(--text-0);
}
.sc__label { color: var(--text-1); font-size: var(--t-14); }

/* ================================================================== BARE */
.bare { min-height: 100dvh; display: grid; }

/* ============================================================== HOVER CARD */
.hovercard {
  position: fixed; z-index: var(--z-overlay);
  width: 328px; padding: var(--s-6);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--e-4);
  opacity: 0; transform: translateY(-6px) scale(.97);
  transform-origin: top left;
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-spring);
  pointer-events: auto;
}
.hovercard[data-dir="up"] { transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.hovercard.is-in { opacity: 1; transform: none; }
.hovercard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5); }
.hovercard__names { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.hovercard__name { font-size: var(--t-17); font-weight: 750; letter-spacing: var(--tracking-tight); }
.hovercard__name:hover { text-decoration: underline; }
.hovercard__handle { color: var(--text-2); font-size: var(--t-14); width: 100%; }
.hovercard__bio { margin-top: var(--s-4); color: var(--text-1); font-size: var(--t-14); line-height: var(--lh-14); }
.hovercard__counts { display: flex; gap: var(--s-6); margin-top: var(--s-5); font-size: var(--t-14); color: var(--text-2); }
.hovercard__counts b { color: var(--text-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.hovercard__counts a:hover { text-decoration: underline; }
.hovercard__runs { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.hovercard__runslabel { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-12); color: var(--text-2); }
.hovercard__runslabel svg { color: var(--accent); }
.hovercard__runrow { display: flex; gap: var(--s-4); margin-top: var(--s-4); }
.hovercard__run {
  position: relative; width: 60px; height: 44px;
  border-radius: var(--r-xs); overflow: hidden; background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hovercard__run img { width: 100%; height: 100%; object-fit: cover; }
.hovercard__run i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--phase); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 2px 7px; border-radius: var(--r-xs);
  font-size: var(--t-11); font-weight: 650; letter-spacing: .01em;
}
.chip--soft { background: var(--ink-4); color: var(--text-2); }
.chip--accent { background: var(--accent-dim); color: var(--accent); }

/* ============================================== SHARED SEARCH FIELD (views) */

.bmsearch {
  display: flex; align-items: center; gap: var(--s-4);
  margin: 0 var(--s-6) var(--s-5);
  height: 42px; padding-inline: var(--s-5);
  border-radius: var(--r-pill);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.bmsearch:focus-within { background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-accent); }
.bmsearch:focus-within .bmsearch__icon { color: var(--accent); }
.bmsearch__icon { color: var(--text-2); flex: none; transition: color var(--d-2) var(--ease-out); }
.bmsearch input { flex: 1; min-width: 0; font-size: var(--t-14); }
.bmsearch input::-webkit-search-cancel-button { display: none; }
.bmsearch__clear { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 99px; color: var(--text-2); }
.bmsearch__clear:hover { background: var(--ink-4); color: var(--text-0); }
.bmsort select {
  appearance: none; padding: 6px 26px 6px 10px; border-radius: var(--r-sm);
  background: var(--bg-3); color: var(--text-1); font-size: var(--t-13);
  box-shadow: inset 0 0 0 1px var(--line);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 10px) 52%;
  background-size: 4px 4px; background-repeat: no-repeat;
}

/* ============================================================================
   ROUND 1 CRITIC FIXES — right rail
   ========================================================================== */

/* [search field 36px tall against X's 62px, descenders nearly touching]
   [6px gap to the first card vs 23px between cards — one relationship, two
    values] The rail now runs on a single 20px rhythm. */
.aside { gap: var(--s-7); padding-top: var(--s-6); }

/* [live-run rows truncated title AND subtitle — no run was identifiable] */
.liverun { padding-block: var(--s-5); }
.liverun__title { line-height: var(--lh-13); }

/* [progress gradients differed per row while encoding the same stage]
   One ramp for every bar in the product. The phase is stated in words. */
.ptrack__seg.is-done { background: var(--accent); }

/* [trending card ran two competing left edges; ranks were not tabular] */
.trend__rank { text-align: right; }
.trend__cat, .trend__count { line-height: var(--lh-12); }

/* [four identical arrows encoding nothing]
   The chip now appears only when a topic is genuinely climbing, and states by
   how much. If nothing is climbing, nothing renders. */
.trend__spike {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: var(--r-xs);
  background: var(--accent-dim);
  font-size: var(--t-11); font-weight: 750; font-variant-numeric: tabular-nums;
  margin-top: 12px;
}


/* Breeder sits under the strain rather than being truncated off the end. */
.liverun__meta { display: block; }
.liverun__breeder { display: block; color: var(--text-3); }

/* Live-run telemetry is a fixed grid, so Day and temperature form real columns
   regardless of how long the status word is. */
.liverun__stat {
  grid-template-columns: minmax(0, 1fr) 52px 40px; align-items: baseline;
}
.liverun__day, .liverun__temp { text-align: right; color: var(--text-2); }

/* Composer glyphs swung 36% in optical width. A fixed 20px box with a shared
   stroke makes them one set. */
.composer__tool svg { width: 20px; height: 20px; stroke-width: 1.85; }

/* ============================================================================
   MOBILE — the shared search field. Inside a max-width:700px query, because
   both numbers below are desktop-correct as they stand.
   ========================================================================== */

/* [defect 11] On /messages the field had no boundary at all: fill rgb(17,20,16)
   against a header of rgb(18,22,15) is 1.00:1, and `box-shadow: inset 0 0 0 1px
   transparent` above is a transition placeholder, not a ring — the resting
   state literally draws nothing. The identical control reads on /bookmarks only
   because the page behind it happens to be rgb(11,13,10); a control that is
   visible on one screen and invisible on the next is not styled, it is lucky.
   A dark theme cannot carry this on the fill — every surface token in the ramp
   is within 1.2:1 of every other — so the ring has to do it. rgba(255,255,255,
   .35) over the field's own fill composites to rgb(99,101,98), which is 3.05:1
   against the /messages header and 3.4:1 against the /bookmarks page: the 3:1
   WCAG asks of a component boundary, on both screens, at rest. The focus ring
   is untouched and still wins — it is a more specific selector.
   The height is the second half of it: 42 CSS is 2 under the 44 a finger
   needs, and this is the only control in the /messages header a thumb aims at
   besides the compose button. */
@media (max-width: 700px) {
  .bmsearch {
    height: 44px;
    box-shadow: inset 0 0 0 1px var(--ink-9);
  }
}