/* Call Draft (S-05): layout the house sheet does not cover — call grid + live plot split,
 * grid cells, closure bar, deed info form, toasts. Tokens come from ../shared/aa.css. */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.desk-title .actions { flex-wrap: wrap; align-items: center; }
.action-rule { align-self: stretch; width: 1px; margin: 0 var(--s1); background: var(--minor); }

/* ── Toasts ─────────────────────────────────────────────────────────── */
#messages { position: fixed; bottom: 56px; right: var(--s4); z-index: 60; display: flex; flex-direction: column; gap: 6px; max-width: 380px; }
#messages .msg { --tone: var(--navy); --tone-bg: var(--field); color: var(--navy); background: var(--field); border-color: var(--navy); box-shadow: 3px 3px 0 rgba(22, 35, 63, 0.12); transition: opacity 0.4s; }
#messages .msg::before { content: "i"; }
#messages .msg-success { --tone: var(--success); --tone-bg: var(--success-bg); color: var(--success); background: var(--success-bg); border-color: var(--success); }
#messages .msg-success::before { content: "\2713"; }
#messages .msg-warning { --tone: var(--warn); --tone-bg: var(--warn-bg); color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
#messages .msg-warning::before { content: "!"; }
#messages .msg-error { --tone: var(--danger); --tone-bg: var(--danger-bg); color: var(--danger); background: var(--danger-bg); border-color: var(--danger); }
#messages .msg-error::before { content: "\00D7"; }
#messages .msg.out { opacity: 0; }

/* ── Work area: calls | plot ────────────────────────────────────────── */
.deed-work { display: grid; grid-template-columns: min(680px, max(624px, 44vw)) minmax(0, 1fr); gap: var(--s5); align-items: start; padding: var(--s5); }
.deed-calls { display: flex; flex-direction: column; min-width: 0; border: var(--rule); background: var(--field); }
.deed-plot { position: sticky; top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.deed-plot .section-head { margin-bottom: 0; }

.tabs { display: flex; background: var(--band); border-bottom: var(--rule); }
.tab-btn { min-height: var(--row-form); padding: 0 var(--s4); border: 0; border-right: var(--rule-minor); background: transparent; font-weight: 600; cursor: pointer; }
.tab-btn:hover { background: var(--margin); }
.tab-btn.active { background: var(--navy); color: var(--field); }
.tab-panel { display: none; flex-direction: column; min-height: 0; }
.tab-panel.active { display: flex; }

/* ── Tract tabs + POB row ───────────────────────────────────────────── */
#tractTabs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); padding: var(--s2) var(--s3); border-bottom: var(--rule-minor); background: var(--band); }
.tract-tab { min-height: 28px; padding: 0 10px; border: 1px solid var(--minor); background: var(--field); font-family: var(--f-mono); font-size: 12px; font-weight: 500; cursor: pointer; }
.tract-tab:hover { border-color: var(--navy); }
.tract-tab.active { border-color: var(--navy); background: var(--navy); color: var(--field); }
.tract-ops { margin-left: auto; display: flex; gap: var(--s1); }

.btn.btn-mini { min-height: 28px; padding: 0 10px; border-width: 1px; background: var(--field); color: var(--navy); font-size: 13px; }
.btn.btn-mini:hover { background: var(--margin); }

.pob-row { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); border-bottom: var(--rule-minor); }
.pob-row label { display: flex; flex-direction: column; min-width: 0; padding-top: 6px; border-right: var(--rule-minor); }
.pob-row label:last-child { border-right: 0; }
.pob-row .caption { padding: 0 var(--s3); font-size: 11px; }
.pob-row input { width: 100%; min-height: 32px; padding: 0 var(--s3); border: 0; background: var(--field); font-size: var(--t15); font-weight: 500; }
.pob-row input.mono { font-family: var(--f-mono); }
.pob-row input:focus { outline: 2px solid var(--focus); outline-offset: -2px; }
.pob-derived { padding: 6px var(--s3); border-bottom: var(--rule-minor); background: var(--band); font-size: 12px; color: var(--ink2); }
.pob-derived:empty { display: none; }

