/* The look every app shares (docs/app-runtime.md "Look"). Each app's own stylesheet is served inside the app layer
   (AppsController#asset), and the rules here sit outside any layer, so they win over the app's whatever its
   selectors: the platform paints the components and the header, the app lays its pages out. These rules set paint
   (fonts, colors, backgrounds, borders, corners, shadows, and how tall a control is), never where things go. */
@layer toolcmd-base, app;
/* The two fonts, for the console and for apps: Space Grotesk for everything, Space Mono for machine text only. */
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/space-mono-400-latin-2fb0d22d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/space-mono-400-latin-ext-14c0b98f.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/space-mono-700-latin-27e084bd.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/space-mono-700-latin-ext-beb3bf87.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/space-grotesk-latin-3b2bde23.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/space-grotesk-latin-ext-8021ab76.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Inter sets the text of documents (a note, a page of writing): made for long reading on screens. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/inter-latin-496a588b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/inter-latin-ext-5a6754fc.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The colors and fonts, for apps to use through var(). A white page; cards and fields framed by soft lines. */
.generated-app {
  --toolcmd-panel: #ffffff; --toolcmd-module: #ffffff; --toolcmd-field: #ffffff; --toolcmd-hover: #f2f1ee;
  --toolcmd-line: #e8e6e1; --toolcmd-line-strong: #d9d6cf;
  --toolcmd-ink: #1c1b19; --toolcmd-muted: #6b6963; --toolcmd-accent: #ff4f00; --toolcmd-accent-text: #a33600; --toolcmd-danger: #a3321e;
  --toolcmd-tint-gray: #dddcd6; --toolcmd-tint-blue: #d6e2ee; --toolcmd-tint-green: #d9e7d3; --toolcmd-tint-yellow: #f1e6c2;
  --toolcmd-tint-red: #f0d6cf; --toolcmd-tint-purple: #e3dbee;
  --toolcmd-radius: 8px; --toolcmd-radius-lg: 10px; --toolcmd-shadow: none;
  --toolcmd-mono: "Space Mono", monospace;
  --toolcmd-sans: "Space Grotesk", sans-serif;
  --toolcmd-text: "Inter", sans-serif;
  min-width: 0; background: var(--toolcmd-panel); color: var(--toolcmd-ink); font-family: var(--toolcmd-sans); font-size: 16px; line-height: 1.5;
}
/* One font for the app, in sentence case: Space Mono only for machine text people copy (code, or .mono on an id), and
   Inter only for the text of a document (the page editor and .document, below). */
.generated-app * { font-family: var(--toolcmd-sans); letter-spacing: normal; text-transform: none; }
.generated-app :is(code, kbd, samp, pre, .mono), .generated-app :is(code, kbd, samp, pre, .mono) * { font-family: var(--toolcmd-mono); }
.generated-app [hidden]:not([hidden="until-found"]) { display: none !important; }
.generated-app img[src*="/uploads/"]:not([data-no-viewer]) { cursor: zoom-in; }

/* Buttons: small, plain, and dark, like a panel's Save in its top bar. Every button looks the same: `primary` still
   marks the one main action (a panel's Save is made from it) and a destructive one is filled in the danger color. The
   other names are the ones apps used before. */
