/* ==========================================================================
   MiHCM SOC Console

   Design intent: a room you can sit in for eight hours. True black ground so
   severity colour is the only thing that glows, dense tables because analysts
   compare rows rather than read them, and no motion that is not feedback for
   something the operator did.

   Severity is the ONLY saturated colour in the interface. Everything else -
   navigation, panels, chrome - is greyscale. If something is red here it is
   because it matters, not because it is a header.
   ========================================================================== */

:root {
  /* ground → raised */
  --bg:        #07080A;
  --bg-2:      #0B0D11;
  --panel:     #0F1218;
  --panel-2:   #141821;
  --raised:    #1A1F2A;
  --line:      #1E2430;
  --line-2:    #2A3240;

  /* text */
  --txt:       #E8ECF2;
  --txt-2:     #A9B4C4;
  --txt-3:     #6B7686;
  --txt-4:     #4A5364;

  /* one accent, used sparingly */
  --accent:    #4C9AFF;
  --accent-dim:#2C5FA8;
  --accent-bg: rgba(76,154,255,.10);

  /* severity / state */
  --p1:        #FF5B5B;
  --p1-bg:     rgba(255,91,91,.11);
  --p2:        #FFA23A;
  --p2-bg:     rgba(255,162,58,.11);
  --p3:        #4C9AFF;
  --p3-bg:     rgba(76,154,255,.11);
  --p4:        #6B7686;
  --p4-bg:     rgba(107,118,134,.11);
  --ok:        #3FD08A;
  --ok-bg:     rgba(63,208,138,.11);
  --warn:      #FFC24B;
  --warn-bg:   rgba(255,194,75,.11);
  --bad:       #FF5B5B;

  --radius:    8px;
  --radius-sm: 5px;
  --sidebar:   232px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--txt);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Numbers in tables must line up. Without this, comparing risk scores down a
   column means re-reading every row. */
.num, td.num, .metric-value, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-dim); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------------------------------------------------------------- layout */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--line);
}
.brand-name {
  font-size: 13px; font-weight: 650; letter-spacing: .02em;
  display: flex; align-items: center; gap: 9px;
}
.brand-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); flex: 0 0 auto;
  box-shadow: 0 0 0 3px var(--ok-bg);
}
.brand-sub {
  font-size: 11px; color: var(--txt-3); margin-top: 3px; padding-left: 16px;
}

.nav { padding: 10px 10px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--radius-sm);
  color: var(--txt-2); font-size: 13px; font-weight: 450;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-item:hover { background: var(--panel); color: var(--txt); text-decoration: none; }
.nav-item.active { background: var(--accent-bg); color: var(--accent); font-weight: 550; }
.nav-item .ic { width: 15px; height: 15px; flex: 0 0 15px; opacity: .85; }
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  background: var(--p1-bg); color: var(--p1);
  padding: 1px 6px; border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

.sidebar-foot {
  padding: 12px 18px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--txt-4); line-height: 1.6;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: 54px; flex: 0 0 54px;
  border-bottom: 1px solid var(--line);
  background: rgba(7,8,10,.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.topbar .spacer { flex: 1; }
.topbar-meta { font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums; }

.content { padding: 22px; max-width: 1560px; width: 100%; }

/* ---------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel + .panel { margin-top: 16px; }

.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.panel-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.panel-head .spacer { flex: 1; }
.panel-head .sub { font-size: 11px; color: var(--txt-3); }
.panel-body { padding: 16px; }
.panel-body.tight { padding: 0; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.main-side { grid-template-columns: minmax(0, 1fr) 340px; }

@media (max-width: 1200px) {
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.main-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .content { padding: 14px; }
}

/* ---------------------------------------------------------------- metrics */
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  transition: border-color .15s var(--ease);
}
.metric:hover { border-color: var(--line-2); }
.metric-label {
  font-size: 11px; color: var(--txt-3); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.metric-value {
  font-size: 30px; font-weight: 300; letter-spacing: -.02em;
  margin-top: 7px; line-height: 1.05;
}
.metric-note { font-size: 11px; color: var(--txt-3); margin-top: 5px; }
.metric.alarm { border-color: rgba(255,91,91,.35); background: linear-gradient(var(--p1-bg), transparent 60%), var(--panel); }
.metric.alarm .metric-value { color: var(--p1); }
.metric.good .metric-value { color: var(--ok); }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; padding: 9px 14px;
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--txt-3);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
tbody tr { transition: background .1s var(--ease); }
tbody tr:hover { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: none; }
td.num { text-align: right; }
td.nowrap, th.nowrap { white-space: nowrap; }
.t-primary { font-weight: 500; color: var(--txt); }
.t-dim { color: var(--txt-3); }
.t-truncate { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.empty {
  padding: 44px 20px; text-align: center; color: var(--txt-3); font-size: 13px;
}
.empty strong { display: block; color: var(--txt-2); margin-bottom: 5px; font-weight: 550; }

/* ---------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.p1 { background: var(--p1-bg); color: var(--p1); border-color: rgba(255,91,91,.25); }
.badge.p2 { background: var(--p2-bg); color: var(--p2); border-color: rgba(255,162,58,.25); }
.badge.p3 { background: var(--p3-bg); color: var(--p3); border-color: rgba(76,154,255,.25); }
.badge.p4 { background: var(--p4-bg); color: var(--p4); border-color: rgba(107,118,134,.25); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(63,208,138,.25); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(255,194,75,.25); }
.badge.bad { background: var(--p1-bg); color: var(--p1); border-color: rgba(255,91,91,.25); }
.badge.neutral { background: var(--raised); color: var(--txt-2); border-color: var(--line-2); }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 7px; }
.dot.ok { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.bad { background: var(--bad); }
.dot.off { background: var(--txt-4); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius-sm);
  background: var(--raised); color: var(--txt);
  border: 1px solid var(--line-2);
  font: 500 12.5px/1 var(--sans); cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .06s var(--ease);
}
.btn:hover { background: #222938; border-color: #38425380; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #3670C4; }
.btn.danger { background: rgba(255,91,91,.14); border-color: rgba(255,91,91,.4); color: var(--p1); }
.btn.danger:hover { background: rgba(255,91,91,.22); }
.btn.good { background: rgba(63,208,138,.13); border-color: rgba(63,208,138,.4); color: var(--ok); }
.btn.good:hover { background: rgba(63,208,138,.2); }
.btn.sm { padding: 4px 9px; font-size: 11.5px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- forms */
input[type=text], input[type=number], input[type=email], input[type=search],
select, textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--txt);
  font: 13px/1.4 var(--sans);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg);
}
input::placeholder { color: var(--txt-4); }
textarea { resize: vertical; min-height: 64px; font-family: var(--sans); }
select { cursor: pointer; }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 550; margin-bottom: 5px; }
.field .help { font-size: 11.5px; color: var(--txt-3); margin-top: 5px; line-height: 1.5; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input[type=checkbox] {
  width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent);
  cursor: pointer; flex: 0 0 16px;
}

