/* SPDX-License-Identifier: Apache-2.0 */
/* App shell — an app's browser UI fills the window under one slim bar (app-shell.inc,
 * app-bar.inc). The app's own stylesheet lays out <main>. Sizes in rem; px only for pens. */

body.app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sheet);
}
body.app-shell > main { flex: 1 1 auto; min-height: 0; }

.app-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: .35rem 1rem;
  background: var(--sheet-2);
  border-bottom: var(--pen-2) solid var(--ink);
}
.app-bar-mark { display: inline-flex; color: var(--ink); }
.app-bar-name { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 700; font-stretch: 112%; }
.app-bar-area {
  font-size: var(--fs-sm);
  font-weight: 600;
  font-stretch: 100%;
  padding: .05rem .5rem;
  color: var(--layer);
  border: var(--pen-1) solid var(--layer);
  border-radius: var(--radius);
  text-decoration: none;
}
.app-bar-area:hover { text-decoration: underline; }
.app-bar-ver { position: relative; font-size: var(--fs-sm); font-weight: 600; font-stretch: 100%; }
.app-bar-ver summary { list-style: none; cursor: pointer; white-space: nowrap; padding: .05rem .45rem; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.app-bar-ver summary::-webkit-details-marker { display: none; }
.app-bar-ver summary .bi { font-size: .7em; }
.app-bar-ver ul { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 11rem; margin: 0; padding: .25rem 0; list-style: none; background: var(--sheet-2); border: var(--pen-2) solid var(--ink); border-radius: var(--radius); }
.app-bar-ver a { display: flex; gap: .75rem; padding: .3rem .75rem; border-left: var(--pen-3) solid transparent; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.app-bar-ver a:hover { background: var(--sheet); text-decoration: underline; }
.app-bar-ver a[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); }
.app-bar-ver .n { margin-left: auto; color: var(--ink-2); font-weight: 500; }
.app-bar-older { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.app-bar-links { display: flex; gap: 1.1rem; margin-left: auto; font-size: var(--fs-sm); }
.app-bar-links a { color: var(--ink-2); }
.app-bar .space-toggle { flex: 0 0 auto; }

@media (max-width: 760px) {
  body.app-shell { height: auto; min-height: 100dvh; overflow: visible; }
  .app-bar { gap: .6rem; padding-inline: .75rem; }
  .app-bar-links { display: none; }
  .app-bar .space-toggle { margin-left: auto; }
}
@media (max-width: 480px) {
  /* phone: everything on one line inside the screen; the app name gives way first (ellipsis) */
  .app-bar { gap: .45rem; padding-inline: .5rem; }
  .app-bar-name { min-width: 0; gap: .4rem; }
  .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-bar-name > .layer-swatch, .app-bar-area { display: none; }   /* the name and version chip matter more */
  .app-bar-ver { flex: 0 0 auto; }
}

/* ---- Narrow screens (phones, the Studio APK; owner 2026-10-15): the bar keeps the app name, Help, Save for offline,
   Settings and the screen mode; the mark, version, Paper/Model, Find and the links move into "More"
   (details.app-bar-more in app-bar.inc, which prints copies of them). Every control at least 2.75rem square. ---- */
.app-bar-more { display: none; position: relative; flex: 0 0 auto; }
@media (max-width: 47.5rem) {
  .app-bar { gap: .35rem; padding-inline: .5rem; }
  .app-bar > .app-bar-mark, .app-bar-name > .app-bar-ver, .app-bar > .app-bar-older,
  .app-bar > .space-toggle, .app-bar > .app-bar-palette { display: none; }
  .app-bar-name { flex: 1 1 auto; min-width: 0; gap: .4rem; }
  .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-bar-area { flex: 0 0 auto; }
  .app-bar > .app-bar-btn, .app-bar > .app-bar-fs, .app-bar-more > summary { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .2rem .45rem; }
  .app-bar-more { display: block; }
  .app-bar-more > summary {
    display: inline-flex; align-items: center; list-style: none; cursor: pointer;
    color: var(--ink); border: var(--pen-1) solid var(--ink); border-radius: var(--radius);
  }
  .app-bar-more > summary::-webkit-details-marker { display: none; }
  .app-bar-more > summary .bi { font-size: 1.1rem; }
  .app-bar-more[open] > summary { color: var(--sheet); background: var(--ink); }
  .app-bar-more-menu {
    position: absolute; z-index: 70; top: calc(100% + .3rem); right: 0;
    width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 4.5rem); overflow-y: auto;
    padding: .25rem 0; background: var(--sheet-2); color: var(--ink);
    border: var(--pen-2) solid var(--ink); border-radius: var(--radius); font-size: var(--fs-sm);
  }
  .app-bar-more-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: 0 .9rem;
    font: inherit; font-weight: 600; text-align: left; color: var(--ink); text-decoration: none;
    background: transparent; border: 0; border-left: var(--pen-3) solid transparent;
  }
  .app-bar-more-item:hover { background: var(--sheet); text-decoration: underline; }
  .app-bar-more-item .bi { color: var(--layer); }
  .app-bar-more-item[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); }
  .app-bar-more-item .n { margin-left: auto; color: var(--ink-2); font-weight: 500; }
  .app-bar:has(.app-bar-palette[hidden]) .app-bar-more-find { display: none; }
  .app-bar-more-h { margin: .4rem 0 0; padding: .35rem .9rem 0; border-top: var(--pen-1) solid var(--line); font-size: .75rem; font-weight: 700; color: var(--ink-2); }
  .app-bar-more-ver { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
  .app-bar-more-note { margin: 0; padding: .5rem .9rem; color: var(--ink-2); }
  .app-bar-more .space-toggle { display: flex; margin: .3rem .9rem .5rem; }
  .app-bar-more .space-toggle button { flex: 1 1 0; min-height: 2.75rem; }
  .app-bar-more .space-toggle + .app-bar-more-item { border-top: var(--pen-1) solid var(--line); }
}

/* ---- 0.6 DF.28: Interface size (app-settings.js s.ui; only builds with the 0.6 layout tools set the class). The root font
   size of tokens.css × the size, so every rem of the bars, toolbars, panels and dialogs scales; the drawing keeps its own zoom. ---- */
html.shell-ui-sized { font-size: calc(clamp(100%, 0.75rem + 0.2083vw, 125%) * var(--shell-ui, 1)); }
/* Bigger bars must overflow, not wrap, so app-phone.js's measure switches the app bar to its narrow "More" layout. */
html.shell-ui-sized .app-bar-links a { white-space: nowrap; }

