/* Ops Studio mini app — the command center.
   Colours come from Telegram theme parameters, set on :root by app.js,
   and — when the box carries brain/design-tokens.json — from the client's
   own brand, layered on top by the same mechanism. The values below are
   the no-brand baseline so the page also reads well in a plain browser,
   in both colour schemes. Nothing here is hardcoded to content: type
   scales with the system font, cards grow with what fills them.

   Brand-facing custom properties (all overridden by app.js when tokens
   exist, all falling back to the stock look when they don't):
     --accent        interactive/brand accent (defaults to the link colour)
     --raised        raised surface inside a card (defaults to the page bg)
     --font-heading  the client's heading face (defaults to the body stack)
     --font-body     the client's body face (defaults to the system stack) */

:root {
  --bg: #ffffff;
  --text: #0f0f0f;
  --hint: #707579;
  --link: #2481cc;
  --button: #2481cc;
  --button-text: #ffffff;
  --card: #f1f1f4;
  --destructive: #d14e4e;
  --line: rgba(112, 117, 121, 0.22);
  --ok: #31a24c;
  --accent: var(--link);
  /* Secondary text: a detail line under a bullet, a caption under a chart.
     It was used in two places before it existed anywhere, so both quietly
     inherited body colour and read as loud as the sentence above them. It is
     the same tone as --hint by design — one meaning, one value, and it
     follows the theme through --hint rather than repeating a hex code. */
  --muted: var(--hint);
  --raised: var(--bg);
  --font-body: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18222d;
    --text: #f5f5f5;
    --hint: #8b9398;
    --link: #6ab2f2;
    --button: #5288c1;
    --button-text: #ffffff;
    --card: #232e3c;
    --destructive: #ef7070;
    --ok: #4fbf67;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must always win, even over display:flex below. */
[hidden] { display: none !important; }

html, body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dim { color: var(--hint); }

/* ---- top: offline notice + identity strip ---- */

.offline {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--hint);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

/* The identity strip: the client's name in their own heading face, the
   Ops Studio wordmark as quiet text (no logo), the usage meter as a slim
   branded bar, and three at-a-glance numbers. Everything sizes from its
   content — a long name wraps, missing stats show an en dash. */

.brandbar {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.brand-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.brand-id { flex: 1; min-width: 0; }

.brand-name {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
}

.brand-mark {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hint);
}

/* Usage, present but never alarming: slim accent bars, top right, absent
   entirely when the server sends null. */
.usage {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding-top: 5px;
  font-size: 11px;
  color: var(--hint);
}
.meter { display: flex; align-items: center; gap: 6px; }
.meter .pct { font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.meter .track {
  width: 56px; height: 3px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.meter .fill { height: 100%; background: var(--accent); border-radius: 2px; }
/* An old sample says when it was measured — quiet, never a warning. */
.usage .asof { font-size: 10px; opacity: 0.75; }

.brand-stats {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.bstat { flex: 1 1 0; min-width: 0; }
.bstat .bn {
  display: block;
  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.bstat .bt {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  color: var(--hint);
}

/* ---- the card column ---- */

.main {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 16px 13px;
}

.card-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.card-h h2 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hint);
}
.card-sub { margin-left: auto; font-size: 12px; color: var(--hint); }

.badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: var(--button-text);
  background: var(--button);
}

/* Section headings inside a card */
.h { font-family: var(--font-heading); font-size: 13px; font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.08em; color: var(--hint);
     margin: 4px 0 8px; }
.h + .h, .list + .h { margin-top: 16px; }

/* Honest empty states: what the card is for, and what will fill it. */
.empty { padding: 10px 2px 8px; }
.empty .big { font-size: 15px; color: var(--text); margin-bottom: 3px; }
.empty .sub { font-size: 13px; color: var(--hint); }

/* An old digest has to announce itself, not sit there looking like today's. */
.digest-stale {
  font-size: 13px; color: var(--hint); margin-bottom: 10px; padding: 8px 10px;
  border-left: 2px solid var(--hint); border-radius: 2px;
}

.centre { text-align: center; color: var(--hint); padding: 24px 12px; }
.centre .big { font-size: 17px; color: var(--text); margin-bottom: 6px; }

/* Receipts: the morning block. Past tense, quiet. */
.receipts {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 12px;
}
.receipt { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; }
.receipt .at { color: var(--hint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.receipt .what { flex: 1; min-width: 0; overflow-wrap: break-word; }
.receipt .what small { display: block; color: var(--hint); font-size: 13px; }

/* Item rows */
.list { display: flex; flex-direction: column; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.row:last-child { border-bottom: 0; }
.row:active { background: var(--line); }

.row .mid { flex: 1; min-width: 0; }
.row .sum {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row .meta { display: block; font-size: 13px; color: var(--hint); margin-top: 3px; }
.row .kindlab { color: var(--accent); font-weight: 600; }
.row .go { color: var(--hint); font-size: 20px; flex: 0 0 auto; }

.row.done { opacity: 0.55; }
.row .mark { flex: 0 0 auto; font-size: 15px; }
.mark.approved, .mark.sent { color: var(--ok); }
.mark.rejected, .mark.failed { color: var(--destructive); }

.chip {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 7px;
  background: var(--card);
  color: var(--accent);
  white-space: nowrap;
}

/* ---- week strip: seven equal cells, never a horizontal scroll ---- */

.weekstrip { display: flex; gap: 3px; }

.wday {
  flex: 1 1 0;
  min-width: 0;
  min-height: 62px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 0 5px;
  gap: 2px;
  color: var(--hint);
}
.wday .dow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.wday .num { font-size: 15px; font-weight: 600; color: var(--text); }

/* Post dots: one per scheduled post, coloured by state. Reserved height so
   quiet days align with busy ones. */
.wday .dots {
  display: flex;
  gap: 3px;
  height: 6px;
  align-items: center;
  justify-content: center;
}
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--hint); }
.dot.sent { background: var(--ok); }
.dot.queued { background: var(--link); }
.dot.failed, .dot.cancelled { background: var(--destructive); }

/* Pending-review badge under the dots. Reserved height so days align. */
.wday .pend {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  color: var(--button-text);
  background: var(--button);
}
.wday .pend:empty { background: none; }

.wday.sel { background: var(--raised); box-shadow: inset 0 0 0 1px var(--accent); }
.wday.sel .dow { color: var(--accent); }
.wday.today .num { color: var(--accent); }

/* Selected day's schedule under the strip */
.postlist { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.post {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  font-size: 14px;
}
.post .at { color: var(--hint); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.post .title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post .pstate { flex: 0 0 auto; font-size: 12px; font-weight: 600; }
.pstate.sent { color: var(--ok); }
.pstate.queued { color: var(--link); }
.pstate.failed, .pstate.cancelled { color: var(--destructive); }

/* ---- outreach tiles ---- */

.tiles { display: flex; flex-direction: column; }
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.tile:last-child { border-bottom: 0; }
.tile .tmid { flex: 1; min-width: 0; }
.tile .tname {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .tcounts { font-size: 13px; color: var(--hint); margin-top: 2px; }
.pill {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--hint);
}
.pill.active { color: var(--ok); }
.pill.paused { color: var(--link); }
.pill.failed, .pill.canceled { color: var(--destructive); }

/* ---- pipeline stat tiles: content-adaptive, side by side ---- */

.stats { display: flex; gap: 10px; }
.stat {
  flex: 1 1 0;
  min-width: 0;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px 9px;
}
.stat .n { font-family: var(--font-heading); font-size: 24px; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 12px; color: var(--hint); margin-top: 1px; }
.stagechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.stagechip {
  font-size: 12px;
  color: var(--hint);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px 8px;
}
.stagechip b { color: var(--text); font-variant-numeric: tabular-nums; }
.pipeline-sub { font-size: 13px; color: var(--hint); margin-top: 10px; }

/* ---- digest: a comfortable read that collapses when long ---- */

/* The one button a founder taps to connect their calendar. It sits in the
   Connected card's own row rhythm, so it reads as part of the list rather
   than an advert. */
.connect-btn {
  font: inherit; font-size: 13px; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--button-text); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.connect-btn[disabled] { opacity: 0.6; cursor: default; }
.connnote { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---- what your studio knows: the founder's own brain, gaps included ---- */

.knows { display: flex; flex-direction: column; }
.know {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.know:last-child { border-bottom: 0; }
.know-what { flex: 1; min-width: 0; }
.know-what b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.know-what small { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.know-state {
  flex: none; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
/* Held is quiet on purpose: a founder should scan for what is missing, and a
   row of green ticks is the fastest way to make the gaps invisible. */
.know-state.ok { color: var(--ok); border-color: transparent; }
.know-state.warn { color: var(--text); border-color: var(--line); font-weight: 600; }
.know-state.gap {
  color: var(--destructive); border-color: currentColor; font-weight: 600;
}

.know-needs {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line);
}
.know-needs > b { display: block; font-size: 14px; margin-bottom: 6px; }
.know-need { padding: 5px 0; border-top: 1px solid var(--line); }
.know-need:first-of-type { border-top: 0; }
.know-need span { display: block; font-size: 13px; color: var(--text); }
.know-need small { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }

.know-clash {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--line);
}
.know-clash b { display: block; font-size: 14px; margin-bottom: 4px; }
.know-clash small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ---- what your posts did: one curve, a window to choose, one caption ----
   The stretch is deliberate: preserveAspectRatio="none" on the svg lets the
   plot fill any phone's width at a fixed comfortable height, and nothing in
   here is sized in points-per-post, so two posts and two hundred both fit. */

.chart-tabs { display: flex; gap: 6px; margin: 0 0 12px; }
.chart-tab {
  font: inherit; font-size: 13px; line-height: 1;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.chart-tab.on {
  background: var(--accent); border-color: var(--accent); color: var(--button-text);
  font-weight: 600;
}

.chart { display: block; width: 100%; height: 150px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-axis { fill: var(--hint); font-size: 11px; font-family: var(--font-body); }
.chart-area { fill: var(--accent); opacity: 0.12; }
.chart-line {
  stroke: var(--accent); stroke-width: 2; stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.chart-dot {
  fill: var(--card); stroke: var(--accent); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.chart-dot.on { fill: var(--accent); }
.chart-hit { cursor: pointer; }

/* The caption holds a fixed two lines whatever is selected, so tapping along
   the curve moves the point and never the page under the founder's thumb. */
.chart-caption { margin: 12px 0 0; min-height: 2.7em; }
.chart-caption b { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.chart-caption small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.chart-foot {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}

.md { font-size: 15px; line-height: 1.55; overflow-wrap: break-word; }
.md p, .md ul { margin: 0 0 0.8em; }
.md ul { padding-left: 1.2em; }
.md a { color: var(--link); text-decoration: none; }
.md .md-h1, .md .md-h2, .md .md-h3 { font-family: var(--font-heading);
  font-weight: 700; margin: 0.9em 0 0.35em; }
.md .md-h1 { font-size: 17px; }
.md .md-h2 { font-size: 16px; }
.md .md-h3 { font-size: 15px; }
.md > :first-child { margin-top: 0; }

/* An expandable bullet. A founder reads this on a phone: one line each, and
   the detail behind a line only when they ask for it. The marker has to look
   tappable without a caption saying so, and the tap target is the whole line
   rather than the triangle, because a thumb is not a mouse pointer. */
.md details > summary {
  list-style: none; cursor: pointer; position: relative; padding-right: 1.1em;
}
.md details > summary::-webkit-details-marker { display: none; }
.md details > summary::after {
  content: '⌄'; position: absolute; right: 0; top: -0.15em;
  color: var(--muted); font-size: 13px; transition: transform 0.15s ease;
}
.md details[open] > summary::after { transform: rotate(180deg); }
.md .md-detail {
  margin: 0.35em 0 0.2em; padding-left: 0.7em;
  border-left: 2px solid var(--line);
  color: var(--muted); font-size: 14px;
}

/* Tables. A lead list is 25 rows across six columns and the phone is 390px
   wide, so the table keeps its own width and scrolls sideways inside its box
   rather than crushing every column into two words per line. The first column
   stays put, because a row you have scrolled sideways is unreadable once the
   name is gone. */
.md-tablewrap {
  margin: 0 0 0.9em; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 8px;
}
.md-table { border-collapse: collapse; font-size: 13px; line-height: 1.35; min-width: 100%; }
.md-table th, .md-table td {
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.md-table th {
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--hint);
  position: sticky; top: 0; background: var(--raised);
}
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table th:first-child, .md-table td:first-child {
  position: sticky; left: 0; background: var(--raised);
}
.md-table td:first-child { font-variant-numeric: tabular-nums; color: var(--hint); }
.md-table a { color: var(--link); text-decoration: none; }

.md-clip { max-height: 340px; overflow: hidden; position: relative; }
.md-clip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--card));
}
.md-more {
  display: block;
  width: 100%;
  padding: 8px 0 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--link);
  text-align: center;
}

/* ---- connected: quiet trust rows ---- */

.conn { display: flex; flex-direction: column; }
.connrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.connrow:last-child { border-bottom: 0; }
.connrow .k { flex: 0 0 auto; color: var(--hint); }
.connrow .v {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
.connrow .v.unset { color: var(--hint); }

/* ---- item sheet ---- */

.sheet { position: fixed; inset: 0; z-index: 20; }

.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }

.panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 94%;
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  animation: rise 0.22s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.panel-head .dim { flex: 1; font-size: 13px; }
.panel-head .chip { background: var(--card); }

.close {
  width: 44px; height: 44px;
  margin: -10px -12px -10px 0;
  border-radius: 22px;
  font-size: 17px;
  color: var(--hint);
  display: flex; align-items: center; justify-content: center;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 16px;
}

/* The draft itself: a comfortable read. */
.draft { max-width: 34em; margin: 0 auto; font-size: 17px; line-height: 1.6; }
.draft p { margin: 0 0 1em; overflow-wrap: break-word; }
.draft .sec { font-family: var(--font-heading); font-size: 13px;
              font-weight: 600; text-transform: uppercase;
              letter-spacing: 0.08em; color: var(--hint); margin: 18px 0 6px; }
.draft .sec:first-child { margin-top: 2px; }
.draft ul { margin: 0 0 1em 1.2em; }
.draft pre {
  font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
  background: var(--card); border-radius: 8px; padding: 10px 12px;
  overflow-x: auto; margin-bottom: 1em; white-space: pre-wrap;
}

/* Preview artifact: the thing under review, so it gets the room. The frame
 * height chases the viewport rather than a fixed number, and the theme
 * variables keep it native in light and dark alike. */
.preview { margin: 0 auto 16px; max-width: 40em; }
.preview-holder { position: relative; }
.preview-frame {
  display: block; width: 100%; height: min(62vh, 560px);
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; /* an artifact styles itself; a dark page behind a light
                       magnet reads as a rendering bug, so the canvas is fixed */
}
.preview-img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 12px;
}
.preview .centre { padding: 24px 0; }
.preview .btn { max-width: 160px; margin: 10px auto 0; }

.decided-note {
  max-width: 34em; margin: 0 auto 14px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--card); color: var(--hint); font-size: 14px;
}

.panel-foot {
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.panel-foot:empty { display: none; }

.btn {
  display: block;
  width: 100%;
  min-height: 48px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
.btn.primary { background: var(--button); color: var(--button-text); }
.btn.quiet { color: var(--destructive); }
.btn.danger { background: var(--destructive); color: #fff; }
.btn[disabled] { opacity: 0.55; }
.btn + .btn { margin-top: 8px; }

/* Reject reason */
.why label { display: block; font-size: 15px; margin-bottom: 2px; }
.why .sub { font-size: 13px; color: var(--hint); margin-bottom: 8px; }
.why textarea {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  resize: vertical;
}
.why textarea:focus { outline: none; border-color: var(--link); }
.why .acts { display: flex; gap: 8px; margin-top: 10px; }
.why .acts .btn { flex: 1; margin: 0; }

/* ---- toast ---- */

.toast {
  position: fixed;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  max-width: 90%;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

/* Loading dots on rows and views */
.loading { color: var(--hint); padding: 20px 0; text-align: center; }