.filters {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.filters input[type=search] { max-width: 260px; }
.filters select { max-width: 175px; }

/* ---------------------------------------------------------------- pills */
.pillbar { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  padding: 5px 11px; border-radius: 99px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--txt-2); font-size: 12px; font-weight: 500;
  transition: all .12s var(--ease);
}
.pill:hover { border-color: var(--line-2); color: var(--txt); text-decoration: none; }
.pill.on { background: var(--accent-bg); border-color: var(--accent-dim); color: var(--accent); }

/* ---------------------------------------------------------------- bars */
.bar-row { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; font-size: 12.5px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { width: 130px; flex: 0 0 130px; color: var(--txt-2); }
.bar-track { flex: 1; height: 7px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
/* block: a span fill is inline and ignores its width. The accent is a default;
   the Status page and Look up set their own colour inline. */
.bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--accent);
            transition: width .4s var(--ease); }
.bar-val { width: 48px; text-align: right; color: var(--txt-2); font-variant-numeric: tabular-nums; }

/* daily strip */
.strip { display: flex; align-items: flex-end; gap: 3px; height: 74px; }
.strip-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
             gap: 1px; min-width: 0; border-radius: 2px; overflow: hidden; }
.strip-seg { width: 100%; transition: height .35s var(--ease); }
.strip-seg.esc { background: var(--p1); }
.strip-seg.mon { background: var(--p2); }
.strip-seg.cls { background: var(--line-2); }
.strip-axis { display: flex; gap: 3px; margin-top: 7px; }
.strip-axis span { flex: 1; text-align: center; font-size: 9.5px; color: var(--txt-4);
                   overflow: hidden; white-space: nowrap; }

/* ---------------------------------------------------------------- timeline */
.tl { position: relative; padding-left: 20px; }
.tl::before {
  content: ''; position: absolute; left: 4px; top: 5px; bottom: 5px;
  width: 1px; background: var(--line-2);
}
.tl-item { position: relative; padding: 0 0 15px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ''; position: absolute; left: -19px; top: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.tl-time { font-size: 11px; color: var(--txt-3); font-family: var(--mono); }
.tl-what { font-size: 13px; margin-top: 2px; }
.tl-src { font-size: 10.5px; color: var(--txt-4); font-family: var(--mono); margin-top: 2px; }

/* ---------------------------------------------------------------- actions */
.action {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 13px 15px; margin-bottom: 11px; background: var(--panel-2);
}
.action:last-child { margin-bottom: 0; }
.action-op { font-weight: 600; font-size: 13.5px; }
.action-target { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.action-meta { display: grid; grid-template-columns: 112px 1fr; gap: 4px 12px;
               margin-top: 9px; font-size: 12px; }
.action-meta dt { color: var(--txt-3); }
.action-meta dd { color: var(--txt-2); }

.constraint {
  border-left: 2px solid var(--p1);
  background: var(--p1-bg);
  padding: 9px 13px; margin-bottom: 8px; font-size: 12.5px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.constraint:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- misc */
.kv { display: grid; grid-template-columns: 158px 1fr; gap: 8px 14px; font-size: 13px; }
.kv dt { color: var(--txt-3); }
.kv dd { color: var(--txt); word-break: break-word; }

.note {
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.55; border: 1px solid;
}
.note.info { background: var(--accent-bg); border-color: var(--accent-dim); color: #C6DDFF; }
.note.warn { background: var(--warn-bg); border-color: rgba(255,194,75,.3); color: #FFE0A3; }
.note.bad  { background: var(--p1-bg); border-color: rgba(255,91,91,.3); color: #FFC4C4; }
.note.ok   { background: var(--ok-bg); border-color: rgba(63,208,138,.3); color: #B6F0D3; }

.pager { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
         border-top: 1px solid var(--line); font-size: 12.5px; color: var(--txt-3); }
.pager .spacer { flex: 1; }

pre.code {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px;
  font: 11.5px/1.6 var(--mono); color: var(--txt-2);
  overflow-x: auto; max-height: 340px;
}

.section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt-3); font-weight: 650; margin-bottom: 11px;
}

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 100;
  background: var(--raised); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 12px 16px; font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  animation: rise .22s var(--ease);
  max-width: 400px;
}
.toast.ok { border-color: rgba(63,208,138,.45); }
.toast.bad { border-color: rgba(255,91,91,.45); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.spin {
  width: 13px; height: 13px; border: 2px solid var(--line-2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin .6s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Sign-in, the Respond page, the decision guide and the details dialog.

   Same rules as the rest of the console: severity is the only saturated
   colour, everything else is greyscale, motion only where it is feedback.
   The one addition is a violet accent reserved for "the AI wrote this" -
   an analyst should always be able to tell at a glance whether they are
   reading the model or the playbook.
   ========================================================================== */
:root { --ai: #A98BFF; --ai-bg: rgba(169,139,255,.10); --ai-line: rgba(169,139,255,.32); }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: transparent; color: var(--txt-3); cursor: pointer;
}
.icon-btn:hover { background: var(--panel); color: var(--txt); border-color: var(--line-2); }
.icon-btn .ic { width: 16px; height: 16px; }
.ic { width: 14px; height: 14px; flex: 0 0 auto; vertical-align: -2px; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--txt-2); }
.btn.ghost:hover { background: var(--panel-2); border-color: var(--line-2); }
.spin.sm { width: 10px; height: 10px; border-width: 1.5px; }

/* ---------------------------------------------------------------- sidebar user */
.whoami { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
  display: grid; place-items: center; font-size: 12px; font-weight: 650;
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-dim);
}
.whoami-name { flex: 1; min-width: 0; font-size: 12px; color: var(--txt-2); line-height: 1.3; }
.whoami-name .t-dim { font-size: 10.5px; }
.avatar.sm { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
.topbar-user { display: none; align-items: center; gap: 4px; }
@media (max-width: 860px) { .topbar-user { display: flex; } }

/* ---------------------------------------------------------------- sign-in */
.login-body {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(76,154,255,.07), transparent 60%),
    var(--bg);
}
.login-wrap { width: 100%; max-width: 380px; padding: 24px 18px; }
.login-card {
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 28px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-mark {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent-dim);
}
.login-mark .ic { width: 20px; height: 20px; }
.login-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.login-sub { font-size: 12px; color: var(--txt-3); margin-top: 1px; }
.login-note { margin-bottom: 16px; }
.login-form input {
  width: 100%; padding: 9px 11px; background: var(--bg-2);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--txt); font: 14px/1.4 var(--sans);
}
.login-form input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.login-btn { width: 100%; justify-content: center; padding: 10px 13px; font-size: 13.5px; margin-top: 4px; }
.login-ms { gap: 10px; text-decoration: none; }
.ms-logo { width: 16px; height: 16px; flex: none; }
.login-alt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.login-alt summary {
  cursor: pointer; font-size: 12px; color: var(--txt-3); list-style: none; text-align: center;
}
.login-alt summary::-webkit-details-marker { display: none; }
.login-alt[open] summary { margin-bottom: 14px; }
.login-demo {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--txt-3); line-height: 1.55;
}
.login-foot { text-align: center; font-size: 11px; color: var(--txt-4); margin-top: 16px; }

/* ---------------------------------------------------------------- respond */
.rq-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 4px 0 18px; flex-wrap: wrap;
}
.rq-greet { font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.rq-count { font-size: 13.5px; color: var(--txt-2); margin-top: 5px; }
.rq-count strong { color: var(--txt); font-weight: 600; }
.rq-worker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-3);
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
}

.rq-list { display: flex; flex-direction: column; gap: 8px; }
.rq-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--p4); overflow: hidden;
  transition: border-color .15s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.rq-card.p1 { border-left-color: var(--p1); }
