/* PFileShare — light: a cool, slate-tinted ledger (ink chrome, one blue on the data).
   Dark: bluish graphite; the primary button and the accents are blue. */
:root {
  color-scheme: light;
  --ground: #f1f4f8;
  --surface: #ffffff;
  --raised: #e9edf3;
  --border: #dfe5ec;
  --rule: #edf1f5;
  --control: #cfd7e1;
  --text: #0b1220;
  --muted: #5f6b7a;
  --faint: #94a0af;
  --primary: #0f1b2d;
  --primary-hover: #1e2c42;
  --on-primary: #ffffff;
  --secondary: #e6ebf1;
  --secondary-hover: #dae1ea;
  --hue: #1d5fd6;
  --sys: #a4afbd;
  --negative: #c4242a;
  --row-hover: #f4f7fa;
  --inset: #f5f7fa;
  --drop: #e6eefb;
  --veil: rgba(241, 244, 248, .94);
  --float-shadow: 0 8px 28px rgba(15, 27, 45, .12);
  --doc-page: #ffffff;
  --row-hover-text: var(--text);
  --row-hover-muted: var(--muted);
  --lane: #e6eaf0;
  --card: #ffffff;
  --card-border: #dbe1e8;
  --ok-ink: #1d7a3e; --warn-ink: #8a5a00;

  --radius-card: 10px;
  --card-pad: 20px;
  --radius-control: 6px;
  --rail: 56px;
  --gap: 12px;
  --pad: 32px;
  --column: 920px;
  --row: 56px;
  --control-height: 32px;
  /* type scale: compact, readable at 100% zoom; every size in the app comes from here */
  --fs-display: 24px;
  --fs-title: 20px;
  --fs-lg: 16px;
  --fs-section: 14px;
  --fs-md: 13px;
  --fs-body: 12.5px;
  --fs-sm: 12px;
  --fs-small: 11.5px;
  --fs-2xs: 11px;
  --lh-body: 18px;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Dark: bluish graphite, by system preference unless light is chosen, or by choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f1419; --surface: #161d27; --raised: #1f2834; --border: #263241; --rule: #1c2531; --control: #344255;
    --text: #e6edf3; --muted: #8b98a9; --faint: #5d6b7e;
    --primary: #4c8dff; --primary-hover: #6aa0ff; --on-primary: #07111f;
    --secondary: #1f2834; --secondary-hover: #283343;
    --hue: #6ea2ff; --sys: #3a4658; --negative: #f08a8f;
    --row-hover: #1a2230; --inset: #121922;
    --drop: rgba(76, 141, 255, .14); --veil: rgba(15, 20, 25, .92); --float-shadow: 0 12px 32px rgba(0, 0, 0, .5);
    --doc-page: #161d27;
    --lane: #161d27; --card: #1c2532; --card-border: #2a3544;
    --ok-ink: #7fd49c; --warn-ink: #f0c75e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f1419; --surface: #161d27; --raised: #1f2834; --border: #263241; --rule: #1c2531; --control: #344255;
  --text: #e6edf3; --muted: #8b98a9; --faint: #5d6b7e;
  --primary: #4c8dff; --primary-hover: #6aa0ff; --on-primary: #07111f;
  --secondary: #1f2834; --secondary-hover: #283343;
  --hue: #6ea2ff; --sys: #3a4658; --negative: #f08a8f;
  --row-hover: #1a2230; --inset: #121922;
  --drop: rgba(76, 141, 255, .14); --veil: rgba(15, 20, 25, .92); --float-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  --doc-page: #161d27;
  --lane: #161d27; --card: #1c2532; --card-border: #2a3544;
  --ok-ink: #7fd49c; --warn-ink: #f0c75e;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; } /* no double-tap zoom */
body {
  margin: 0; background: var(--ground); color: var(--text);
  font-feature-settings: "cv05", "cv08", "ss03"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  overflow-x: hidden; overflow-x: clip;
}
/* It is an app: clicks and drags on the chrome (buttons, labels, cards, headings) do not select text;
   the content does (file names, notes, Markdown, fields, code). */
body { -webkit-user-select: none; user-select: none; }
input, textarea, select, [contenteditable], .md, .name, .sub, .app-desc, .app-log, .rel-notes, .ql-editor,
.toastui-editor-contents, .ProseMirror, code, pre, .dlg p, .selectable { -webkit-user-select: text; user-select: text; }
/* iOS Safari zooms into any field under 16px and the page slides; touch screens get 16px fields. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px; } }
h1, h2, p, ul, dl, dd { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: color-mix(in srgb, var(--hue) 35%, transparent); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { color: var(--muted); font-size: var(--fs-small); line-height: 16px; }
:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
svg { flex: none; }
/* scrollbars: thin, rounded, quiet until hovered; the same everywhere in the app */
:root { --sb-thumb: color-mix(in srgb, var(--text) 16%, transparent); --sb-thumb-hover: color-mix(in srgb, var(--text) 30%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
*:hover { scrollbar-color: var(--sb-thumb-hover) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); background-clip: padding-box; border: 2px solid transparent; }
.ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell: icon rail ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.rail {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 0; border-right: 1px solid var(--border); background: var(--ground);
}
.mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 20px; border-radius: var(--radius-control); }
.mark-ink { fill: var(--text); }
.mark-hue { fill: var(--hue); stroke: var(--ground); stroke-width: 1.5; }
.nav {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-control); background: none; cursor: pointer;
  color: var(--muted); text-decoration: none;
}
.nav svg, .btn svg, .act svg, .thumb svg, .menu svg, .composer-ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav svg { width: 18px; height: 18px; }
.nav span { display: none; }
.nav:hover { color: var(--text); background: var(--raised); }
.nav[aria-current="page"] { color: var(--text); background: var(--raised); }
.nav.foot { margin-top: auto; }

/* ---------- canvas: one centred column ---------- */
.canvas { padding: 36px var(--pad) 48px; min-width: 0; }
.column { max-width: var(--column); margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
.title-text { min-width: 0; }
h1 { font-size: var(--fs-title); line-height: 28px; font-weight: 700; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subline { color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 4px -6px; color: var(--muted); }
.crumbs:empty { display: none; }
.crumbs a { color: var(--muted); text-decoration: none; padding: 2px 6px; border-radius: 4px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.crumbs a:hover { color: var(--text); background: var(--raised); }
.crumbs .sep { color: var(--faint); }
.actions { display: flex; gap: 8px; flex: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height);
  padding: 0 14px; border-radius: var(--radius-control); border: 1px solid transparent;
  font-weight: 500; cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.6; }
.btn.sm { height: 32px; padding: 0 12px; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.secondary { background: var(--secondary); color: var(--text); }
.btn.secondary:hover { background: var(--secondary-hover); }
.btn.danger { background: var(--negative); color: #fff; }
:root[data-theme="dark"] .btn.danger { color: #0f1419; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.danger { color: #0f1419; } }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primary:disabled { opacity: 1; background: var(--secondary); color: var(--faint); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.panel h2 { font-size: var(--fs-section); line-height: 20px; font-weight: 500; }

/* ---------- quick note: a composer on top of the list ---------- */
.composer {
  display: flex; align-items: flex-end; gap: 10px;
  margin: 10px 10px 2px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--inset);
  transition: border-color .15s, background-color .15s;
}
.composer:focus-within { border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); background: var(--surface); }
.composer-ico { width: 18px; height: 18px; color: var(--faint); align-self: flex-start; margin-top: 9px; }
.composer:focus-within .composer-ico { color: var(--muted); }
.composer textarea {
  flex: 1; min-width: 0; min-height: 34px; max-height: 260px; margin: 0; padding: 7px 0;
  border: 0; background: none; resize: none; line-height: 20px; overflow-y: auto;
}
.composer textarea:focus { outline: none; }
.composer textarea::placeholder { color: var(--faint); }
.composer-key { align-self: center; opacity: 0; transition: opacity .15s; white-space: nowrap; color: var(--faint); }
.composer:focus-within .composer-key { opacity: 1; }

/* ---------- rows ---------- */
.rows { list-style: none; margin: 0; padding: 6px 10px 10px; }
.row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 112px auto; align-items: center; gap: 12px;
  min-height: var(--row); padding: 8px; border-radius: var(--radius-control);
  border-top: 1px solid var(--rule);
}
.row:first-child, .row:hover + .row, .row.drop + .row { border-top-color: transparent; }
.row:hover { background: var(--row-hover); border-top-color: transparent; }
.row.drop { background: var(--drop); outline: 1.5px solid var(--hue); outline-offset: -1.5px; }
.row.dragging { opacity: .45; }
.thumb { width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; background: var(--raised); }
.thumb:has(img) { background: none; }
.thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--raised); display: block; }
.thumb svg { width: 18px; height: 18px; }
.row.folder .thumb { background: color-mix(in srgb, var(--hue) 12%, transparent); }
.thumb .folder-ico { width: 20px; height: 20px; color: var(--hue); }
.thumb a { display: block; border-radius: 6px; }
.who { min-width: 0; }
.name { display: block; font-weight: 500; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.name:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--faint); }
.sub { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit { color: var(--muted); }
.when { text-align: right; color: var(--muted); white-space: nowrap; }
.row-actions { display: flex; align-items: center; gap: 2px; justify-content: flex-end; min-width: 132px; }
.act {
  height: 32px; padding: 0 10px; border: 0; border-radius: var(--radius-control); background: none;
  font-weight: 500; color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.act:hover { background: var(--raised); }
.act svg { width: 16px; height: 16px; }
.icon-act { width: 32px; padding: 0; justify-content: center; color: var(--muted); }
.icon-act:hover { color: var(--text); }
/* With a mouse, the row's action stays quiet until the row is pointed at. */
@media (hover: hover) and (pointer: fine) {
  .row .act:not(.icon-act) { color: var(--muted); }
  .row:hover .act:not(.icon-act), .row:focus-within .act:not(.icon-act) { color: var(--text); }
}

.row.up .sub { color: var(--text); }
.progress { height: 3px; margin-top: 6px; background: var(--raised); border-radius: 2px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: var(--hue); transition: width .15s linear; }
.row.failed .sub { color: var(--negative); }

.empty {
  margin: 4px 0; padding: 28px 16px; border: 1px dashed var(--control); border-radius: 8px;
  color: var(--muted); list-style: none; text-align: center;
}
.empty b { display: block; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.skeleton { display: block; height: 14px; border-radius: 3px; background: var(--raised); }
.thumb .skeleton { border-radius: 6px; }
.error-line { margin: 8px; padding: 12px 0; list-style: none; display: flex; gap: 12px; align-items: center; }
.error-line button { border: 0; background: none; padding: 0; font-weight: 500; text-decoration: underline; cursor: pointer; }

.field {
  display: block; width: 100%; padding: 10px 12px;
  border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); line-height: 20px;
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--hue); }

/* ---------- overview tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.tiles[hidden], .searchbar[hidden], .filters[hidden], .list-head[hidden], .disk[hidden], .composer[hidden] { display: none; }
.tile { display: flex; flex-direction: column; min-height: 200px; padding: 18px 20px 16px; }
.panel .tile-h { font-size: var(--fs-small); line-height: 16px; font-weight: 500; color: var(--muted); }
.lead { margin-top: 10px; font-size: 26px; line-height: 32px; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; }
.lead .unit { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--muted); }
.bar.wide { width: auto; height: 8px; margin-top: 14px; border-radius: 4px; }
.legend { margin-top: auto; padding-top: 16px; display: grid; gap: 6px; list-style: none; }
.legend div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.legend dt { color: var(--muted); }
.legend dd { text-align: right; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.legend.links { gap: 0; margin-left: -8px; margin-right: -8px; }
.links a, .tile-folders a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px;
  height: 30px; padding: 0 8px; border-radius: 6px; color: var(--text); text-decoration: none;
}
.links a:hover, .tile-folders a:hover { background: var(--row-hover); }
.links .k-label { color: var(--muted); }
.links a:hover .k-label { color: var(--text); }
.chev { width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-folders { list-style: none; margin: 10px -8px 0; display: flex; flex-direction: column; flex: 1; }
.tile-folders a { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; height: 32px; }
.tile-folders a svg { width: 18px; height: 18px; fill: none; stroke: var(--hue); stroke-width: 1.5; stroke-linejoin: round; }
.tile-folders .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-folders .num { color: var(--muted); }
.tile-folders .all { margin-top: auto; padding-top: 6px; }
.tile-folders .all a { grid-template-columns: minmax(0, 1fr) 14px; color: var(--muted); }
.tile-folders .all a:hover { color: var(--text); }
.tile-empty { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 4px 8px; }
.crumbs a.drop, .tile-folders a.drop { background: var(--drop); color: var(--text); }

/* ---------- list head (overview) ---------- */
.list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px 2px; }
.list-more { color: var(--muted); text-decoration: none; font-weight: 500; }
.list-more:hover { color: var(--text); }
.more { list-style: none; padding: 12px 8px 4px; border-top: 1px solid var(--rule); }
.more a { color: var(--muted); font-weight: 500; text-decoration: none; }
.more a:hover { color: var(--text); }

/* ---------- search ---------- */
.searchbar {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  transition: border-color .15s;
}
.searchbar:focus-within { border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); }
.searchbar > svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.searchbar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: var(--fs-md); outline: none; }
.searchbar input::placeholder { color: var(--faint); }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.searchbar .icon-act[hidden] { display: none; }
.key { font: 500 var(--fs-2xs)/1 var(--font); color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 4px 7px; margin-right: 6px; }
.searchbar:focus-within .key { display: none; }
@media (pointer: coarse) { .key { display: none; } }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.fchip {
  height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 15px;
  background: var(--surface); color: var(--muted); font-weight: 500; cursor: pointer;
  transition: background-color .12s, color .12s;
}
.fchip:hover { color: var(--text); }
.fchip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---------- storage strip under the list ---------- */
.strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 0; }
.strip .hint { color: var(--faint); min-width: 0; }
.disk { display: flex; align-items: center; gap: 10px; flex: none; }
.bar { display: flex; width: 120px; height: 6px; background: var(--raised); border-radius: 3px; overflow: hidden; }
.bar i { display: block; height: 100%; }
.bar .shelf { background: var(--hue); min-width: 2px; }
.bar .sys { background: var(--sys); }
.disk .meta b { font-weight: 500; color: var(--text); }

/* ---------- floating: menu, dialog, veil, toast ---------- */
.menu {
  position: fixed; z-index: 40; min-width: 200px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--float-shadow);
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px;
  border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; color: var(--text);
}
.menu button svg { width: 16px; height: 16px; color: var(--muted); }
.menu button:hover, .menu button:focus-visible { background: var(--raised); outline: none; }
.menu button:hover svg, .menu button:focus-visible svg { color: var(--text); }
.menu button.danger { color: var(--negative); }
.menu button.danger svg { color: var(--negative); }
.menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }

