@ssebastien/tcmd 0.1.4 → 0.1.7

package/desktop/dist/style.css

@@ -0,0 +1,1515 @@
+/* Project: TinyCommand
+ * Author:  Sebastien Pierre
+ * License: BSD
+ * Created: 2026-09-27
+ *
+ * Styling for the web view (`public/index.html`). The class names are the
+ * contract between the shared components and `web/theme.js`; layout only, the
+ * component logic never reads styles.
+ */
+
+/* Palette mirrors tui/theme.js DARK: night-blue surfaces, gold accents,
+   saturated orange marks. */
+@font-face {
+	font-family: "M+1Code Nerd Font Mono";
+	src: url("./fonts/M+1CodeNerdFontMono-Regular.ttf") format("truetype");
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+}
+
+:root {
+	--font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	--font-mono: "M+1Code Nerd Font Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
+	--bg: #0d1526;
+	--bg-panel: #111b31;
+	--bg-raised: #18233d;
+	--bg-cursor: #274a9e;
+	--bg-cursor-inactive: #1b2a51;
+	--bg-marked: #4a2a0c;
+	/* The command panel's argument value fields. */
+	--bg-field: #1b2a51;
+	--border: #33508f;
+	/* The active pane's border/header rule: the explorer's Tiny blue, the
+	   commander's gold accent (kept in sync with tui/theme.js). */
+	--pane-active-explorer: #4088ff;
+	--pane-active-commander: #ffc233;
+	--text: #e6ecff;
+	--text-dim: #8fa3d9;
+	--scrollbar-track: transparent;
+	--scrollbar-thumb: #22345e;
+	--accent: #ffc233;
+	--accent-soft: #2b3f78;
+	--dir: #5c8cff;
+	--link: #4fc3ff;
+	--dev: #b48eff;
+	--exec: #5fd67a;
+	--readonly: #7d8ab8;
+	--mark: #ff7a1a;
+	--error: #ff4d5e;
+	--warning: #ffb020;
+	--tip: #a78bfa;
+	/* Brand identity bar gradients (kept in sync with tui/theme.js):
+	   Tiny stays blue, Cmd gold→saturated orange. */
+	--brand-tiny-from: #4088ff;
+	--brand-tiny-to: #7cd0ff;
+	--brand-cmd-from: #ffc233;
+	--brand-cmd-to: #ff7a1a;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+/* Every scrollable surface gets a visible, thin bar only while overflowing.
+   The WebKit rules keep Chromium/Electron and Safari consistent with Firefox. */
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns) {
+	scrollbar-width: thin;
+	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar {
+	width: 0.65rem;
+	height: 0.65rem;
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-track {
+	background: var(--scrollbar-track);
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-thumb {
+	background: var(--scrollbar-thumb);
+	border: 2px solid var(--scrollbar-track);
+	border-radius: 999px;
+}
+
+:is(.desktop-toolbar, .file-list, .preview-text, .preview-card, .panel-ops, .panel-args, .panel-args-scroll, .bookmark-rows, .overlay-rows, .help-columns)::-webkit-scrollbar-thumb:hover {
+	background: var(--accent);
+}
+
+html,
+body,
+#app {
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	background: var(--bg);
+	color: var(--text);
+	font: 13px/1.45 var(--font-ui);
+}
+
+/* File and path content keeps a fixed-width face; the surrounding controls use
+   the native system UI font above. */
+.file-row,
+.breadcrumbs,
+.entry-detail,
+.summary,
+.preview-text,
+.panel-picker-path,
+.panel-row[data-type="entry"] .panel-name,
+.panel-row[data-type="parent"] .panel-name,
+.panel-list-box,
+.bookmark-path {
+	font-family: var(--font-mono);
+}
+
+.app {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	outline: none;
+}
+
+/* Header --------------------------------------------------------------- */
+
+.app-header {
+	display: flex;
+	align-items: baseline;
+	flex: none;
+	padding: 0.1rem 0.6rem;
+	border-bottom: 1px solid var(--border);
+	background: var(--bg-panel);
+	color: var(--text);
+	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Right-hand trail: the view mode and version, dimmer than the brand. */
+.app-header-status {
+	flex: none;
+	margin-left: auto;
+	padding-left: 0.75rem;
+	color: var(--text-dim);
+	font-weight: 400;
+}
+
+/* The mode word shimmers like the brand: explorer along the Tiny blues,
+   commander along the Cmd oranges. Clicking it toggles the view mode. */
+.app-header-mode {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.header-mode-icon {
+	width: 0.8rem;
+	height: 0.8rem;
+	color: var(--accent);
+}
+
+.app-header-mode.mode-explorer {
+	background: linear-gradient(90deg, var(--brand-tiny-from), var(--brand-tiny-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.app-header-mode.mode-explorer .header-mode-icon {
+	color: var(--pane-active-explorer);
+}
+
+.app-header-mode.mode-commander {
+	background: linear-gradient(90deg, var(--brand-cmd-from), var(--brand-cmd-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+/* The brand and host give way (ellipsis) instead of pushing the trail off. */
+.app-header > span:not(.app-header-status) {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Brand: "Tiny" shimmers along a blue gradient, "Cmd" along a brighter
+   orange than the mark accent. */
+.app-header .brand-tiny {
+	background: linear-gradient(90deg, var(--brand-tiny-from), var(--brand-tiny-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+.app-header .brand-cmd {
+	background: linear-gradient(90deg, var(--brand-cmd-from), var(--brand-cmd-to));
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
+/* Desktop chrome -------------------------------------------------------- */
+
+.desktop-toolbar {
+	display: flex;
+	align-items: center;
+	flex: none;
+	gap: 0.45rem;
+	min-height: 2.55rem;
+	padding: 0.3rem 0.55rem;
+	border-bottom: 1px solid var(--border);
+	background: linear-gradient(180deg, #17243c, var(--bg-panel));
+	white-space: nowrap;
+	overflow-x: auto;
+}
+
+.desktop-toolbar-group {
+	display: flex;
+	align-items: center;
+	gap: 0.35rem;
+	flex: none;
+}
+
+.desktop-toolbar-spacer {
+	flex: 1;
+	min-width: 0.5rem;
+}
+
+.desktop-toolbar-separator {
+	flex: none;
+	height: 1.35rem;
+	border-left: 1px solid var(--border);
+}
+
+.desktop-toolbar-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	min-height: 1.9rem;
+	padding: 0.2rem 0.55rem;
+	border: 1px solid transparent;
+	border-radius: 5px;
+	background: transparent;
+	color: var(--text-dim);
+	font: inherit;
+	font-size: 12px;
+	cursor: pointer;
+}
+
+.desktop-toolbar-button:hover {
+	border-color: var(--border);
+	background: var(--bg-raised);
+	color: var(--text);
+}
+
+.desktop-toolbar-button.is-primary {
+	border-color: var(--accent-soft);
+	background: #202f50;
+	color: var(--text);
+}
+
+.desktop-toolbar-button.is-primary:hover {
+	border-color: var(--accent);
+	background: #283b62;
+}
+
+.ui-icon {
+	flex: none;
+	fill: none;
+	stroke: currentColor;
+	stroke-width: 2;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+}
+
+.lucide-defs {
+	display: none;
+}
+
+.toolbar-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--accent);
+}
+
+.toolbar-chevron {
+	width: 0.75rem;
+	height: 0.75rem;
+	margin-left: -0.2rem;
+	color: var(--text-dim);
+}
+
+/* Panes ---------------------------------------------------------------- */
+
+.panes {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	gap: 1px;
+	background: var(--border);
+}
+
+.pane {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	background: var(--bg-panel);
+	border: 1px solid var(--border);
+}
+
+.pane.is-active {
+	border-color: var(--pane-active-commander);
+}
+
+/* Explorer tints the active pane with the Tiny blue instead of the gold. */
+.app.is-explorer .pane.is-active {
+	border-color: var(--pane-active-explorer);
+}
+
+/* Explorer mode: the middle (current) column carries the extra width, the
+   parent and preview columns stay even. */
+.pane.is-major {
+	flex-grow: 1.35;
+}
+
+.pane-header {
+	display: flex;
+	align-items: baseline;
+	gap: 0.35rem;
+	min-width: 0;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 12px;
+	flex: none;
+	min-height: 1.8rem;
+	padding: 0 0.45rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.pane.is-active .pane-header {
+	border-bottom-color: var(--pane-active-commander);
+}
+
+.app.is-explorer .pane.is-active .pane-header {
+	border-bottom-color: var(--pane-active-explorer);
+}
+
+.pane-header > div {
+	min-width: 0;
+	flex: 1;
+}
+
+.pane > [data-slot="list"] {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+/* Breadcrumbs ---------------------------------------------------------- */
+
+.breadcrumbs {
+	flex: none;
+	display: flex;
+	align-items: center;
+	gap: 0.15rem;
+	padding: 0.3rem 0.1rem;
+	overflow: hidden;
+	white-space: nowrap;
+	font-size: 12px;
+}
+
+.crumb {
+	color: var(--text-dim);
+	text-decoration: none;
+}
+
+.crumb:hover {
+	color: var(--accent);
+}
+
+.crumb.is-root {
+	color: var(--text-dim);
+}
+
+.crumb .crumb-sep {
+	color: var(--border);
+}
+
+.crumb-sep:empty {
+	display: none;
+}
+
+/* File list ------------------------------------------------------------ */
+
+.file-list {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	margin: 0;
+	padding: 0.15rem 0;
+}
+
+.file-list ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
+.file-list p {
+	color: var(--text-dim);
+	white-space: pre;
+}
+
+.file-row {
+	display: grid;
+	grid-template-columns: 1.1rem 1rem minmax(0, 1fr) auto;
+	gap: 0.4rem;
+	align-items: center;
+	padding: 0 0.35rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.file-row:hover {
+	background: var(--bg-raised);
+}
+
+.file-row.is-current {
+	background: var(--bg-cursor);
+}
+
+.file-row.is-current[data-active="false"] {
+	background: var(--bg-cursor-inactive);
+}
+
+.file-row[data-marked="true"]:not(.is-current) {
+	background: var(--bg-marked);
+}
+
+.marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.file-row[data-marked="true"] .marker {
+	color: var(--mark);
+}
+
+.file-row-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--text-dim);
+}
+
+.file-row[data-kind="dir"] .file-row-icon {
+	color: var(--dir);
+}
+
+.file-row[data-kind="link"] .file-row-icon {
+	color: var(--link);
+}
+
+.file-row[data-kind="dev"] .file-row-icon {
+	color: var(--dev);
+}
+
+.name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.name.is-dir {
+	color: var(--dir);
+	font-weight: 600;
+}
+
+.name.is-exec {
+	color: var(--exec);
+}
+
+.name.is-readonly {
+	color: var(--readonly);
+}
+
+.file-row[data-kind="link"] .name {
+	color: var(--link);
+}
+
+.file-row[data-kind="dev"] .name {
+	color: var(--dev);
+}
+
+.file-row.is-current .name {
+	color: var(--text);
+}
+
+.file-row[data-marked="true"] .name {
+	color: var(--mark);
+}
+
+.size {
+	color: var(--text-dim);
+	font-variant-numeric: tabular-nums;
+}
+
+/* Entry detail ---------------------------------------------------------- */
+
+.entry-detail {
+	border-top: 1px solid var(--border);
+	padding: 0.2rem 0.45rem 0;
+}
+
+.entry-detail-line {
+	display: flex;
+	min-width: 0;
+	white-space: pre;
+	overflow: hidden;
+}
+
+.entry-detail-line > span {
+	flex: none;
+}
+
+.entry-detail-line .entry-detail-spacer {
+	flex: 1;
+	min-width: 1ch;
+}
+
+.entry-detail-sep {
+	color: var(--text-dim);
+}
+
+.entry-detail-type.is-directory {
+	color: var(--dir);
+}
+
+.entry-detail-type.is-symlink {
+	color: var(--link);
+}
+
+.entry-detail-type.is-device {
+	color: var(--dev);
+}
+
+.entry-detail-type.is-exec {
+	color: var(--exec);
+}
+
+.entry-detail-type.is-readonly {
+	color: var(--readonly);
+}
+
+.entry-detail-mode {
+	color: var(--accent);
+}
+
+.entry-detail-marked {
+	color: var(--mark);
+}
+
+/* Summary -------------------------------------------------------------- */
+
+.summary {
+	flex: none;
+	padding: 0.25rem 0.45rem;
+	color: var(--text-dim);
+	white-space: pre;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* Filter bar ----------------------------------------------------------- */
+
+.filter-bar {
+	flex: none;
+	display: flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: 0.2rem 0.1rem;
+	color: var(--text-dim);
+	font-size: 11px;
+}
+
+.filter-prompt {
+	flex: none;
+	color: var(--text-dim);
+}
+
+.filter-label {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--accent);
+}
+
+.filter-alert {
+	flex: none;
+	color: var(--error);
+}
+
+.filter-input {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	outline: none;
+	color: var(--text);
+	font: inherit;
+	font-size: 12px;
+}
+
+/* Preview -------------------------------------------------------------- */
+
+[data-slot="inspector"] {
+	display: flex;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+}
+
+/* The maximized inspector (`⇧V`): the preview fills the whole pane row. */
+.preview-max {
+	display: flex;
+	flex: 1 1 0;
+	min-width: 0;
+	min-height: 0;
+}
+
+.preview {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	min-width: 0;
+	min-height: 0;
+	padding: 0.35rem 0.5rem;
+	background: var(--bg);
+	border: 1px solid var(--border);
+}
+
+.preview > header {
+	color: var(--text);
+	border-bottom: 1px solid var(--border);
+	padding-bottom: 0.3rem;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The inspector's directory column: breadcrumbs over the listing, laid out
+   like a pane header so a previewed directory reads as a pane. */
+.preview > .pane-header {
+	flex: none;
+	border-bottom: 1px solid var(--border);
+	padding-left: 0;
+	padding-right: 0;
+}
+
+.preview-list {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+}
+
+.preview-text,
+.preview-card {
+	flex: 1;
+	min-height: 0;
+	margin: 0;
+	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font: inherit;
+	font-size: 12px;
+}
+
+.preview-card {
+	color: var(--text-dim);
+}
+
+/* Command bar ---------------------------------------------------------- */
+
+.command-bar {
+	flex: none;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 0.75rem;
+	min-height: 1.9rem;
+	padding: 0.25rem 0.6rem;
+	border-top: 1px solid var(--border);
+	background: var(--bg-panel);
+	overflow: hidden;
+}
+
+.command-bar-keys {
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 0.45rem;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.command-key {
+	background: var(--bg-raised);
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	color: var(--text-dim);
+	cursor: pointer;
+	font: inherit;
+	font-size: 11px;
+	padding: 0.05rem 0.4rem;
+	white-space: nowrap;
+}
+
+.command-key:hover {
+	color: var(--text);
+	border-color: var(--accent-soft);
+}
+
+.command-key:disabled {
+	background: transparent;
+	border-color: transparent;
+	cursor: default;
+}
+
+button:focus-visible,
+input:focus-visible {
+	outline: 1px solid var(--accent);
+	outline-offset: 2px;
+}
+
+.command-bar .is-error {
+	color: var(--error);
+}
+
+.command-bar [data-kind="warning"] {
+	color: var(--warning);
+}
+
+.command-bar [data-kind="tip"] {
+	color: var(--tip);
+}
+
+/* Confirm -------------------------------------------------------------- */
+
+.confirm {
+	position: fixed;
+	inset: 0;
+	z-index: 20;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgb(0 0 0 / 45%);
+}
+
+.confirm p {
+	max-width: min(560px, 90vw);
+	margin: 0;
+	padding: 0.6rem 0.9rem;
+	background: var(--bg-panel);
+	border: 1px solid var(--error);
+	border-radius: 6px;
+	pointer-events: auto;
+}
+
+/* Modal presentations -------------------------------------------------- */
+
+.command-panel,
+.bookmark-list,
+.help,
+.viewer {
+	position: fixed;
+	inset: 0;
+	z-index: 15;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background: rgb(0 0 0 / 45%);
+}
+
+.help {
+	z-index: 30;
+}
+
+.command-dialog,
+.bookmark-dialog,
+.help-dialog {
+	display: flex;
+	flex-direction: column;
+	width: min(900px, 95vw);
+	max-height: 85vh;
+	min-height: 0;
+	padding: 0.6rem;
+	border: 1px solid var(--accent);
+	border-radius: 6px;
+	background: var(--bg-panel);
+}
+
+.command-dialog {
+	position: relative;
+	height: 72vh;
+}
+
+.bookmark-dialog,
+.help-dialog {
+	width: min(640px, 95vw);
+}
+
+.panel-title,
+.help-dialog > header,
+.bookmark-dialog h2 {
+	color: var(--text);
+	font: inherit;
+	font-weight: 600;
+	margin: 0 0 0.4rem;
+}
+
+/* The dialog's close action sits in the top border like a close button: the
+   panel background masks the border run underneath it. */
+.panel-close {
+	position: absolute;
+	top: -0.55rem;
+	right: 0.9rem;
+	z-index: 2;
+	padding: 0 0.3rem;
+	border: none;
+	border-radius: 3px;
+	background: var(--bg-panel);
+	color: var(--text-dim);
+	font: inherit;
+	line-height: 1.1;
+	cursor: pointer;
+}
+
+.panel-close:hover,
+.panel-close:focus-visible {
+	color: var(--text);
+	background: var(--accent-soft);
+}
+
+.panel-query-line,
+.panel-value-line,
+.bookmark-dialog > header {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.3rem 0;
+}
+
+/* The left pane: the `:` filter over the grouped command list. */
+.panel-command-column {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+}
+
+.panel-query,
+.panel-value {
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+	min-width: 2ch;
+}
+
+/* The right pane's header: the selected command's name. */
+.panel-command-name {
+	margin: 0;
+	padding: 0.3rem 0.6rem;
+	color: var(--text);
+	font-weight: 600;
+}
+
+/* The argument pane's rows: an aligned label + boxed value field for an
+   argument, and a bordered list of selected paths under a selection. */
+.panel-row[data-type="arg"] .panel-name {
+	white-space: pre;
+	color: var(--text-dim);
+}
+
+.panel-row[data-type="arg"].is-focused .panel-name {
+	color: var(--accent);
+}
+
+.panel-row[data-type="group"] {
+	padding-top: 0.45rem;
+	cursor: default;
+	font-size: 0.82em;
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+}
+
+.panel-row[data-type="group"][data-group="White"] {
+	color: var(--text);
+}
+
+.panel-row[data-type="group"][data-group="Amber"] {
+	color: var(--warning);
+}
+
+.panel-row[data-type="group"][data-group="Red"] {
+	color: var(--error);
+}
+
+.panel-row[data-type="op"] {
+	padding-left: 1.5rem;
+}
+
+.panel-row[data-type="run"] {
+	justify-content: flex-start;
+	margin-top: 0;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+}
+
+.panel-preview {
+	flex: 0 1 auto;
+	max-height: 20vh;
+	margin: 0;
+	padding: 0.35rem 0.6rem;
+	border-top: 1px solid var(--border);
+	color: var(--text-dim);
+	overflow: auto;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	font: inherit;
+}
+
+.panel-run-action {
+	flex: none;
+	list-style: none;
+	margin: 0;
+	padding: 0 0.6rem 0.4rem 0;
+}
+
+.panel-run-button {
+	padding: 0.15rem 0.7rem;
+	border: 1px solid var(--text);
+	border-radius: 4px;
+	background: transparent;
+	color: var(--text);
+	font: inherit;
+	cursor: pointer;
+}
+
+.panel-row[data-type="run"].is-focused .panel-run-button {
+	background: var(--accent-soft);
+}
+
+.panel-row[data-type="run"][data-risk="caution"] .panel-run-button {
+	border-color: var(--warning);
+	color: var(--warning);
+}
+
+.panel-row[data-type="run"][data-risk="destructive"] .panel-run-button {
+	border-color: var(--error);
+	color: var(--error);
+}
+
+.panel-run-error-block {
+	margin: 0.25rem 0.6rem 0.35rem 0.5rem;
+	padding: 0.25rem 0.5rem;
+	border: 1px solid var(--error);
+	border-radius: 4px;
+}
+
+.panel-run-error-block p {
+	margin: 0;
+	color: var(--error);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+/* The armed command, printed below `[Confirm]` in the action's risk colour. */
+.panel-confirm-command {
+	margin: 0;
+	padding: 0.15rem 0.6rem 0.4rem 0.5rem;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.panel-confirm-command[data-risk="caution"] {
+	color: var(--warning);
+}
+
+.panel-confirm-command[data-risk="destructive"] {
+	color: var(--error);
+}
+
+/* A permission class row: a label and three r/w/x cells. */
+.panel-perm {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.6rem;
+}
+
+.panel-perm-class {
+	width: 3.5rem;
+	color: var(--text-dim);
+}
+
+.panel-perm-bit {
+	width: 1.4rem;
+	padding: 0;
+	border: none;
+	border-radius: 3px;
+	background: transparent;
+	color: var(--text-dim);
+	font: inherit;
+	font-weight: 600;
+	text-align: center;
+	cursor: pointer;
+}
+
+.panel-perm-bit.is-on {
+	color: var(--accent);
+}
+
+.panel-perm-bit.is-bit-focused {
+	background: var(--accent-soft);
+	color: var(--text);
+}
+
+.panel-field {
+	display: inline-flex;
+	align-items: baseline;
+	flex: 1;
+	min-width: 0;
+	background: var(--bg-field);
+	border-radius: 3px;
+	border: 1px solid var(--border);
+	padding: 0 0.25rem;
+}
+
+.panel-field[data-editable="false"] {
+	background: transparent;
+	border-color: transparent;
+	padding-left: 0;
+}
+
+.panel-field[data-editable="true"] {
+	border-color: var(--accent-soft);
+}
+
+.panel-field[data-editable="false"] .panel-field-bracket {
+	display: none;
+}
+
+.panel-field[data-editable="false"] .panel-field-value {
+	color: var(--text-dim);
+}
+
+.panel-field-bracket {
+	color: var(--text-dim);
+}
+
+.panel-field-value {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: pre;
+	color: var(--text);
+}
+
+.panel-field .panel-value {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-list-indent {
+	white-space: pre;
+}
+
+.panel-list-box {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	flex: 1;
+	min-width: 0;
+	border-left: 1px solid var(--border);
+	border-right: 1px solid var(--border);
+	padding: 0 0.4rem;
+}
+
+.panel-row.is-list-top .panel-list-box {
+	border-top: 1px solid var(--border);
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+}
+
+.panel-row.is-list-bottom .panel-list-box {
+	border-bottom: 1px solid var(--border);
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+}
+
+.panel-query,
+.panel-value,
+.bookmark-query {
+	flex: 1;
+	min-width: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-columns {
+	display: grid;
+	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+	flex: 1;
+	min-height: 0;
+	border-top: 1px solid var(--border);
+	border-bottom: 1px solid var(--border);
+}
+
+.panel-ops,
+.panel-args,
+.bookmark-rows {
+	list-style: none;
+	margin: 0;
+	padding: 0.3rem 0;
+	overflow: auto;
+	min-height: 0;
+}
+
+.panel-ops {
+	flex: 1 1 0;
+}
+
+/* The argument pane scrolls as a whole so the Run action follows the last
+   field instead of being pinned to the bottom of the column. */
+.panel-args-scroll {
+	flex: 1 1 0;
+	min-height: 0;
+	overflow: auto;
+}
+
+.panel-args {
+	flex: none;
+	overflow: visible;
+}
+
+/* The argument column: an empty state (a TinyCmd action binds no arguments)
+   above the rows, with the divider on the column rather than the list so both
+   stay visible. */
+.panel-args-column {
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	border-left: 1px solid var(--border);
+}
+
+.panel-args-empty {
+	display: flex;
+	flex-direction: column;
+	gap: 0.1rem;
+	margin: 0.3rem 0;
+	padding: 0 0.6rem;
+	color: var(--text-dim);
+}
+
+
+
+/* File picker sub-mode: a nested pane containing its path, filter and entries
+   (which reuse `.panel-row` through the shared arg-row map). */
+.panel-picker-pane {
+	display: flex;
+	flex: 1 1 0;
+	flex-direction: column;
+	min-height: 0;
+	margin: 0.35rem 0.5rem 0.5rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.panel-picker {
+	display: flex;
+	flex-direction: column;
+	gap: 0.15rem;
+	padding: 0.3rem 0.6rem;
+	border-bottom: 1px solid var(--border);
+}
+
+.panel-picker-rows {
+	flex: 1 1 0;
+}
+
+.panel-picker-path {
+	flex: 1;
+	min-width: 0;
+	margin: 0;
+	padding: 0;
+	background: transparent;
+	border: none;
+	color: var(--text);
+	font: inherit;
+}
+
+.panel-picker-path:focus {
+	outline: none;
+}
+
+.panel-picker-line {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+.panel-picker-icon {
+	width: 1rem;
+	height: 1rem;
+	color: var(--accent);
+}
+
+.panel-picker-rows .picker-row {
+	padding-left: 0.6rem;
+	padding-right: 0.6rem;
+}
+
+.panel-row,
+.bookmark-row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.15rem 0.3rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.bookmark-icon {
+	width: 0.9rem;
+	height: 0.9rem;
+	align-self: center;
+	color: var(--text-dim);
+}
+
+/* An argument stacks its label over its value: the marker and label on the
+   first line, the value field aligned under the label on the second. */
+.panel-row[data-type="arg"] {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	grid-template-rows: auto auto;
+	row-gap: 0.1rem;
+	align-items: baseline;
+}
+
+/* Labels and values start one space in from the pane border. */
+.panel-args .panel-row[data-type="arg"],
+.panel-args .panel-row[data-type="perm"],
+.panel-run-action .panel-row {
+	padding-left: 0.5rem;
+}
+
+.panel-row[data-type="arg"] > .panel-marker {
+	display: none;
+}
+
+.panel-row[data-type="arg"] > .panel-name {
+	grid-area: 1 / 1;
+	min-width: 0;
+	overflow: hidden;
+}
+
+.panel-row[data-type="arg"] > .panel-field {
+	grid-area: 2 / 1;
+}
+
+.panel-row.is-focused,
+.bookmark-row.is-selected {
+	background: var(--accent-soft);
+}
+
+.panel-marker,
+.bookmark-marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.panel-summary,
+.bookmark-path {
+	color: var(--text-dim);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.panel-op-chevron {
+	width: 0.9rem;
+	height: 0.9rem;
+	flex: none;
+	margin-left: auto;
+	color: var(--text-dim);
+}
+
+.panel-row.is-focused .panel-op-chevron {
+	color: var(--accent);
+}
+
+.panel-row.is-focused .panel-name {
+	color: var(--accent);
+}
+
+.panel-row[data-risk="destructive"] .panel-name {
+	color: var(--error);
+}
+
+.panel-row[data-risk="caution"] .panel-name {
+	color: var(--warning);
+}
+
+.panel-row[data-selected="true"]:not(.is-focused) .panel-name {
+	color: var(--mark);
+}
+
+.command-dialog > footer,
+.bookmark-dialog > footer,
+.help-dialog > footer,
+.bookmark-empty {
+	color: var(--text-dim);
+	padding-top: 0.3rem;
+}
+
+/* Shared list overlay (history / trash) --------------------------------- */
+
+.overlay-list {
+	position: fixed;
+	inset: 0;
+	z-index: 18;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+	background: rgb(0 0 0 / 45%);
+}
+
+.overlay-dialog {
+	display: flex;
+	flex-direction: column;
+	width: min(640px, 95vw);
+	max-height: 85vh;
+	min-height: 0;
+	padding: 0.6rem;
+	border: 1px solid var(--accent);
+	border-radius: 6px;
+	background: var(--bg-panel);
+}
+
+.overlay-dialog h2 {
+	color: var(--text);
+	font: inherit;
+	font-weight: 600;
+	margin: 0 0 0.4rem;
+}
+
+.overlay-rows {
+	list-style: none;
+	margin: 0;
+	padding: 0.3rem 0;
+	overflow: auto;
+	min-height: 0;
+}
+
+.overlay-row {
+	display: flex;
+	align-items: baseline;
+	gap: 0.5rem;
+	padding: 0.15rem 0.3rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+.overlay-row[data-current="true"] {
+	background: var(--accent-soft);
+}
+
+.overlay-marker {
+	color: var(--accent);
+	white-space: pre;
+}
+
+.overlay-text {
+	color: var(--text);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.overlay-row[data-dim="true"] .overlay-text {
+	color: var(--text-dim);
+}
+
+.overlay-row[data-current="true"] .overlay-text {
+	color: var(--accent);
+}
+
+.overlay-meta {
+	margin-left: auto;
+	color: var(--text-dim);
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.overlay-dialog > footer,
+.overlay-empty {
+	color: var(--text-dim);
+	padding-top: 0.3rem;
+}
+
+.help-columns {
+	display: flex;
+	gap: 1.5rem;
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+
+.help-column {
+	flex: 1;
+	min-width: 0;
+}
+
+.help-block {
+	min-height: 1.2em;
+}
+
+.help-section {
+	color: var(--text);
+	font-weight: 700;
+	letter-spacing: 0.04em;
+}
+
+.help-entry {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	max-width: 100%;
+	min-height: 1.55rem;
+	padding: 0 0.4rem;
+	border: 1px solid var(--border);
+	border-radius: 4px;
+	background: var(--bg-raised);
+	white-space: nowrap;
+}
+
+.help-icon {
+	width: 0.9rem;
+	height: 0.9rem;
+	color: var(--accent);
+}
+
+.help-title {
+	color: var(--text);
+}
+
+.help-entry .help-title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.help-key {
+	color: var(--accent);
+}
+
+.help-entry .help-key {
+	flex: none;
+	padding-left: 0.35rem;
+	border-left: 1px solid var(--border);
+	font: 11px/1.5 var(--font-mono);
+}
+
+.help-bracket {
+	color: var(--text-dim);
+}
+
+.help-footer {
+	border-top: 1px solid var(--accent);
+	padding-top: 0.3rem;
+}
+
+.viewer > .preview {
+	flex: none;
+	width: 90%;
+	height: 90%;
+}
+
+.resize-hint {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	color: var(--text-dim);
+}
+
+/* EOF */