.rq-card.p2 { border-left-color: var(--p2); }
.rq-card.p3 { border-left-color: var(--p3); }
.rq-card:hover { border-color: var(--line-2); }
.rq-card.open { border-color: var(--line-2); }
.rq-card.leaving { opacity: 0; transform: translateX(24px); }

.rq-head {
  all: unset; box-sizing: border-box; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
}
.rq-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rq-head:hover .rq-title { color: #fff; }
.rq-pri { flex: 0 0 auto; }
.rq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rq-title {
  font-size: 14.5px; font-weight: 550; color: var(--txt); line-height: 1.35;
  transition: color .6s var(--ease);
}
.rq-title.fresh { color: var(--ai); }
.rq-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.rq-id { margin-left: 4px; font-size: 11px; color: var(--txt-4); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border-radius: 4px; background: var(--bg-2); border: 1px solid var(--line);
  font: 11.5px/1.6 var(--mono); color: var(--txt-2);
}
.chip-k { font-family: var(--sans); font-size: 10px; color: var(--txt-4); text-transform: uppercase; letter-spacing: .05em; }
.rq-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rq-status {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--p2);
}
.rq-status.urgent { color: var(--p1); }
.rq-l2 {
  font-size: 11px; color: var(--txt-3); padding: 2px 7px; border: 1px solid var(--line-2);
  border-radius: 4px; white-space: nowrap;
}
.rq-plan {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; white-space: nowrap;
  color: var(--txt-3); padding: 2px 8px; border-radius: 4px; border: 1px solid var(--line);
}
.rq-plan.ready { color: var(--ai); border-color: var(--ai-line); background: var(--ai-bg); }
.rq-plan.busy { color: var(--txt-2); border-color: var(--line-2); }
.rq-plan .ic { width: 11px; height: 11px; }
.rq-chev { color: var(--txt-4); display: grid; transition: transform .18s var(--ease); }
.rq-chev .ic { width: 16px; height: 16px; }
.rq-card.open .rq-chev { transform: rotate(90deg); color: var(--txt-2); }
.rq-body { border-top: 1px solid var(--line); background: var(--bg-2); }

/* ---------------------------------------------------------------- guide */
.gd { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 18px; }
.gd-loading { padding: 26px 20px; color: var(--txt-3); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.gd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gd-top .spacer { flex: 1; }
.gd-engine { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--txt-2); white-space: nowrap; }
.gd-engine .t-dim { white-space: normal; }
.gd-engine .ic { align-self: center; }
.gd-engine.ai { color: var(--ai); }
.gd-engine .t-dim { font-weight: 400; }

.gd-progress {
  border: 1px solid var(--ai-line); background: var(--ai-bg); border-radius: var(--radius);
  padding: 12px 14px; font-size: 12.5px;
}
.gd-prog-head { display: flex; align-items: center; gap: 9px; }
.gd-prog-head.bad { color: #FFC4C4; }
.gd-prog-steps { list-style: none; margin: 10px 0 0 2px; display: flex; flex-direction: column; gap: 6px; }
.gd-prog-steps li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--txt-2); }
.gd-prog-steps li .ic { width: 12px; height: 12px; position: relative; top: 1px; }
.gd-prog-steps li.ok .ic { color: var(--ok); }
.gd-prog-steps li.bad .ic { color: var(--p1); }
.gd-prog-steps li.run { color: var(--txt); }
.gd-reason { width: 100%; padding-left: 20px; font-size: 11.5px; font-style: italic; }
.gd-ai-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ai); border: 1px solid var(--ai-line); border-radius: 3px; padding: 0 4px; margin-right: 6px;
}
.gd-bar { flex: 0 0 140px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; align-self: center; }
.gd-bar > span { display: block; height: 100%; background: var(--ai); transition: width .6s var(--ease); }
.gd-prog-foot { margin-top: 10px; font-size: 11.5px; }
.gd-prog-foot:empty { display: none; }

.gd-ready {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--ai-line); background: var(--ai-bg); border-radius: var(--radius);
  font-size: 12.5px; animation: rise .25s var(--ease);
}
.gd-ready > .ic { color: var(--ai); width: 16px; height: 16px; }
.gd-ready > div { flex: 1; }
.gd-notes div + div { margin-top: 4px; }

.gd-l2 {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--txt-2);
  padding: 9px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.gd-l2-k { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-3); }
.gd-l2 a { margin-left: auto; font-size: 12px; }

.gd-summary { max-width: 980px; }
.gd-lead { font-size: 15px; line-height: 1.6; color: var(--txt); font-weight: 400; }
.gd-why { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.gd-why strong { color: var(--txt); font-weight: 600; }

.gd-sec h3 {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt-3); margin-bottom: 10px;
}
.gd-h3-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--txt-4); margin-left: 6px; }
.gd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .gd-cols { grid-template-columns: 1fr; } }