/* ---- Screen modes (assets/js/app-shell.js): normal → full screen → full screen with the bars hidden ---- */
.app-bar-fs {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: var(--pen-1) solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}
.app-bar-fs[hidden] { display: none; }
.app-bar-fs .bi { color: var(--layer); }
.app-bar-fs:hover { background: var(--sheet); }
.app-bar-fs:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.app-bar-fs[aria-pressed="true"] { border-width: var(--pen-2); }

/* Bars hidden: the app bar and the app's top toolbar stack at the top (fixed, so the drawing keeps
   the whole window) and slide out of sight until the pointer reaches the top edge. */
body.shell-autohide .shell-bar {
  position: fixed;
  top: var(--bar-top, 0);
  left: 0;
  right: 0;
  z-index: 60;
  transform: translateY(calc(-1 * var(--bars-h, 6rem) - 4px));
  visibility: hidden;
}
body.shell-autohide.shell-reveal .shell-bar { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  body.shell-autohide .shell-bar { transition: transform .16s ease-out, visibility 0s linear .16s; }
  body.shell-autohide.shell-reveal .shell-bar { transition: transform .16s ease-out, visibility 0s; }
}
.shell-edge { display: none; }
body.shell-autohide .shell-edge {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: .5rem;
  z-index: 59;
}
body.shell-autohide.shell-reveal .shell-edge { height: calc(var(--bars-h, 6rem) + .5rem); }
/* 0.6 DF.8: the "Show bars" tab hangs from the top middle while the bars are hidden (app-shell.js; only builds with the
   0.6 layout tools create it). Above the edge strip, under the bars when they slide in. */
.shell-showbars { display: none; }
body.shell-autohide:not(.shell-reveal) .shell-showbars {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 61;
  transform: translateX(-50%);
  min-height: 1.75rem;
  padding: .1rem .7rem .2rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-1) solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  opacity: .8;
  cursor: pointer;
}
body.shell-autohide:not(.shell-reveal) .shell-showbars:is(:hover, :focus-visible) { opacity: 1; border-color: var(--ink); }
.shell-showbars:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
.shell-showbars .bi { color: var(--layer); }
html.cc-touch body.shell-autohide:not(.shell-reveal) .shell-showbars, html.cc-phone body.shell-autohide:not(.shell-reveal) .shell-showbars { min-height: 2.75rem; }

/* A short note when the mode changes (role=status, so screen readers hear it too). */
.shell-hint {
  position: fixed;
  left: 50%;
  top: 1rem;
  z-index: 70;
  margin: 0;
  padding: .45rem .8rem;
  max-width: calc(100vw - 2rem);
  font-size: var(--fs-sm);
  color: var(--sheet);
  background: var(--ink);
  border-radius: var(--radius);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
body.shell-hinting .shell-hint { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .shell-hint { transition: opacity .2s; } }

@media (max-width: 1100px) { .app-bar-fs-label { display: none; } }

/* ---- Help (assets/js/help-panel.js) and Save for offline (assets/js/app-offline.js) ---- */
.app-bar-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .6rem;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: var(--pen-1) solid var(--ink);
  border-radius: var(--radius);
  white-space: nowrap;
}
.app-bar-btn:hover:not(:disabled) { background: var(--sheet); }
.app-bar-btn:disabled { opacity: .6; }
.app-bar-help[aria-expanded="true"] { color: var(--on-action, var(--sheet)); background: var(--ink); }
.app-bar-offline[data-state="ready"] .bi { color: var(--layer-green); }
.app-bar-offline[data-state="failed"] .bi { color: var(--layer-red); }
.app-bar-offline[data-state="saving"] { font-variant-numeric: tabular-nums; }
.offline-menu {
  position: fixed; z-index: 1050; width: 18rem; padding: .6rem;
  background: var(--sheet-2); color: var(--ink);
  border: var(--pen-2) solid var(--ink); border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.offline-menu p { margin: 0 0 .5rem; color: var(--ink-2); }
.offline-menu button { display: block; width: 100%; margin-top: .25rem; padding: .35rem .5rem; font: inherit; text-align: left; color: var(--ink); background: transparent; border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.offline-menu button:hover { border-color: var(--ink); }
@media (max-width: 1100px) {
  .app-bar-btn-label { display: none; }   /* icons only; the title says what they do */
  .app-bar-offline[data-state="saving"] .app-bar-btn-label { display: inline; }
}

/* ---- Settings (assets/js/app-settings.js, core/components/app-settings.inc) ---- */
body.app-shell > main { position: relative; }   /* the panel resize handles are placed over it */

/* Panel text size: zoom scales rem sizes too, which font-size alone would not. */
body.app-shell.shell-zoomed > main > aside { zoom: var(--shell-panel-zoom, 1); }

.shell-split {
  position: absolute;
  z-index: 15;
  width: .55rem;
  transform: translateX(-50%);
  cursor: col-resize;
  touch-action: none;
}
.shell-split[hidden] { display: none; }
.shell-split::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--pen-3);
  transform: translateX(-50%);
  background: transparent;
}
.shell-split:hover::after, .shell-split:focus-visible::after, body.shell-resizing .shell-split::after { background: var(--layer); }
.shell-split:focus-visible { outline: none; }
body.shell-resizing, body.shell-resizing * { cursor: col-resize !important; user-select: none; }