/* ── Call grid ──────────────────────────────────────────────────────── */
.grid-wrap { max-height: min(58vh, 640px); min-height: 180px; overflow: auto; }
table.call-grid { font-size: var(--t14); }
.call-grid thead th { position: sticky; top: 0; z-index: 2; padding: 6px 4px; background: var(--field); }
.call-grid th.r { text-align: right; }
.call-grid th.wrap { white-space: normal; }
.call-grid tbody td { height: 34px; padding: 0 4px; }
.call-grid tr.call-row:hover td, .call-grid tr.call-row.hovered td { background: var(--band); }
.call-grid tr.call-row.selected td { background: var(--margin); }
.call-grid tr.call-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--redline); }
.call-grid tr.tie td { color: var(--ink3); }
.call-grid td.num { width: 28px; padding-left: var(--s2); font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: var(--ink2); text-align: left; }
.call-grid td.r { text-align: right; }
.call-grid td.c { width: 22px; text-align: center; }

.cell-input { width: 100%; min-height: 30px; padding: 0 6px; border: 1px solid transparent; background: transparent; font-size: var(--t14); }
.cell-input:hover { border-color: var(--minor); }
.cell-input:focus { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--field); }
.cell-input.brg, .cell-input.dist, .cf .cell-input { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.cell-input.brg { min-width: 128px; }
.cell-input.dist { min-width: 76px; text-align: right; }
.cell-input.desc { min-width: 96px; }
.cell-input.bad { border-color: var(--danger) !important; background: var(--danger-bg); color: var(--danger); }
.cell-input.suspect { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
select.cell-input { cursor: pointer; }
select.cell-input.type { width: 66px; }
select.cell-input.unit { width: 66px; font-family: var(--f-mono); font-size: 12px; }
.cell-static { font-family: var(--f-mono); font-size: 12px; color: var(--ink2); white-space: nowrap; }

.curve-pill { display: inline-block; max-width: 150px; padding: 1px 6px; border: 1px solid var(--minor); background: var(--band); font-family: var(--f-mono); font-size: 12px; line-height: 1.35; color: var(--navy); }
.call-grid tr.curve-editor td { height: auto; padding: 4px; background: var(--band); }
.curve-fields { display: flex; flex-wrap: wrap; gap: 4px var(--s3); }
.cf { display: flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--ink2); }
.cf .cell-input { width: 88px; border-color: var(--minor); background: var(--field); }
.cf input[data-f="c_chordbrg"] { width: 132px; }
.call-grid tr.passing-note td { height: 24px; font-family: var(--f-mono); font-size: 12px; color: var(--ink3); background: var(--band); }
.call-grid tr.review-note td { height: auto; padding: 4px 6px; font-size: 13px; line-height: 1.35; color: var(--warn); background: var(--warn-bg); }
.call-grid td.empty-hint { height: auto; padding: var(--s6) var(--s4); text-align: center; color: var(--ink3); }

.dot { display: inline-block; width: 10px; height: 10px; border: 1px solid transparent; vertical-align: middle; }
.dot-ok { background: var(--success); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--danger); }
.dot-info { background: var(--field); border-color: var(--ink2); }
.dot-ai { background: var(--field); border-color: var(--warn); }

td.actions { width: 108px; white-space: nowrap; }
.row-btn { width: 20px; height: 22px; margin: 0; padding: 0; border: 1px solid transparent; background: transparent; font-family: var(--f-mono); font-size: 12px; line-height: 1; color: var(--ink3); cursor: pointer; }
tr:hover .row-btn { border-color: var(--minor); }
.row-btn:hover { border-color: var(--navy) !important; background: var(--field); color: var(--navy); }
.row-btn.danger:hover { border-color: var(--danger) !important; background: var(--danger-bg); color: var(--danger); }

.grid-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-top: var(--rule-minor); }
.grid-actions .btn { min-height: 32px; padding: 0 var(--s3); font-size: var(--t14); }
.entry-hint { margin-left: auto; cursor: help; }