.gd-hyps, .gd-dps { display: flex; flex-direction: column; gap: 8px; }
.gd-hyp, .gd-dp {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
}
.gd-hyp-head { display: flex; align-items: center; gap: 9px; }
.gd-hyp-name { font-weight: 550; font-size: 13px; }
.gd-hyp-ev { font-size: 12.5px; color: var(--txt-2); margin-top: 4px; line-height: 1.5; }
.lk {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px; border: 1px solid;
}
.lk.high { color: var(--p1); border-color: rgba(255,91,91,.35); background: var(--p1-bg); }
.lk.medium { color: var(--p2); border-color: rgba(255,162,58,.35); background: var(--p2-bg); }
.lk.low { color: var(--txt-3); border-color: var(--line-2); }
.gd-dp { font-size: 12.5px; line-height: 1.5; }
.gd-if { color: var(--txt); }
.gd-then { color: var(--txt-2); margin-top: 3px; }
.kw {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin-right: 7px;
}
.gd-then .kw { color: var(--ok); }

.gd-phases { list-style: none; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.gd-phase { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.gd-phase-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.gd-phase-n {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11.5px; font-weight: 700; background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-dim); position: relative; top: -1px;
}
.gd-phase-name { font-size: 14px; font-weight: 600; }
.gd-phase-goal { font-size: 12.5px; color: var(--txt-3); }
.gd-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-left: 32px; }
.gd-step { position: relative; }
.gd-step::before {
  content: ''; position: absolute; left: -19px; top: 7px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--line-2);
}
.gd-act { font-size: 13.5px; font-weight: 550; color: var(--txt); }
.gd-how { font-size: 12.5px; color: var(--txt-2); line-height: 1.55; margin-top: 3px; }
.gd-whyline { font-size: 12px; color: var(--txt-3); line-height: 1.5; margin-top: 3px; }
.gd-whyline .kw { color: var(--txt-3); }

.gd-donts { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gd-donts li {
  border-left: 2px solid var(--p1); background: var(--p1-bg); padding: 8px 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 12.5px;
}
.gd-dont { font-weight: 550; color: var(--txt); }
.gd-close {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  background: var(--panel); font-size: 12.5px; line-height: 1.55; color: var(--txt-2);
}
.gd-close + .gd-close { margin-top: 8px; }
.gd-close-k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 3px; }
.gd-close.tp .gd-close-k { color: var(--p1); }
.gd-close.fp .gd-close-k { color: var(--ok); }

.gd-tools { font-size: 12.5px; color: var(--txt-2); }
.gd-tools > summary { cursor: pointer; color: var(--txt-3); display: inline-flex; gap: 7px; align-items: center; }
.gd-tools > summary:hover { color: var(--txt); }
.gd-tools ol { margin: 10px 0 0 22px; display: flex; flex-direction: column; gap: 5px; }
.gd-tools li.bad .mono { color: var(--p1); }

.gd-decide {
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.gd-decide-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gd-decide-head h3 { font-size: 13.5px; font-weight: 600; }
.gd-decide-head .t-dim { font-size: 12px; }
.gd-note { min-height: 54px; }

/* ---------------------------------------------------------------- dialog */
.dlg {
  width: min(1040px, calc(100vw - 40px)); height: min(820px, calc(100vh - 40px));
  margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--panel); color: var(--txt);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.dlg::backdrop { background: rgba(3,4,6,.72); backdrop-filter: blur(3px); }
.dlg[open] { animation: rise .2s var(--ease); }
.dlg-shell { display: flex; flex-direction: column; height: 100%; }
.dlg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 12px;
}
.dlg-kicker { font-size: 11px; color: var(--txt-3); }
.dlg-head h2 { font-size: 16px; font-weight: 600; margin-top: 3px; line-height: 1.35; }
.dlg-tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.dlg-tab {
  all: unset; cursor: pointer; padding: 9px 12px; font-size: 12.5px; color: var(--txt-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dlg-tab:hover { color: var(--txt); }
.dlg-tab.on { color: var(--txt); border-bottom-color: var(--accent); font-weight: 550; }
.dlg-tab:focus-visible { outline: 2px solid var(--accent); }
.dlg-body { flex: 1; overflow-y: auto; padding: 18px 20px 24px; background: var(--bg-2); }
.dlg-body h3 {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt-3); margin: 18px 0 9px;
}
.dlg-intro { font-size: 12.5px; margin-bottom: 16px; max-width: 760px; }
.dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 12px; }

.chain { list-style: none; position: relative; display: flex; flex-direction: column; gap: 12px; }
.chain::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--line-2); }
.chain-step { display: flex; gap: 14px; align-items: flex-start; position: relative; font-size: 13px; line-height: 1.55; }
.chain-n {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-2); font-size: 12px; font-weight: 650; color: var(--txt-2);
}
.chain-k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }

.tl2 { display: flex; flex-direction: column; gap: 6px; }
.tl2-day { font-size: 11px; font-weight: 650; color: var(--txt-3); margin: 10px 0 2px; letter-spacing: .03em; }
.tl2-day:first-child { margin-top: 0; }
.tl2-ev { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tl2-ev.cause { border-left: 2px solid var(--p2); }
.tl2-ev[open] { border-color: var(--line-2); }
.tl2-ev > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
}
.tl2-ev > summary::-webkit-details-marker { display: none; }
.tl2-ev > summary:hover { background: var(--panel-2); }
.tl2-time { font-size: 11.5px; color: var(--txt-3); flex: 0 0 64px; }
.tl2-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--txt-4); }
.tl2-dot.s-critical, .tl2-dot.s-high { background: var(--p1); box-shadow: 0 0 0 3px var(--p1-bg); }
.tl2-dot.s-medium { background: var(--p2); }
.tl2-dot.s-low { background: var(--p3); }
.k-correlation .tl2-dot, .k-decision .tl2-dot { background: var(--accent); }
.k-investigation .tl2-dot, .k-finding .tl2-dot { background: var(--txt-2); }
.k-human .tl2-dot { background: var(--ok); }
.k-ai .tl2-dot { background: var(--ai); }
.tl2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tl2-title { font-size: 13px; color: var(--txt); font-weight: 500; }
.tl2-sum { font-size: 12px; color: var(--txt-3); }
.tl2-tags { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.tl2-kind { font-size: 10.5px; color: var(--txt-3); border: 1px solid var(--line-2); border-radius: 3px; padding: 0 5px; white-space: nowrap; }
.tl2-cause {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--p2); border: 1px solid rgba(255,162,58,.35); background: var(--p2-bg); border-radius: 3px; padding: 0 5px;
}
.tl2-body { padding: 4px 14px 14px 88px; display: flex; flex-direction: column; gap: 12px; }
.tl2-body .kv { grid-template-columns: 150px 1fr; font-size: 12.5px; }
.kv.nested { grid-template-columns: 120px 1fr; gap: 3px 10px; font-size: 12px; }
.kv-list { margin-left: 16px; }
.kv-list li + li { margin-top: 2px; }
.score { max-width: 520px; }
.score-k { font-size: 11px; color: var(--txt-3); margin-bottom: 6px; }
.raw > summary { cursor: pointer; font-size: 12px; color: var(--txt-3); }
.raw > summary:hover { color: var(--txt); }
.raw pre {
  margin-top: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; font-size: 11.5px; line-height: 1.6; color: var(--txt-2); overflow: auto; max-height: 320px;
}

