/* RanchNet components. The variable fonts are same-origin and preloaded, so
   block waits for them instead of drawing a fallback and reflowing. Static
   cuts remain in fonts/ for tools that want one weight. */
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/SourceSans3VF-Upright.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("../fonts/SourceCodeVF-Upright.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}

/* RanchNet components — plain CSS, class prefix rn-. Every color, radius and shadow comes from tokens.css.
   Alignment: wherever a dot, box, badge or icon sits beside text, the text is trimmed to its cap height
   (text-box) so the pair centers on the letters, not the line box. Browsers without text-box get measured nudges. */

.rn-root, .rn-root * { box-sizing: border-box; }
.rn-root { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--ink); }

/* ---------- Button ---------- */
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 24px; padding: 0 12px;
  font: 600 13px/16px var(--font-sans); color: var(--ink); white-space: nowrap;
  background: linear-gradient(var(--button-hi), var(--button-lo));
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.9);
  cursor: pointer; text-decoration: none;
}
.rn-btn:active, .rn-btn.is-pressed { background: linear-gradient(var(--button-lo), var(--surface-muted)); box-shadow: var(--shadow-inset); }
.rn-btn[disabled] { color: var(--ink-tertiary); box-shadow: none; opacity: 0.7; }
.rn-btn--primary {
  color: var(--on-sky); border-color: var(--sky-lo);
  background:
    linear-gradient(rgba(255,255,255,0.32), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 50%),
    linear-gradient(var(--sky-hi), var(--sky-lo));
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rn-btn--primary:active, .rn-btn--primary.is-pressed { background: linear-gradient(var(--sky-lo), var(--sky)); box-shadow: var(--shadow-inset); }
.rn-btn--primary[disabled] { color: var(--on-sky); opacity: 0.55; }
.rn-btn--danger { color: var(--on-sky); border-color: var(--danger); background: linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0) 50%), linear-gradient(var(--danger), var(--danger)); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
.rn-btn--large { height: 32px; padding: 0 18px; font-size: 15px; line-height: 20px; }
.rn-btn--block { display: flex; width: 100%; }
.rn-btn--icon { width: 28px; padding: 0; }
.rn-btn.is-busy, .rn-btn.is-busy[disabled] { opacity: 1; cursor: not-allowed; }
.rn-btn--primary.is-busy { color: var(--on-sky); }

/* ---------- Focus ---------- */
.rn-btn:focus-visible, .rn-field:focus-visible, .rn-select:focus-visible, .rn-seg button:focus-visible,
.rn-search input:focus-visible, .rn-check input:focus-visible, .rn-alert__dismiss:focus-visible, .rn-callout__dismiss:focus-visible,
.rn-sidebar__row:focus-visible, .rn-code-input:focus-visible, .rn-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Spinner (asynchronous progress) ---------- */
.rn-spinner {
  display: inline-block; flex: none; width: 16px; height: 16px; color: var(--ink-secondary);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cline x1='8.00' y1='4.10' x2='8.00' y2='1.40' stroke-opacity='1.0'/%3E%3Cline x1='6.05' y1='4.62' x2='4.70' y2='2.28' stroke-opacity='0.925'/%3E%3Cline x1='4.62' y1='6.05' x2='2.28' y2='4.70' stroke-opacity='0.85'/%3E%3Cline x1='4.10' y1='8.00' x2='1.40' y2='8.00' stroke-opacity='0.775'/%3E%3Cline x1='4.62' y1='9.95' x2='2.28' y2='11.30' stroke-opacity='0.7'/%3E%3Cline x1='6.05' y1='11.38' x2='4.70' y2='13.72' stroke-opacity='0.625'/%3E%3Cline x1='8.00' y1='11.90' x2='8.00' y2='14.60' stroke-opacity='0.55'/%3E%3Cline x1='9.95' y1='11.38' x2='11.30' y2='13.72' stroke-opacity='0.475'/%3E%3Cline x1='11.38' y1='9.95' x2='13.72' y2='11.30' stroke-opacity='0.4'/%3E%3Cline x1='11.90' y1='8.00' x2='14.60' y2='8.00' stroke-opacity='0.325'/%3E%3Cline x1='11.38' y1='6.05' x2='13.72' y2='4.70' stroke-opacity='0.25'/%3E%3Cline x1='9.95' y1='4.62' x2='11.30' y2='2.28' stroke-opacity='0.175'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cline x1='8.00' y1='4.10' x2='8.00' y2='1.40' stroke-opacity='1.0'/%3E%3Cline x1='6.05' y1='4.62' x2='4.70' y2='2.28' stroke-opacity='0.925'/%3E%3Cline x1='4.62' y1='6.05' x2='2.28' y2='4.70' stroke-opacity='0.85'/%3E%3Cline x1='4.10' y1='8.00' x2='1.40' y2='8.00' stroke-opacity='0.775'/%3E%3Cline x1='4.62' y1='9.95' x2='2.28' y2='11.30' stroke-opacity='0.7'/%3E%3Cline x1='6.05' y1='11.38' x2='4.70' y2='13.72' stroke-opacity='0.625'/%3E%3Cline x1='8.00' y1='11.90' x2='8.00' y2='14.60' stroke-opacity='0.55'/%3E%3Cline x1='9.95' y1='11.38' x2='11.30' y2='13.72' stroke-opacity='0.475'/%3E%3Cline x1='11.38' y1='9.95' x2='13.72' y2='11.30' stroke-opacity='0.4'/%3E%3Cline x1='11.90' y1='8.00' x2='14.60' y2='8.00' stroke-opacity='0.325'/%3E%3Cline x1='11.38' y1='6.05' x2='13.72' y2='4.70' stroke-opacity='0.25'/%3E%3Cline x1='9.95' y1='4.62' x2='11.30' y2='2.28' stroke-opacity='0.175'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: rn-spin 0.9s steps(12) infinite;
}
.rn-spinner--xs { width: 10px; height: 10px; }
.rn-spinner--sm { width: 12px; height: 12px; }
.rn-spinner--lg { width: 32px; height: 32px; }
.rn-btn--primary .rn-spinner { color: var(--on-sky); }
@keyframes rn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rn-spinner { animation-duration: 2.4s; } }

