/* ============================================================
   RAIDS DESIGN LANGUAGE — raids-ui.css
   Theme-aware tokens (--rui-*) via [data-bs-theme]; components prefix .rui-
   Variant A (Refined). Solid surfaces; blur only on overlays.
   Spec: docs/superpowers/specs/2026-06-19-raids-design-language-telegram-design.md
   ============================================================ */

/* ---------- TOKENS: LIGHT (default) ---------- */
:root{
  --rui-font:"Space Grotesk", system-ui, sans-serif;
  --rui-body:"Inter", system-ui, sans-serif;

  --rui-page:#f4f7fb; --rui-page-2:#eaeff6;
  --rui-card:#ffffff; --rui-card-2:#f7f9fc; --rui-elev:#ffffff; --rui-input:#ffffff;
  --rui-line:rgba(15,23,42,.10); --rui-line-2:rgba(15,23,42,.16); --rui-line-faint:rgba(15,23,42,.06);

  --rui-text:#0e1726; --rui-muted:#566377; --rui-faint:#8493a6;

  --rui-accent:#16c8db; --rui-accent-ink:#04222a; --rui-accent-strong:#0a8ea0;
  --rui-accent-hover:#13b6c8; --rui-accent-soft:rgba(22,200,219,.12); --rui-accent-line:rgba(10,142,160,.30);

  --rui-danger:#e0464b; --rui-danger-soft:rgba(224,70,75,.10);
  --rui-ok:#1f9d63; --rui-ok-soft:rgba(31,157,99,.12);
  --rui-warn:#d9870b; --rui-warn-soft:rgba(217,135,11,.12);

  --rk-raid:#d6336c; --rk-spawn:#0a8ea0; --rk-max:#e8590c; --rk-quest:#c79100; --rk-invasion:#c92a2a; --rk-lure:#9c36b5;

  --rui-r-1:8px; --rui-r-2:10px; --rui-r-3:12px; --rui-r-4:16px; --rui-r-pill:999px;
  --rui-sp-1:4px; --rui-sp-2:6px; --rui-sp-3:8px; --rui-sp-4:12px; --rui-sp-5:14px; --rui-sp-6:16px; --rui-sp-7:20px; --rui-sp-8:28px;

  --rui-sh-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --rui-sh-2:0 6px 20px rgba(16,24,40,.10);
  --rui-sh-3:0 18px 50px rgba(16,24,40,.20);
  --rui-overlay:rgba(15,23,42,.42);

  --rui-fs-xs:11px; --rui-fs-sm:12px; --rui-fs-md:13px; --rui-fs-base:14px; --rui-fs-lg:16px; --rui-fs-xl:20px;
  --rui-dur:.16s; --rui-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- TOKENS: DARK ---------- */
[data-bs-theme="dark"]{
  --rui-page:#0b0f17; --rui-page-2:#0e131d;
  --rui-card:#151b27; --rui-card-2:#1a2130; --rui-elev:#1a2230; --rui-input:#10151f;
  --rui-line:rgba(140,160,190,.14); --rui-line-2:rgba(140,160,190,.22); --rui-line-faint:rgba(140,160,190,.08);

  --rui-text:#e9edf7; --rui-muted:#aab6cc; --rui-faint:#76829a;

  --rui-accent:#16c8db; --rui-accent-ink:#04222a; --rui-accent-strong:#3fd9ea;
  --rui-accent-hover:#36d2e4; --rui-accent-soft:rgba(22,200,219,.14); --rui-accent-line:rgba(22,200,219,.32);

  --rui-danger:#ff6b81; --rui-danger-soft:rgba(255,107,129,.14);
  --rui-ok:#3ad29f; --rui-ok-soft:rgba(58,210,159,.14);
  --rui-warn:#f5b14c; --rui-warn-soft:rgba(245,177,76,.14);

  --rk-raid:#ff5c8a; --rk-spawn:#16c8db; --rk-max:#ff7a33; --rk-quest:#ffd43b; --rk-invasion:#ff6b6b; --rk-lure:#cc7bff;

  --rui-sh-1:0 1px 2px rgba(0,0,0,.40);
  --rui-sh-2:0 8px 26px rgba(0,0,0,.45);
  --rui-sh-3:0 20px 56px rgba(0,0,0,.60);
  --rui-overlay:rgba(4,7,12,.62);
}

/* ---------- SCOPE + PRIMITIVES ---------- */
.rui{font-family:var(--rui-body);color:var(--rui-text);font-size:var(--rui-fs-base);line-height:1.5}
.rui h1,.rui h2,.rui h3,.rui .eyebrow,.rui .ttl{font-family:var(--rui-font)}
.rui *,.rui *::before,.rui *::after{box-sizing:border-box}
.rui .eyebrow{font-size:var(--rui-fs-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--rui-faint)}

.rui-crumb{font-family:var(--rui-font);font-size:12px;color:var(--rui-muted);margin:2px 2px 14px;display:flex;gap:7px;align-items:center}
.rui-crumb a{color:var(--rui-muted);text-decoration:none}
.rui-crumb a:hover{color:var(--rui-accent-strong)}
.rui-crumb .sep{color:var(--rui-faint)}

.rui-card{background:var(--rui-card);border:1px solid var(--rui-line);border-radius:var(--rui-r-4);box-shadow:var(--rui-sh-1)}
.rui-card.pad{padding:16px}

/* status band */
.rui-status{position:relative;overflow:hidden;border-radius:var(--rui-r-4);border:1px solid var(--rui-line);
  background:var(--rui-card);box-shadow:var(--rui-sh-1);padding:16px;display:flex;gap:14px;align-items:center}
.rui-bot{flex:0 0 auto;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:var(--rui-accent-soft);color:var(--rui-accent-strong);border:1px solid var(--rui-accent-line)}
.rui-bot svg{width:28px;height:28px}
.rui-status .who{min-width:0;flex:1}
.rui-status .who .name{font-family:var(--rui-font);font-weight:700;font-size:var(--rui-fs-lg);line-height:1.2}
.rui-status .who .name b{color:var(--rui-accent-strong)}
.rui-status .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.rui-status .acts{display:flex;gap:8px;flex:0 0 auto}
@media (max-width:560px){.rui-status{flex-wrap:wrap}.rui-status .acts{width:100%}}

/* pills */
.rui-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--rui-r-pill);
  font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-xs);border:1px solid var(--rui-line);background:var(--rui-card-2);color:var(--rui-muted)}