.shell-settings {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2.5rem);
  padding: 0;
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
}
.shell-settings::backdrop { background: color-mix(in srgb, var(--ink) 35%, transparent); }
.shell-dlg { display: flex; flex-direction: column; max-height: calc(100dvh - 2.5rem); margin: 0; }
.shell-dlg-head, .shell-dlg-foot { display: flex; align-items: center; gap: .75rem; padding: .65rem 1rem; }
.shell-dlg-head { justify-content: space-between; border-bottom: var(--pen-1) solid var(--line); }
.shell-dlg-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; font-stretch: 112%; }
.shell-dlg-foot { justify-content: space-between; flex-wrap: wrap; border-top: var(--pen-1) solid var(--line); }
.shell-dlg-body { padding: .9rem 1rem; overflow: auto; min-height: 0; display: grid; gap: 1rem; font-size: var(--fs-sm); }
.shell-tabs { display: flex; gap: .25rem; padding: .5rem 1rem 0; border-bottom: var(--pen-1) solid var(--line); }
.shell-tabs[hidden] { display: none; }
.shell-tabs [role="tab"] { margin-bottom: -1px; padding: .4rem .8rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); background: transparent; border: var(--pen-1) solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; cursor: pointer; }
.shell-tabs [role="tab"]:hover { color: var(--ink); }
.shell-tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: var(--sheet-2); border-color: var(--line); box-shadow: inset 0 var(--pen-2) 0 var(--layer); }
.shell-pane { display: grid; gap: 1rem; min-width: 0; }
.shell-pane[hidden] { display: none; }
.shell-pane-lede { padding-bottom: .1rem; }
.shell-x { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: var(--ink); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); }
.shell-x:hover { border-color: var(--ink); }
.shell-set { margin: 0; padding: 0; border: 0; display: grid; gap: .55rem; min-width: 0; }
.shell-set legend { float: none; margin: 0 0 .15rem; padding: 0; font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.shell-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.shell-seg label { display: flex; align-items: center; gap: .4rem; padding: .4rem .55rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); cursor: pointer; }
.shell-seg label:has(input:checked) { border: var(--pen-2) solid var(--layer); font-weight: 600; }
.shell-seg input { accent-color: var(--layer); margin: 0; }
.shell-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; align-items: center; }
.shell-row[hidden] { display: none; }
.shell-row .select-cc { width: 100%; }
.shell-range { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.shell-range input { flex: 1 1 auto; min-width: 0; accent-color: var(--layer); }
.shell-range input:disabled { opacity: .5; }
.shell-range output { flex: 0 0 auto; min-width: 6.5rem; color: var(--ink-2); }
.shell-check { display: flex; gap: .5rem; align-items: baseline; cursor: pointer; }
.shell-check input { accent-color: var(--layer); }
.shell-hint-text { margin: 0; color: var(--ink-2); }
@media (max-width: 480px) {
  .shell-seg, .shell-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- IP.6 (0.5 track IP, session input-shell): the wider two-column Settings dialog for every app ----
   Only on .shell-settings-wide, which app-settings.inc sets for dev builds and releases from 0.5 on
   (AppBuilds::wideSettings), so the 0.4 releases in /use keep their narrow dialog until the owner's next release.
   46rem wide, 0.8125rem text, each pane's fieldsets in two columns; .shell-set-wide (style cards) and anything that is
   not a fieldset span both. One column again on narrow screens. Phone rules live in their own block (session phones). */
.shell-settings.shell-settings-wide { width: min(46rem, calc(100vw - 2rem)); }
.shell-settings-wide .shell-dlg-body { font-size: .8125rem; }
.shell-settings-wide .shell-set legend { font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: .25rem; }   /* same as a panel title (.cc-h) */
.shell-settings-wide .shell-dlg-body .select-cc { min-height: 2rem; padding: .25rem 2rem .25rem .6rem; font-size: .8125rem; background-position: calc(100% - 1rem) 50%, calc(100% - .625rem) 50%; }
.shell-settings-wide .shell-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.shell-settings-wide .shell-pane > :not(fieldset), .shell-settings-wide .shell-pane > .shell-set-wide { grid-column: 1 / -1; }
.shell-settings-wide .shell-seg { gap: .25rem; }
.shell-settings-wide .shell-seg label { gap: .3rem; padding: .3rem .4rem; line-height: 1.2; }
.shell-settings-wide .shell-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }   /* label over its control */
.shell-settings-wide .shell-dlg-body .btn-sm-cc { min-height: 2rem; padding: .3rem .65rem; font-size: .8125rem; }
.shell-settings-wide .shell-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
@media (max-width: 45rem) {
  .shell-settings-wide .shell-pane { grid-template-columns: minmax(0, 1fr); }
}
/* ---- end IP.6 ---- */

/* Tooltips with the full text of anything cut off (…) */
.tooltip.shell-tip {
  --bs-tooltip-bg: var(--ink);
  --bs-tooltip-color: var(--sheet);
  --bs-tooltip-max-width: 28rem;
  --bs-tooltip-font-size: var(--fs-sm);
  --bs-tooltip-border-radius: var(--radius);
  --bs-tooltip-opacity: 1;
  pointer-events: none;
}
.tooltip.shell-tip .tooltip-inner { text-align: left; overflow-wrap: anywhere; }

/* Settings button in the app bar */
.app-bar-settings[aria-expanded="true"] { color: var(--on-action, var(--sheet)); background: var(--ink); }

/* Toolbar buttons (app-settings.js): icons only keeps the label for screen readers; labels only drops the icon. */
body[data-shell-tb="icons"] .shell-tb :is(button:not([role="menuitem"]), summary) > span {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body[data-shell-tb="icons"] .shell-tb :is(button:not([role="menuitem"]), summary) > .bi { font-size: 1.15em; }
body[data-shell-tb="labels"] .shell-tb :is(button:not([role="menuitem"]), summary) > .bi { display: none; }
body.shell-tb-nogroups:not(.shell-arranging) .shell-tb > [role="group"] > [class$="-tool-label"] { display: none; }
.shell-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.shell-set[hidden], .shell-check[hidden] { display: none; }

/* Arrange the toolbar: every tool and group name is a drag handle; clicks do nothing. */
body.shell-arranging .shell-tb { outline: var(--pen-2) dashed var(--layer); outline-offset: -2px; }
body.shell-arranging .shell-tb :is(button, summary, [role="group"] > [class$="-tool-label"]),
body.shell-arranging .shell-tb [class$="-tool-row"] > * { cursor: grab; touch-action: none; }
body.shell-arranging .shell-tb [role="group"] > [class$="-tool-label"] { text-decoration: underline dotted; }
body.shell-arranging .shell-tb [class$="-tool-row"] > *:hover,
body.shell-arranging .shell-tb > :is(button, span):hover { outline: var(--pen-1) dashed var(--ink-2); }
.shell-dragging { opacity: .45; outline: var(--pen-2) solid var(--layer) !important; }
.shell-arrange-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: calc(100vw - 2rem);
  padding: .55rem .75rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--layer);
  border-radius: var(--radius);
  transform: translateX(-50%);
}
.shell-arrange-bar[hidden] { display: none; }
.shell-arrange-bar p { margin: 0; }
.shell-arrange-bar .bi { color: var(--layer); }
@media (max-width: 760px) { .shell-arrange-bar { flex-wrap: wrap; } }
.shell-arrange-bar button { flex: 0 0 auto; white-space: nowrap; }