/* ---------- Segmented control ---------- */
.rn-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-control); overflow: hidden; }
.rn-seg button {
  height: 22px; min-width: 32px; padding: 0 12px; margin: 0;
  font: 600 13px/16px var(--font-sans); color: var(--ink);
  background: linear-gradient(var(--button-hi), var(--button-lo));
  border: 0; border-left: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
}
.rn-seg button:first-child { border-left: 0; }
.rn-seg button[aria-pressed="true"] { background: linear-gradient(var(--chrome-lo), var(--chrome-hi)); box-shadow: var(--shadow-inset); }
.rn-seg button[disabled] { color: var(--ink-tertiary); }
.rn-seg svg { display: block; }

/* ---------- Text field, help and messages ---------- */
.rn-field {
  height: 24px; padding: 0 8px; min-width: 0;
  font: 400 13px/16px var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  box-shadow: var(--shadow-inset);
}
.rn-field::placeholder { color: var(--ink-tertiary); }
.rn-field[aria-invalid="true"] { border-color: var(--danger); box-shadow: var(--shadow-inset), 0 0 0 1px var(--danger); }
.rn-field[disabled] { background: var(--surface-muted); color: var(--ink-tertiary); box-shadow: none; }
.rn-field[readonly] { background: var(--surface-muted); box-shadow: none; }
.rn-label { display: block; margin-bottom: 4px; font: 600 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-help { margin: 4px 0 0; font: 400 12px/16px var(--font-sans); color: var(--ink-tertiary); }
.rn-message { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-message svg, .rn-message .rn-spinner { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.rn-message--error { color: var(--danger); }
.rn-message--success { color: var(--hill-ink); }
.rn-message--warning { color: var(--warning); }
.rn-search { position: relative; display: inline-flex; align-items: center; }
.rn-search svg, .rn-search .rn-spinner { position: absolute; left: 8px; color: var(--ink-tertiary); pointer-events: none; }
.rn-search input {
  height: 22px; width: 100%; padding: 0 10px 0 24px;
  font: 400 13px/16px var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset);
}
.rn-search input::placeholder { color: var(--ink-tertiary); }

/* ---------- Code field (one-time and pairing codes) ---------- */
.rn-code-input {
  width: 13.5ch; height: 44px; padding: 0 0 0 0.6em;
  font: 600 22px/1 var(--font-mono); letter-spacing: 0.6em; text-align: center; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  box-shadow: var(--shadow-inset);
}
.rn-code-input::placeholder { color: var(--line); }
.rn-code-input[aria-invalid="true"] { border-color: var(--danger); box-shadow: var(--shadow-inset), 0 0 0 1px var(--danger); }
.rn-code-input[disabled] { background: var(--surface-muted); color: var(--ink-tertiary); }

/* A recovery code: wider and less tracked than the six-digit code field. */
.rn-code-input--recovery {
  width: 100%; height: 32px; padding: 0 var(--space-2);
  font: 600 16px/20px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.rn-code-input--recovery::placeholder { letter-spacing: 0; text-transform: none; }

/* ---------- Select (pop-up button) ---------- */
.rn-select {
  -webkit-appearance: none; appearance: none;
  height: 24px; padding: 0 30px 0 10px; min-width: 120px;
  font: 400 13px/16px var(--font-sans); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 4.5 L4 2 L6.5 4.5 M1.5 7.5 L4 10 L6.5 7.5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 8px 12px no-repeat,
    linear-gradient(var(--sky-lo), var(--sky-lo)) right 20px top / 1px 100% no-repeat,
    linear-gradient(rgba(255,255,255,0.32), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 50%) right top / 20px 100% no-repeat,
    linear-gradient(var(--sky-hi), var(--sky-lo)) right top / 20px 100% no-repeat,
    linear-gradient(var(--button-hi), var(--button-lo));
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.9);
}
.rn-select[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.rn-select[disabled] { color: var(--ink-tertiary); opacity: 0.7; box-shadow: none; }

/* ---------- Checkbox and radio ---------- */
.rn-check { display: inline-flex; align-items: center; gap: 7px; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.rn-check input {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0;
  width: 14px; height: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-field);
  background: linear-gradient(var(--button-hi), var(--button-lo));
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.9);
}
.rn-check input[type="radio"] { border-radius: var(--radius-pill); }
.rn-check input:checked {
  border-color: var(--sky-lo);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 L6.8 11.6 L12.5 4.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat,
    linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0) 50%),
    linear-gradient(var(--sky-hi), var(--sky-lo));
}
.rn-check input[type="radio"]:checked {
  background:
    radial-gradient(circle, var(--on-sky) 0 2.6px, rgba(255,255,255,0) 3.2px),
    linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0) 50%),
    linear-gradient(var(--sky-hi), var(--sky-lo));
}
.rn-check input:disabled { opacity: 0.5; box-shadow: none; }
.rn-check input:disabled + .rn-check__label { color: var(--ink-tertiary); }
.rn-check input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }

/* ---------- Toolbar ---------- */
.rn-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; flex-wrap: wrap;
  background: linear-gradient(var(--chrome-hi), var(--chrome-lo));
  border-bottom: 1px solid var(--chrome-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.rn-toolbar__title { font: 600 13px/16px var(--font-sans); color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.rn-toolbar__spacer { flex: 1 1 auto; }

/* ---------- Source list ---------- */
.rn-sidebar { background: var(--sidebar); padding: 8px 0 12px; border-right: 1px solid var(--line); }
.rn-sidebar__head { padding: 10px 12px 4px; font: 700 11px/14px var(--font-sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-secondary); }
.rn-sidebar__row {
  display: flex; align-items: center; gap: 7px; width: 100%; min-height: 24px;
  padding: 3px 12px 3px 20px; border: 0; background: transparent; text-align: left;
  font: 400 13px/18px var(--font-sans); color: var(--ink); text-decoration: none;
}
.rn-sidebar__row:hover { background: var(--sky-pale); }
.rn-sidebar__row.is-selected { color: var(--on-sky); font-weight: 600; background: linear-gradient(var(--selection), var(--sky-lo)); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
.rn-sidebar__row .rn-badge { margin-left: auto; }
.rn-sidebar__row svg { flex: none; width: 16px; height: 16px; }
.rn-sidebar__row.is-selected .rn-spinner { color: var(--on-sky); }

/* ---------- Panel ---------- */
.rn-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); overflow: hidden; }
.rn-panel__head {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px;
  font: 600 13px/16px var(--font-sans); color: var(--ink);
  background: linear-gradient(var(--surface), var(--chrome-hi));
  border-bottom: 1px solid var(--line);
}
.rn-panel__body { padding: 16px; }

/* ---------- Loading, error and empty states (inside panels, tables, pages) ---------- */
.rn-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; font: 400 14px/20px var(--font-sans); color: var(--ink-secondary); }
.rn-state__icon { width: 32px; height: 32px; color: var(--ink-tertiary); }
.rn-state__title { margin: 4px 0 0; font: 600 15px/20px var(--font-sans); color: var(--ink); }
.rn-state p { margin: 0; max-width: 32em; }
.rn-state .rn-btn { margin-top: 6px; }
.rn-state--error .rn-state__icon { color: var(--danger); }

/* ---------- Badge, status, avatar ---------- */
.rn-badge {
  display: inline-block; flex: none; min-width: 18px; height: 16px; padding: 0 6px;
  border-radius: var(--radius-pill); text-align: center;
  font: 700 11px/16px var(--font-sans); color: var(--on-sky); background: var(--ink-tertiary);
}
.rn-badge--sky { background: var(--sky); }
.rn-sidebar__row.is-selected .rn-badge { background: var(--on-sky); color: var(--sky); text-shadow: none; }
.rn-status { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-status__dot { flex: none; width: 9px; height: 9px; margin: 0 1.5px; border-radius: var(--radius-pill); background: radial-gradient(circle at 35% 30%, var(--surface) 0, var(--line-strong) 45%, var(--ink-secondary) 100%); box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.rn-status--online { color: var(--hill-ink); }
.rn-status--online .rn-status__dot { background: radial-gradient(circle at 35% 30%, var(--road) 0, var(--hill) 45%, var(--hill-ink) 100%); }
.rn-status--warning { color: var(--warning); }
.rn-status--warning .rn-status__dot { background: radial-gradient(circle at 35% 30%, var(--road) 0, var(--road-edge) 40%, var(--warning) 100%); }
.rn-status--error { color: var(--danger); }
.rn-status--error .rn-status__dot { background: radial-gradient(circle at 35% 30%, var(--danger-pale) 0, var(--danger) 55%, var(--danger) 100%); }
/* A status indicator always occupies one 12px slot: the 9px dot (+1.5px each side) or a 12px spinner, so labels line up whichever is showing. */
.rn-status__busy { width: 12px; height: 12px; }
.rn-avatar {
  display: inline-block; flex: none; width: 28px; height: 28px; border-radius: var(--radius-pill); overflow: hidden;
  text-align: center; font: 700 12px/28px var(--font-sans); color: var(--on-sky); text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0) 55%), var(--sky);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
img.rn-avatar { object-fit: cover; background: var(--surface-muted); }
.rn-avatar--hill { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0) 55%), var(--hill-ink); }
.rn-avatar--saddle { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0) 55%), var(--saddle); }
.rn-avatar--ink { background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0) 55%), var(--ink-secondary); }
.rn-avatar--sm { width: 20px; height: 20px; font-size: 10px; line-height: 20px; }
.rn-avatar--lg { width: 40px; height: 40px; font-size: 16px; line-height: 40px; }

