/* os-monitor console — light operator theme.
   Palette: white surfaces, slate text, hairline borders; severity colors keep
   the JP1/IM mental model (error red-orange, warning amber, notice blue). */

:root {
  --bg: #F7F8FA;
  --panel: #FFFFFF;
  --border: #E5E7EB;
  --text: #1F2937;
  --text-2: #6B7280;
  --blue: #2563EB;
  --red: #DC2626;
  --orange: #EA580C;
  --amber: #D97706;
  --green: #16A34A;
  --mono: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 "Segoe UI", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.mono { font-family: var(--mono); }

.layout { display: flex; height: 100vh; overflow: hidden; }

/* ---------- side navigation ---------- */
.sidenav {
  width: 200px; flex: none; background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 14px 10px;
}
.brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; }
.brand-logo {
  width: 26px; height: 26px; border-radius: 6px; background: var(--text);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.env-tag {
  margin: 0 6px 14px; padding: 3px 8px; border-radius: 5px;
  background: #F3F4F6; border: 1px solid var(--border);
  color: var(--text-2); font-size: 10.5px; font-weight: 600; width: fit-content;
}
.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; margin-bottom: 2px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer; text-align: left;
}
.nav-item:hover { background: #F3F4F6; }
.nav-item.active { background: #EEF2F7; }
.nav-icon { font-size: 10px; color: var(--text-2); width: 14px; text-align: center; }
.lang-toggle { margin-top: auto; display: flex; gap: 4px; padding: 0 6px; }
.lang-btn {
  flex: 1; font: inherit; font-size: 11px; font-weight: 600; color: var(--text-2);
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 0; cursor: pointer;
}
.lang-btn.active { color: var(--text); border-color: var(--text-2); background: #F3F4F6; }
.sidenav-footer { padding: 8px 6px; }
.nav-meta { font-family: var(--mono); font-size: 10px; color: var(--text-2); word-break: break-all; }

/* ---------- page chrome ---------- */
.view { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 10px; gap: 16px;
}
.page-head h1 { margin: 0; font-size: 17px; display: inline; }
.page-sub { margin-left: 10px; color: var(--text-2); font-size: 12px; }
.page-actions { display: flex; gap: 8px; align-items: center; }
.search {
  width: 260px; padding: 7px 12px; border: 1px solid #D1D5DB; border-radius: 7px;
  background: var(--panel); font: inherit; outline: none;
}
.search:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.btn {
  padding: 7px 14px; border-radius: 7px; border: 1px solid #D1D5DB;
  background: var(--panel); color: var(--text); font: inherit; font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: #F3F4F6; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: #1D4ED8; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { border: 0; background: transparent; color: var(--text-2); font-size: 14px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.danger:hover { background: #B91C1C; }

/* ---------- filter bar ---------- */
.filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 20px 10px; border-bottom: 1px solid var(--border);
}
.filter-label { font-size: 10px; font-weight: 700; color: var(--text-2); letter-spacing: .05em; }
.chip-group { display: flex; gap: 6px; }
.chip {
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text-2); cursor: pointer;
}
.chip.active { border-color: var(--text); color: var(--text); background: #F3F4F6; }
.chip.sev-alert.active  { color: #991B1B; border-color: #991B1B; background: #FEF2F2; }
.chip.sev-error.active  { color: var(--red); border-color: var(--red); background: #FEF2F2; }
.chip.sev-warn.active   { color: var(--amber); border-color: var(--amber); background: #FFFBEB; }
.chip.sev-notice.active { color: var(--blue); border-color: var(--blue); background: #EFF6FF; }
.chip.sev-info.active   { color: var(--text); border-color: var(--text-2); background: #F3F4F6; }
.select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel); font: inherit; font-size: 12px;
}

/* ---------- feed table ---------- */
.table-wrap { flex: 1; overflow: auto; padding: 0 20px 12px; }
table.feed { width: 100%; border-collapse: collapse; }
table.feed th {
  position: sticky; top: 0; z-index: 1; background: var(--bg);
  text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-2); padding: 10px 10px 6px; border-bottom: 1px solid var(--border);
}
table.feed td {
  padding: 7px 10px; border-bottom: 1px solid #F1F2F4; vertical-align: middle;
  background: var(--panel);
}
table.feed tbody tr { cursor: pointer; }
table.feed tbody tr:hover td { background: #F8FAFF; }
tr.row-error td   { background: #FEF2F2; }
tr.row-error td:first-child { border-left: 3px solid var(--orange); }
tr.row-alert td   { background: #FEF2F2; }
tr.row-alert td:first-child { border-left: 3px solid #991B1B; }
tr.row-warn td    { background: #FFFBEB; }
tr.row-warn td:first-child { border-left: 3px solid var(--amber); }
.cell-msg {
  max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: 12px;
}
.cell-host, .cell-time { font-family: var(--mono); font-size: 12px; }

/* severity chip in rows */
.sev { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; }
.sev-ic { font-size: 9px; }
.sev.alert  { color: #991B1B; }
.sev.error  { color: var(--red); }
.sev.warn   { color: var(--amber); }
.sev.notice { color: var(--blue); }
.sev.info   { color: var(--text-2); font-weight: 600; }

/* code / outcome / action badges */
.code-chip {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  background: #F3F4F6; border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 7px; white-space: nowrap;
}
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge.auto        { color: var(--green); background: #F0FDF4; border: 1px solid #BBF7D0; }
.badge.assisted    { color: var(--amber); background: #FFFBEB; border: 1px solid #FDE68A; }
.badge.runbook     { color: var(--blue); background: #EFF6FF; border: 1px solid #BFDBFE; }
.badge.unregistered{ color: var(--red); background: #FEF2F2; border: 1px solid #FECACA; }
.badge.action      { color: var(--text); background: var(--panel); border: 1px solid #D1D5DB; }
.badge.action.PHONE        { color: var(--red); border-color: var(--red); }
.badge.action.CONTACT      { color: var(--amber); border-color: var(--amber); }
.badge.action.EMAIL-TICKET { color: var(--blue); border-color: var(--blue); }
.badge.action.RESPOND      { color: #0D9488; border-color: #0D9488; }
.badge.action.PROCEDURE    { color: #4F46E5; border-color: #4F46E5; }
.badge.action.NO-ACTION,
.badge.action.SUPPRESS,
.badge.action.UNSPECIFIED  { color: var(--text-2); }

.status-chip {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  background: #F3F4F6; border-radius: 5px; padding: 2px 7px;
}
.status-chip.done { color: var(--green); background: #F0FDF4; }
.status-chip.doing { color: var(--amber); background: #FFFBEB; }

/* ---------- status strip ---------- */
.status-strip {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 20px; background: #1F2937; color: #D1D5DB;
  font-family: var(--mono); font-size: 11px;
}
.status-strip .mono { color: #F9FAFB; }

/* ---------- empty state ---------- */
.empty { text-align: center; padding: 70px 0 40px; }
.empty-title { font-size: 15px; font-weight: 700; }
.empty-sub { color: var(--text-2); margin-top: 4px; }

/* ---------- upload zone ---------- */
.upload-zone {
  margin: 6px 20px 12px; padding: 30px; text-align: center;
  border: 2px dashed #D1D5DB; border-radius: 10px; background: var(--panel);
}
.upload-zone.drag { border-color: var(--blue); background: #EFF6FF; }
.upload-icon { font-size: 22px; color: var(--text-2); }
.upload-title { font-size: 14px; font-weight: 600; margin-top: 6px; }
.upload-browse { color: var(--blue); cursor: pointer; text-decoration: underline; }
.upload-sub { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.upload-result {
  margin: 0 20px 12px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid #BBF7D0; background: #F0FDF4; font-size: 12.5px;
}
.upload-result.error { border-color: #FECACA; background: #FEF2F2; }
.section-title { margin: 8px 20px 6px; font-size: 13px; color: var(--text-2); }
.warn-list { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); font-size: 12px; }
details.warns summary { cursor: pointer; color: var(--amber); font-weight: 600; }
.excluded-note { color: var(--text-2); font-size: 12px; }

/* ---------- annex viewer: spreadsheet-style modal ---------- */
.annex-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 8px 0 0;
  font: inherit; font-size: 12px; font-weight: 600; color: #4F46E5;
  background: #F5F6FF; border: 1px solid #C7D2FE; border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
}
.annex-chip:hover { background: #EEF0FF; }

/* doubled selector: the generic .modal rule later in the file sets a 720px
   width and would win a specificity tie */
.modal.annex-modal { width: 1200px; max-width: 94vw; display: flex; flex-direction: column; }
.annex-modal-body { flex: 1; overflow: auto; min-height: 42vh; max-height: 72vh; margin-top: 8px; }
.annex-loading { color: var(--text-2); padding: 24px; text-align: center; }

/* Excel-like sheet tabs along the bottom */
.annex-tabs {
  display: flex; gap: 2px; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border); overflow-x: auto;
}
.annex-tab {
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--text-2);
  background: #F3F4F6; border: 1px solid var(--border); border-bottom: 0;
  border-radius: 6px 6px 0 0; padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
.annex-tab.active { background: var(--panel); color: var(--text); border-color: #9CA3AF; }

/* The sheet itself: real column widths, merges, cell styles, and the
   Excel frame (column letters + row numbers). */
.excel-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 6px; }
table.excel-sheet {
  border-collapse: collapse; table-layout: fixed; width: max-content;
  background: var(--panel);
}
table.excel-sheet td {
  border: 1px solid #EDEFF2;                 /* faint gridlines, like Excel */
  padding: 2px 6px; font-size: 11.5px; vertical-align: top;
  /* cells hold their true Excel column width, so wrapping inside the cell
     (including mid-CJK) reproduces how Excel itself displays the sheet */
  white-space: pre-wrap; word-break: break-word;
}
table.excel-sheet td.xl-bold { font-weight: 700; }
table.excel-sheet td.xl-tail { white-space: pre; }   /* spill past the edge */
table.excel-sheet td.xl-border { border-color: #9CA3AF; }
.excel-colhead, .excel-rownum, .excel-corner {
  background: #F3F4F6; border: 1px solid #E0E2E6; color: var(--text-2);
  font-size: 10px; font-weight: 600; padding: 2px 6px; text-align: center;
}
.excel-rownum { position: sticky; left: 0; z-index: 1; }
.excel-corner { position: sticky; left: 0; z-index: 2; }
col.excel-rownum-col { width: 36px; }

.annex-shapes { margin-top: 8px; }
.annex-shape {
  border: 1px solid var(--border); border-left: 3px solid #C7D2FE;
  border-radius: 6px; padding: 6px 10px; margin: 6px 0;
  font-size: 12px; white-space: pre-wrap; word-break: break-word; background: #FAFBFF;
}

/* Blocks anchored inside the sheet grid: annotation shapes and embedded
   screen captures render at the Excel row they were drawn at.  Drawings
   float over the grid in Excel and are usually wider than the used cell
   columns — let them take their natural width and overflow the (often
   narrow) grid instead of squeezing into it. */
table.excel-sheet tr.excel-block-row td {
  background: var(--panel); border: none; padding: 4px 8px; overflow: visible;
}
table.excel-sheet tr.excel-block-row .annex-block-holder { width: max-content; }
table.excel-sheet tr.excel-block-row .annex-shape {
  width: max-content; max-width: 680px; min-width: 48px;
}
.annex-inline-img {
  display: block; max-width: 680px; width: auto; height: auto;
  border: 1px solid var(--border); border-radius: 4px; margin: 6px 0;
  background: #fff;
}
table.excel-sheet tr.excel-gap-row td, table.excel-sheet tr.excel-gap-row th {
  color: #9CA3AF; font-size: 10px; text-align: left; padding: 1px 8px;
  background: #FCFCFD; border-color: #EEF0F3;
}

/* ---------- modal ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(17,24,39,.45);
  display: flex; align-items: center; justify-content: center; z-index: 40;
}
.modal {
  width: 720px; max-width: 92vw; background: var(--panel); border-radius: 12px;
  padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; }
.modal-head h2 { margin: 0; font-size: 15px; }
.modal-sub { color: var(--text-2); font-size: 12.5px; margin: 6px 0 10px; }
.paste-area {
  width: 100%; min-height: 220px; resize: vertical;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  padding: 12px 14px; border: 1px solid #D1D5DB; border-radius: 8px; outline: none;
}
.paste-area:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.modal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.modal-hint { color: var(--text-2); font-size: 12px; }

/* ---------- inline row expansion (design: detail expands beneath the row) */
tr.expanded td { border-bottom: 0; }
tr.expand-row { cursor: default; }
tr.expand-row > td {
  background: #FAFAFA !important; padding: 14px 20px 18px;
  border-bottom: 1px solid var(--border);
}
tr.expand-row.row-error > td:first-child,
tr.expand-row.row-alert > td:first-child,
tr.expand-row.row-warn > td:first-child { border-left-width: 3px; border-left-style: solid; }
table.feed tbody tr.expand-row:hover td { background: #FAFAFA; }
.expand-box { max-width: 1120px; }
.row-status { font-size: 11px; padding: 3px 4px; width: 100%; cursor: pointer; }

.cell-delete { text-align: center; }
.cell-check { text-align: center; }
.row-check, #check-all { cursor: pointer; accent-color: var(--blue); }
.row-delete {
  border: none; background: none; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 6px;
  color: var(--text-2); visibility: hidden;
}
table.feed tbody tr:hover .row-delete { visibility: visible; }
.row-delete:hover { color: var(--red); background: #FEE2E2; }

.note-row { margin-top: 12px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.note-area {
  flex: 1; min-width: 320px; min-height: 56px; resize: vertical;
  font: inherit; font-size: 12.5px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px; outline: none; background: var(--panel);
}
.note-area:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.raw-message {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: #F9FAFB; border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; white-space: pre-wrap; word-break: break-all; margin-bottom: 14px;
}

.rec-card { border-radius: 10px; border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 12px; }
.rec-card.auto { border-color: #BBF7D0; background: #F6FEF8; }
.rec-card.assisted { border-color: #FDE68A; background: #FFFDF4; }
.rec-card.runbook { border-color: #BFDBFE; background: #F5F9FF; }
.rec-card.unregistered { border-color: #FECACA; background: #FEF6F6; }
.rec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rec-action-ja { font-size: 15px; font-weight: 700; }
.rec-banner { font-weight: 700; margin-bottom: 6px; }
.rec-banner.red { color: var(--red); }
.rec-banner.amber { color: var(--amber); }
.rec-text { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; }
.directive { font-size: 13.5px; font-weight: 700; margin: 4px 0; }

.audit {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--text-2); word-break: break-all;
}

.cand { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; margin: 8px 0; background: var(--panel); }
.cand.default { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(217,119,6,.08); }
.cand-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand-rule { font-family: var(--mono); font-weight: 700; font-size: 12px; }
.cand-score {
  margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-2);
  cursor: help; border-bottom: 1px dotted #C4CAD3;
}
.pct-legend { margin-top: 8px; font-size: 11px; color: var(--text-2); }
.default-tag {
  font-size: 10px; font-weight: 700; color: var(--amber);
  background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 4px; padding: 1px 6px;
}
.keys { margin: 6px 0 2px; display: flex; flex-wrap: wrap; gap: 5px; }
.key-tag {
  font-size: 10.5px; font-weight: 600; color: #374151; background: #F3F4F6;
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px;
}
.key-tag .key-detail { font-family: var(--mono); color: var(--text-2); font-weight: 400; }
.cand-cond { font-size: 12px; color: var(--text-2); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }

details.source-row { margin-top: 8px; }
details.source-row summary { cursor: pointer; font-size: 11.5px; color: var(--blue); font-weight: 600; }
.source-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.source-table td {
  border: 1px solid var(--border); padding: 4px 8px; font-size: 11.5px;
  vertical-align: top; word-break: break-word; white-space: pre-wrap;
}
.source-table td:first-child {
  width: 110px; background: #F9FAFB; font-weight: 600; color: var(--text-2); white-space: nowrap;
}

.detail-label { font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: .04em; }

/* ---------- toast ---------- */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: #1F2937; color: #F9FAFB; border-radius: 8px; padding: 10px 18px;
  font-size: 12.5px; z-index: 60; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ---------- login & users ---------- */

.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
}
.login-card {
  width: 360px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px 32px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.login-brand { margin-bottom: 18px; }
.login-card h2 { margin: 0 0 14px; font-size: 17px; }
.login-label {
  display: block; margin: 10px 0 4px; font-size: 11px; font-weight: 600;
  color: var(--text-2); text-transform: uppercase; letter-spacing: .04em;
}
.login-input {
  width: 100%; padding: 8px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 7px; outline: none;
  background: var(--panel);
}
.login-input:focus { border-color: var(--blue); }
.login-submit { width: 100%; margin-top: 16px; }
.login-toggle { width: 100%; margin-top: 10px; font-size: 12px; }
.login-error {
  background: #FEE2E2; color: #991B1B; border-radius: 7px;
  padding: 8px 12px; font-size: 12px; margin-bottom: 8px;
}

.nav-user {
  padding: 8px 6px; margin-bottom: 6px; border-top: 1px solid var(--border);
}
.nav-user-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.nav-user-name {
  font-weight: 700; font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 7px 10px; font: inherit; font-weight: 600; font-size: 12px;
  color: var(--red); background: #FEF2F2; border: 1px solid #FECACA;
  border-radius: 7px; cursor: pointer;
}
.logout-btn:hover { background: #FEE2E2; border-color: var(--red); }
.logout-ic { font-size: 13px; }

.role-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: #E5E7EB; color: var(--text-2);
}
.role-tag.admin { background: #DBEAFE; color: #1D4ED8; }

.invite-token { font-size: 11px; word-break: break-all; }
.btn.small { padding: 3px 10px; font-size: 11px; margin-right: 6px; }

.attr-line { margin-top: 8px; font-size: 11.5px; color: var(--text-2); }

.role-tag.global { background: #FEF3C7; color: #92400E; margin-left: 4px; }
.state-tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
}
.state-tag.on  { color: var(--green); background: #F0FDF4; border: 1px solid #BBF7D0; }
.state-tag.off { color: var(--red); background: #FEF2F2; border: 1px solid #FECACA; }
tr.user-disabled td { color: var(--text-2); }

.upload-admin-note {
  margin: 0 20px 12px; padding: 10px 14px; border-radius: 8px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px;
}

.profile-wrap { padding: 0 20px 20px; max-width: 480px; }
.profile-wrap .upload-admin-note { margin: 0 0 14px; }
.profile-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px 18px; margin-bottom: 14px;
}
.profile-heading { margin: 0 0 4px; font-size: 14px; }
.profile-save { margin-top: 14px; }
.profile-card .login-input:disabled,
.profile-card .btn:disabled { opacity: .5; cursor: default; }

.new-username { width: 160px; }
.creds-block { white-space: pre; font-weight: 700; margin-bottom: 6px; }
.upload-result .btn.small { margin-top: 8px; }

/* Until the session probe resolves, show neither dashboard nor login —
   prevents the dashboard flashing on reload when logged out. */
body.booting .layout, body.booting .login-screen { display: none !important; }

/* ---------- feed paging spinner ---------- */
tr.loading-row td { background: transparent; border-bottom: none; }
.feed-loading {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 0; color: var(--text-2); font-size: 12px;
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- AI advisory card ----------
   Amber palette signals advisory status — visually distinct from and
   subordinate to the deterministic recommendation above it (D-06, T-06-02). */
.ai-card { border: 1px solid var(--amber); border-radius: 6px; padding: 10px 14px; margin-top: 10px; background: #FFFBEB; }
.ai-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.ai-label { font-weight: 700; font-size: 12px; color: var(--amber); }
.ai-meta { font-size: 11px; color: var(--text-2); font-family: var(--mono); }
.ai-advisory-note { font-size: 11px; color: var(--text-2); margin-bottom: 6px; }
.ai-summary { font-size: 13px; margin-bottom: 6px; }
.ai-cand {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center;
  margin: 8px 0; font-size: 12px;
}
.ai-rule { font-family: var(--mono); white-space: nowrap; }
.ai-score { font-weight: 600; color: var(--blue); white-space: nowrap; }
.ai-reason { color: var(--text-2); font-size: 12px; margin-top: 2px; flex-basis: 100%; }
.ai-verdict { font-weight: 600; color: var(--amber); }

/* ---------- AI admin view ---------- */
.ai-admin-wrap { padding: 0 20px 20px; max-width: 560px; }
.ai-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; font-size: 13px;
}
.ai-row-label { color: var(--text-2); min-width: 110px; }
.ai-row-value.mono, .ai-row-value { font-weight: 600; }
.ai-row-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.ai-picker-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.ai-picker-row .select { flex: 1; min-width: 0; }
.ai-extract-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ai-extract-count { color: var(--text-2); font-size: 12px; }
.ai-gate-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 0; border-top: 1px solid var(--border); font-size: 12px;
}
.ai-gate-row:first-of-type { border-top: none; }
.ai-gate-rule { color: var(--text-2); font-weight: 700; min-width: 44px; }
.gate-chip {
  background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE;
  border-radius: 999px; padding: 1px 9px; font-size: 11px;
}
.gate-chip.url {
  background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* AI pending strip inside an expanded row */
.ai-pending {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 9px 12px;
  border: 1px dashed var(--border); border-radius: 8px;
  color: var(--text-2); font-size: 12px;
}
.ai-pending.quiet { border-style: solid; }

/* Floating AI analysis progress pill (post-ingest) */
.ai-progress {
  position: fixed; bottom: 22px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 14px 9px 16px; font-size: 12.5px; color: var(--text-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.ai-progress.done { color: var(--green); border-color: #BBF7D0; }
.ai-progress-close {
  background: none; border: none; cursor: pointer; color: var(--text-2);
  font-size: 15px; line-height: 1; padding: 2px 4px;
}
.ai-progress-close:hover { color: #1F2937; }
.ai-extract-right { display: flex; align-items: center; gap: 10px; }

/* AI advisory: applicability chip + score-vs-match explainer */
.ai-chip {
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600;
  margin: 0 6px; white-space: nowrap; flex: none;
}
.ai-chip.yes { color: var(--green); background: #F0FDF4; border: 1px solid #BBF7D0; }
.ai-chip.no  { color: var(--text-2); background: #F3F4F6; border: 1px solid var(--border); }
.ai-score-note {
  color: var(--text-2); font-size: 11px; margin: 6px 0 2px;
  padding-bottom: 6px; border-bottom: 1px dashed var(--border);
}
.ai-extract-summary { color: var(--text-2); font-size: 12px; margin: 4px 0 8px; }
/* AI view scrolls like other views (its content outgrows the viewport) */
#ai-status-body { flex: 1; overflow-y: auto; }

/* -------- host coloring (operations ホスト名 reference, feedback item 2)
   Online console → red-based #FFEBEB, offline → blue-based #DEE7EA — the
   same scheme the operations team uses across their other tools. */
.host-chip {
  display: inline-block; padding: 1px 7px; margin: 1px 3px 1px 0;
  border-radius: 4px; font-family: var(--mono); font-size: 12px;
  white-space: nowrap; border: 1px solid transparent; color: var(--text-1);
}
.host-online { background: #FFEBEB; border-color: #E8B4B4; color: #7A2E2E; }
.host-offline { background: #DEE7EA; border-color: #B4C6CE; color: #2E4A5A; }
/* Unclassified hosts stay white so the online red / offline blue stand out
   (reviewer feedback: the gray fill read too close to the offline blue). */
.host-other { background: #fff; border-color: var(--border); color: var(--text-2); }
.host-cell { display: inline; }
.host-note { font-size: 12px; color: var(--text-2); margin-right: 4px; }
.host-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.host-line .detail-label { margin-right: 2px; }
.cell-host .host-chip { display: block; width: fit-content; }

/* System name read to the bank on the telephone (feedback item 6) */
.system-name-line {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
  padding: 6px 10px; background: #FFF8E6; border: 1px solid #EAD9A0;
  border-radius: 6px;
}
.system-name-label { font-size: 12px; color: #7A6520; white-space: nowrap; }
.system-name { font-weight: 600; }

/* Bank column chip on rule candidates (feedback item 5) */
.bank-chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  background: #EEF3E6; border: 1px solid #C9D8B0; color: #4A5E2E;
  font-size: 12px;
}

/* ---------- Related-notes panel + knowledge-gap report (Phase 2) ---------- */
/* Pale blue tint distinguishes deterministic history from the amber AI card. */
.note-hist-card { border-color: #BFD7EA; background: #F4F9FD; }
.note-hist-card .ai-label { color: var(--blue); }
.note-hist-text { font-size: 12.5px; white-space: pre-wrap; word-break: break-word; margin: 4px 0 2px; }
.gap-card .note-hist-entry { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 8px 0; background: var(--panel); }

.gap-controls { display: flex; gap: 8px; margin: 0 20px 12px; }
.gap-card { margin: 0 20px 14px; }
.gap-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gap-range { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.gap-sample {
  margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: #F9FAFB; font-family: var(--mono);
  font-size: 12px; white-space: pre-wrap; word-break: break-all;
}

/* ================================================================
   Responsive layer — phones & tablets (beta).
   Desktop rules above are untouched; everything below only narrows.
   Breakpoints: 1100 slim rail · 900 top bar · 768 card feed/phone. */

/* Dynamic viewport height: keeps the layout inside the visible area
   when mobile browser chrome (address bar) expands/collapses. */
@supports (height: 100dvh) {
  .layout { height: 100dvh; }
}

/* Touch devices: hover-revealed controls must be reachable. */
@media (hover: none) {
  table.feed tbody .row-delete { visibility: visible; }
}

/* ---------- ≤1100px: slim nav rail, feed scrolls sideways ---------- */
@media (max-width: 1100px) {
  .sidenav { width: 168px; }
  .search { width: 200px; }
  /* Fixed column widths total ~840px + message: below this the message
     column collapses to nothing — scroll the table instead of squishing. */
  #view-feed table.feed { min-width: 960px; }
  .cell-msg { max-width: 380px; }
}

/* ---------- ≤900px: side nav becomes a top bar ---------- */
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .sidenav {
    width: 100%; flex-direction: row; align-items: center; gap: 4px;
    padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .brand { padding: 0 4px 0 0; flex: none; }
  .brand-name { display: none; }
  .env-tag { display: none; }
  .nav-item {
    width: auto; flex: none; white-space: nowrap;
    padding: 7px 10px; margin-bottom: 0;
  }
  .lang-toggle { margin-top: 0; margin-left: auto; padding: 0; flex: none; }
  .lang-btn { flex: none; padding: 4px 9px; }
  .sidenav-footer { padding: 0; flex: none; display: flex; align-items: center; }
  .nav-meta { display: none; }
  .nav-user { border-top: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 6px; }
  .nav-user-row { margin: 0; }
  .nav-user-name { max-width: 110px; }
  .logout-btn { width: auto; padding: 6px 9px; }

  .page-head { padding: 10px 14px 8px; flex-wrap: wrap; }
  .page-actions { flex: 1 1 100%; }
  .search { flex: 1; width: auto; min-width: 0; }
  .filter-bar {
    padding: 6px 14px 10px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar .chip, .filter-bar .select, .filter-label { flex: none; white-space: nowrap; }
  .table-wrap { padding: 0 14px 10px; }
  .upload-zone { margin: 6px 14px 12px; padding: 22px 14px; }
  .upload-result, .upload-admin-note { margin-left: 14px; margin-right: 14px; }
  .section-title { margin-left: 14px; margin-right: 14px; }
  .gap-controls, .gap-card { margin-left: 14px; margin-right: 14px; }
  .ai-admin-wrap, .profile-wrap { padding: 0 14px 16px; }
  .status-strip { padding: 6px 14px; flex-wrap: wrap; gap: 2px 16px; }
}

/* ---------- ≤768px: phones — card feed, full-width modals ---------- */
@media (max-width: 768px) {
  /* iOS zooms the page when a focused input is under 16px. */
  .search, .select, .login-input, .paste-area, .note-area, .new-username {
    font-size: 16px;
  }

  /* Event feed becomes a card list (other views keep scrolling tables). */
  #view-feed table.feed { min-width: 0; }
  #view-feed table.feed, #view-feed table.feed tbody { display: block; width: 100%; }
  #view-feed table.feed thead { display: none; }
  #view-feed table.feed tbody tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px;
    padding: 9px 10px; border-bottom: 1px solid var(--border);
    background: var(--panel);
  }
  #view-feed table.feed tbody tr td {
    display: block; padding: 0; border: 0 !important;
    background: transparent !important; width: auto;
  }
  /* Severity tint moves from cells to the card itself. */
  #view-feed tr.row-error { background: #FEF2F2; border-left: 3px solid var(--orange); }
  #view-feed tr.row-alert { background: #FEF2F2; border-left: 3px solid #991B1B; }
  #view-feed tr.row-warn  { background: #FFFBEB; border-left: 3px solid var(--amber); }

  /* Card internal order — line 1: check · severity · time · code · ✕;
     line 2: outcome · action · status; then hosts; then the message. */
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td.cell-check  { order: 0; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td:nth-child(2) { order: 1; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td.cell-time  { order: 2; font-size: 11px; color: var(--text-2); }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td:nth-child(5) { order: 3; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td.cell-delete { order: 4; margin-left: auto; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td:nth-child(7) { order: 5; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td:nth-child(8) { order: 6; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td:nth-child(9) { order: 7; }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td.cell-host {
    order: 8; flex-basis: 100%;
  }
  #view-feed tbody tr:not(.expand-row):not(.loading-row) td.cell-msg {
    order: 9; flex-basis: 100%; max-width: none;
    white-space: normal; word-break: break-all;
  }
  #view-feed .cell-host .host-chip { display: inline-block; }
  .row-status { width: auto; font-size: 12px; }

  /* Expanded detail + loading rows span the card. */
  #view-feed tr.expand-row > td, #view-feed tr.loading-row > td {
    display: block; width: 100%; flex-basis: 100%;
  }
  tr.expand-row > td { padding: 10px 12px 14px; }
  .expand-box { max-width: none; }
  .note-area { min-width: 0; flex-basis: 100%; }

  /* Non-feed tables: keep tabular, scroll inside their wrap. */
  #view-knowledge table.feed, #view-users table.feed { min-width: 640px; }

  /* Modals go (nearly) full screen. */
  .overlay { padding: 8px; }
  .modal, .modal.annex-modal {
    width: 100%; max-width: 100%; max-height: 94dvh;
    overflow: auto; padding: 14px;
  }
  .paste-area { min-height: 150px; }
  .annex-modal-body { max-height: 62dvh; }
  .login-card { width: min(360px, 94vw); padding: 22px 20px 18px; }

  /* Buttons/chips get honest touch targets. */
  .chip { padding: 6px 12px; }
  .btn { padding: 8px 14px; }
  .nav-item { padding: 8px 11px; }

  .ai-progress {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: space-between;
  }
  .toast { width: max-content; max-width: 92vw; text-align: center; }
}

/* ---------- ≤420px: compact phones ---------- */
@media (max-width: 420px) {
  .logout-btn span:last-child { display: none; }
  .nav-user-name { display: none; }
  .page-sub { display: none; }
}