/* 0.6 DF.27: the toolbar's right-click menu (app-settings.js; builds with the 0.6 layout tools only) */
.shell-ctx {
  position: fixed; z-index: 90; min-width: 13rem; max-width: calc(100vw - .5rem); padding: .25rem 0;
  font-size: var(--fs-sm); color: var(--ink); background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink); border-radius: var(--radius);
}
.shell-ctx[hidden] { display: none; }
.shell-ctx hr { margin: .25rem 0; border: 0; border-top: var(--pen-1) solid var(--line); opacity: 1; }
.shell-ctx [role="menuitem"] {
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 2rem; padding: .25rem .8rem;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.shell-ctx [role="menuitem"] .bi { width: 1rem; color: var(--layer); }
.shell-ctx [role="menuitem"]:is(:hover, :focus) { background: var(--sheet); outline: none; box-shadow: inset var(--pen-2) 0 0 var(--action); }
.shell-ctx [role="menuitem"][aria-disabled="true"] { color: var(--ink-2); cursor: default; }
.shell-ctx [role="menuitem"][aria-disabled="true"] .bi { color: var(--ink-2); }
html.cc-touch .shell-ctx [role="menuitem"], html.cc-phone .shell-ctx [role="menuitem"] { min-height: 2.75rem; }
/* ---- Movable panels and the panels window (assets/js/app-panels.js; only builds with manifest "panels") ----
 * Every rule hangs off a class app-panels.js adds, so builds without the flag are untouched. */
.shell-grip {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: 1.75rem;
  padding: 0 .25rem 0 .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--sheet-2);
  border-bottom: var(--pen-1) solid var(--line);
}
.shell-grip-handle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .3rem; padding: .25rem 0; cursor: grab; touch-action: none; user-select: none; }
.shell-grip-handle .bi { color: var(--layer); }
.shell-grip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-grip-menu { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.6rem; height: 1.4rem; padding: 0; color: var(--ink); background: transparent; border: var(--pen-1) solid transparent; border-radius: var(--radius); cursor: pointer; }
.shell-grip-menu:hover, .shell-grip-menu[aria-expanded="true"] { border-color: var(--ink); }
.shell-grip-menu:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: 1px; }
main.shell-panels-narrow .shell-grip-handle { cursor: default; }
body.shell-panel-dragging, body.shell-panel-dragging * { cursor: grabbing !important; user-select: none; }

.shell-panel-menu {
  position: fixed;
  z-index: 1060;
  min-width: 15rem;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
  font-size: var(--fs-sm);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
}
.shell-panel-menu button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .35rem .75rem; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; border-left: var(--pen-3) solid transparent; }
.shell-panel-menu button:hover, .shell-panel-menu button:focus { background: var(--sheet); border-left-color: var(--layer); outline: none; }
.shell-panel-menu .bi { color: var(--layer); }

/* Managed layout: docked panels fill their dock; floating ones sit over the drawing. */
main.shell-panels-managed > aside.shell-docked { min-width: 0; min-height: 0; overflow: auto; }
main.shell-panels-managed > aside[data-shell-dock="left"] { border-left: 0; border-right: var(--pen-2) solid var(--ink); }
main.shell-panels-managed > aside[data-shell-dock="right"] { border-right: 0; border-left: var(--pen-2) solid var(--ink); }
main.shell-panels-managed > aside[data-shell-dock="bottom"] { border-left: 0; border-right: 0; border-top: var(--pen-2) solid var(--ink); }
main.shell-panels-managed > aside[data-shell-dock="bottom"][style*="justify-self: end"] { border-left: var(--pen-1) solid var(--line); }
main.shell-panels-managed > aside[data-shell-dock][style*="align-self: end"] { border-top: var(--pen-2) solid var(--ink); }
body.app-shell > main > aside.shell-float {
  position: absolute;
  z-index: 40;
  grid-area: auto;
  min-width: 10rem;
  min-height: 6rem;
  overflow: auto;
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
  background: var(--sheet-2);
}
/* A floating panel's corner (assets/js/app-panels.js sizer, 1.6): mouse, touch and pen; arrows with focus. */
.shell-float-size { position: absolute; z-index: 41; width: 1.1rem; height: 1.1rem; cursor: nwse-resize; touch-action: none; }
.shell-float-size[hidden] { display: none; }
.shell-float-size::after { content: ""; position: absolute; right: .2rem; bottom: .2rem; width: .55rem; height: .55rem; border-right: var(--pen-2) solid var(--ink-2); border-bottom: var(--pen-2) solid var(--ink-2); }
.shell-float-size:hover::after, .shell-float-size:focus-visible::after { border-color: var(--layer); }
.shell-float-size:focus-visible { outline: none; }
@media (pointer: coarse) { .shell-float-size { width: 1.8rem; height: 1.8rem; } .shell-float-size::after { width: .8rem; height: .8rem; } }
/* A panels window under a panel dragged from another window. */
body.shell-pw.shell-pw-drop { box-shadow: inset 0 0 0 var(--pen-3) var(--layer); }
.shell-dock-split { position: absolute; z-index: 16; touch-action: none; }
.shell-dock-split[hidden] { display: none; }
.shell-dock-split.is-vertical { width: .55rem; transform: translateX(-50%); cursor: col-resize; }
.shell-dock-split:not(.is-vertical) { height: .55rem; transform: translateY(-50%); cursor: row-resize; }
.shell-dock-split::after { content: ""; position: absolute; background: transparent; }
.shell-dock-split.is-vertical::after { top: 0; bottom: 0; left: 50%; width: var(--pen-3); transform: translateX(-50%); }
.shell-dock-split:not(.is-vertical)::after { left: 0; right: 0; top: 50%; height: var(--pen-3); transform: translateY(-50%); }
.shell-dock-split:hover::after, .shell-dock-split:focus-visible::after { background: var(--layer); }
.shell-dock-split:focus-visible { outline: none; }

/* Drop zones while a panel is dragged by its grip. */
.shell-drop { position: absolute; inset: 0; z-index: 45; pointer-events: none; }
.shell-drop[hidden] { display: none; }
.shell-drop-zone {
  position: absolute;
  display: grid;
  place-items: center;
  padding: .5rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: color-mix(in srgb, var(--layer) 10%, transparent);
  border: var(--pen-2) dashed var(--layer);
  border-radius: var(--radius);
}
.shell-drop-zone[data-zone="left"] { left: .4rem; top: 15%; bottom: 15%; width: min(9rem, 22%); }
.shell-drop-zone[data-zone="right"] { right: .4rem; top: 15%; bottom: 15%; width: min(9rem, 22%); }
.shell-drop-zone[data-zone="bottom"] { left: 30%; right: 30%; bottom: .4rem; height: min(6rem, 18%); }
.shell-drop-zone.is-hot { background: color-mix(in srgb, var(--layer) 35%, transparent); border-style: solid; }
.shell-drag-ghost {
  position: absolute;
  z-index: 46;
  padding: .4rem .6rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  background: color-mix(in srgb, var(--sheet-2) 80%, transparent);
  border: var(--pen-2) solid var(--layer);
  border-radius: var(--radius);
  pointer-events: none;
}

