pgkiln 0.46.0 → 0.48.0

package/public/worksheet.css

@@ -0,0 +1,293 @@
+/* pgkiln builder: the SQL Worksheet (sprint 91, src/builder/worksheet.ts, public/worksheet.js).
+   Narrow screens and pages without script: the panes stack and the page scrolls. With script on wide
+   screens: navigator | editor over output tabs, filling the window, with a status bar at the bottom. */
+.ws-page { display: flex; flex-direction: column; padding: 8px 10px 0; background: var(--bg); }
+.ws-page > .sw-tabs { margin-bottom: 6px; }
+.ws { --ws-nav: 280px; --ws-out: 42vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface);
+  border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
+.ws-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
+.ws-nav { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
+.ws-nav-head { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border); }
+.ws-nav-head select { min-width: 0; font-size: 13px; }
+.ws-nav-search { grid-column: 1 / -1; display: flex; gap: 6px; }
+.ws-nav-search input { flex: 1; min-width: 0; font-size: 13px; }
+.ws-nav-body { min-height: 0; max-height: 40vh; overflow: auto; padding: 4px 0; font-size: 13px; }
+.ws-nav-body[aria-busy=true] { opacity: 0.6; }
+.ws-nav-empty { padding: 8px 12px; margin: 0; }
+.ws-tree, .ws-cols { list-style: none; margin: 0; padding: 0; }
+.ws-obj > a, .ws-obj > details > summary { display: flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--text); text-decoration: none; cursor: pointer; min-width: 0; }
+.ws-obj > details > summary { list-style: none; }
+.ws-obj > details > summary::-webkit-details-marker { display: none; }
+.ws-obj > details > summary::before { content: '▸'; color: var(--muted); width: 0.8em; flex: none; }
+.ws-obj > details[open] > summary::before { content: '▾'; }
+.ws-obj > a { padding-left: calc(10px + 0.8em + 6px); }
+.ws-obj > a:hover, .ws-obj > details > summary:hover { background: var(--surface-3); }
+.ws-obj > a span, .ws-obj > details > summary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-obj .icon { width: 14px; height: 14px; flex: none; color: var(--muted); }
+.ws-obj .tag { margin-left: auto; font-size: 10px; }
+.ws-obj > details > summary[draggable=true] { cursor: grab; }
+.ws-cols li { display: flex; align-items: center; gap: 6px; padding: 1px 10px 1px 34px; min-width: 0; }
+.ws-cols small { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
+.ws-cols .icon { width: 12px; height: 12px; }
+.ws-obj-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px 34px; }
+.ws-obj-actions .btn { font-size: 11px; padding: 1px 6px; }
+
+.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
+.ws-toolbar .btn { display: inline-flex; align-items: center; gap: 4px; }
+.ws-toolbar .icon { width: 15px; height: 15px; }
+.ws-check, .ws-runas { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
+.ws-runas select { max-width: 16rem; font-size: 13px; }
+.ws-spacer { flex: 1; }
+.ws-runs-as { margin: 0; padding: 4px 8px; border-bottom: 1px solid var(--border); }
+.ws-editor { min-height: 0; display: flex; flex-direction: column; }
+.ws-editor textarea { width: 100%; min-height: 12rem; border: 0; border-radius: 0; }
+.ws-editor > :is(textarea, .ce) { flex: 1 1 auto; }
+
+.ws-output { display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--border); }
+.ws-tabs { display: none; gap: 0; border-bottom: 1px solid var(--border); overflow-x: auto; background: var(--surface-2); }
+.js .ws-tabs { display: flex; }
+.ws-tabs [role=tab] { flex: none; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
+.ws-tabs [role=tab][aria-selected=true] { color: var(--text); border-bottom-color: var(--hot); }
+.ws-tabs [role=tab]:focus-visible { outline: 2px solid var(--hot); outline-offset: -2px; }
+.ws-pane { padding: 8px; min-height: 0; overflow: auto; }
+.ws-pane-title { font-size: 14px; margin: 0 0 6px; }
+.js .ws-pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.ws-info { margin: 0 0 6px; }
+.ws-grid { max-height: none; }
+.ws-grid td, .ws-grid th { padding: 3px 8px; font-size: 12.5px; }
+.ws-grid .ws-rownum { color: var(--muted); text-align: right; width: 1%; }
+.ws-grid .null { color: var(--muted); font-style: italic; }
+.ws-log { margin: 0; padding: 8px; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; line-height: 1.45; white-space: pre; overflow: auto; }
+.ws-log-sql { color: var(--muted); }
+.ws-log-ok { color: #2f7d32; font-weight: 600; }
+.ws-log-err { color: #c0392b; white-space: pre-wrap; }
+.ws-log-warn { color: var(--warn); white-space: pre-wrap; }
+.ws-notices, .ws-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
+.ws-notices li, .ws-history li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); min-width: 0; }
+.ws-notices .tag-warn { color: var(--warn); }
+.ws-history a { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
+.ws-history small { flex: none; }
+
+.ws-status { display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; min-width: 0; }
+.ws-status .icon { width: 13px; height: 13px; vertical-align: -2px; }
+.ws-count { color: var(--muted); white-space: nowrap; }
+.ws-count.is-err { color: #c0392b; }
+.ws-count.is-warn { color: var(--warn); }
+.ws-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-time { margin-left: auto; }
+.ws-split { display: none; }
+
+@media (min-width: 900px) {
+  .ws { grid-template-columns: var(--ws-nav) auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
+  .ws-nav { grid-row: 1; grid-column: 1; border-bottom: 0; }
+  .ws-split-v { grid-row: 1; grid-column: 2; }
+  .ws-nav-body { max-height: none; flex: 1 1 auto; }
+  .ws-main { grid-row: 1; grid-column: 3; }
+  .ws-status { grid-column: 1 / -1; }
+  .ws-nav-hidden { grid-template-columns: 0 auto minmax(0, 1fr); }
+  .ws-nav-hidden .ws-nav { visibility: hidden; }
+  .js .ws-split { display: block; background: var(--border); }
+  .js .ws-split-v { width: 5px; cursor: col-resize; }
+  .js .ws-split-h { height: 5px; cursor: row-resize; flex: none; }
+  .ws-split:hover, .ws-split:focus-visible { background: var(--hot); outline: none; }
+  /* with script the worksheet fills the window and each pane scrolls on its own */
+  .js .ide-full .ws-page { height: 100%; min-height: 0; }
+  .js .ide-full .ws { flex: 1 1 auto; min-height: 0; }
+  .js .ide-full .ws-main { overflow: hidden; }
+  .js .ide-full .ws-editor { flex: 1 1 auto; overflow: hidden; }
+  .js .ide-full .ws-editor .ce { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; border: 0; border-radius: 0; }
+  .js .ide-full .ws-editor .ce-main { min-height: 0; }
+  .js .ide-full .ws-editor .ce textarea.ce-input { height: 100%; min-height: 0; resize: none; }
+  .js .ide-full .ws-output { flex: 0 0 var(--ws-out); }
+  .js .ide-full .ws-pane { flex: 1 1 auto; }
+  .js .ide-full .ws-nav { overflow: hidden; }
+}
+@media (max-width: 899px) {
+  .ws-toolbar .btn span:not(.sr-only) { display: none; }
+  .ws-toolbar .btn-hot span:not(.sr-only) { display: inline; }
+}
+/* fullscreen: only the editor and its toolbar */
+body.ws-fullscreen .ide-rail, body.ws-fullscreen .ide-bar, body.ws-fullscreen .ide-status, body.ws-fullscreen .ide-banner, body.ws-fullscreen .ws-page > .sw-tabs,
+body.ws-fullscreen .ws-nav, body.ws-fullscreen .ws-split, body.ws-fullscreen .ws-output, body.ws-fullscreen .ws-runs-as { display: none; }
+body.ws-fullscreen .ws { grid-template-columns: minmax(0, 1fr); }
+body.ide.ws-fullscreen { padding-left: 0; }
+
+/* (sprint 92) Query Result: toolbar, sticky header, numbers right-aligned, sortable headings, long values cut */
+.ws-result-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
+.ws-result-bar .ws-info { margin: 0; }
+.ws-result-bar .btn { display: inline-flex; align-items: center; gap: 4px; }
+.ws-result-bar .icon { width: 14px; height: 14px; }
+.ws-dl > summary { list-style: none; }
+.ws-dl > summary::-webkit-details-marker { display: none; }
+.ws-dl .menu-links button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 12px; font: inherit; color: var(--text); cursor: pointer; }
+.ws-dl .menu-links button:hover, .ws-dl .menu-links button:focus-visible { background: var(--surface-3); }
+.ws-dl-form { display: none; }
+.ws-grid thead th { position: sticky; top: 0; z-index: 1; }
+.ws-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
+.ws-grid td { max-width: 32rem; overflow: hidden; text-overflow: ellipsis; }
+.js .ws-grid td:not(.ws-rownum) { cursor: zoom-in; }
+.ws-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
+.ws-sort:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
+.js .ws-sort-label { display: none; }
+th[aria-sort=ascending] .ws-sort::after { content: ' ▲'; font-size: 0.75em; }
+th[aria-sort=descending] .ws-sort::after { content: ' ▼'; font-size: 0.75em; }
+.ws-cell { width: min(48rem, calc(100vw - 32px)); max-height: 80vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
+.ws-cell-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+.ws-cell pre { margin: 0; padding: 12px; max-height: 65vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
+
+/* (sprint 92) plans as a tree */
+.ws-plan-tree { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--border); }
+.ws-plan-root { padding-left: 0; border-left: 0; }
+.ws-plan-tree summary { cursor: pointer; padding: 3px 4px; border-radius: 3px; }
+.ws-plan-tree summary:hover { background: var(--surface-3); }
+.ws-plan-op { font-weight: 650; }
+.ws-plan-target { color: var(--gold); }
+.ws-plan-nums { color: var(--muted); font-size: 12px; margin-left: 6px; }
+.ws-plan-tree .tag { margin-left: 6px; font-size: 11px; }
+.ws-plan-tree .is-slowest > summary { background: color-mix(in srgb, var(--warn) 15%, transparent); }
+.ws-plan-details { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 2px 0 4px 22px; font-size: 12px; }
+.ws-plan-details dt { color: var(--muted); }
+.ws-plan-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
+.ws-plan-text { margin-top: 10px; }
+.ws-plan-text > summary { cursor: pointer; color: var(--muted); }
+
+/* (sprint 92) SQL History */
+.ws-hist-bar { display: flex; gap: 6px; margin-bottom: 6px; }
+.ws-hist-bar input { flex: 1; min-width: 0; }
+.ws-hist-icon .icon { width: 14px; height: 14px; }
+.ws-hist-icon.is-ok { color: #2f7d32; }
+.ws-hist-icon.is-err { color: #c0392b; }
+.ws-history li { align-items: center; }
+.ws-history .btn { flex: none; }
+@media (max-width: 640px) { .ws-hist-meta { display: none; } }
+
+/* (sprint 93) worksheet tabs, the file menu, Files, the find bar, the values dialog */
+.ws-wtabs { display: none; align-items: stretch; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
+.js .ws-wtabs { display: flex; }
+.ws-wtab { display: flex; align-items: center; border-right: 1px solid var(--border); }
+.ws-wtab [role=tab] { border: 0; background: none; color: var(--muted); padding: 5px 4px 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
+.ws-wtab [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.ws-wtab-close, .ws-wtab-new { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 8px; font-size: 14px; line-height: 1; }
+.ws-wtab-close:hover, .ws-wtab-new:hover { color: var(--text); }
+.ws-file > summary { list-style: none; max-width: 14rem; }
+.ws-file > summary::-webkit-details-marker { display: none; }
+.ws-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-file-panel { display: flex; flex-direction: column; gap: 6px; min-width: 16rem; }
+.ws-file-actions { display: flex; flex-wrap: wrap; gap: 4px; }
+.ws-file-error { margin: 6px 8px; }
+.ws-nav-switch { display: none; border-bottom: 1px solid var(--border); }
+.js .ws-nav-switch { display: flex; }
+.ws-nav-switch [role=tab] { flex: 1; border: 0; background: none; color: var(--muted); padding: 6px; font: inherit; font-size: 12.5px; cursor: pointer; }
+.ws-nav-switch [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.ws-nav-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
+.ws-nav-panel[hidden] { display: none; }
+.ws-files { padding: 4px 0; font-size: 13px; overflow: auto; }
+.ws-files-title { font-size: 12.5px; margin: 4px 10px; }
+.js .ws-files-title { display: none; }
+.ws-files ul { list-style: none; margin: 0; padding: 0; }
+.ws-files a { display: flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--text); text-decoration: none; min-width: 0; }
+.ws-files a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ws-files a:hover, .ws-files a[aria-current] { background: var(--surface-3); }
+.ws-files .icon { width: 14px; height: 14px; color: var(--muted); flex: none; }
+.ws-findbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
+.ws-findbar[hidden] { display: none; }
+.ws-findbar input:not([type=checkbox]) { min-width: 0; width: 12rem; font-size: 13px; }
+.ws-findbar .ws-goto { width: 5rem; }
+.ws-aa { font-weight: 700; font-size: 12px; }
+.ws-keylist { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 0 8px; font-size: 12.5px; }
+.ws-keylist dt { font-family: var(--mono, monospace); color: var(--muted); }
+.ws-keylist dd { margin: 0; }
+.ws-kwcase { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 12.5px; }
+.ws-binds { width: min(32rem, calc(100vw - 32px)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 16px; }
+.ws-binds h2 { font-size: 15px; margin: 0 0 6px; }
+.ws-binds-fields { display: grid; gap: 8px; margin: 10px 0; }
+.ws-binds-fields .field { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: 8px; }
+
+/* (sprint 94) an object's ⋯ menu in the navigator and the Object Browser's tree; Open in a panel */
+.ws-obj, .ob-item { position: relative; }
+.ws-obj > details.menu.obj-menu, .ob-item > details.menu.obj-menu { position: absolute; right: 4px; top: 1px; z-index: 2; display: block; margin: 0; }
+details.menu.obj-menu > summary { display: block; list-style: none; cursor: pointer; padding: 0 6px; border: 0; background: none; border-radius: 3px; color: var(--muted); line-height: 1.6; opacity: 0; }
+details.menu.obj-menu > summary::before, details.menu.obj-menu > summary::after { content: none; }
+.obj-menu > summary::-webkit-details-marker { display: none; }
+.ws-obj:hover > .obj-menu > summary, .ob-item:hover > .obj-menu > summary, .obj-menu:focus-within > summary, .obj-menu[open] > summary { opacity: 1; }
+.obj-menu > summary:hover { background: var(--surface-3); color: var(--text); }
+@media (hover: none) { .obj-menu > summary { opacity: 1; } }
+.obj-menu .menu-panel { right: 0; left: auto; min-width: 14rem; }
+.ws-obj .tag { margin-right: 22px; }
+.obj-slide { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(46rem, 100vw); max-width: 100vw; height: 100vh; height: 100dvh; max-height: none; padding: 0;
+  border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); overflow: hidden; }
+.obj-slide[open] { display: flex; flex-direction: column; }
+.obj-slide::backdrop { background: rgb(0 0 0 / 35%); }
+.obj-slide-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
+.obj-slide-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.obj-slide-body { flex: 1; overflow: auto; padding: 10px 12px; }
+.obj-slide-body[aria-busy=true] { opacity: 0.6; }
+
+/* (sprint 95) Table Properties */
+.te-head { max-width: 48rem; }
+.te-tabs { display: none; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); margin: 12px 0; min-width: 0; }
+.js .te-tabs { display: flex; }
+.te-tabs [role=tab] { border: 0; background: none; color: var(--muted); padding: 7px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
+.te-tabs [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.te-section { margin-bottom: 16px; }
+.js .te-section > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.te-table td { padding: 3px 4px; vertical-align: middle; }
+.te-table input:not([type=checkbox]), .te-table select { width: 100%; min-width: 7rem; font-size: 13px; }
+.te-table .te-c { text-align: center; width: 1%; white-space: nowrap; }
+.te-move { width: 1%; white-space: nowrap; }
+.te-move .btn { padding: 0 5px; }
+.te-drop { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--muted); }
+.te-removed td:not(:last-child) { opacity: 0.4; text-decoration: line-through; }
+.te-generated { font-size: 12px; }
+.te-ddl { max-height: 60vh; overflow: auto; }
+.te-buttons { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; border-top: 1px solid var(--border); }
+
+/* (sprint 96) the header's search, the search dialog, the SQL Workshop Launchpad, pins */
+.ide-search { margin-left: auto; min-width: 0; }
+.ide-search input { width: 13rem; max-width: 100%; font-size: 12.5px; padding: 3px 8px; }
+@media (max-width: 700px) { .ide-search input { width: 7rem; } }
+.palette { width: min(40rem, calc(100vw - 32px)); margin-top: 12vh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
+.palette::backdrop { background: rgb(0 0 0 / 35%); }
+.palette input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 12px 14px; font-size: 15px; }
+.palette-list { list-style: none; margin: 0; padding: 4px 0; max-height: 50vh; overflow: auto; }
+.palette-list li { padding: 6px 14px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.palette-list li[aria-selected=true] { background: var(--sel-bg); color: var(--sel-text); }
+.palette-list li[aria-selected=true] .muted { color: inherit; opacity: 0.85; }
+.palette-status { margin: 0; padding: 6px 14px; border-top: 1px solid var(--border); }
+.pal-results { list-style: none; padding: 0; }
+.pal-results a { display: flex; gap: 8px; align-items: center; padding: 6px 0; text-decoration: none; }
+.lp-pins { margin-bottom: 16px; }
+.lp-pins h2, .lp-group h2 { font-size: 14px; margin: 0 0 8px; }
+.lp-chips { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.lp-chips li { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); padding-left: 10px; }
+.lp-chips a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); padding: 4px 0; font-size: 13px; }
+.lp-recent li { padding-right: 10px; border-style: dashed; }
+.lp-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
+.lp-tabs [role=tab] { border: 0; background: none; color: var(--muted); padding: 7px 12px; font: inherit; cursor: pointer; }
+.lp-tabs [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.js .lp-group > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.lp-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
+.lp-tool { display: flex; align-items: flex-start; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 8px; }
+.lp-tool > a { flex: 1; display: flex; gap: 8px; text-decoration: none; color: var(--text); min-width: 0; }
+.lp-tool > a span { display: flex; flex-direction: column; min-width: 0; }
+.lp-tool small { font-size: 12px; }
+.pin-form { display: inline; margin: 0; }
+.pin-btn { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 3px; }
+.pin-btn:hover { color: var(--text); background: var(--surface-3); }
+.pin-btn.is-pinned { color: var(--hot); }
+.pin-btn .icon { width: 14px; height: 14px; }
+.ob-pin { float: right; }
+
+/* (sprint 97) charts: the worksheet's Chart tab, the Charts page and its dashboard */
+.ch-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 8px; font-size: 13px; }
+.ch-controls > label { display: flex; flex-direction: column; gap: 2px; }
+.ch-controls fieldset { display: flex; flex-wrap: wrap; gap: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 8px; margin: 0; }
+.ch-controls legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
+.ch-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
+.ch-actions input { flex: 0 1 16rem; width: auto; min-width: 0; }
+.ch-view { min-width: 0; max-width: 60rem; }
+.ch-dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-bottom: 16px; }
+.ch-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; min-width: 0; }
+.ch-card h2 { font-size: 14px; margin: 0 0 6px; }
+.ch-edit { max-width: 48rem; margin-top: 16px; }