.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr; } }
.facts-sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.facts-sec h3 { margin-top: 0 !important; }
.facts-sec .kv { grid-template-columns: 150px 1fr; font-size: 12.5px; gap: 6px 12px; }

.l2 { font-size: 13px; }
.l2-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.l2-head a { margin-left: auto; font-size: 12.5px; }
.l2-narr { margin: 14px 0; line-height: 1.6; color: var(--txt-2); max-width: 820px; }
.l2-steps { margin-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.l2-steps li { font-size: 12.5px; }
.l2-steps li .ic { width: 12px; height: 12px; margin-right: 6px; }
.l2-steps li.ok .ic { color: var(--ok); }
.l2-steps li.bad .ic { color: var(--p1); }

@media (max-width: 760px) {
  .rq-head { flex-wrap: wrap; }
  .rq-side { width: 100%; justify-content: flex-start; padding-left: 38px; }
  .tl2-body { padding-left: 14px; }
  .tl2-time { flex-basis: 54px; }
}

/* ---------------------------------------------------------------- view tabs */
/* Cases and Investigations: one page, two views. */
.view-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: -4px 0 16px; }
.view-tab {
  padding: 9px 14px; font-size: 13px; color: var(--txt-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.view-tab:hover { color: var(--txt); text-decoration: none; }
.view-tab.on { color: var(--txt); border-bottom-color: var(--accent); font-weight: 550; }

/* ==========================================================================
   Plans on request, History, reports.

   A case with no plan says so and offers the button; nothing stands in for
   the AI plan. The violet accent still means "the AI wrote this" - so the
   Generate button is violet, and so is everything it produces.
   ========================================================================== */
.vt-n {
  display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 9px;
  font-size: 11px; font-weight: 600; text-align: center; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--txt-3); font-variant-numeric: tabular-nums;
}
.view-tab.on .vt-n { color: var(--txt); border-color: var(--line-2); }

.btn.ai { background: var(--ai-bg); border-color: var(--ai-line); color: var(--ai); font-weight: 600; }
.btn.ai:hover { background: rgba(169,139,255,.18); border-color: var(--ai); }
.btn.ai .ic { color: var(--ai); }

.rq-plan.stale { color: var(--warn); border-color: rgba(255,194,75,.3); background: var(--warn-bg); }
.rq-plan.bad { color: var(--p1); border-color: rgba(255,91,91,.3); }

.gd-slot { display: flex; flex-direction: column; gap: 18px; }
.gd-slot:empty { display: none; }
.gd-engine.bad { color: var(--p1); }
.gd-stale {
  margin-left: 4px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(255,194,75,.35); border-radius: 3px; padding: 0 5px;
}
.gd-reports { display: inline-flex; gap: 6px; align-items: center; }
.btn.report .ic { color: var(--accent); }
.gd-pb-tag {
  margin-left: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; text-transform: none;
  color: var(--warn); border: 1px solid rgba(255,194,75,.3); border-radius: 3px; padding: 0 5px;
}

.gd-cta {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border: 1px dashed var(--ai-line); border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(169,139,255,.07), transparent 60%), var(--panel);
}
.gd-cta-mark {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ai-bg); border: 1px solid var(--ai-line); color: var(--ai);
}
.gd-cta-mark .ic { width: 18px; height: 18px; }
.gd-cta-body { flex: 1; min-width: 0; }
.gd-cta-title { font-size: 14px; font-weight: 600; color: var(--txt); }
.gd-cta-text { font-size: 12.5px; color: var(--txt-2); line-height: 1.55; margin-top: 3px; max-width: 760px; }
.gd-cta-meta { font-size: 11.5px; margin-top: 5px; }
.gd-cta .btn.ai { padding: 9px 16px; font-size: 13px; flex: 0 0 auto; }
@media (max-width: 760px) { .gd-cta { flex-wrap: wrap; } .gd-cta .btn.ai { width: 100%; justify-content: center; } }
.gd-cta.compact { padding: 10px 14px; gap: 12px; font-size: 12.5px; border-style: solid; border-color: var(--line); background: var(--panel); }
.gd-cta.compact > span { flex: 1; }
.gd-cta.compact .btn.ai { padding: 5px 11px; font-size: 12px; }

.gd-progress.failed { border-color: rgba(255,91,91,.3); background: var(--p1-bg); }

.gd-brief { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 13px 15px; }
.gd-brief h3 {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt-3); margin-bottom: 8px;
}
.gd-brief-sum { font-size: 13px; color: var(--txt); line-height: 1.6; max-width: 980px; }
.gd-brief-why { margin: 8px 0 0 18px; font-size: 12.5px; color: var(--txt-2); }
.gd-brief-why li + li { margin-top: 2px; }
.gd-brief-kv { margin-top: 12px; grid-template-columns: 130px 1fr; gap: 5px 14px; font-size: 12.5px; }

.gd-closed {
  border: 1px solid var(--line-2); border-left: 3px solid var(--txt-4); border-radius: var(--radius);
  background: var(--panel); padding: 13px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px;
}
.gd-closed.tone-bad { border-left-color: var(--p1); }
.gd-closed.tone-ok { border-left-color: var(--ok); }
.gd-closed.tone-warn { border-left-color: var(--warn); }
.gd-closed.tone-p3 { border-left-color: var(--p3); }
.gd-closed-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-closed-head h3 { font-size: 13.5px; font-weight: 600; margin-right: 2px; }
.gd-closed-note {
  border-left: 2px solid var(--line-2); padding: 3px 0 3px 10px; color: var(--txt); font-style: italic;
}
.gd-closed-line { color: var(--txt-2); line-height: 1.55; }
.gd-closed-sub { color: var(--txt-3); }
.gd-closed-sub .kw { color: var(--txt-3); }
.gd-closed-pols { margin-left: 18px; color: var(--txt-2); }
.gd-closed-foot { font-size: 12px; }