/* "Your panels were in their own window — Open it" after a reload. */
.shell-pw-offer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  max-width: calc(100vw - 2rem);
  padding: .55rem .75rem;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--layer);
  border-radius: var(--radius);
}
.shell-pw-offer[hidden] { display: none; }
.shell-pw-offer p { margin: 0; }
.shell-pw-offer .bi { color: var(--layer); }

/* The panels window (the pop-up): a bar, then the panels side by side, each scrolling on its own. */
body.shell-pw { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.shell-pw-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .4rem .75rem; background: var(--sheet-2); border-bottom: var(--pen-2) solid var(--ink); }
.shell-pw-title { margin: 0 auto 0 0; font-size: var(--fs-sm); font-weight: 700; font-stretch: 112%; }
.shell-pw-title .bi { color: var(--layer); }
.shell-pw-orphan { display: none; margin: 0; padding: .5rem .75rem; font-size: var(--fs-sm); color: var(--sheet); background: var(--layer-red); }
body.shell-pw-lost .shell-pw-orphan { display: block; }
body.shell-pw > main.shell-pw-main {
  display: flex !important;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-height: 0;
  height: auto !important;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  overflow: auto;
}
body.shell-pw > main.shell-pw-main > aside {
  flex: 1 1 16rem;
  min-width: 0;
  max-height: 100%;
  height: 100%;
  overflow: auto;
  grid-area: auto;
  border: 0;
  border-right: var(--pen-2) solid var(--ink);
}
body.shell-pw > main.shell-pw-main > aside:last-child { border-right: 0; }
body.shell-pw.shell-zoomed > main > aside { zoom: var(--shell-panel-zoom, 1); }

/* Recover your work? (assets/js/app-autosave.js, 0.4 item 1.1) — the Settings dialog's frame, one row per copy. */
.shell-recover { width: min(36rem, calc(100vw - 2rem)); }
.shell-recover-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--pen-1) solid var(--line); }
.shell-recover-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .35rem 1rem; padding: .6rem 0; border-bottom: var(--pen-1) solid var(--line); }
.shell-recover-what { display: grid; gap: .1rem; min-width: 0; }
.shell-recover-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-recover-meta { color: var(--ink-2); }
.shell-recover-msg { grid-column: 1 / -1; margin: 0; color: var(--ink-2); }
.shell-recover-msg:empty { display: none; }
@media (max-width: 30rem) { .shell-recover-row { grid-template-columns: minmax(0, 1fr); } }

/* Settings › Add-ons (assets/js/addons.js, 0.4 item A.2). */
.shell-addons { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.shell-addon { display: grid; gap: .2rem; padding: .5rem .6rem; border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.shell-addon[data-state="refused"], .shell-addon[data-state="failed"] { border-style: dashed; }
.shell-addon-ver { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shell-addon-meta { margin: 0; color: var(--ink-2); }
.shell-addon-status { margin: 0; color: var(--ink); }
.shell-addon[data-state="failed"] .shell-addon-status, .shell-addon[data-state="refused"] .shell-addon-status { color: var(--layer-red); }

/* Recent files on an app's start screen ([data-recent-files], assets/js/host.js mountRecent; 0.4 item 1.4). */
.shell-recent { display: grid; gap: .5rem; width: min(32rem, 100%); text-align: start; }
.shell-recent[hidden] { display: none; }
.shell-recent-h { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.shell-recent-list { list-style: none; margin: 0; padding: 0; border-top: var(--pen-1) solid var(--line); }
.shell-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: var(--pen-1) solid var(--line); }
.shell-recent-open { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i n w" ". p p"; align-items: baseline; gap: 0 .5rem; padding: .45rem .25rem; font: inherit; text-align: start; color: var(--ink); background: transparent; border: 0; cursor: pointer; min-width: 0; }
.shell-recent-open:hover .shell-recent-name, .shell-recent-open:focus-visible .shell-recent-name { text-decoration: underline; }
.shell-recent-open .bi { grid-area: i; color: var(--layer); }
.shell-recent-name { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.shell-recent-when { grid-area: w; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.shell-recent-where { grid-area: p; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.shell-recent-msg { grid-column: 1 / -1; margin: 0 0 .4rem; font-size: var(--fs-sm); color: var(--ink-2); }
.shell-recent-msg:empty { display: none; }
.shell-recent-clear { justify-self: start; padding: 0; font: inherit; font-size: var(--fs-sm); color: var(--ink-2); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.shell-recent-clear:hover { color: var(--ink); }

/* Add-ons' shared UI (assets/js/app-addons.js, 0.4 item A.6): a run of buttons in a toolbar without groups, and a
   section at the end of a side panel. */
.shell-addon-run { display: inline-flex; align-items: center; gap: .25rem; padding-left: .5rem; margin-left: .25rem; border-left: var(--pen-1) solid var(--line); }
.shell-addon-section { margin-top: .75rem; padding-top: .5rem; border-top: var(--pen-1) solid var(--line); }
.shell-addon-section-h { margin: 0 0 .4rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.shell-addon-section-body { font-size: var(--fs-sm); }

/* Command palette (assets/js/app-palette.js, 0.4 item 1.8): Ctrl+K / ⌘K. */
.shell-palette {
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 6rem));
  margin: 4.5rem auto auto;
  padding: 0;
  color: var(--ink);
  background: var(--sheet-2);
  border: var(--pen-2) solid var(--ink);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
.shell-palette:not([open]) { display: none; }
.shell-palette::backdrop { background: color-mix(in srgb, var(--ink) 25%, transparent); }
.shell-palette-input { flex: 0 0 auto; width: 100%; padding: .7rem .9rem; font: inherit; font-size: var(--fs-md); color: var(--ink); background: var(--sheet); border: 0; border-bottom: var(--pen-1) solid var(--line); outline: none; }
.shell-palette-input::placeholder { color: var(--placeholder, var(--ink-2)); }
.shell-palette-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: .25rem 0; list-style: none; }
.shell-palette-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n g k" "h h h"; align-items: baseline; gap: 0 .75rem; padding: .4rem .9rem; border-left: var(--pen-3) solid transparent; cursor: pointer; }
.shell-palette-opt[aria-selected="true"] { background: var(--sheet); border-left-color: var(--layer); }
.shell-palette-opt.is-disabled { color: var(--ink-2); cursor: default; }
.shell-palette-name { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.shell-palette-group { grid-area: g; font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.shell-palette-opt kbd { grid-area: k; font-size: .75rem; padding: .05rem .35rem; color: var(--ink); background: var(--sheet); border: var(--pen-1) solid var(--line); border-radius: var(--radius); }
.shell-palette-hint { grid-area: h; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-palette-status { margin: 0; padding: .35rem .9rem; font-size: var(--fs-sm); color: var(--ink-2); border-top: var(--pen-1) solid var(--line); }
.shell-palette-foot { margin: 0; padding: 0 .9rem .45rem; font-size: .75rem; color: var(--ink-2); }
.shell-set.shell-palette-flash { outline: var(--pen-2) solid var(--layer); outline-offset: .3rem; }
@media (max-width: 30rem) { .shell-palette-opt { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n k" "g g" "h h"; } }

/* ---- Settings › Assistants and the "assistant connected" button (assets/js/host.js; session agents, docs/AGENTS-SPEC.md §7) ---- */
.shell-assist-groups { display: grid; gap: .35rem; padding-left: 1.4rem; }
.shell-assist-groups .shell-check:has(input:disabled) { color: var(--ink-2); cursor: default; }
.shell-assist-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.shell-assist-btn { padding: .25rem .6rem; font: inherit; font-size: var(--fs-sm); color: var(--ink); background: transparent; border: var(--pen-1) solid var(--ink); border-radius: var(--radius); }
.shell-assist-btn:hover:not(:disabled) { background: var(--sheet-2); }
.shell-assist-btn:disabled { opacity: .6; }
.shell-assist-btn[hidden] { display: none; }
.shell-assist-activity summary { cursor: pointer; font-weight: 600; }
.shell-assist-log { list-style: none; margin: .4rem 0; padding: 0; max-height: 12rem; overflow: auto; font-size: var(--fs-sm); border-top: var(--pen-1) solid var(--line); }
.shell-assist-entry, .shell-assist-empty { padding: .2rem 0; border-bottom: var(--pen-1) solid var(--line); overflow-wrap: anywhere; }
.shell-assist-entry time { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.shell-assist-tool { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.shell-assist-entry[data-outcome="refused"] .shell-assist-outcome,
.shell-assist-entry[data-outcome="error"] .shell-assist-outcome { color: var(--layer-red); font-weight: 600; }
.app-bar-assist { border-color: var(--layer-orange); }
.app-bar-assist .bi { color: var(--layer-orange); }
.app-bar-assist[hidden] { display: none; }

/* ==== Phones and fold phones (assets/js/app-phone.js; 0.5 Track PH, session `phones`, owner 2026-10-15) ====
 * Every rule below hangs off a class only app-phone.js sets (html.cc-phone, cc-compact, cc-land, cc-tb-closed, cc-tb-bottom,
 * cc-kbd, cc-fold-h / cc-fold-v, and shell-phone-* / shell-sheet on elements), and app-shell.inc loads it only for builds
 * whose manifest has "phone" — frozen releases never get these classes, so they look as they did. Settings rules (IP.6)
 * are not here. Layout on a phone: [toolbar] [drawing] [command line …] [status] [toolbar when at the bottom] [bar]. */
.shell-phone-bar, .shell-sheet-close { display: none; }
html.cc-phone { --shell-bar-h: 3rem; }
html.cc-compact { --shell-bar-h: 2.75rem; }
html.cc-phone, html.cc-phone body.app-shell { overflow: clip; }   /* clip: an app's scrollIntoView can't shift the page */
html.cc-phone body.app-shell { height: var(--cc-vvh, 100dvh) !important; min-height: 0 !important; }
html.cc-phone body.app-shell > main {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  height: auto !important; min-height: 0 !important; overflow: clip !important;
}
html.cc-phone body.app-shell > main > * { order: 2; flex: 0 0 auto; min-width: 0; max-width: 100%; }
html.cc-phone body.app-shell > main > .shell-phone-tb { order: 0; }
html.cc-phone body.app-shell > main > .shell-phone-stage {
  order: 1; flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important;
}
html.cc-phone body.app-shell > main > .shell-phone-status { order: 3; }
html.cc-phone.cc-tb-bottom body.app-shell > main > .shell-phone-tb { order: 4; }
html.cc-phone body.app-shell > main > .shell-phone-bar { order: 5; }
html.cc-phone body.app-shell > main > .shell-split, html.cc-phone .shell-dock-split, html.cc-phone .shell-float-size { display: none !important; }

/* The bar at the bottom: Tools (show / hide the toolbar), Move (toolbar at the top / bottom), then one button per panel. */
html.cc-phone .shell-phone-bar {
  display: flex; position: relative; z-index: 42; height: var(--shell-bar-h); overflow-x: auto; scrollbar-width: none;
  background: var(--sheet-2); border-top: var(--pen-2) solid var(--ink);
}
.shell-phone-btn {
  flex: 1 1 0; min-width: 3rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem;
  padding: 0 .35rem; font: inherit; font-size: .75rem; font-weight: 600; line-height: 1.1; color: var(--ink);
  background: none; border: 0; border-right: var(--pen-1) solid var(--line); cursor: pointer;
}
.shell-phone-btn:last-child { border-right: 0; }
.shell-phone-btn[hidden] { display: none; }
.shell-phone-btn .bi { font-size: 1.1rem; color: var(--layer); }
.shell-phone-btn:disabled { opacity: .45; }
.shell-phone-btn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-phone-btn[data-phone-sheet][aria-pressed="true"] { color: var(--sheet); background: var(--ink); }
.shell-phone-btn[data-phone-sheet][aria-pressed="true"] .bi { color: inherit; }
.shell-phone-btn:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -3px; }
html.cc-compact .shell-phone-btn { font-size: .6875rem; }
html.cc-kbd .shell-phone-bar, html.cc-kbd .shell-phone-status { display: none !important; }

/* Panels as sheets over the drawing (one at a time). Upright on a compact screen: from the bottom. Sideways, and on a fold
   phone's inner screen: from their own side. (Tablets in Studio: the tablet sheets below — app-phone.js never turns both on.)
   !important beats the inline places app-panels.js gives docked and floating panels; their remembered layout is untouched. */
html.cc-phone body.app-shell > main > .shell-sheet {
  position: absolute !important; z-index: 41; inset: 0 auto var(--shell-bar-h) 0 !important;
  width: min(22rem, 85vw) !important; height: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important;
  overflow-y: auto !important; overscroll-behavior: contain; visibility: hidden; background: var(--sheet-2);
  border: 0 solid var(--ink) !important; border-right-width: var(--pen-2) !important; border-radius: 0 !important;
  transform: translateX(-102%);
}
html.cc-phone body.app-shell > main > .shell-sheet[data-sheet-side="right"] {
  inset: 0 0 var(--shell-bar-h) auto !important; border-right-width: 0 !important; border-left-width: var(--pen-2) !important; transform: translateX(102%);
}
html.cc-phone body.app-shell > main > .shell-sheet[data-sheet-side="bottom"],
html.cc-compact:not(.cc-land) body.app-shell > main > .shell-sheet {
  inset: auto 0 var(--shell-bar-h) 0 !important; width: auto !important; max-height: 72% !important;
  border-width: var(--pen-2) 0 0 0 !important; transform: translateY(calc(100% + var(--shell-bar-h)));
}
html.cc-phone body.app-shell > main > .shell-sheet.shell-sheet-open { visibility: visible; transform: none !important; }
@media (prefers-reduced-motion: no-preference) { html.cc-phone body.app-shell > main > .shell-sheet { transition: transform .18s ease, visibility .18s; } }
html.cc-phone body.app-shell > main > .shell-sheet > .shell-grip { display: none !important; }   /* nowhere to move them on a phone */
html.cc-phone .shell-sheet > .shell-sheet-close {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  position: sticky; top: 0; z-index: 6; min-height: 2.75rem; padding: .3rem 1rem;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); text-align: left;
  background: var(--sheet-2); border: 0; border-bottom: var(--pen-1) solid var(--line); cursor: pointer;
}
.shell-sheet-close:focus-visible { outline: var(--pen-3) solid var(--action); outline-offset: -3px; }

/* Tablets in Studio (app-phone.js tablet mode, `ccShellPhone.tablet(true)` from studio/hub/window.js; html.cc-sheets): held
   upright, 600–999 px wide, the side panels float and slide in from their edge under the app bar, a button each in the bar
   (.app-bar-sheet). Under 600 px the phone layout above takes over instead: never both. */
html.cc-sheets body.app-shell > main > aside.cc-sheet {
  position: fixed !important; top: var(--cc-sheet-top, 0) !important; bottom: var(--cc-sheet-bottom, 0) !important;
  height: auto !important; width: min(24rem, 85vw) !important; max-width: none !important; z-index: 60;
  visibility: hidden; overflow: auto; background: var(--sheet); border: 0 solid var(--line);
}
html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-left { left: 0 !important; right: auto !important; border-right-width: var(--pen-2); transform: translateX(-102%); }
html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-right { right: 0 !important; left: auto !important; border-left-width: var(--pen-2); transform: translateX(102%); }
html.cc-sheets body.app-shell > main > aside.cc-sheet.cc-open { visibility: visible; transform: none; }
@media (prefers-reduced-motion: no-preference) { html.cc-sheets body.app-shell > main > aside.cc-sheet { transition: transform .18s ease, visibility .18s; } }
.app-bar-sheet[hidden] { display: none !important; }
.app-bar-sheet[aria-pressed="true"] { color: var(--sheet); background: var(--ink); }
/* upright, the app bar keeps one row with the panel buttons: the About links and the version chip step aside */
html.cc-sheets .app-bar-links, html.cc-sheets .app-bar-ver { display: none !important; }

/* Toolbars: one row each that scrolls sideways (never wraps); at most two lines on a phone — the toolbar and the active
   tool's options. Hidden with Tools; at the bottom with Move. On a compact screen: icons first, labels .75rem or smaller,
   every button still 2.75rem tall. */
html.cc-phone .shell-phone-tb {
  display: flex !important; flex-wrap: nowrap !important; align-items: stretch; max-height: none !important;
  overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; scrollbar-width: thin;
}
/* the toolbar holds its own hidden words (position: absolute), so they scroll with it instead of widening the page */
html.cc-phone .shell-phone-tb:not(.shell-phone-tb-over) { position: relative; }
html.cc-phone .shell-phone-tb > *, html.cc-phone .shell-phone-tb [class$="-tool-row"] > * { flex: 0 0 auto !important; }
html.cc-phone .shell-phone-tb [class$="-tool-row"] { flex-wrap: nowrap !important; }
html.cc-phone .shell-phone-tb [class$="-tool-label"] { white-space: nowrap; overflow: visible; text-overflow: clip; }
html.cc-phone.cc-tb-closed .shell-phone-tb { display: none !important; }
html.cc-phone .shell-phone-tb-over { left: .25rem !important; right: .25rem !important; max-width: calc(100% - .5rem) !important; }
html.cc-phone.cc-tb-bottom .shell-phone-tb-over { top: auto !important; bottom: .25rem !important; }
html.cc-compact .shell-phone-tb { font-size: .75rem; }
html.cc-phone .shell-phone-tb > [role="group"] { padding-block: .1rem !important; }
/* on a phone (and a fold's inner screen) group names give way (the groups keep their dividers; each tool keeps its title
   and words for screen readers): the toolbar is one row of 2.75rem icon buttons */
html.cc-phone body:not(.shell-arranging) .shell-phone-tb [class$="-tool-label"] { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary):has(> .bi) > span {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary) {
  min-width: 2.75rem; min-height: 2.75rem; justify-content: center; font-size: .75rem !important; white-space: nowrap;
}
html.cc-phone .shell-phone-tb :is(button:not([role="menuitem"]), summary) > .bi { font-size: 1.15rem; }
html.cc-compact .shell-phone-tb select, html.cc-compact .shell-phone-tb input { font-size: .75rem; }
/* a toolbar's own menus open over the page (the sideways scroll would clip them) */
html.cc-phone .shell-phone-pop, html.cc-touch .shell-phone-pop {
  position: fixed !important; z-index: 1055 !important; left: var(--pop-x, .25rem) !important; right: auto !important;
  top: var(--pop-y, auto) !important; bottom: var(--pop-b, auto) !important; max-width: calc(100vw - .5rem) !important;
  max-height: min(60dvh, 26rem) !important; overflow-y: auto !important;
}

/* Touch tablets (html.cc-touch: pointer coarse, not a phone): the app's own layout, but each toolbar is one row that scrolls
   sideways instead of wrapping onto two or three lines — unless Settings › General › Toolbar says "Wrap" (data-shell-tb-touch).
   The button style and group-name settings still apply. */
html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb {
  flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important;
  overscroll-behavior-x: contain; scrollbar-width: thin; position: relative;
}
html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb > *,
html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb [class$="-tool-row"] > * { flex: 0 0 auto !important; }
html.cc-touch body:not([data-shell-tb-touch="wrap"]) .shell-touch-tb [class$="-tool-row"] { flex-wrap: nowrap !important; }

/* Tool-option bars: one line that scrolls sideways (the second toolbar line). */
html.cc-phone .shell-phone-opts {
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
  overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap; scrollbar-width: thin;
}
html.cc-phone .shell-phone-opts > * { flex: 0 0 auto !important; }
html.cc-compact .shell-phone-opts { font-size: .75rem !important; }
html.cc-compact .shell-phone-opts :is(select, input, button) { font-size: .75rem !important; }

/* Hints: one line; a tap shows all of it. */
html.cc-compact .shell-phone-hint:not(.is-expanded) {
  max-height: 2.25rem !important; overflow: hidden !important; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
html.cc-compact .shell-phone-hint { font-size: .75rem !important; pointer-events: auto !important; }

/* The status line: one line that scrolls sideways. */
html.cc-phone .shell-phone-status { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap; scrollbar-width: none; }
html.cc-compact .shell-phone-status { font-size: .75rem; }

/* The view cube / axis icon (viewcube.js, every 3D app): small, in the drawing's lower right corner — never over a hint. */
html.cc-phone :is(.cc-vc, .cc-axes) { top: auto !important; left: auto !important; right: .35rem !important; bottom: .35rem !important; }
html.cc-phone .cc-vc, html.cc-phone .cc-vc svg { width: 4.75rem !important; }
html.cc-phone .cc-vc svg { height: 4.75rem !important; }

/* Dialogs fit the screen (and the part of it above the keyboard). */
html.cc-phone dialog[open] {
  max-width: calc(100vw - 1rem) !important; max-height: calc(var(--cc-vvh, 100dvh) - 1rem) !important; overflow: auto;
}
html.cc-compact dialog[open] { min-width: 0 !important; }

/* A hinge (two viewport segments): dialogs and the command line keep to one segment; the drawing may span it. */
html.cc-fold-h dialog[open]:modal, html.cc-fold-v dialog[open]:modal {
  inset: var(--cc-seg-y) var(--cc-seg-r) var(--cc-seg-b) var(--cc-seg-x) !important; margin: auto !important;
  max-width: calc(var(--cc-seg-w) - 1rem) !important; max-height: calc(var(--cc-seg-h) - 1rem) !important;
}
html.cc-fold-h .shell-phone-whole { margin-left: var(--cc-seg-x) !important; width: var(--cc-seg-w) !important; max-width: var(--cc-seg-w) !important; }
/* The app bar on a short sideways phone (wider than 760 px, so the narrow rules above do not apply), and wherever app-phone.js
   finds it too full for its window (html.cc-bar-narrow: tablets turned sideways, 800–1104 px): the same "More" layout. */
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-links { display: none; }
html.cc-compact .app-bar { min-height: 0; padding-block: .15rem; }   /* every pixel goes to the drawing */
:is(html.cc-phone, html.cc-bar-narrow) .app-bar { gap: .35rem; padding-inline: .5rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-mark, :is(html.cc-phone, html.cc-bar-narrow) .app-bar-name > .app-bar-ver, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-older,
:is(html.cc-phone, html.cc-bar-narrow) .app-bar > .space-toggle, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-palette { display: none; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-name { flex: 1 1 auto; min-width: 0; gap: .4rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-name > span:not(.layer-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-area { flex: 0 0 auto; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-btn, :is(html.cc-phone, html.cc-bar-narrow) .app-bar > .app-bar-fs, :is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: .2rem .45rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more { display: block; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary {
  display: inline-flex; align-items: center; list-style: none; cursor: pointer;
  color: var(--ink); border: var(--pen-1) solid var(--ink); border-radius: var(--radius);
}
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary::-webkit-details-marker { display: none; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more > summary .bi { font-size: 1.1rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more[open] > summary { color: var(--sheet); background: var(--ink); }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-menu {
  position: absolute; z-index: 70; top: calc(100% + .3rem); right: 0;
  width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  padding: .25rem 0; background: var(--sheet-2); color: var(--ink);
  border: var(--pen-2) solid var(--ink); border-radius: var(--radius); font-size: var(--fs-sm);
}
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 2.75rem; padding: 0 .9rem;
  font: inherit; font-weight: 600; text-align: left; color: var(--ink); text-decoration: none;
  background: transparent; border: 0; border-left: var(--pen-3) solid transparent;
}
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item:hover { background: var(--sheet); text-decoration: underline; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item .bi { color: var(--layer); }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item[aria-current="page"] { font-weight: 700; border-left-color: var(--layer); }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-item .n { margin-left: auto; color: var(--ink-2); font-weight: 500; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar:has(.app-bar-palette[hidden]) .app-bar-more-find { display: none; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-h { margin: .4rem 0 0; padding: .35rem .9rem 0; border-top: var(--pen-1) solid var(--line); font-size: .75rem; font-weight: 700; color: var(--ink-2); }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-ver { margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more-note { margin: 0; padding: .5rem .9rem; color: var(--ink-2); }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle { display: flex; margin: .3rem .9rem .5rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle button { flex: 1 1 0; min-height: 2.75rem; }
:is(html.cc-phone, html.cc-bar-narrow) .app-bar-more .space-toggle + .app-bar-more-item { border-top: var(--pen-1) solid var(--line); }
/* The staff panel's tab (staff-panel.inc; staff and lab testers only) would sit on the bar's first button: above the bar. */
html.cc-phone .sp-tab { bottom: 3.35rem !important; left: .35rem !important; padding: .2rem .45rem !important; font-size: .75rem !important; opacity: .8; }
/* The status line's own toggles stay one short row on a compact screen. */
html.cc-compact .shell-phone-status :is(button, select, summary) { min-height: 2.25rem !important; padding-block: .1rem !important; font-size: .75rem; }