/* Anomaly center: shares the site shell, sidebar and page heading. */
.anomaly-workspace { --red: #b5432f; --red-soft: #fbece8; --amber: #8a5a12; --amber-soft: #f8efd9; --blue: #2f5f86; --blue-soft: #e7eff6; font-size: 13px; }
.anomaly-workspace [hidden] { display: none !important; }
.anomaly-workspace button, .anomaly-workspace input, .anomaly-workspace select, .anomaly-workspace textarea { font: inherit; color: inherit; }
.anomaly-workspace :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #9ac5ad; outline-offset: 2px; }
.anomaly-workspace .skip-link { position: fixed; top: -100px; z-index: 40; padding: 12px; background: white; }
.anomaly-workspace .skip-link:focus { top: 8px; }
.anomaly-topbar { gap: 16px; }
.anomaly-top-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.view-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f6f8f6; }
.view-tabs button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 600; }
.view-tabs button[aria-selected="true"] { background: white; color: var(--green); box-shadow: 0 1px 3px #17352f1f; }
.ghost-button { min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--green); font-weight: 600; }
.ghost-button.small { min-height: 28px; padding: 0 9px; font-size: 12px; }
.ghost-button:disabled { opacity: .45; }
.anomaly-workspace .primary { min-height: 38px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--green); color: white; font-weight: 700; }
.anomaly-workspace .primary:disabled { opacity: .55; }
.anomaly-workspace .text-button { padding: 0; border: 0; background: none; color: var(--green); text-decoration: underline; }
.anomaly-content { max-width: 1320px; margin: auto; padding: 24px 36px 48px; }
.page-error { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #ecc9bf; border-radius: 8px; background: var(--red-soft); color: var(--red); }
.rule-note { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #d7e4d8; border-radius: 8px; background: #eef5ef; color: #365d44; line-height: 1.7; }
.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-chip { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink); }
.status-chip b { min-width: 20px; padding: 1px 6px; border-radius: 9px; background: #eef2ef; font-size: 12px; text-align: center; }
.status-chip.active { border-color: var(--green); background: var(--green); color: white; }
.status-chip.active b { background: #ffffff2e; }
.anomaly-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 16px; }
.anomaly-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.anomaly-filters :is(select, input) { height: 34px; min-width: 130px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.anomaly-filters .text-button { height: 34px; }
.event-list { border: 1px solid var(--line); border-radius: 12px; background: white; overflow: hidden; }
.event-list[aria-busy="true"] { opacity: .6; }
.event-head, .event-row { display: grid; grid-template-columns: 76px minmax(120px, 1.1fr) minmax(220px, 3fr) 84px minmax(110px, 1fr); gap: 14px; align-items: center; padding: 12px 16px; }
.event-head { background: #f6f8f6; color: var(--muted); font-size: 12px; }
.event-row { width: 100%; border: 0; border-top: 1px solid #edf1ef; background: white; text-align: left; cursor: pointer; }
.event-row:hover { background: #f8fbf9; }
.event-row.status-resolved, .event-row.status-false_positive { color: #7b8a86; }
.event-row b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.event-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.event-what small { margin: 0 0 2px; }
.sev, .state { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.sev-critical { background: var(--red); color: white; }
.sev-warning { background: var(--amber-soft); color: var(--amber); }
.sev-info { background: var(--blue-soft); color: var(--blue); }
.state { background: #eef2ef; color: #5b6d68; font-weight: 600; }
.state-new { background: var(--red-soft); color: var(--red); }
.state-acknowledged { background: var(--amber-soft); color: var(--amber); }
.state-resolved { background: var(--mint); color: var(--green); }
.empty { padding: 48px 16px; color: var(--muted); text-align: center; line-height: 1.9; }
.empty strong { display: block; margin-bottom: 6px; color: var(--ink); font-size: 16px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 14px; color: var(--muted); }
.pager button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.pager button:disabled { opacity: .4; }
.loading, .hint { color: var(--muted); line-height: 1.7; }
.hint { margin: 10px 0 0; font-size: 12px; }
/* Detail dialog */
#eventDialog { width: min(760px, calc(100% - 32px)); max-height: 88dvh; padding: 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); box-shadow: 0 30px 100px #173c3326; }
#eventDialog::backdrop { background: #11271f66; }
.dialog-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.dialog-head h2 { margin: 0; font-size: 19px; line-height: 1.4; }
.dialog-head .eyebrow { font-size: 11px; letter-spacing: .04em; color: var(--green); }
.icon-button { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: #f5f8f2; font-size: 22px; line-height: 1; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.detail-block { padding: 16px 0; border-top: 1px solid #edf1ef; }
.detail-block h3 { margin: 0 0 10px; font-size: 14px; }
.facts { display: grid; grid-template-columns: 96px 1fr; gap: 8px 14px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.evidence-list { margin: 0; padding-left: 18px; line-height: 1.9; }
.bad { color: var(--red); font-weight: 700; }
.source-link { display: inline-block; margin-top: 12px; color: var(--green); font-weight: 600; }
.handle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.handle-form label, .field { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.handle-form .wide, .handle-form .status-options, .handle-form .form-actions { grid-column: 1 / -1; }
.handle-form :is(select, textarea), .settings-form :is(input[type=text], input[type=password], input[type=number], input[type=time]) { min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); }
.handle-form textarea { resize: vertical; line-height: 1.6; }
.status-options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.status-options legend { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.status-options label { display: inline-flex; }
.status-options input { position: absolute; opacity: 0; }
.status-options span { min-height: 32px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; }
.status-options input:checked + span { border-color: var(--green); background: var(--green); color: white; }
.status-options input:focus-visible + span { outline: 3px solid #9ac5ad; outline-offset: 2px; }
.form-actions, .settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.form-message { margin: 0; color: var(--muted); }
.readonly { margin: 0; }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 6px 0; }
.timeline time { color: var(--muted); font-size: 12px; }
.timeline small { display: block; margin-top: 2px; color: var(--muted); }
/* Settings */
.mock-banner { margin: 0 0 14px; padding: 11px 14px; border: 1px solid #ecd8a5; border-radius: 8px; background: #fbf3dc; color: #7a5513; }
.settings-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.settings-card, .anomaly-content > section { min-width: 0; }
.anomaly-workspace .form-message { font-size: 12px; }
.settings-card { padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.settings-card + .settings-card { margin-top: 0; }
.settings-view > .settings-card, #settingsView > .settings-card { margin-top: 14px; }
.settings-card header { margin-bottom: 12px; }
.settings-card h2 { margin: 0 0 4px; font-size: 15px; }
.settings-card header p { margin: 0; color: var(--muted); line-height: 1.7; }
.field-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-top: 10px; }
.field-row .field { flex: 1 1 320px; max-width: 560px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.field small { color: var(--muted); }
.switch { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--green); }
.switch.compact { font-weight: 400; }
.secret-field { display: flex; gap: 8px; align-items: center; }
.secret-field input[type=password] { flex: 1; min-width: 0; }
.clear-secret { display: inline-flex; gap: 4px; align-items: center; color: var(--red); white-space: nowrap; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.rule-grid fieldset { display: grid; gap: 10px; align-content: start; margin: 0; padding: 12px 14px; border: 1px solid #e7eeea; border-radius: 10px; }
.rule-grid legend { padding: 0 4px; }
.rule-grid .checks { display: grid; gap: 6px; }
.rule-grid .switch { font-weight: 400; }
.rule-grid legend .switch { font-weight: 700; }
.settings-card .table-wrap { overflow: auto; }
.station-table, .delivery-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.station-table :is(th, td), .delivery-table :is(th, td) { padding: 8px; border-bottom: 1px solid #edf1ef; text-align: left; vertical-align: middle; white-space: nowrap; }
.station-table thead th, .delivery-table thead th { background: #f6f8f6; color: var(--muted); font-weight: 500; }
.station-table input[type=text], .station-table .secret-field { min-width: 180px; }
.station-table .pair { display: flex; align-items: center; gap: 4px; }
.station-table .pair input { width: 64px; }
.delivery-table small.error-text { display: block; max-width: 280px; margin-top: 3px; color: var(--red); white-space: normal; }
.delivery-table pre { max-width: 420px; margin: 6px 0 0; white-space: pre-wrap; font-size: 11px; color: var(--ink); }
.settings-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--paper) 30%); }
@media (max-width: 960px) {
  .anomaly-content { padding: 20px 23px 40px; }
  .event-head { display: none; }
  .event-row { grid-template-columns: auto 1fr auto; grid-template-areas: "sev where state" "what what what" "who who who"; gap: 6px 10px; }
  .event-row > :nth-child(1) { grid-area: sev; } .event-row > :nth-child(2) { grid-area: where; } .event-row > :nth-child(3) { grid-area: what; }
  .event-row > :nth-child(4) { grid-area: state; } .event-row > :nth-child(5) { grid-area: who; color: var(--muted); font-size: 12px; }
  .event-where b, .event-where small { display: inline; margin-right: 6px; }
  .event-who small { display: inline; margin-left: 6px; }
}
@media (max-width: 680px) {
  /* The header wraps on phones, so it scrolls with the page instead of covering the list. */
  .anomaly-workspace { padding-top: 0; padding-bottom: 64px; }
  .anomaly-topbar { position: relative; inset: auto; flex-wrap: wrap; min-height: 0; padding: 18px 16px 14px; }
  .anomaly-content { padding: 16px 16px 32px; }
  .anomaly-filters label { flex: 1 1 140px; }
  .anomaly-filters :is(select, input) { width: 100%; min-width: 0; }
  .handle-form { grid-template-columns: 1fr; }
  #eventDialog { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 18px 16px; }
  .facts, .timeline li { grid-template-columns: 82px 1fr; }
  .settings-card { padding: 16px 14px; }
}
/* AI 解读 */
.ai-explain h3 small { margin-left: 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.ai-answer { padding: 12px 14px; border: 1px solid #dbe7f1; border-radius: 10px; background: #f6f9fc; line-height: 1.75; }
.ai-answer p { margin: 0 0 6px; }
.ai-answer :is(ul, ol) { margin: 2px 0 8px; padding-left: 20px; }
.ai-answer .ai-heading { font-weight: 700; }
.ai-answer .ai-table { overflow: auto; }
.ai-answer table { border-collapse: collapse; font-size: 12px; }
.ai-answer :is(th, td) { padding: 4px 8px; border: 1px solid #dbe7f1; }
.ai-meta { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-stale { margin: 0 0 8px; color: var(--amber); font-size: 12px; }
.ai-explain .hint a { color: var(--green); font-weight: 600; }