/* Access for Durable Objects: the look of a desktop database front end, in a page. */

:root {
  --chrome: #f3f3f3;
  --chrome-dark: #e4e4e4;
  --chrome-line: #d0d0d0;
  --panel: #ffffff;
  --ink: #1f2733;
  --ink-soft: #5b6b7c;
  --accent: #2b579a;
  --accent-soft: #dbe7f6;
  --accent-line: #a8c4e6;
  --row-alt: #f6f7f9;
  --grid-line: #d6dae0;
  --header-bg: #eceff3;
  --select-bg: #cce4ff;
  --danger: #a4373a;
  --ok: #2f7d4f;
  --shadow: 0 8px 24px rgba(20, 30, 50, 0.18);
  --row-h: 24px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 13px/1.4 var(--font);
  color: var(--ink);
  background: var(--chrome);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------------------------------------------------------------- title bar */

.titlebar {
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 10px;
  background: var(--accent); color: #fff; flex: none;
  font-size: 12px;
}
.titlebar .app-name { font-weight: 600; letter-spacing: .01em; }
.titlebar .db-name { opacity: .9; }
.titlebar .spacer { flex: 1; }
.titlebar .tb-btn {
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 3px;
  padding: 3px 8px; font-size: 11px;
}
.titlebar .tb-btn:hover { background: rgba(255,255,255,.28); }
.titlebar .tb-btn.on { background: rgba(255,255,255,.34); }

/* ---------------------------------------------------------------- ribbon */

.ribbon { background: var(--chrome); border-bottom: 1px solid var(--chrome-line); flex: none; }
.ribbon-tabs { display: flex; align-items: flex-end; gap: 1px; padding: 4px 6px 0; overflow-x: auto; }
.ribbon-tab {
  border: 1px solid transparent; border-bottom: 0; background: transparent;
  padding: 5px 12px; border-radius: 3px 3px 0 0; color: var(--ink); white-space: nowrap;
  font-size: 12.5px;
}
.ribbon-tab:hover { background: #e9e9e9; }
.ribbon-tab.active { background: var(--panel); border-color: var(--chrome-line); font-weight: 600; }
.ribbon-tab.file { color: var(--accent); font-weight: 600; }
.ribbon-body {
  display: flex; align-items: stretch; gap: 0; background: var(--panel);
  border-top: 1px solid var(--chrome-line); padding: 4px 4px 0; min-height: 84px;
  overflow-x: auto;
}
.ribbon.collapsed .ribbon-body { display: none; }
.ribbon-group { display: flex; flex-direction: column; padding: 2px 8px 0; border-right: 1px solid var(--chrome-line); }
.ribbon-group:last-child { border-right: 0; }
.ribbon-items { display: flex; align-items: flex-start; gap: 2px; flex: 1; }
.ribbon-stack { display: flex; flex-direction: column; gap: 1px; justify-content: center; }
.ribbon-group-label { text-align: center; font-size: 10.5px; color: var(--ink-soft); padding: 2px 0 4px; }
.rbtn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid transparent; background: transparent; border-radius: 3px;
  padding: 4px 6px; min-width: 46px; max-width: 96px; font-size: 11.5px; line-height: 1.2;
  text-align: center;
}
.rbtn:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.rbtn:disabled { opacity: .4; cursor: default; }
.rbtn:disabled:hover { background: transparent; border-color: transparent; }
.rbtn.small {
  flex-direction: row; justify-content: flex-start; gap: 6px; min-width: 0; max-width: none;
  padding: 3px 6px; text-align: left;
}
.rbtn .ico { display: block; }
.rbtn.small .ico svg { width: 16px; height: 16px; }
.rbtn.large .ico svg { width: 28px; height: 28px; }
.rbtn .tw { white-space: nowrap; }

/* ---------------------------------------------------------------- body */

.body { display: flex; flex: 1; min-height: 0; }

/* ---------------------------------------------------------------- navigation pane */

.nav {
  width: 232px; flex: none; background: var(--panel); border-right: 1px solid var(--chrome-line);
  display: flex; flex-direction: column; min-height: 0;
}
.app.nav-hidden .nav { display: none; }
.nav-head { padding: 6px 8px; border-bottom: 1px solid var(--chrome-line); display: flex; gap: 6px; align-items: center; }
.nav-head select { flex: 1; min-width: 0; padding: 3px 4px; border: 1px solid var(--chrome-line); border-radius: 3px; background: #fff; }
.nav-search { padding: 6px 8px 2px; }
.nav-search input { width: 100%; padding: 4px 6px; border: 1px solid var(--chrome-line); border-radius: 3px; }
.nav-list { overflow: auto; flex: 1; padding: 4px 0 12px; }
.nav-group-title {
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  padding: 4px 8px; font-weight: 600; color: #3c4a5a; background: var(--chrome); border-bottom: 1px solid #e6e6e6;
}
.nav-group-title .chev { width: 10px; color: var(--ink-soft); }
.nav-item {
  display: flex; align-items: center; gap: 7px; padding: 3px 8px 3px 20px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-item:hover { background: #f0f4fa; }
.nav-item.active { background: var(--select-bg); }
.nav-empty { padding: 3px 8px 3px 20px; color: var(--ink-soft); font-style: italic; }
.nav-foot { border-top: 1px solid var(--chrome-line); padding: 4px 8px; font-size: 11px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- document tabs */

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabs {
  display: flex; align-items: stretch; gap: 2px; background: var(--chrome);
  padding: 4px 6px 0; overflow-x: auto; border-bottom: 1px solid var(--chrome-line); flex: none;
}
.tabs:empty { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px;
  background: #e8e8e8; border: 1px solid var(--chrome-line); border-bottom: 0;
  border-radius: 3px 3px 0 0; white-space: nowrap; font-size: 12.5px; color: #33404e;
}
.tab:hover { background: #f0f0f0; }
.tab.active { background: var(--panel); font-weight: 600; color: var(--ink); }
.tab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-line); }
.tab .x { border: 0; background: transparent; color: var(--ink-soft); border-radius: 2px; padding: 0 3px; line-height: 1; }
.tab .x:hover { background: #d8d8d8; color: var(--ink); }
.doc { flex: 1; min-height: 0; overflow: hidden; background: var(--panel); position: relative; display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- status bar */

.statusbar {
  flex: none; display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 8px;
  background: var(--chrome-dark); border-top: 1px solid var(--chrome-line);
  font-size: 11.5px; color: #33404e;
}
.statusbar .spacer { flex: 1; }
.status-seg { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.status-btn {
  border: 1px solid transparent; background: transparent; border-radius: 3px; padding: 0 5px;
  height: 20px; display: inline-flex; align-items: center;
}
.status-btn:hover { background: #d8dde3; }
.status-btn.on { background: var(--accent-soft); border-color: var(--accent-line); }
.status-rec { min-width: 110px; text-align: center; }
.rec-nav { display: inline-flex; gap: 1px; }
.pill { background: #fff; border: 1px solid var(--chrome-line); border-radius: 8px; padding: 0 7px; }

/* ---------------------------------------------------------------- start screen */

.start { overflow: auto; height: 100%; padding: 28px clamp(16px, 5vw, 64px) 60px; background: var(--panel); }
.start h1 { font-size: 26px; margin: 0 0 4px; font-weight: 600; }
.start .sub { color: var(--ink-soft); margin: 0 0 24px; max-width: 62ch; }
.start h2 { font-size: 15px; margin: 26px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--chrome-line); }
.start .cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
  border: 1px solid var(--chrome-line); border-radius: 4px; background: #fff; padding: 12px 14px;
  text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 96px;
}
button.card:hover { border-color: var(--accent-line); box-shadow: 0 2px 8px rgba(30,60,120,.12); }
.card .card-title { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.card .card-sub { color: var(--ink-soft); font-size: 12px; }
.card .card-meta { color: var(--ink-soft); font-size: 11px; margin-top: auto; }
.tile { display: flex; gap: 14px; align-items: center; border: 1px solid var(--chrome-line); border-radius: 4px; padding: 12px; background: #fff; }
.tile svg { width: 44px; height: 44px; flex: none; }
.recent-list { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.recent {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  border: 1px solid var(--chrome-line); border-radius: 4px; background: #fff; padding: 8px 12px; text-align: left;
}
.recent:hover { border-color: var(--accent-line); }
.recent .rname { font-weight: 600; }
.recent .rmeta { color: var(--ink-soft); font-size: 11.5px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- generic controls */

.btn {
  border: 1px solid var(--chrome-line); background: #fff; border-radius: 3px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: #f2f6fc; border-color: var(--accent-line); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #24487f; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.xs { padding: 2px 7px; font-size: 12px; }
input[type=text], input[type=number], input[type=date], input[type=search], select, textarea {
  border: 1px solid var(--chrome-line); border-radius: 3px; padding: 3px 6px; background: #fff; min-width: 0;
}
input:disabled, select:disabled { background: #f2f2f2; color: #6b6b6b; }
.toolbar {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line); flex: none; flex-wrap: wrap;
}
.toolbar .sep { width: 1px; height: 18px; background: var(--chrome-line); margin: 0 2px; }
.toolbar .grow { flex: 1; }
.hint { color: var(--ink-soft); font-size: 11.5px; }
.empty { padding: 24px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- datasheet */

.ds { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.ds-scroll { flex: 1; overflow: auto; position: relative; }
.ds-inner { position: relative; min-width: 100%; }
.ds-head { position: sticky; top: 0; z-index: 3; display: flex; background: var(--header-bg); border-bottom: 1px solid var(--chrome-line); }
.ds-head-cell {
  flex: none; padding: 3px 6px; border-right: 1px solid var(--grid-line); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; user-select: none;
  display: flex; align-items: center; gap: 4px;
}
.ds-head-cell .sortmark { color: var(--accent); font-size: 10px; }
.ds-head-cell .resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; }
.ds-head-cell:hover { background: #e2e8f0; }
.ds-head-cell.sorted { background: #dde7f5; }
.ds-gutter { flex: none; width: 26px; border-right: 1px solid var(--grid-line); background: var(--header-bg); }
.ds-body { position: relative; }
.ds-row { display: flex; position: absolute; left: 0; right: 0; height: var(--row-h); }
.ds-row.alt .ds-cell { background: var(--row-alt); }
.ds-row:hover .ds-cell { background: #f0f6ff; }
.ds-row.selected .ds-cell { background: var(--select-bg); }
.ds-row.new .ds-cell { background: #fffdf0; color: var(--ink-soft); font-style: italic; }
.ds-cell {
  flex: none; padding: 0 6px; border-right: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center;
  background: #fff; height: var(--row-h);
}
.ds-cell.num { justify-content: flex-end; }
.ds-cell.editing { padding: 0; overflow: visible; background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.ds-cell.editing input, .ds-cell.editing select, .ds-cell.editing textarea {
  width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0 5px; background: #fff;
}
.ds-cell.calc { background: #f5f5f5; color: #4a5a6a; }
.ds-cell.readonly { background: #fafafa; color: #46525f; }
.ds-cell .yesno { width: 15px; height: 15px; }
.ds-cell.filtered::after { content: ""; position: absolute; }
.ds-gutter.cell { display: flex; align-items: center; justify-content: center; }
.ds-gutter .marker { width: 11px; height: 11px; }
.ds-totals { display: flex; border-top: 1px solid var(--chrome-line); background: #f2f5f9; position: sticky; bottom: 0; z-index: 2; }
.ds-totals .ds-cell { background: #f2f5f9; font-style: italic; border-bottom: 0; }
.ds-totals select { max-width: 100%; font-size: 11px; border-color: transparent; background: transparent; }

/* ---------------------------------------------------------------- design surfaces */

.design { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.design-body { flex: 1; display: flex; min-height: 0; }
.design-main { flex: 1; overflow: auto; padding: 12px; min-width: 0; }
.prop {
  width: 300px; flex: none; border-left: 1px solid var(--chrome-line); background: var(--chrome);
  overflow: auto; padding: 8px;
}
.prop h3 { margin: 2px 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.prop table { width: 100%; border-collapse: collapse; }
.prop td { padding: 2px 3px; vertical-align: top; }
.prop td.k { color: #3c4a5a; width: 42%; font-size: 12px; }
.prop input, .prop select, .prop textarea { width: 100%; }
.prop .sect { margin: 12px 0 4px; font-weight: 600; border-bottom: 1px solid var(--chrome-line); padding-bottom: 3px; }

.grid { width: 100%; border-collapse: collapse; background: #fff; }
.grid th {
  background: var(--header-bg); border: 1px solid var(--grid-line); padding: 3px 6px; text-align: left;
  font-size: 12px; position: sticky; top: 0;
}
.grid td { border: 1px solid var(--grid-line); padding: 0; height: 22px; }
.grid td input, .grid td select { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; padding: 0 5px; }
.grid td input:focus, .grid td select:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.grid tr.active td { background: var(--select-bg); }
.grid .rowbtn { width: 28px; text-align: center; color: var(--ink-soft); }
.grid .tiny { width: 54px; }

/* ---------------------------------------------------------------- query designer */

.qbe { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qbe-top { flex: none; overflow: auto; background: var(--chrome); border-bottom: 1px solid var(--chrome-line); position: relative; padding: 10px; }
.qbe-top-inner { position: relative; }
.table-box {
  position: absolute; background: #fff; border: 1px solid #9aa7b4; box-shadow: 2px 2px 6px rgba(0,0,0,.12);
  border-radius: 3px; min-width: 168px; user-select: none;
}
.table-box .tb-head { background: var(--accent); color: #fff; padding: 3px 6px; font-weight: 600; cursor: move; font-size: 12px; }
.table-box .tb-field {
  padding: 2px 6px; border-bottom: 1px solid #eef1f4; cursor: grab; display: flex; align-items: center; gap: 5px;
}
.table-box .tb-field.key { font-weight: 600; }
.table-box .tb-field:hover { background: #eef4fc; }
.table-box .tb-field.used { background: #e7f0fb; }
.qbe-joins { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.qbe-grid { flex: none; overflow: auto; background: #fff; border-bottom: 1px solid var(--chrome-line); }
.qbe-grid table { border-collapse: collapse; width: 100%; min-width: 720px; }
.qbe-grid th { background: var(--header-bg); border: 1px solid var(--grid-line); padding: 2px 6px; font-size: 11.5px; text-align: left; width: 90px; }
.qbe-grid td { border: 1px solid var(--grid-line); padding: 0; height: 22px; }
.qbe-grid td input, .qbe-grid td select { width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0 5px; background: transparent; }
.qbe-grid td input:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.qbe-result { flex: 1; min-height: 0; overflow: auto; }
.sqlbox {
  width: 100%; height: 100%; min-height: 220px; font-family: var(--mono); font-size: 12.5px;
  border: 0; border-radius: 0; padding: 10px; resize: none; background: #fbfbfd;
}
.warn { background: #fff6e5; border-left: 3px solid #e0a437; padding: 6px 10px; color: #6a4d12; font-size: 12px; }
.error { background: #fdeaea; border-left: 3px solid var(--danger); padding: 6px 10px; color: #7a2528; font-size: 12px; }

/* ---------------------------------------------------------------- forms and reports */

.form-surface, .report-surface { flex: 1; overflow: auto; background: #8c9aa8; padding: 18px; }
.form-page, .report-page {
  background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,.28); margin: 0 auto; position: relative;
}
.form-page.bound { border: 1px solid #cfd6dd; }
.ctrl { position: absolute; overflow: hidden; }
.ctrl-label { color: #1f2733; display: flex; align-items: center; }
.ctrl-textbox, .ctrl-combo {
  border: 1px solid #a9b3bd; background: #fff; display: flex; align-items: center; padding: 0 5px;
}
.ctrl-textbox input, .ctrl-combo select { width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0 0; background: transparent; }
.ctrl.memo { align-items: flex-start; }
.ctrl.memo textarea { width: 100%; height: 100%; border: 0; resize: none; padding: 3px 5px; background: transparent; }
.ctrl-checkbox { display: flex; align-items: center; }
.ctrl-button {
  border: 1px solid #9aa7b4; border-radius: 3px; background: linear-gradient(#fdfdfd, #eef1f5);
  display: flex; align-items: center; justify-content: center; padding: 0 6px; color: #22303f;
}
.ctrl-button:hover { background: linear-gradient(#fff, #e2ebf7); }
.ctrl-line { background: #7b8794; }
.report-page { border: 1px solid #cfd6dd; box-shadow: 0 4px 18px rgba(0,0,0,.3); }
.report-page .band { position: relative; }
.page-shadow { background: #fff; }
.form-section-head, .form-section-foot { position: relative; }
.subform-frame { border: 1px solid #b9c2cb; background: #fff; overflow: auto; }

/* ---------------------------------------------------------------- relationships */

.rel-surface { flex: 1; overflow: auto; position: relative; background: var(--chrome); }
.rel-box {
  position: absolute; background: #fff; border: 1px solid #7f8b98; border-radius: 3px; min-width: 150px;
  box-shadow: 2px 2px 6px rgba(0,0,0,.14); user-select: none;
}
.rel-box .rb-head { background: var(--header-bg); font-weight: 600; padding: 3px 6px; cursor: move; border-bottom: 1px solid var(--grid-line); }
.rel-box .rb-field { padding: 1px 6px; }
.rel-box .rb-field.key { font-weight: 600; }
.rel-box .rb-field.pk { text-decoration: underline; }
.rel-joins { position: absolute; left: 0; top: 0; pointer-events: none; }
.rel-box.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---------------------------------------------------------------- macro and module editors */

.macro-list { border: 1px solid var(--chrome-line); background: #fff; }
.macro-action { display: flex; gap: 6px; align-items: flex-start; padding: 4px 6px; border-bottom: 1px solid #eef1f4; }
.macro-action .idx { color: var(--ink-soft); width: 22px; text-align: right; font-size: 11px; padding-top: 3px; }
.macro-action select { width: 190px; }
.macro-args { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.macro-arg { display: flex; align-items: center; gap: 4px; }
.macro-arg label { font-size: 11.5px; color: var(--ink-soft); }
.macro-arg input { width: 190px; }
.macro-arg textarea { width: 320px; height: 40px; }
.code-surface { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.code-area {
  flex: 1; width: 100%; border: 0; padding: 10px 12px; font-family: var(--mono); font-size: 12.5px;
  resize: none; background: #fbfbfd; tab-size: 2; white-space: pre; overflow: auto;
}

/* ---------------------------------------------------------------- dialogs */

.modal-back {
  position: fixed; inset: 0; background: rgba(24,32,44,.34); display: flex; align-items: flex-start;
  justify-content: center; padding: 5vh 12px; z-index: 40; overflow: auto;
}
.dialog {
  background: var(--panel); border-radius: 5px; box-shadow: var(--shadow); width: min(560px, 96vw);
  display: flex; flex-direction: column; max-height: 90vh; border: 1px solid #b9c2cb;
}
.dialog.wide { width: min(880px, 96vw); }
.dialog.wider { width: min(1100px, 97vw); }
.dialog-head { padding: 10px 14px; border-bottom: 1px solid var(--chrome-line); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.dialog-head .spacer { flex: 1; }
.dialog-body { padding: 12px 14px; overflow: auto; }
.dialog-foot { padding: 10px 14px; border-top: 1px solid var(--chrome-line); display: flex; gap: 8px; justify-content: flex-end; background: var(--chrome); border-radius: 0 0 5px 5px; }
.form-row { display: grid; grid-template-columns: 150px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.form-row.wide { grid-template-columns: 1fr; }
.form-row > label { color: #3c4a5a; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.checkline { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.tabs-mini { display: flex; gap: 4px; border-bottom: 1px solid var(--chrome-line); margin-bottom: 10px; }
.tabs-mini button { border: 0; background: transparent; padding: 5px 10px; border-bottom: 2px solid transparent; }
.tabs-mini button.active { border-bottom-color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- menus and toasts */

.ctx {
  position: fixed; z-index: 60; background: #fff; border: 1px solid #b9c2cb; border-radius: 4px;
  box-shadow: var(--shadow); padding: 4px; min-width: 190px;
}
.ctx button {
  display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent;
  padding: 5px 8px; border-radius: 3px; text-align: left;
}
.ctx button:hover { background: var(--accent-soft); }
.ctx .ctx-sep { height: 1px; background: var(--chrome-line); margin: 4px 2px; }
.ctx .ctx-title { padding: 4px 8px; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ctx button.sub { justify-content: space-between; }
.ctx button.sub::after { content: ">"; color: var(--ink-soft); }
.toast-root, #toast-root { position: fixed; right: 14px; bottom: 34px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  background: #24313f; color: #fff; padding: 8px 12px; border-radius: 4px; box-shadow: var(--shadow);
  max-width: 380px; font-size: 12.5px;
}
.toast.err { background: #8f2f33; }
.toast.ok { background: #276b46; }

/* ---------------------------------------------------------------- helpers */

.scroll { overflow: auto; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-soft); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.pushdown { margin-top: auto; }
.grow { flex: 1; }
.hidden { display: none !important; }
.badge { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 8px; padding: 0 6px; font-size: 11px; }
.spin { width: 14px; height: 14px; border: 2px solid var(--accent-line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- narrow screens */

.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; z-index: 20; top: 0; bottom: 0; left: 0; box-shadow: var(--shadow); height: 100%; }
  .app.nav-hidden .nav { display: none; }
  .ribbon-body { min-height: 78px; }
  .prop { position: absolute; right: 0; top: 0; bottom: 0; z-index: 15; box-shadow: var(--shadow); }
  .statusbar .hide-narrow { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .start { padding: 18px 14px 48px; }
}

/* ---------------------------------------------------------------- printing */

@media print {
  body { background: #fff; overflow: visible; height: auto; }
  .titlebar, .ribbon, .nav, .tabs, .statusbar, .toolbar, .prop { display: none !important; }
  .app, .body, .main, .doc { display: block !important; height: auto !important; overflow: visible !important; }
  .form-surface, .report-surface { background: #fff; padding: 0; overflow: visible; }
  .form-page, .report-page { box-shadow: none; margin: 0; border: 0; page-break-after: always; }
  .print-only { display: block; }
  @page { margin: 0.5in; }
}
.print-only { display: none; }