/* Cap-height centering where supported; measured nudges otherwise */
@supports (text-box: trim-both cap alphabetic) {
  .rn-badge { height: auto; line-height: 1; text-box: trim-both cap alphabetic; padding-block: calc((16px - 1cap) / 2); }
  .rn-avatar { line-height: 1; text-box: trim-both cap alphabetic; padding-block: calc((28px - 1cap) / 2); }
  .rn-avatar--sm { padding-block: calc((20px - 1cap) / 2); }
  .rn-avatar--lg { padding-block: calc((40px - 1cap) / 2); }
  .rn-status__label, .rn-check__label, .rn-sidebar__label { line-height: 1; text-box: trim-both cap alphabetic; }
  .rn-sidebar__row { padding-block: calc((24px - 1cap) / 2); }
}
@supports not (text-box: trim-both cap alphabetic) {
  .rn-badge { line-height: 17px; }
  .rn-status__dot, .rn-status__busy { position: relative; top: -1.5px; }
  .rn-check input { position: relative; top: -1px; }
}

/* ---------- Progress ---------- */
.rn-progress { height: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-muted); box-shadow: var(--shadow-inset); overflow: hidden; }
.rn-progress__fill {
  height: 100%; border-radius: var(--radius-pill);
  background:
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%),
    linear-gradient(var(--sky-hi), var(--sky-lo));
}
.rn-progress--indeterminate .rn-progress__fill {
  width: 100%;
  background:
    linear-gradient(rgba(255,255,255,0.4), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50%),
    linear-gradient(-45deg, var(--sky-hi) 25%, var(--sky-lo) 25% 50%, var(--sky-hi) 50% 75%, var(--sky-lo) 75%);
  background-size: 100% 100%, 20px 20px;
  animation: rn-stripes 0.8s linear infinite;
}
.rn-progress.is-failed .rn-progress__fill { background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 50%), linear-gradient(var(--danger), var(--danger)); }
@keyframes rn-stripes { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 20px 0; } }
@media (prefers-reduced-motion: reduce) { .rn-progress--indeterminate .rn-progress__fill { animation: none; } }

/* ---------- Alert ---------- */
.rn-alert { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--sky-edge); border-radius: var(--radius-panel); background: var(--sky-wash); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.rn-alert__icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--sky); }
.rn-alert__body { flex: 1 1 auto; min-width: 0; }
.rn-alert__body strong { font-weight: 600; }
.rn-alert--error { background: var(--danger-pale); border-color: var(--danger-edge); }
.rn-alert--error .rn-alert__icon { color: var(--danger); }
.rn-alert--success { background: var(--hill-pale); border-color: var(--hill-edge); }
.rn-alert--success .rn-alert__icon { color: var(--hill-ink); }
.rn-alert--warning { background: var(--road); border-color: var(--road-edge); }
.rn-alert--warning .rn-alert__icon { color: var(--warning); }

/* ---------- Callout ---------- */
.rn-callout { padding: 12px 16px; background: var(--road); border: 1px solid var(--road-edge); border-radius: var(--radius-panel); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.rn-callout strong { font-weight: 600; }

/* ---------- Dialog (sheet) ---------- */
.rn-dialog { width: min(440px, calc(100vw - 32px)); padding: 0; margin: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--chrome-edge); border-radius: var(--radius-panel); box-shadow: var(--shadow-window); font: 400 14px/20px var(--font-sans); }
.rn-dialog::backdrop { background: rgba(0,0,0,0.35); }
.rn-dialog__body { display: flex; gap: 16px; padding: 20px 20px 16px; }
.rn-dialog__icon { flex: none; width: 48px; height: 48px; }
.rn-dialog__title { margin: 0 0 4px; font: 600 15px/20px var(--font-sans); }
.rn-dialog__text { margin: 0; color: var(--ink-secondary); }
.rn-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 20px 16px; }
.rn-dialog .rn-alert { margin-top: 12px; }

/* ---------- Menu ---------- */
.rn-menu { min-width: 200px; margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid rgba(0,0,0,0.22); border-radius: 6px; box-shadow: var(--shadow-menu); font: 400 13px/18px var(--font-sans); }
.rn-menu__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 16px 3px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); text-decoration: none; }
.rn-menu__item svg { flex: none; width: 16px; height: 16px; }
.rn-menu__item:hover, .rn-menu__item:focus-visible, .rn-menu__item.is-active { outline: none; color: var(--on-sky); background: linear-gradient(var(--selection), var(--sky-lo)); text-shadow: 0 -1px 0 rgba(0,0,0,0.2); }
.rn-menu__item--danger { color: var(--danger); }
.rn-menu__item[aria-disabled="true"] { color: var(--ink-tertiary); background: none; text-shadow: none; }
.rn-menu__sep { height: 1px; margin: 4px 0; background: var(--line); }
.rn-menu__head { padding: 4px 12px 2px; font: 700 11px/14px var(--font-sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-secondary); }

/* ---------- Table (list view) ---------- */
.rn-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-field); }
.rn-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 13px/18px var(--font-sans); color: var(--ink); }
.rn-table th { position: relative; padding: 4px 10px; text-align: left; font-weight: 600; white-space: nowrap; background: linear-gradient(var(--surface), var(--chrome-hi)); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.rn-table th:last-child { border-right: 0; }
.rn-table th[aria-sort] { background: linear-gradient(var(--sky-wash), var(--sky-pale)); }
.rn-table th[aria-sort="ascending"]::after, .rn-table th[aria-sort="descending"]::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: middle; }
.rn-table th[aria-sort="ascending"]::after { border-bottom: 5px solid var(--ink-secondary); border-top: 0; }
.rn-table th[aria-sort="descending"]::after { border-top: 5px solid var(--ink-secondary); border-bottom: 0; }
.rn-table td { padding: 4px 10px; }
.rn-table tbody tr:nth-child(even) td { background: var(--surface-muted); }
.rn-table tbody tr.is-selected td { color: var(--on-sky); background: linear-gradient(var(--selection), var(--sky-lo)); }
.rn-table .rn-table__muted { color: var(--ink-secondary); }
.rn-table tbody tr.is-selected .rn-table__muted { color: var(--on-sky); }
.rn-table td.rn-table__state { padding: 0; background: var(--surface); }