.generated-app :is(a, button, input, label):is(.button, .primary, .button-main, .main-action, .danger, .button-danger, .danger-button), .generated-app .app-panel .app-panel-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; height: 30px; padding: 0 12px;
  border: 0; border-radius: var(--toolcmd-radius); background: var(--toolcmd-ink); box-shadow: none; color: #fff;
  font-size: 14px; font-weight: 600; line-height: 30px; text-decoration: none; text-shadow: none; white-space: nowrap; cursor: pointer;
}
.generated-app :is(a, button, input, label):is(.button, .primary, .button-main, .main-action, .danger, .button-danger, .danger-button):is(:hover, :focus-visible), .generated-app .app-panel .app-panel-dark:is(:hover, :focus-visible) { background: #3a3935; }
.generated-app :is(a, button, input, label):is(.button, .primary, .button-main, .main-action, .danger, .button-danger, .danger-button):focus-visible, .generated-app .app-panel .app-panel-dark:focus-visible { outline: 2px solid var(--toolcmd-ink); outline-offset: 2px; }
.generated-app :is(a, button, input, label):is(.button, .primary, .button-main, .main-action, .danger, .button-danger, .danger-button):disabled, .generated-app .app-panel .app-panel-dark:disabled { opacity: .5; cursor: default; }
.generated-app :is(a, button, input, label):is(.danger, .button-danger, .danger-button) { background: var(--toolcmd-danger); }
.generated-app :is(a, button, input, label):is(.danger, .button-danger, .danger-button):is(:hover, :focus-visible) { background: #852818; }
.generated-app :is(button, input):disabled { opacity: .5; cursor: not-allowed; }
/* A data-notifications button that can't work here says what to do instead, as a quiet line. */
.generated-app button[data-notifications].app-notifications-hint { display: block; height: auto; padding: 0; border: 0; background: none; color: var(--toolcmd-muted); font-size: 13px; font-weight: 400; line-height: 1.5; white-space: normal; text-align: left; cursor: default; }
.generated-app :is(a, button, input[type=submit], input[type=button], input[type=checkbox], input[type=radio], label, summary, [tabindex]):focus-visible { outline: 2px solid var(--toolcmd-ink); outline-offset: 2px; }

/* Fields: white, a stronger line than the dividers, ink edge and a soft ring while typing. Their width is the app's. */
.generated-app :is(input:not([type]), input:is([type=text], [type=search], [type=email], [type=url], [type=tel], [type=password], [type=number], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea) {
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--toolcmd-line-strong); border-radius: var(--toolcmd-radius);
  background: var(--toolcmd-field); color: var(--toolcmd-ink); box-shadow: none; font-size: 16px; font-weight: 400; line-height: 1.4;
}
.generated-app textarea { line-height: 1.5; }
.generated-app :is(input:not([type]), input:is([type=text], [type=search], [type=email], [type=url], [type=tel], [type=password], [type=number], [type=date], [type=time], [type=datetime-local], [type=month], [type=week]), select, textarea):is(:focus, :focus-visible) { outline: none; border-color: var(--toolcmd-ink); box-shadow: 0 0 0 3px #1c1b1914; }
.generated-app :is(input, textarea)::placeholder { color: #9b9890; font-size: inherit; opacity: 1; }
/* The page editor: a writing app's one text area (a note, a document) is the page itself, with no line, corners,
   field color, or ring, while typing too; the app makes it fill the content area. Its text is a document's (Inter at
   17px) across its full width. */
.generated-app textarea.page-editor { min-height: 0; padding: 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-family: var(--toolcmd-text); font-size: 17px; line-height: 1.65; resize: none; }
.generated-app textarea.page-editor:is(:focus, :focus-visible) { outline: none; border: 0; box-shadow: none; }
/* Line results (line_results.js): the lines fill the page in the mono face, and each line's result stands at the right
   end of its line in a quiet green, with a muted total under them, like Numi. The editor needs no layout of its own
   beyond the page editor's; it is at least a few lines tall wherever it is put. */
.generated-app .line-results-editor { position: relative; flex: 1 1 auto; min-width: 0; min-height: 160px; }
.generated-app .line-results-editor > textarea.page-editor { position: absolute; inset: 0; width: 100%; height: 100%; padding-right: calc(var(--line-results-width, 96px) + 48px); font-family: var(--toolcmd-mono); font-size: 16px; line-height: 1.75; }
.generated-app .line-results { position: absolute; top: 0; right: 0; bottom: 0; width: calc(var(--line-results-width, 96px) + 24px); overflow: hidden; pointer-events: none; }
.generated-app .line-results-item { position: absolute; right: 24px; max-width: var(--line-results-width, 96px); overflow: hidden; color: #2f7d32; font-family: var(--toolcmd-mono); font-size: 16px; line-height: 1.75; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.generated-app .line-results-mirror { position: absolute; top: 0; left: 0; box-sizing: border-box; visibility: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; }
.generated-app .line-results-total { margin: 0; padding: 6px 24px 14px; color: var(--toolcmd-muted); font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
.generated-app .line-results-total:empty { display: none; }
.generated-app .line-results-alert { margin: 0; padding: 6px 24px 0; color: var(--toolcmd-danger); font-size: 14px; }
.generated-app :not(textarea)[data-line-results], .generated-app [data-line-total] { display: none !important; }
/* The rich page editor (rich_editor.js) is the same page with its text drawn as it reads: a document's headings,
   lists, quotes, and code (below), across the full width; it scrolls by itself. A checklist's done items are muted
   and struck through. Selecting text shows a small white menu above it, the active styles in ink. */
.generated-app .rich-editor { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: transparent; }
.generated-app .rich-editor-text { flex: 1 0 auto; box-sizing: border-box; padding: 24px; outline: none; color: var(--toolcmd-ink); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; font-synthesis: style; }
.generated-app .rich-editor .rich-editor-text:is(:focus, :focus-visible) { outline: none; }
.generated-app .rich-editor-text li p { margin: 0; }
.generated-app .rich-editor-text ul[data-type="taskList"] { padding-left: 2px; list-style: none; }
.generated-app .rich-editor-text ul[data-type="taskList"] > li { display: flex; align-items: flex-start; gap: 10px; }
.generated-app .rich-editor-text ul[data-type="taskList"] > li > label { flex: none; margin: 0; line-height: 1.65; }
.generated-app .rich-editor-text ul[data-type="taskList"] > li > label input { width: 16px; height: 16px; margin: 0; vertical-align: -2px; cursor: pointer; }
.generated-app .rich-editor-text ul[data-type="taskList"] > li > div { flex: 1; min-width: 0; }
.generated-app .rich-editor-text ul[data-type="taskList"] > li[data-checked="true"] > div { color: var(--toolcmd-muted); text-decoration: line-through; }
.generated-app .rich-editor-text p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: #9b9890; pointer-events: none; }
.generated-app .rich-editor-menu { z-index: 50; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--toolcmd-line); border-radius: var(--toolcmd-radius-lg); background: var(--toolcmd-module); box-shadow: 0 8px 24px #1c1b1924; }
.generated-app .rich-editor-menu button { min-width: 30px; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--toolcmd-ink); font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; }
.generated-app .rich-editor-menu button:hover { background: var(--toolcmd-hover); }
.generated-app .rich-editor-menu button[aria-pressed="true"] { background: var(--toolcmd-ink); color: #fff; }
/* "/" on an empty line: the kinds of line it can become, in a small white list under it, each with its Markdown. */
.generated-app .rich-editor-slash { z-index: 50; box-sizing: border-box; min-width: 200px; max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid var(--toolcmd-line); border-radius: var(--toolcmd-radius-lg); background: var(--toolcmd-module); box-shadow: 0 8px 24px #1c1b1924; }
.generated-app .rich-editor-slash-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: 6px; color: var(--toolcmd-ink); font-size: 14px; line-height: 1.4; cursor: pointer; }
.generated-app .rich-editor-slash-item[aria-selected="true"] { background: var(--toolcmd-hover); }
.generated-app .rich-editor-slash-hint { color: var(--toolcmd-muted); font-size: 12px; }
.generated-app input:is([type=checkbox], [type=radio]) { accent-color: var(--toolcmd-ink); }
/* Shared to view only: a locked form keeps its values legible, on the hover gray, without its buttons; add and remove
   links are gone. */
.generated-app form.app-locked :is(button, input[type=submit], input[type=button], input[type=reset]), .generated-app .app-locked-hidden { display: none !important; }
.generated-app form.app-locked :is(input, select, textarea):disabled { opacity: 1; background: var(--toolcmd-hover); color: var(--toolcmd-ink); cursor: default; }
.generated-app form.app-locked input:is([type=checkbox], [type=radio]):disabled { opacity: .7; }
.generated-app form.app-locked textarea.page-editor:disabled { background: transparent; }
/* Labels name the field above it; a label around a checkbox reads as the choice's own text. */
.generated-app label { color: var(--toolcmd-ink); font-size: 14px; font-weight: 500; }
.generated-app label:has(> input:is([type=checkbox], [type=radio])), .generated-app :is(input[type=checkbox], input[type=radio]) + label { font-size: 16px; font-weight: 400; }
.generated-app .hint { color: var(--toolcmd-muted); font-size: 14px; font-weight: 400; }
/* What went wrong reads as danger text, without a box around it. */
.generated-app :is([role=alert], .errors, .error, .alert) { border: 0; background: none; box-shadow: none; color: var(--toolcmd-danger); font-weight: 500; }

/* A document: a page of writing shown formatted (a note, an article, Markdown turned into HTML). Inter at 17px with room
   between lines, in a centered column about 70 characters wide, with its headings, lists, quotes, code, and rules. */
.generated-app .document { box-sizing: border-box; width: 100%; max-width: 720px; margin: 0 auto; color: var(--toolcmd-ink); font-size: 17px; line-height: 1.65; overflow-wrap: break-word; font-synthesis: style; }
.generated-app :is(.document, .rich-editor-text), .generated-app :is(.document, .rich-editor-text) * { font-family: var(--toolcmd-text); }
.generated-app :is(.document, .rich-editor-text) :is(code, kbd, samp, pre), .generated-app :is(.document, .rich-editor-text) :is(code, kbd, samp, pre) * { font-family: var(--toolcmd-mono); }
.generated-app :is(.document, .rich-editor-text) > :first-child { margin-top: 0; }
.generated-app :is(.document, .rich-editor-text) > :last-child { margin-bottom: 0; }
.generated-app :is(.document, .rich-editor-text) :is(h1, h2, h3, h4, h5, h6) { color: var(--toolcmd-ink); line-height: 1.3; letter-spacing: -0.01em; }
.generated-app :is(.document, .rich-editor-text) h1 { margin: 36px 0 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.generated-app :is(.document, .rich-editor-text) h2 { margin: 32px 0 10px; font-size: 23px; font-weight: 650; }
.generated-app :is(.document, .rich-editor-text) h3 { margin: 26px 0 8px; font-size: 19px; font-weight: 600; }
.generated-app :is(.document, .rich-editor-text) :is(h4, h5, h6) { margin: 22px 0 6px; font-size: 17px; font-weight: 600; }
.generated-app :is(.document, .rich-editor-text) :is(p, ul, ol, blockquote, pre, table, figure) { margin: 0 0 16px; }
.generated-app :is(.document, .rich-editor-text) :is(ul, ol) { padding-left: 26px; }
.generated-app :is(.document, .rich-editor-text) li { margin: 4px 0; }
.generated-app :is(.document, .rich-editor-text) li > :is(ul, ol) { margin: 4px 0 0; }
.generated-app :is(.document, .rich-editor-text) li::marker { color: var(--toolcmd-muted); }
.generated-app :is(.document, .rich-editor-text) strong { font-weight: 650; }
.generated-app :is(.document, .rich-editor-text) a { color: var(--toolcmd-ink); text-decoration: underline; text-decoration-color: var(--toolcmd-line-strong); text-underline-offset: 3px; }
.generated-app :is(.document, .rich-editor-text) a:hover { text-decoration-color: var(--toolcmd-ink); }
.generated-app :is(.document, .rich-editor-text) blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--toolcmd-line-strong); color: var(--toolcmd-muted); }
.generated-app :is(.document, .rich-editor-text) :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--toolcmd-hover); font-size: 0.86em; }
.generated-app :is(.document, .rich-editor-text) pre { overflow-x: auto; padding: 12px 14px; border-radius: var(--toolcmd-radius); background: var(--toolcmd-hover); font-size: 14px; line-height: 1.55; }
/* A calculator block in the rich editor: its own light tint, each line's result at the right end of the line in a quiet
   green, and the total under the last line. */
.generated-app .rich-editor-text pre.rich-editor-calc { position: relative; overflow: visible; --calc-room: 150px; padding: 12px var(--calc-room) 12px 16px; border: 1px solid #dde8d8; background: #f3f8f0; white-space: pre-wrap; overflow-wrap: break-word; font-size: 15px; line-height: 1.7; }
.generated-app .rich-editor-text pre.rich-editor-calc code { white-space: inherit; }
.generated-app .rich-editor-calc-result { position: absolute; right: 16px; max-width: calc(var(--calc-room) - 24px); overflow: hidden; color: #2f7d32; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; user-select: none; }
.generated-app .rich-editor-text pre.rich-editor-calc:not([data-total=""])::after { content: attr(data-total); display: block; margin: 8px calc(16px - var(--calc-room)) 0 0; padding-top: 6px; border-top: 1px solid #dde8d8; color: var(--toolcmd-muted); font-size: 14px; text-align: right; }
.generated-app .rich-editor-text .rich-editor-calc-rates { margin: -12px 0 0; color: var(--toolcmd-muted); font-size: 13px; text-align: right; user-select: none; }
.generated-app .rich-editor-text .rich-editor-calc-rates a { color: inherit; }
.generated-app :is(.document, .rich-editor-text) hr { margin: 28px 0; border: 0; border-top: 1px solid var(--toolcmd-line); }
.generated-app :is(.document, .rich-editor-text) img { max-width: 100%; height: auto; border-radius: var(--toolcmd-radius); }

/* A module groups content: white, a soft line, round corners, a faint shadow. Inside a popup, which is already
   white, modules lose their frame and a line separates them. */
.generated-app .module { border: 1px solid var(--toolcmd-line); border-radius: var(--toolcmd-radius-lg); background: var(--toolcmd-module); box-shadow: var(--toolcmd-shadow); }
.generated-app .app-panel .module { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.generated-app .app-panel .module + .module { border-top: 1px solid var(--toolcmd-line); }
.generated-app :is(.section-label, .group-label, h2.label, h3.label) { color: var(--toolcmd-muted); font-size: 14px; font-weight: 600; }
/* Tables: a quiet header row, ink cells. Their lines and spacing come from the app or the platform's defaults. */
.generated-app :is(thead th, th[scope=col]) { background: none; color: var(--toolcmd-muted); font-size: 14px; font-weight: 400; }
.generated-app :is(td, tbody th) { color: var(--toolcmd-ink); }
/* The add line at the end of a list or column: muted words, a tint on hover. */
.generated-app :is(.add-line, .add-card, .add-row) { border: 0; border-radius: var(--toolcmd-radius); background: transparent; box-shadow: none; color: var(--toolcmd-muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.generated-app :is(.add-line, .add-card, .add-row):is(:hover, :focus-visible) { background: var(--toolcmd-hover); color: var(--toolcmd-ink); }
/* A list's add line inside its card is the card's last row: full width, under the rows' line, in its bottom corners. */
.generated-app .module > .add-line:last-child { display: flex; width: 100%; border-radius: 0 0 var(--toolcmd-radius-lg) var(--toolcmd-radius-lg); }
.generated-app .module > * + .add-line:last-child { border-top: 1px solid var(--toolcmd-line); }
.generated-app .module > .add-line:only-child { border-radius: var(--toolcmd-radius-lg); }
/* Tabs inside a page look like the header's menu: quiet links, the current one on a light gray pill. */
.generated-app .tabs a { min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--toolcmd-radius); background: transparent; box-shadow: none; color: var(--toolcmd-muted); font-size: 14px; font-weight: 500; line-height: 1.4; text-decoration: none; }
.generated-app .tabs a:is(:hover, :focus-visible) { background: var(--toolcmd-hover); color: var(--toolcmd-ink); }
.generated-app .tabs a:is([aria-current], .current) { background: var(--toolcmd-hover); color: var(--toolcmd-ink); font-weight: 600; }

/* A page opened from a data-panel link: a popup over the page on the web, a full-screen panel on phones. */
.generated-app .app-panel { width: min(640px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 64px); padding: 0; border: 1px solid var(--toolcmd-line); border-radius: 14px; background: var(--toolcmd-module); color: var(--toolcmd-ink); box-shadow: 0 20px 50px #1c1b1926, 0 2px 8px #1c1b190f; overflow: hidden; }
.generated-app .app-panel[open] { display: flex; flex-direction: column; }
.generated-app .app-panel::backdrop { background: #1c1b1940; }
.generated-app .app-panel-head { display: flex; flex: none; align-items: center; gap: 12px; min-height: 56px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--toolcmd-line); }
.generated-app .app-panel-title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 16px; font-weight: 600; }
.generated-app .app-panel-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--toolcmd-radius); background: transparent; box-shadow: none; color: var(--toolcmd-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.generated-app .app-panel-close:hover { background: var(--toolcmd-hover); color: var(--toolcmd-ink); }
.generated-app .app-panel-body { min-height: 0; overflow-y: auto; padding: 20px; }
/* A panel's Save sits in its top bar, left of ×, which is its Cancel: the form's own submit button and Cancel or
   Back links hide. × with changes asks first, in a box over the panel. */
.generated-app .app-panel .app-panel-hidden { display: none !important; }
/* The panel's one action, beside its ×: a button like every other (Buttons, above). */
.generated-app .app-panel-head .app-panel-save { flex: none; max-width: 45%; }
.generated-app .app-panel-head .app-panel-save[hidden] { display: none; }
.generated-app .app-panel .app-panel-cancel { display: inline-flex; align-items: center; min-height: 30px; margin-left: 16px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--toolcmd-muted); font-size: 15px; font-weight: 500; text-decoration: none; vertical-align: middle; cursor: pointer; }
.generated-app .app-panel .app-panel-cancel:is(:hover, :focus-visible) { color: var(--toolcmd-ink); text-decoration: underline; }
.generated-app .app-panel-confirm { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background: #ffffffd9; }
.generated-app .app-panel-confirm[hidden] { display: none; }
.generated-app .app-panel-confirm-box { width: min(360px, 100%); padding: 20px; border: 1px solid var(--toolcmd-line); border-radius: 12px; background: var(--toolcmd-module); box-shadow: 0 12px 32px #1c1b1926; }
.generated-app .app-panel-confirm-box p { margin: 0 0 16px; font-size: 16px; font-weight: 600; }
.generated-app .app-panel-actions { display: flex; flex-wrap: wrap; align-items: center; }
.generated-app .app-panel-actions .app-panel-cancel:first-of-type { margin-left: 16px; }
.generated-app .app-panel-error { margin: 0 0 12px; color: var(--toolcmd-danger); }
/* On phones a panel is still a popup: it fills the app's space but for a small margin, where the dimmed page shows
   and a tap closes it. */
@media (max-width: 767px) {
  .generated-app .app-panel { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: none; margin: auto; }
}

/* The top of every app looks the same (docs/app-runtime.md "Presentation"): the title with its icon on the left, and
   the app's views as quiet links on the right, the current one on a light gray pill. The header is short, on the page's
   white with no line under it, and stays at the top while the page scrolls under it. Apps decide only what the menu holds. */
.generated-app .app-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 4px 20px; border: 0; background: var(--toolcmd-panel); box-shadow: none; color: var(--toolcmd-ink); font-size: 15px; }
/* Shared with the person: by whom, quietly after the title. */
.generated-app .app-shared-by { flex: none; margin-left: 6px; color: var(--toolcmd-muted); font-size: 13px; font-weight: 400; white-space: nowrap; }
/* ⋯, the platform's, at the header's right end: the page's occasional actions and Settings, in a small menu under it. */
.generated-app .app-header.app-header-overflow { padding-right: 60px; }
.generated-app .app-overflow { position: absolute; top: 50%; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--toolcmd-ink); transform: translateY(-50%); cursor: pointer; }
.generated-app .app-overflow:is(:hover, :focus-visible, [aria-expanded="true"]) { background: var(--toolcmd-hover, #0000000d); outline: none; }
.generated-app .app-overflow .icon { width: 20px; height: 20px; }
.generated-app .app-overflow-menu { position: absolute; top: calc(100% - 2px); right: 10px; z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: 4px 0; border: 1px solid var(--toolcmd-line); border-radius: 10px; background: var(--toolcmd-module, #fff); box-shadow: 0 10px 30px #1c1b1924; }
.generated-app .app-overflow-menu button { display: block; width: 100%; min-height: 40px; padding: 8px 14px; border: 0; background: none; color: var(--toolcmd-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.generated-app .app-overflow-menu button:is(:hover, :focus-visible) { background: var(--toolcmd-hover, #0000000d); outline: none; }
.generated-app .app-overflow-separator { height: 1px; margin: 4px 0; background: var(--toolcmd-line); }
.generated-app .app-brand { display: flex; align-items: center; min-width: 0; gap: 8px; color: inherit; font-size: 15px; line-height: 1.4; text-decoration: none; }
.generated-app .app-brand strong { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
/* The app's name, for people who can rename it, goes home on a click and edits in place on a double-click: a light
   gray hover, and a soft field while editing. */
.generated-app .app-brand strong[data-rename] { margin: -3px -6px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.generated-app .app-brand strong[data-rename]:hover { background: var(--toolcmd-hover); }
.generated-app .app-brand strong.app-brand-renaming { cursor: text; background: var(--toolcmd-field); box-shadow: 0 0 0 1px var(--toolcmd-ink), 0 0 0 4px #1c1b1914; outline: none; white-space: nowrap; }
.generated-app .app-brand strong.app-brand-renaming.invalid { box-shadow: 0 0 0 1px var(--toolcmd-danger), 0 0 0 4px #a3321e1f; }
.generated-app .app-brand-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.generated-app .app-menu { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; font-size: 14px; }
.generated-app .app-menu a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--toolcmd-radius); background: transparent; box-shadow: none; color: var(--toolcmd-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.generated-app .app-menu a:is(:hover, :focus-visible) { background: var(--toolcmd-hover); color: var(--toolcmd-ink); }
.generated-app .app-menu a[aria-current="page"] { background: var(--toolcmd-hover); color: var(--toolcmd-ink); font-weight: 600; }

/* When the app can't show its page (it's updating, or its code failed), the platform draws the app's header and,
   under it, a notice on a white sheet: a spinner, what's happening, and Try again. */
.generated-app.app-runtime-notice { min-height: 100dvh; }
.generated-app.app-runtime-notice .app-content { padding: 20px; }
.generated-app.app-runtime-notice .app-brand-icon svg { display: block; width: 100%; height: 100%; }
.generated-app .app-content .app-notice { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0; padding: 20px; border: 1px solid var(--toolcmd-line); border-radius: var(--toolcmd-radius-lg); background: var(--toolcmd-module); box-shadow: var(--toolcmd-shadow); color: var(--toolcmd-ink); font-weight: 400; }
.generated-app .app-notice > div { flex: 1; min-width: 0; }
.generated-app .app-notice strong { display: block; font-weight: 600; }
.generated-app .app-notice p { margin: 2px 0 0; color: var(--toolcmd-muted); font-size: 15px; }
.generated-app .app-notice[role=alert] strong { color: var(--toolcmd-danger); }
.generated-app .app-notice-spinner { flex: none; width: 20px; height: 20px; border: 2px solid var(--toolcmd-line-strong); border-top-color: var(--toolcmd-accent); border-radius: 50%; animation: app-notice-spin 0.9s linear infinite; }
@keyframes app-notice-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .generated-app .app-notice-spinner { animation: none; } }
@media (max-width: 700px) { .generated-app .app-content .app-notice { flex-wrap: wrap; } .generated-app .app-notice > .button { width: 100%; } }