/* history list */
.hist-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.hist-search { display: flex; gap: 6px; align-items: center; }
.hist-search input { width: 260px; }
.pill-n { margin-left: 4px; font-size: 11px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.pill.on .pill-n { color: var(--accent); }
.rq-card.hist { border-left-color: var(--txt-4); }
.rq-card.hist.c-confirmed { border-left-color: var(--p1); }
.rq-card.hist.c-false_positive { border-left-color: var(--ok); }
.rq-card.hist.c-needs_more_info { border-left-color: var(--warn); }
.rq-card.hist.c-monitor { border-left-color: var(--p3); }
.rq-card.hist .rq-title { color: var(--txt-2); }
.rq-card.hist:hover .rq-title, .rq-card.hist.open .rq-title { color: var(--txt); }
.hist-how { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hist-by { font-size: 11px; white-space: nowrap; }
.hist-pager { margin-top: 10px; }
.hist-pager .pager { border-top: none; }
@media (max-width: 760px) { .hist-how { align-items: flex-start; } .hist-search input { width: 100%; } }

.notice-panel { max-width: 640px; }
.notice-h { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.notice-p { color: var(--txt-2); margin-bottom: 14px; line-height: 1.6; }

/* ==========================================================================
   Logs - the raw events. Dense like a terminal, filterable like Discover.
   ========================================================================== */
.lg-source {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt-2);
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel);
}
.lg-source.local { color: var(--warn); border-color: rgba(255,194,75,.3); }

.lg-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; overflow: visible; }
.lg-searchrow { display: flex; gap: 8px; }
.lg-q {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
.lg-q:focus-within { border-color: var(--accent); background: var(--bg); }
.lg-q .ic { color: var(--txt-3); width: 15px; height: 15px; }
.lg-q input[type=search] {
  border: none; background: transparent; padding: 9px 0; font: 13px/1.4 var(--mono); color: var(--txt);
}
.lg-q input[type=search]:focus { background: transparent; }
.lg-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-controls .spacer { flex: 1; }
.lg-controls select { width: auto; max-width: 190px; font-size: 12.5px; padding: 5px 8px; }
.lg-custom {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--txt-3);
  padding: 3px 8px; border: 1px solid transparent; border-radius: 20px; flex-wrap: wrap;
}
.lg-custom.on { border-color: var(--accent-dim); background: var(--accent-bg); color: var(--accent); }
.lg-custom label { display: inline-flex; align-items: center; gap: 5px; }
.lg-custom input[type=datetime-local] {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  color: var(--txt); font: 12px var(--mono); padding: 4px 6px; color-scheme: dark;
}
.lg-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.lg-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 8px; border-radius: 4px;
  background: var(--accent-bg); border: 1px solid var(--accent-dim); color: #C6DDFF;
  font: 12px/1.6 var(--mono); max-width: 420px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.lg-chip:hover { text-decoration: none; border-color: var(--accent); }
.lg-chip .chip-k { color: var(--accent); }
.lg-chip .ic { width: 12px; height: 12px; opacity: .7; }
.lg-note { margin-bottom: 12px; }

.lg-histo-panel { margin-bottom: 14px; }
.lg-histo { display: flex; align-items: flex-end; gap: 2px; height: 96px; }
.lg-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 2px 2px 0 0;
  overflow: hidden; background: var(--line-2); transition: opacity .12s var(--ease);
}
.lg-col:hover { opacity: .75; text-decoration: none; }
/* not .empty - that is the console's empty-state panel, 88px of padding */
.lg-col.zero { height: 1px; background: var(--line); }
/* Segments are emitted critical first, so critical sits on top of the bar. */
.lg-seg { display: block; width: 100%; flex: 0 0 auto; }
.lg-seg.s-low { background: var(--p3); }
.lg-seg.s-medium { background: var(--p2); }
.lg-seg.s-high { background: #FF7A45; }
.lg-seg.s-critical { background: var(--p1); }
.lg-axis { position: relative; height: 16px; margin-top: 6px; }
.lg-axis span { position: absolute; font-size: 10px; color: var(--txt-4); white-space: nowrap; transform: translateX(-2px); }
.lg-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--txt-3); margin-top: 8px; }
.lg-legend .dot { margin-right: 4px; }