.dlg {
  width: min(420px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); box-shadow: var(--float-shadow);
}
.dlg::backdrop { background: rgba(10, 12, 16, .5); }
.dlg h2 { font-size: var(--fs-section); line-height: 20px; font-weight: 500; margin-bottom: 4px; }
.dlg p { color: var(--muted); margin-bottom: 12px; }
.dlg label { display: block; font-weight: 500; margin: 12px 0 8px; }
.dlg .field { height: 40px; padding: 0 12px; }
.dlg .buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.picker-list { list-style: none; max-height: 300px; overflow: auto; margin: 12px 0 0; border: 1px solid var(--border); border-radius: var(--radius-control); padding: 4px; }
.picker-list button {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; border: 0; border-radius: 4px;
  background: none; cursor: pointer; text-align: left; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.picker-list button svg { width: 16px; height: 16px; color: var(--hue); fill: none; stroke: currentColor; stroke-width: 1.5; }
.picker-list button:hover { background: var(--raised); }
.picker-list button[aria-pressed="true"] { background: color-mix(in srgb, var(--hue) 16%, transparent); font-weight: 500; }
.picker-list button:disabled { opacity: .45; cursor: default; }

.veil {
  position: fixed; inset: 12px; z-index: 20; display: grid; place-items: center;
  border: 2px dashed var(--hue); border-radius: 12px; background: var(--veil);
  font-size: 18px; font-weight: 500; pointer-events: none;
}
.veil[hidden] { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translate(-50%, 12px);
  max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 10px 16px; border-radius: var(--radius-control); background: var(--primary); color: var(--on-primary);
  box-shadow: var(--float-shadow); opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- document editor ---------- */
.editor { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--ground); }
.editor[hidden] { display: none; }
.ed-bar {
  display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) var(--pad) 10px;
  border-bottom: 1px solid var(--border); background: var(--ground);
}
.ed-back { flex: none; margin-left: -10px; }
.ed-title {
  flex: 1; min-width: 0; height: 40px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-control);
  background: none; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em;
}
.ed-title:hover { border-color: var(--border); }
.ed-title:focus { outline: none; border-color: var(--hue); background: var(--surface); }
.ed-status { flex: none; min-width: 84px; text-align: right; }
.ed-toolbar.ql-toolbar.ql-snow {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; padding: 8px var(--pad);
  border: 0; border-bottom: 1px solid var(--border); background: var(--surface); font-family: var(--font);
}
.ed-toolbar .ql-formats { display: inline-flex; align-items: center; gap: 2px; margin: 0 !important; }
.ed-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 32px var(--pad) 120px; }
.ed-page {
  max-width: 820px; margin: 0 auto; background: var(--doc-page); border: 1px solid var(--border); border-radius: var(--radius-card);
}
.ed-page .ql-container.ql-snow { border: 0; font-family: var(--font); font-size: var(--fs-section); }
.ed-page .ql-editor {
  min-height: 60vh; padding: 48px 64px; line-height: 1.65; color: var(--text);
}
.ed-page .ql-editor.ql-blank::before { color: var(--muted); font-style: normal; left: 64px; right: 64px; }
.ql-editor h1 { font-size: var(--fs-display); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 1.2em 0 .4em; }
.ql-editor h2 { font-size: 19px; line-height: 1.3; font-weight: 700; margin: 1.1em 0 .35em; }
.ql-editor h3 { font-size: var(--fs-lg); line-height: 1.35; font-weight: 600; margin: 1em 0 .3em; }
.ql-editor > :first-child { margin-top: 0; }
.ql-editor p { margin: 0 0 .5em; }
.ql-editor blockquote { border-left: 3px solid var(--hue) !important; padding-left: 16px !important; color: var(--muted); margin: .6em 0 !important; }
.ql-editor .ql-code-block-container, .ql-snow .ql-editor .ql-code-block-container {
  background: var(--raised) !important; color: var(--text) !important; border-radius: 6px; padding: 12px 14px !important; font-size: var(--fs-body);
}
.ql-editor a, .ql-snow .ql-editor a { color: var(--hue); }
.ql-editor img { border-radius: 4px; }
.ql-editor li[data-list="checked"] { color: var(--muted); text-decoration: line-through; }

/* Quill's snow theme, retuned to the tokens and translated. */
.ql-snow .ql-stroke { stroke: var(--muted); }
.ql-snow .ql-fill { fill: var(--muted); }
.ql-snow .ql-picker { color: var(--muted); }
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button { width: 32px; height: 32px; padding: 6px 7px; border-radius: 6px; }
.ql-snow.ql-toolbar button:hover, .ql-snow.ql-toolbar .ql-picker-label:hover { background: var(--raised); }
.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke { stroke: var(--hue); }
.ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill { fill: var(--hue); }
.ql-snow.ql-toolbar button.ql-active { background: color-mix(in srgb, var(--hue) 14%, transparent); }
.ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected { color: var(--hue); }
.ql-snow .ql-picker-label { border-radius: 6px; height: 32px; display: flex; align-items: center; }
.ql-snow .ql-picker.ql-header { width: 128px; }
.ql-snow .ql-picker-options { background: var(--surface); border-color: var(--border) !important; border-radius: 8px; box-shadow: var(--float-shadow) !important; padding: 4px 8px; }
.ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "Szöveg"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: "Címsor 1"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "Címsor 2"; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before, .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "Címsor 3"; }
.ql-snow .ql-tooltip {
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--float-shadow); padding: 8px 12px; font-family: var(--font); z-index: 5;
}
.ql-snow .ql-tooltip input[type=text] { background: var(--surface); color: var(--text); border: 1px solid var(--control); border-radius: 6px; height: 32px; font-size: var(--fs-body); }
.ql-snow .ql-tooltip::before { content: "Link:"; color: var(--muted); }
.ql-snow .ql-tooltip[data-mode=link]::before { content: "Link címe:"; }
.ql-snow .ql-tooltip a.ql-preview { color: var(--hue); }
.ql-snow .ql-tooltip a.ql-action::after { content: "Szerkesztés"; color: var(--hue); }
.ql-snow .ql-tooltip.ql-editing a.ql-action::after { content: "Mentés"; }
.ql-snow .ql-tooltip a.ql-remove::before { content: "Eltávolítás"; color: var(--negative); }
.ql-snow .ql-editor ul > li::before, .ql-snow .ql-editor li[data-list] > .ql-ui::before { color: var(--muted); }

/* ---------- overview: apps at a glance ---------- */
.apps-over[hidden] { display: none; }
.apps-over .list-head { align-items: flex-start; }
.apps-over .list-head .meta { margin-top: 2px; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 28px; padding: 4px 20px 16px; }
.ov-h { margin: 6px 0 6px; font-size: var(--fs-small); line-height: 16px; font-weight: 500; color: var(--muted); }
.ov-list { list-style: none; margin: 0 -8px; }
.ov-list a { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 8px; border-radius: var(--radius-control); color: var(--text); text-decoration: none; }
.ov-list a:hover { background: var(--row-hover); }
.ov-list .app-ico.xs { width: 22px; height: 22px; border-radius: 6px; font-size: var(--fs-2xs); }
.ov-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.ov-open { min-width: 26px; text-align: center; font-size: var(--fs-small); line-height: 20px; padding: 0 7px; border-radius: 10px; background: var(--raised); color: var(--muted); }
.ov-open.hot { background: color-mix(in srgb, var(--hue) 15%, transparent); color: var(--hue); font-weight: 600; }
.ov-app { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-small); }
.ov-list .badge { flex: none; }
.ov-empty { padding: 8px 0; }

/* ---------- open cards: the Teendők page and the overview panel ---------- */
.todo-over[hidden], .todos[hidden], .panel.files[hidden], .strip[hidden] { display: none; }
.todo-over .list-head { align-items: flex-start; }
.todo-over .list-head .meta { margin-top: 2px; }
.todo-over .rows { padding-top: 4px; }
.todo-bar { display: flex; align-items: center; gap: 10px; height: 44px; margin: 8px 8px 0; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); }
.todo-bar:focus-within { border-color: var(--hue); }
.todo-bar svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; }
.todo-bar input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; }
.todo-bar input::placeholder { color: var(--faint); }
.todo-add { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 6px 6px 6px 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--raised); }
.todo-add:focus-within { border-color: var(--hue); }
.todo-add > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--hue); stroke-width: 1.8; stroke-linecap: round; }
.todo-add #ta-title { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-weight: 500; }
.todo-add #ta-title::placeholder { color: var(--faint); font-weight: 400; }
.todo-add .ta-due, .todo-add .ta-app { flex: none; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-small); color-scheme: light dark; }
.todo-add .ta-app { max-width: 210px; }
.todo-add .ta-due:focus, .todo-add .ta-app:focus { outline: none; border-color: var(--hue); }
.todo-bar .todo-inbox { flex: none; font-size: var(--fs-small); }
.todo-bar .todo-inbox[hidden] { display: none; }
.todo-sep[data-g="late"], .todo-sep[data-g="today"] { color: var(--negative); }
.todo-sep[data-g="soon"] { color: var(--warn-ink); }
.row.todo .who .sub .app-ico.xs { display: inline-grid; width: 14px; height: 14px; border-radius: 4px; font-size: 8px; margin-right: 5px; vertical-align: -2px; }
.row.todo .sub b { color: var(--text); font-weight: 500; }
.todo-rel.late { color: var(--negative); }
.todo-check {
  justify-self: center; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%;
  border: 1.6px solid var(--l, var(--control)); background: transparent; color: transparent; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.todo-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.todo-check:hover, .todo-check:focus-visible { border-color: var(--ok-ink); color: var(--ok-ink); background: color-mix(in srgb, #2f9e55 12%, transparent); }
.row.todo.leaving .todo-check { border-color: #2f9e55; background: #2f9e55; color: #fff; }

/* ---------- apps: dashboard, app page, board ---------- */
.canvas[hidden], .apps[hidden] { display: none !important; }
.apps { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; padding-top: 28px; }
.apps[data-tab="teendok"], .apps[data-tab="dash"] { height: 100vh; height: 100dvh; }
.apps svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apps-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--pad) 14px; }
.apps-head .subline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.icon-btn { width: var(--control-height); padding: 0; justify-content: center; }
.tabs { display: flex; gap: 2px; padding: 0 calc(var(--pad) - 8px); border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs[hidden] { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px;
  color: var(--muted); text-decoration: none; font-weight: 500; white-space: nowrap; border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.tab:hover { color: var(--text); }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--hue); }
.tab-count, .col-count { font-size: var(--fs-small); line-height: 18px; padding: 0 6px; border-radius: 9px; background: var(--raised); color: var(--muted); }
.apps-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--pad) 40px; }
.apps[data-tab="teendok"] .apps-body, .apps[data-tab="dash"] .apps-body { padding: 0; }
.apps-body > .panel { width: 100%; max-width: 940px; }
.apps-body > .panel { padding: 14px 20px 18px; }
.apps .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-bottom: 4px; }
.apps .panel-head .act { margin-right: -10px; }
.apps-body > .refs { padding-bottom: 8px; }
.refs .rows { margin: 0 -10px; padding: 0 0 4px; }
.apps .empty { margin: 8px 0 4px; }