.rui-pill .led{width:7px;height:7px;border-radius:99px;background:currentColor}
.rui-pill.ok{color:var(--rui-ok);background:var(--rui-ok-soft);border-color:transparent}
.rui-pill.accent{color:var(--rui-accent-strong);background:var(--rui-accent-soft);border-color:transparent}
.rui-pill.warn{color:var(--rui-warn);background:var(--rui-warn-soft);border-color:transparent}

/* buttons */
.rui-btn{appearance:none;cursor:pointer;font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-base);
  min-height:42px;padding:0 16px;border-radius:var(--rui-r-2);border:1px solid var(--rui-line-2);
  background:var(--rui-card-2);color:var(--rui-text);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:all var(--rui-dur) var(--rui-ease);text-decoration:none}
.rui-btn:hover{border-color:var(--rui-accent-line)}
.rui-btn svg{width:18px;height:18px}
.rui-btn.primary{background:var(--rui-accent);color:var(--rui-accent-ink);border-color:transparent}
.rui-btn.primary:hover{background:var(--rui-accent-hover)}
.rui-btn.ghost{background:transparent;border-color:transparent;color:var(--rui-muted)}
.rui-btn.ghost:hover{background:var(--rui-card-2);color:var(--rui-text)}
.rui-btn.danger{background:var(--rui-danger-soft);color:var(--rui-danger);border-color:transparent}
.rui-btn.sm{min-height:34px;padding:0 10px;font-size:var(--rui-fs-sm)}
.rui-btn.block{width:100%}
.rui-btn.icon{min-height:36px;width:36px;padding:0}

