/* SEC-01 external pilot. Dark imaging-room stage and slate rail; the reading/writing area (definition, notes) is a light
   paper sheet, like a chart on a clipboard next to the viewer. Subject-side colours: R teal, L amber, midline white. */
:root {
  --stage: #4a4f52;
  --rail: #27313a;
  --rail-2: #2f3b45;
  --rail-line: #3b4852;
  --paper: #f3f1ec;
  --paper-line: #d8d3c8;
  --ink: #1d2326;
  --ink-soft: #5d6568;
  --text: #e8ebe9;
  --text-soft: #a7b0ac;
  --side-r: #2fb8c9;
  --side-l: #e5a12b;
  --side-m: #f4f4f2;
  --accent: #7cc4bf;
  --alert: #ff7b6b;
  --alert-ink: #8f2a1f;
  --num: "Bahnschrift", "Segoe UI", "Malgun Gothic", sans-serif;
  --body: "Malgun Gothic", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  background: var(--stage); color: var(--text); font: 14px/1.5 var(--body); word-break: keep-all;
}
button, .button {
  display: inline-flex; align-items: center; justify-content: center; font: 14px var(--body); color: var(--text);
  background: var(--rail-2); border: 1px solid #4a5963; border-radius: 4px; padding: 7px 12px; cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: #38464f; }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: #10302d; font-weight: 600; }
button.primary:hover, .button.primary:hover { background: #93d2cd; }
button.quiet { background: transparent; border-color: transparent; color: var(--text-soft); }
button.quiet:hover { color: var(--text); background: var(--rail-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------- gate (login) */
body.gate { display: block; background: var(--rail); }
.gate-card { max-width: 34rem; margin: 12vh auto 0; padding: 0 24px; }
.gate-kicker { margin: 0 0 6px; color: var(--accent); font: 600 14px/1.4 var(--num); letter-spacing: .02em; }
.gate h1 { margin: 0 0 14px; font: 300 40px/1.1 var(--num); letter-spacing: -.01em; }
.gate-lead { margin: 0 0 26px; font-size: 16px; line-height: 1.6; color: var(--text-soft); max-width: 30rem; }
.gate-login { font-size: 16px; padding: 11px 20px; }
.gate-facts { margin: 40px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rail-line); display: grid; grid-template-columns: 9rem 1fr; gap: 8px 16px; font-size: 13px; }
.gate-facts dt { color: var(--text-soft); }
.gate-facts dd { margin: 0; }
.gate-card p a.button { margin-top: 6px; }
.gate-note { margin: 0 0 20px; padding: 9px 12px; border-left: 3px solid var(--side-l); background: var(--rail-2); font-size: 14px; line-height: 1.5; max-width: 30rem; }
.gate-ref { margin: 26px 0 0; font-size: 13px; color: var(--text-soft); }
.gate-ref strong { font: 600 16px/1 var(--num); color: var(--text); letter-spacing: .06em; }

/* ---------------------------------------------------------------- stage */
.stage { position: relative; min-height: 0; overflow: hidden; }
.viewport { position: absolute; inset: 0; }
.viewport canvas { display: block; width: 100% !important; height: 100% !important; cursor: crosshair; touch-action: none; }
.point-label {
  position: absolute; left: 0; top: 0; padding: 1px 7px; border-radius: 3px; pointer-events: none;
  background: rgba(20, 24, 27, .82); color: #eef0ef; font: 600 12px/1.5 var(--num); white-space: nowrap;
}
.orient {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: 0; display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  background: rgba(20, 24, 27, .7); color: #eef0ef; font-size: 13px; pointer-events: none;
}
.orient-gap { flex: 1; }
.orient-mid { font: 600 13px/1.5 var(--num); }
.tag { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; font: 700 13px/1 var(--num); color: #fff; flex: none; }
.tag.r { background: var(--side-r); color: #0b2a2e; }
.tag.l { background: var(--side-l); color: #2a1d05; }
.tag.m { background: var(--side-m); color: var(--ink); }
.orient .tag.off { visibility: hidden; }
.views { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: flex; background: rgba(20, 24, 27, .78); border-radius: 5px; padding: 3px; }
.views button { border: 0; border-radius: 4px; padding: 6px 12px; background: transparent; color: #eef0ef; }
.views button:hover { background: rgba(255, 255, 255, .12); }
.views button[aria-pressed=true] { background: #eef0ef; color: var(--ink); font-weight: 600; }
.views button.reset { margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .25); border-radius: 0 4px 4px 0; }
.hud {
  position: absolute; z-index: 2; right: 14px; bottom: 14px; margin: 0; padding: 5px 10px; border-radius: 4px; text-align: right;
  background: rgba(20, 24, 27, .7); color: #eef0ef; font: 12px/1.6 var(--num); font-variant-numeric: tabular-nums; pointer-events: none; white-space: pre-line;
}
.empty, .loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #e9ecea; font-size: 16px; pointer-events: none; }
.loading { background: rgba(20, 24, 27, .4); }
.load-fail { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: 14px; margin: 0; padding: 24px; background: rgba(20, 24, 27, .62); color: #eef0ef; text-align: center; }
.load-fail p { margin: 0; max-width: 34rem; font-size: 15px; line-height: 1.55; padding-left: 12px; border-left: 3px solid var(--alert); text-align: left; }
.load-fail .actions { display: flex; gap: 8px; justify-content: center; }
.assets .nm small { display: block; font: 12px var(--num); color: var(--text-soft); }
.assets li[aria-selected=true] .nm small { color: var(--text-soft); }

/* ---------------------------------------------------------------- rail */
.rail { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; overflow: hidden; background: var(--rail); border-left: 1px solid var(--rail-line); }
.who-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rail-line); }
.who { display: grid; min-width: 0; line-height: 1.35; }
.who strong { font: 600 15px/1.3 var(--num); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who span { font-size: 12px; color: var(--text-soft); }
.who .until { color: var(--side-l); font-family: var(--num); font-variant-numeric: tabular-nums; }
.assign { padding: 12px 16px 10px; border-bottom: 1px solid var(--rail-line); }
.assign h2 { margin: 0 0 8px; font: 600 13px/1.4 var(--body); color: var(--text-soft); }
.assets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.assets li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--rail-line); border-radius: 5px; cursor: pointer; background: var(--rail-2); }
.assets li:hover { border-color: #5a6b76; }
.assets li[aria-selected=true] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.assets .st { font: 12px var(--num); color: var(--text-soft); white-space: nowrap; }
.assets .st.done { color: var(--accent); }
.assets .st.open { color: var(--side-l); }
.model-meta { margin: 8px 0 0; font: 12px/1.5 var(--num); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.lock { margin: 10px 0 0; padding: 7px 10px; border-left: 3px solid var(--accent); background: var(--rail-2); font-size: 13px; }

/* the sheet row is capped at 55% of the rail's free height (fit-content), so the point list keeps the rest; the sheet scrolls inside its row */
.mark { min-height: 0; display: grid; grid-template-rows: minmax(120px, 1fr) fit-content(55%); }
.points { list-style: none; margin: 0; padding: 6px 0; overflow: auto; min-height: 0; }
.points li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 16px; cursor: pointer; border-left: 3px solid transparent; }
.points li.group-end { border-bottom: 1px solid var(--rail-line); margin-bottom: 4px; padding-bottom: 9px; }
.points li:hover { background: var(--rail-2); }
.points li[aria-selected=true] { background: var(--paper); color: var(--ink); border-left-color: var(--accent); }
.points li[aria-selected=true] .name small, .points li[aria-selected=true] .val { color: var(--ink-soft); }
.points .name { min-width: 0; }
.points .name small { display: block; font-size: 12px; color: var(--text-soft); line-height: 1.3; }
.points .name .prio { font-weight: 600; }
.points .val { font: 13px var(--num); font-variant-numeric: tabular-nums; color: var(--text-soft); text-align: right; white-space: nowrap; }
.points .val.todo { color: #7d8a90; }
.points .val.nv, .points .val.und, .points .val.bad { font-family: var(--body); }
.points .val.bad { color: var(--alert); font-weight: 600; }

.sheet { padding: 12px 16px 14px; background: var(--paper); color: var(--ink); overflow: auto; min-height: 0; }
.def-head { display: flex; gap: 12px; align-items: baseline; margin-bottom: 6px; }
.abbr { font: 300 38px/1 var(--num); color: var(--ink); letter-spacing: -.02em; min-width: 3.2ch; }
.def-head h3 { margin: 0; font: 600 16px/1.3 var(--body); }
.side-note { margin: 2px 0 0; font-size: 12px; color: var(--ink-soft); }
.def { margin: 0 0 8px; font-size: 13px; line-height: 1.55; max-width: 60ch; }
.review { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); }
.review button { padding: 2px 10px; font-size: 13px; border-radius: 12px; border: 1px solid #a9a496; background: #fff; color: var(--ink); }
.review button.seen { border-color: var(--ink); background: var(--ink); color: #fff; }
.review button.seen::before { content: "✓ "; }
.sheet .warn { margin: 0 0 10px; padding: 6px 9px; border-left: 3px solid var(--alert); background: #fbe9e5; color: var(--alert-ink); font-size: 13px; }
.state-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sheet button { background: #fff; border-color: #a9a496; color: var(--ink); }
.sheet button:hover { background: #ebe8e0; }
.field { display: grid; gap: 4px; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.sheet input[type=text] { width: 100%; font: 14px var(--body); color: var(--ink); background: #fff; border: 1px solid #a9a496; border-radius: 4px; padding: 6px 8px; }
.fixed { margin: 8px 0 0; font: 12px/1.5 var(--num); color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: pre-line; }

.rail-foot { padding: 10px 16px 12px; border-top: 1px solid var(--rail-line); }
.rail-foot .field { color: var(--text-soft); }
.rail-foot textarea { width: 100%; resize: vertical; font: 14px/1.5 var(--body); color: var(--text); background: var(--rail-2); border: 1px solid #4a5963; border-radius: 4px; padding: 6px 8px; }
.rail-foot .actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 8px; }
.save-state { font-size: 13px; color: var(--text-soft); min-height: 1.5em; }
.save-state.error { color: var(--alert); font-weight: 600; }
.save-fail { margin-top: 10px; padding: 9px 11px; border-left: 3px solid var(--alert); background: var(--rail-2); }
.save-fail p { margin: 0 0 8px; font-size: 13px; line-height: 1.5; }
.confirm { margin-top: 10px; padding: 9px 11px; border-left: 3px solid var(--side-l); background: var(--rail-2); }
.confirm p { margin: 0 0 8px; font-size: 13px; }
.keys { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-soft); }

@media (prefers-reduced-motion: no-preference) { .views button, .assets li { transition: background-color .12s ease-out, border-color .12s ease-out; } }
@media (max-width: 900px) {
  body { grid-template-columns: 1fr; grid-template-rows: 56vh auto; }
  .rail { border-left: 0; border-top: 1px solid var(--rail-line); }
  .gate-facts { grid-template-columns: 1fr; }
}