/* ==========================================================================
   Moderator console
   Stat tiles sit on the ink surface: de-emphasis line #8a8a85 (5.7:1),
   current period in lime (16.7:1). Values use the body sans, not the display face.
   ========================================================================== */
.page--mod { background: var(--paper); }
.mod { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: clamp(28px, 4vw, 52px); padding-bottom: 70px; }
.mod__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.mod__head > div:first-child { display: grid; gap: 12px; }
.mod__shift { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border: var(--bw) solid var(--ink); border-radius: var(--r-pill); }
.mod__shift span { display: grid; }
.mod__shift small { font-size: 11px; color: var(--text-2); }
.mod__proto { align-items: center; }

.kpis { display: grid; gap: 14px; }
.kpis__bar, .reports__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.kpis h2, .reports h2, .modlog h2 { font-size: 20px; }
.kpi-grid { display: grid; grid-template-columns: 1.25fr repeat(3, 1fr); gap: 14px; }
.kpi {
  position: relative;
  display: grid; align-content: start; gap: 6px;
  padding: 18px 20px 16px;
  border-radius: var(--r-lg);
  border: var(--bw) solid var(--ink);
  box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2px var(--ink);
}
.kpi__label { font-size: 14px; color: var(--on-ink-2); }
.kpi__value { font-family: var(--font-body); font-weight: 650; font-size: 38px; line-height: 1.05; letter-spacing: -.02em; color: var(--paper); }
.kpi--hero .kpi__value { font-size: 56px; }
.kpi__value small { font-size: .42em; font-weight: 600; margin-left: 4px; color: var(--on-ink-2); }
.kpi__delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--on-ink-2); }
.kpi__trend { margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); border: 1px solid var(--line-ink-strong); font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--paper); }
.kpi__spark { position: relative; margin-top: 8px; }
.spark { display: block; width: 100%; height: 48px; overflow: visible; cursor: crosshair; border-radius: 6px; }
.spark:focus-visible { outline-offset: 4px; }
.spark__area { fill: #8a8a85; opacity: .1; }
.spark__line { fill: none; stroke: #8a8a85; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__now { fill: none; stroke: var(--lime); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark__dot { fill: var(--lime); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.spark__x { stroke: var(--on-ink-3); stroke-width: 1; opacity: 0; vector-effect: non-scaling-stroke; }
.spark.is-hover .spark__x { opacity: 1; }
.spark-tip {
  position: absolute; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 5px 9px; border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-size: 12px; white-space: nowrap; pointer-events: none;
  box-shadow: 2px 2px 0 var(--lime);
}
.spark-tip b { font-weight: 800; margin-right: 4px; }
.kpi-table { overflow-x: auto; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); }
.kpi-table__t { width: 100%; font-size: 14px; }
.kpi-table__t th, .kpi-table__t td { padding: 10px 14px; text-align: right; border-bottom: 1.5px solid var(--line); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-table__t th[scope="row"], .kpi-table__t thead th:first-child { text-align: left; }
.kpi-table__t thead th { font: 600 11.5px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.kpi-table__t tbody tr:last-child > * { border-bottom: 0; }

.reports { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.reports__list { display: grid; gap: 14px; min-width: 0; }
.rlist { display: grid; gap: 8px; }
.rrow {
  width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px;
  padding: 14px 16px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  text-align: left;
  transition: border-color .2s, transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s;
}
.rrow:hover { border-color: var(--ink); transform: translateX(3px); }
.rrow.is-urgent { border-color: var(--ink); border-left-width: 8px; }
.rrow.is-active { border-color: var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--ink); transform: translateX(4px); }
.rrow__main { display: grid; gap: 3px; min-width: 0; }
.rrow__main b { font-size: 15px; }
.rrow__excerpt { font-size: 14px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow.is-active .rrow__excerpt { color: var(--ink); }
.rrow__main small { font-size: 11px; color: var(--text-2); }
.rrow.is-active .rrow__main small { color: var(--ink); }
.rlist__empty { display: flex; align-items: center; gap: 10px; padding: 26px; border: var(--bw) dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-2); }

.sev { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sev--high { background: var(--ink); color: var(--lime); }
.sev--medium { border: 1.5px solid var(--ink); }
.sev--low { border: 1.5px dashed var(--line-strong); color: var(--text-2); }
.status { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font: 600 11px var(--font-mono); white-space: nowrap; border: 1.5px solid var(--ink); }
.status--open { background: var(--paper); }
.status--review { border-style: dashed; }
.status--resolved { border-color: var(--line-strong); color: var(--text-2); }

.reports__detail {
  position: sticky; top: 18px;
  min-height: 300px;
  padding: 22px;
  background: var(--paper);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-xl);
  box-shadow: 8px 8px 0 var(--ink);
}
.rdetail { display: grid; gap: 16px; }
.rdetail__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rdetail__title { font-size: 40px; }
.rdetail__where { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); margin-top: -8px; }
.ctx { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-md); background: var(--paper-2); }
.ctx__msg { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; opacity: .6; font-size: 14px; }
.ctx__msg > div { flex: 1; min-width: 0; }
.ctx__msg time { font-size: 10.5px; color: var(--text-2); }
.ctx__msg p { overflow-wrap: anywhere; }
.ctx__msg.is-flagged { opacity: 1; background: var(--lime); border: var(--bw) solid var(--ink); }
.rdetail__facts { display: grid; gap: 0; border-top: 1.5px solid var(--line); }
.rdetail__facts div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1.5px solid var(--line); font-size: 14px; }
.rdetail__facts dt { color: var(--text-2); }
.rdetail__facts dd { margin: 0; font-weight: 600; }
.rdetail__actions { display: grid; gap: 8px; }
.rdetail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rdetail__grid .btn { padding: 0 10px; }
.rdetail__res { align-items: center; }

.modlog { display: grid; gap: 12px; }
.modlog ul { display: grid; border-top: var(--bw) solid var(--ink); }
.modlog li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1.5px solid var(--line); font-size: 14px; }
.modlog li span { flex: 1; min-width: 0; }
.modlog time { font-size: 11px; color: var(--text-2); }

@media (max-width: 1100px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .reports { grid-template-columns: 1fr; }
  .reports__detail { position: static; }
  .mod__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) { .kpi-grid { grid-template-columns: 1fr; } .rdetail__grid { grid-template-columns: 1fr; } }

/* Demo-only moderator availability control (replaces any named staff) */
.mod__demo { display: grid; gap: 8px; justify-items: start; max-width: 360px; padding: 14px 16px; border: 1.5px dashed var(--ink); border-radius: var(--r-md); }
.mod__demo .field__label { gap: 8px; justify-content: flex-start; }
.mod__demo small { font-size: 12.5px; }