/* ---------- Code ---------- */
.rn-code { font: 400 13px/20px var(--font-mono); background: var(--surface-muted); border: 1px solid var(--line); border-radius: var(--radius-field); padding: 8px 12px; color: var(--ink); }
.rn-link { color: var(--sky); text-decoration: none; }
.rn-link:hover { text-decoration: underline; }

/* =========================================================
   LAYOUT — full-window shell, dense pages
   Data views fill the width and add columns as it grows; reading and forms cap at 760px.
   ========================================================= */
.rn-shell {
  display: grid; grid-template-columns: var(--rn-sidebar-w, 220px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh; background: var(--surface-muted); color: var(--ink); font: 400 14px/20px var(--font-sans);
}
.rn-shell--detail { grid-template-columns: var(--rn-sidebar-w, 220px) minmax(0, 1fr) var(--rn-detail-w, 300px); }
.rn-shell > .rn-toolbar, .rn-shell > .rn-bottombar { grid-column: 1 / -1; }
.rn-shell__sidebar { min-height: 0; overflow: auto; }
.rn-shell__main { min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.rn-shell__detail { min-width: 0; overflow: auto; background: var(--surface); border-left: 1px solid var(--line); }
@media (max-width: 1100px) { .rn-shell--detail { grid-template-columns: var(--rn-sidebar-w, 220px) minmax(0, 1fr); } .rn-shell--detail .rn-shell__detail { display: none; } }
@media (max-width: 760px) {
  .rn-shell, .rn-shell--detail { grid-template-columns: minmax(0, 1fr); }
  .rn-shell__sidebar { display: none; }
  .rn-shell.is-nav .rn-shell__sidebar { display: block; }
  .rn-shell.is-nav .rn-shell__main { display: none; }
}

/* Page header: one dense strip, never a hero */
.rn-pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rn-pagehead__title { margin: 0; font: 600 18px/24px var(--font-sans); color: var(--ink); }
.rn-pagehead__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-pagehead__actions { display: flex; gap: 8px; margin-left: auto; }

/* Page bodies */
.rn-page { padding: 12px 16px 16px; }
.rn-page--reading { width: 100%; max-width: 792px; margin: 0 auto; padding: 16px; }

/* Dashboard grid: more width = more panels, not wider ones */
.rn-dash {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-auto-flow: row dense;
  align-items: start; gap: 12px; padding: 12px 16px 16px; max-width: 2560px; container-type: inline-size;
}
.rn-dash__wide { grid-column: span 2; }
.rn-dash__full { grid-column: 1 / -1; }
@container (max-width: 700px) { .rn-dash__wide { grid-column: 1 / -1; } }

/* Dense panel */
.rn-panel--dense .rn-panel__head { padding: 6px 12px; }
.rn-panel--dense .rn-panel__body { padding: 10px 12px; }
.rn-panel__meta { margin-left: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-panel > .rn-table { border: 0; }
.rn-panel > .rn-table-wrap { border: 0; border-radius: 0; }

/* Key/value and meter rows */
.rn-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 6px 12px; margin: 0; font: 400 13px/18px var(--font-sans); }
.rn-kv dt { color: var(--ink); }
.rn-kv dd { margin: 0; color: var(--ink-secondary); }
.rn-kv dd:last-child { text-align: right; }
.rn-kv .rn-progress { height: 10px; }

/* Bottom bar with small square buttons */
.rn-bottombar { display: flex; align-items: center; gap: 0; height: 24px; padding: 0 8px 0 0; background: linear-gradient(var(--chrome-hi), var(--chrome-lo)); border-top: 1px solid var(--chrome-edge); font: 400 11px/14px var(--font-sans); color: var(--ink-secondary); }
.rn-bottombar__btn { display: grid; place-items: center; width: 26px; height: 23px; padding: 0; border: 0; border-right: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.rn-bottombar__btn:active { background: rgba(0,0,0,0.12); }
.rn-bottombar__text { margin-left: auto; }

/* Two-column form: right-aligned labels, left-aligned fields */
.rn-form { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr); align-items: baseline; gap: 10px 12px; font: 400 13px/18px var(--font-sans); }
.rn-form__label { text-align: right; font: 400 13px/24px var(--font-sans); color: var(--ink); }
.rn-form__field { min-width: 0; }
.rn-form__field > .rn-help { margin-top: 3px; }
.rn-form__sep { grid-column: 1 / -1; height: 1px; margin: 4px 0; background: var(--line); }
.rn-form__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 600px) { .rn-form { grid-template-columns: minmax(0, 1fr); gap: 4px; } .rn-form__label { text-align: left; line-height: 16px; margin-top: 8px; font-weight: 600; font-size: 12px; color: var(--ink-secondary); } }

/* Preferences tab bar: big icons across the top */
.rn-prefs { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; padding: 6px 10px 5px; background: linear-gradient(var(--chrome-hi), var(--chrome-lo)); border-bottom: 1px solid var(--chrome-edge); }
.rn-prefs__tab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 72px; padding: 4px 8px 3px; border: 0; border-radius: var(--radius-control); background: transparent; font: 600 11px/14px var(--font-sans); color: var(--ink); text-decoration: none; text-shadow: 0 1px 0 rgba(255,255,255,0.6); }
.rn-prefs__tab img, .rn-prefs__tab svg { width: 32px; height: 32px; }
.rn-prefs__tab[aria-selected="true"] { background: rgba(0,0,0,0.11); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25); }
.rn-prefs__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* =========================================================
   GLYPHS — solid 16px icons; color icons are <img> at 32px and up
   ========================================================= */
.rn-glyph { display: block; flex: none; width: 16px; height: 16px; }
.rn-glyph--sm { width: 12px; height: 12px; }
.rn-glyph--lg { width: 32px; height: 32px; }
.rn-toolbar .rn-glyph, .rn-seg .rn-glyph, .rn-bottombar .rn-glyph, .rn-btn .rn-glyph, .rn-menu__item .rn-glyph { color: var(--glyph); filter: drop-shadow(0 1px 0 rgba(255,255,255,0.75)); }
.rn-btn--primary .rn-glyph, .rn-btn--danger .rn-glyph { color: var(--on-sky); filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.25)); }
.rn-btn[disabled] .rn-glyph { color: var(--ink-tertiary); }
.rn-menu__item .rn-glyph { filter: none; }
.rn-menu__item:hover .rn-glyph, .rn-menu__item.is-active .rn-glyph, .rn-menu__item:focus-visible .rn-glyph { color: var(--on-sky); }
.rn-menu__item--danger .rn-glyph { color: var(--danger); }
.rn-sidebar__row .rn-glyph { color: var(--glyph-sidebar); filter: none; }
.rn-sidebar__row.is-selected .rn-glyph { color: var(--on-sky); }
.rn-search .rn-glyph { color: var(--ink-tertiary); filter: none; }
.rn-icon { display: block; flex: none; }

/* =========================================================
   AUTH — setup assistant, choices, recovery codes, lists, pairing
   ========================================================= */
.rn-setup {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); width: 100%; max-width: 760px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--chrome-edge); border-radius: var(--radius-panel); box-shadow: var(--shadow-window); overflow: hidden;
}
.rn-setup__steps { margin: 0; padding: 16px 0; list-style: none; background: var(--sidebar); border-right: 1px solid var(--line); }
.rn-setup__step { display: flex; align-items: center; gap: 8px; padding: 5px 16px; font: 400 13px/18px var(--font-sans); color: var(--ink-secondary); }
.rn-setup__step[aria-current="step"] { color: var(--ink); font-weight: 600; }
.rn-setup__mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-pill); font: 700 10px/1 var(--font-sans); color: var(--on-sky); background: var(--glyph-sidebar); }
.rn-setup__step[aria-current="step"] .rn-setup__mark { background: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0) 50%), linear-gradient(var(--sky-hi), var(--sky-lo)); box-shadow: 0 0 0 1px var(--sky-lo); }
.rn-setup__step.is-done .rn-setup__mark { background: var(--hill-ink); }
.rn-setup__step.is-done .rn-setup__mark .rn-glyph { width: 10px; height: 10px; color: var(--on-sky); filter: none; }
.rn-setup__main { display: flex; flex-direction: column; min-width: 0; min-height: 380px; }
.rn-setup__head { display: flex; align-items: center; gap: 16px; padding: 20px 24px 8px; }
.rn-setup__title { margin: 0; color: var(--ink); }
.rn-setup__lede { margin: 2px 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-secondary); }
.rn-setup__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 8px 24px 20px; font: 400 14px/20px var(--font-sans); }
.rn-setup__foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-muted); border-top: 1px solid var(--line); }
.rn-setup__count { margin-right: auto; font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
@media (max-width: 640px) { .rn-setup { grid-template-columns: minmax(0, 1fr); } .rn-setup__steps { display: none; } .rn-setup__head { padding: 16px 16px 4px; } .rn-setup__body { padding: 8px 16px 16px; } }

/* Big radio choices */
.rn-choice { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); font: 400 14px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.rn-choice:has(input:checked) { background: var(--sky-wash); border-color: var(--sky-edge); box-shadow: 0 0 0 1px var(--sky-edge); }
.rn-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rn-choice input { margin-top: 3px; }
.rn-choice__title { display: block; font-weight: 600; }
.rn-choice__text { display: block; font-size: 13px; line-height: 18px; color: var(--ink-secondary); }

/* Recovery codes: eight single-use codes on road-cream paper. Two to a line, one on a phone. */
.rn-key { padding: 14px 16px 12px; background: var(--road); border: 1px solid var(--road-edge); border-radius: var(--radius-panel); box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
.rn-key__code { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 4px 16px; margin: 0; font: 600 13px/22px var(--font-mono); letter-spacing: 0.5px; color: var(--ink); }
@media (max-width: 420px) { .rn-key__code { grid-template-columns: max-content; } }
.rn-key__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }

/* Dense list rows (devices, sessions, members) */
.rn-list { margin: 0; padding: 0; list-style: none; }
.rn-list__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); }
.rn-list__row:first-child { border-top: 0; }
.rn-list__main { flex: 1; min-width: 0; }
.rn-list__title { display: flex; align-items: center; gap: 6px; font: 600 13px/18px var(--font-sans); color: var(--ink); }
.rn-list__sub { font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-list__aside { display: flex; align-items: center; gap: 8px; flex: none; }
.rn-list__row--pending { background: var(--sky-wash); }
.rn-tag { display: inline-block; padding: 0 6px; border-radius: var(--radius-pill); font: 700 10px/16px var(--font-sans); letter-spacing: 0.4px; text-transform: uppercase; color: var(--hill-ink); background: var(--hill-pale); border: 1px solid var(--hill-edge); }

/* Pairing */
.rn-pair-code { display: inline-block; padding: 12px 20px 12px 26px; font: 600 34px/1 var(--font-mono); letter-spacing: 0.22em; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control); box-shadow: var(--shadow-inset); }
.rn-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rn-words li { padding: 4px 12px; border-radius: var(--radius-pill); font: 600 15px/20px var(--font-sans); color: var(--ink); background: var(--sky-wash); border: 1px solid var(--sky-edge); }