/* dashboard */
.dash { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); align-items: start; }
.dash-empty { max-width: 640px; margin: 0; }
.app-card {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--card-pad);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); cursor: pointer;
  transition: border-color .15s, box-shadow .2s, transform .2s var(--ease-out);
}
.app-card:hover { border-color: var(--hue); box-shadow: 0 6px 22px rgba(10, 20, 48, .08); transform: translateY(-1px); }
.app-card.skel { cursor: default; gap: 14px; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.app-name { min-width: 0; font-size: var(--fs-section); line-height: 20px; font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver { flex: none; font-size: var(--fs-small); font-weight: 500; line-height: 20px; padding: 0 8px; border-radius: 10px; background: color-mix(in srgb, var(--hue) 14%, transparent); color: var(--hue); white-space: nowrap; }
.ver.none { background: var(--raised); color: var(--muted); }
.app-desc { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.app-stats dt { color: var(--muted); font-size: var(--fs-small); line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-stats dd { margin-top: 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-stats dd.hot { color: var(--hue); font-weight: 700; }
.app-deps { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--raised); color: var(--muted); font-size: var(--fs-small); }
.app-deps svg { width: 14px; height: 14px; }
.app-log { color: var(--muted); font-size: var(--fs-small); line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-log b { color: var(--text); font-weight: 500; }
.app-foot { display: flex; align-items: center; gap: 16px; min-width: 0; margin-top: auto; }
.app-link { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text); text-decoration: none; font-weight: 500; }
.app-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-link:hover { color: var(--hue); }
.app-link svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.app-link:hover svg { color: var(--hue); }

/* the Appok page: namespaces as columns, apps as cards */
.col.ns-col { width: 400px; }
.ns-lanes .add-col, .ns-lanes .col-ph { width: 400px; }
.ns-col.skel { padding-bottom: 10px; }
.app-tile.skel { margin: 0 8px; padding: 12px; border-radius: var(--radius-card); background: var(--card); }
.col-open svg { width: 13px; height: 13px; margin: 0 3px -2px -1px; }
.col-open { font-size: var(--fs-small); line-height: 18px; padding: 0 7px; border-radius: 9px; font-weight: 600;
  background: color-mix(in srgb, var(--hue) 16%, transparent); color: var(--hue); }
.card.app-tile {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border-radius: var(--radius-card);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.card.app-tile:hover { border-color: var(--hue); }
.card.app-tile[data-color] { background: color-mix(in srgb, var(--c) 13%, var(--card)); border-color: color-mix(in srgb, var(--c) 30%, var(--card-border)); }
.card.app-tile[data-color]:hover { border-color: color-mix(in srgb, var(--c) 70%, var(--card-border)); }
.app-tile .app-top { gap: 10px; }
.app-tile .app-name { font-size: 15px; line-height: 22px; }
.app-tile .app-desc { font-size: 13px; line-height: 18px; -webkit-line-clamp: 2; }
.app-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.app-num { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); font-size: 13px; text-decoration: none; white-space: nowrap; }
.app-num svg { width: 15px; height: 15px; flex: none; }
.app-num b { color: var(--text); font-weight: 600; }
.app-num.hot { background: color-mix(in srgb, var(--hue) 15%, transparent); color: var(--hue); }
.app-num.hot b { color: var(--hue); font-size: 14px; }
.app-num.late { background: #d63b3b; color: #fff; }
.app-num.late b { color: #fff; }
a.app-num:hover { filter: brightness(1.08); }
.app-tile .app-foot { gap: 12px; flex-wrap: nowrap; justify-content: space-between; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.app-tile .app-link { font-size: 13px; flex: none; }
.app-tile .app-link:first-child { flex: 0 1 auto; min-width: 0; }
button.app-link { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-weight: 500; font-size: 13px; }
.app-tile .app-deps { margin-top: -2px; }
/* the app card keeps its original sizes, independent of the smaller type scale */
.card.app-tile { font-size: 14px; line-height: 20px; }
.app-tile .app-ico.md { width: 36px; height: 36px; border-radius: 9px; font-size: 16px; }
.app-tile .ver { font-size: 12px; line-height: 20px; }
.app-tile .tag { height: 25px; padding: 0 9px; border-radius: 6px; font-size: 13px; }
.app-tile .app-deps { font-size: 12px; }
.app-tile .proj-h { font-size: 12px; }
.app-tile .proj { font-size: 13px; }
.app-tile .proj-open, .app-tile .proj-late, .app-tile .proj-ver { font-size: 12px; }

/* kinds: databases and skills next to the apps */
.app-ico.glyph { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--hue) 14%, transparent); color: var(--hue); }
.app-ico.glyph svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-ico.glyph.skill { background: color-mix(in srgb, #8b5cd6 16%, transparent); color: #8b5cd6; }
.app-ico.glyph.server { background: color-mix(in srgb, #13a3a3 16%, transparent); color: #108a8a; }
:root[data-theme="dark"] .app-ico.glyph.server { color: #4fd1d1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-ico.glyph.server { color: #4fd1d1; } }
:root[data-theme="dark"] .app-ico.glyph.skill { color: #b393f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-ico.glyph.skill { color: #b393f0; } }
.app-num.kind { background: none; padding-left: 0; color: var(--muted); }
.app-num.env { font-weight: 600; color: var(--text); }
.app-num.env.prod { background: color-mix(in srgb, #d63b3b 14%, transparent); color: color-mix(in srgb, #d63b3b 75%, var(--text)); }
.app-num.path { font-family: var(--font-mono); font-size: var(--fs-small); }

.db-page { display: flex; flex-direction: column; gap: var(--gap); width: 100%; max-width: 940px; }
.db-page > .panel { padding: 14px 20px 18px; }
.env-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: 6px; }
.env-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--inset); }
.env-card.prod { border-color: color-mix(in srgb, #d63b3b 40%, var(--border)); }
.env-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.env-head h3 { margin: 0; font-size: var(--fs-md); }
.env-card.prod .env-head h3 { color: color-mix(in srgb, #d63b3b 80%, var(--text)); }
.env-rows { margin: 0; display: flex; flex-direction: column; }
.env-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 32px; align-items: center; gap: 6px; min-height: 32px; }
.env-row dt { color: var(--muted); font-size: var(--fs-sm); }
.env-row dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.env-notes { font-size: var(--fs-sm); color: var(--muted); }
.env-card .btn { align-self: flex-start; }
.schema { margin-top: 6px; }
.envs-edit { display: flex; flex-direction: column; gap: 10px; }
.env-edit { margin: 0; padding: 10px; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.env-top { display: flex; gap: 6px; align-items: center; }
.env-top .field { flex: 1; font-weight: 600; }
.env-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, .8fr); gap: 8px; }
.dlg .env-edit .field { height: 38px; padding: 8px 10px; }
.form-note { margin-top: 10px !important; }

.panel.skill { width: 100%; max-width: 940px; }
.panel.readme { width: 100%; max-width: none; }
.front { display: grid; gap: 4px 14px; grid-template-columns: max-content minmax(0, 1fr); margin: 6px 0 14px; padding: 10px 14px; border-radius: 8px; background: var(--inset); border: 1px solid var(--border); font-size: var(--fs-sm); }
.front > div { display: contents; }
.front dt { color: var(--muted); font-family: var(--font-mono); }
.front dd { margin: 0; }
.skill-body, .readme-body { font-size: var(--fs-md); }
.skill-body .md-h1, .readme-body .md-h1 { font-size: 19px; } .skill-body .md-h2, .readme-body .md-h2 { font-size: var(--fs-lg); } .readme-body .md-h3 { font-size: var(--fs-md); color: var(--text); }
.readme-body { margin-top: 8px; }
.readme-body img { max-height: 520px; border: 0; background: none; }
.readme .panel-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gh-private { padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-small); font-weight: 500; color: var(--muted); }
.gh-user { color: var(--muted); }
.gh-cta { margin: 16px auto 0; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gh-cta p, p.gh-cta { margin: 0; font-size: var(--fs-small); }
.gh-cta .btn { text-decoration: none; }
.skill-text { min-height: calc(100dvh - 300px); margin-top: 6px; resize: vertical; font: var(--fs-body)/1.6 var(--font-mono); tab-size: 2; }
.panel.skill.editing .panel-head .meta { margin-right: 8px; }
.dlg.tall .mde { --mde-min: 380px; }

/* search: hits on the Appok page */
.list-sep { display: flex; align-items: center; gap: 8px; list-style: none; margin: 14px 8px 4px; color: var(--muted); font-size: var(--fs-small); font-weight: 600; }
.list-sep:first-child { margin-top: 4px; }
.list-sep .num { font-weight: 500; padding: 0 6px; border-radius: 9px; background: var(--raised); text-transform: none; letter-spacing: 0; }
.list-sep .meta { text-transform: none; letter-spacing: 0; font-weight: 400; }
.list-sep + .row { border-top-color: transparent; }
.row.hit { cursor: pointer; }
.row.hit .sub b { color: var(--text); font-weight: 500; }
.thumb.app-thumb { background: none; }
.thumb.card-thumb { background: color-mix(in srgb, var(--l, var(--hue)) 14%, transparent); color: var(--l, var(--hue)); }
.thumb.card-thumb.ok { background: color-mix(in srgb, #2f9e55 16%, transparent); color: #2f9e55; }
.row.hit.done .name { color: var(--muted); }

/* the Appok page: servers, databases and skills in one collapsible panel above the namespaces.
   One neutral panel; each kind is a row with a coloured icon only, so the colours never shout. */
.kind-server { --k: #13a3a3; } .kind-share { --k: #2f9e55; } .kind-db { --k: #e67722; } .kind-skill { --k: #8b5cd6; }
:root[data-theme="dark"] .kind-share { --k: #6fcf8f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kind-share { --k: #6fcf8f; } }
:root[data-theme="dark"] .kind-server { --k: #4fd1bc; } :root[data-theme="dark"] .kind-db { --k: #f2a65a; } :root[data-theme="dark"] .kind-skill { --k: #b39dfa; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kind-server { --k: #4fd1bc; }
  :root:not([data-theme="light"]) .kind-db { --k: #f2a65a; }
  :root:not([data-theme="light"]) .kind-skill { --k: #b39dfa; }
}
.kr-panel { flex: none; margin: 0 var(--pad) 14px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.kr-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 14px; margin: 0;
  border: 0; background: none; color: var(--text); font: 600 var(--fs-md)/1 var(--font); text-align: left; cursor: pointer;
}
.kr-toggle:hover { background: var(--row-hover); }
.kr-toggle .chev { width: 14px; height: 14px; color: var(--muted); transition: transform .15s var(--ease-out, ease); }
.kr-panel.open .kr-toggle .chev { transform: rotate(90deg); }
.kr-toggle .meta { font-weight: 400; }
.kr-strips { display: none; flex-direction: column; border-top: 1px solid var(--rule); }
.kr-panel.open .kr-strips { display: flex; }
.kr-strip { flex: none; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px 14px 2px; }
.kr-strip + .kr-strip { border-top: 1px solid var(--rule); }
.kr-strip-h { flex: none; width: 132px; display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.kr-strip-h svg { width: 15px; height: 15px; color: var(--k); }
.kr-strip-h .col-count { background: none; padding: 0; color: var(--muted); font-weight: 400; }
.kr-strip.empty { margin: 0; padding: 6px 14px 2px; border: 0; border-radius: 0; background: none; text-align: left; color: inherit; }
.kr-strip.empty + .kr-strip, .kr-strip + .kr-strip.empty { border-top: 1px solid var(--rule); }
.kr-strip.empty .kr-add { min-height: 32px; }
.kr-row { position: relative; /* tiles measure their place from the row when reordered */ flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 0 0 4px; overscroll-behavior-x: contain; }
.kr-tile {
  flex: none; display: flex; align-items: center; gap: 10px; width: auto; min-width: 224px; max-width: 380px; min-height: 44px; padding: 5px 12px;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 8px;
  cursor: pointer; transition: border-color .12s; -webkit-touch-callout: none;
}
.kr-tile:hover { border-color: var(--hue); }
.kr-tile[data-color] { background: color-mix(in srgb, var(--c) 13%, var(--card)); }
.kr-tile .app-ico.md { width: 24px; height: 24px; border-radius: 6px; font-size: var(--fs-small); }
.kr-tile .app-ico.glyph { background: color-mix(in srgb, var(--k) 14%, transparent); color: var(--k); }
.kr-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kr-tile-name { font-size: var(--fs-body); font-weight: 600; line-height: 16px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kr-tile-sub { color: var(--muted); font-size: var(--fs-small); line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind-server .kr-tile-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); }
.kr-tile-sub b { font-weight: 500; color: var(--text); }
.kr-tile-sub b.prod { color: var(--k); }
.kr-tile-tags { flex: none; flex-direction: column; align-items: flex-end; max-width: 90px; }
.kr-tile-tags .tag { height: 18px; font-size: var(--fs-2xs); padding: 0 6px; }
.kr-add { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14px; min-height: 44px; border: 1px dashed var(--control); border-radius: 8px; background: none; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; }
.kr-add:hover { color: var(--text); border-color: var(--hue); }
.kr-add svg { width: 14px; height: 14px; }
.kr-ph { flex: none; border-radius: 8px; background: color-mix(in srgb, var(--hue) 12%, transparent); border: 1.5px dashed color-mix(in srgb, var(--hue) 55%, transparent); }
.kr-tile.ghost { box-shadow: 0 14px 34px rgba(10, 20, 48, .28); }

/* a solution's projects, listed on its card */
.proj-list { display: flex; flex-direction: column; margin: 0 -6px; padding: 6px; border-radius: 8px; background: color-mix(in srgb, var(--text) 4%, transparent); }
.proj-h { padding: 0 6px 4px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.proj { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px 0 18px; position: relative; border-radius: 6px; color: var(--text); text-decoration: none; font-size: var(--fs-sm); }
.proj::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 50%; width: 6px; border-left: 1.5px solid var(--control); border-bottom: 1.5px solid var(--control); border-bottom-left-radius: 4px; }
.proj:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.proj-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.proj-open { min-width: 22px; text-align: center; font-size: var(--fs-small); line-height: 17px; padding: 0 6px; border-radius: 9px; background: var(--raised); color: var(--muted); }
.proj-open.hot { background: color-mix(in srgb, var(--hue) 15%, transparent); color: var(--hue); font-weight: 600; }
.proj-late { font-size: var(--fs-small); line-height: 17px; padding: 0 6px; border-radius: 9px; background: #d63b3b; color: #fff; font-weight: 600; }
.proj-ver { font-size: var(--fs-small); color: var(--muted); }

/* tags on apps */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px; border-radius: 5px; max-width: 100%;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--raised); color: var(--text);
}
.tag[data-label] { background: color-mix(in srgb, var(--l) 20%, var(--surface)); color: color-mix(in srgb, var(--l) 70%, var(--text)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--l) 35%, transparent); }
.head-rels .tag { height: 30px; font-size: var(--fs-body); padding: 0 11px; border-radius: 7px; }
.tags-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 6px 8px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); cursor: text; }
.tags-edit:focus-within { border-color: var(--hue); }
.tag.edit { height: 28px; padding: 0 2px 0 6px; font-size: var(--fs-sm); }
.tag-dot { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 0; background: var(--l, var(--muted)); cursor: pointer; flex: none; }
.tag-x { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: .7; }
.tag-x:hover { opacity: 1; background: color-mix(in srgb, var(--text) 10%, transparent); }
.tag-x svg { width: 13px; height: 13px; }
.tag-input { flex: 1; min-width: 140px; height: 28px; border: 0; background: none; outline: none; padding: 0 4px; }
.dlg form > .sws { max-width: 640px; }
.name-ns { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* board */
.lanes {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-start; gap: var(--gap);
  overflow-x: auto; overflow-y: hidden; padding: 0 var(--pad) 20px; overscroll-behavior-x: contain;
}
.col {
  flex: none; width: 288px; max-height: 100%; display: flex; flex-direction: column;
  background: var(--lane); border-radius: var(--radius-card);
}
.col-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 6px 4px 14px; min-height: 44px;
  cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.col-title { flex: 1; min-width: 0; font-size: var(--fs-body); line-height: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards { position: relative; flex: 0 1 auto; min-height: 6px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px; display: flex; flex-direction: column; gap: 8px; }
.card {
  position: relative; display: block; width: 100%; flex: none; text-align: left; padding: 10px 12px;
  background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-radius: var(--radius-control);
  box-shadow: 0 1px 1px rgba(10, 20, 48, .05); cursor: grab;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: border-color .12s, background-color .25s;
}
.card:hover { border-color: var(--control); }
.card-title { display: block; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 20px; }
.card-row { display: flex; align-items: flex-start; gap: 8px; }
.card-check {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 0 0 0 -2px; padding: 0;
  border: 1.6px solid var(--control); border-radius: 50%; background: var(--card); color: transparent; cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s, width .15s, margin .15s, opacity .15s;
}
.card-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.card-check:hover { border-color: #2f9e55; color: #2f9e55; }
/* With a mouse the circle of an open card shows on hover (like Trello); on touch it is always there. */
@media (hover: hover) and (pointer: fine) {
  .card:not(.done) .card-check { width: 0; margin-right: -8px; border-width: 0; opacity: 0; }
  .card:not(.done):hover .card-check, .card:not(.done):focus-within .card-check { width: 20px; margin-right: 0; border-width: 1.6px; opacity: 1; }
}
.card.done .card-check { border-color: #2f9e55; background: #2f9e55; color: #fff; }
.card.done .card-title { color: var(--muted); }
.card-cover { display: block; width: calc(100% + 24px); max-height: 180px; margin: -10px -12px 10px; object-fit: cover; border-radius: var(--radius-control) var(--radius-control) 0 0; background: var(--raised); }
.card-label { display: block; width: 48px; height: 8px; border-radius: 4px; margin-bottom: 8px; background: var(--l); }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: var(--fs-small); line-height: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-meta svg { width: 14px; height: 14px; flex: none; }
[data-label="green"] { --l: #2f9e55; } [data-label="lime"] { --l: #7cb518; } [data-label="teal"] { --l: #13a3a3; } [data-label="cyan"] { --l: #1ba5d8; }
[data-label="blue"] { --l: #2f74e0; } [data-label="indigo"] { --l: #5b5fd6; } [data-label="purple"] { --l: #8b5cd6; } [data-label="pink"] { --l: #d6458f; }
[data-label="red"] { --l: #d63b3b; } [data-label="orange"] { --l: #e67722; } [data-label="yellow"] { --l: #e2b20c; } [data-label="brown"] { --l: #9a6b3f; }
[data-label="gray"] { --l: #7a8594; }
.add-card {
  display: flex; align-items: center; gap: 8px; height: 36px; margin: 4px 8px 8px; padding: 0 8px; flex: none;
  border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); font-weight: 500; cursor: pointer; text-align: left;
}
.add-card:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); }
.add-card svg, .add-col svg { width: 16px; height: 16px; }
.card-composer { padding: 4px 8px 8px; flex: none; }
.card-composer textarea {
  display: block; width: 100%; margin: 0; min-height: 64px; padding: 9px 11px; resize: none; line-height: 20px;
  background: var(--card); border: 1px solid var(--hue); border-radius: var(--radius-control); outline: none;
}
.card-composer-row { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.card-composer-hint { margin-left: auto; text-align: right; }
.add-col {
  flex: none; width: 288px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border: 1px dashed var(--control); border-radius: var(--radius-card); background: none; color: var(--muted); font-weight: 500; cursor: pointer;
}
.add-col:hover { color: var(--text); border-color: var(--hue); }
.lifted { display: none !important; }
.card-ph, .col-ph { flex: none; border-radius: var(--radius-control); background: color-mix(in srgb, var(--hue) 12%, transparent); border: 1.5px dashed color-mix(in srgb, var(--hue) 55%, transparent); }
.col-ph { width: 288px; border-radius: var(--radius-card); max-height: 100%; }
.ghost { position: fixed !important; left: 0; top: 0; z-index: 60; margin: 0; pointer-events: none; box-shadow: 0 14px 34px rgba(10, 20, 48, .28); }
.col.ghost { overflow: hidden; }
.ghost.settle { box-shadow: 0 1px 1px rgba(10, 20, 48, .05); }
html.board-dragging, html.board-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
html.board-dragging .lanes { scroll-snap-type: none !important; }
/* panning a board with the mouse (press on an empty part and drag) */
html.board-panning, html.board-panning * { cursor: grabbing !important; user-select: none; }
html.board-panning .lanes, html.board-panning .kr-row { scroll-snap-type: none !important; scroll-behavior: auto !important; }
/* with a mouse, a strip tile is grabbed (dragging pans, holding reorders); Ctrl/Cmd+click or a double click opens it */
@media (hover: hover) and (pointer: fine) { .kr-strip .kr-tile, .kr-strip .kr-tile .kr-tile-name { cursor: grab; } }

/* card colours and badges */
[data-color="green"] { --c: #2f9e55; } [data-color="lime"] { --c: #7cb518; } [data-color="teal"] { --c: #13a3a3; } [data-color="cyan"] { --c: #1ba5d8; }
[data-color="blue"] { --c: #2f74e0; } [data-color="indigo"] { --c: #5b5fd6; } [data-color="purple"] { --c: #8b5cd6; } [data-color="pink"] { --c: #d6458f; }
[data-color="red"] { --c: #d63b3b; } [data-color="orange"] { --c: #e67722; } [data-color="yellow"] { --c: #e2b20c; } [data-color="brown"] { --c: #9a6b3f; }
[data-color="gray"] { --c: #7a8594; }
/* a column with its own colour: the list is tinted, its title and top edge take the colour */
.col[data-color] { background: color-mix(in srgb, var(--c) 16%, var(--lane)); box-shadow: inset 0 3px 0 var(--c); }
.col[data-color] .col-title { color: color-mix(in srgb, var(--c) 55%, var(--text)); font-weight: 600; }
.col[data-color] .col-count { background: color-mix(in srgb, var(--c) 22%, transparent); }
.col[data-color] .add-card:hover { background: color-mix(in srgb, var(--c) 14%, transparent); }
.card[data-color] { background: color-mix(in srgb, var(--c) 15%, var(--card)); border-color: color-mix(in srgb, var(--c) 32%, var(--card-border)); }
.card[data-color]:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--card-border)); }
.chip.swatch[data-color] { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px;
  font-size: var(--fs-small); line-height: 16px; color: var(--muted); background: color-mix(in srgb, var(--text) 6%, transparent);
  font-variant-numeric: tabular-nums;
}
.badge svg, .card-meta svg, .cl-head svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.badge svg { width: 13px; height: 13px; }
.badge.ok { color: var(--ok-ink); background: color-mix(in srgb, #2f9e55 16%, transparent); }
.badge.soon { color: var(--warn-ink); background: color-mix(in srgb, #e2b20c 22%, transparent); }
.badge.late, .badge.today { color: #fff; background: #d63b3b; }
.badge.done { text-decoration: line-through; }

/* markdown, as rendered in release notes, descriptions and the editor preview */
.md { overflow-wrap: anywhere; line-height: 1.6; }
.md > * + * { margin-top: .55em; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0; color: inherit; }
.md ul, .md ol { margin: 0; padding-left: 1.4em; }
.md ul { list-style: disc; }
.md li + li { margin-top: 2px; }
.md li.task { list-style: none; margin-left: -1.4em; display: flex; gap: 8px; align-items: flex-start; }
.md li.task input { width: 15px; height: 15px; margin: 4px 0 0; flex: none; accent-color: var(--hue); }
.md li.task.done > span { color: var(--muted); text-decoration: line-through; }
.md h4, .md h5, .md h6 { margin: .9em 0 0; font-weight: 600; line-height: 1.35; }
.md .md-h1 { font-size: 15px; } .md .md-h2 { font-size: var(--fs-md); } .md .md-h3 { font-size: var(--fs-body); color: var(--muted); }
.md code { font: 11.5px/1.4 var(--font-mono); background: var(--raised); padding: 1px 5px; border-radius: 4px; }
.md pre { margin: 0; background: var(--raised); border-radius: 6px; padding: 10px 12px; overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--control); color: var(--muted); }
.md a, .app-desc a { color: var(--hue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.md hr { border: 0; border-top: 1px solid var(--rule); }
.md .md-img { display: inline-block; max-width: 100%; }
.md img { display: block; max-width: 100%; max-height: 420px; border-radius: 6px; border: 1px solid var(--border); background: var(--raised); }
.mde .toastui-editor-contents img { max-height: 360px; border-radius: 6px; }
.md del { color: var(--muted); }
.app-desc code { font: 11.5px var(--font-mono); }

/* markdown editor: TOAST UI Editor, dressed in the app's tokens (both themes) */
.mde { --mde-min: 160px; min-width: 0; }
.mde.loading { min-height: calc(var(--mde-min) + 46px); border: 1px solid var(--control); border-radius: 8px; background: var(--inset); }
.mde.loading .mde-host { visibility: hidden; }
.mde-fallback { width: 100%; min-height: var(--mde-min); }
.mde .toastui-editor-defaultUI { border: 1px solid var(--control); border-radius: 8px; background: var(--surface); font-family: var(--font); }
.mde:focus-within .toastui-editor-defaultUI { border-color: var(--hue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 18%, transparent); }
.mde .toastui-editor-defaultUI-toolbar { background: var(--inset); border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; padding: 0 6px; height: auto; min-height: 46px; flex-wrap: wrap; }
.mde .toastui-editor-toolbar-group { flex-wrap: wrap; }
.mde .toastui-editor-defaultUI-toolbar button { margin: 6px 2px; }
.mde .toastui-editor-toolbar-icons { border-color: transparent; background-color: transparent; }
.mde .toastui-editor-toolbar-icons:not(:disabled):hover { background-color: var(--raised); border-color: var(--raised); }
.mde .toastui-editor-toolbar-icons.active { background-color: var(--raised); border-color: var(--control); }
.mde .toastui-editor-toolbar-divider { background-color: var(--control); }
.mde .toastui-editor-md-container, .mde .toastui-editor-ww-container { background: var(--surface); }
.mde .toastui-editor-main { border-radius: 0 0 8px 8px; }
.mde .toastui-editor-contents, .mde .ProseMirror, .mde .toastui-editor-md-preview .toastui-editor-contents {
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.65; color: var(--text);
}
.mde .toastui-editor-contents { padding: 14px 18px; }
.mde .toastui-editor-md-container .ProseMirror { font-family: var(--font-mono); font-size: var(--fs-body); padding: 14px 18px; }
.mde .toastui-editor-contents p, .mde .toastui-editor-contents li { color: var(--text); }
.mde .toastui-editor-contents h1, .mde .toastui-editor-contents h2 { color: var(--text); border-bottom-color: var(--rule); }
.mde .toastui-editor-contents h3, .mde .toastui-editor-contents h4, .mde .toastui-editor-contents h5, .mde .toastui-editor-contents h6 { color: var(--text); }
.mde .toastui-editor-contents h1 { font-size: 19px; line-height: 1.35; }
.mde .toastui-editor-contents h2 { font-size: 17px; line-height: 1.4; }
.mde .toastui-editor-contents h3 { font-size: 15px; }
.mde .toastui-editor-contents a { color: var(--hue); }
.mde .toastui-editor-contents blockquote { border-left-color: var(--control); }
.mde .toastui-editor-contents blockquote p { color: var(--muted); }
.mde .toastui-editor-contents code { background: var(--raised); color: var(--text); }
.mde .toastui-editor-contents pre { background: var(--raised); }
.mde .toastui-editor-contents pre code { background: none; color: var(--text); }
.mde .toastui-editor-contents table { border-color: var(--control); }
.mde .toastui-editor-contents th { background: var(--raised); color: var(--text); border-color: var(--control); }
.mde .toastui-editor-contents td { border-color: var(--control); }
.mde .toastui-editor-contents ul > li::before { background-color: var(--muted); }
.mde .toastui-editor-contents .task-list-item::before { border-color: var(--control); background-color: var(--surface); border-radius: 4px; width: 18px; height: 18px; margin-top: 2px; }
.mde .toastui-editor-contents .task-list-item.checked { color: var(--muted); text-decoration: line-through; }
.mde .toastui-editor-contents .task-list-item.checked::before { border-color: var(--hue); background-color: var(--hue); }
.mde .ProseMirror .placeholder, .mde .placeholder { color: var(--faint); }
.mde .toastui-editor-mode-switch { background: var(--inset); border-top: 1px solid var(--rule); border-radius: 0 0 8px 8px; height: 36px; }
.mde .toastui-editor-mode-switch .tab-item { height: 26px; line-height: 20px; margin-top: 0; min-width: 84px; font-size: var(--fs-sm); font-family: var(--font); color: var(--muted); background: var(--raised); border-color: var(--control); }
.mde .toastui-editor-mode-switch .tab-item.active { background: var(--surface); color: var(--text); border-top-color: var(--surface); }
.mde .toastui-editor-md-tab-container { background: var(--inset); border-bottom-color: var(--rule); }
.mde .toastui-editor-tabs .tab-item { color: var(--muted); background: var(--raised); border-color: var(--control); }
.mde .toastui-editor-tabs .tab-item.active { color: var(--text); background: var(--surface); }
.mde .toastui-editor-popup, .mde .toastui-editor-context-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--float-shadow); color: var(--text); font-family: var(--font); }
.mde .toastui-editor-popup-body label { color: var(--muted); }
.mde .toastui-editor-popup-body input[type="text"] { background: var(--surface); color: var(--text); border-color: var(--control); height: 36px; border-radius: 6px; }
.mde .toastui-editor-popup-body input[type="text"]:focus { outline: none; border-color: var(--hue); }
.mde .toastui-editor-defaultUI .toastui-editor-ok-button { background: var(--primary); color: var(--on-primary); border-radius: 6px; height: 34px; min-width: 72px; }
.mde .toastui-editor-defaultUI .toastui-editor-close-button { background: var(--secondary); color: var(--text); border: 0; border-radius: 6px; height: 34px; min-width: 72px; }
.mde .toastui-editor-popup-add-heading ul li:hover { background: var(--raised); }
.mde .toastui-editor-popup-add-heading h1, .mde .toastui-editor-popup-add-heading h2, .mde .toastui-editor-popup-add-heading h3,
.mde .toastui-editor-popup-add-heading h4, .mde .toastui-editor-popup-add-heading h5, .mde .toastui-editor-popup-add-heading h6,
.mde .toastui-editor-popup-add-heading p { color: var(--text); font-family: var(--font); }
.mde .toastui-editor-tooltip { font-family: var(--font); font-size: var(--fs-small); }
.mde .toastui-editor-defaultUI .toastui-editor-dropdown-toolbar { background: var(--surface); border-color: var(--border); }

/* markdown tables, as rendered outside the editor */
.md .md-table { overflow-x: auto; }
.md table { border-collapse: collapse; font-size: var(--fs-sm); }
.md th, .md td { border: 1px solid var(--border); padding: 4px 10px; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; }
.md th { white-space: nowrap; }
.md th { background: var(--raised); font-weight: 600; }

/* the card dialog: one roomy sheet; header, scrolling body, footer */
.dlg.xwide { width: min(1100px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; font-size: var(--fs-md); line-height: 19px; }
.dlg.xwide[open] { display: flex; flex-direction: column; }
.cd { display: flex; flex-direction: column; min-height: 0; flex: 1; outline: none; }
.cd .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.cd-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 22px 20px 16px 28px; border-bottom: 1px solid var(--border); }
.cd-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--l, transparent); }
.cd-title-wrap { flex: 1; min-width: 0; }
.cd-strip { display: none; }
.dlg textarea.cd-title {
  display: block; width: 100%; min-height: 40px; margin: 0 0 0 -10px; padding: 4px 10px; resize: none; overflow: hidden;
  font: 650 var(--fs-title)/28px var(--font); letter-spacing: -0.01em; color: var(--text);
  border: 1px solid transparent; border-radius: 8px; background: transparent;
}
.dlg textarea.cd-title:hover { background: var(--row-hover); }
.dlg textarea.cd-title:focus { outline: none; border-color: var(--hue); background: var(--surface); }
.dlg .cd-where { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-body); }
.cd-where b { color: var(--text); font-weight: 600; }
.cd-x.icon-act { width: 40px; height: 40px; flex: none; border-radius: 8px; }
.cd-x svg { width: 20px; height: 20px; }

.cd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); }
.cd-main, .cd-side { overflow-y: auto; overscroll-behavior: contain; }
.cd-main { min-width: 0; padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 32px; }
.cd-side { min-width: 0; padding: 24px 24px 28px; border-left: 1px solid var(--border); background: var(--inset); display: flex; flex-direction: column; gap: 22px; }

.dlg .cd-h { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; line-height: 20px; font-weight: 650; color: var(--text); }
.cd-h .ico { width: 20px; height: 20px; color: var(--muted); }

.cd-group { display: flex; flex-direction: column; gap: 8px; }
.dlg .cd-lbl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.dlg .cd-lbl label { margin: 0; font-weight: 600; }
.cd-lbl .ico { width: 16px; height: 16px; color: var(--muted); }
.cd-lbl b { font-weight: 500; color: var(--muted); }
.dlg .cd-side .field, .dlg .cd-side select.field { height: 42px; font-size: var(--fs-md); background: var(--surface); }
.due-row { display: flex; align-items: center; gap: 4px; }
.due-row .field { flex: 1; min-width: 0; }
.due-row .icon-act { width: 40px; height: 42px; flex: none; }
.due-row .icon-act[hidden] { display: none; }
.cd-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-quick .btn { height: 30px; padding: 0 10px; font-size: var(--fs-sm); border: 1px solid var(--border); background: var(--surface); }
.cd-quick .btn:hover { background: var(--raised); }
.dlg .cd-due-state { margin: 0; padding: 6px 10px; border-radius: 6px; font-size: var(--fs-body); font-weight: 500; color: var(--text); background: var(--raised); }
.dlg .cd-due-state[hidden] { display: none; }
.dlg .cd-due-state.late, .dlg .cd-due-state.today { color: #fff; background: #d63b3b; }
.dlg .cd-due-state.soon { color: var(--warn-ink); background: color-mix(in srgb, #e2b20c 22%, transparent); }
.dlg .cd-due-state.done { color: var(--ok-ink); background: color-mix(in srgb, #2f9e55 16%, transparent); }

.sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 40px)); gap: 6px; }
.sw { position: relative; aspect-ratio: 1; min-width: 0; max-width: 40px; border-radius: 8px; border: 1px solid var(--border); background: var(--l, var(--raised)); cursor: pointer; display: grid; place-items: center; padding: 0; }
.sw.tint { background: var(--raised); }
.sw.tint[data-color] { background: color-mix(in srgb, var(--c) 30%, var(--card)); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); }
.sw:not([data-label]):not([data-color]) { background: linear-gradient(135deg, transparent 46%, var(--faint) 47%, var(--faint) 53%, transparent 54%), var(--surface); }
.sw:hover { transform: scale(1.06); }
.sw[aria-checked="true"]:not([data-label]):not([data-color]) { background: var(--surface); }
.sw[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.sw .sw-tick { width: 18px; height: 18px; stroke-width: 2.6; color: #fff; opacity: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.sw.tint .sw-tick, .sw:not([data-label]):not([data-color]) .sw-tick { color: var(--text); filter: none; }
.sw[aria-checked="true"] .sw-tick { opacity: 1; }

.cd-stamp { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-sm); line-height: 19px; }
/* Done: a status switch — a ring that fills green when the card is done */
.cd-done-toggle { flex: none; display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: var(--fs-md); font-weight: 600; text-align: left; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: background .15s, border-color .15s, color .15s; }
.cd-done-toggle:hover { border-color: color-mix(in srgb, #2f9e55 55%, var(--border)); background: color-mix(in srgb, #2f9e55 6%, var(--surface)); }
.cd-done-toggle:focus-visible { outline: 2px solid var(--hue); outline-offset: 2px; }
.cd-done-mark { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--control); color: transparent; transition: inherit; }
.cd-done-mark .ico { width: 15px; height: 15px; stroke-width: 3; }
.cd-done-toggle:hover .cd-done-mark { border-color: #2f9e55; color: color-mix(in srgb, #2f9e55 60%, transparent); }
.cd-done-toggle[aria-pressed="true"] { color: var(--ok-ink); background: color-mix(in srgb, #2f9e55 12%, var(--surface)); border-color: color-mix(in srgb, #2f9e55 45%, transparent); }
.cd-done-toggle[aria-pressed="true"] .cd-done-mark { background: #2f9e55; border-color: #2f9e55; color: #fff; }
/* Archive and delete: quiet rows, like a menu */
.cd-side > * { flex: none; }
.cd-actions { gap: 2px; padding-top: 16px; border-top: 1px solid var(--border); }
.cd-actions .cd-lbl { margin-bottom: 4px; }
.cd-action { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: var(--fs-body); font-weight: 500; text-align: left; color: var(--text); background: none; }
.cd-action .ico { width: 18px; height: 18px; color: var(--muted); }
.cd-action:hover { background: var(--row-hover); }
.cd-action:focus-visible { outline: 2px solid var(--hue); outline-offset: -2px; }
.cd-action.danger { color: var(--negative); }
.cd-action.danger .ico { color: currentColor; }
.cd-action.danger:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); }
.cd-side .cd-stamp { border-top: 0; padding-top: 0; }
/* Files on a card */
.cf { display: flex; flex-direction: column; gap: 10px; }
.cf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-list:empty { display: none; }
.cf-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cf-row:hover { border-color: var(--control); }
.cf-row.busy { color: var(--muted); border-style: dashed; }
.cf-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--raised); color: var(--muted); }
.cf-ico svg { width: 20px; height: 20px; }
.cf-ico .folder-ico { color: #d9a400; }
.cf-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); text-decoration: none; }
a.cf-name:hover { color: var(--hue); text-decoration: underline; }
.cf-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); color: var(--muted); }
.cf-sub .gh-badge { vertical-align: 1px; }
.cf-acts { flex: none; display: flex; align-items: center; gap: 2px; }
.cf-acts .icon-act { width: 32px; height: 32px; }
.cf-add { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-add .btn { height: 32px; gap: 6px; padding: 0 12px; }
.cf-add .btn svg { width: 16px; height: 16px; }

/* archived cards: a list in a dialog, each row with its label strip, title, a line of the description and where it came from */
.arch-list { list-style: none; margin: 12px 0 0; padding: 0; max-height: min(58vh, 520px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-control); }
.arch-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border); }
.arch-row:last-child { border-bottom: 0; }
.arch-row.focus { background: color-mix(in srgb, var(--hue) 10%, transparent); }
.arch-strip { position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 3px 3px 0; background: var(--l, transparent); }
.arch-main { flex: 1; min-width: 0; }
.arch-title { display: flex; align-items: flex-start; gap: 6px; font-weight: 500; overflow-wrap: anywhere; }
.arch-done { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: #2f9e55; stroke-width: 2.4; }
.arch-desc { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.arch-meta { margin-top: 4px; color: var(--faint); font-size: var(--fs-small); }
.arch-actions { flex: none; display: flex; align-items: center; gap: 4px; }
@media (max-width: 640px) { .arch-row { flex-wrap: wrap; } .arch-actions { width: 100%; justify-content: flex-end; } }

.cd-foot { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 28px; border-top: 1px solid var(--border); background: var(--surface); }
.cd-foot .spacer { flex: 1; }
.cd-saved { display: inline-flex; align-items: center; gap: 6px; color: var(--ok-ink); font-size: var(--fs-body); }
.cd-saved .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.cd-saved.busy { color: var(--muted); }
.cd-saved.busy .ico { opacity: .4; }
.btn.cd-done { height: 42px; min-width: 110px; font-size: var(--fs-md); }

/* checklists in the card dialog */
.cls { display: flex; flex-direction: column; gap: 26px; }
.cls:empty { display: none; }
.cl { padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.cl-head { display: flex; align-items: center; gap: 8px; }
.cl-head .cl-ico { width: 20px; height: 20px; color: var(--muted); }
.cl.complete .cl-head .cl-ico { color: var(--ok-ink); }
.cl-name { flex: 1; min-width: 0; height: 36px; margin-left: -4px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: none; font-size: var(--fs-section); font-weight: 650; color: var(--text); }
.cl-name:hover { background: var(--row-hover); }
.cl-name:focus { outline: none; border-color: var(--hue); background: var(--surface); }
.cl-acts { display: flex; gap: 6px; flex: none; }
.btn.cl-btn { height: 32px; padding: 0 10px; font-size: var(--fs-sm); background: var(--secondary); color: var(--text); }
.btn.cl-btn:hover { background: var(--secondary-hover); }
.btn.cl-btn svg { width: 15px; height: 15px; }
.btn.danger-soft { background: none; color: var(--muted); }
.btn.danger-soft:hover, .btn.danger-soft.armed { background: color-mix(in srgb, var(--negative) 12%, transparent); color: var(--negative); }
.cl-progress { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.cl-pct { width: 40px; flex: none; font-size: var(--fs-sm); color: var(--muted); }
.cl-count { flex: none; font-size: var(--fs-sm); color: var(--muted); }
.cl-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.cl-bar i { display: block; height: 100%; border-radius: 4px; background: var(--hue); transition: width .25s ease; }
.cl.complete .cl-bar i { background: #2f9e55; }
.cl.complete .cl-pct { color: var(--ok-ink); font-weight: 600; }
.cl-list { list-style: none; margin: 4px 0 0; padding: 0; }
.cl-item { display: flex; align-items: flex-start; gap: 6px; padding: 2px 4px 2px 0; margin: 0 -8px; padding-left: 8px; border-radius: 8px; }
.cl-item:hover { background: var(--row-hover); }
.dlg .cl-box { display: grid; place-items: center; width: 32px; height: 38px; flex: none; margin: 0; cursor: pointer; }
.cl-item input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--hue); cursor: pointer; }
.cl-text, .cl-add { flex: 1; min-width: 0; min-height: 38px; padding: 8px 8px; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 6px; background: none; font-size: var(--fs-md); line-height: 18px; color: var(--text); }
.cl-text:focus, .cl-add:focus { outline: none; border-color: var(--hue); background: var(--surface); }
.cl-item.done .cl-text { color: var(--muted); text-decoration: line-through; }
.cl-del.icon-act { width: 34px; height: 38px; opacity: 0; }
.cl-item:hover .cl-del, .cl-item:focus-within .cl-del { opacity: 1; }
@media (hover: none) { .cl-del.icon-act { opacity: 1; } }
.cl-alldone { padding: 8px 0 4px; color: var(--ok-ink); font-size: var(--fs-body); }
.cl-add-row { display: flex; align-items: flex-start; gap: 6px; margin: 4px -8px 0; padding-left: 8px; }
.cl-add-row > .ico { width: 32px; height: 38px; padding: 9px 7px; flex: none; color: var(--muted); }
.cl-add { background: var(--inset); border-color: var(--border); }
.cl-add::placeholder { color: var(--muted); }
.cl-add-row .btn { height: 38px; flex: none; }
.cl-add-row .btn[hidden] { display: none; }
.cd-add-list {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 4px;
  border: 1.5px dashed var(--control); border-radius: 10px; background: none; color: var(--muted); font-size: var(--fs-md); font-weight: 500; cursor: pointer;
}
.cls:not(:empty) + .cd-add-list { margin-top: 18px; }
.cd-add-list svg { width: 18px; height: 18px; }
.cd-add-list:hover { border-color: var(--hue); color: var(--hue); background: color-mix(in srgb, var(--hue) 6%, transparent); }

/* app icons and links between apps */
.app-ico { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.app-ico.letter { background: var(--raised); color: var(--muted); font-weight: 700; line-height: 1; user-select: none; }
.app-ico.md { width: 36px; height: 36px; border-radius: 9px; font-size: var(--fs-section); }
.app-ico.lg { width: 64px; height: 64px; border-radius: 15px; font-size: 22px; }
.app-ico.title { width: 32px; height: 32px; border-radius: 8px; font-size: var(--fs-md); }
.app-ico.xs { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; }
#apps-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
#apps-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-top .app-name { flex: 1; }
.app-rels { display: flex; flex-wrap: wrap; gap: 6px; }
.app-rels[hidden] { display: none; }
.head-rels { margin-top: 10px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
}
.rel-chip.in { padding-left: 5px; }
.rel-chip .app-ico.xs { width: 20px; height: 20px; font-size: var(--fs-2xs); }
/* A database (or skill) at the other end: tinted chip with a DB / Skill mark. */
.rel-chip.kind-db { border-color: color-mix(in srgb, #e67722 45%, var(--border)); background: color-mix(in srgb, #e67722 9%, var(--surface)); }
.rel-chip.kind-skill { border-color: color-mix(in srgb, #8b5cd6 45%, var(--border)); background: color-mix(in srgb, #8b5cd6 9%, var(--surface)); }
.rel-kind { height: 18px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600; line-height: 17px; color: #fff; background: #e67722; }
.kind-skill .rel-kind { background: #8b5cd6; }
.rel-chip.kind-server { border-color: color-mix(in srgb, #13a3a3 45%, var(--border)); background: color-mix(in srgb, #13a3a3 9%, var(--surface)); }
.kind-server .rel-kind { background: #108a8a; }
.env-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.env-acts code { font: 11.5px var(--font-mono); }
.server-card { grid-column: 1 / -1; max-width: 620px; }
.server-card .env-row { grid-template-columns: 110px minmax(0, 1fr) 32px; }
.rel-chip:hover { border-color: var(--control); background: var(--row-hover); }
.rel-label { color: var(--muted); }
.rel-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.rel-chip > * { flex: none; }
.rel-chip > .rel-name { flex: 0 1 auto; min-width: 4ch; }
.deploy-chip > .rel-label:last-child:not(:first-child) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* the app form */
.app-form-top { display: flex; flex-direction: column; }
.app-form-top > .icon-pick { order: 2; margin-top: 16px; }
.icon-pick { display: flex; align-items: center; gap: 14px; }
.icon-pick-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icon-pick-acts { display: flex; align-items: center; gap: 4px; }
.icon-pick-acts .act[hidden] { display: none; }
.links-edit { display: flex; flex-direction: column; gap: 6px; }
.dlg .links-edit .meta { margin: 0; }
.link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) 32px; align-items: center; gap: 8px; }
.dlg .link-row .field { height: 36px; }
.add-link { margin: 6px 0 0 -10px; color: var(--hue); }

/* releases */
.timeline { list-style: none; margin: 4px 0 0; padding: 0; }
.rel { position: relative; padding: 14px 0 16px 26px; }
.rel::before { content: ""; position: absolute; left: 3px; top: 20px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--control); background: var(--surface); }
.rel::after { content: ""; position: absolute; left: 8px; top: 34px; bottom: -18px; width: 2px; background: var(--rule); }
.rel:last-child::after { display: none; }
.rel.current::before { border-color: var(--hue); background: var(--hue); }
.rel-head { display: flex; align-items: center; gap: 10px; min-height: 32px; flex-wrap: wrap; }
.rel-head .row-actions { margin-left: auto; }
.rel .ver { font-size: var(--fs-body); line-height: 20px; padding: 0 10px; border-radius: 12px; }
.rel:not(.current) .ver { background: var(--raised); color: var(--text); }
.pill { font-size: var(--fs-small); font-weight: 500; color: var(--hue); }
.rel-notes { margin-top: 6px; overflow-wrap: anywhere; }
.rel-notes ul { margin: 0; padding-left: 18px; list-style: disc; }
.rel-notes li + li { margin-top: 3px; }
.rel-notes > * + * { margin-top: 6px; }
.rel-empty { margin-top: 4px; }

/* file references */
.refs .panel-head .row-actions { gap: 4px; }
.row.missing .name { color: var(--muted); text-decoration: line-through; }
.row.missing .sub { color: var(--negative); }

/* dialogs used by the apps */
.dlg.wide { width: min(680px, calc(100vw - 32px)); }
.dlg svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dlg textarea.field { height: auto; padding: 9px 12px; margin: 0; resize: vertical; line-height: 20px; }
.dlg textarea.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.dlg select.field { height: 40px; padding: 0 10px; }
.dlg .lbl { display: block; font-weight: 500; margin: 12px 0 8px; }
.dlg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.dlg .buttons .spacer { flex: 1; }
.btn.ghost-danger { background: none; color: var(--negative); padding: 0 10px; margin-left: -10px; }
.btn.ghost-danger:hover { background: color-mix(in srgb, var(--negative) 10%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; }
.chip { width: 34px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--l, var(--raised)); cursor: pointer; }
.chip:not([data-label]) { background: linear-gradient(135deg, transparent 46%, var(--muted) 47%, var(--muted) 53%, transparent 54%), var(--raised); }
.chip[aria-checked="true"] { outline: 2px solid var(--text); outline-offset: 2px; }
.card-made { margin: 12px 0 0 !important; }
.pull { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; }
.pull .act { margin-left: -10px; color: var(--hue); }
.dlg label.check { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; color: var(--muted); }
.check input { width: 16px; height: 16px; accent-color: var(--hue); margin: 0; }
.dlg input[type="search"] { margin-top: 4px; }
.picker-list.tall { max-height: min(50vh, 420px); }
.pick-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pick-dir { margin-left: auto; padding-left: 12px; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: var(--fs-small); }
.pick-empty { padding: 12px; color: var(--muted); list-style: none; }
/* attach from GitHub: repo field with its button, the repo line, and the badge on the attached rows */
.gh-pick-repo { display: flex; gap: 8px; margin: 12px 0 8px; }
.gh-pick-repo .field { flex: 1; min-width: 0; }
.gh-pick-repo .btn { flex: none; }
.gh-pick-info { margin: 8px 0 0; min-height: 1.4em; color: var(--muted); font-size: var(--fs-small); }
.gh-badge { padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--muted); }

/* arrivals */
.apps.enter .app-card, .apps.enter .col, .apps.enter .add-col, .apps.enter .rel, .apps.enter .refs .row {
  animation: rise .34s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms);
}

/* ---------- tablet ---------- */
@media (max-width: 900px) {
  :root { --pad: 20px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles .tile:last-child { grid-column: 1 / -1; min-height: 0; }
  .row { grid-template-columns: 40px minmax(0, 1fr) 96px auto; }
}

/* ---------- phone: the rail becomes a bottom bar ---------- */
@media (max-width: 640px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 10; height: auto;
    flex-direction: row; justify-content: space-around; padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--border); background: var(--surface);
  }
  .mark { display: none; }
  .nav, .nav.foot { width: auto; min-width: 56px; height: 52px; margin: 0; grid-template-rows: 22px 16px; gap: 2px; align-content: center; }
  .nav[aria-current="page"] { background: none; color: var(--text); }
  .nav[aria-current="page"] svg { stroke-width: 1.9; }
  .nav span { display: block; font-size: var(--fs-small); line-height: 16px; }
  .canvas { padding: calc(20px + env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom)); }
  /* On a phone the note and the newest files come first; the tiles follow. */
  .files { order: 1; }
  .tiles { order: 2; grid-template-columns: 1fr; }
  .strip { order: 3; }
  .tile { min-height: 0; padding: 16px; }
  .lead { font-size: 22px; line-height: 28px; }
  .list-head { padding: 14px 14px 2px; }
  .searchbar { height: 48px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: -2px -12px 0; padding: 0 12px; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
  .nav, .nav.foot { min-width: 0; flex: 1 1 auto; }
  .rail { padding-left: 2px; padding-right: 2px; }
  .nav span { font-size: 10.5px; letter-spacing: -0.01em; }
  .todo-over { order: 0; }
  .todo-bar { margin: 6px 6px 0; }
  .todo-add { flex-wrap: wrap; margin: 6px 6px 0; padding: 6px; }
  .todo-add > svg { display: none; }
  .todo-add #ta-title { flex: 1 1 100%; padding: 0 6px; }
  .todo-add .ta-due { flex: 1 1 0; min-width: 0; }
  .todo-add .ta-app { flex: 2 1 0; min-width: 0; max-width: none; }
  .todo-bar .todo-inbox { display: none; }
  .head { align-items: center; padding: 0 4px 4px; }
  h1 { font-size: 19px; line-height: 24px; }
  .btn-label { display: none; }
  .actions .btn { width: 40px; height: 40px; padding: 0; }
  .composer { margin: 8px 8px 2px; }
  .composer-key { display: none; }
  .rows { padding: 4px 6px 6px; }
  .row { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 60px; gap: 10px; }
  .row-actions { min-width: 0; }
  .when { display: none; }
  .row .sub .phone-when { display: inline; }
  .act { height: 44px; }
  .icon-act { width: 40px; }
  .strip { padding: 4px 6px 0; }
  .strip .hint { display: none; }
  .disk { flex: 1; justify-content: space-between; }
  .bar { flex: 1; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
  .ed-bar { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .ed-back span, .ed-dl { display: none; }
  .ed-status { min-width: 0; }
  .ed-toolbar.ql-toolbar.ql-snow { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 6px 8px; gap: 8px; }
  .ed-scroll { padding: 0 0 120px; }
  .ed-page { border: 0; border-radius: 0; }
  .ed-page .ql-editor { padding: 24px 18px; }
  .apps { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .apps-head { padding: 0 16px 10px; align-items: center; }
  /* An item's page: name, subline and chips get the full width; the buttons move to their own row under them. */
  .apps-head:has(#apps-crumbs:not(:empty)) { flex-direction: column; align-items: stretch; gap: 12px; }
  .apps-head .title-text { min-width: 0; }
  #apps-title .title-name { white-space: normal; overflow-wrap: anywhere; }
  .apps-head:has(#apps-crumbs:not(:empty)) .subline { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .apps-head:has(#apps-crumbs:not(:empty)) .actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .head-rels { gap: 6px; }
  .rel-chip { max-width: 100%; }
  .panel.readme .panel-head .row-actions, .panel.ghv .panel-head .row-actions {
    flex-wrap: nowrap; justify-content: flex-start; width: calc(100% + 8px); margin: 2px -4px 0; overflow-x: auto; scrollbar-width: none; }
  .panel.readme .panel-head .row-actions::-webkit-scrollbar, .panel.ghv .panel-head .row-actions::-webkit-scrollbar { display: none; }
  .panel.readme .panel-head .row-actions > *, .panel.ghv .panel-head .row-actions > * { flex: none; }
  .panel.readme .ghv-branch, .panel.ghv .ghv-branch { max-width: 170px; }
  .todo-add .ta-due { flex: 0 0 140px; }
  .apps-head .actions .btn { height: 40px; padding: 0 12px; }
  .apps-head .actions .btn.icon-btn { width: 40px; padding: 0; }
  .tabs { padding: 0 8px; margin-bottom: 12px; }
  .apps-body { padding: 0 16px 24px; }
  .lanes { padding: 0 16px 12px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
  .col, .col-ph, .add-col { width: min(320px, calc(100vw - 52px)); scroll-snap-align: start; }
  .dash { grid-template-columns: minmax(0, 1fr); }
  .ov-grid { grid-template-columns: minmax(0, 1fr); padding: 0 14px 12px; }
  .apps-over { order: 2; }
  .col.ns-col, .ns-lanes .add-col, .ns-lanes .col-ph { width: min(336px, calc(100vw - 52px)); }
  .kr-panel { margin: 0 16px 10px; }
  .kr-strip { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 10px; }
  .kr-strip-h { width: auto; }
  .kr-tile { width: 212px; }
  .apps .panel-head { flex-wrap: wrap; padding: 4px 0; }
  .panel.skill .panel-head h2, .panel.readme .panel-head h2 { flex-basis: 100%; overflow-wrap: anywhere; }
  .db-page > .panel, .apps-body > .panel { padding: 12px 14px 14px; }
  .env-grid { grid-template-columns: minmax(0, 1fr); }
  .row.hit .row-actions { display: none; }
  .dlg-grid { grid-template-columns: minmax(0, 1fr); }
  .dlg.xwide { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .cd-head { padding: calc(14px + env(safe-area-inset-top)) 10px 12px 16px; }
  .dlg textarea.cd-title { font-size: 18px; line-height: 24px; }
  .cd-body { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .cd-main, .cd-side { overflow: visible; }
  .cd-main { padding: 18px 16px 8px; gap: 26px; }
  .cd-side { border-left: 0; border-top: 1px solid var(--border); padding: 20px 16px 24px; }
  .cd-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .cl { padding: 12px 12px 10px; }
  .cl-head { flex-wrap: wrap; }
  .cl-name { flex-basis: calc(100% - 40px); }
  .cl-acts { width: 100%; justify-content: flex-end; }
  .link-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .link-this { display: none; }
  .card-composer-hint { display: none; }
  .ed-page .ql-editor.ql-blank::before { left: 18px; right: 18px; }
}
.phone-when { display: none; }

/* ---------- motion: feedback and arrivals; nothing waits on it ---------- */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }
body, .panel, .rail, .ed-bar, .ed-toolbar.ql-toolbar.ql-snow, .ed-page, .field {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nav, .act, .btn { transition: background-color .12s, color .12s, transform .1s; }
.btn:active, .act:active, .nav:active { transform: scale(.97); }
.row { transition: background-color .12s; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes sheet { from { opacity: 0; transform: translateY(24px); } }
@keyframes fresh { from { background: color-mix(in srgb, var(--hue) 16%, transparent); } }
@keyframes pulse { 50% { outline-offset: -4px; } }

/* First paint: header, list and strip come in one after another. */
.booting .head, .booting .panel, .booting .strip, .booting .searchbar { animation: rise .4s var(--ease-out) both; }
.booting .panel { animation-delay: .06s; }
.booting .tile:nth-child(2) { animation-delay: .1s; }
.booting .tile:nth-child(3) { animation-delay: .14s; }
.booting .strip { animation-delay: .12s; }

/* A new folder or view: its title and rows arrive in a short stagger. */
.title-text.swap h1, .title-text.swap .subline, .title-text.swap .crumbs { animation: rise .3s var(--ease-out) both; }
.title-text.swap .subline { animation-delay: .04s; }
.rows.enter > li { animation: rise .32s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 25ms); }
.row.fresh { animation: fresh 1.6s ease-out; }
.row.leaving { transition: opacity .2s, transform .2s; opacity: 0; transform: translateX(16px); }
.row.drop { animation: pulse .9s ease-in-out infinite; }

.bar i { transition: width .7s var(--ease-out); }
.menu:not([hidden]) { animation: pop .14s var(--ease-out); transform-origin: top right; }
.dlg[open] { animation: pop .18s var(--ease-out); }
.dlg[open]::backdrop { animation: fade .18s ease-out; }
.editor:not([hidden]) { animation: sheet .28s var(--ease-out); }
.veil:not([hidden]) { animation: fade .15s ease-out; }

/* Reduced motion keeps the arrivals as plain fades and drops all travel and scaling. */
@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 0; } }
  @keyframes pop { from { opacity: 0; } }
  @keyframes sheet { from { opacity: 0; } }
  .row.drop { animation: none; }
  .row.leaving { transform: none; }
  .btn:active, .act:active, .nav:active { transform: none; }
}

/* deployments: where an app or a database runs; the environment comes from the machine */
.env-pill { flex: none; display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600; line-height: 1;
  background: var(--raised); color: var(--muted); }
.env-pill.prod { background: color-mix(in srgb, #e67722 18%, transparent); color: color-mix(in srgb, #e67722 80%, var(--text)); }
.env-pill.test { background: color-mix(in srgb, #2f74e0 18%, transparent); color: color-mix(in srgb, #2f74e0 75%, var(--text)); }
.env-pill.dev { background: color-mix(in srgb, #8b5cd6 18%, transparent); color: color-mix(in srgb, #8b5cd6 75%, var(--text)); }
.kr-badges { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kr-chips { display: flex; gap: 3px; }
.kr-runs { display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 5px; border-radius: 4px; background: var(--raised); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; }
.kr-runs svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kr-on { color: var(--text); }
.app-hosts { display: flex; flex-wrap: wrap; gap: 5px; }
.host-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; max-width: 100%;
  border: 1px solid var(--card-border); background: none; color: var(--muted); font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.host-chip span { overflow: hidden; text-overflow: ellipsis; }
.host-chip svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--k, #13a3a3); }
.host-chip.prod { border-color: color-mix(in srgb, #e67722 40%, var(--card-border)); }
.host-chip.test { border-color: color-mix(in srgb, #2f74e0 45%, var(--card-border)); }
.host-chip.dev { border-color: color-mix(in srgb, #8b5cd6 45%, var(--card-border)); }
.host-chip:hover { color: var(--text); border-color: var(--hue); }
.deploy-chip .env-pill { margin-left: 2px; }
.deploys-edit { display: flex; flex-direction: column; gap: 6px; }
.dlg .deploys-edit .meta { margin: 0; }
.deploy-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 32px; align-items: center; gap: 8px; }
.dlg .deploy-row .field { height: 36px; }
.sv-env-note { align-self: end; margin: 0 0 9px; }
@media (max-width: 720px) {
  .deploy-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .deploy-row input { grid-column: 1 / 3; }
}

/* backups of a database: when, what, where to (a machine, a NAS or a path) */
.backups-edit { display: flex; flex-direction: column; gap: 10px; }
.dlg .backups-edit .meta { margin: 0; }
.bk-when, .bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-when > select { flex: 0 1 190px; min-width: 0; }
.bk-when > .act { margin-left: auto; }
.bk-where { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; }
.bk-meta > select { flex: 1 1 150px; min-width: 0; }
.dlg .bk-edit .field.bk-time { width: 110px; flex: none; }
.bk-every, .bk-keep, .dlg label.bk-every, .dlg label.bk-keep { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; }
.dlg .bk-edit .bk-every .field, .dlg .bk-edit .bk-keep .field { width: 84px; }
.bk-days { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bk-day { min-width: 36px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.bk-day:hover { color: var(--text); border-color: var(--hue); }
.bk-day.on { background: color-mix(in srgb, var(--hue) 15%, transparent); border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); color: var(--hue); }
.backup-row { align-items: start; }
.backup-row .app-ico.sm, .backup-row .kv-copy { margin-top: 2px; }
.bk-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.bk-title b { font-weight: 600; color: var(--text); }
.bk-keep-text { font-size: var(--fs-2xs); }
.bk-target { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-decoration: none; }
.bk-target:hover { color: var(--hue); }
.backup-row .env-notes { margin-top: 2px; }
.app-ico.glyph.backup { background: var(--raised); color: var(--muted); }
@media (max-width: 720px) {
  .bk-where { grid-template-columns: minmax(0, 1fr); }
  .bk-when > select { flex: 1 1 100%; }
}

/* shares: a NAS or a network folder, its path to copy */
.app-ico.glyph.share { background: color-mix(in srgb, #2f9e55 16%, transparent); color: #2f9e55; }
:root[data-theme="dark"] .app-ico.glyph.share { color: #6fcf8f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-ico.glyph.share { color: #6fcf8f; } }
.kind-share .kr-tile-sub { font-family: var(--font-mono); font-size: var(--fs-2xs); }
.rel-chip.kind-share { border-color: color-mix(in srgb, #2f9e55 45%, var(--border)); background: color-mix(in srgb, #2f9e55 9%, var(--surface)); }
.kind-share .rel-kind { background: #2f9e55; }
.share-path { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--inset); }
.share-path code { flex: 1; min-width: 0; overflow-wrap: anywhere; font: var(--fs-md)/1.4 var(--font-mono); color: var(--text); }
.field.mono { font-family: var(--font-mono); }
.kr-addr { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text); }

/* logins: user and a sealed password, shown only on request */
.creds-edit { display: flex; flex-direction: column; gap: 6px; }
.cred-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; align-items: center; gap: 8px; }
.dlg .cred-row .field { height: 36px; }
.cred-pw { position: relative; display: flex; align-items: center; }
.cred-pw .field { width: 100%; padding-right: 38px; }
.cred-pw .act { position: absolute; right: 2px; }
@media (max-width: 720px) {
  .cred-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .cred-row .cred-pw { grid-column: 1 / 3; }
}

/* item pages (machine, share, database): content left, quick facts right */
.item-page { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; width: 100%; max-width: 1240px; }
.item-main, .item-side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ipanel { padding: 12px 16px 14px; }
.ipanel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 6px; }
.ipanel-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); font-weight: 600; }
.ipanel-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
.ipanel-count { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--raised); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; line-height: 18px; text-align: center; }
.act.sm { height: 28px; padding: 0 8px; font-size: var(--fs-sm); gap: 6px; }
.act.sm svg { width: 14px; height: 14px; }
.ipanel-hint { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 18px; }
.ipanel .md.schema { margin-top: 2px; }
.ipanel .env-cards { margin-top: 0; }
/* facts: label, value, copy (the copy button shows on hover with a mouse) */
.kv { margin: 0; display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 28px; align-items: center; gap: 8px; min-height: 30px; border-top: 1px solid var(--rule); }
.kv-row:first-child { border-top: 0; }
.kv-row dt { color: var(--muted); font-size: var(--fs-sm); }
.kv-row dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 4px; font: var(--fs-body) var(--font-mono); color: var(--text); overflow-wrap: anywhere; }
.kv-row .act.icon-act { width: 28px; height: 28px; }
@media (hover: hover) and (pointer: fine) {
  .kv-row .kv-copy { opacity: 0; transition: opacity .12s; }
  .kv-row:hover .kv-copy, .kv-row .kv-copy:focus-visible { opacity: 1; }
}
.kv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kv-acts code { font: var(--fs-sm) var(--font-mono); }
/* what runs on a machine */
.hosted { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hosted-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.hosted-row:first-child { border-top: 0; }
.hosted-row .app-ico.sm { width: 28px; height: 28px; border-radius: 7px; font-size: var(--fs-sm); }
.hosted-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hosted-name { font-weight: 600; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hosted-name:hover { color: var(--hue); }
.hosted-meta { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hosted-mode { flex: none; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--raised); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; line-height: 18px; }
.hosted-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-small) var(--font-mono); color: var(--muted); text-decoration: none; }
a.hosted-url:hover { color: var(--hue); }
@media (hover: hover) and (pointer: fine) {
  .hosted-row .kv-copy { opacity: 0; transition: opacity .12s; }
  .hosted-row:hover .kv-copy { opacity: 1; }
}
/* logins */
.creds { display: flex; flex-direction: column; gap: 10px; }
.cred { padding: 8px 10px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--inset); }
.cred-label { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cred-label svg { width: 13px; height: 13px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cred .kv-row { grid-template-columns: 80px minmax(0, 1fr) 28px; }
.cred-pass .act.icon-act { width: 26px; height: 26px; margin: -4px 0; }
.cred-secret { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--fs-body) var(--font-mono); color: var(--muted); }
.cred-secret.shown { color: var(--text); }
@media (max-width: 1000px) {
  .item-page { grid-template-columns: minmax(0, 1fr); }
  .item-side { order: -1; }
}

/* the item form: a fixed header and footer, titled sections in between */
.dlg.app-dlg { width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.dlg.app-dlg[open] { display: flex; flex-direction: column; }
.dlg .app-form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.af-head { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 16px 22px 12px; border-bottom: 1px solid var(--border); }
.af-head h2 { margin: 0 !important; font-size: var(--fs-lg) !important; font-weight: 600 !important; }
.af-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px 8px; overscroll-behavior: contain; }
.af-foot { flex: none; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--surface); }
.af-foot .buttons { margin-top: 0 !important; }
.fsec { padding: 14px 0 16px; border-top: 1px solid var(--rule); }
.fsec:first-child { border-top: 0; }
.fsec-h { margin: 0 0 2px; font-size: var(--fs-md); font-weight: 600; color: var(--text); }
.fsec-note { margin: 0 0 8px !important; font-size: var(--fs-sm); color: var(--muted); }
.fsec > label:first-of-type, .fsec > .lbl:first-of-type { margin-top: 8px; }
.dlg .fsec label, .dlg .fsec .lbl { margin: 10px 0 6px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.dlg .fsec .field { height: 36px; }
.dlg .fsec select.field { height: 36px; }
.af-top { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.af-icon { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 26px; }
.af-icon .act { height: 24px; padding: 0 6px; font-size: var(--fs-small); }
.af-icon-btn { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px dashed var(--control); border-radius: 14px; background: var(--inset); cursor: pointer; }
.af-icon-btn:hover { border-color: var(--hue); }
.af-icon-btn .app-ico.lg { width: 52px; height: 52px; border-radius: 12px; font-size: 22px; }
.af-icon-edit { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: 0 0 0 2px var(--surface); }
.af-icon-edit svg { width: 12px; height: 12px; }
.af-top-fields .dlg-grid.name-ns { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cred-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 32px; gap: 8px; margin: 4px 0 4px; font-size: var(--fs-small); color: var(--muted); }
.fsec .add-link { margin-top: 6px; }
@media (max-width: 720px) {
  .af-top { grid-template-columns: 1fr; }
  .af-icon { flex-direction: row; padding-top: 0; justify-content: flex-start; }
  .cred-head { display: none; }
}
.af-icon .act[hidden] { display: none; }

/* ---------- README as GitHub renders it (.gh-md): calm reading type, app colours, GitHub's structures ---------- */
:root {
  --syn-comment: #6e7781; --syn-keyword: #cf222e; --syn-string: #0a3069; --syn-func: #8250df; --syn-const: #0550ae;
  --syn-var: #953800; --syn-tag: #116329; --syn-del-ink: #82071e; --syn-del-bg: #ffebe9; --syn-ins-ink: #116329; --syn-ins-bg: #dafbe1;
  --alert-note: #0969da; --alert-tip: #1a7f37; --alert-important: #8250df; --alert-warning: #9a6700; --alert-caution: #d1242f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-comment: #8b949e; --syn-keyword: #ff7b72; --syn-string: #a5d6ff; --syn-func: #d2a8ff; --syn-const: #79c0ff;
    --syn-var: #ffa657; --syn-tag: #7ee787; --syn-del-ink: #ffdcd7; --syn-del-bg: #67060c; --syn-ins-ink: #aff5b4; --syn-ins-bg: #033a16;
    --alert-note: #4493f8; --alert-tip: #3fb950; --alert-important: #ab7df8; --alert-warning: #d29922; --alert-caution: #f85149;
  }
}
:root[data-theme="dark"] {
  --syn-comment: #8b949e; --syn-keyword: #ff7b72; --syn-string: #a5d6ff; --syn-func: #d2a8ff; --syn-const: #79c0ff;
  --syn-var: #ffa657; --syn-tag: #7ee787; --syn-del-ink: #ffdcd7; --syn-del-bg: #67060c; --syn-ins-ink: #aff5b4; --syn-ins-bg: #033a16;
  --alert-note: #4493f8; --alert-tip: #3fb950; --alert-important: #ab7df8; --alert-warning: #d29922; --alert-caution: #f85149;
}

.gh-md { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--text); overflow-wrap: break-word; }
.gh-md > :first-child, .gh-md article > :first-child, .gh-md .markdown-body > :first-child { margin-top: 0 !important; }
.gh-md > :last-child, .gh-md article > :last-child { margin-bottom: 0 !important; }
.gh-md p, .gh-md blockquote, .gh-md ul, .gh-md ol, .gh-md dl, .gh-md .gh-table, .gh-md .gh-code, .gh-md details,
.gh-md .markdown-alert { margin: 0 0 16px; }

/* headings, with GitHub's permalink anchor shown on hover */
.gh-md .markdown-heading { position: relative; }
.gh-md h1, .gh-md h2, .gh-md h3, .gh-md h4, .gh-md h5, .gh-md h6 { margin: 28px 0 12px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--text); }
.gh-md h1 { font-size: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--border); letter-spacing: -.015em; }
.gh-md h2 { font-size: 19px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.gh-md h3 { font-size: 16px; }
.gh-md h4 { font-size: 14px; }
.gh-md h5 { font-size: 13px; }
.gh-md h6 { font-size: 12.5px; color: var(--muted); }
.gh-md .markdown-heading:has(h1, h2) { margin: 28px 0 12px; }
.gh-md .markdown-heading:has(h1, h2) > :is(h1, h2) { margin: 0; }
.gh-md .markdown-heading:first-child, .gh-md .markdown-heading:first-child > * { margin-top: 0; }
.gh-md .anchor { position: absolute; left: -22px; top: 50%; transform: translateY(-50%); padding: 4px 3px; line-height: 0; color: var(--faint); opacity: 0; transition: opacity .12s; }
.gh-md .markdown-heading:hover .anchor, .gh-md .anchor:focus-visible { opacity: 1; }
.gh-md .anchor:hover { color: var(--hue); }
.gh-md .anchor svg { width: 16px; height: 16px; fill: currentColor; }

/* text */
.gh-md a { color: var(--hue); text-decoration: none; }
.gh-md a:hover { text-decoration: underline; text-underline-offset: 2px; }
.gh-md strong, .gh-md b { font-weight: 600; }
.gh-md del { color: var(--muted); }
.gh-md hr { height: 1px; margin: 28px 0; padding: 0; border: 0; background: var(--border); }
.gh-md sup, .gh-md sub { font-size: 75%; line-height: 0; }
.gh-md kbd { display: inline-block; padding: 1px 6px; font: 11.5px/1.5 var(--font-mono); color: var(--text); background: var(--inset);
  border: 1px solid var(--control); border-bottom-width: 2px; border-radius: 5px; vertical-align: middle; }
.gh-md [align="center"] { text-align: center; }
.gh-md [align="right"] { text-align: right; }

/* lists */
.gh-md ul, .gh-md ol { padding-left: 1.8em; }
.gh-md ul { list-style: disc; } .gh-md ol { list-style: decimal; }
.gh-md ul ul { list-style: circle; } .gh-md ul ul ul { list-style: square; }
.gh-md ol ol { list-style: lower-roman; }
.gh-md li > ul, .gh-md li > ol { margin: 4px 0 0; }
.gh-md li + li { margin-top: 4px; }
.gh-md li > p { margin: 0 0 8px; }
.gh-md li::marker { color: var(--muted); }
.gh-md .contains-task-list { padding-left: 1.6em; }
.gh-md .task-list-item { list-style: none; }
.gh-md .task-list-item-checkbox { width: 14px; height: 14px; margin: 0 .45em 0 -1.5em; vertical-align: -2px; accent-color: var(--hue); }
.gh-md dt { margin-top: 12px; font-weight: 600; } .gh-md dd { margin: 0; padding-left: 16px; }

/* quotes and GitHub alerts (> [!NOTE] …) */
.gh-md blockquote { padding: 2px 0 2px 16px; border-left: 3px solid var(--control); color: var(--muted); }
.gh-md blockquote > :last-child, .gh-md .markdown-alert > :last-child { margin-bottom: 0; }
.gh-md .markdown-alert { --a: var(--alert-note); padding: 10px 16px; border-left: 3px solid var(--a);
  background: color-mix(in srgb, var(--a) 7%, transparent); border-radius: 0 8px 8px 0; }
.gh-md .markdown-alert-tip { --a: var(--alert-tip); }
.gh-md .markdown-alert-important { --a: var(--alert-important); }
.gh-md .markdown-alert-warning { --a: var(--alert-warning); }
.gh-md .markdown-alert-caution { --a: var(--alert-caution); }
.gh-md .markdown-alert-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; color: var(--a); }
.gh-md .markdown-alert-title svg { width: 16px; height: 16px; fill: currentColor; flex: none; margin: 0; }
.gh-md svg.octicon { fill: currentColor; vertical-align: text-bottom; }

/* code */
.gh-md code, .gh-md tt { padding: .15em .4em; font: 85%/1.4 var(--font-mono); background: var(--raised); border-radius: 5px; white-space: break-spaces; }
.gh-md .gh-code { position: relative; }
.gh-md pre { margin: 0; padding: 14px 16px; overflow: auto; font: 12.5px/1.6 var(--font-mono); color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: 8px; tab-size: 4; word-wrap: normal; }
.gh-md pre code { padding: 0; font-size: inherit; background: none; border-radius: 0; white-space: pre; }
.gh-md .highlight, .gh-md .snippet-clipboard-content { margin: 0; }
.gh-copy { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.gh-copy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gh-code:hover .gh-copy, .gh-copy:focus-visible { opacity: 1; }
.gh-copy:hover { color: var(--text); background: var(--raised); }
@media (hover: none) { .gh-copy { opacity: 1; } }
.gh-md .pl-c, .gh-md .pl-c span { color: var(--syn-comment); font-style: italic; }
.gh-md .pl-k, .gh-md .pl-kos + .pl-k, .gh-md .pl-s .pl-pse .pl-s1, .gh-md .pl-sr .pl-cce { color: var(--syn-keyword); }
.gh-md .pl-s, .gh-md .pl-pds, .gh-md .pl-s .pl-pse, .gh-md .pl-sr, .gh-md .pl-sr .pl-sre, .gh-md .pl-sr .pl-sra { color: var(--syn-string); }
.gh-md .pl-en, .gh-md .pl-e { color: var(--syn-func); }
.gh-md .pl-c1, .gh-md .pl-s .pl-v, .gh-md .pl-mh, .gh-md .pl-mh .pl-en, .gh-md .pl-ms, .gh-md .pl-pse, .gh-md .pl-mdr { color: var(--syn-const); }
.gh-md .pl-v, .gh-md .pl-smw { color: var(--syn-var); }
.gh-md .pl-ent, .gh-md .pl-sg { color: var(--syn-tag); }
.gh-md .pl-smi, .gh-md .pl-s1, .gh-md .pl-kos { color: inherit; }
.gh-md .pl-mb { font-weight: 600; } .gh-md .pl-mi { font-style: italic; } .gh-md .pl-mh { font-weight: 600; }
.gh-md .pl-md { color: var(--syn-del-ink); background: var(--syn-del-bg); }
.gh-md .pl-mi1 { color: var(--syn-ins-ink); background: var(--syn-ins-bg); }
.gh-md .pl-ii, .gh-md .pl-bu { color: var(--syn-keyword); text-decoration: underline wavy; }

/* tables */
.gh-md .gh-table { max-width: 100%; overflow-x: auto; }
.gh-md table { border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.gh-md th, .gh-md td { padding: 7px 13px; border: 1px solid var(--border); vertical-align: top; overflow-wrap: normal; word-break: normal; }
.gh-md th { white-space: nowrap; }  /* words never break mid-word in a table; a table too wide scrolls sideways (like on GitHub) */
.gh-md th { font-weight: 600; text-align: left; background: var(--inset); }
.gh-md tr:nth-child(2n) td { background: color-mix(in srgb, var(--inset) 60%, transparent); }
.gh-md td code { white-space: nowrap; }

/* images: badges stay in line, pictures fit the column */
.readme-body.gh-md img { display: inline; max-width: 100%; max-height: none; height: auto; border: 0; border-radius: 0; background: none; vertical-align: middle; }
.gh-md p > img:only-child, .gh-md p > a:only-child > img { border-radius: 6px; }
.gh-md img[align="right"] { float: right; margin: 0 0 12px 16px; }
.gh-md img[align="left"] { float: left; margin: 0 16px 12px 0; }
.gh-md a:has(> img) { text-decoration: none; }
.gh-md p:has(> a > img[src*="shields.io"], > img[src*="shields.io"], > a > img[src*="badge"]) { line-height: 1.9; }

/* details, footnotes */
.gh-md details { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; }
.gh-md details[open] > summary { margin-bottom: 10px; }
.gh-md summary { cursor: pointer; font-weight: 500; }
.gh-md details > :last-child { margin-bottom: 0; }
.gh-md .footnotes { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.gh-md .footnotes ol { margin: 0; }
.gh-md .sr-only, .gh-md .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gh-md .data-footnote-backref { text-decoration: none; }

/* Reading layout (README tab, Forráskód viewer): a centred document column with larger type and roomier rhythm,
   like a good Markdown preview; body text a shade softer than the headings. */
.gh-md { --font-doc: system-ui, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", Ubuntu, "Droid Sans", sans-serif;
  font-family: var(--font-doc); font-size: 15.5px; line-height: 1.68; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.readme-body.gh-md { max-width: 880px; margin: 26px auto 10px; padding: 0 36px 28px; }
.ghv-doc .gh-md, .ghv-doc .readme-body.gh-md { max-width: 880px; margin: 18px 0 0; padding: 0 0 12px; }  /* beside the tree: aligned to the file head, no extra gutter */
.gh-md p, .gh-md blockquote, .gh-md ul, .gh-md ol, .gh-md dl, .gh-md .gh-table, .gh-md .gh-code, .gh-md details,
.gh-md .markdown-alert { margin: 0 0 1.15em; }
.gh-md h1, .gh-md h2, .gh-md h3, .gh-md h4, .gh-md h5, .gh-md h6 { margin: 1.9em 0 .75em; font-weight: 650; line-height: 1.28; color: var(--text); }
.gh-md h1, .gh-md h2, .gh-md h3, .gh-md h4, .gh-md h5, .gh-md h6 { font-family: var(--font-doc); letter-spacing: 0; font-weight: 600; }
.gh-md h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.gh-md h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border); }
.gh-md h3 { font-size: 1.25em; }
.gh-md h4 { font-size: 1.05em; }
.gh-md h5 { font-size: .95em; }
.gh-md h6 { font-size: .9em; color: var(--muted); }
.gh-md .markdown-heading:has(h1, h2) { margin: 1.9em 0 .75em; }
.gh-md strong, .gh-md b { font-weight: 600; color: var(--text); }
.gh-md li + li { margin-top: .35em; }
.gh-md li > ul, .gh-md li > ol { margin-top: .35em; }
.gh-md hr { margin: 2.2em 0; }
.gh-md code, .gh-md tt { padding: .16em .45em; font-size: .84em; color: var(--text); border-radius: 6px;
  background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); }
.gh-md pre { padding: 16px 18px; font-size: 13px; line-height: 1.65; border-radius: 10px; }
.gh-md pre code { border: 0; color: inherit; }
.gh-md table { font-size: 14px; }
.gh-md th, .gh-md td { padding: 8px 14px; }
.gh-md th { color: var(--text); }
.gh-md blockquote { padding: 2px 0 2px 18px; }
.gh-md .markdown-alert { padding: 12px 18px; border-radius: 0 8px 8px 0; }

@media (max-width: 720px) {
  .gh-md { font-size: 15px; line-height: 1.68; }
  .readme-body.gh-md { margin-top: 16px; padding: 0 2px 16px; }
  .gh-md h1 { font-size: 1.7em; } .gh-md h2 { font-size: 1.35em; }
  .gh-md pre { font-size: 12px; padding: 12px; }
  .gh-md .anchor { display: none; }
  .gh-md img[align] { float: none; margin: 0; }
}
@media (max-width: 720px) {
  .readme .panel-head .row-actions { flex-wrap: wrap; justify-content: flex-start; min-width: 0; margin-left: -10px; }
  .apps .readme .panel-head .act { margin-right: 0; padding: 0 8px; }
  .readme .rd-long { display: none; }
}

/* ---------- GitHub viewer (Forráskód tab, folders attached from GitHub): tree on the left, the file on the right ---------- */
.panel.ghv { width: 100%; max-width: none; }
.ghv .panel-head h2 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ghv-branch.field { width: auto; max-width: 220px; height: 32px; padding: 0 28px 0 10px; font-size: var(--fs-small); }
.ghv-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
.ghv.single .ghv-grid { grid-template-columns: minmax(0, 1fr); }
.ghv-tree { position: sticky; top: 12px; border: 1px solid var(--border); border-radius: var(--radius-control); display: flex; flex-direction: column;
  max-height: calc(100vh - 220px); min-height: 200px; }
.ghv-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.ghv-tree-head .check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); cursor: pointer; }
.ghv-count { font-size: var(--fs-small); color: var(--faint); }
.ghv-scroll { overflow: auto; padding: 4px; flex: 1; }
.ghv-list { list-style: none; margin: 0; padding: 0; }
.ghv-list[hidden] { display: none; }
.ghv-item { display: flex; align-items: center; gap: 7px; width: 100%; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; text-decoration: none; cursor: pointer; }
.ghv-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ghv-item svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--muted); }
.ghv-item.md svg { color: var(--hue); }
.ghv-item .ghv-chev { width: 12px; height: 12px; transition: transform .12s; }
.ghv-item[aria-expanded="true"] .ghv-chev { transform: rotate(90deg); }
.ghv-item:hover { background: var(--raised); }
.ghv-item[aria-current="page"] { background: color-mix(in srgb, var(--hue) 16%, transparent); font-weight: 500; }
.ghv-doc { min-width: 0; padding: 0 28px 8px 32px; }  /* room for the text, and for the heading link icons on the left */
.ghv.single .ghv-doc { padding-left: 28px; }
.ghv-doc-head { display: flex; align-items: center; gap: 12px; min-height: 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ghv .panel-head .act-sep, .readme .panel-head .act-sep { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--border); }
.ghv .panel-head .row-actions, .readme .panel-head .row-actions { gap: 4px; }
.ghv .panel-head .ghv-branch, .readme .panel-head .ghv-branch { margin: 0 4px; }
.ghv-path { min-width: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted); overflow-wrap: anywhere; }
.ghv-doc .gh-md { margin-top: 16px; }
.ghv-doc > .gh-code { position: relative; margin-top: 14px; }
.ghv-code { margin: 0; padding: 14px 16px; overflow: auto; max-height: 75vh; font: 12.5px/1.6 var(--font-mono); color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: 8px; tab-size: 4; }
.ghv-code code { white-space: pre; }
.ghv-image { margin-top: 14px; }
.ghv-image img { max-width: 100%; max-height: 70vh; border-radius: 6px; }
.ghv-doc > .empty, .ghv-doc > .skeleton { margin-top: 14px; }
.ghv .panel-head { flex-wrap: wrap; row-gap: 8px; }
.ghv .panel-head .row-actions { gap: 6px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 760px) {
  .ghv .panel-head h2 { flex-basis: 100%; }
  .ghv .panel-head .row-actions { justify-content: flex-start; margin-left: -10px; }
  .ghv-branch.field { max-width: 60vw; margin-left: 10px; }
  .ghv-grid { grid-template-columns: minmax(0, 1fr); }
  .ghv-tree { position: static; max-height: 40vh; min-height: 0; }
  .ghv-doc-head { flex-wrap: wrap; }
  .ghv-doc, .ghv.single .ghv-doc { padding: 0 4px 8px; }
}

/* the small icon badges (tiles) and section icons (item pages): one colour per meaning */
.c-runs { --tone: #2f6fd6; } .c-backup { --tone: #12927a; } .c-key { --tone: #b7790a; } .c-link { --tone: #8350d0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .c-runs { --tone: #6ea8ff; } :root:not([data-theme="light"]) .c-backup { --tone: #4fd1a5; }
  :root:not([data-theme="light"]) .c-key { --tone: #f0b84a; } :root:not([data-theme="light"]) .c-link { --tone: #b393f0; } }
:root[data-theme="dark"] .c-runs { --tone: #6ea8ff; } :root[data-theme="dark"] .c-backup { --tone: #4fd1a5; }
:root[data-theme="dark"] .c-key { --tone: #f0b84a; } :root[data-theme="dark"] .c-link { --tone: #b393f0; }
.kr-runs[class*="c-"] { background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.ipanel-ico[class*="c-"] { color: var(--tone); }

/* the app card's badge row: numbers, machines and dependencies side by side, all the same height */
.app-nums .host-chip, .app-nums .app-deps { height: 26px; border-radius: 6px; font-size: 13px; margin: 0; align-self: auto; }
.app-nums .app-deps.c-link { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.app-nums .app-deps svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* the app cards on the Appok board: one step smaller text, a little denser (the rest of the page is unchanged) */
.card.app-tile { font-size: 13px; line-height: 18px; gap: 8px; padding: 12px 12px 10px; }
.app-tile .app-top { gap: 8px; }
.app-tile .app-ico.md { width: 30px; height: 30px; border-radius: 8px; font-size: 14px; }
.app-tile .app-name { font-size: 14px; line-height: 20px; }
.app-tile .ver { font-size: 11px; line-height: 18px; padding: 0 7px; }
.app-tile .tag { height: 22px; padding: 0 8px; font-size: 12px; }
.app-tile .app-desc { font-size: 12px; line-height: 17px; }
.app-tile .app-nums { gap: 5px; }
.app-tile .app-num, .app-tile .app-nums .host-chip, .app-tile .app-nums .app-deps { height: 23px; padding: 0 8px; font-size: 12px; gap: 4px; }
.app-tile .app-num svg { width: 13px; height: 13px; }
.app-tile .app-num.hot b { font-size: 13px; }
.app-tile .app-nums .app-deps svg, .app-tile .host-chip svg { width: 12px; height: 12px; }
.app-tile .app-foot { gap: 10px; padding-top: 8px; }
.app-tile .app-link, .app-tile button.app-link { font-size: 12px; }
.app-tile .app-link svg { width: 14px; height: 14px; }
.app-tile .proj-h, .app-tile .proj-open, .app-tile .proj-late, .app-tile .proj-ver { font-size: 11px; }
.app-tile .proj { font-size: 12px; }

/* ---------- app header: name, icon and details editable where they are ---------- */
#apps-title .title-ico { flex: none; position: relative; display: grid; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; }
#apps-title .title-ico::after { content: ""; position: absolute; inset: -3px; border-radius: 11px; border: 1.5px dashed transparent; transition: border-color .15s; }
#apps-title .title-ico:hover::after, #apps-title .title-ico:focus-visible::after { border-color: var(--hue); }
#apps-title .title-ico:focus-visible { outline: none; }
#apps-title .title-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 -6px; padding: 1px 6px; border: 1px solid transparent; border-radius: 7px;
  font: inherit; color: inherit; background: none; cursor: text; text-align: left; }
#apps-title .title-name:hover { background: var(--row-hover); border-color: var(--border); }
#apps-title .title-name:focus-visible { outline: 2px solid var(--hue); outline-offset: 1px; }
#apps-title .title-input { min-width: 6ch; max-width: min(640px, 70vw); margin: 0 -6px; padding: 1px 6px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--hue); border-radius: 7px; outline: 3px solid color-mix(in srgb, var(--hue) 25%, transparent); }
#apps-title .title-edit { flex: none; width: 32px; height: 32px; color: var(--muted); opacity: .55; transition: opacity .15s; }
#apps-title .title-edit svg { width: 17px; height: 17px; }
#apps-title:hover .title-edit, #apps-title .title-edit:focus-visible { opacity: 1; }
.sub-add, .rel-add { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--control); background: none; color: var(--muted); cursor: pointer; font: inherit; }
.sub-add { height: 22px; margin-left: 8px; padding: 0 8px 0 5px; border-radius: 6px; font-size: var(--fs-sm); vertical-align: 1px; }
.rel-add { height: 30px; min-width: 30px; justify-content: center; padding: 0 10px; border-radius: 7px; font-size: var(--fs-body); }
.rel-add:empty { padding: 0; }
.sub-add svg, .rel-add svg { width: 15px; height: 15px; }
.sub-add:hover, .rel-add:hover { color: var(--hue); border-color: var(--hue); background: color-mix(in srgb, var(--hue) 7%, transparent); }

/* ---------- menus: a caption between groups ---------- */
.menu .menu-head { padding: 6px 10px 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }

/* ---------- card: ⋯ in the corner (and the same menu on right click) ---------- */
.card-more { position: absolute; top: 5px; right: 5px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 7px; cursor: pointer;
  color: var(--muted); background: var(--card); border: 1px solid var(--card-border); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); opacity: 0; transition: opacity .12s; }
.card-more svg { width: 16px; height: 16px; }
.card:hover .card-more, .card:focus-within .card-more, .card-more[aria-expanded="true"] { opacity: 1; }
.card-more:hover { color: var(--text); background: var(--raised); }
.card.ghost .card-more { display: none; }
@media (hover: none) { .card-more { opacity: .9; background: none; border-color: transparent; box-shadow: none; } .card-row { padding-right: 22px; } }

/* ---------- a dialog opened from another one ---------- */
.dlg.stacked::backdrop { background: rgba(10, 12, 16, .35); }
.head-rels .tag.tag-edit { cursor: pointer; }
.head-rels .tag.tag-edit:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px currentColor inset; }
.exe-label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }