/* ChainPlot application layout */

body { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px; padding: 0 var(--sp-4);
  background: var(--panel); border-bottom: var(--bw) solid var(--border-strong);
}
.toolbar .brand { display: flex; align-items: center; gap: var(--sp-3); padding-right: var(--sp-3); border-right: var(--bw) solid var(--border); }
.toolbar .brand .eyebrow { display: none; }
.toolbar .group { display: flex; align-items: center; gap: var(--sp-2); }
.toolbar .group + .group { padding-left: var(--sp-3); border-left: var(--bw) solid var(--border); }
.toolbar .spacer { flex: 1; }
.toolbar .about { font-size: var(--fs--1); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.toolbar .about:hover { color: var(--ink); text-decoration-color: var(--ink); }
@media (min-width: 1180px) { .toolbar .brand .eyebrow { display: block; } }

/* ---------- Main grid: sheet + schedule ---------- */
main { display: grid; grid-template-columns: 1fr 316px; min-height: 0; height: 100%; }
.chart-wrap { position: relative; min-width: 0; min-height: 0; background: var(--sheet); }
.chart-wrap svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.chart-wrap svg:active { cursor: grabbing; }
.notice { position: absolute; left: 84px; top: 54px; max-width: min(60%, 520px); pointer-events: none; }
.zoomctl { position: absolute; right: var(--sp-4); top: 54px; display: flex; gap: var(--sp-1); }
.empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink-2); padding: var(--sp-5); pointer-events: none; }
.empty > div { max-width: 46ch; }
.empty p { margin: var(--sp-2) 0; line-height: var(--lh-body); }
.empty strong { font-family: var(--font-display); font-size: var(--fs-2); letter-spacing: var(--track-tight); color: var(--ink); font-weight: 600; }
.empty .btnrow { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); }
.empty button { pointer-events: auto; }
.titleblock { position: absolute; right: var(--sp-4); bottom: var(--sp-4); }

/* ---------- Chart marks ---------- */
.axis text { fill: var(--ink-2); font-family: var(--font-body); font-size: 11px; }
.axis line, .axis path { stroke: var(--ink-3); }
.axis .domain { stroke: var(--ink); }
.axis-title { fill: var(--ink-2); font-family: var(--font-body); font-size: 11px; }
.grid line { stroke: var(--grid); }
.grid line.strong { stroke: var(--grid-strong); }
.act .hit { fill: none; stroke: transparent; stroke-width: 12px; pointer-events: stroke; }
.act .hit.area { fill: transparent; stroke: transparent; pointer-events: all; }
.act .body { stroke-linecap: round; stroke-linejoin: round; transition: opacity var(--dur-1) var(--ease-out); }
.act .lbl { font-size: 10.5px; font-family: var(--font-body); font-weight: 500; fill: var(--ink); paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.act.dim { opacity: 0.12; }
.act.hover .body { filter: drop-shadow(0 0 2px rgba(28, 27, 25, 0.35)); }
.datadate line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.datadate text { fill: var(--accent); font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.frame { fill: none; stroke: var(--ink); stroke-width: 1; }

/* ---------- Side schedule ---------- */
aside.schedule { background: var(--panel); border-left: var(--bw) solid var(--border-strong); overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); min-height: 0; }
aside.schedule .section { padding: var(--sp-4) 0 var(--sp-4); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.map .field { grid-template-columns: 124px 1fr; margin: 6px 0; }
.map .field > label { font-size: 0.74rem; }

/* ---------- Data view ---------- */
.data-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--sheet); }
.data-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-bottom: var(--bw) solid var(--border); font-size: var(--fs--1); color: var(--ink-2); flex-wrap: wrap; }
.data-bar .spacer { flex: 1; }
.data-scroll { overflow: auto; flex: 1; min-height: 0; }

/* ---------- Export copies of the chart ---------- */
.xlegend text { font-size: 11px; fill: var(--ink); font-family: var(--font-body); }
.xtitle rect { fill: var(--sheet); stroke: var(--ink); }
.xtitle text { font-size: 10.5px; fill: var(--ink); font-family: var(--font-body); }
.xtitle .k { fill: var(--ink-2); font-size: 9.5px; letter-spacing: 0.02em; text-transform: uppercase; }
.xtitle .h { font-size: 13px; font-weight: 600; }
.xtitle .s { fill: var(--ink-3); font-size: 8.5px; letter-spacing: 0.03em; text-transform: uppercase; }
.xtitle line { stroke: var(--ink); }
.print-area { display: none; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  body { overflow: auto; }
  .toolbar { flex-wrap: wrap; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .toolbar .brand { border-right: 0; padding-right: 0; width: 100%; }
  .toolbar .group + .group { border-left: 0; padding-left: 0; }
  .search { max-width: none; flex: 1; }
  main { grid-template-columns: 1fr; grid-template-rows: 62vh auto; height: auto; }
  aside.schedule { border-left: 0; border-top: var(--bw) solid var(--border-strong); }
  .titleblock { min-width: 200px; font-size: 0.7rem; right: var(--sp-3); bottom: var(--sp-3); }
  .notice { left: 70px; }
}

/* ---------- Print: only the prepared sheet, light colours ---------- */
@page a4l { size: A4 landscape; margin: 10mm } @page a4p { size: A4 portrait; margin: 10mm }
@page a3l { size: A3 landscape; margin: 10mm } @page a3p { size: A3 portrait; margin: 10mm }
@page a2l { size: A2 landscape; margin: 10mm } @page a2p { size: A2 portrait; margin: 10mm }
@page a1l { size: A1 landscape; margin: 10mm } @page a1p { size: A1 portrait; margin: 10mm }
@page a0l { size: A0 landscape; margin: 10mm } @page a0p { size: A0 portrait; margin: 10mm }
html.print-a4l .print-area { page: a4l } html.print-a4p .print-area { page: a4p }
html.print-a3l .print-area { page: a3l } html.print-a3p .print-area { page: a3p }
html.print-a2l .print-area { page: a2l } html.print-a2p .print-area { page: a2p }
html.print-a1l .print-area { page: a1l } html.print-a1p .print-area { page: a1p }
html.print-a0l .print-area { page: a0l } html.print-a0p .print-area { page: a0p }
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: #FFFFFF; --sheet: #FFFFFF; --panel: #FFFFFF; --ink: #1C1B19; --ink-2: #5A564E; --ink-3: #8A8478; --border: #D5D0C5; --grid: #E8E4DC; --grid-strong: #D1CCC1; --accent: #B6412B; }
  html, body { height: auto; overflow: visible; background: #FFFFFF; }
  body { display: block; }
  html.printing .toolbar, html.printing main, html.printing dialog, html.printing .tip { display: none !important; }
  html.printing .print-area { display: block; width: 100%; }
  html.printing .print-area svg { display: block; width: 100%; height: auto; page-break-inside: avoid; }
}

.noscript{padding:16px}