/* =========================================================
   MESSAGING — Frio
   ========================================================= */
.rn-chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); flex: 1; min-height: 0; background: var(--surface); }
@media (max-width: 760px) { .rn-chat { grid-template-columns: minmax(0, 1fr); } .rn-chat.is-thread .rn-convos { display: none; } .rn-chat:not(.is-thread) .rn-thread-view { display: none; } }
.rn-convos { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.rn-convos__search { padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.rn-convos__list { flex: 1; overflow: auto; margin: 0; padding: 0; list-style: none; }
.rn-convo { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font: inherit; color: var(--ink); text-decoration: none; }
.rn-convo:hover { background: var(--sky-wash); }
.rn-convo__main { flex: 1; min-width: 0; }
.rn-convo__top { display: flex; align-items: baseline; gap: 8px; }
.rn-convo__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/18px var(--font-sans); }
.rn-convo__time { flex: none; font: 400 11px/14px var(--font-sans); color: var(--ink-tertiary); }
.rn-convo__preview { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-convo .rn-badge { margin-top: 18px; }
.rn-convo.is-selected { color: var(--on-sky); background: linear-gradient(var(--selection), var(--sky-lo)); }
.rn-convo.is-selected .rn-convo__time, .rn-convo.is-selected .rn-convo__preview { color: var(--on-sky); }
.rn-convo.is-unread .rn-convo__preview { color: var(--ink); }

.rn-thread-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rn-thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 7px 16px; background: linear-gradient(var(--surface), var(--chrome-hi)); border-bottom: 1px solid var(--line); }
.rn-thread-head__title { margin: 0; font: 600 15px/20px var(--font-sans); color: var(--ink); }
.rn-thread-head__meta { display: flex; align-items: center; gap: 6px; font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-thread-head__meta .rn-glyph { width: 12px; height: 12px; color: var(--hill-ink); }
.rn-thread-head__aside { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.rn-thread { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 16px; background: var(--surface); }
.rn-thread__day { align-self: center; margin: 10px 0 6px; font: 700 11px/14px var(--font-sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-tertiary); }
.rn-thread__note { align-self: center; display: flex; align-items: center; gap: 6px; max-width: 520px; margin: 8px 0; padding: 4px 12px; border-radius: var(--radius-pill); font: 400 12px/16px var(--font-sans); color: var(--ink); background: var(--road); border: 1px solid var(--road-edge); }
.rn-thread__note .rn-glyph { width: 12px; height: 12px; color: var(--warning); }

.rn-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(72%, 560px); margin-top: 8px; }
.rn-msg + .rn-msg--cont, .rn-msg--cont { margin-top: 2px; }
.rn-msg--out { align-self: flex-end; flex-direction: row-reverse; }
.rn-msg__avatar { flex: none; width: 28px; }
.rn-msg:has(.rn-msg__meta) .rn-msg__avatar { margin-bottom: 16px; }
.rn-msg__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.rn-msg--out .rn-msg__stack { align-items: flex-end; }
.rn-msg__name { padding: 0 12px; font: 600 11px/14px var(--font-sans); color: var(--ink-secondary); }
.rn-bubble {
  position: relative; padding: 6px 12px; border-radius: 16px; font: 400 14px/20px var(--font-sans); color: var(--ink); overflow-wrap: anywhere;
  background: linear-gradient(rgba(255,255,255,0.7), rgba(255,255,255,0) 55%), linear-gradient(var(--surface), var(--bubble-in-lo));
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 1px rgba(0,0,0,0.08);
}
.rn-msg--out .rn-bubble { background: linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0) 55%), linear-gradient(var(--bubble-out-hi), var(--bubble-out-lo)); border-color: var(--bubble-out-edge); }
.rn-msg__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; padding: 0 6px; font: 400 11px/14px var(--font-sans); color: var(--ink-tertiary); }
.rn-msg--out .rn-msg__meta { justify-content: flex-end; text-align: right; }
.rn-msg__meta .rn-glyph { width: 11px; height: 11px; }
.rn-msg__meta--error { color: var(--danger); }
.rn-msg__meta--error button { padding: 0; border: 0; background: none; font: 600 11px/14px var(--font-sans); color: var(--sky); text-decoration: underline; white-space: nowrap; }
.rn-msg--failed .rn-bubble { opacity: 0.75; }

.rn-attach { display: flex; align-items: center; gap: 10px; min-width: 240px; max-width: 340px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 1px rgba(0,0,0,0.08); }
.rn-attach__main { flex: 1; min-width: 0; }
.rn-attach__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/18px var(--font-sans); color: var(--ink); }
.rn-attach__sub { font: 400 12px/16px var(--font-sans); color: var(--ink-secondary); }
.rn-attach .rn-progress { height: 8px; margin-top: 4px; }

