/* Warm, quiet, print-like: ivory ground, one coral accent, soft cards, no hard rules or grey
   chrome. Structure and ids are unchanged; this file only carries the look. */
:root {
  --ink:#141413; --muted:#615f59; --faint:#918d84;
  --page:#f7f5ef; --card:#fffefb; --sunk:#f1eee5; --line:#e6e1d6; --accent:#c96442; --accent-soft:#f5e7e0;
  --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --bar:58px; --dock:212px; --radius:14px; --shadow:0 1px 2px rgba(20,18,14,.04), 0 8px 24px -14px rgba(20,18,14,.18);
}
* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--page); color:var(--ink); font-family:var(--sans); font-size:13px;
  line-height:1.5; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
.shell { display:grid; grid-template-rows:var(--bar) minmax(0,1fr) var(--dock); gap:12px;
  height:100vh; padding:12px 16px 16px; }

/* Header: one line of controls, no boxed toolbar. */
.bar { display:flex; align-items:center; gap:16px; padding:0 4px; overflow:hidden; }
.brand { font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }
.group { display:flex; align-items:center; gap:7px; }
.group label { font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:0.07em; }
select { font:inherit; font-size:12.5px; color:var(--ink); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:6px 30px 6px 13px; max-width:min(44vw,380px); cursor:pointer;
  box-shadow:var(--shadow); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
select:hover { border-color:#d7cfbe; }
select:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bar button { font:inherit; font-size:13px; line-height:1; color:var(--muted); background:var(--card);
  border:1px solid var(--line); border-radius:999px; width:30px; height:30px; cursor:pointer;
  box-shadow:var(--shadow); transition:color .15s ease, border-color .15s ease, transform .15s ease; }
.bar button:hover { color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.keys { margin-left:auto; font-size:11px; color:var(--faint); white-space:nowrap; }
.legend { display:flex; flex-wrap:wrap; gap:3px 12px; font-size:11.5px; color:var(--muted);
  max-height:var(--bar); overflow:hidden; }
.legend span { display:inline-flex; align-items:center; gap:5px; }
.legend i { width:8px; height:8px; border-radius:999px; display:inline-block; }
.legend-note { color:var(--faint); }

/* The viewer is the page. */
#plot { min-height:0; width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }

/* Sidebar dock: four quiet cards, no dividers. */
.dock { display:grid; grid-template-columns:1.05fr 1fr 1.35fr 1fr; gap:12px; min-height:0; }
.cell { min-width:0; padding:12px 14px; overflow-y:auto; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); scrollbar-width:thin; }
.cell::-webkit-scrollbar { width:7px; }
.cell::-webkit-scrollbar-thumb { background:var(--sunk); border-radius:999px; }
.cell h2 { font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:-0.01em; margin:0 0 3px; }
.cell h3 { font-size:9.5px; text-transform:uppercase; letter-spacing:0.09em; color:var(--faint);
  margin:0 0 5px; font-weight:600; }
.cell h3 + h3, .cell dl + h3 { margin-top:12px; }
.status { margin:0 0 8px; color:var(--muted); }
dl { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; margin:0; }
dt { color:var(--faint); white-space:nowrap; } dd { margin:0; }
ul.lobes { list-style:none; padding:0; margin:4px 0 0; }
ul.lobes li { margin:0 0 8px; padding:0 0 0 10px; border-left:2px solid var(--accent-soft); }
.small { font-size:11.5px; color:var(--muted); }
.foot { font-size:10.5px; color:var(--faint); margin:8px 0 0; }
a { color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent-soft); }
a:hover { border-bottom-color:var(--accent); }
.error { color:#a4462f; margin:4px 0 0; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.extras { display:grid; grid-template-columns:1.6fr 1fr; gap:0; border-top:1px solid var(--rule); }
.extras .block { padding:12px 14px; border-right:1px solid var(--rule); }
.extras .block:last-child { border-right:0; }
.extras figure { margin:0; }
.extras dl { grid-template-columns:70px 1fr; gap:5px 10px; }
.extras dd { margin:0; max-width:100ch; }
.extras p { margin:0 0 8px; max-width:100ch; }
#orbit { border:1px solid var(--rule); border-radius:var(--radius); background:#fff; display:block; }

@media (max-width: 1000px) {
  :root { --dock:260px; }
  .dock { grid-template-columns:1fr 1fr; }
  .keys { display:none; }
  .extras { grid-template-columns:1fr; }
  .extras .block { border-right:0; border-top:1px solid var(--rule); }
}
@media (max-width: 620px) {
  .shell { grid-template-rows:auto minmax(220px,52vh) minmax(0,1fr); height:auto; min-height:100vh; padding:10px; }
  .bar { height:auto; flex-wrap:wrap; row-gap:9px; }
  .dock { grid-template-columns:1fr; }
}