/* shikatext palette.
 *
 * Loaded after app.css and overrides nothing but the custom properties in
 * :root. Every rule in app.css already reads through those variables, so the
 * two products share one stylesheet and one set of components - a change to a
 * button here cannot drift from the button there.
 *
 * The hues shift from grpme's blue to shikatext's red - the same red as its
 * landing page and its icon - so an operator with both sites open never
 * mistakes one tab for the other. It was amber until the landing page went
 * red and the product was two colours at once. Contrast against --bg was
 * checked for --ink (14.6:1), --dim (5.2:1), --accent as text (6.3:1), and
 * white on --accent2 (5.1:1) and on --accent3 (6.6:1), the buttons.
 */
:root{
  --bg:#12100c; --pane:#1b1813; --pane2:#221e18; --line:#332c22;
  --ink:#f2ece1; --dim:#a8998b; --faint:#9b8b7c;
  --accent:#ff5b61; --accent2:#d81f26; --accent3:#b8171d; --green:#39b06a; --warn:#e0c13a;
  --radius:12px; --bad:#ff7b5c;
}

/* Layout shikatext needs and grpme has no use for. Everything else - cards,
 * tables, pills, stats - is reused from app.css unchanged, so the two products
 * cannot drift apart component by component. */

/* A horizontal form line that wraps rather than overflowing on a phone. */
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.row input,.row select{flex:1 1 160px;min-width:0}
.row.tight{margin:0;gap:4px}
.row.tight select{flex:0 0 auto}

.wrap.narrow,main.narrow{max-width:560px}

/* Blast progress. The width is set inline from the server and then updated by
 * shika.js, so the transition is what makes it read as movement. */
.bar{height:8px;border-radius:999px;background:var(--pane2);
     border:1px solid var(--line);overflow:hidden;margin:14px 0 8px}
.barfill{height:100%;background:var(--accent);width:0;
         transition:width .4s ease}

.filters{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}

.link.bad{color:var(--bad)}

textarea{width:100%;background:var(--pane2);color:var(--ink);
         border:1px solid var(--line);border-radius:var(--radius);
         padding:10px 12px;font:inherit;resize:vertical}