.lg-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
@media (max-width: 1200px) { .lg-grid { grid-template-columns: minmax(0, 1fr); } }
.lg-results { overflow: hidden; }
.lg-cols, .lg-row > summary {
  display: grid; grid-template-columns: 124px 38px 150px minmax(0, 1fr) 128px 112px; gap: 12px; align-items: start;
}
.lg-cols {
  padding: 9px 14px 9px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
}
.lg-row { border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.lg-row.s-critical { border-left-color: var(--p1); }
.lg-row.s-high { border-left-color: #FF7A45; }
.lg-row.s-medium { border-left-color: var(--p2); }
.lg-row > summary { list-style: none; cursor: pointer; padding: 8px 14px 8px 12px; font-size: 12.5px; }
.lg-row > summary::-webkit-details-marker { display: none; }
.lg-row > summary:hover { background: var(--panel-2); }
.lg-row[open] { background: var(--bg-2); }
.lg-row[open] > summary { background: var(--panel-2); }
.lg-time { font-size: 11.5px; color: var(--txt-2); display: flex; flex-direction: column; line-height: 1.35; }
.lg-date { font-size: 10.5px; color: var(--txt-4); }
.lvl {
  display: inline-block; min-width: 26px; text-align: center; font: 600 11px/1.6 var(--mono);
  border-radius: 3px; padding: 0 4px; background: var(--raised); color: var(--txt-2);
}
.lvl.s-low { color: var(--p3); background: var(--p3-bg); }
.lvl.s-medium { color: var(--p2); background: var(--p2-bg); }
.lvl.s-high { color: #FF7A45; background: rgba(255,122,69,.12); }
.lvl.s-critical { color: #fff; background: var(--p1); }
.lg-agent { color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-ev { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lg-ev-top { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.lg-desc { color: var(--txt); font-weight: 500; }
.lg-rid { font-size: 11px; color: var(--txt-4); }
.lg-tag {
  font-size: 10.5px; padding: 0 5px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--txt-3);
  font-family: var(--mono);
}
.lg-tag.case { color: var(--accent); border-color: var(--accent-dim); }
.lg-raw {
  font-size: 11.5px; color: var(--txt-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-src, .lg-user { font-size: 11.5px; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-body { padding: 12px 16px 16px 26px; display: flex; flex-direction: column; gap: 12px; }
.lg-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lg-actions .spacer { flex: 1; }
.lg-docid { font-size: 10.5px; color: var(--txt-4); }
.lg-k { font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 5px; }
.lg-pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 12px; line-height: 1.55; color: var(--txt); white-space: pre-wrap; word-break: break-all;
  max-height: 260px; overflow: auto;
}
.lg-ftable { width: 100%; border-collapse: collapse; font-size: 12px; }
.lg-ftable th {
  width: 260px; text-align: left; font-weight: 400; color: var(--txt-3); padding: 3px 12px 3px 0;
  vertical-align: top; word-break: break-all; position: static; background: none; border: none;
  text-transform: none; letter-spacing: 0; font-size: 11.5px;
}
.lg-ftable td { padding: 3px 0; border: none; word-break: break-word; }
.lg-ftable tr:hover { background: transparent; }
.lg-ftable tr:hover th { color: var(--txt-2); }
.lg-val { display: inline-block; margin: 0 6px 2px 0; padding: 0 4px; border-radius: 3px; color: var(--txt); font-family: var(--mono); font-size: 11.5px; }
a.lg-val:hover { background: var(--accent-bg); color: var(--accent); text-decoration: none; }
.lg-val.plain { color: var(--txt-2); }
/* Narrower: the event text keeps the room; agent and account are still in
   the expanded event, one click away. */
@media (max-width: 1300px) {
  .lg-cols, .lg-row > summary { grid-template-columns: 112px 36px minmax(0, 1fr) 124px; }
  .lg-cols > :nth-child(3), .lg-cols > :nth-child(6), .lg-agent, .lg-user { display: none; }
}
@media (max-width: 1000px) {
  .lg-cols { display: none; }
  .lg-row > summary { grid-template-columns: 96px 34px minmax(0, 1fr); }
  .lg-src { display: none; }
  .lg-ftable th { width: 150px; }
}

.lg-facets { display: flex; flex-direction: column; gap: 12px; }
.lg-facets .panel + .panel { margin-top: 0; }
.lg-facet { padding: 6px 6px 8px; }
.lg-fr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 4px; gap: 3px 10px;
  padding: 5px 8px; border-radius: var(--radius-sm); color: var(--txt-2); font-size: 12px;
}
.lg-fr:hover { background: var(--panel-2); color: var(--txt); text-decoration: none; }
.lg-fr.on { background: var(--accent-bg); color: var(--accent); }
.lg-fr-label { min-width: 0; display: flex; flex-direction: column; }
.lg-fr-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-fr-v.mono { font-size: 11.5px; }
.lg-fr-note { font-size: 11px; color: var(--txt-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-fr-n { font-size: 11.5px; color: var(--txt-3); font-variant-numeric: tabular-nums; align-self: start; }
.lg-fr-bar { grid-column: 1 / -1; height: 3px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.lg-fr-bar > span { display: block; height: 100%; background: var(--accent-dim); border-radius: 2px; }
.lg-fr-bar > span.s-low { background: var(--p3); }
.lg-fr-bar > span.s-medium { background: var(--p2); }
.lg-fr-bar > span.s-high { background: #FF7A45; }
.lg-fr-bar > span.s-critical { background: var(--p1); }

/* ==========================================================================
   Intelligence -> Look up. One box, then everything known about the answer.
   The verdict banner is the only saturated block, and only when something
   actually matched: "not on any list" is deliberately grey, never green -
   absence from a list is not evidence of safety.
   ========================================================================== */
.lk-form { display: flex; gap: 8px; margin-bottom: 16px; }
.lk-q {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.lk-q:focus-within { border-color: var(--accent); background: var(--bg-2); }
.lk-q .ic { color: var(--txt-3); width: 16px; height: 16px; }
.lk-q input[type=search] {
  border: none; background: transparent; padding: 12px 0; font: 14px/1.4 var(--mono); color: var(--txt);
}
.lk-q input[type=search]:focus { background: transparent; }
.lk-form .btn { padding: 0 20px; font-size: 13px; }

.lk-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
@media (max-width: 1100px) { .lk-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lk-kinds { grid-template-columns: minmax(0, 1fr); } }
.lk-kind {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; font-size: 12.5px; color: var(--txt-2); line-height: 1.55;
}
.lk-kind-h { font-size: 13px; font-weight: 600; color: var(--txt); margin-bottom: 4px; }
.lk-examples { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12.5px; margin-bottom: 10px; }
.lk-chip:hover { border-color: var(--accent-dim); color: var(--accent); text-decoration: none; }
.lk-local { font-size: 12px; display: flex; gap: 7px; align-items: center; }

.lk-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.lk-kindtag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--txt-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 7px;
}
.lk-value { font-size: 17px; color: var(--txt); word-break: break-all; }
.lk-json { margin-left: auto; font-size: 12px; }
.lk-note { margin-bottom: 12px; }

.lk-verdict {
  border: 1px solid var(--line-2); border-left: 4px solid var(--txt-4); border-radius: var(--radius);
  background: var(--panel); padding: 13px 16px; margin-bottom: 16px;
}
.lk-v-title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.lk-v-detail { font-size: 13px; color: var(--txt-2); margin-top: 4px; line-height: 1.55; }
.lk-v-nature { font-size: 12.5px; color: var(--txt-2); margin-top: 8px; display: flex; gap: 8px; align-items: baseline; }
.lk-verdict.tone-bad { border-left-color: var(--p1); background: linear-gradient(90deg, var(--p1-bg), transparent 55%), var(--panel); }
.lk-verdict.tone-bad .lk-v-title { color: var(--p1); }
.lk-verdict.tone-high { border-left-color: #FF7A45; }
.lk-verdict.tone-high .lk-v-title { color: #FF7A45; }
.lk-verdict.tone-warn { border-left-color: var(--warn); }
.lk-verdict.tone-warn .lk-v-title { color: var(--warn); }
.lk-verdict.tone-p3 { border-left-color: var(--p3); }
.lk-verdict.tone-p3 .lk-v-title { color: var(--p3); }
.lk-verdict.tone-ok { border-left-color: var(--ok); }
.lk-verdict.tone-ok .lk-v-title { color: var(--ok); }

.lk-object { margin-bottom: 16px; }
.lk-o-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.lk-o-title { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }
.lk-o-sum { font-size: 13px; color: var(--txt-2); margin-bottom: 12px; line-height: 1.55; }

.lk-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .lk-grid { grid-template-columns: minmax(0, 1fr); } }
.lk-main > .panel + .panel { margin-top: 16px; }
.lk-side { display: flex; flex-direction: column; gap: 12px; }
.lk-side .panel + .panel { margin-top: 0; }

.lk-table td { vertical-align: top; }
.lk-table tr.hit { background: var(--panel-2); }
.lk-desc { font-size: 11.5px; margin-top: 2px; }
.lk-res { white-space: nowrap; }
.lk-match { font-size: 12px; color: var(--txt); margin-top: 4px; white-space: normal; max-width: 260px; }
.lk-cov { font-size: 11.5px; }
.lk-stale { color: var(--warn); margin-top: 2px; }

.lk-activity { border-top: 1px solid var(--line); }
.lk-act-sum { font-size: 12.5px; margin-bottom: 10px; }
.lk-activity .bar-label { width: 300px; flex-basis: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-inc { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 4px 0; }
.lk-kv { grid-template-columns: 120px 1fr; font-size: 12.5px; gap: 6px 12px; }
.lk-none { font-size: 12.5px; line-height: 1.55; }
.lk-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }

.gd-brief-look { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; font-size: 12px; }
.gd-lookup { color: var(--accent); border-bottom: 1px dotted var(--accent-dim); }
.gd-lookup:hover { text-decoration: none; border-bottom-style: solid; }
/* The case title takes whatever width is left and truncates - the columns
   that say where the case stands must never be pushed off-screen. */
.lk-cases td.lk-title { max-width: 0; width: 100%; }
.lk-cases td.lk-title a.t-primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- access */
/* Account setup: wider than the sign-in card - it holds a QR code and three steps. */
.setup-wrap { max-width: 480px; }
.setup-hello { font-size: 13px; line-height: 1.55; margin-bottom: 14px; color: var(--txt-2); }
.setup-step { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.setup-step:first-of-type { border-top: 0; padding-top: 4px; }
.setup-num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--accent-dim);
             color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.setup-body { flex: 1; min-width: 0; }
.setup-h { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.setup-p { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
/* Always dark-on-white, whatever the theme: phone cameras read that best. */
.setup-qr { background: #fff; padding: 10px; border-radius: 8px; width: 200px; height: 200px;
            margin: 4px 0 12px; }
.setup-qr svg { width: 100%; height: 100%; display: block; }
.setup-key { font-size: 13.5px; letter-spacing: .06em; background: var(--panel-2);
             border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 10px;
             word-break: break-all; user-select: all; }

/* A one-message dialog (the setup link), not the full case-details panel. */
.dlg.small { width: min(560px, calc(100vw - 32px)); height: fit-content; max-height: calc(100vh - 40px); }
.dlg.small .dlg-shell { height: auto; }
.dlg.small .dlg-body { flex: none; }

.access-actions { white-space: nowrap; text-align: right; }
.access-actions .btn { margin: 1px 0; }
.btn.ghost.danger { color: var(--p1); }
.btn.ghost.danger:hover { background: var(--p1-bg); border-color: rgba(255,91,91,.3); }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; font-size: 12px; padding: 7px 9px; border-radius: 6px;
                  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--txt); }
/* One column: adding someone is the thing a Lead comes here to do, so the
   form goes first rather than below the whole activity log. */
@media (max-width: 1200px) {
  .access-side { order: -1; }
}
@media (max-width: 1400px) {
  .access-actions { white-space: normal; min-width: 170px; }
}

/* ==========================================================================
   Time zone picker (top bar) - display only; storage stays UTC.
   ========================================================================== */
.tz-pick { display: inline-flex; align-items: center; gap: 5px; color: var(--txt-3); }
.tz-pick .ic { width: 13px; height: 13px; }
.tz-pick select {
  font-size: 11px; padding: 2px 4px; background: transparent; border: 1px solid var(--line);
  border-radius: 4px; color: var(--txt-2); max-width: 190px;
}
.tz-pick select:hover { border-color: var(--line-2); }

/* ==========================================================================
   Respond - period filter, Monitoring, Alerts
   ========================================================================== */
.per-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.per-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--txt-3);
         text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.per-k .ic { width: 13px; height: 13px; }
.per-in { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-3); }
.per-in input { font-size: 12px; padding: 3px 6px; }
.per-tz { font-size: 11px; }
.per-note { font-size: 12px; margin: -6px 0 12px; }

.mon-note { font-size: 12px; max-width: 640px; }
.mon-why { font-size: 11.5px; display: block; margin-top: 4px; overflow: hidden;
           text-overflow: ellipsis; white-space: nowrap; max-width: 720px; }
.rq-card.mon { border-left-color: var(--p3); }
.rq-status.watch { color: var(--p3); }
.rq-status.held { color: var(--warn); }

.ra-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ra-tile {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  border-top: 3px solid var(--line-2);
}
.ra-tile.s-critical { border-top-color: var(--p1); }
.ra-tile.s-high { border-top-color: #FF7A45; }
.ra-tile.s-medium { border-top-color: var(--p2); }
.ra-tile.s-low { border-top-color: var(--p3); }
.ra-k { font-size: 11px; color: var(--txt-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ra-v { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 4px; }
.ra-u { font-size: 11px; margin-top: 2px; }
.ra-list .panel-head { flex-wrap: wrap; gap: 10px; }
.ra-cols, .ra-row {
  display: grid; grid-template-columns: 112px 44px minmax(0, 1fr) 170px 150px; gap: 12px; align-items: center;
}
.ra-cols {
  padding: 6px 14px 6px 12px; font-size: 10.5px; color: var(--txt-4); text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid var(--line);
}
.ra-row { padding: 8px 14px 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line);
          border-left: 2px solid transparent; }
.ra-row:hover { background: var(--panel-2); }
.ra-row.s-critical { border-left-color: var(--p1); }
.ra-row.s-high { border-left-color: #FF7A45; }
.ra-row.s-medium { border-left-color: var(--p2); }
.ra-ev { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ra-ev .t-dim { font-size: 11.5px; }
.ra-src { font-size: 11.5px; color: var(--txt-2); overflow: hidden; text-overflow: ellipsis; }
.ra-case { text-align: right; }
@media (max-width: 900px) {
  .ra-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-cols { display: none; }
  .ra-row { grid-template-columns: 1fr; gap: 4px; }
  .ra-case { text-align: left; }
}

/* ==========================================================================
   Reports - daily / monthly summaries
   ========================================================================== */
.rp-gen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.rp-gen .panel-head h2 { display: inline-flex; align-items: center; gap: 7px; }
.rp-gen .panel-head .ic { width: 15px; height: 15px; }
.rp-gen .panel-body { display: flex; flex-direction: column; gap: 12px; }
.rp-gen p { font-size: 12.5px; line-height: 1.55; }
.rp-gen-row { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--txt-2); }
.rp-gen-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 900px) { .rp-gen-grid { grid-template-columns: 1fr; } }