:root {
  --accent: #007aff;
  --ink: #000;
  --text: #1c1c1e;
  --secondary: #6e6e73;
  --line: #d1d1d6;
  --panel: #f2f2f7;
  --surface: #fff;
  --warning: #f25400;
  --danger: #d70015;
  color-scheme: light;
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--surface); overflow: hidden; }
body { height: 100dvh; display: flex; flex-direction: column; }
button { touch-action: manipulation; }
button {
  font: inherit; color: var(--accent); background: transparent; border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap;
}
button:hover:not(:disabled) { background: #f5f5f7; }
button:disabled { color: #b0b0b5; cursor: default; }
button.prominent { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
button.prominent:hover:not(:disabled) { background: #0066d6; }
button.prominent:disabled { background: #b0c9ef; color: #fff; }
button.icon { border: 0; padding: 4px 6px; display: inline-flex; }
button.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
input, select, textarea { font: inherit; color: var(--text); }

.topbar {
  flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
/* The ARC IT UP mark: the launch animation's three arcs over the name (John, 2026-11-10). */
.mark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; flex: none; color: var(--text); }
.mark svg { width: 46px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.mark span { font-weight: 600; letter-spacing: 2.4px; font-size: 9px; white-space: nowrap; margin-right: -2.4px; }
.title {
  font-weight: 600; font-size: 17px; border: 1px solid transparent; border-radius: 6px; padding: 4px 8px;
  min-width: 120px; width: 32ch; max-width: 40vw; background: transparent; text-overflow: ellipsis;
}
.title:hover { border-color: var(--line); }
.title:focus { border-color: var(--accent); outline: none; }
.spacer { flex: 1; }
.group { display: flex; gap: 2px; }

.body { display: flex; flex: 1; min-height: 0; position: relative; }
.setup {
  width: 280px; flex: none; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line);
  padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 14px;
}
.setup > button.prominent { border-radius: 999px; padding: 9px; font-size: 16px; }
.setup section { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.setup h3 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--secondary); }
.segmented { display: flex; background: #e3e3e8; border-radius: 8px; padding: 2px; }
.segmented button { flex: 1; border: 0; color: var(--text); padding: 4px 6px; border-radius: 6px; }
.segmented button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.15); font-weight: 600; }
.switch, .pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 42px; height: 25px; border-radius: 999px; background: #e3e3e8; position: relative; flex: none; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.switch input:checked { background: #34c759; }
.switch input:checked::after { left: 19px; }
.switch input:disabled { opacity: .5; }
.choices { display: flex; flex-direction: column; gap: 4px; }
.choices label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.choices input { accent-color: var(--accent); margin: 0; }
.note { margin: 0; font-size: 13px; color: var(--secondary); }
.sub { display: flex; flex-direction: column; gap: 8px; }
.notes { display: flex; flex-direction: column; gap: 4px; }
.notes textarea { resize: vertical; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--surface); max-width: 160px; }

.stage { flex: 1; position: relative; overflow: hidden; background: var(--surface); }
#chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; }
#chart .hit { cursor: pointer; }
.hint { position: absolute; transform: translate(-50%, -50%); color: #737373; font-size: 15px; pointer-events: none; text-align: center; }
.warning {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: var(--surface);
  border: 1px solid rgba(242, 84, 0, .6); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500;
  pointer-events: none; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.warning::before { content: "⚠ "; color: var(--warning); }
.loading { position: absolute; inset: 0; display: flex; flex-wrap: wrap; gap: 10px; padding: 24px; text-align: center; align-items: center; justify-content: center; color: var(--secondary); background: var(--surface); }

.rowcontrol {
  position: absolute; display: flex; align-items: center; gap: 2px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
  white-space: nowrap;
}
.rowcontrol .name { font-weight: 600; font-size: 14px; margin-right: 6px; }
.rowcontrol button { border: 0; padding: 0; width: 32px; height: 32px; font-size: 20px; line-height: 1; }
.rowcontrol .count { width: auto; min-width: 32px; padding: 0 4px; font-size: 16px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.rowcontrol input { width: 46px; text-align: center; font-weight: 600; font-size: 16px; border: 0; background: rgba(0,122,255,.12); border-radius: 6px; padding: 4px 0; outline: none; }

.addrow {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); z-index: 20;
}
.addrow form { display: flex; align-items: center; gap: 10px; }
.addrow input { width: 90px; font-size: 22px; text-align: center; border: 1px solid var(--line); border-radius: 8px; padding: 3px; font-variant-numeric: tabular-nums; }
.addrow .note { margin-top: 8px; }

.menu {
  position: fixed; z-index: 30; min-width: 220px; background: rgba(250,250,250,.98); border: 1px solid var(--line);
  border-radius: 10px; padding: 5px 0; box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.menu button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; color: var(--text); padding: 6px 14px; }
.menu button:hover:not(:disabled) { background: var(--accent); color: #fff; }
.menu button:disabled { color: #b0b0b5; }
.menu button.danger { color: var(--danger); }
.menu button.danger:hover { color: #fff; background: var(--danger); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

dialog { border: 0; border-radius: 14px; padding: 18px 20px; max-width: 380px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(0,0,0,.25); }
.dtitle { font-weight: 600; margin: 0 0 6px; }
#dialogText { margin: 0 0 14px; color: var(--secondary); }
.dbuttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dbuttons .danger { color: var(--danger); }

/* ---- Step 2: menus, selection, the instrument strip -------------------------------------- */
.setup > button.quick { border-radius: 999px; padding: 8px; font-size: 15px; font-weight: 600; background: var(--surface); }
.setup > button.quick:disabled { color: var(--secondary); }

/* Full width, its bars centered: placed from the middle, it could use only half the width,
   so on a phone the Quick Assign bar wrapped into a tall column (John, 2026-11-10). */
.bars { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.bars > * { max-width: 100%; }
.bars > * { pointer-events: auto; }
.bars .warning { position: static; transform: none; pointer-events: none; }
.bar {
  display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--panel); border-radius: 22px;
  padding: 8px 10px 8px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.bar .top { display: flex; align-items: center; gap: 12px; }
.bar .icon { color: var(--accent); font-size: 18px; }
.bar .words { display: flex; flex-direction: column; }
.bar .words strong { font-size: 14px; }
.bar .words span { font-size: 12px; color: var(--secondary); }
.bar .done { border-radius: 999px; }
.bar .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bar .actions button { border-radius: 999px; font-size: 13px; font-weight: 600; padding: 4px 10px; background: var(--surface); }

.shiftpanel { background: var(--panel); border-radius: 16px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 10px; }
.shiftrow { display: flex; align-items: center; gap: 10px; justify-content: center; }
.shiftpanel .segmented { width: 190px; }
.seats { min-width: 60px; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.stepper button { border: 0; border-radius: 0; padding: 3px 12px; font-size: 18px; line-height: 1.1; }
.stepper button + button { border-left: 1px solid var(--line); }

.menu .header { padding: 4px 14px 6px; font-size: 12px; color: var(--secondary); font-weight: 600; }
.menu button { display: flex; justify-content: space-between; gap: 16px; }
.menu button .check { width: 18px; display: inline-block; }
.menu button:focus-visible { outline: none; background: var(--accent); color: #fff; }
.menu button.danger:focus-visible { background: var(--danger); }
.menu button:focus-visible .more { color: #fff; }
.menu button .more { color: var(--secondary); }
.menu button:hover:not(:disabled) .more { color: #fff; }
.menu button.open { background: #e5e5ea; }

.popover { position: absolute; z-index: 15; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.2); }
.labelbox { display: flex; gap: 8px; align-items: center; }
.labelbox input { width: 250px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.colorbox { width: 340px; display: flex; flex-direction: column; gap: 12px; }
.colorbox h4 { margin: 0; font-size: 16px; }
.swatches { display: grid; grid-template-columns: repeat(7, 36px); gap: 8px; justify-content: space-between; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); padding: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.swatch:hover { filter: brightness(.95); }
.colorbox .nocolor { align-self: flex-start; }

.strip {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(640px, calc(100% - 32px));
  background: var(--panel); border-radius: 16px; padding: 12px; box-shadow: 0 -2px 16px rgba(0,0,0,.15);
  display: flex; flex-direction: column; gap: 8px; z-index: 10;
}
.strip .head { display: flex; justify-content: space-between; align-items: center; }
.strip .head span { font-size: 14px; font-weight: 600; color: var(--secondary); }
.strip .head button { border: 0; font-weight: 600; padding: 2px 4px; }
.strip .labelsnote { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--secondary); }
.strip .labelsnote button { border: 0; font-weight: 600; font-size: 13px; padding: 0; }
.strip .field { display: flex; gap: 8px; align-items: center; }
.strip .striptop, .strip .stripbottom { display: contents; }
.strip .field .round { width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(120,120,128,.15); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.strip .field .round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.strip .field .skip { border: 0; border-radius: 999px; background: rgba(120,120,128,.15); font-weight: 600; height: 34px; }
.strip .field input { flex: 1; min-width: 0; border: 0; background: rgba(120,120,128,.12); border-radius: 10px; padding: 9px 12px; font-size: 16px; outline: none; }
.strip .field input:focus { box-shadow: 0 0 0 2px rgba(0,122,255,.4); }
.chips { display: flex; gap: 6px; overflow-x: auto; align-items: center; min-height: 36px; padding-bottom: 2px; scrollbar-width: thin; }
.chips .section { font-size: 12px; font-weight: 600; color: var(--secondary); padding: 0 2px 0 6px; white-space: nowrap; }
.chips .hintline { font-size: 13px; color: var(--secondary); }
.chip { border: 0; border-radius: 999px; background: rgba(120,120,128,.15); color: var(--text); padding: 7px 12px; font-size: 14px; flex: none; }
.chip.marked { background: var(--accent); color: #fff; font-weight: 600; }
.chip.marked:hover { background: #0066d6 !important; }
.picked { display: flex; flex-direction: column; gap: 8px; }
.picked .name { display: flex; align-items: center; gap: 8px; }
.picked .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(120,120,128,.4); flex: none; }
.picked .name strong { font-size: 16px; }
.picked .name .parthint { font-size: 12px; color: var(--secondary); flex: 1; }
.picked .name button { border: 0; color: var(--secondary); font-size: 18px; padding: 0 4px; }
.parts { display: flex; gap: 5px; }
.parts button { flex: 1; border: 0; border-radius: 9px; background: rgba(120,120,128,.15); color: var(--text); font-weight: 600; min-height: 36px; font-variant-numeric: tabular-nums; }
.parts button.on { background: var(--accent); color: #fff; }
.strip .segmented button { font-size: 13px; }

dialog.bulk { width: min(460px, calc(100% - 32px)); max-width: none; display: none; flex-direction: column; gap: 8px; }
dialog.bulk[open] { display: flex; }
.bulkbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bulk textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: #f2f2f7; resize: vertical; font-size: 15px; }
.bulk textarea:focus, .labelbox input:focus { outline: 2px solid rgba(0,122,255,.4); outline-offset: 0; }

/* ---- Step 3: files and printing -------------------------------------------------------- */
.pronote { margin: 0; font-size: 13px; color: var(--secondary); background: var(--surface); border-radius: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); }
.printscreen { position: fixed; inset: 0; z-index: 40; background: #f2f2f7; display: flex; flex-direction: column; }
.printbar { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.printbar strong { font-size: 17px; }
.printbody { flex: 1; display: flex; min-height: 0; }
.printform { width: 300px; flex: none; padding: 16px 14px; overflow-y: auto; border-right: 1px solid var(--line); }
.printform section { background: var(--surface); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.printform h3 { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--secondary); }
.layer { display: flex; justify-content: space-between; }
.layer span { color: var(--secondary); }
.printpreview { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; min-width: 0; }
.printpreview svg { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.25); }
.printout { position: fixed; left: -20000px; top: 0; width: 792px; height: 612px; }
.folderlist { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; max-height: 50vh; overflow-y: auto; }
.folderlist button { text-align: left; display: flex; justify-content: space-between; gap: 16px; color: var(--text); }
.folderlist button span { color: var(--secondary); }
.drophint { position: fixed; inset: 12px; z-index: 50; border: 3px dashed var(--accent); border-radius: 18px; background: rgba(0,122,255,.08); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; color: var(--accent); pointer-events: none; }

/* Printing: Letter, landscape, always one sheet. The page fills the printable area and the
   drawing keeps its shape inside it, so paper turned the other way still gets the whole chart
   on one sheet. (Chrome reported portrait while printing landscape, so an earlier quarter-turn
   for portrait paper pushed the chart onto two sheets, John, 2026-11-10.) */
@page { size: 11in 8.5in; margin: 0; }
@media print {
  html, body { height: 100vh; overflow: hidden; background: #fff; }
  body > *:not(.printout) { display: none !important; }
  .printout { position: static; width: 100vw; height: 100vh; overflow: hidden; break-inside: avoid; }
  .printout svg { width: 100%; height: 100%; display: block; }
}

/* ---- Step 4: phones (laid out like the iPhone app) and touch ----------------------------- */
.more, .sheethead, .chartbuttons { display: none; }
body.compact .topbar { height: auto; flex-wrap: wrap; padding: 8px 10px; row-gap: 6px; column-gap: 6px; }
body.compact #newChart, body.compact #openFile { display: none; }
body.compact .mark svg { width: 34px; height: 17px; }
body.compact .mark span { font-size: 7px; letter-spacing: 1.6px; margin-right: -1.6px; }
body.compact .topbar button { padding: 5px 9px; font-size: 14px; }
body.compact .topbar .more { display: inline-block; }
body.compact .title { order: 10; flex: 1 1 100%; width: auto; max-width: none; text-align: center; }
body.compact .setup {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 48%; min-height: 220px; z-index: 25;
  border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -3px 16px rgba(0,0,0,.15); padding-top: 0;
  transform: translateY(105%); transition: transform .3s ease; visibility: hidden;
}
body.compact.sheet .setup { transform: none; visibility: visible; }
body.compact .sheethead { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1;
  background: var(--panel); padding: 10px 2px 6px; margin: 0 -2px; }
body.compact .sheethead button { border-radius: 999px; }
body.compact .setup > #addRow, body.compact .setup > #quickAssign { display: none; }
body.compact .chartbuttons { display: flex; position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  flex-direction: column; align-items: center; gap: 12px; z-index: 5; }
body.compact.sideways .chartbuttons { left: auto; right: 16px; bottom: auto; top: 50%; transform: translateY(-50%); align-items: flex-end; }
body.compact.sideways .chartbuttons .pair { flex-direction: column; align-items: flex-end; }
body.compact.sheet .chartbuttons, body.compact.assigning .chartbuttons { display: none; }
.chartbuttons .pair { display: flex; gap: 12px; }
.chartbuttons button { border-radius: 999px; padding: 9px 16px; font-size: 16px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.chartbuttons button.quick { background: #fff; }
body.compact .labelbox { flex-wrap: wrap; width: min(340px, calc(100% - 16px)); }
body.compact .labelbox input { flex: 1 1 100%; width: auto; }
body.compact .colorbox { width: min(340px, calc(100% - 16px)); }
body.compact .swatches { grid-template-columns: repeat(7, 1fr); }
body.compact .swatch { width: 100%; height: auto; aspect-ratio: 1; }
body.compact .strip { bottom: var(--kb, 0px); width: 100%; border-radius: 16px 16px 0 0; }
body.compact .printbody { flex-direction: column; }
body.compact .printform { width: auto; order: 2; max-height: 45%; border-right: 0; border-top: 1px solid var(--line); }
body.compact .printpreview { order: 1; padding: 12px; }
body.compact .printbar button { padding: 5px 9px; font-size: 14px; }
body.compact .bar { padding: 6px 8px 6px 12px; }
body.compact .menu { min-width: 0; max-width: calc(100vw - 16px); }
.topbar .ico { display: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
body.compact .topbar .ico { display: inline-block; }
body.compact .topbar .txt { display: none; }
body.compact .topbar #print, body.compact .topbar #download { padding: 4px 8px; }
body.compact.sideways .title { order: 0; flex: 1 1 auto; text-align: left; }
body.compact.sideways .topbar .spacer { display: none; }
/* Tablets held upright and other middling widths: Print and Download as icons too. */
body.narrow .topbar .ico { display: inline-block; }
body.narrow .topbar .txt { display: none; }
body.narrow .title { width: 20ch; }
/* Phones: the mark, Undo and Redo, Print, Download, Get the App and ··· on one line. */
body.compact .topbar { column-gap: 4px; padding: 8px 8px; }
body.compact .topbar .group button { padding: 4px 3px; }
body.compact .topbar #print, body.compact .topbar #download { padding: 4px 6px; }
body.compact .topbar #more { padding: 5px 8px; }

/* ---- Keyboard shortcuts: hints on buttons and the legend (John, 2026-11-10) ------------- */
.key, .keysbutton { display: none; }
body.keys .key {
  display: inline-block; margin-left: 6px; padding: 0 4px; min-width: 16px; border: 1px solid currentColor; border-radius: 4px;
  font: 600 10px/14px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-transform: uppercase; opacity: .6;
  vertical-align: 1px; letter-spacing: 0; text-align: center;
}
.setup h3 .key { vertical-align: 0; }
body.keys .keysbutton {
  display: inline-flex; position: absolute; top: 10px; right: 12px; z-index: 6; width: 36px; height: 36px; padding: 0;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.keysbutton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.keysbox { top: 54px; right: 12px; width: 320px; max-height: calc(100% - 70px); overflow-y: auto; }
.keysbox h4 { margin: 0 0 8px; font-size: 15px; }
.keysbox h5 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--secondary); }
.keysbox table { border-collapse: collapse; width: 100%; font-size: 13px; }
.keysbox td { padding: 3px 0; vertical-align: top; }
.keysbox td:first-child { width: 118px; padding-right: 8px; }
.keysbox kbd { display: inline-block; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 600 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #fafafa; }

/* ---- Zoom and pan (John, 2026-11-10) ------------------------------------------------------ */
.recenter {
  position: absolute; top: 10px; right: 12px; z-index: 6; height: 36px; padding: 0 14px; border: 0; border-radius: 18px;
  background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.recenter[hidden] { display: none; }
body.keys .recenter { right: 56px; }

/* ---- Chart Info's facts (John, 2026-11-10) ------------------------------------------------ */
.factshead { margin-top: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--secondary); }
.facts { display: flex; flex-direction: column; font-size: 14px; }
.facts .fact, .facts summary { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.facts .fact span:last-child, .facts summary span:last-child { color: var(--secondary); text-align: right; }
.facts summary { cursor: pointer; list-style: none; }
.facts summary::-webkit-details-marker { display: none; }
.facts summary span:first-child::after { content: " ›"; color: var(--secondary); }
.facts details[open] summary span:first-child::after { content: " ⌄"; }
.facts .fact.sub { padding-left: 14px; font-size: 13px; }

/* ---- ⓘ buttons and their bubble (John, 2026-11-10) ---------------------------------------- */
button.info {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; margin-left: 6px;
  border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); background: transparent;
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0; vertical-align: -3px;
}
button.info:hover:not(:disabled) { background: rgba(0,122,255,.08); }
.infobubble {
  position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 16px); padding: 12px 14px; border-radius: 12px;
  background: var(--surface); box-shadow: 0 4px 20px rgba(0,0,0,.22); font-size: 14px; line-height: 1.4; white-space: pre-line;
}

/* ---- Tutorial (John, 2026-11-10) ---------------------------------------------------------- */
.tour { position: fixed; inset: 0; z-index: 70; }
.tourspot { position: fixed; border: 2px solid #fff; border-radius: 12px; pointer-events: none; }
.tourdim { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tourdim path { fill: rgba(0,0,0,.45); }
.tourbubble { position: fixed; background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.3);
  transition: left .25s ease, top .25s ease; }
.tourbubble h4 { margin: 0 0 6px; font-size: 17px; }
.tourbubble p { margin: 0; font-size: 14px; line-height: 1.4; }
.tourbar { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--secondary); }
.tourbar button { border-radius: 999px; padding: 6px 16px; }
.tourbar .tourskip { border: 0; }
.tourlink { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--accent); text-decoration: none; }
.tourlink:hover { text-decoration: underline; }
.tourbubble[data-arrow]:not([data-arrow=""])::before { content: ""; position: absolute; width: 14px; height: 14px; background: var(--surface); transform: rotate(45deg); }
.tourbubble[data-arrow="up"]::before { top: -7px; left: calc(var(--arrow-x) - 7px); }
.tourbubble[data-arrow="down"]::before { bottom: -7px; left: calc(var(--arrow-x) - 7px); }
.tourbubble[data-arrow="left"]::before { left: -7px; top: 24px; }
.tourbubble[data-arrow="right"]::before { right: -7px; top: 24px; }
button.tutorialbutton { margin-top: 10px; align-self: flex-start; }