.rn-typing { display: inline-flex; gap: 4px; padding: 10px 12px; }
.rn-typing span { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--line-strong); animation: rn-typing 1.2s ease-in-out infinite; }
.rn-typing span:nth-child(2) { animation-delay: 0.15s; } .rn-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rn-typing { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rn-typing span { animation: none; opacity: 0.6; } }

.rn-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; background: linear-gradient(var(--chrome-hi), var(--chrome-lo)); border-top: 1px solid var(--chrome-edge); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); }
.rn-composer__input { flex: 1; min-width: 0; min-height: 28px; max-height: 120px; padding: 4px 12px; resize: none; font: 400 14px/18px var(--font-sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-inset); }
.rn-composer__input::placeholder { color: var(--ink-tertiary); }
.rn-composer__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rn-composer .rn-btn { height: 28px; }
.rn-composer__hint { display: flex; align-items: center; gap: 6px; padding: 4px 12px 6px; font: 400 11px/14px var(--font-sans); color: var(--ink-secondary); background: var(--chrome-lo); }
.rn-composer__hint .rn-glyph { width: 11px; height: 11px; color: var(--glyph); }

.rn-thumb { display: block; flex: none; width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--line-strong); object-fit: cover; box-shadow: 0 1px 1px rgba(0,0,0,0.12); }
.rn-state .rn-state__icon { width: 32px; height: 32px; }

/* Dismissable alerts and callouts. A persistent notice omits the button.
   [hidden] has to win over the flex display above. */
.rn-alert:has(.rn-alert__dismiss),
.rn-callout:has(.rn-callout__dismiss) { display: flex; align-items: flex-start; gap: 10px; }
.rn-callout__body { flex: 1 1 auto; min-width: 0; }
.rn-alert__dismiss, .rn-callout__dismiss {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 0 0 auto; padding: 0;
  align-self: flex-start; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--ink-secondary);
}
.rn-alert__dismiss:hover, .rn-callout__dismiss:hover { color: var(--ink); background: var(--surface-muted); }
.rn-alert__dismiss[disabled]:hover, .rn-callout__dismiss[disabled]:hover,
.rn-alert__dismiss[aria-disabled="true"]:hover, .rn-callout__dismiss[aria-disabled="true"]:hover {
  color: var(--ink-secondary); background: transparent;
}

/* Pointer on pressable controls. Disabled and busy controls do not invite a click, and do not change on hover. */
.rn-btn, .rn-seg button, .rn-menu__item, .rn-sidebar__row, .rn-convo,
button.rn-list__row, a.rn-list__row, button.rn-link, .rn-check, .rn-check input, .rn-choice,
.rn-alert__dismiss, .rn-callout__dismiss, .rn-msg__meta--error button, a.rn-btn,
.rn-bottombar__btn, .rn-prefs__tab { cursor: pointer; }
.rn-btn[disabled], .rn-btn[aria-disabled="true"], .rn-btn.is-busy,
button.rn-link[disabled], button.rn-link[aria-disabled="true"],
.rn-seg button[disabled], .rn-seg button[aria-disabled="true"],
.rn-menu__item[disabled], .rn-menu__item[aria-disabled="true"],
.rn-sidebar__row[disabled], .rn-sidebar__row[aria-disabled="true"],
.rn-convo[disabled], .rn-convo[aria-disabled="true"],
button.rn-list__row[disabled], button.rn-list__row[aria-disabled="true"],
a.rn-list__row[aria-disabled="true"],
.rn-check:has(input:disabled), .rn-check input:disabled, .rn-choice:has(input:disabled),
.rn-alert__dismiss[disabled], .rn-callout__dismiss[disabled],
.rn-bottombar__btn[disabled], .rn-bottombar__btn[aria-disabled="true"],
.rn-prefs__tab[disabled], .rn-prefs__tab[aria-disabled="true"],
.rn-msg__meta--error button[disabled], .rn-msg__meta--error button[aria-disabled="true"] { cursor: not-allowed; }
.rn-menu__item[aria-disabled="true"]:hover, .rn-menu__item[disabled]:hover,
.rn-menu__item[aria-disabled="true"]:focus-visible, .rn-menu__item[disabled]:focus-visible {
  color: var(--ink-tertiary); background: none; text-shadow: none; outline: none;
}
.rn-menu__item[aria-disabled="true"] .rn-glyph,
.rn-menu__item[aria-disabled="true"]:hover .rn-glyph,
.rn-menu__item--danger[aria-disabled="true"] .rn-glyph { color: var(--ink-tertiary); }
.rn-sidebar__row[aria-disabled="true"]:not(.is-selected):hover,
.rn-sidebar__row[disabled]:not(.is-selected):hover,
.rn-convo[aria-disabled="true"]:not(.is-selected):hover,
.rn-convo[disabled]:not(.is-selected):hover { background: transparent; }
.rn-bottombar__btn[disabled]:active, .rn-bottombar__btn[aria-disabled="true"]:active { background: transparent; }
.rn-btn[disabled]:active, .rn-btn[aria-disabled="true"]:active {
  background: linear-gradient(var(--button-hi), var(--button-lo));
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.9);
}
.rn-btn--primary[disabled]:active, .rn-btn--primary[aria-disabled="true"]:active {
  background:
    linear-gradient(rgba(255,255,255,0.32), rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 50%),
    linear-gradient(var(--sky-hi), var(--sky-lo));
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,0.35);
}
.rn-alert[hidden], .rn-callout[hidden] { display: none; }