/* disclosure */
.rui-acc{margin-top:14px;border:1px solid var(--rui-line);border-radius:var(--rui-r-4);background:var(--rui-card);overflow:hidden;box-shadow:var(--rui-sh-1)}
.rui-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 16px;font-family:var(--rui-font);font-weight:600}
.rui-acc > summary::-webkit-details-marker{display:none}
.rui-acc > summary .chev{margin-left:auto;transition:transform var(--rui-dur) var(--rui-ease);color:var(--rui-faint)}
.rui-acc[open] > summary .chev{transform:rotate(180deg)}
.rui-acc .acc-in{padding:0 16px 16px;border-top:1px solid var(--rui-line-faint)}
.rui-steps{display:grid;gap:10px;margin:14px 0}
.rui-step{display:flex;gap:12px;align-items:flex-start}
.rui-step .n{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-family:var(--rui-font);
  font-weight:700;font-size:12px;background:var(--rui-accent-soft);color:var(--rui-accent-strong)}
.rui-step .t{font-weight:600;font-family:var(--rui-font)}
.rui-step .d{color:var(--rui-muted);font-size:var(--rui-fs-md)}
.rui .cmd-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--rui-line);border-radius:var(--rui-r-2);background:var(--rui-input);margin-top:8px}
.rui .cmd-row code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--rui-accent-strong);flex:1}
.rui .cmd-row .desc{color:var(--rui-faint);font-size:12px}

/* section header */
.rui .sec-head{display:flex;align-items:center;gap:10px;margin:24px 2px 12px}
.rui .sec-head h2{margin:0;font-size:var(--rui-fs-xl);font-weight:700;font-family:var(--rui-font)}
.rui .sec-head .count{font-family:var(--rui-font);font-size:12px;color:var(--rui-faint);background:var(--rui-card-2);border:1px solid var(--rui-line);border-radius:99px;padding:2px 9px}
.rui .sec-head .grow{flex:1}

/* rule card */
.rui .rule{position:relative;display:flex;gap:13px;align-items:flex-start;padding:14px;margin-bottom:10px;
  background:var(--rui-card);border:1px solid var(--rui-line);border-radius:var(--rui-r-4);box-shadow:var(--rui-sh-1);border-left:3px solid var(--rk)}
.rui .rule.off{opacity:.62}
.rui .rule .badge{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--rk)}
.rui .rule .badge svg{width:20px;height:20px}
.rui .rule .main{min-width:0;flex:1}
.rui .rule .row1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rui .rule .nm{font-family:var(--rui-font);font-weight:700}
.rui .rule .type-pill{font-family:var(--rui-font);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--rk);background:color-mix(in srgb,var(--rk) 14%, transparent);border-radius:99px;padding:2px 8px}
.rui .rule .area{display:flex;align-items:center;gap:6px;color:var(--rui-muted);font-size:var(--rui-fs-md);margin-top:5px}
.rui .rule .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.rui .rule .acts{flex:0 0 auto;display:flex;align-items:center;gap:6px}

/* chips */
.rui .chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--rui-r-pill);
  font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-xs);background:var(--rui-card-2);border:1px solid var(--rui-line);color:var(--rui-muted)}
.rui .chip.accent{color:var(--rui-accent-strong);background:var(--rui-accent-soft);border-color:transparent}
.rui .chip.poke .sp{width:16px;height:16px;border-radius:99px;display:inline-block;flex:0 0 auto;object-fit:contain}

/* toggle */
.rui-tg{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.rui-tg input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.rui-tg .tk{position:absolute;inset:0;border-radius:99px;background:var(--rui-card-2);border:1.5px solid var(--rui-line-2);transition:all var(--rui-dur) var(--rui-ease)}
.rui-tg .tk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--rui-faint);transition:all var(--rui-dur) var(--rui-ease)}
.rui-tg input:checked + .tk{background:var(--rui-accent);border-color:transparent}
.rui-tg input:checked + .tk::after{transform:translateX(18px);background:var(--rui-accent-ink)}
.rui-tg input:focus-visible + .tk{outline:2px solid var(--rui-accent-strong);outline-offset:2px}

