/* Phones and narrow tablets: the model fills the screen between a
   compact top bar (projects, export, guide, build; the view modes as
   one clustered card, as on a wide screen) and a bottom sheet with three tabs — History (step cards,
   the step on screen, playback), Code (the script) and Model (the
   inspector). The sheet's grabber makes it taller or shorter. */
@media (max-width: 60rem) {
  :root { --gap: 8px; --sheet-h: auto; }
  body[data-sheet="code"], body[data-sheet="model"] { --sheet-h: 50dvh; }
  body.sheet-tall { --sheet-h: 76dvh; }

  /* Top bar: one row of actions, then the view modes' card. */
  .topbar { display: flex; flex-wrap: wrap; padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) 0.4rem max(var(--gap), env(safe-area-inset-left)); gap: 0.4rem var(--gap); }
  .bar-document { flex: 1; order: 1; }
  .bar-build { order: 2; }
  .bar-view { order: 3; flex: 1 0 100%; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .bar-view::-webkit-scrollbar { display: none; }
  /* The modes centre in their card while they fit and scroll from the
     start when they do not (auto margins, unlike justify-content, never
     push the first mode out of reach). */
  .bar-view > .segment:first-child { margin-left: auto; }
  .bar-view > .segment:last-child { margin-right: auto; }
  .brand { padding: 0 0.15rem 0 0.35rem; }
  .brand-name { display: none; }
  .project-button { flex: 1; min-width: 0; max-width: none; justify-content: flex-start; background: transparent; border-color: transparent; padding-left: 0.4rem; }
  .project-label { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
  .project-kicker { font-size: 0.72rem; font-weight: 400; color: var(--muted); }
  .project-kicker::after { content: none; }
  .project-name { font-size: 0.85rem; color: var(--text); max-width: 100%; }
  #project-where { display: none !important; }
  #export-menu-button { width: 2.5rem; padding: 0; border-color: var(--line-strong); }
  #export-menu-button .chevron { display: none; }
  .bar-text { display: none; }
  .guide-link .bar-text { display: inline; }
  .segment + .segment { padding-left: 0.35rem; }
  .segment-label { display: none; }
  .mode { flex: none; min-height: 2.25rem; padding: 0.2rem 0.5rem; }
  /* Stop replaces the build controls while a build runs. */
  #cancel { display: none; }
  body.busy #cancel { display: inline-flex; }
  body.busy #run { display: none; }

  /* The workbench: model, sheet tabs, sheet. */
  .workbench {
    grid-template-columns: minmax(0, 1fr);
    /* The model keeps at least 12rem: a tall sheet takes what is left
       (it hid the model and the grabber under the model's overlays). */
    grid-template-rows: minmax(12rem, 1fr) auto minmax(0, var(--sheet-h));
    grid-template-areas: "viewer" "tabs" "sheet";
    gap: 0;
    padding: 0;
  }
  body.editor-collapsed .workbench { grid-template-columns: minmax(0, 1fr); }
  .editor-rail, #editor-collapse, .splitter { display: none !important; }
  /* The corner tools are icons on a phone (the status chip shares the row). */
  .tool-label { display: none; }
  .float-button:has(.tool-label) { width: var(--tool); padding: 0; }
  .pane-editor, .pane-side, .dock { grid-area: sheet; display: none; border-radius: 0; border-width: 0; box-shadow: none; padding-bottom: env(safe-area-inset-bottom); }
  body[data-sheet="history"] .dock { display: flex; }
  /* A dragged sheet height: the History sheet scrolls what does not fit. */
  body.sheet-sized .dock { overflow-y: auto; }
  body.sheet-sized[data-sheet="history"] .workbench { grid-template-rows: minmax(12rem, 1fr) auto var(--sheet-h); }
  body[data-sheet="code"] .pane-editor { display: flex; }
  body[data-sheet="model"] .pane-side { display: flex; }
  body.editor-collapsed .pane-editor { display: none; }
  body.editor-collapsed[data-sheet="code"] .pane-editor { display: flex; }
  .pane-viewer { margin: 0 var(--gap) var(--gap); overflow: hidden; }
  body.sheet-tall .view-orient, body.sheet-tall .pick { display: none; }
  /* The standard views stay a small card on a phone's model view. */
  .view-orient { padding: 2px; }
  .view-orient button { min-width: 2.2rem; padding: 0 0.25rem; font-size: 0.64rem; }
  .pane-viewer canvas { border-radius: 0; }
  .sheet-tabs { grid-area: tabs; display: flex; flex-direction: column; position: relative; z-index: 7; padding: 0.55rem 0.75rem 0.35rem; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px var(--shadow); }
  .sheet-grabber { align-self: center; width: 2.5rem; height: 0.25rem; border-radius: 999px; background: var(--line-strong); margin-bottom: 0.5rem; pointer-events: none; }
  /* The grabber's strip: tap for taller or shorter, drag to any height
     (panel-resize.js). */
  .sheet-size { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1.3rem; min-height: 0; padding: 0; background: transparent; border: 0; cursor: row-resize; touch-action: none; }
  .sheet-size:hover { background: transparent; }
  .sheet-tabs .tabs { padding: 0.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
  .sheet-tabs .tab { flex: 1 1 0; min-height: 2.4rem; }
  .pane-editor, .pane-side, .dock { background: var(--card); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .pane-side > .tabs { margin: 0 0.6rem; border: 0; padding: 0.35rem 0 0.25rem; }

  /* Status: a chip over the top of the model, clear of the corner's
     tool row (three tools, two gaps, the corner inset, its own inset). */
  .dock-status { grid-area: viewer; justify-self: start; align-self: start; max-width: calc(100% - 3 * var(--tool) - 0.7rem - 0.4rem - 2 * var(--gap) - 0.8rem); height: auto; margin: 0.45rem 0 0 calc(var(--gap) + 0.4rem); padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); }
  #privacy-note { display: none; }
  .pick { left: 0.45rem; bottom: 0.45rem; font-size: 0.72rem; }
  /* Films on a phone: the History sheet lists them (the rail is on
     the Code sheet); the stage's bar keeps play, time and timeline. */
  .film-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
  .film-list-label { color: var(--muted); font-size: 0.85em; margin-right: 0.2rem; }
  .film-list-item { min-height: 2.4rem; padding: 0 0.9rem; border-color: var(--accent-line); color: var(--accent); font-family: var(--mono); }
  .film-list-item.open { background: var(--accent-soft); }
  :root { --film-strip: 3.4rem; }
  .film-step { display: none; }
  /* The stage says what it waits on; the status chip would sit under
     the film's caption. */
  body.film-stage .dock-status { display: none; }
  /* Close is a round ✕ on a phone: the frame spans the width there and
     a caption's title runs under the corner. */
  .film-exit { width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; justify-content: center; }
  .film-exit span { display: none; }
  .film-exit .icon { width: 1rem; height: 1rem; }
  .film-bar { gap: 0.55rem; padding: 0 0.5rem; }
  .film-play { width: 2.5rem; height: 2.5rem; }
  .overlay { left: 0.45rem; right: 0.45rem; bottom: 1.9rem; max-height: 60%; }

  /* History: cards, the step on screen, then playback. */
  .dock { flex-direction: column; align-items: stretch; gap: 0.6rem; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom)); }
  .dock-title { display: none; }
  body.scrubbed .dock-title, .dock-title:has(#scrubber-insert:not([hidden])) { display: flex; max-width: none; }
  .dock-title strong, .scrubber-label, .scrubber-chapters { display: none; }
  .transport { order: 3; justify-content: center; gap: 1.1rem; margin-top: auto; }
  .dock:has(#scrubber[hidden]) .transport { display: none; }
  .round { width: 2.75rem; height: 2.75rem; border-radius: 50%; }
  #scrubber-play { width: 3.4rem; height: 3.4rem; }
  #scrubber-play .icon { width: 1.15rem; height: 1.15rem; }
  #scrubber-range { display: none; }
  .step > button { width: 6.5rem; }
  .scrubbed-note { top: 2.7rem; }
  .step.minor > button { width: 5rem; }
  .step-card { order: 2; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
  .step-card[hidden] { display: none; }
  .step-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 8px; background: var(--accent); color: var(--accent-ink); flex: none; }
  .step-card-icon .icon { width: 1.2rem; height: 1.2rem; }
  .step-card-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .step-card-name { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .step-card-what { color: var(--muted); font-size: 0.85em; }
  .step-card-line { gap: 0.2rem; background: transparent; border-color: transparent; color: var(--accent); font-family: var(--mono); min-height: 2.25rem; }
  .step-card-line .icon { width: 0.8rem; height: 0.8rem; }
  .history-empty { min-height: 4.4rem; flex-wrap: wrap; padding: 0.5rem 0.7rem; }

  /* Dialogs fill the screen. */
  .dialog { padding: 0; align-items: stretch; }
  .dialog-box { max-height: none; height: 100%; border-radius: 0; border: 0; }
  .dialog-small { height: auto; margin: auto var(--gap); border-radius: 12px; border: 1px solid var(--line-strong); }
  .dialog-head { flex-wrap: wrap; padding-top: max(0.6rem, env(safe-area-inset-top)); }
  .dialog-head-actions { justify-content: flex-start; }
  .project-row .project-text .muted { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* A menu is a sheet over a scrim, above the sheet tabs and the model's
     overlays (they covered it), rising from the bottom. */
  .menu { position: fixed; top: auto; left: var(--gap); right: var(--gap); bottom: calc(var(--gap) + env(safe-area-inset-bottom)); z-index: 60; padding: 0.6rem; border-radius: 16px; max-height: 80dvh; overflow-y: auto; }
  .menu:not([hidden]) { animation: sheet-in 0.16s ease-out; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(12px); } }
  body.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var(--scrim); animation: scrim-in 0.16s ease-out; }
  @keyframes scrim-in { from { opacity: 0; } }
  .menu-title { padding: 0.2rem 0.2rem 0.5rem 0.5rem; font-size: 1.05rem; }
  /* The section panel and the standard views share the corner: the
     panel wins while a section is on. */
  body.section-open .view-orient { display: none; }
  .section-panel { min-width: 0; width: min(16rem, calc(100vw - 2rem)); }
  .menu > button, .menu-field { min-height: 2.75rem; }
}
/* Touch: finger-sized targets, and 16px editor text so mobile Safari
   does not zoom the page when the script gains focus. */
@media (pointer: coarse) {
  :root { --tool: 2.5rem; }
  button, select { min-height: 2.5rem; }
  .view-orient button { min-height: 1.9rem; min-width: 2.3rem; font-size: 0.66rem; }
  .round { min-height: 0; }
  .gutter-mark, .tree-eye, .sheet-size { min-height: 0; }
  input[type="checkbox"] { width: 1.25rem; height: 1.25rem; }
  .editor { font-size: 16px; }
  .tree-row { min-height: 2.6rem; }
  .tree-open { opacity: 1; }
  input[type="number"] { min-height: 2.5rem; font-size: 16px; }
}
/* Short phones: the History sheet tightens so the model keeps room. */
@media (max-width: 60rem) and (max-height: 50rem) {
  .dock { gap: 0.45rem; padding-top: 0.45rem; }
  .step > button { min-height: 3.9rem; padding: 0.3rem 0.45rem; gap: 0.2rem; }
  .step-card { padding: 0.4rem 0.6rem; }
  .step-card-icon { width: 2rem; height: 2rem; }
  .transport { gap: 0.9rem; }
  .round { width: 2.4rem; height: 2.4rem; }
  #scrubber-play { width: 2.9rem; height: 2.9rem; }
  .film-list-item { min-height: 2.1rem; }
  .sheet-tabs { padding-top: 0.45rem; padding-bottom: 0.25rem; }
  .sheet-grabber { margin-bottom: 0.35rem; }
  .sheet-size { height: 1.05rem; }
  .sheet-tabs .tab { min-height: 2.1rem; }
}
/* Small phones: the guide keeps its icon and the brand goes (About is
   in the Projects dialog) so the project name fits, and the view modes
   tighten so all six fit a 360 px screen. */
@media (max-width: 28rem) {
  .mode { padding: 0.2rem 0.35rem; font-size: 0.92em; }
  .bar-view { gap: 0.25rem; }
  .segment + .segment { padding-left: 0.25rem; }
  .brand { display: none; }
  .guide-link .bar-text { display: none; }
  .guide-link { width: 2.5rem; padding: 0; justify-content: center; }
}

/* The simulation legend on a phone's short viewport (PK-948). */
@media (max-width: 60rem) {
  .sim-legend { min-width: 9rem; font-size: 0.72rem; padding: 0.25rem 0.45rem; }
  .sim-legend-bar { height: 0.45rem; }
}