/* The web simulator's look: the exe's (Simulator/PlayerForm.cs) - a white controls column with the readout, the
   timeline, the icon transport, the flags and the details, the 3D view beside it with its bar of view settings.
   One column under 600 px (the view on top). Light only: the stock's baked colours are made for a light ground. */
:root {
  color-scheme: light;
  --panel: #ffffff;
  --bar: #f6f7f9;
  --line: #e2e4e8;
  --border: #d0d2d6;
  --text: #202428;
  --muted: #60646c;
  --accent: #0067c0;
  --accent-soft: #e5f1fb;
  --track: #c8ccd2;
  --card: #fff4b3;
  --red: #fde2de;
  --stockbox: #f4f5f7;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", "Droid Sans Mono", monospace;
  --touch: 36px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--panel); color: var(--text); }
body { font: 14px/1.4 system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow: hidden; }
button, select, input { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

.app { display: grid; grid-template-columns: minmax(360px, 420px) 1fr; grid-template-areas: "column view"; height: 100vh; height: 100dvh; }
.viewpane { grid-area: view; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: 5px solid #dee1e6; }
.column { grid-area: column; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 14px 6px; }

/* ---- the view and its bar */
.viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 10px; background: var(--bar); border-bottom: 1px solid var(--line); }
.seg { display: flex; gap: 6px; }
.vsettings { display: contents; }
.vsettings .note { flex-basis: 100%; font-size: 13px; }
.column .vsettings { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 8px; }
.column .vsettings .grp select { min-width: 0; }
.column #speed { max-width: 230px; }
.grp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.checks { gap: 12px; }
.checks label { display: inline-flex; align-items: center; gap: 4px; }
.hint { color: var(--muted); font-size: 13px; }
.stage { position: relative; flex: 1; min-height: 0; background: linear-gradient(#e2e6ec, #f6f6f6); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legend { position: absolute; left: 8px; top: 8px; background: rgba(255,255,255,0.8); padding: 6px 10px 6px 8px; font-size: 13px; pointer-events: none; max-width: calc(100% - 16px); }
.legend .title { color: #202428; margin-bottom: 2px; pointer-events: auto; cursor: pointer; }
.legend .title::after { content: " \25BE"; color: var(--muted); }
.legend.folded .title::after { content: " \25B8"; }
.legend.folded .entry { display: none; }
.legend.folded .title { margin-bottom: 0; }
.flaglist td.more { color: var(--muted); font-style: italic; }
.legend .entry { display: flex; align-items: center; gap: 8px; color: #30343a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend .sw { width: 26px; height: 11px; flex: none; }
.legend .sw.dashed { height: 0; border-top: 2px dashed currentColor; }
.viewmsg { position: absolute; left: 16px; top: 14px; right: 16px; color: #3c4048; font-size: 15px; pointer-events: none; }
.busy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(246,247,249,0.72); font-size: 15px; color: var(--text); z-index: 2; }
.spinner { width: 22px; height: 22px; border: 3px solid var(--track); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- controls */
button, .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 12px; background: #fbfbfb; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; white-space: nowrap; user-select: none; }
button:hover, .btn:hover { background: var(--accent-soft); }
button:active, .btn:active { background: #cce4f7; }
button:disabled { opacity: 0.45; cursor: default; background: #fbfbfb; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { background: #005aa8; }
select { min-height: var(--touch); padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: #fff; max-width: 100%; }
input:not([type]), input[inputmode] { min-height: var(--touch); width: 64px; padding: 0 6px; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
input.short { width: 58px; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
label { display: inline-flex; align-items: center; gap: 6px; }
.link { color: var(--accent); cursor: pointer; }
.row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.row.wrap { flex-wrap: wrap; row-gap: 6px; }
.gap { flex: 1; }
.head .filename { font-weight: 600; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--muted); }
.ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refusal { background: var(--red); padding: 10px; margin-bottom: 8px; white-space: pre-wrap; }
.card { background: var(--card); color: #000; padding: 8px 10px 10px; margin-bottom: 8px; }
.card .lead { font-weight: 600; margin-bottom: 6px; }
.card .bit { margin: 6px 0 2px; }
.card .row { margin-bottom: 4px; flex-wrap: wrap; }
.card select, .card input { background: #fff; }
.card .row { gap: 6px; }
.card input[inputmode] { width: 54px; }
.card .apply { margin-top: 6px; }
.stockline { margin: 4px 0 8px; }
.stockbox { background: var(--stockbox); padding: 8px 8px 2px; margin-bottom: 8px; }
.stockbox .said { font-size: 13px; }
.when { font-size: 17px; font-weight: 700; margin-top: 2px; min-height: 24px; }
.where { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; min-height: 38px; margin-bottom: 2px; overflow-wrap: anywhere; }
.timeline { display: block; width: 100%; height: 40px; margin: 2px 0 4px; cursor: pointer; }
.transport { display: flex; gap: 4px; margin-bottom: 8px; }
.transport .icon { flex: 1; min-width: 0; padding: 0; height: 44px; }
.transport .icon.play { flex: 1.5; }
.icon svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.icon svg path { stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.icon svg path#playGlyph { stroke: none; }
.icon svg .stroke { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.icon:disabled svg { opacity: 0.6; }
.section { border-top: 1px solid var(--line); padding: 6px 0 4px; }
.section > summary { cursor: pointer; min-height: var(--touch); display: flex; align-items: center; gap: 8px; list-style: none; user-select: none; }
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before { content: "\25B8"; color: var(--muted); width: 12px; }
.section[open] > summary::before { content: "\25BE"; }
.sumtitle { font-weight: 600; }
.count { color: var(--text); font-weight: 600; }
.flagopts { margin: 2px 0 6px; }
.flaglist { border: 1px solid var(--border); max-height: 240px; min-height: 60px; overflow: auto; }
.flaglist table { width: 100%; border-collapse: collapse; font-size: 13px; }
.flaglist th { position: sticky; top: 0; background: #fafafa; text-align: left; padding: 4px 6px; font-weight: 600; }
.flaglist td { padding: 6px; vertical-align: top; border-top: 1px solid #f0f1f3; }
.flaglist td:first-child { white-space: nowrap; }
.flaglist tr.row-flag { cursor: pointer; }
.flaglist tr.row-flag:hover { background: var(--accent-soft); }
.flaglist tr.sel { background: #cce4f7; }
.graze { display: block; margin: 6px 0 2px; }
pre.said { white-space: pre-wrap; font: 12.5px/1.45 var(--mono); background: #fafafa; border: 1px solid var(--line); padding: 8px; margin: 4px 0 6px; max-height: 260px; overflow: auto; }
.footer { border-top: 1px solid var(--line); padding: 6px 14px 10px; background: var(--panel); }
.status { min-height: 20px; margin-bottom: 6px; overflow-wrap: anywhere; }

dialog { max-width: min(520px, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; }
dialog h2 { font-size: 18px; margin: 0 0 8px; }
dialog p { margin: 0 0 10px; }

/* ---- a phone: one column, the view on top, the controls under it (spec 12) */
@media (max-width: 600px) {
  :root { --touch: 44px; }
  body { overflow: hidden; }
  .app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  .viewpane { flex: none; height: 46vh; height: 46dvh; min-height: 250px; border-left: none; border-bottom: 1px solid var(--line); }
  .column { flex: 1; min-height: 0; }
  .scroll { padding: 8px 16px 4px; }
  .viewbar { gap: 6px 10px; padding: 6px 8px; }
  .viewbar .seg button { padding: 0 10px; }
  .hint { flex-basis: 100%; font-size: 13px; }
  .footer { padding: 6px 16px 10px; }
  .footer .row { flex-wrap: wrap; }
  .flaglist { max-height: 200px; }
  .legend { font-size: 11px; line-height: 1.3; padding: 4px 8px 4px 6px; left: 6px; top: 6px; background: rgba(255,255,255,0.72); }
  .legend .sw { width: 18px; height: 8px; }
  .footer { padding: 6px 16px 8px; }
  .footer .status { margin-bottom: 0; }
  #stlSlot .row { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
  input:not([type]), input[inputmode] { width: 70px; }
}

/* ---- any touch screen (also a phone held sideways, or a tablet): 44 px targets for every control, links and
   check boxes included (the review measured About / Library... / Change... / Stock / Path / Tool / Stop at flags
   at 20-36 px) */
@media (pointer: coarse) {
  :root { --touch: 44px; }
  .head a, .row > .link, .stockline a, a.graze { display: inline-flex; align-items: center; min-height: 44px; }
  .checks label, .flagopts label, label:has(> input[type=checkbox]) { min-height: 44px; }
  input[type=checkbox] { width: 22px; height: 22px; }
  .seg button { min-width: 44px; }
  .section > summary { min-height: 44px; }
}

/* ---- a phone held sideways (844 x 390): the view and the panel side by side, the view's bar only Fit / Top / Iso /
   Under (its settings are in the panel), the legend folded */
@media (pointer: coarse) and (min-width: 601px) and (max-height: 500px) {
  .app { grid-template-columns: minmax(300px, 44%) 1fr; }
  .scroll { padding: 6px 12px 4px; }
  .viewbar { padding: 4px 6px; }
  .hint { flex-basis: 100%; font-size: 13px; }
  .footer { padding: 4px 12px 6px; }
  .footer .status { margin-bottom: 0; }
  #stlSlot .row { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
  .legend { font-size: 11px; line-height: 1.3; padding: 4px 8px 4px 6px; left: 6px; top: 6px; }
}