/* fields */
.rui .field{margin-top:14px}
.rui .field > label{display:block;font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-md);margin-bottom:6px}
.rui .field .hint{color:var(--rui-faint);font-weight:400;font-size:12px}
.rui .field-hint{display:block;color:var(--rui-faint);font-size:12px;line-height:1.35;margin:-2px 0 8px}
.rui-input,.rui-select{width:100%;min-height:44px;padding:0 13px;border-radius:var(--rui-r-2);border:1px solid var(--rui-line-2);
  background:var(--rui-input);color:var(--rui-text);font-family:var(--rui-body);font-size:var(--rui-fs-base)}
.rui-input::placeholder{color:var(--rui-faint)}
.rui-input:focus,.rui-select:focus{outline:2px solid var(--rui-accent-strong);outline-offset:1px;border-color:transparent}
/* select: kill native chrome + eigen chevron (per thema) */
.rui-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:38px;
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23566377' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.rui-select::-ms-expand{display:none}
[data-bs-theme="dark"] .rui-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aab6cc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}

/* slider */
.rui-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;margin:12px 0 4px;background:linear-gradient(90deg,var(--rui-accent) 0 33%,var(--rui-line-2) 33% 100%)}
.rui-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--rui-accent);border:3px solid var(--rui-card);box-shadow:var(--rui-sh-1);cursor:pointer}
.rui-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--rui-accent);border:3px solid var(--rui-card);cursor:pointer}

/* segmented */
.rui-seg{display:inline-flex;background:var(--rui-card-2);border:1px solid var(--rui-line);border-radius:var(--rui-r-2);padding:3px;gap:2px}
.rui-seg button{appearance:none;border:0;background:transparent;color:var(--rui-muted);font-family:var(--rui-font);font-weight:600;font-size:var(--rui-fs-sm);padding:6px 12px;border-radius:7px;cursor:pointer;transition:all var(--rui-dur) var(--rui-ease);min-height:34px}
.rui-seg button:hover{color:var(--rui-text)}
.rui-seg button[aria-pressed="true"]{background:var(--rui-accent);color:var(--rui-accent-ink)}

/* sheet / modal */
.rui-sheet-back{position:fixed;inset:0;background:var(--rui-overlay);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;padding:24px 16px;z-index:1060}
.rui-sheet-back.show{display:flex}
.rui-sheet{width:100%;max-width:480px;background:var(--rui-elev);border:1px solid var(--rui-line);border-radius:var(--rui-r-4);box-shadow:var(--rui-sh-3);max-height:88%;display:flex;flex-direction:column;overflow:hidden}
.rui-sheet .sh-head{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--rui-line)}
.rui-sheet .sh-head h3{margin:0;font-size:var(--rui-fs-lg);font-weight:700;font-family:var(--rui-font)}
.rui-sheet .sh-body{padding:6px 16px 16px;overflow:auto}
.rui-sheet .sh-foot{display:flex;gap:10px;justify-content:flex-end;align-items:center;padding:13px 16px;border-top:1px solid var(--rui-line);background:var(--rui-card)}
.rui-grab{display:none}
@media (max-width:560px){
  .rui-sheet-back{padding:0;align-items:flex-end}
  .rui-sheet{max-width:100%;border-radius:var(--rui-r-4) var(--rui-r-4) 0 0;max-height:92%}
  .rui-grab{display:block;height:5px;width:40px;border-radius:99px;background:var(--rui-line-2);margin:8px auto 0}
}

/* a11y */
.rui-btn:focus-visible,.rui-seg button:focus-visible,.rui summary:focus-visible,.rui a:focus-visible{outline:2px solid var(--rui-accent-strong);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.rui *{animation:none!important;transition:none!important}}