/* ── Closure bar ────────────────────────────────────────────────────── */
#closureBar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); min-height: var(--row-form); padding: var(--s2) var(--s3); border-top: var(--rule); background: var(--band); font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.cb-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.cb-item label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.cb-item b { font-weight: 600; color: var(--navy); }
.cb-item b.ok { color: var(--success); }
.cb-item b.warn { color: var(--warn); }
.cb-item b.err { color: var(--danger); }
.cb-muted { color: var(--ink3); }

/* ── Deed info ──────────────────────────────────────────────────────── */
#deedInfoForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); align-content: start; padding: var(--s4); }
.di-field { display: flex; flex-direction: column; gap: 4px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); }
.di-field input, .di-notes textarea { width: 100%; padding: 0 var(--s3); border: var(--rule-minor); background: var(--field); font-family: var(--f-ui); font-size: var(--t15); letter-spacing: 0; text-transform: none; color: var(--navy); }
.di-field input { min-height: 36px; }
.di-notes textarea { padding: var(--s2) var(--s3); resize: vertical; }
.di-field input:focus, .di-notes textarea:focus { outline: 2px solid var(--focus); outline-offset: -2px; border-color: transparent; }
.di-notes { grid-column: 1 / -1; }
.di-lotblock { grid-column: 1 / -1; margin-top: var(--s2); padding-top: var(--s2); border-top: var(--rule); }
.di-lotblock h4 { margin: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.di-lb-row { padding: 4px 0; border-bottom: var(--rule-minor); font-size: var(--t14); color: var(--ink2); }
.di-lb-row b { color: var(--navy); }
.di-provenance { grid-column: 1 / -1; padding: var(--s2) var(--s3); border: var(--rule-minor); background: var(--band); font-size: var(--t14); color: var(--ink2); }
.di-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── Plot sheet ─────────────────────────────────────────────────────── */
/* plot.js writes RODS theme variable names into SVG attributes; map them onto house tokens. */
.plot-sheet {
  --text-primary: var(--navy);
  --text-secondary: var(--ink2);
  --text-muted: var(--ink3);
  --bg-primary: var(--field);
  --bg-secondary: var(--field);
  --status-ok: var(--success);
  --status-error: var(--redline);
  --accent-brass: var(--warn);
  --accent-steel: var(--ink2);
  --font-mono: var(--f-mono);
  --font-condensed: var(--f-title);
  --font-body: var(--f-ui);

  aspect-ratio: 10 / 7;
  border: var(--rule);
  background-color: var(--field);
  background-image: linear-gradient(rgba(22, 35, 63, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 35, 63, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}
#plotSvg { display: block; width: 100%; height: 100%; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.seg-line, .seg-curve { fill: none; stroke: var(--navy); stroke-width: 1.8; }
.seg-tie { stroke: var(--ink3); stroke-width: 1.2; stroke-dasharray: 6 4; }
.seg-tie ~ .seg-tie { stroke-dasharray: none; }
.seg-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
g.seg.hl .seg-line, g.seg.hl .seg-curve { stroke: var(--redline); stroke-width: 3; }
g.seg.hl .seg-tie { stroke: var(--redline); stroke-width: 2.2; }
.lbl { fill: var(--ink2); font-family: var(--f-mono); paint-order: stroke; stroke: var(--field); stroke-width: 3px; stroke-linejoin: round; }
.lbl-brg { fill: var(--navy); }
.lbl-dist { fill: var(--ink2); }
.lbl-tie { fill: var(--ink3); font-style: italic; }
.seg-tag { fill: var(--navy); font-weight: 600; letter-spacing: 0.5px; }
.mon-lbl { font-family: var(--f-ui); }

.drop.drop-slim { min-height: 88px; }
.drop.drop-slim .drop-title { font-size: 19px; }

/* ── Narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .deed-work { grid-template-columns: 1fr; }
  .deed-plot { position: static; }
}
@media (max-width: 900px) {
  .deed-work { padding: var(--s4); gap: var(--s4); }
  .pob-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pob-row label:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: var(--rule-minor); padding-bottom: 0; }
  #deedInfoForm { grid-template-columns: 1fr; }
  .action-rule { display: none; }
  #messages { left: var(--s4); max-width: none; }
}