/* 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; }
.chip.inst-unobserved.active { color: var(--text-2); border-color: var(--text-2); background: #F3F4F6; }
.chip.inst-late.active       { color: var(--amber);  border-color: var(--amber);  background: #FFFBEB; }
.chip.inst-missed.active     { color: var(--red);    border-color: var(--red);    background: #FEF2F2; }
.chip.inst-confirmed.active  { color: var(--green);  border-color: var(--green);  background: #F0FDF4; }
.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,
  #view-directives table.feed, #view-instance 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; }
}

/* Column widths, previously inline `style` attributes. Kept in the
   stylesheet so the Content-Security-Policy can forbid inline styles
   outright (SEC-04). */
.w-34 { width: 34px; }
.w-40 { width: 40px; }
.w-90 { width: 90px; }
.w-92 { width: 92px; }
.w-96 { width: 96px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-170 { width: 170px; }
.w-180 { width: 180px; }
.w-280 { width: 280px; }

/* An invite past its TTL is history, not an action (SEC-05). */
.invite-expired { opacity: .6; }

/* ---------------------------------------------------- business-day calendar
   CAL-02/CAL-04. Hairline 6x7 grid via the 1px-gap trick; day type is encoded
   as a cell tint plus small pills. No new custom properties: every colour is a
   :root token or a literal already used above (severity tints, annex indigo). */
.cal-verified-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; margin-left: 10px; vertical-align: middle;
}
.cal-verified-badge.verified    { color: var(--text-2); background: #F3F4F6; }
.cal-verified-badge.provisional { color: #92400E; background: #FFFBEB; border: 1px solid #FDE68A; }

.cal-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 20px; }
.cal-nav .btn.ghost { width: 32px; height: 32px; padding: 0; font-size: 15px; border-radius: 7px; }
.cal-nav .btn.ghost:hover { background: #F3F4F6; color: var(--blue); }
.cal-month-label { font-size: 15px; font-weight: 600; min-width: 120px; text-align: center; }

.cal-weekday-header { display: grid; grid-template-columns: repeat(7, 1fr); margin: 6px 20px 0; }
.cal-weekday-header > div {
  padding: 6px 8px; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .05em;
  color: var(--text-2); background: var(--bg);
}
.cal-weekday-header > div.sun { color: var(--red); }
.cal-weekday-header > div.sat { color: var(--blue); }

/* Always six rows so the grid height never jumps between months. */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(84px, auto);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; margin: 0 20px 12px;
}
.cal-cell {
  background: var(--panel); padding: 8px 8px 6px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 84px; cursor: pointer; position: relative;
}
.cal-cell:hover { background: #F8FAFF; }
.cal-cell.pad, .cal-cell.pad:hover { cursor: default; background: var(--bg); }

/* Closure days: blue for Saturday, red for Sunday/holiday/年末年始 — the
   Japanese calendar convention, same tint families as the severity chips. */
.cal-cell.rm-sat { background: #EFF6FF; }
.cal-cell.rm-sun, .cal-cell.rm-holiday,
.cal-cell.rm-yearend, .cal-cell.rm-yearstart { background: #FEF2F2; }
.cal-cell.rm-sat:hover { background: #E3EDFF; }
.cal-cell.rm-sun:hover, .cal-cell.rm-holiday:hover,
.cal-cell.rm-yearend:hover, .cal-cell.rm-yearstart:hover { background: #FDE8E8; }

/* Texture, not colour, so provisional never competes with the day-type tint. */
.cal-cell.provisional { border: 1px dashed var(--text-2); opacity: .85; }
.cal-cell.today { box-shadow: 0 0 0 2px var(--blue) inset; }
.cal-cell.today .cal-date { color: var(--blue); }
.cal-cell.selected { border: 2px solid var(--text); }

.cal-date { font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--text); }
.cal-date.sun { color: var(--red); }
.cal-date.sat { color: var(--blue); }
.cal-cell.today .cal-date.sun, .cal-cell.today .cal-date.sat { color: var(--blue); }

.cal-holiday {
  font-size: 10px; font-weight: 400; line-height: 1.2; color: var(--red);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pills always sit on white rather than the cell tint, so a stop day that
   lands on a holiday stays legible. */
.cal-badge {
  align-self: flex-start;
  font-size: 10px; font-weight: 600; line-height: 1.2; height: 14px;
  padding: 0 4px; border-radius: 4px;
  background: #fff; border: 1px solid currentColor;
}
.cal-badge.monthly { color: var(--amber); }
.cal-badge.long    { color: var(--orange); }

.cal-markers { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.cal-marker {
  font-size: 10px; font-weight: 600; line-height: 1.2; height: 14px;
  padding: 0 4px; border-radius: 4px;
  background: #fff; border: 1px solid currentColor;
}
.cal-marker.startup    { color: var(--green); }
.cal-marker.monthend   { color: var(--blue); }
.cal-marker.settlement { color: #4F46E5; }
.cal-marker.reorg      { color: #4F46E5; }
.cal-marker.reorg-next { color: #4F46E5; border-style: dashed; }
.cal-marker.special    { color: var(--text-2); }

.cal-detail {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px 18px; margin: 0 20px 20px;
}
.cal-detail .modal-head { margin-bottom: 8px; }
.cal-detail .modal-head h2 { font-size: 17px; }

.cal-error { margin: 0 20px 12px; }
.cal-error .btn { margin-top: 8px; }
.cal-assumption { margin: 0 20px 20px; color: var(--text-2); font-size: 10px; line-height: 1.5; }

@media (max-width: 1100px) {
  .cal-grid { grid-auto-rows: minmax(72px, auto); }
}
@media (max-width: 900px) {
  .cal-grid, .cal-weekday-header, .cal-detail, .cal-error, .cal-assumption {
    margin-left: 14px; margin-right: 14px;
  }
}
@media (max-width: 768px) {
  .cal-grid { grid-auto-rows: minmax(56px, auto); }
  .cal-cell { min-height: 56px; padding: 6px 6px 4px; }
  .cal-date { font-size: 13px; }
  .cal-detail .modal-head h2 { font-size: 15px; }
  .cal-badge, .cal-marker { padding: 0 3px; }
}

/* ---------------------------------------------- directive templates
   DIR-03. Block collapse, per-sheet import report, field-form grid and
   diff summary counts. No new custom properties: every colour is a
   :root token or a literal already used above. */

/* panel headings — replaces the UI contract's inline style attributes */
.dir-panel-title { font-size: 17px; font-weight: 600; display: inline; margin-left: 8px; }

/* per-sheet import report */
.dir-report { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.dir-sheet-report {
  border-radius: 8px; padding: 8px 16px; border-left: 3px solid var(--border);
  background: var(--panel); font-size: 13px;
}
.dir-sheet-report.ok    { border-left-color: var(--green); background: #F6FEF8; }
.dir-sheet-report.error { border-left-color: var(--red);   background: #FEF6F6; }
.dir-sheet-report-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dir-sheet-report-hint { font-size: 10px; font-weight: 400; color: var(--text-2); margin-top: 4px; }

/* editor — block collapse */
.dir-block { border: 1px solid var(--border); border-radius: 8px; margin: 0 20px 8px; overflow: hidden; }
.dir-block-summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: var(--bg); font-size: 15px; font-weight: 600;
}
.dir-block-summary::-webkit-details-marker { display: none; }
.dir-block-summary:hover { color: var(--blue); }
.dir-block-key { font-family: var(--mono); font-size: 13px; }
.dir-block-count { font-size: 10px; font-weight: 600; color: var(--text-2); }
.dir-block-delete { margin-left: auto; }

/* editor — step row-detail form */
.dir-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.dir-field-grid .dir-field-wide { grid-column: 1 / -1; }
.dir-field label { display: block; font-size: 10px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.dir-field input, .dir-field textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel); outline: none;
}
.dir-field input:focus, .dir-field textarea:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.dir-field textarea { min-height: 56px; resize: vertical; white-space: pre-wrap; }
.dir-field-note { font-size: 10px; font-weight: 400; color: var(--text-2); margin-top: 4px; }
.dir-daytype-group, .dir-phase-group { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.dir-msgid-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dir-step-actions { display: flex; gap: 8px; margin-top: 8px; }

/* editor — reorder handles */
.dir-move { padding: 0 4px; line-height: 1; }

/* source badges (version history) */
.badge.src-import { color: var(--blue);   background: #EFF6FF; border: 1px solid #BFDBFE; }
.badge.src-edit   { color: var(--text-2); background: #F3F4F6; border: 1px solid var(--border); }

/* diff */
.dir-diff-block {
  display: flex; align-items: center; gap: 16px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.dir-diff-count { font-size: 13px; font-weight: 600; }
.dir-diff-count.added     { color: var(--green); }
.dir-diff-count.removed   { color: var(--red); }
.dir-diff-count.changed   { color: var(--amber); }
.dir-diff-count.unchanged { color: var(--text-2); font-weight: 400; }
.dir-diff-step { border-left: 3px solid var(--border); padding: 4px 0 4px 8px; margin: 4px 0; }
.dir-diff-step.added   { border-left-color: var(--green); }
.dir-diff-step.removed { border-left-color: var(--red); }
.dir-diff-step.changed { border-left-color: var(--amber); }
.dir-diff-field { font-size: 10px; font-weight: 600; color: var(--text-2); }

@media (max-width: 1100px) {
  #view-directives table.feed.dir-step-table { min-width: 900px; }
}

@media (max-width: 768px) {
  .dir-block { margin: 0 12px 8px; }
  .dir-field-grid { grid-template-columns: 1fr; }
}

/* Vertical scrolling inside views. .layout/.view clip at the viewport
   (overflow: hidden), so any view content taller than the window must sit
   in its own scroll container — the feed does this with .table-wrap's
   flex: 1 + overflow: auto. The directive panels, calendar detail, gap
   report and profile cards previously had no such container and were
   simply cut off below the fold. */
#dir-list-panel, #dir-editor-panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
#dir-blocks { flex: 1; min-height: 0; overflow-y: auto; }
/* keep the Add-block row pinned under the block list, not half the panel */
#dir-editor-panel > .table-wrap { flex: 0 0 auto; overflow: visible; }
/* history table and its diff panel scroll as one column */
#dir-history-panel { flex: 1; min-height: 0; overflow-y: auto; }
#dir-history-panel > .table-wrap { flex: none; }
#view-calendar { overflow-y: auto; }
#view-gap-body { flex: 1; min-height: 0; overflow-y: auto; }
.profile-wrap { flex: 1; min-height: 0; overflow-y: auto; }

/* ---------------------------------------------------- daily instance view (Phase 5)
   Additive only: no existing rule or custom property is redefined. */

/* .view clips at the viewport (overflow: hidden) — the block list is this
   view's scroll container, same contract as the 2026-09-25 scroll fix gave
   #dir-blocks. Header, date nav, banners and the calendar caveat stay pinned. */
#inst-blocks { flex: 1; min-height: 0; overflow-y: auto; }

.inst-weekday { font-size: 10px; font-weight: 600; line-height: 1.2; color: var(--text); }
.inst-weekday.sun { color: var(--red); }
.inst-weekday.sat { color: var(--blue); }

.inst-header {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 20px; margin: 0 20px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
}
.inst-header-kind { font-size: 13px; font-weight: 600; }
.inst-header-version { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.inst-header-meta { font-size: 10px; color: var(--text-2); }

.inst-summary-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0 20px 12px;
}
/* 自動/手動 is a text tag, never a second badge colour: the four status colours
   stay the whole vocabulary and the accent blue stays scarce. */
.inst-kind-tag { font-size: 10px; font-weight: 600; color: var(--text-2); margin-left: 4px; }

/* Unexpected-event banner and the entry point into the triage list (BRD-03). */
.inst-unexpected {
  margin: 0 20px 12px; padding: 8px 16px; border-radius: 8px;
  background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}

/* Survives a manual re-collapse of an at-risk block. Red wins over amber. */
.inst-block-alert {
  font-size: 10px; font-weight: 600; padding: 0 4px; border-radius: 999px;
  margin-left: auto; border: 1px solid currentColor;
}
.inst-block-alert.amber { color: var(--amber); background: #FFFBEB; }
.inst-block-alert.red   { color: var(--red);   background: #FEF2F2; }

/* Three-state model + the confirmed state (REC-03). Every badge pairs a glyph
   with an always-visible label, so status survives greyscale and print. */
.inst-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 600;
}
.inst-status.unobserved { color: var(--text-2); background: #F3F4F6; border: 1px solid var(--border); }
.inst-status.late       { color: var(--amber);  background: #FFFBEB; border: 1px solid #FDE68A; }
.inst-status.missed     { color: var(--red);    background: #FEF2F2; border: 1px solid #FECACA; }
.inst-status.confirmed  { color: var(--green);  background: #F0FDF4; border: 1px solid #BBF7D0; }

/* Check-off button (REC-05). Deliberately green, not the accent blue: this
   phase introduces no new blue CTA so the accent stays scarce. */
.btn.confirm { background: var(--green); border-color: var(--green); color: #fff; }
.btn.confirm:hover { background: #15803D; }
.btn.danger:disabled { opacity: .5; cursor: default; }
.btn.danger:disabled:hover { background: var(--red); }

@media (max-width: 1100px) {
  #view-instance table.feed.inst-step-table { min-width: 720px; }
}
@media (max-width: 900px) {
  .inst-header, .inst-unexpected, .inst-summary-strip { margin-left: 14px; margin-right: 14px; }
}