/* GitBluetree – design (version 5.1)
   A calm, light workbench: cool canvas, white working surfaces, one vivid Bluetree blue for actions and the
   current place, green only for "done". Every project carries its own color chip (sidebar, keys, boards) –
   the one colorful element; everything else stays quiet. Type: Plus Jakarta Sans. */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-italic.woff2") format("woff2-variations"); }

:root {
  color-scheme: light;
  --paper: #f4f6fa;           /* canvas */
  --surface: #ffffff;
  --surface-2: #f6f7fa;       /* quiet fills, lanes */
  --hover: #eef1f6;
  --ink: #182033;
  --ink-2: #5a6476;
  --ink-3: #8a93a4;
  --line: #e4e8ef;
  --line-strong: #d0d6e0;
  --brand: #3159e8;           /* Bluetree blue */
  --bluetree: #3159e8;
  --bluetree-ink: #ffffff;
  --bluetree-soft: #edf1fe;
  --bluetree-strong: #2445c4;
  --side-bg: #fbfcfe;
  --night: #16204a;           /* sign-in panel */
  --canopy: #3159e8;          /* (5.0 name) avatars */
  --canopy-ink: #ffffff;
  --canopy-ink-2: #8a93a4;
  --leaf: #0f9f6e;            /* done, progress */
  --leaf-soft: #e4f6ee;
  --amber: #b26a00;           /* WIP, due soon */
  --amber-soft: #fff3dc;
  --rust: #d1382a;            /* error, urgent */
  --rust-soft: #fdecea;
  --violet: #7a5af0;
  --violet-soft: #f1edfe;
  --t-epic: #7a5af0;
  --t-module: #2f7fd8;
  --t-story: #13a06f;
  --t-bug: #e0483a;
  --t-task: #8a93a4;
  --series-1: #3159e8;
  --chart-grid: #eceff4;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --shadow-card: 0 1px 2px rgba(24, 32, 51, .05);
  --shadow-pop: 0 12px 32px rgba(24, 32, 51, .14), 0 2px 6px rgba(24, 32, 51, .06);
  --focus: 0 0 0 3px rgba(49, 89, 232, .28);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --paper: #0f131a; --surface: #171c25; --surface-2: #1c222d; --hover: #222a37; --ink: #e8ebf1; --ink-2: #a6afbf;
    --ink-3: #788296; --line: #262d3a; --line-strong: #353e4f; --brand: #7392ff; --bluetree: #7392ff;
    --bluetree-ink: #0b1230; --bluetree-soft: #1d2645; --bluetree-strong: #93abff; --side-bg: #131820;
    --canopy: #7392ff; --canopy-ink: #0b1230; --leaf: #3fcf97; --leaf-soft: #14302a; --amber: #f2b45a;
    --amber-soft: #3a2b12; --rust: #ff8073; --rust-soft: #3d1d1b; --violet: #a690ff; --violet-soft: #26203f;
    --t-epic: #a690ff; --t-module: #67a8f0; --t-story: #47cf9a; --t-bug: #ff8073; --t-task: #8f99ac;
    --series-1: #7392ff; --chart-grid: #232a36;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3); --shadow-pop: 0 14px 36px rgba(0, 0, 0, .5);
    --focus: 0 0 0 3px rgba(115, 146, 255, .35);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink);
  background: var(--paper);
}
a { color: var(--bluetree); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-s); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
p { margin: 0 0 .75em; }
code, pre, .mono { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--ink-2); }
.small { font-size: .86rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Frame: sidebar + content -------------------------------------------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--canopy); color: var(--canopy-ink); padding: 18px 14px; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px;
}
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--canopy-ink); text-decoration: none;
  font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; padding: 2px 6px; }
.wordmark svg { width: 26px; height: 26px; flex: none; }
.wordmark .part-blue { color: #7cc0ea; }
.side-section { display: flex; flex-direction: column; gap: 2px; }
.side-heading { color: var(--canopy-ink-2); font-size: .82rem; padding: 0 8px 4px; }
.side-repo { color: var(--canopy-ink); font-weight: 700; padding: 0 8px 8px; word-break: break-word; }
.side-repo .method { display: inline-block; margin-top: 4px; font-weight: 400; font-size: .8rem; color: var(--canopy-ink-2); }
.side-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-s);
  color: var(--canopy-ink); text-decoration: none; }
.side-link svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.side-link:hover { background: rgba(255, 255, 255, .07); }
.side-link[aria-current="page"] { background: rgba(124, 192, 234, .16); color: #fff; box-shadow: inset 3px 0 0 #7cc0ea; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; font-size: .86rem; color: var(--canopy-ink-2); }
.side-user { display: flex; align-items: center; gap: 8px; color: var(--canopy-ink); }
.side-user img { width: 26px; height: 26px; border-radius: 50%; }
.side-foot form { margin: 0; }
.side-admin { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-s); color: var(--canopy-ink);
  text-decoration: none; font-weight: 600; font-size: .9rem; }
.side-admin svg { width: 18px; height: 18px; flex: none; }
.side-admin:hover { background: rgba(255, 255, 255, .07); }
.side-admin[aria-current="page"] { background: rgba(124, 192, 234, .16); border-color: #7cc0ea; color: #fff; }
a.side-heading-link { text-decoration: none; }
a.side-heading-link:hover { color: var(--canopy-ink); }
.link-button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.main { min-width: 0; padding: 22px 28px 48px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.page-head .lead { color: var(--ink-2); margin: 6px 0 0; max-width: 70ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.flash { background: var(--leaf-soft); color: var(--ink); border-left: 4px solid var(--leaf); padding: 10px 14px;
  border-radius: var(--radius-s); margin-bottom: 16px; }
.alert { background: var(--rust-soft); border-left: 4px solid var(--rust); padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 16px; }
.alert ul { margin: 0; padding-left: 18px; }
.notice { background: var(--amber-soft); border-left: 4px solid var(--amber); padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 16px; }

/* --- Controls -------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.btn:hover { border-color: var(--bluetree); }
.btn-primary { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--ink-2); font-weight: 400; }
.btn-quiet:hover { color: var(--ink); background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--rust); }
.btn-danger:hover { border-color: var(--rust); }
.btn-small { padding: 4px 10px; font-size: .86rem; }
.btn svg { width: 16px; height: 16px; }

label { font-weight: 700; display: block; margin-bottom: 4px; }
.hint { font-weight: 400; color: var(--ink-2); font-size: .86rem; margin-top: 4px; }
input[type=text], input[type=number], input[type=date], input[type=search], input[type=password], input[type=email], input[type=url], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); padding: 7px 10px; }
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
textarea.code, input.code { font-family: var(--mono); font-size: .9rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--bluetree); box-shadow: var(--focus); }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check input { margin-top: 4px; }
.field { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 18px 20px; }
.panel + .panel { margin-top: 16px; }
.dash-grid > .panel + .panel, .two-col > .panel + .panel { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.stack > * + * { margin-top: 16px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }

table.data { width: 100%; border-collapse: collapse; font-size: .93rem; }
table.data th { text-align: left; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding: 6px 10px 6px 0; }
table.data td { border-bottom: 1px solid var(--line); padding: 8px 10px 8px 0; vertical-align: top; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Type marking: edge + text, never color alone ---------------------------- */
.type { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.type::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--tc, var(--t-task)); }
.t-epic { --tc: var(--t-epic); } .t-module { --tc: var(--t-module); } .t-story { --tc: var(--t-story); }
.t-bug { --tc: var(--t-bug); } .t-task { --tc: var(--t-task); }
.t-bug.type::before { border-radius: 50%; }
.t-epic.type::before { transform: rotate(45deg); }

.badge { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.badge-ok { background: var(--leaf-soft); border-color: transparent; color: var(--leaf); }
.badge-warn { background: var(--amber-soft); border-color: transparent; color: var(--amber); }
.badge-err { background: var(--rust-soft); border-color: transparent; color: var(--rust); }
.badge-info { background: var(--bluetree-soft); border-color: transparent; color: var(--bluetree); }
.badge-source { background: var(--surface-2); border-style: dashed; font-variant-numeric: tabular-nums; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.inline-form .field { margin-bottom: 0; }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.plain-fieldset[disabled] { opacity: .75; }
.due-soon { color: var(--amber); } .due-over { color: var(--rust); font-weight: 600; }
.prio-urgent { color: var(--rust); font-weight: 700; }

/* --- Board ---------------------------------------------------------------- */
.filters, .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filters select, .filters input, .filter-bar select, .filter-bar input { width: auto; min-width: 150px; padding: 5px 8px; font-size: .9rem; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(216px, 1fr); gap: 12px; overflow-x: auto;
  padding-bottom: 12px; align-items: start; }
.column { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-m); min-height: 220px;
  display: flex; flex-direction: column; }
.column-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line); }
.column-head h2 { font-size: .98rem; }
.column-count { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.column.over { border-color: var(--amber); }
.column.over .column-count { color: var(--amber); font-weight: 700; }
.column.kind-done .column-head h2::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px;
  border-radius: 50%; background: var(--leaf); vertical-align: middle; }
.cards { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 120px; }
.column-foot { padding: 6px 10px 10px; font-size: .82rem; color: var(--ink-2); }

.card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--tc, var(--t-task));
  border-radius: var(--radius-s); padding: 9px 10px 8px; box-shadow: var(--shadow-card); cursor: grab; }
.card:active { cursor: grabbing; }
.card a.card-title { color: var(--ink); text-decoration: none; font-weight: 700; display: block; line-height: 1.35; }
.card a.card-title:hover { color: var(--bluetree); text-decoration: underline; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 4px; }
.card-num { font-size: .8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lineage { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: .8rem; color: var(--ink-2); min-width: 0; }
.lineage svg { width: 12px; height: 12px; flex: none; color: var(--line-strong); }
.lineage span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .8rem; color: var(--ink-2); }
.card-meta .push { margin-left: auto; }
.points { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--bluetree-soft); color: var(--bluetree); font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--canopy);
  color: var(--canopy-ink); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.prio-high { color: var(--rust); font-weight: 700; }
.icon-inline { width: 14px; height: 14px; vertical-align: -2px; }
.card.sortable-ghost { opacity: .35; }
.card.sortable-chosen { box-shadow: 0 6px 18px rgba(16, 53, 77, .22); }
.card.closed a.card-title { color: var(--ink-2); }

.sprint-bar { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 14px; margin-bottom: 14px; }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; min-width: 120px; flex: 1; max-width: 320px; }
.progress > span { display: block; height: 100%; background: var(--leaf); border-radius: 3px; }

/* --- Backlog -------------------------------------------------------------- */
.backlog-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); min-height: 64px; }
.list-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); cursor: grab; background: var(--surface); }
.list-row:last-child { border-bottom: 0; }
.list-row::before { content: ""; align-self: stretch; background: var(--tc, var(--t-task)); }
.list-row .title a { color: var(--ink); font-weight: 700; text-decoration: none; }
.list-row .title a:hover { text-decoration: underline; color: var(--bluetree); }
.list-row input.pts { width: 58px; padding: 3px 6px; text-align: right; font-size: .88rem; }
.list-empty { padding: 18px; color: var(--ink-2); text-align: center; }
.sprint-box + .sprint-box { margin-top: 16px; }
.sprint-box .panel-head { margin-bottom: 8px; }

/* --- Structure tree: the signature element ---------------------------------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-left: 15px; padding-left: 18px; border-left: 2px solid var(--line-strong); }
.tree li { position: relative; }
.tree ul > li::before { content: ""; position: absolute; left: -18px; top: 21px; width: 14px; border-top: 2px solid var(--line-strong); }
.tree ul > li:last-child::after { content: ""; position: absolute; left: -20px; top: 22px; bottom: 0; width: 4px; background: var(--paper); }
.node { display: flex; align-items: center; gap: 12px; padding: 8px 12px; margin: 4px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); }
.node.container { border-left: 4px solid var(--tc); }
.node .title { flex: 1; min-width: 0; }
.node .title a { color: var(--ink); text-decoration: none; font-weight: 700; }
.node .title a:hover { color: var(--bluetree); text-decoration: underline; }
.node.leaf .title a { font-weight: 400; }
.node.closed .title a { color: var(--ink-3); text-decoration: line-through; }
.node .bar { width: 120px; }
.node .frac { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* --- Item detail ---------------------------------------------------------- */
.item-head { margin-bottom: 18px; }
.item-head h1 { margin-top: 6px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-2); }
.breadcrumbs svg { width: 12px; height: 12px; color: var(--line-strong); }
.prose { max-width: 75ch; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3 { margin: 1.1em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose pre { background: var(--surface-2); border: 1px solid var(--line); padding: 10px 12px; border-radius: var(--radius-s); overflow-x: auto; }
.prose blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.prose img { max-width: 100%; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { border: 1px solid var(--line); padding: 4px 8px; }
.prompt-box { border: 1px solid var(--line); border-left: 4px solid var(--bluetree); background: var(--bluetree-soft);
  border-radius: var(--radius-s); padding: 12px 16px; }
.prompt-box .prose { max-width: none; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .93rem; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; }

.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.attachment { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); overflow: hidden;
  display: flex; flex-direction: column; }
.attachment .preview { display: grid; place-items: center; background: var(--surface-2); aspect-ratio: 4 / 3; }
.attachment .preview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.attachment .preview .ext { font-family: var(--mono); font-size: .9rem; color: var(--ink-2); }
.attachment .meta { padding: 6px 8px; font-size: .8rem; display: flex; flex-direction: column; gap: 2px; }
.attachment .meta a { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment .meta form { margin: 0; }
.dropzone { border: 2px dashed var(--line-strong); border-radius: var(--radius-m); padding: 18px; text-align: center;
  color: var(--ink-2); background: var(--surface-2); cursor: pointer; }
.dropzone.drag { border-color: var(--bluetree); background: var(--bluetree-soft); color: var(--ink); }
.dropzone input { display: none; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(5, 15, 22, .82); }
dialog.lightbox img { max-width: 96vw; max-height: 88vh; display: block; }
dialog.lightbox .lb-bar { display: flex; justify-content: space-between; gap: 12px; color: #fff; padding: 8px 2px; }
dialog.lightbox .lb-bar a, dialog.lightbox .lb-bar button { color: #fff; }

.comment { border-top: 1px solid var(--line); padding: 12px 0; }
.comment-head { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: var(--ink-2); margin-bottom: 4px; }
.comment-head strong { color: var(--ink); }

/* adapt the editor (Quill) to the look */
.editor-wrap { border: 1px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface); }
.editor-wrap .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--line); font-family: var(--font); }
.editor-wrap .ql-container.ql-snow { border: 0; font-family: var(--font); font-size: 15px; min-height: 160px; }
.editor-wrap .ql-editor { min-height: 160px; }
.editor-wrap:focus-within { border-color: var(--bluetree); box-shadow: var(--focus); }
.ql-snow .ql-stroke { stroke: var(--ink-2); }
.ql-snow .ql-fill { fill: var(--ink-2); }
.ql-snow .ql-picker { color: var(--ink-2); }
.ql-editor.ql-blank::before { color: var(--ink-3); font-style: normal; }

/* --- Overview ------------------------------------------------------------- */
.repo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.repo-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; }
.repo-tile h2 a { color: var(--ink); text-decoration: none; }
.repo-tile h2 a:hover { color: var(--bluetree); text-decoration: underline; }
.repo-tile .owner { color: var(--ink-2); font-weight: 400; }
.repo-tile .desc { color: var(--ink-2); font-size: .9rem; margin: 0; }
.repo-stats { display: flex; gap: 18px; font-size: .88rem; color: var(--ink-2); }
.repo-stats strong { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.repo-links { display: flex; gap: 12px; font-size: .9rem; margin-top: auto; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 18px; }
.choice { position: relative; display: block; border: 2px solid var(--line); border-radius: var(--radius-m); padding: 16px;
  background: var(--surface); cursor: pointer; font-weight: 400; margin: 0; }
.choice input { position: absolute; opacity: 0; }
.choice:has(input:checked) { border-color: var(--bluetree); background: var(--bluetree-soft); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); }
.choice strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.choice .muted { font-size: .9rem; }

/* --- Dashboard ------------------------------------------------------------ */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 16px; }
.kpi .value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: .9rem; font-weight: 400; color: var(--ink-2); margin-left: 3px; }
.kpi .label { color: var(--ink-2); font-size: .88rem; margin-top: 4px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart .tick { fill: var(--ink-2); font-size: 12px; font-family: var(--font); }
.chart .bar { fill: var(--series-1); }
.chart .bar-accent { fill: var(--leaf); }
.chart .hit { fill: transparent; }
.chart .hit:hover { fill: var(--ink); fill-opacity: .04; }
.chart .line-series { fill: none; stroke: var(--series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .line-ideal { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .dot { fill: var(--series-1); stroke: var(--surface); stroke-width: 2; }
.chart .direct-label { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--font); }
.legend { display: flex; gap: 16px; font-size: .84rem; color: var(--ink-2); margin-bottom: 6px; }
.legend .key { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--series-1); vertical-align: middle; margin-right: 6px; }
.legend .key.ideal { border-top: 2px dashed var(--ink-3); }
.chart-table summary { cursor: pointer; font-size: .84rem; color: var(--ink-2); margin-top: 6px; }
.empty-note { color: var(--ink-2); padding: 24px 0; text-align: center; }
.tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--ink); color: var(--paper); padding: 5px 9px;
  border-radius: var(--radius-s); font-size: .82rem; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.wip-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; }
.wip-row .progress { grid-column: 1 / -1; max-width: none; }
.wip-row.over .progress > span { background: var(--amber); }
.run-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.run-dot { width: 14px; height: 14px; border-radius: 3px; background: var(--line-strong); display: inline-block; }
.run-dot.success { background: var(--leaf); }
.run-dot.failure { background: var(--rust); }
.run-dot.running, .run-dot.waiting { background: var(--bluetree); }

/* --- Pipelines ------------------------------------------------------------ */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; white-space: nowrap; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.status.success::before { background: var(--leaf); }
.status.failure::before { background: var(--rust); border-radius: 2px; }
.status.running::before, .status.waiting::before { background: var(--bluetree); }
.yaml { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px;
  font-family: var(--mono); font-size: .84rem; white-space: pre; overflow-x: auto; margin: 0; }
.cron-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* --- Sign-in --------------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-art { background: var(--canopy); color: var(--canopy-ink); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-art svg.tree-art { width: 100%; max-width: 440px; height: auto; }
.login-art p { color: var(--canopy-ink-2); max-width: 42ch; }
.login-form { display: grid; place-items: center; padding: 32px; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { margin-bottom: 8px; }
.login-card .btn { width: 100%; justify-content: center; padding: 10px 14px; margin-top: 12px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: .86rem; margin: 22px 0 6px; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

.toast-stack { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius-s); max-width: 360px; font-size: .9rem; }
.toast.warn { background: var(--amber); color: #fff; }
.toast.err { background: var(--rust); color: #fff; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: column; gap: 12px; }
  .side-foot { margin-top: 0; }
  .two-col, .backlog-grid { grid-template-columns: 1fr; }
  .main { padding: 18px 16px 40px; }
  .login-wrap { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.prose > :first-child { margin-top: 0; }
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.3em; }
.prose li > input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -1px; }

/* --- Language --------------------------------------------------------------- */
.lang-form { display: flex; align-items: center; gap: 6px; }
.lang-form svg { width: 16px; height: 16px; opacity: .8; flex: none; }
.lang-form select { width: auto; flex: 1; padding: 4px 8px; font-size: .84rem; background: rgba(255, 255, 255, .06);
  color: inherit; border-color: rgba(255, 255, 255, .18); }
.lang-form select option { color: var(--ink); background: var(--surface); }
.lang-switch { display: flex; justify-content: center; gap: 14px; margin-top: 18px; font-size: .88rem; }
.lang-switch span[aria-current] { font-weight: 700; color: var(--ink); }
a.plain { color: inherit; text-decoration: none; }
a.plain:hover { text-decoration: underline; }
.notice-ok { background: var(--leaf-soft); border-left-color: var(--leaf); }
.notice-err { background: var(--rust-soft); border-left-color: var(--rust); }
.tree-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.notice-ok code { font-size: 1rem; user-select: all; }

/* --- Version 2: projects, fields, views, search, code ----------------------------------------- */
.key-badge { display: inline-block; font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  padding: 1px 6px; border-radius: var(--radius-s); background: var(--bluetree-soft); color: var(--bluetree); vertical-align: 1px; }
.side-sub { font-size: .8rem; padding: 2px 8px 2px 36px; color: var(--canopy-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sub a { color: inherit; text-decoration: none; }
.side-sub a:hover { color: #fff; text-decoration: underline; }
.side-search { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0 8px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-s); }
.side-search svg { width: 16px; height: 16px; opacity: .75; flex: none; }
.side-search input { background: transparent; border: 0; color: inherit; padding: 7px 0; width: 100%; font: inherit; font-size: .88rem; }
.side-search input::placeholder { color: var(--canopy-ink-2); }
.side-search input:focus { outline: none; box-shadow: none; }
.side-search:focus-within { border-color: #7cc0ea; box-shadow: 0 0 0 2px rgba(124, 192, 234, .35); }
.qs-results { position: fixed; z-index: 50; left: 0; top: 0; width: 420px; max-width: calc(100vw - 24px);
  list-style: none; margin: 0; padding: 4px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius-m); box-shadow: 0 12px 32px rgba(10, 30, 45, .25); max-height: calc(100vh - 120px); overflow-y: auto; }
.qs-results li a { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; padding: 7px 9px; border-radius: var(--radius-s);
  color: inherit; text-decoration: none; }
.qs-results li.active a, .qs-results li a:hover { background: var(--bluetree-soft); }
.qs-results code { font-size: .8rem; color: var(--bluetree); font-weight: 700; }
.qs-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-meta { grid-column: 2; font-size: .78rem; color: var(--ink-3); }
.qs-empty { padding: 8px 10px; color: var(--ink-3); }
.qs-more a { display: block !important; font-size: .82rem; color: var(--bluetree) !important; border-top: 1px solid var(--line); margin-top: 4px; }
mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) mark { background: #6b5310; } }

.view-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 14px; }
.view-tabs a { padding: 7px 12px; border-radius: var(--radius-s) var(--radius-s) 0 0; color: var(--ink-2); text-decoration: none;
  border: 1px solid transparent; border-bottom: 0; display: inline-flex; gap: 6px; align-items: center; }
.view-tabs a[aria-current] { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 700; margin-bottom: -1px; }
.table-scroll { overflow-x: auto; position: relative; } /* contains visually hidden labels of wide tables on phones */
table.view-table th, table.view-table td { padding-left: 12px; white-space: nowrap; }
table.view-table td:nth-child(n) { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
table.view-table th a { color: inherit; }
.group-row th { background: var(--surface-2); padding: 8px 12px !important; font-size: .9rem; }
.view-pick select { min-width: 160px; }

.two-col.even { grid-template-columns: 1fr 1fr; }
.sub-panel { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; background: var(--surface-2); margin-top: 10px; }
.small-head { font-size: .92rem; margin: 0 0 8px; color: var(--ink-2); }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.check-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.req { color: var(--rust); }
.prewrap { white-space: pre-wrap; }
.cf-group { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
fieldset.field { border: 0; padding: 0; margin: 0 0 14px; }
fieldset.field legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.toc { margin: -6px 0 16px; color: var(--ink-3); }
.drag-handle { cursor: grab; color: var(--ink-3); user-select: none; width: 18px; letter-spacing: -.35em; }
.danger-zone { border-color: var(--rust-soft); }
.btn-danger { color: var(--rust); }

.pick-list { list-style: none; margin: 0; padding: 6px; min-height: 120px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius-m); background: var(--surface-2); }
.pick-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 3px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); }
.pick-list li button { margin-left: auto; }
.pick-list.available li { opacity: .85; }
.cond-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.sort-row { grid-template-columns: 2fr 1fr; }

.card-field { font-size: .78rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-ref { font-family: var(--mono); font-size: .85em; font-weight: 700; text-decoration: none; padding: 0 4px;
  border-radius: var(--radius-s); background: var(--bluetree-soft); }

.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 4px 0 10px 16px; font-size: .9rem; display: grid; grid-template-columns: 150px 120px 1fr; gap: 8px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong); }
.timeline li.tl-commit::before, .timeline li.tl-code_edit::before, .timeline li.tl-pr_opened::before { border-color: var(--bluetree); }
.timeline li.tl-pr_merged::before { border-color: var(--leaf); background: var(--leaf); }
.timeline li.tl-review::before { border-color: var(--t-epic); }
.timeline time { color: var(--ink-3); font-size: .82rem; }
.timeline .tl-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.timeline ul { margin: 2px 0 0; padding-left: 18px; }
.review { border-left: 3px solid var(--line-strong); padding: 6px 12px; margin: 0 0 10px; background: var(--surface-2); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.review-approved { border-left-color: var(--leaf); }
.review-changes_requested { border-left-color: var(--rust); }
.review-form summary { cursor: pointer; color: var(--bluetree); }
.people { list-style: none; margin: 0; padding: 0; }
.people li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.people li:last-child { border-bottom: 0; }
.ok-text { color: var(--leaf); }
.err-text { color: var(--rust); }
.details-dialog { width: min(760px, 94vw); max-height: 86vh; border: 1px solid var(--line-strong); border-radius: var(--radius-m);
  background: var(--surface); color: var(--ink); padding: 18px; }
.details-dialog::backdrop { background: rgba(10, 25, 35, .45); }
.details-table th { width: 34%; white-space: nowrap; }
.details-table td { word-break: break-word; font-family: var(--mono); font-size: .82rem; }

.search-results { list-style: none; padding: 0; margin: 0; }
.search-results li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sr-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.02rem; }
.sr-head a { text-decoration: none; }
.sr-head code { color: var(--bluetree); font-weight: 700; }
.sr-snippet { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }

/* Code, Branches, Diff */
.code-crumbs { margin-top: 4px; font-family: var(--mono); font-size: .9rem; }
.code-crumbs span { color: var(--ink-3); }
.last-commit { margin: 0 0 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
table.file-list td { padding-left: 14px; }
table.file-list a { display: inline-flex; gap: 6px; align-items: center; }
.file-head { display: flex; gap: 14px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.file-head input { flex: 1; font-family: var(--mono); }
.code-layout { grid-template-columns: minmax(0, 1fr) 360px; }
.CodeMirror { font-family: var(--mono); font-size: 13.5px; height: auto; min-height: 120px; border-radius: 0 0 var(--radius-m) var(--radius-m); }
.CodeMirror-gutters { background: var(--surface-2); border-right: 1px solid var(--line); }
.cm-s-gbt-dark.CodeMirror { background: #111b22; color: #dbe6ea; }
.cm-s-gbt-dark .CodeMirror-gutters { background: #15212a; border-color: #2a3a44; }
.cm-s-gbt-dark .CodeMirror-linenumber { color: #63778a; }
.cm-s-gbt-dark .CodeMirror-cursor { border-left-color: #e5edef; }
.cm-s-gbt-dark .CodeMirror-selected, .cm-s-gbt-dark .CodeMirror-focused .CodeMirror-selected { background: #23445e; }
.cm-s-gbt-dark .CodeMirror-activeline-background { background: #18252f; }
.cm-s-gbt-dark .cm-keyword { color: #c99cff; } .cm-s-gbt-dark .cm-string { color: #9fd59f; }
.cm-s-gbt-dark .cm-number { color: #f2b56b; } .cm-s-gbt-dark .cm-comment { color: #7f939c; font-style: italic; }
.cm-s-gbt-dark .cm-def, .cm-s-gbt-dark .cm-variable-2 { color: #7cc0ea; } .cm-s-gbt-dark .cm-property, .cm-s-gbt-dark .cm-attribute { color: #8fd3e8; }
.cm-s-gbt-dark .cm-builtin, .cm-s-gbt-dark .cm-atom { color: #f2b56b; } .cm-s-gbt-dark .cm-tag { color: #ef7b70; }
.cm-s-gbt-dark .cm-meta, .cm-s-gbt-dark .cm-qualifier { color: #b6c4ca; } .cm-s-gbt-dark .cm-header { color: #7cc0ea; }
.CodeMirror-activeline-background { background: #f3f8fb; }
.CodeMirror-dialog { background: var(--surface-2); color: var(--ink); }

table.data.branch-table td, table.data.branch-table th, table.data.file-list td { padding-left: 14px; }
.branch-table .actions, table.data td.actions { white-space: nowrap; text-align: right; }
table.data td.actions form { display: inline; margin-left: 10px; }
.ab-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--line); vertical-align: middle; overflow: hidden; }
.ab-bar span { display: block; height: 100%; background: var(--bluetree); }
table.graph { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.graph td { padding: 0 10px 0 0; height: 30px; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.graph td.graph-col { padding: 0 6px 0 12px; width: 1%; border-bottom: 0; line-height: 0; }
.graph-cell { display: block; }
.graph-msg { max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graph-meta { white-space: nowrap; }
.branch-tag { display: inline-block; font-family: var(--mono); font-size: .74rem; font-weight: 700; border: 1.5px solid; border-radius: 10px;
  padding: 0 7px; margin-right: 6px; background: var(--surface); }
.add { color: var(--leaf); font-weight: 700; } .del { color: var(--rust); font-weight: 700; }
.diff-file { border: 1px solid var(--line); border-radius: var(--radius-m); margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.diff-file > summary { cursor: pointer; padding: 8px 12px; background: var(--surface-2); display: flex; gap: 10px; align-items: center; }
.diff-stat { margin-left: auto; font-size: .82rem; font-family: var(--mono); }
.diff-added { background: var(--leaf-soft); color: var(--leaf); } .diff-removed { background: var(--rust-soft); color: var(--rust); }
.diff-renamed { background: var(--bluetree-soft); color: var(--bluetree); }
table.diff { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; }
table.diff td { padding: 0 8px; white-space: pre; vertical-align: top; }
table.diff td.ln { width: 1%; color: var(--ink-3); text-align: right; user-select: none; border-right: 1px solid var(--line); }
table.diff tr.add td.code-line { background: var(--leaf-soft); }
table.diff tr.del td.code-line { background: var(--rust-soft); }
table.diff tr.add td.ln { background: color-mix(in srgb, var(--leaf-soft) 70%, var(--surface)); }
table.diff tr.del td.ln { background: color-mix(in srgb, var(--rust-soft) 70%, var(--surface)); }
table.diff tr.hunk td { background: var(--bluetree-soft); color: var(--ink-2); padding: 3px 8px; }
table.diff .sign { display: inline-block; width: 1.2em; color: var(--ink-3); user-select: none; }
.commit-list li { display: flex; justify-content: space-between; gap: 12px; }
.commit-message { white-space: pre-wrap; font-family: var(--mono); font-size: .88rem; margin: 0; }
.compare-form span { color: var(--ink-3); }
.kpis-custom { margin-top: -6px; }

@media (max-width: 900px) {
  .two-col.even, .code-layout { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
  .qs-results { width: calc(100vw - 32px); }
  .cond-row { grid-template-columns: 1fr; }
}

/* Paging of long lists (views, structure, backlog) */
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
.list-more, .tree-more { padding: 8px 12px; }

/* --- Time tracking ------------------------------------------------------------------------------- */
table.data.time-grid th.is-today, table.data.time-grid td.is-today { background: var(--bluetree-soft); }
table.data.time-grid td.is-weekend, table.data.time-grid th.is-weekend { color: var(--ink-2); }
table.data.time-grid td, table.data.time-grid th { padding-left: 6px; }
table.data.time-grid tfoot th { border-top: 1px solid var(--line-strong); border-bottom: 0; padding-top: 8px; }
table.data tfoot th { border-top: 1px solid var(--line-strong); border-bottom: 0; }
.time-filters input[type=date] { min-width: 0; width: 150px; }
.activity-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.activity-row input[name=name] { flex: 1 1 200px; }
.check-row input { margin-right: 4px; }
.site-list { list-style: none; margin: 0; padding: 0; }
.site-list li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.site-list li:last-child { border-bottom: 0; }

/* --- Administration overview --------------------------------------------------------------------- */
.admin-section + .admin-section { margin-top: 22px; }
.admin-section h2 { font-size: 1rem; color: var(--ink-2); margin: 0 0 10px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.admin-tile { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 14px 16px; color: var(--ink); text-decoration: none; }
.admin-tile:hover { border-color: var(--bluetree); box-shadow: var(--focus); }
.admin-tile svg { width: 22px; height: 22px; flex: none; color: var(--bluetree); margin-top: 2px; }
.admin-tile strong { display: block; margin-bottom: 3px; }
.admin-tile span { color: var(--ink-2); font-size: .88rem; line-height: 1.4; }
.admin-back { font-size: .88rem; color: var(--ink-2); margin: -6px 0 14px; }
.admin-back a { color: var(--ink-2); }

/* --- 5.0: service management, infrastructure documentation, drawings --------------------------------- */
:root { --t-incident: #c0392b; --t-request: #2f7fae; --t-problem: #9a5a2c; --t-change: #6f42c1; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { --t-incident: #ef7b70; --t-request: #5aa3d2; --t-problem: #d39a6a; --t-change: #a98be8; }
}
.t-incident { --tc: var(--t-incident); } .t-request { --tc: var(--t-request); }
.t-problem { --tc: var(--t-problem); } .t-change { --tc: var(--t-change); }
.t-incident.type::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.t-change.type::before { border-radius: 50%; }
.nowrap { white-space: nowrap; }
.sla { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--leaf-soft); color: var(--leaf); white-space: nowrap; }
.sla-soon { background: var(--amber-soft); color: var(--amber); }
.sla-breached { background: var(--rust-soft); color: var(--rust); }
.sla-met { background: var(--leaf-soft); color: var(--leaf); }
.sla-none { background: transparent; color: var(--ink-3); }
tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
tr.is-soon td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.ticket-table td { vertical-align: top; }
.sev-critical, .risk-high { background: var(--rust-soft); color: var(--rust); border-color: transparent; }
.sev-high, .risk-medium { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.risk-low { background: var(--leaf-soft); color: var(--leaf); border-color: transparent; }
.sub-tabs { margin-top: -6px; }
.sub-tabs a { font-size: .9rem; }
.choice-grid.compact { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0 0 8px; }
.choice-grid.compact .choice { padding: 8px 12px; }
.choice-grid.compact .choice strong { font-size: .95rem; margin: 0; }
.choice-grid.kinds { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.comment-public { border-left: 3px solid var(--bluetree); padding-left: 10px; }
.comment-customer { border-left-color: var(--leaf); }
.panel.narrow { max-width: 720px; }
.small-head { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); margin: 14px 0 6px; }
.spinner { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong);
  border-top-color: var(--bluetree); animation: gbt-spin .9s linear infinite; vertical-align: -1px; }
@keyframes gbt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* AI analysis */
.ai-panel { border-top: 3px solid var(--t-change); }
.ai-summary { font-size: 1.02rem; }
.solutions { padding-left: 1.3em; margin: 0; }
.solutions li { margin-bottom: 6px; }
.solutions summary { cursor: pointer; }
.ai-meta { margin: 10px 0; }
.rate-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.rate-form input[type=text] { flex: 1; min-width: 180px; }
.stars { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars legend { float: left; width: 100%; margin-bottom: 2px; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars label { font-size: 1.5rem; line-height: 1; color: var(--line-strong); cursor: pointer; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #e0a100; }
.stars input:focus-visible + label { outline: 2px solid var(--bluetree); outline-offset: 2px; }
.ai-older { margin-top: 10px; }
.ai-older-row { border-top: 1px solid var(--line); padding: 6px 0; }

/* Knowledge base */
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { border-bottom: 1px solid var(--line); padding: 10px 0; }

/* Infrastructure */
.dep-tree { list-style: none; margin: 0; padding-left: 0; }
.dep-tree .dep-tree { padding-left: 22px; border-left: 1px dashed var(--line-strong); margin-left: 7px; }
.dep-tree li { padding: 3px 0; }
.dep-node { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dep-kind { font-size: .72rem; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.site-link { border-top: 1px solid var(--line); padding: 10px 0; }
.site-link-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.site-link-kind { font-size: .82rem; color: var(--leaf); font-weight: 700; }
.product-grid { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 16px; align-items: start; }
.product-grid:not(:has(.product-image)) { grid-template-columns: 1fr; }
.product-image img { width: 100%; height: auto; border-radius: var(--radius-s); background: #fff; border: 1px solid var(--line); }
.spec-table th { width: 40%; font-weight: 600; color: var(--ink-2); text-align: left; }
.secret-box { background: var(--surface-2, var(--paper)); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 10px 12px; font-family: var(--mono); overflow-wrap: anywhere; white-space: pre-wrap; user-select: all; }
.rack-table td.num:first-child { font-family: var(--mono); }
@media (max-width: 720px) { .product-grid { grid-template-columns: 1fr; } }

/* Drawings */
.diagram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.diagram-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.diagram-thumb { display: block; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-m); overflow: hidden; }
.diagram-thumb img { width: 100%; height: 100%; object-fit: contain; }
.diagram-tile:hover .diagram-thumb { border-color: var(--bluetree); }
.diagram-name { font-weight: 700; }
/* (5.x draw.io frame, kept for old bookmarks) */ .diagram-frame iframe { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius-m);
  background: #fff; }
.diagram-frame.editor iframe { height: calc(100vh - 150px); min-height: 520px; }
.diagram-img { max-width: 100%; height: auto; background: #fff; }
.diagram-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.diagram-editor-head .breadcrumbs { margin: 0; }
.diagram-status { font-size: .88rem; color: var(--ink-2); }
.diagram-status.ok { color: var(--leaf); }
.diagram-status.err { color: var(--rust); }

/* Support portal (contacts of the customers) */
.support-shell { min-height: 100vh; background: var(--paper); }
.support-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 24px; background: var(--canopy); color: var(--canopy-ink); }
.support-brand { color: var(--canopy-ink); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.support-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.support-nav a, .support-nav .link-button { color: var(--canopy-ink); }
.support-nav .muted { color: var(--canopy-ink-2, var(--canopy-ink)); }
.support-main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
.support-login { margin: 6vh auto 0; }


/* ===================================================================================================
   Version 5.1 – frame and components (light workbench)
   =================================================================================================== */
body { font-size: 14px; line-height: 1.55; font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1 { font-size: 1.55rem; font-weight: 750; letter-spacing: -.02em; }
h2 { font-size: 1.04rem; font-weight: 700; letter-spacing: -.005em; }
h3 { font-size: .95rem; font-weight: 700; }
a { color: var(--bluetree); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.muted { color: var(--ink-2); }
.small { font-size: .84rem; }

/* frame */
.shell { grid-template-columns: 252px minmax(0, 1fr); }
.workspace { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.sidebar { background: var(--side-bg); color: var(--ink); border-right: 1px solid var(--line); padding: 14px 10px 12px;
  gap: 16px; scrollbar-width: thin; }
.wordmark { color: var(--ink); font-weight: 800; font-size: 1.04rem; letter-spacing: -.02em; padding: 4px 8px 2px; gap: 10px; }
.wordmark svg { width: 28px; height: 28px; }
.side-section { gap: 1px; }
.side-heading { display: flex; align-items: center; justify-content: space-between; color: var(--ink-3); font-size: .76rem;
  font-weight: 650; padding: 6px 10px 4px; }
.side-add { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ink-3); }
.side-add:hover { background: var(--hover); color: var(--ink); }
.side-add svg { width: 14px; height: 14px; }
.side-link { gap: 10px; padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 550; font-size: .9rem;
  min-height: 32px; }
.side-link > span:not(.space):not(.side-count):not(.side-tag):not(.av) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.side-link svg { width: 17px; height: 17px; opacity: .7; }
.side-link:hover { background: var(--hover); color: var(--ink); }
.side-link[aria-current="page"] { background: var(--bluetree-soft); color: var(--bluetree); box-shadow: none; font-weight: 650; }
.side-link[aria-current="page"] svg { opacity: 1; }
.side-link[aria-current="true"] { color: var(--ink); font-weight: 650; }
.side-count { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.side-link[aria-current="page"] .side-count { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink); }
.side-tag { margin-left: auto; font-size: .68rem; font-weight: 650; color: var(--ink-3); }
.side-empty { color: var(--ink-3); font-size: .84rem; padding: 2px 10px; margin: 0; }
.side-more { font-size: .82rem; color: var(--ink-3); }
.side-project { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.side-space-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px; min-width: 0; }
.side-space-head .space { width: 32px; height: 32px; border-radius: 9px; font-size: .74rem; }
.side-space-head div { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-space-head strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-space-head div span { font-size: .74rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-space-head a { color: inherit; }
.side-repo-link { font-size: .82rem; }
.side-foot { margin-top: auto; gap: 1px; border-top: 1px solid var(--line); padding-top: 10px; font-size: inherit; }
.side-foot .side-link { font-size: .86rem; min-height: 30px; }

/* project color chip – the signature element */
.space { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 6px;
  background: hsl(var(--h, 225) 68% 54%); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .02em;
  line-height: 1; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) .space { background: hsl(var(--h, 225) 55% 48%); } }

/* collapsed navigation (icon rail) */
html[data-sidebar="collapsed"] .shell { grid-template-columns: 64px minmax(0, 1fr); }
html[data-sidebar="collapsed"] .sidebar { padding: 14px 8px; align-items: stretch; }
html[data-sidebar="collapsed"] .wordmark span,
html[data-sidebar="collapsed"] .side-heading,
html[data-sidebar="collapsed"] .side-link > span:not(.space):not(.av),
html[data-sidebar="collapsed"] .side-space-head div,
html[data-sidebar="collapsed"] .side-empty,
html[data-sidebar="collapsed"] .side-more { display: none; }
html[data-sidebar="collapsed"] .side-link { justify-content: center; padding: 7px 0; }
html[data-sidebar="collapsed"] .side-project { padding: 4px 0; border-radius: 10px; }
html[data-sidebar="collapsed"] .side-space-head { justify-content: center; padding: 4px 0 6px; }
html[data-sidebar="collapsed"] .wordmark { justify-content: center; padding: 4px 0; }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 58px;
  padding: 0 28px 0 16px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }
.top-search { position: relative; flex: 1; max-width: 560px; display: flex; align-items: center; gap: 8px; height: 38px;
  padding: 0 10px 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--ink-3); }
.top-search:focus-within { border-color: var(--bluetree); box-shadow: var(--focus); }
.top-search input { flex: 1; border: 0; background: transparent; padding: 0; height: 36px; font-size: .9rem; color: var(--ink); }
.top-search input:focus { box-shadow: none; outline: none; border: 0; }
.top-search svg { width: 16px; height: 16px; flex: none; }
kbd { font-family: var(--font); font-size: .72rem; font-weight: 700; color: var(--ink-3); border: 1px solid var(--line-strong);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; line-height: 18px; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 8px 3px 3px;
  border-radius: 999px; font-weight: 600; font-size: .88rem; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary:hover, .user-menu[open] summary { background: var(--hover); }
.user-menu summary img, .user-menu summary .avatar { width: 30px; height: 30px; border-radius: 50%; font-size: .72rem; }
.user-menu .menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 40; }
.menu-head { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu-head span { font-size: .8rem; color: var(--ink-3); }
.menu a, .menu-button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font: inherit; font-size: .9rem; background: none; border: 0; cursor: pointer; text-align: left; }
.menu a:hover, .menu-button:hover { background: var(--hover); }
.menu .lang-form { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; margin: 0; }
.menu .lang-form label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; font-size: .9rem; }
.menu .lang-form select { width: auto; flex: none; padding: 4px 8px; font-size: .84rem; background: var(--surface); color: var(--ink);
  border-color: var(--line-strong); }
.main { padding: 26px 32px 56px; flex: 1; }

/* page head */
.page-head { align-items: flex-end; margin-bottom: 20px; }
.page-head .lead { color: var(--ink-2); max-width: 72ch; font-size: .95rem; }
.breadcrumbs { font-size: .84rem; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--bluetree); }
.admin-back { font-size: .84rem; margin: -8px 0 16px; color: var(--ink-3); }
.admin-back a { color: var(--ink-2); text-decoration: none; }

/* messages */
.flash, .alert, .notice { border-left: 0; border-radius: 10px; padding: 11px 14px; border: 1px solid transparent; }
.flash { background: var(--leaf-soft); border-color: color-mix(in srgb, var(--leaf) 25%, transparent); }
.alert, .notice-err { background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 25%, transparent); }
.notice { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.notice-ok { background: var(--leaf-soft); border-color: color-mix(in srgb, var(--leaf) 25%, transparent); }
.toast { border-radius: 10px; box-shadow: var(--shadow-pop); }

/* controls */
.btn { gap: 7px; padding: 0 14px; height: 36px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-weight: 650; font-size: .88rem; box-shadow: var(--shadow-card); }
.btn:hover { border-color: var(--line-strong); background: var(--hover); }
.btn-primary { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--bluetree) 35%, transparent); }
.btn-primary:hover { background: var(--bluetree-strong); border-color: var(--bluetree-strong); filter: none; }
.btn-quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); font-weight: 550; }
.btn-quiet:hover { background: var(--hover); color: var(--ink); }
.btn-danger { color: var(--rust); }
.btn-danger:hover { background: var(--rust-soft); border-color: color-mix(in srgb, var(--rust) 35%, transparent); }
.btn-small { height: 30px; padding: 0 10px; font-size: .82rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
label { font-weight: 600; font-size: .86rem; margin-bottom: 5px; }
.check { font-weight: 400; font-size: .9rem; }
input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=search], input[type=password],
input[type=email], input[type=url], select, textarea { border-radius: 8px; border-color: var(--line-strong); padding: 8px 11px;
  font-size: .9rem; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
input[type=datetime-local] { width: 100%; font: inherit; color: var(--ink); border: 1px solid var(--line-strong); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--ink-3) 60%, var(--line-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--bluetree); box-shadow: var(--focus); }
.hint { font-size: .82rem; color: var(--ink-3); }
.dropzone { border-radius: 12px; border: 1.5px dashed var(--line-strong); background: var(--surface-2); }
.choice { border: 1.5px solid var(--line); border-radius: 12px; }
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--bluetree); background: var(--bluetree-soft); }
.choice strong { font-size: .98rem; }

/* surfaces */
.panel { border-radius: var(--radius-l); border-color: var(--line); padding: 20px 22px; box-shadow: var(--shadow-card); }
.panel + .panel { margin-top: 18px; }
.panel-head { align-items: center; margin-bottom: 14px; }
.panel h2 { font-size: 1.02rem; }
.panel > h2 { margin: 0 0 12px; }
.panel > .form-grid + h2, .panel > .field + h2 { margin-top: 22px; }
.sub-panel { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: var(--surface-2); }
.stack > * + * { margin-top: 18px; }
.two-col { gap: 22px; grid-template-columns: minmax(0, 1fr) 330px; }
.two-col.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.small-head { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 700; color: var(--ink-2); }

/* tables */
table.data { font-size: .9rem; }
table.data th { font-size: .76rem; font-weight: 650; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 8px 12px; }
table.data td { border-bottom: 1px solid var(--line); padding: 10px 12px; }
table.data tr > :first-child { padding-left: 10px; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--surface-2); }
table.data td a:not(.btn) { font-weight: 600; text-decoration: none; }
table.data td a:not(.btn):hover { text-decoration: underline; }
.panel > .table-scroll, .panel > table.data { margin: 0 -10px; }

/* chips and badges */
.badge { border: 0; border-radius: 6px; padding: 2px 8px; font-size: .74rem; font-weight: 650; background: var(--surface-2);
  color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.badge-ok, .badge-warn, .badge-err, .badge-info { box-shadow: none; }
/* version 15.1: the later .badge rule above overrode the colours – state badges keep their colour */
.badge.badge-ok { background: var(--leaf-soft); color: var(--leaf); }
.badge.badge-warn { background: var(--amber-soft); color: var(--amber); }
.badge.badge-err { background: var(--rust-soft); color: var(--rust); }
.badge.badge-info { background: var(--bluetree-soft); color: var(--bluetree); }
.key-badge { border-radius: 6px; font-size: .74rem; padding: 1px 6px; }
.avatar { background: var(--bluetree-soft); color: var(--bluetree); font-size: .66rem; font-weight: 800; }
.type { font-size: .78rem; font-weight: 600; }
.type::before { width: 8px; height: 8px; border-radius: 3px; }
.points { border-radius: 6px; }

/* tabs as a segmented control */
.view-tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; padding: 3px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 10px; margin: 0 0 16px; }
.view-tabs a { border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: .86rem; color: var(--ink-2); }
.view-tabs a:hover { color: var(--ink); background: var(--hover); }
.view-tabs a[aria-current] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(24, 32, 51, .1),
  0 0 0 1px var(--line); margin: 0; }
.sub-tabs { margin-top: -4px; }
.filters { gap: 8px; margin-bottom: 16px; }
.filters select, .filters input { height: 34px; padding: 4px 10px; border-radius: 8px; font-size: .86rem; }
.filters.compact { margin: 0; }

/* board: soft lanes, clean cards */
.board { gap: 14px; grid-auto-columns: minmax(250px, 1fr); }
.column { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.column-head { border-bottom: 0; padding: 12px 14px 6px; align-items: center; }
.column-head h2 { font-size: .86rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.column-head h2::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.column.kind-todo .column-head h2::before { background: var(--t-module); }
.column.kind-doing .column-head h2::before { background: var(--amber); }
.column.kind-review .column-head h2::before { background: var(--violet); }
.column.kind-done .column-head h2::before { background: var(--leaf); }
.column.kind-done .column-head h2::after { display: none; }
.column-count { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-weight: 700;
  font-size: .74rem; }
.cards { padding: 6px 10px 10px; gap: 8px; }
.card { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow-card);
  position: relative; }
.card::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--tc, var(--t-task)); }
.card:hover { border-color: var(--line-strong); }
.card a.card-title { font-weight: 650; font-size: .9rem; }
.card a.card-title:hover { color: var(--bluetree); text-decoration: none; }
.card-num { font-size: .74rem; font-weight: 600; }
.card-meta { gap: 10px; font-size: .78rem; }
.card.sortable-chosen { box-shadow: var(--shadow-pop); }
.list { border-radius: 12px; }
.list-row::before { border-radius: 0 3px 3px 0; }

/* dashboard numbers */
.kpi { border-radius: var(--radius-l); padding: 16px 18px; box-shadow: var(--shadow-card); }
.kpi .value { font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; }
.kpi .label { font-size: .82rem; color: var(--ink-3); font-weight: 550; }
.repo-tile, .admin-tile { border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.repo-tile:hover, .admin-tile:hover { border-color: var(--line-strong); }
.facts { font-size: .9rem; gap: 8px 16px; }
.facts dt { color: var(--ink-3); font-weight: 550; }
.comment { border-top-color: var(--line); }
.node { border-radius: 10px; }
.prompt-box { border-radius: 12px; border-left-width: 1px; border-color: color-mix(in srgb, var(--bluetree) 30%, transparent); }
.attachment { border-radius: 10px; }
.sprint-bar { border-radius: 12px; }
.qs-results { border-radius: 12px; box-shadow: var(--shadow-pop); border-color: var(--line); padding: 6px; }
.qs-results li a { border-radius: 8px; }
.tooltip { border-radius: 8px; }
.details-dialog, dialog.details-dialog { border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-pop); }

/* e-mail log */
.mail-created, .mail-reply, .mail-sent { background: var(--leaf-soft); color: var(--leaf); box-shadow: none; }
.mail-unassigned, .mail-processing { background: var(--amber-soft); color: var(--amber); box-shadow: none; }
.mail-failed { background: var(--rust-soft); color: var(--rust); box-shadow: none; }
.check-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-results li { display: flex; align-items: center; gap: 8px; }
.check-results li.ok svg { color: var(--leaf); }
.check-results li.fail svg { color: var(--rust); }
.steps { padding-left: 1.2em; margin: 0; display: grid; gap: 6px; color: var(--ink-2); }
.mail-body { font-size: .9rem; max-height: 70vh; overflow: auto; }

/* sign-in */
.login-art { background: var(--night); color: #dbe3ff; }
.login-art p { color: #a9b6e6; }
.login-art h1 span { color: #9fe0c6 !important; }
.login-card .btn { height: 42px; }

/* support portal */
.support-head { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); }
.support-brand { color: var(--ink); }
.support-nav a, .support-nav .link-button { color: var(--ink-2); font-weight: 600; }
.support-nav .muted { color: var(--ink-3); }

@media (max-width: 960px) {
  .shell, html[data-sidebar="collapsed"] .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 272px; height: 100vh; z-index: 50; transform: translateX(-100%);
    transition: transform .18s ease; box-shadow: var(--shadow-pop); }
  html[data-sidebar-open="1"] .sidebar { transform: none; }
  html[data-sidebar="collapsed"] .sidebar .side-link > span:not(.space):not(.av),
  html[data-sidebar="collapsed"] .sidebar .side-heading,
  html[data-sidebar="collapsed"] .sidebar .wordmark span { display: revert; }
  .topbar { padding: 0 14px 0 10px; gap: 8px; }
  .top-actions .btn span, .user-menu .user-name, .top-search kbd { display: none; }
  .top-actions .btn { padding: 0 10px; }
  .main { padding: 18px 16px 40px; }
  .two-col, .two-col.even, .backlog-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-sidebar-open="1"] body::after { content: ""; position: fixed; inset: 0; z-index: 40;
    background: rgb(15 20 35 / .38); }
}
.login-card .lang-switch { justify-content: flex-start; margin: 0 0 18px; }
@media (max-width: 960px) {
  html[data-sidebar="collapsed"] .sidebar .side-link { justify-content: flex-start; padding: 6px 10px; }
}

/* links: quiet in the interface, underlined in running text */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.prose a, .hint a, .lead a, p.small a { text-decoration: underline; }
.btn:hover, .side-link:hover, .view-tabs a:hover, .menu a:hover, .diagram-tile:hover, .card a.card-title:hover,
.repo-links a:hover, .wordmark:hover, .admin-tile:hover { text-decoration: none; }

/* overview tiles */
.tile-head { display: flex; gap: 12px; align-items: flex-start; }
.tile-head .space { width: 36px; height: 36px; border-radius: 10px; font-size: .78rem; }
.tile-head h2 { font-size: 1.02rem; }
.tile-head h2 a { color: var(--ink); }
/* data lists in panels: links stay quiet */
dl a, .meta-list a { text-decoration: none; }
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-3); margin-top: 2px; }
.repo-tile { gap: 12px; padding: 18px; }
.repo-stats strong { font-size: 1rem; font-weight: 750; }
.repo-links { gap: 4px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 10px; margin: auto -6px 0; }
.repo-links a { padding: 4px 8px; border-radius: 6px; color: var(--ink-2); font-weight: 600; font-size: .84rem; }
.repo-links a:hover { background: var(--hover); color: var(--ink); }

/* version in the navigation foot */
.side-version { display: block; padding: 8px 10px 0; font-size: .72rem; color: var(--ink-3); }
html[data-sidebar="collapsed"] .side-version { display: none; }
.ollama-state { margin-top: 6px; font-size: .84rem; padding: 6px 10px; border-radius: var(--radius-s); }
.ollama-state.ok { background: color-mix(in srgb, var(--leaf) 12%, transparent); color: var(--leaf); }
.ollama-state.err { background: color-mix(in srgb, var(--rust) 10%, transparent); color: var(--rust); }

/* agent work on the item (version 5.2) */
.agent-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.agent-run { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 4px;
  border-bottom: 1px solid var(--line); }
.agent-run:last-child { border-bottom: 0; }
.agent-run > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.run-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--ink-3); }
.run-done .run-dot { background: var(--leaf); }
.run-failed .run-dot, .verdict-changes_requested .run-dot { background: var(--rust); }
.run-running .run-dot { background: var(--bluetree); animation: run-pulse 1.4s ease-in-out infinite; }
@keyframes run-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .run-running .run-dot { animation: none; } }
.agent-mode { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .agent-mode { grid-template-columns: 1fr; } }

/* --- Version 6.0: hosts, services, tests, deployments ------------------------------------------------ */
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.host-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l, 14px); color: var(--ink); }
.host-card:hover { border-color: color-mix(in srgb, var(--bluetree) 40%, var(--line)); text-decoration: none; }
.host-card-head { display: flex; align-items: center; gap: 8px; }
.host-card-head .badge { margin-left: auto; }
.host-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.host-ok { background: var(--leaf); } .host-error { background: var(--rust); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form label { font-weight: 600; font-size: .9rem; }
form.inline { display: inline; }
.input-narrow { width: 9rem; min-width: 0; }
.kpi-inline { min-width: 140px; }
.suite-list { display: grid; gap: 2px; }
.suite { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 2px;
  border-bottom: 1px solid var(--line); }
.suite:last-child { border-bottom: 0; }
.suite-off { opacity: .6; }
.badge.test-passed { background: color-mix(in srgb, var(--leaf) 14%, transparent); color: var(--leaf); border-color: transparent; }
.badge.test-failed, .badge.test-error { background: color-mix(in srgb, var(--rust) 12%, transparent); color: var(--rust); border-color: transparent; }
.badge.test-running, .badge.test-queued { background: var(--bluetree-soft); color: var(--bluetree); border-color: transparent; }
.test-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.test-step details { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.test-step summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.test-step summary::-webkit-details-marker { display: none; }
.test-step .log-view { margin: 0 12px 10px; max-height: 420px; overflow: auto; }
.step-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 800; font-size: .8rem;
  background: var(--hover); color: var(--ink-2); flex: none; }
.step-passed .step-mark { background: color-mix(in srgb, var(--leaf) 16%, transparent); color: var(--leaf); }
.step-failed .step-mark, .step-error .step-mark { background: color-mix(in srgb, var(--rust) 14%, transparent); color: var(--rust); }
.step-failed details, .step-error details { border-color: color-mix(in srgb, var(--rust) 35%, var(--line)); }
.step-error { margin: 0 12px 12px; }
.step-error pre { white-space: pre-wrap; margin: 4px 0 0; color: var(--rust); }
.failed-case { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.failed-case:last-child { border-bottom: 0; }
.test-shot { max-width: 100%; max-height: 320px; border: 1px solid var(--line); border-radius: var(--radius-s); display: block; }
.ok-text { color: var(--leaf); }
.step-editor { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: step; }
.step-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--surface-2); }
.step-row textarea { grid-column: 1 / -1; font-family: var(--mono); font-size: .85rem; }
@media (max-width: 720px) { .suite { grid-template-columns: 1fr; } .step-row { grid-template-columns: 1fr; } }
.test-steps, .test-step, .test-step details, .failed-case { min-width: 0; }
.test-step .log-view, .failed-case .log-view { max-width: calc(100% - 24px); white-space: pre-wrap; overflow-wrap: anywhere; }
.step-row textarea { min-height: 64px; }
.notice-pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .86rem; }
aside .log-view { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 360px; overflow: auto; }
.inline-form select, .inline-form input { width: auto; flex: 0 1 auto; }


/* --- Drawing editor (version 6.1) ------------------------------------------------------------------------------- */
.ge-host { position: relative; }
.ge-host-full { height: calc(100vh - 128px); min-height: 520px; }
.ge-host-inline { height: 74vh; min-height: 500px; margin-bottom: 14px; }
.ge-host-view { height: 64vh; min-height: 360px; }
.ge { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface);
  overflow: hidden; }
.ge-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line);
  background: var(--surface); }
.ge-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--ink-2); cursor: pointer; list-style: none; }
.ge-btn::-webkit-details-marker { display: none; }
.ge-btn:hover { background: var(--hover); color: var(--ink); }
.ge-btn[aria-pressed="true"] { background: var(--bluetree-soft); color: var(--bluetree); }
.ge-btn:focus-visible, .ge-mini:focus-visible, .ge-pal-item:focus-visible, .ge-zoom:focus-visible { outline: none; box-shadow: var(--focus); }
.ge-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; }
.ge-spacer { flex: 1; }
.ge-save { margin-right: 6px; }
.ge-zoom { min-width: 58px; height: 32px; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .82rem;
  font-variant-numeric: tabular-nums; border-radius: var(--radius-s); cursor: pointer; }
.ge-zoom:hover { background: var(--hover); }
.ge-line-select { height: 32px; max-width: 170px; font-size: .84rem; padding: 0 6px; margin-left: 4px; }
.ge-status { position: absolute; z-index: 4; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid #e2e8f0; font-size: .8rem; color: #475569; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; pointer-events: none; }
.ge-status:empty { display: none; }
.ge-status.ok { color: #0b7a55; } .ge-status.error { color: #c0392b; border-color: #f5c2bd; } .ge-status.dirty { color: #a35f00; }
.ge-menu { position: relative; }
.ge-menu-body { position: absolute; z-index: 30; top: 36px; left: 0; min-width: 190px; padding: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); display: grid; }
.ge-menu-body button, .ge-menu-body a { text-align: left; padding: 7px 10px; border: 0; background: none; color: var(--ink); font: inherit;
  font-size: .9rem; border-radius: var(--radius-s); cursor: pointer; text-decoration: none; }
.ge-menu-body button:hover, .ge-menu-body a:hover { background: var(--hover); }
.ge-body { position: relative; flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr) var(--ge-insp-w, 286px); min-height: 0; }
.ge-view .ge-body { grid-template-columns: minmax(0, 1fr); }
.ge-panels-hidden .ge-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
.ge-panels-hidden .ge-palette, .ge-panels-hidden .ge-inspector { display: none; }
.ge-edit .ge-palette, .ge-inline .ge-palette { grid-column: 1; grid-row: 1; }
.ge-edit .ge-canvas-wrap, .ge-inline .ge-canvas-wrap { grid-column: 2; grid-row: 1; }
.ge-edit .ge-inspector, .ge-inline .ge-inspector { grid-column: 3; grid-row: 1; }
.ge-palette, .ge-inspector { overflow-y: auto; background: var(--surface); min-height: 0; }
.ge-palette { border-right: 1px solid var(--line); padding: 8px; }
.ge-inspector { border-left: 1px solid var(--line); padding: 12px 14px 20px; font-size: .9rem; position: relative; }
.ge-resize { position: absolute; top: 0; bottom: 0; right: calc(var(--ge-insp-w, 286px) - 4px); width: 8px; cursor: col-resize; z-index: 6; touch-action: none;
  background: transparent; border: 0; padding: 0; }
.ge-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.ge-resize:hover::after, .ge-resize:focus-visible::after, .ge-resizing .ge-resize::after { background: var(--bluetree); }
.ge-resizing, .ge-resizing * { cursor: col-resize !important; user-select: none; }
.ge-panels-hidden .ge-resize { display: none; }
.ge-pal-search { width: 100%; margin-bottom: 6px; }
.ge-pal { border-bottom: 1px solid var(--line); padding: 4px 0; }
.ge-pal > summary { cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--ink-2); padding: 6px 4px; list-style: none; }
.ge-pal > summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
.ge-pal[open] > summary::before { transform: rotate(90deg); }
.ge-pal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 2px 0 8px; }
.ge-pal-item { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 46px; padding: 4px 2px; border: 1px solid transparent;
  border-radius: var(--radius-s); background: #fff; cursor: grab; color: var(--ink); }
.ge-pal-item:hover { border-color: var(--bluetree); background: #f6f8ff; }
.ge-pal-label { font-size: .64rem; line-height: 1.15; text-align: center; color: #475569; max-width: 100%; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ge-canvas-wrap { position: relative; min-width: 0; min-height: 0; background: #f8fafc; overflow: hidden; }
.ge-canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; background: #ffffff; }
.ge-canvas:focus { outline: none; }
.ge-text-edit { position: absolute; z-index: 5; padding: 4px 6px; border: 2px solid var(--bluetree); border-radius: 4px; background: #fff;
  color: #0f172a; font-family: Helvetica, Arial, sans-serif; line-height: 1.25; resize: none; box-shadow: var(--shadow-pop); text-align: center; }
.ge-pop { position: absolute; z-index: 6; width: 250px; padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop); font-size: .86rem; display: grid; gap: 4px; }
.ge-pop[hidden], .ge-toast[hidden], .ge-text-edit[hidden], .ge-btn[hidden] { display: none; }
.ge-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 4px 0 0; }
.ge-pop dt { color: var(--ink-3); } .ge-pop dd { margin: 0; overflow-wrap: anywhere; }
.ge-toast { position: absolute; z-index: 7; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px;
  background: #0f172a; color: #fff; font-size: .86rem; box-shadow: var(--shadow-pop); max-width: 80%; }
.ge-toast.error { background: var(--rust); }
.ge-inspector h3 { font-size: 1rem; margin: 0 0 10px; }
.ge-inspector h4 { font-size: .8rem; color: var(--ink-2); margin: 16px 0 6px; }
.ge-field { display: grid; gap: 3px; margin-bottom: 8px; min-width: 0; }
.ge-field label { font-size: .76rem; color: var(--ink-2); font-weight: 600; }
.ge-field input, .ge-field select, .ge-field textarea { width: 100%; min-width: 0; font-size: .88rem; }
.ge-field textarea { font-family: inherit; resize: vertical; }
.ge-hint { display: block; font-size: .76rem; color: var(--ink-3); }
.ge-note { font-size: .82rem; background: var(--bluetree-soft); color: var(--ink); padding: 8px 10px; border-radius: var(--radius-s); }
.ge-row2, .ge-row3, .ge-row4 { display: grid; gap: 6px; }
.ge-row4 input { padding-left: 6px; padding-right: 4px; }
.ge-row2 { grid-template-columns: 1fr 1fr; } .ge-row3 { grid-template-columns: repeat(3, 1fr); } .ge-row4 { grid-template-columns: repeat(4, 1fr); }
.ge-style { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.ge-color { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px; font-size: .74rem; color: var(--ink-2); }
.ge-color span { grid-column: 1 / -1; font-weight: 600; }
.ge-color input[type=color] { width: 100%; height: 28px; padding: 0 2px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; }
.ge-toggles { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 10px; }
.ge-mini { min-width: 28px; height: 28px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.ge-mini:hover { border-color: var(--bluetree); color: var(--ink); }
.ge-mini[aria-pressed="true"] { background: var(--bluetree-soft); border-color: var(--bluetree); color: var(--bluetree); }
.ge-mini svg { width: 16px; height: 16px; }
.ge-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.ge-ref-current { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); margin-bottom: 6px;
  overflow-wrap: anywhere; }
.ge-ref-current.missing { border-color: var(--rust); background: var(--rust-soft); }
.ge-ref-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.ge-meta-row { display: grid; grid-template-columns: 1fr 1.3fr 28px; gap: 4px; margin-bottom: 4px; }
.ge-meta-row input { min-width: 0; font-size: .84rem; }
.ge-tips { padding-left: 18px; margin: 0; color: var(--ink-2); font-size: .84rem; display: grid; gap: 4px; }
.ge-dialog { width: min(560px, 92vw); max-height: 80vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.ge-dialog::backdrop { background: rgba(15, 23, 42, .35); }
.ge-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ge-dialog-head h3 { margin: 0; font-size: 1.02rem; }
.ge-dialog-body { padding: 14px 16px 18px; display: grid; gap: 10px; }
.ge-dialog-body input[type=search] { width: 100%; }
.ge-results { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; display: grid; gap: 2px; }
.ge-results li { display: flex; align-items: center; gap: 4px; }
.ge-results li > button:first-child { flex: 1; display: grid; gap: 1px; text-align: left; padding: 7px 10px; border: 1px solid transparent;
  border-radius: var(--radius-s); background: none; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ge-results li > button:first-child:hover { background: var(--hover); border-color: var(--line); }
.ge-results .ge-line-pick { gap: 6px; padding: 8px 10px; }
.ge-results .ge-line-pick input { width: 100px; }
.ge-error { color: var(--rust); }
.ge-keys { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ge-keys th { text-align: left; white-space: nowrap; padding: 5px 12px 5px 0; font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.ge-keys td { padding: 5px 0; }
.diagram-tile-wrap { display: grid; gap: 6px; align-content: start; }
.drawing-new { position: relative; }
.drawing-new > summary { list-style: none; }
.drawing-new > summary::-webkit-details-marker { display: none; }
.drawing-new-form { position: absolute; right: 0; z-index: 20; width: 300px; padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop); display: grid; gap: 4px; }
.ge-host { container-type: inline-size; }
@container (max-width: 1080px) {
  .ge-body { grid-template-columns: 188px minmax(0, 1fr) 0; }
  .ge-pal-grid { grid-template-columns: repeat(3, 1fr); }
  .ge-inspector { display: none; }
  .ge-has-selection .ge-inspector { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: var(--ge-insp-w, 280px); z-index: 8;
    box-shadow: var(--shadow-pop); }
  .ge-resize { display: none; z-index: 9; }
  .ge-has-selection .ge-resize { display: block; }
}
@container (max-width: 640px) {
  .ge-body { grid-template-columns: 0 minmax(0, 1fr) 0; }
  .ge-palette { display: none; }
  .ge-has-selection .ge-inspector { width: min(280px, 80%); }
  .ge-has-selection .ge-resize { display: none; }
}
@media (max-width: 700px) { .ge-host-full { height: calc(100vh - 160px); } }
.file-note { border-top: 1px solid var(--line); padding: 8px 0; }
.file-note:first-of-type { border-top: 0; }
.file-note > summary { cursor: pointer; }
.file-note-body { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 8px 0 2px; font-size: .9rem; }
.file-note-body dt { color: var(--ink-2); font-weight: 600; } .file-note-body dd { margin: 0; }
@media (max-width: 700px) { .file-note-body { grid-template-columns: 1fr; } }

/* --- API reference (version 6.1) -------------------------------------------------------------------------------- */
.api-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.api-nav { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: .9rem; }
/* version 17.1: the API reference is a window of its own – a bar with the downloads, the areas on the left */
.api-window { min-height: 100vh; background: var(--paper); }
.api-top { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 20px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.api-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.api-brand svg { width: 28px; height: 28px; flex: none; }
.api-top-links { display: flex; flex-wrap: wrap; gap: 6px; }
.api-window .api-layout { padding: 20px 24px 60px; max-width: 1500px; margin: 0 auto; }
.api-window .api-nav { top: 72px; max-height: calc(100vh - 88px); padding: 0 4px 0 2px; overflow-x: hidden; }
.api-nav-list > li > a { margin-left: 12px; }
.api-nav-list, .api-nav-list ul { grid-template-columns: minmax(0, 1fr); }
.api-nav-list li, .api-nav-list details { min-width: 0; }
.api-window .api-tag, .api-window .api-op { scroll-margin-top: 72px; }
.api-nav-list details > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 4px; }
.api-nav-list details > summary::-webkit-details-marker { display: none; }
.api-nav-list details > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--ink-2); transition: transform .15s; }
.api-nav-list details[open] > summary::before { transform: rotate(90deg); }
.api-nav-list details ul { margin: 2px 0 6px 14px; gap: 0; }
.api-nav-list details li a { display: block; font-size: .82rem; padding: 3px 6px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-nav a.is-current { background: var(--hover); color: var(--ink); font-weight: 600; }
.api-nav li[hidden] { display: none; }
.api-mini { display: inline-block; min-width: 38px; font: 700 .62rem var(--mono); color: #fff; background: #64748b; border-radius: 3px; text-align: center; padding: 1px 0; }
.api-mini.m-get { background: #1d6fd6; } .api-mini.m-post { background: #0b8a5f; } .api-mini.m-put { background: #a35f00; }
.api-mini.m-patch { background: #7a5af0; } .api-mini.m-delete { background: #c0392b; }
@media (prefers-reduced-motion: reduce) { .api-nav-list details > summary::before { transition: none; } }
.api-nav ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
.api-nav a { display: inline-block; padding: 4px 6px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.api-nav a:hover { background: var(--hover); }
.api-filter { width: 100%; }
.api-main { min-width: 0; display: grid; gap: 10px; }
.api-intro { font-size: .94rem; }
.api-tag { scroll-margin-top: 76px; display: grid; gap: 8px; }
.api-tag > h2 { margin: 18px 0 0; }
.api-tag > p { margin: 0 0 4px; }
.api-op { padding: 0; scroll-margin-top: 76px; }
.api-op > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.api-op > summary::-webkit-details-marker { display: none; }
.api-op[open] > summary { border-bottom: 1px solid var(--line); }
.api-method { min-width: 62px; text-align: center; padding: 2px 8px; border-radius: var(--radius-s); font: 700 .75rem var(--mono);
  color: #fff; background: #64748b; }
.api-method.m-get { background: #1d6fd6; } .api-method.m-post { background: #0b8a5f; } .api-method.m-put { background: #a35f00; }
.api-method.m-patch { background: #7a5af0; } .api-method.m-delete { background: #c0392b; }
.api-path { font-family: var(--mono); font-size: .88rem; overflow-wrap: anywhere; }
.api-summary { color: var(--ink-2); font-size: .9rem; }
.api-op-body { padding: 4px 16px 16px; }
.api-op-body h3 { font-size: .86rem; color: var(--ink-2); margin: 16px 0 6px; }
.api-fields td, .api-fields th { vertical-align: top; }
.api-req { color: var(--rust); font-weight: 700; }
.api-responses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.api-code { display: inline-block; min-width: 40px; font: 700 .78rem var(--mono); padding: 1px 6px; border-radius: 4px; background: var(--hover); }
.api-code.c2 { color: var(--leaf); } .api-code.c4 { color: var(--amber); } .api-code.c5 { color: var(--rust); }
.api-example p { margin: 8px 0 4px; font-size: .9rem; }
.api-pre { margin: 0; padding: 10px 12px; background: #0f172a; color: #e2e8f0; border-radius: var(--radius-s); font: .8rem/1.5 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto; }
.api-pre[hidden] { display: none; }
.api-try { margin-top: 16px; padding-top: 6px; border-top: 1px dashed var(--line); }
.api-try textarea { width: 100%; }
.api-try-field { max-width: 420px; }
.api-result { margin-top: 10px; }
@media (max-width: 900px) { .api-layout { grid-template-columns: 1fr; } .api-nav, .api-window .api-nav { position: static; max-height: none; }
  .api-window .api-layout { padding: 16px; } .api-top { padding: 10px 16px; } }

/* --- Version 7.0 ------------------------------------------------------------------------------------------------ */
.internal-notes { border-left: 3px solid var(--amber); }
.internal-note { padding: 8px 0; border-top: 1px solid var(--line); }
.internal-note:first-of-type { border-top: 0; }
.note-edit textarea, .note-new textarea { width: 100%; }
.kb-hint { border-left: 3px solid var(--violet); background: linear-gradient(0deg, var(--surface), var(--surface)); }
.inline-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ai-mark { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--violet-soft);
  color: var(--violet); vertical-align: middle; flex: none; }
.ai-mark svg { width: 12px; height: 12px; }
.totp-qr { display: block; width: 200px; height: 200px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  margin: 8px 0; }
.badge.intake-new, .badge.intake-analyzing { background: var(--bluetree-soft); color: var(--bluetree); }
.badge.intake-proposed { background: var(--amber-soft); color: var(--amber); }
.badge.intake-accepted { background: var(--leaf-soft); color: var(--leaf); }
.badge.intake-rejected { background: var(--hover); color: var(--ink-2); }
.filter-row { display: flex; gap: 8px; margin: 0 0 12px; }
.badge-ai { background: var(--violet-soft); color: var(--violet); }
.mydash { margin: 0 0 28px; }
.mydash-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.mydash-head h2 { margin: 0; font-size: 1.25rem; }
.mydash-head p { margin: 0; }
.mydash-calm { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.mydash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mydash-tile { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--surface);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); border-left: 4px solid var(--line-strong); }
.mydash-tile strong { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mydash-tile span { font-size: .84rem; color: var(--ink-2); }
.mydash-tile:hover { border-color: var(--bluetree); }
.tile-urgent, .tile-security, .tile-systems { border-left-color: var(--rust); }
.tile-sla { border-left-color: var(--amber); }
.tile-requests, .tile-approvals { border-left-color: var(--bluetree); }
.mydash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.mydash-grid .panel h3 { font-size: .95rem; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.mydash-grid .plain-list li { gap: 10px; }
.section-head { font-size: 1.1rem; margin: 6px 0 12px; }
.badge.sev-critical { background: var(--rust); color: #fff; } .badge.sev-high { background: var(--rust-soft); color: var(--rust); }
@media (max-width: 700px) { .mydash-grid { grid-template-columns: 1fr; } }
.mydash-grid > .panel { margin: 0; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin: 6px 0; }
/* 7.0: AI drafts of a project */
.draft-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.draft-chip { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--ink); text-decoration: none; }
.draft-chip:hover { border-color: var(--bluetree); }
.draft-chip.draft-queued, .draft-chip.draft-running { border-style: dashed; color: var(--ink-2); }
.draft-chip.draft-failed { border-color: var(--rust); }
.draft .ge-host-view { min-height: 360px; margin: 8px 0; }
.draft-body { margin-top: 8px; }
.draft-body > summary { cursor: pointer; font-weight: 600; }
.draft .row-actions { display: flex; gap: 6px; align-items: center; }
.draft .row-actions form { margin: 0; }
/* 7.0: small pop-up forms in page actions */
.menu-pop { position: relative; display: inline-block; }
.menu-pop > summary { list-style: none; }
.menu-pop > summary::-webkit-details-marker { display: none; }
.menu-pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(340px, 86vw); display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.menu-pop-body .field { display: grid; gap: 4px; margin: 0; font-size: .9rem; }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.row-actions form { margin: 0; }
/* 7.0: capture from photos */
.photo-drop { display: grid; place-items: center; gap: 8px; padding: 34px 18px; border: 2px dashed var(--line-strong); border-radius: var(--radius-l); text-align: center; background: var(--paper); cursor: pointer; }
.photo-drop:hover, .photo-drop.dragging { border-color: var(--bluetree); background: var(--bluetree-soft); }
.photo-drop input[type=file] { max-width: 100%; }
.photo-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-strip figure { margin: 0; display: grid; gap: 4px; font-size: .8rem; }
.photo-strip img { width: 132px; height: 132px; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--paper); }
.rec-table td { vertical-align: middle; }
.rec-table input[type=text] { width: 100%; min-width: 140px; }
.rec-table .rec-take { width: 34px; text-align: center; }
.rec-table tr.rec-empty td { color: var(--ink-2); }
.src-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .75rem; border: 1px solid var(--line); white-space: nowrap; }
.src-photo { background: var(--bluetree-soft); border-color: transparent; color: var(--bluetree-strong); }
.src-web { background: var(--violet-soft); border-color: transparent; color: var(--violet); }
.conf { font-size: .75rem; color: var(--ink-2); white-space: nowrap; }
.conf-low { color: var(--rust); }
/* 7.0: working time balance */
.balance-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.balance-head .kpis { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.balance-head .panel { margin: 0; }
@media (max-width: 900px) { .balance-head { grid-template-columns: 1fr; } }
.kpi-balance.is-plus .value { color: var(--canopy, var(--leaf)); }
.kpi-balance.is-minus .value { color: var(--rust); }
.vac-total { color: var(--ink-2); font-size: .9rem; }
.vac-total strong { font-size: 1.4rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.vac-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--leaf-soft); margin: 10px 0 12px; }
.vac-bar span { display: block; height: 100%; }
.vac-taken { background: var(--bluetree); }
.vac-planned { background: color-mix(in srgb, var(--bluetree) 40%, var(--surface)); }
.vac-left { background: var(--leaf-soft); border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent); }
.vac-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 8px; }
.vac-legend div { display: grid; gap: 2px; }
.vac-legend dt { font-size: .82rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.vac-legend dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vac-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ok-text { color: var(--canopy, var(--leaf)); }
.absence-form { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.badge.absence-vacation { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.badge.absence-sick, .badge.absence-accident { background: var(--rust-soft); color: var(--rust); }
.badge.absence-compensation { background: var(--amber-soft); }
/* 7.0: introduction tour and guides */
.tour-spot { position: fixed; z-index: 1200; border-radius: 10px; pointer-events: none; box-shadow: 0 0 0 3px var(--bluetree), 0 0 0 9999px rgba(10, 22, 40, .52); transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.tour-spot-none { left: 0; top: 0; width: 0; height: 0; box-shadow: 0 0 0 9999px rgba(10, 22, 40, .52); }
.tour-pop { position: fixed; z-index: 1201; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); padding: 16px 18px 14px; border-top: 4px solid var(--bluetree); outline: none; }
.tour-pop-head { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--ink-2); }
.tour-guide { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-title { font-size: 1.08rem; margin: 6px 0 6px; }
.tour-text { margin: 0 0 10px; line-height: 1.5; }
.tour-note { margin: 0 0 10px; font-size: .86rem; color: var(--bluetree-strong); background: var(--bluetree-soft); padding: 6px 9px; border-radius: var(--radius-s); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-nav { display: flex; gap: 6px; }
.tour-bar { position: fixed; z-index: 1201; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bluetree); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); padding: 12px 14px; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.help-btn { color: var(--ink-2); }
.help-dialog { width: min(560px, calc(100vw - 32px)); border: 0; border-radius: var(--radius-l); padding: 0; box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); }
.help-dialog::backdrop { background: rgba(10, 22, 40, .45); }
.help-dialog .help-ask { padding: 16px 18px; display: grid; gap: 10px; }
.help-dialog-head { display: flex; justify-content: space-between; align-items: center; }
.help-dialog-head h2 { font-size: 1.05rem; margin: 0; }
.help-ask input[type=text] { width: 100%; font-size: 1rem; padding: 10px 12px; }
.help-text { margin: 4px 0; }
.help-guides { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.help-guides li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.help-hero { max-width: 820px; }
.help-label { font-size: 1.15rem; font-weight: 700; display: block; margin-bottom: 8px; }
.help-row { display: flex; gap: 8px; }
.help-row input { flex: 1; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.guide-grid .panel { margin: 0; display: flex; flex-direction: column; }
.guide-card h2 { font-size: 1rem; }
.guide-steps { margin: 4px 0 12px; padding-left: 20px; font-size: .88rem; color: var(--ink-2); flex: 1; }
.support-login h1 { margin-bottom: 16px; }
.support-login { max-width: 520px; margin-left: auto; margin-right: auto; }
/* 8.0: workflows */
.wf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.wf-head h1 { margin: 2px 0 6px; }
.wf-status-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wf-status-row form { margin: 0; }
.badge-crit { background: var(--amber-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); }
.wf-lastruns { display: flex; gap: 4px; align-items: center; margin: 4px 0 8px; }
.wf-run-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--line-strong); }
.wf-run-dot.run-done { background: var(--leaf); } .wf-run-dot.run-failed { background: var(--rust); }
.wf-run-dot.run-waiting { background: var(--amber); } .wf-run-dot.run-running, .wf-run-dot.run-queued { background: var(--bluetree); }
.run-badge.run-done { background: var(--leaf-soft); color: var(--canopy, var(--leaf)); }
.run-badge.run-failed { background: var(--rust-soft); color: var(--rust); }
.run-badge.run-waiting { background: var(--amber-soft); color: var(--ink); }
.run-badge.run-running, .run-badge.run-queued { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.wf-editor { height: calc(100vh - 190px); }
.wf-field .wf-template, .wf-rule .wf-template, textarea.wf-template { font-family: var(--mono); font-size: .82rem; }
.wf-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 4px; }
.wf-checks { display: grid; gap: 2px; max-height: 180px; overflow: auto; padding: 4px 6px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.wf-kv-row, .wf-rule { display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px; margin-bottom: 4px; }
.wf-rule { grid-template-columns: 1fr auto 1fr auto; }
.wf-kv-row input, .wf-rule input, .wf-rule select { min-width: 0; }
.wf-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wf-vars code { display: block; white-space: pre-wrap; font-size: .76rem; color: var(--ink-2); background: var(--paper); padding: 6px; border-radius: var(--radius-s); }
.wf-critical { font-size: .84rem; background: var(--amber-soft); padding: 6px 9px; border-radius: var(--radius-s); }
.wf-problems { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 4px; font-size: .82rem; }
.wf-problem.wf-error { color: var(--rust); } .wf-problem.wf-warning { color: var(--ink-2); }
.wf-problem-go { all: unset; cursor: pointer; display: block; border-radius: 4px; padding: 2px 4px; margin: -2px -4px; }
.wf-problem-go:hover, .wf-problem-go:focus-visible { background: var(--surface-2, rgba(0,0,0,.05)); text-decoration: underline; }
.wf-problem-go:focus-visible { outline: 2px solid var(--bluetree); }
.wf-check-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ge-problem { pointer-events: all; }
.wf-howto { padding-left: 18px; font-size: .84rem; color: var(--ink-2); display: grid; gap: 4px; }
.wf-id { font-family: var(--mono); font-size: .72rem; }
.wf-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.wf-template-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; }
.wf-template-card:has(input:checked) { border-color: var(--bluetree); background: var(--bluetree-soft); }
.wf-template-card span { display: grid; gap: 2px; }
.wf-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.wf-step { padding: 8px 0 8px 14px; border-left: 3px solid var(--line); }
.wf-step.step-done { border-left-color: var(--leaf); } .wf-step.step-failed { border-left-color: var(--rust); }
.wf-step.step-waiting { border-left-color: var(--amber); }
.wf-step-msg { color: var(--ink-2); margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wf-approval { border-left: 4px solid var(--violet); }
.wf-version.is-active { border-left: 4px solid var(--leaf); }
.wf-attention { border-left: 4px solid var(--amber); }
.wf-run-view { height: 420px; }

/* --- Version 10.0: location bar, combobox, trees, unsaved-changes dialog ---------------------------------- */
/* elements hidden by the scripts stay hidden even when a class gives them a display value */
.breadcrumbs[hidden], .admin-back[hidden], .field[hidden], .check-grid[hidden], .pwgen[hidden], .tree ul[hidden],
.dep-tree ul[hidden], tr[hidden], textarea[hidden], .pw-history-values[hidden] { display: none !important; }
.location-bar { position: sticky; top: 58px; z-index: 20; display: flex; align-items: center; gap: 10px;
  margin: -26px -32px 18px; padding: 9px 32px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); min-height: 46px; }
.location-back { flex: none; gap: 4px; }
.location-back svg { width: 15px; height: 15px; }
.location-path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none;
  font-size: .92rem; min-width: 0; }
.location-path li { display: flex; align-items: center; min-width: 0; }
.location-path li + li::before { content: ""; width: 7px; height: 7px; margin: 0 9px 0 6px; flex: none;
  border-top: 1.6px solid var(--ink-3); border-right: 1.6px solid var(--ink-3); transform: rotate(45deg); }
.location-path a { color: var(--ink-2); text-decoration: none; padding: 3px 6px; border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.location-path a:hover { background: var(--hover); color: var(--bluetree); }
.location-path a:focus-visible { outline: none; box-shadow: var(--focus); }
.location-path .location-current, .location-path [aria-current="page"] { color: var(--ink); font-weight: 700; }
.location-path li.location-current > span { padding: 3px 8px; background: var(--bluetree-soft); border-radius: 6px;
  color: var(--bluetree-strong); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-path a[aria-current="page"] { background: var(--bluetree-soft); color: var(--bluetree-strong); }
@media (max-width: 960px) { .location-bar { margin: -18px -16px 14px; padding: 8px 16px; } }
@media (max-width: 600px) { .location-path li:not(:nth-last-child(-n+2)) { display: none; } }

.combo { position: relative; display: block; width: 100%; }
.filters .combo, .inline-form .combo, .form-row .combo { display: inline-block; width: auto; min-width: 200px; }
.combo-input { padding-right: 32px !important; }
.combo-select { position: absolute !important; inset: auto 0 0 0; width: 100% !important; height: 1px !important;
  opacity: 0; pointer-events: none; }
.combo-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 26px; height: 26px;
  border: 0; background: transparent; color: var(--ink-3); border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.combo-toggle:hover { background: var(--hover); color: var(--ink); }
.combo-toggle svg { width: 15px; height: 15px; }
.combo-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-pop); min-width: 220px; }
.combo-list [role=option] { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.combo-list [role=option].active { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.combo-list [role=option][aria-selected=true] { font-weight: 700; }
.combo-list [aria-disabled=true] { color: var(--ink-3); cursor: not-allowed; }
.combo-group { padding: 8px 10px 3px; font-size: .76rem; font-weight: 700; color: var(--ink-3); }
.combo-empty { padding: 8px 10px; color: var(--ink-3); font-size: .88rem; }

.tree-toolbar { display: flex; gap: 6px; justify-content: flex-end; margin: 0 0 8px; }
.tree-toggle { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; vertical-align: middle; }
.tree-toggle:hover { background: var(--hover); color: var(--ink); }
.tree-toggle:focus-visible { outline: none; box-shadow: var(--focus); }
.tree-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
.tree-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.tree-spacer { display: inline-block; width: 26px; }
li.tree-branch { list-style: none; }
@media (prefers-reduced-motion: reduce) { .tree-toggle svg { transition: none; } }

dialog.confirm-dialog { width: min(460px, 92vw); border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); padding: 20px 22px; }
dialog.confirm-dialog::backdrop { background: rgba(15, 23, 42, .4); }
dialog.confirm-dialog h2 { margin: 0 0 8px; font-size: 1.1rem; }
dialog.confirm-dialog p { margin: 0 0 14px; color: var(--ink-2); }
dialog.confirm-dialog .form-actions { flex-wrap: wrap; justify-content: flex-end; }

/* --- Version 10.0: password manager ------------------------------------------------------------------------- */
.pw-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .pw-layout { grid-template-columns: 1fr; } }
.pw-layout > .panel + .panel { margin-top: 0; }
.pw-vaults h2 { margin: 0 0 10px; font-size: 1rem; }
.pw-vault-list { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; padding: 0; list-style: none; }
.pw-vault-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.pw-vault-list li > .badge { margin-left: 32px; margin-bottom: 4px; }
.pw-vault-list li > a:first-child { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; padding: 7px 10px;
  border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92rem; min-width: 0; }
.pw-vault-list li > a:first-child:hover { background: var(--hover); }
.pw-vault-list a[aria-current="page"] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 700; }
.pw-vault-list .badge { font-weight: 400; font-size: .74rem; }
.pw-vault-list li.muted { padding: 4px 10px; }
.pw-new-vault { margin-bottom: 10px; }
.pw-new-vault[open] summary { margin-bottom: 10px; }
.pw-new-vault summary { list-style: none; width: fit-content; }
.pw-new-vault summary::-webkit-details-marker { display: none; }
.pw-rekey { margin-top: 6px; }
.pw-rekey .link-button { text-align: left; }
.pw-table td { vertical-align: middle; }
.copy-value { display: inline-block; max-width: 100%; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: copy; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.copy-value:hover { background: var(--hover); }
.copy-value:focus-visible { outline: none; box-shadow: var(--focus); }
.copy-value.copied { background: var(--leaf-soft); color: var(--leaf); }
.secret-mask { letter-spacing: .12em; color: var(--ink-3); }
.pw-secret { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pw-secret.revealed .copy-value { font-family: var(--mono); font-size: .9rem; background: var(--amber-soft); color: var(--ink); }
.pw-countdown { font-variant-numeric: tabular-nums; }
.pw-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 0 0 16px; }
.pw-fields dt { color: var(--ink-2); font-size: .86rem; padding-top: 3px; }
.pw-fields dd { margin: 0; min-width: 0; }
.pw-notes { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pw-notes li { padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.pw-earlier { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 6px 0 0; padding: 8px 10px;
  background: var(--amber-soft); border-radius: 8px; }
.pw-earlier dt { color: var(--ink-2); }
.pw-earlier dd { margin: 0; font-family: var(--mono); word-break: break-all; }
.input-group { display: flex; gap: 6px; align-items: center; }
.input-group input { flex: 1; min-width: 0; font-family: var(--mono); }
.pw-strength { min-height: 1.3em; margin-top: 4px; }
.pw-strength[data-level="weak"] { color: var(--rust); }
.pw-strength[data-level="fair"] { color: var(--amber); }
.pw-strength[data-level="strong"] { color: var(--leaf); }
.pwgen { margin-top: 10px; padding: 14px 16px; background: var(--surface-2); box-shadow: none; }
.pwgen input[type=range] { width: 100%; accent-color: var(--bluetree); }
.pwgen-preview { margin: 10px 0 4px; padding: 10px 12px; background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: 8px; font-family: var(--mono); font-size: .95rem; word-break: break-all; min-height: 2.6em; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 16px; margin-bottom: 8px; }
.check-row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-bottom: 10px; }
.check-row-inline .field { margin: 0; display: flex; align-items: center; gap: 8px; }
.check-row-inline select { width: auto; }
.vault-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px;
  max-height: 260px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.vault-choice-list .check-row { font-weight: 400; display: flex; gap: 6px; align-items: center; }
.vault-choice:has(input[value="none"]:checked) .vault-choice-list,
.vault-choice:has(input[value="all"]:checked) .vault-choice-list { opacity: .5; pointer-events: none; }
.form-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.form-row > input { flex: 1; min-width: 0; }
.field-label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: 5px; }
.pw-link-row input[name=link_title] { flex: 0 1 34%; }
.rate-pick-list { list-style: none; margin: 6px 0 12px; padding: 0; max-height: 420px; overflow: auto;
  border: 1px solid var(--line); border-radius: 8px; }
.rate-pick-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; }
.rate-pick-list li + li { border-top: 1px solid var(--line); }
.rate-pick-list li:has(input[type=checkbox]:checked) { background: var(--bluetree-soft); }
.rate-pick-list .check { margin: 0; flex: 1; }
.rate-pick-list input[type=number] { width: 110px; flex: none; text-align: right; }
.rate-pick-all { margin: 4px 0; }
.editor-wrap:has([data-editor-fallback]):not(.editor-ready) { display: none; }
.editor-tall .ql-container.ql-snow { min-height: 240px; }
.editor-wrap .ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.prose img { max-width: 100%; height: auto; border-radius: 6px; }
.pw-form .form-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pw-form .pw-password-field { grid-column: span 2; }
@media (max-width: 760px) { .pw-form .pw-password-field { grid-column: auto; } }
.pwgen .check-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pwgen fieldset { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 8px; }
.pwgen fieldset legend { width: 100%; }

/* --- Version 11.0: bell, notifications, favorites, technologies, list filter ------------------------------ */
.bell { position: relative; }
.bell-btn { position: relative; }
.bell-count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--rust); color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(380px, 92vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); }
.bell-panel[hidden], .bell-count[hidden] { display: none !important; }
.bell-head, .bell-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; }
.bell-head { border-bottom: 1px solid var(--line); }
.bell-foot { border-top: 1px solid var(--line); font-size: .86rem; justify-content: center; }
.bell-list { list-style: none; margin: 0; padding: 4px; max-height: 420px; overflow: auto; }
.bell-list li.muted { padding: 14px; text-align: center; }
.notify-list { list-style: none; margin: 0; padding: 0; }
.notify-list li + li { border-top: 1px solid var(--line); }
.bell-list a, .notify-list a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; }
.bell-list a:hover, .notify-list a:hover { background: var(--hover); }
.bell-list li.unread a, .notify-list li.unread a { background: var(--bluetree-soft); }
.bell-list li.unread .notify-title::before, .notify-list li.unread .notify-title::before { content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--bluetree); vertical-align: middle; }
.notify-title { font-weight: 600; font-size: .9rem; }
.notify-body { color: var(--ink-2); font-size: .84rem; }
.notify-meta { color: var(--ink-3); font-size: .76rem; }
.notify-matrix td.center, .notify-matrix th.center { text-align: center; width: 120px; }
.notify-matrix .group-row th { background: var(--surface-2); font-size: .8rem; color: var(--ink-2); text-align: left; }
.channel-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.channel-list .row-actions { margin-left: auto; display: flex; gap: 6px; }
.channel-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; }
.channel-teams { background: #4b53bc; } .channel-zoom { background: #0b5cff; } .channel-linkedin { background: #0a66c2; }

.repo-tile { position: relative; }
.repo-tile.is-pinned { border-color: color-mix(in srgb, var(--bluetree) 45%, var(--line)); }
.pin-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.pin-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ink-3); cursor: pointer; vertical-align: middle; }
.pin-btn svg { width: 16px; height: 16px; }
.pin-btn:hover { background: var(--hover); color: var(--ink); }
.pin-btn.pinned { color: var(--bluetree); }
.pin-btn.pinned svg { fill: currentColor; }
.pin-btn:focus-visible { outline: none; box-shadow: var(--focus); }
tr .pin-btn { opacity: 0; } tr:hover .pin-btn, tr .pin-btn.pinned, tr .pin-btn:focus-visible { opacity: 1; }
.btn.is-pinned svg { fill: currentColor; color: var(--bluetree); }
.side-pin { margin-left: auto; color: var(--ink-3); display: inline-flex; }
.side-pin svg { width: 12px; height: 12px; fill: currentColor; }
.fav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fav-list li { display: flex; align-items: center; gap: 4px; }
.favorites-panel { margin-bottom: 16px; }

.tech-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.tech-chip { padding: 1px 8px; border-radius: 999px; background: var(--violet-soft); color: var(--violet); font-size: .76rem;
  font-weight: 600; text-decoration: none; }
.tech-chip:hover { background: var(--violet); color: #fff; }
.project-filters { margin-bottom: 14px; }

.list-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.list-filter-input { max-width: 320px; }
.list-filter-select { width: auto !important; max-width: 220px; }
.filter-hidden { display: none !important; }

.chip-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); cursor: text; }
.chip-input:focus-within { border-color: var(--bluetree); box-shadow: var(--focus); }
.chip-list { display: contents; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px;
  background: var(--violet-soft); color: var(--violet); font-size: .84rem; font-weight: 600; }
.chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px;
  border-radius: 50%; }
.chip-x:hover { background: color-mix(in srgb, var(--violet) 20%, transparent); }
.chip-input .chip-entry { flex: 1; min-width: 160px; border: 0 !important; box-shadow: none !important; padding: 4px !important;
  background: transparent; }
.pw-tag { display: inline-block; margin: 0 4px 2px 0; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600;
  color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag) 35%, transparent); text-decoration: none; white-space: nowrap; }
a.pw-tag:hover { background: var(--tag); color: #fff; }
.pw-tag-options { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pw-tag-option { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tag) 40%, var(--line)); color: var(--ink); font-weight: 500; font-size: .86rem;
  cursor: pointer; }
.pw-tag-option:has(input:checked) { background: color-mix(in srgb, var(--tag) 16%, transparent); border-color: var(--tag); }
.pw-tag-option input { accent-color: var(--tag); margin: 0; }
.pw-new-tags input[type=color], .tag-edit input[type=color] { width: 42px; height: 36px; padding: 2px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--surface); flex: none; }
.tag-edit { display: flex; gap: 6px; align-items: center; }
.tag-edit input[type=text] { max-width: 220px; }
.pw-match { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.pw-match-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px;
  background: var(--leaf-soft); color: var(--ink); font-size: .86rem; }
.pw-folder-list { list-style: none; margin: 0 0 8px; padding: 0; }
.pw-folder-list a { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; color: var(--ink);
  text-decoration: none; font-size: .9rem; }
.pw-folder-list a:hover { background: var(--hover); }
.pw-folder-list a[aria-current="page"] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 700; }
.pw-new-folder, .pw-edit-folder { margin: 4px 0 8px; }
.stack-form { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pw-tree ul { list-style: none; margin: 0 0 4px 16px; padding: 0; }
.pw-tree ul li { display: flex; align-items: center; gap: 4px; }
.pw-tree ul li > a:first-child { flex: 1; }
.notice-ok { border-color: color-mix(in srgb, var(--leaf) 40%, var(--line)); background: var(--leaf-soft); margin-bottom: 16px; }

/* --- Version 11.1: chat ------------------------------------------------------------------------------------------ */
.copy-ref-btn[hidden], .chat-picker[hidden], .chat-refs[hidden], .chat-extra[hidden], .chat-older[hidden],
.chat-empty[hidden], .chat-unread[hidden], .side-count[hidden] { display: none !important; }
.main:has(> .chat-layout) { padding-bottom: 16px; }
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; height: calc(100vh - 58px - 26px - 16px);
  min-height: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l);
  overflow: hidden; }
.chat-sidebar { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--side-bg); }
.chat-sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 10px;
  position: relative; }
.chat-sidebar-head h2 { margin: 0; font-size: 1.02rem; }
.chat-new > summary { list-style: none; }
.chat-new > summary::-webkit-details-marker { display: none; }
.chat-new-panel { position: absolute; z-index: 40; left: 10px; right: -220px; top: 52px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.chat-new-group { border-top: 1px solid var(--line); padding-top: 10px; }
.chat-list { list-style: none; margin: 0; padding: 4px 8px 12px; overflow: auto; flex: 1; }
.chat-sidebar .list-filter { margin: 0 8px 6px; }
.chat-list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--ink);
  text-decoration: none; font-size: .92rem; }
.chat-list a:hover { background: var(--hover); }
.chat-list a[aria-current="page"] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 700; }
.chat-list-icon svg { width: 18px; height: 18px; color: var(--ink-3); }
.chat-list-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-empty { padding: 10px; }
.chat-unread { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .74rem; font-weight: 700; text-align: center; line-height: 20px; }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-welcome { padding: 28px 32px; max-width: 70ch; }
.chat-task-list { padding-left: 18px; }
.chat-room { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); }
.chat-room-head h1 { margin: 0; font-size: 1.12rem; }
.chat-room-head p { margin: 2px 0 0; }
.chat-room-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chat-people { position: relative; }
.chat-people > summary { list-style: none; }
.chat-people > summary::-webkit-details-marker { display: none; }
.chat-people-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(360px, 90vw); max-height: 70vh;
  overflow: auto; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--shadow-pop); }
.chat-member-list { list-style: none; margin: 0 0 10px; padding: 0; }
.chat-member-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.chat-member-list li > a { font-weight: 600; }
.chat-channels { display: inline-flex; gap: 6px; font-size: .8rem; }
.chat-member-list .inline-form { margin-left: auto; display: inline-flex; gap: 8px; }
.chat-add-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; margin-bottom: 8px; position: relative; }
.chat-add-form label { grid-column: 1 / -1; font-size: .86rem; }
.chat-mute, .chat-leave { margin: 4px 0; }
.chat-stream { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 8px; background: var(--paper); }
.chat-older { display: block; margin: 0 auto 10px; }
.chat-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.chat-msg { max-width: min(760px, 92%); padding: 8px 12px 9px; border-radius: 12px; background: var(--surface);
  border: 1px solid var(--line); align-self: flex-start; overflow-wrap: anywhere; }
.chat-msg.is-mine { align-self: flex-end; background: var(--bluetree-soft);
  border-color: color-mix(in srgb, var(--brand) 22%, var(--line)); }
.chat-msg.is-target { box-shadow: var(--focus); }
.chat-kind-system { align-self: center; background: transparent; border: 0; color: var(--ink-3); font-size: .82rem; padding: 2px 8px; }
.chat-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.chat-author { font-weight: 700; font-size: .86rem; color: var(--ink); text-decoration: none; }
.chat-msg-tools { margin-left: auto; display: inline-flex; gap: 8px; opacity: 0; transition: opacity .12s; }
.chat-msg:hover .chat-msg-tools, .chat-msg:focus-within .chat-msg-tools { opacity: 1; }
@media (hover: none) { .chat-msg-tools { opacity: 1; } }
.chat-rich > :first-child { margin-top: 0; }
.chat-rich > :last-child { margin-bottom: 0; }
.chat-rich p { margin: 0 0 6px; }
.chat-rich ol li[data-list="bullet"] { list-style-type: disc; }
.chat-rich pre { background: var(--surface-2); padding: 8px 10px; border-radius: 8px; overflow-x: auto; font-family: var(--mono); font-size: .84rem; }
.chat-rich blockquote { margin: 4px 0; padding-left: 10px; border-left: 3px solid var(--line-strong); color: var(--ink-2); }
.chat-mention { padding: 0 3px; border-radius: 4px; background: var(--surface-2); color: var(--bluetree-strong); font-weight: 600; }
.chat-mention.is-me { background: var(--amber-soft); color: var(--amber); }
.chat-refs, .chat-refs-view { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-refs { margin: 0 0 6px; }
.chat-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; font-size: .86rem; }
a.chat-ref:hover { border-color: var(--brand); }
.chat-ref.is-denied { color: var(--ink-3); border-style: dashed; }
.chat-ref svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.chat-ref-type { font-size: .72rem; font-weight: 700; color: var(--ink-3); }
.chat-ref-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-ref-remove { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; font-size: 1rem; padding: 0 2px; }
.chat-task { display: flex; gap: 10px; align-items: flex-start; padding: 6px 8px; border-radius: 8px; background: var(--surface-2); }
.chat-task input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--leaf); }
.chat-task-text { display: flex; flex-direction: column; gap: 2px; }
.chat-task.is-done strong { text-decoration: line-through; color: var(--ink-3); }
.chat-poll { display: flex; flex-direction: column; gap: 6px; min-width: min(360px, 70vw); }
.chat-poll-option { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; text-align: left; font: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent) var(--pct, 0%), var(--surface) var(--pct, 0%)); }
.chat-poll-option.is-mine { border-color: var(--brand); font-weight: 600; }
.chat-poll-option:disabled { cursor: default; }
.chat-poll-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chat-table-wrap { overflow-x: auto; }
.chat-table { margin: 2px 0; font-size: .86rem; }
.chat-code { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.chat-code-bar { display: flex; justify-content: space-between; padding: 4px 10px; background: var(--surface-2); }
.chat-code pre { margin: 0; padding: 10px 12px; overflow-x: auto; font-family: var(--mono); font-size: .84rem;
  background: var(--surface); white-space: pre; }
.chat-composer { position: relative; padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer.is-editing { box-shadow: inset 3px 0 0 var(--amber); }
.chat-composer .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--line); padding: 0 0 6px; }
.chat-editor.ql-container.ql-snow { border: 0; font: inherit; height: auto; }
.chat-editor .ql-editor { min-height: 44px; max-height: 200px; overflow-y: auto; padding: 8px 2px; font-size: .95rem; }
.chat-editor .ql-editor.ql-blank::before { left: 2px; font-style: normal; color: var(--ink-3); }
.chat-plain { width: 100%; }
.chat-composer-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.chat-insert { display: flex; gap: 2px; }
.chat-hint { margin-left: auto; }
.chat-picker { list-style: none; margin: 0; padding: 4px; position: absolute; left: 14px; bottom: calc(100% - 4px); z-index: 50;
  width: min(440px, 92%); max-height: 280px; overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.chat-picker li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .9rem; }
.chat-picker li[aria-selected="true"], .chat-picker li:hover { background: var(--bluetree-soft); }
.chat-picker li svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.chat-picker-floating { position: absolute; left: 0; right: 0; top: 100%; bottom: auto; width: auto; }
.chat-new-panel .stack-form, .chat-add-form { position: relative; }
.chat-extra { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface-2); }
.chat-extra-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.chat-extra-body { display: flex; flex-direction: column; gap: 8px; }
.chat-extra-field { display: flex; flex-direction: column; gap: 3px; font-size: .86rem; margin: 0; }
.chat-poll-options { display: flex; flex-direction: column; gap: 6px; }
.chat-extra-check { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; margin: 0; }
.chat-extra-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.chat-table-edit { border-collapse: collapse; }
.chat-table-edit td { padding: 2px; }
.chat-table-edit input { min-width: 90px; }
.chat-code-input { font-family: var(--mono); font-size: .84rem; }
.chat-window { height: 100vh; display: flex; flex-direction: column; padding: 0; background: var(--surface); }
.chat-window .chat-room { height: 100vh; }
@media (max-width: 860px) {
  .chat-layout { grid-template-columns: 1fr; height: auto; min-height: calc(100vh - 120px); }
  .chat-layout.has-room .chat-sidebar { display: none; }
  .chat-layout.has-room .chat-room { height: calc(100vh - 120px); }
  .chat-hint { display: none; }
  .chat-new-panel { right: 10px; }
}

/* --- Version 11.2: infrastructure details, wizard, context menu ------------------------------------------------ */
code.wrap, .wrap { overflow-wrap: anywhere; word-break: break-word; }
.host-chain { margin: 4px 0 0; }
.sub-tree, .sub-tree ul { list-style: none; margin: 0; padding: 0; }
.sub-tree ul { margin-left: 22px; border-left: 1px dashed var(--line-strong); padding-left: 12px; }
.sub-tree li { padding: 4px 0; }
.sub-node { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sub-add { margin-top: 10px; }
.sub-add > summary, .port-tools .menu-pop > summary { list-style: none; }
.sub-add > summary::-webkit-details-marker { display: none; }
.sub-form { margin-top: 10px; align-items: end; }
.sub-form [hidden] { display: none !important; }
.port-table input, .port-table select { padding: 4px 6px; font-size: .84rem; min-height: 30px; }
.port-table .port-name { width: 7.5em; }
.port-table .port-speed { width: 4.5em; margin-top: 4px; }
.port-table .port-vlan { width: 4.5em; }
.port-table .port-tagged { width: 8em; }
.port-table td { vertical-align: top; }
.port-table form { display: inline-block; margin: 0 4px 4px 0; }
.port-peer { display: flex; flex-direction: column; gap: 4px; min-width: 11em; }
.port-row.port-trunk td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
.port-row.port-disabled { opacity: .6; }
.port-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.usage-line { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.usage-bar { display: inline-block; width: 64px; height: 6px; border-radius: 999px; background:
  linear-gradient(90deg, var(--brand) var(--pct, 0%), var(--surface-2) var(--pct, 0%)); border: 1px solid var(--line); }
.usage-line.big { margin-bottom: 10px; }
.usage-line.big .usage-bar { width: 220px; height: 10px; }
.bulk-preview { color: var(--ink-2); min-height: 1.4em; }
.wizard-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; }
.wizard-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .9rem; cursor: pointer; }
.wizard-steps button[aria-selected="true"] { border-color: var(--brand); color: var(--bluetree-strong); background: var(--bluetree-soft); font-weight: 700; }
.wizard-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
  font-size: .78rem; font-weight: 700; }
.wizard-steps li.done .wizard-num { background: var(--leaf); color: #fff; }
.wizard-steps button[aria-selected="true"] .wizard-num { background: var(--brand); color: #fff; }
.wizard-step[hidden], [data-wiz-newsite][hidden], [data-wiz-create][hidden], [data-wiz-next][hidden], .wizard-result[hidden] { display: none !important; }
.wiz-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wiz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-m); background: var(--surface-2); }
.wiz-row > label { display: flex; flex-direction: column; gap: 3px; font-size: .8rem; color: var(--ink-2); margin: 0; flex: 1 1 120px; }
.wiz-row > label input, .wiz-row > label select { min-width: 0; }
.wiz-sub { flex-basis: 100%; padding-left: 18px; border-left: 2px solid var(--line-strong); }
.wiz-vm { background: var(--surface); }
.wizard-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.wizard-summary { padding-left: 18px; }
.wizard-result.ok { color: var(--leaf); font-weight: 600; }
.wizard-result.err { color: var(--rust); font-weight: 600; }
.ctx-menu { position: fixed; z-index: 120; min-width: 200px; padding: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.ctx-menu button { text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink);
  font: inherit; font-size: .9rem; cursor: pointer; }
.ctx-menu button:hover, .ctx-menu button:focus-visible { background: var(--bluetree-soft); outline: none; }
.ctx-menu button.danger { color: var(--rust); }
/* Version 18.5: menus of scripts (icons, groups, lines) and the explicit confirmation */
.gbt-menu { display: flex; flex-direction: column; max-height: calc(100vh - 16px); overflow: auto; }
.gbt-menu button { display: flex; align-items: center; gap: 8px; }
.gbt-menu button:disabled { color: var(--ink-3); cursor: default; background: transparent; }
.gbt-menu .ctx-icon { width: 16px; height: 16px; flex: none; display: inline-grid; place-items: center; color: var(--ink-3); }
.gbt-menu .ctx-icon svg { width: 16px; height: 16px; }
.gbt-menu button.danger .ctx-icon { color: var(--rust); }
.gbt-menu [aria-checked="true"] .ctx-icon { color: var(--bluetree); }
.gbt-menu .ctx-hint { margin-left: auto; padding-left: 16px; color: var(--ink-3); font-size: .78rem; }
.ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); }
.ctx-group { padding: 6px 10px 2px; font-size: .74rem; font-weight: 650; color: var(--ink-3); }
.gbt-confirm { max-width: 440px; border: 1px solid var(--line); border-radius: var(--radius-l); padding: 20px 22px; }
.gbt-confirm h2 { margin: 0 0 8px; font-size: 1.1rem; }
.gbt-confirm p { margin: 0 0 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.gbt-confirm::backdrop { background: rgb(0 0 0 / .35); }
.ge-toast.warn { display: flex; align-items: center; gap: 12px; border-radius: 12px; background: #4a3207; padding: 10px 12px 10px 16px; }
.ge-toast.warn .btn { flex: none; }

/* --- Version 11.3: chats in the navigation, reactions, files, summary, providers, AI assistant ------------------ */
.side-chats .side-heading { display: flex; justify-content: space-between; align-items: center; }
.side-filter { margin: 2px 8px 4px; width: calc(100% - 16px); padding: 5px 8px; font-size: .84rem; }
.side-chat-list { list-style: none; margin: 0; padding: 0; max-height: calc(var(--rows, 15) * 36px); overflow-y: auto; }
.side-chat-list li { display: flex; align-items: center; position: relative; }
.side-chat-list li[hidden] { display: none; }
.side-chat-list li > .side-link { flex: 1; min-width: 0; padding-right: 30px; }
.side-chat-list li.is-dragging, .chat-list li.is-dragging { opacity: .45; }
.side-pin-btn, .chat-pin-btn { position: absolute; right: 6px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; opacity: 0; }
.side-pin-btn svg, .chat-pin-btn svg { width: 14px; height: 14px; }
.side-chat-list li:hover .side-pin-btn, .side-pin-btn:focus-visible, .side-pin-btn.is-pinned,
.chat-list li:hover .chat-pin-btn, .chat-pin-btn:focus-visible, .chat-pin-btn.is-pinned { opacity: 1; }
.side-pin-btn.is-pinned, .chat-pin-btn.is-pinned { color: var(--brand); }
.side-chat-list li:has(.side-count) .side-pin-btn { right: 40px; }
.chat-list li { position: relative; display: flex; align-items: center; }
.chat-list li > a { flex: 1; min-width: 0; padding-right: 34px; }
.chat-list li:has(.chat-unread:not([hidden])) .chat-pin-btn { right: 40px; }
.chat-list { max-height: none; }
.chat-sidebar-head h2 { flex: 1; }
.chat-navset { position: relative; }
.chat-navset > summary { list-style: none; }
.chat-navset > summary::-webkit-details-marker { display: none; }
.chat-navset-panel { left: 0; right: auto; width: 280px; max-width: calc(100vw - 32px); top: 40px; z-index: 60; } /* 16.0: opens to the right, never under the navigation */
.chat-navset-panel input { width: 90px; }
.chat-app-window { height: 100vh; padding: 0; background: var(--paper); }
.chat-app-window .chat-layout { height: 100vh; border-radius: 0; border: 0; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; position: relative; align-items: center; }
.chat-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font: inherit; font-size: .82rem; cursor: pointer; color: var(--ink); }
.chat-reaction.is-mine { border-color: var(--brand); background: var(--bluetree-soft); }
.chat-reaction-count { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.chat-reaction-add { border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-3); border-radius: 999px; width: 26px; height: 22px;
  cursor: pointer; font-size: .9rem; line-height: 1; opacity: 0; }
.chat-msg:hover .chat-reaction-add, .chat-reaction-add:focus-visible, .chat-reactions:has(.chat-reaction) .chat-reaction-add { opacity: 1; }
@media (hover: none) { .chat-reaction-add { opacity: 1; } }
.chat-emoji-pick { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 2px; width: 236px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.chat-emoji-pick button { border: 0; background: transparent; font-size: 1.15rem; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; }
.chat-emoji-pick button:hover, .chat-emoji-pick button:focus-visible { background: var(--bluetree-soft); }
.chat-emoji-pick input { flex: 1 1 100%; margin-top: 4px; padding: 4px 6px; font-size: .84rem; }
.chat-files-view { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-thumb img { display: block; max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.chat-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: .86rem; max-width: 100%; }
.chat-file svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.chat-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.chat-uploads { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.chat-uploads[hidden], .chat-files[hidden] { display: none !important; }
.chat-composer.is-drop { outline: 2px dashed var(--brand); outline-offset: -6px; }
.chat-room { position: relative; }
.chat-files { position: absolute; z-index: 20; top: 58px; right: 0; bottom: 0; width: min(360px, 90%); background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
@media (min-width: 1100px) {
  /* wide screens: the files sit beside the messages instead of covering them */
  .chat-room.has-files .chat-stream, .chat-room.has-files .chat-composer { margin-right: 360px; }
}
.chat-files-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-files-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.chat-files-item { display: flex; align-items: center; gap: 8px; }
.chat-files-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); text-align: left; font: inherit; cursor: pointer; color: var(--ink); }
.chat-files-open:hover { border-color: var(--brand); }
.chat-files-open img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex: none; }
.chat-files-ext { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2);
  font-size: .74rem; font-weight: 700; color: var(--ink-2); }
.chat-files-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-files-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.chat-preview { width: min(980px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface); color: var(--ink); }
.chat-preview::backdrop { background: rgba(10, 16, 30, .55); }
.chat-preview-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-preview-head strong { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-preview-body { padding: 12px; display: grid; place-items: center; max-height: calc(92vh - 60px); overflow: auto; }
.chat-preview-body img, .chat-preview-body video { max-width: 100%; max-height: calc(92vh - 90px); }
.chat-preview-body iframe { width: 100%; height: calc(92vh - 90px); border: 0; }
.chat-preview-text { width: 100%; white-space: pre-wrap; font-family: var(--mono); font-size: .84rem; margin: 0; }
.chat-summary { border-left: 3px solid var(--violet); padding-left: 10px; }
.chat-summary-head { font-size: .78rem; font-weight: 700; color: var(--violet); margin-bottom: 4px; }
.chat-kind-summary { max-width: min(860px, 96%); }
.chat-ai { position: relative; }
.chat-ai > summary { list-style: none; }
.chat-ai > summary::-webkit-details-marker { display: none; }
.chat-ai-panel { width: min(320px, 90vw); }
.chat-ai-panel .check { display: flex; gap: 6px; align-items: center; margin: 8px 0; font-size: .86rem; }

/* external providers */
.ext-status { position: relative; }
.ext-status[hidden], .ext-panel[hidden], .ext-item-body[hidden] { display: none !important; }
.ext-status-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.ext-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); flex: none; display: inline-block; }
.ext-status.is-down .ext-status-btn { border-color: color-mix(in srgb, var(--rust) 45%, var(--line)); color: var(--rust); font-weight: 600; }
.ext-status.is-down .ext-status-btn .ext-dot { background: var(--rust); animation: ext-pulse 1.6s ease-in-out infinite; }
.ext-status.is-maint .ext-status-btn .ext-dot { background: var(--amber); }
@keyframes ext-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rust) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rust) 0%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .ext-status.is-down .ext-status-btn .ext-dot { animation: none; } }
.ext-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(380px, 92vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-pop); }
.ext-list { list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow: auto; }
.ext-item-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ext-item-head:hover { background: var(--hover); }
.ext-item-head strong { flex: 1; }
.ext-item-body { padding: 0 8px 8px 25px; font-size: .86rem; }
.ext-item-body p { margin: 4px 0; }
.ext-degraded .ext-dot, .ext-row.ext-degraded .ext-dot { background: var(--amber); }
.ext-outage .ext-dot, .ext-row.ext-outage .ext-dot { background: var(--rust); }
.ext-maintenance .ext-dot { background: var(--violet); }
.ext-unknown .ext-dot { background: var(--ink-3); }
.ext-pill { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ext-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
@media (max-width: 760px) { .ext-label { display: none; } .ext-status-btn { padding: 0 10px; } }

/* AI assistant */
.ai-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: calc(100vh - 58px - 26px - 16px); min-height: 460px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.main:has(> .ai-layout) { padding-bottom: 16px; }
.ai-sidebar { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-right: 1px solid var(--line); background: var(--side-bg); min-height: 0; }
.ai-new { justify-content: center; }
.ai-filter { padding: 6px 8px; font-size: .86rem; }
.ai-sessions { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.ai-sessions li { display: flex; align-items: center; border-radius: 8px; }
.ai-sessions li[hidden] { display: none; }
.ai-sessions a { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 7px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.ai-sessions a:hover { background: var(--hover); }
.ai-sessions a[aria-current="page"] { background: var(--bluetree-soft); }
.ai-session-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.ai-session-del { opacity: 0; }
.ai-sessions li:hover .ai-session-del, .ai-session-del:focus-visible { opacity: 1; }
.ai-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.ai-title { flex: 1; margin: 0; font-size: 1.05rem; outline: none; border-radius: 6px; padding: 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-title[contenteditable]:focus { box-shadow: var(--focus); }
.ai-model { max-width: 240px; flex-shrink: 1; min-width: 0; }
@media (max-width: 600px) { .ai-model { max-width: 42%; } }
.ai-toggle { display: none; }
.ai-notice { margin: 12px 16px 0; padding: 10px 12px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-size: .9rem; }
.ai-stream { flex: 1; overflow-y: auto; padding: 18px 0; }
.ai-welcome { max-width: 720px; margin: 8vh auto 0; padding: 0 20px; text-align: center; }
.ai-welcome[hidden] { display: none; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ai-chip { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit;
  font-size: .88rem; cursor: pointer; max-width: 320px; text-align: left; }
.ai-chip:hover { border-color: var(--brand); }
.ai-messages { list-style: none; margin: 0 auto; padding: 0 20px; max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.ai-msg { display: flex; flex-direction: column; gap: 4px; }
.ai-user { align-items: flex-end; }
.ai-user .ai-bubble { background: var(--bluetree-soft); border-radius: 14px 14px 4px 14px; padding: 10px 14px; max-width: 85%; }
.ai-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-assistant .ai-bubble { width: 100%; }
.ai-md { overflow-wrap: anywhere; line-height: 1.6; }
.is-streaming .ai-md { white-space: pre-wrap; }
.ai-md pre { position: relative; background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 10px; overflow-x: auto; font-size: .86rem; }
.ai-md pre code { background: transparent; color: inherit; }
.ai-md table { border-collapse: collapse; margin: 8px 0; font-size: .9rem; }
.ai-md th, .ai-md td { border: 1px solid var(--line); padding: 4px 8px; }
.ai-md img { max-width: 100%; border-radius: 8px; }
.ai-copy-code { position: absolute; top: 6px; right: 6px; border: 0; border-radius: 6px; padding: 2px 8px; font-size: .74rem;
  background: rgba(255, 255, 255, .12); color: #e2e8f0; cursor: pointer; }
.ai-status { margin-bottom: 4px; }
.ai-status[hidden] { display: none; }
.ai-sources { margin-top: 8px; font-size: .86rem; }
.ai-sources ol { margin: 4px 0 0; padding-left: 20px; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; opacity: .55; }
.ai-msg:hover .ai-actions, .ai-actions:focus-within { opacity: 1; }
@media (hover: none) { .ai-actions { opacity: 1; } }
.ai-act { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .8rem; padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.ai-act:hover { background: var(--hover); color: var(--ink); }
.ai-act.is-on { background: var(--bluetree-soft); }
.ai-act.danger { color: var(--rust); }
.ai-act.primary { background: var(--brand); color: #fff; }
.ai-edit { width: 100%; min-width: min(560px, 70vw); }
.ai-edit-bar { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.ai-composer { display: flex; gap: 8px; align-items: flex-end; max-width: 820px; width: calc(100% - 40px); margin: 0 auto; padding: 10px;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); }
.ai-composer textarea { flex: 1; border: 0; resize: none; min-height: 24px; max-height: 260px; padding: 6px 4px; font: inherit; background: transparent;
  color: var(--ink); box-shadow: none; outline: none; }
.ai-composer [hidden] { display: none; }
.ai-foot { text-align: center; margin: 6px 0 10px; }
@media (max-width: 860px) {
  .ai-layout { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .ai-sidebar { display: none; }
  .ai-layout.show-sessions .ai-sidebar { display: flex; position: absolute; z-index: 30; width: 280px; height: calc(100vh - 140px); box-shadow: var(--shadow-pop); }
  .ai-toggle { display: inline-grid; }
}

/* --- Version 11.4: monitoring (Security Monitor agents) ----------------------------------------------------- */
.sm-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.sm-filter select, .sm-filter input[type=search], .sm-filter input[type=text] { width: auto; min-width: 150px; }
.sm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.sm-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 16px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--sm-c, var(--ink-3)); border-radius: var(--radius-m);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-card); }
.sm-tile:hover { background: var(--hover); }
.sm-tile.is-active { outline: 2px solid var(--sm-c, var(--brand)); outline-offset: -1px; }
.sm-tile-n { font-size: 1.9rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--sm-c, var(--ink)); }
.sm-tile-l { font-size: .82rem; color: var(--ink-2); }
.sm-cls-fatal { --sm-c: #8f1d14; }
.sm-cls-critical { --sm-c: var(--rust); }
.sm-cls-error { --sm-c: #e0702a; }
.sm-cls-security { --sm-c: var(--violet); }
.sm-cls-all { --sm-c: var(--brand); }
.sm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sm-grid > * { min-width: 0; }
.sm-side { display: flex; flex-direction: column; gap: 16px; }
.sm-side .panel { margin: 0; }
@media (max-width: 1000px) { .sm-grid { grid-template-columns: 1fr; } }
.sm-sev { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.sm-sev-fatal { background: #8f1d14; color: #fff; }
.sm-sev-critical { background: var(--rust); color: #fff; }
.sm-sev-error { background: var(--rust-soft); color: var(--rust); }
.sm-sev-warning { background: var(--amber-soft); color: var(--amber); }
.sm-sev-notice { background: var(--bluetree-soft); color: var(--bluetree-strong); }
table.sm-events tr.sm-row-fatal td:first-child, table.sm-events tr.sm-row-critical td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
.sm-filter .combo { width: auto; min-width: 220px; flex: 0 1 260px; }
.sm-check { width: 32px; }
.sm-bulk-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 0; }
.sm-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; flex: none; }
.sm-dot-online { background: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.sm-dot-offline { background: var(--rust); box-shadow: 0 0 0 3px var(--rust-soft); }
.sm-stats { display: grid; gap: 6px; margin: 0; }
.sm-stats > div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: var(--radius-s); background: var(--surface-2); }
.sm-stats dt { color: var(--ink-2); font-size: .86rem; }
.sm-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-stats .sm-ok dd { color: var(--leaf); }
.sm-stats .sm-bad { background: var(--rust-soft); } .sm-stats .sm-bad dd { color: var(--rust); }
.sm-stats .sm-warn { background: var(--amber-soft); } .sm-stats .sm-warn dd { color: var(--amber); }
.sm-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow-wrap: anywhere; }
/* version 19.0: installations of the agent, servers of the Security Monitor */
.sm-installs li { display: flex; align-items: center; gap: 6px; }
.sm-installs li .sm-install-meta { flex: 1; min-width: 0; }
.sm-installs li .inline-form { margin-left: auto; flex: none; }
.sm-cfg { margin-top: 8px; }
.sm-servers { margin-top: 16px; }
.sm-servers .inline-form { display: inline-flex; gap: 4px; align-items: center; }
.sm-server-new { margin-top: 12px; align-items: end; }
.sm-install-result h3 { margin: 0 0 6px; font-size: 1rem; }
.sm-install-result .btn + .btn { margin-left: 4px; }
.sm-warn-text { color: var(--amber); }
.sm-ok-text { color: var(--leaf); }
.sm-table-filter { margin-left: auto; width: min(260px, 100%); }
.panel-head .sm-table-filter { flex: 0 1 260px; }
.sm-meter-cell { white-space: nowrap; }
.sm-meter { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.sm-meter > span { display: block; height: 100%; width: var(--v, 0%); background: var(--leaf); border-radius: 3px; }
.sm-meter.is-mid > span { background: var(--amber); }
.sm-meter.is-high > span { background: var(--rust); }
.sm-code { background: var(--night); color: #e7ecff; padding: 12px 14px; border-radius: var(--radius-m); font: .8rem/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; }
.sm-tablist { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; }
.sm-tablist [role=tab] { border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: var(--radius-s); cursor: pointer; font: inherit; color: var(--ink-2); }
.sm-tablist [role=tab][aria-selected=true] { background: var(--bluetree-soft); border-color: var(--brand); color: var(--bluetree-strong); font-weight: 600; }
.sm-device-head h1 { display: flex; align-items: center; gap: 10px; }
.sm-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sm-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--surface-2); font-size: .72rem; text-align: center; }
.sm-count-warn { background: var(--amber-soft); color: var(--amber); }
.sm-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sm-gauge, .sm-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow-card); }
.sm-gauge { --c: var(--leaf); }
.sm-gauge.is-mid { --c: var(--amber); }
.sm-gauge.is-high { --c: var(--rust); }
.sm-gauge-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-2) 0); }
.sm-gauge-ring > span { width: 66px; height: 66px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-gauge-label { font-size: .85rem; color: var(--ink-2); }
.sm-kpi { justify-content: center; text-align: center; }
.sm-kpi-n { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-kpi.sm-warn .sm-kpi-n { color: var(--amber); }
.sm-kpi.sm-ok .sm-kpi-n { color: var(--leaf); }
.sm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; margin-left: auto; }
.sm-seg a { padding: 3px 10px; font-size: .8rem; color: var(--ink-2); text-decoration: none; }
.sm-seg a + a { border-left: 1px solid var(--line); }
.sm-seg a[aria-current] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 600; }
.sm-chart { width: 100%; height: 180px; display: block; }
.sm-chart .sm-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.sm-chart .sm-axis { fill: var(--ink-3); font-size: 10px; }
.sm-chart .sm-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sm-line-0, .sm-key-0 { stroke: var(--brand); background: var(--brand); }
.sm-line-1, .sm-key-1 { stroke: var(--violet); background: var(--violet); }
.sm-line-2, .sm-key-2 { stroke: var(--amber); background: var(--amber); }
.sm-legend { display: flex; gap: 6px 14px; align-items: center; flex-wrap: wrap; color: var(--ink-2); }
.sm-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: -8px; }
.sm-disks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sm-disks li { display: grid; grid-template-columns: minmax(80px, 160px) 1fr auto; align-items: center; gap: 8px; }
.sm-disks .sm-meter { width: 100%; }
.sm-dl { display: grid; gap: 4px; margin: 0; }
.sm-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }
.sm-dl dt { color: var(--ink-2); }
.sm-dl dd { margin: 0; overflow-wrap: anywhere; }
.sm-wrap { word-break: break-all; }
.sm-path { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-pkg-icon { vertical-align: -3px; margin-right: 6px; }
.sm-sort-head { cursor: pointer; user-select: none; }
.sm-sort-head[aria-sort=ascending]::after { content: " ▲"; font-size: .7em; }
.sm-sort-head[aria-sort=descending]::after { content: " ▼"; font-size: .7em; }
.sm-row-warn td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.sm-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.sm-features li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.sm-feature-mark { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: none; background: var(--surface-2); color: var(--ink-3); }
.sm-features .is-ok .sm-feature-mark { background: var(--leaf-soft); color: var(--leaf); }
.sm-features .is-bad { border-color: var(--rust); background: var(--rust-soft); }
.sm-features .is-bad .sm-feature-mark { background: var(--rust); color: #fff; }
.sm-event summary { cursor: pointer; }
.sm-json { background: var(--surface-2); padding: 8px 10px; border-radius: var(--radius-s); font: .76rem/1.45 var(--mono); max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.sm-cmd-done { background: var(--leaf-soft); color: var(--leaf); }
.sm-cmd-failed, .sm-cmd-rejected { background: var(--rust-soft); color: var(--rust); }
.sm-cmd-queued, .sm-cmd-sent { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.sm-upload { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sm-asset-card .sm-gauges-mini { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0; }
.sm-asset-card .sm-mini { display: flex; flex-direction: column; min-width: 90px; }
.sm-asset-card .sm-mini b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sm-tile { transition: none; } }

/* --- Version 11.5: network discovery -------------------------------------------------------------------------------- */
.nd-source { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.nd-source:first-of-type { border-top: 0; }
.nd-source.is-off { opacity: .7; }
.nd-source-main { min-width: 0; display: grid; gap: 3px; }
.nd-source-actions { display: flex; gap: 6px; align-items: flex-start; flex: none; }
.nd-edit { position: relative; }
.nd-edit[open] > form { position: absolute; right: 0; top: 36px; z-index: 30; width: min(420px, 90vw); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); padding: 14px; }
.nd-add { margin-top: 12px; }
.nd-add[open] > form { margin-top: 10px; max-width: 520px; }
.nd-filter { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.nd-filter select { width: auto; }
.nd-badge-new { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.nd-badge-linked { background: var(--leaf-soft); color: var(--leaf); }
.nd-badge-ignored { background: var(--surface-2); color: var(--ink-3); }
tr.nd-ignored td { color: var(--ink-3); }
#nd-table select { width: auto; min-width: 120px; }
@media (max-width: 700px) { .nd-source { flex-direction: column; } }

/* --- Version 11.5: time sheet – year so far and suggestions -------------------------------------------------------- */
.ts-year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; }
.ts-year-grid > div { background: var(--surface-2); border-radius: var(--radius-s); padding: 8px 10px; }
.ts-year-grid dt { font-size: .8rem; color: var(--ink-2); }
.ts-year-grid dd { margin: 2px 0 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.ts-year-grid .ts-neg dd { color: var(--rust); }
.ts-year-grid .ts-pos dd { color: var(--leaf); }
.ts-suggest-table input[type=text] { width: 100%; min-width: 60px; }
.ts-suggest-table td:nth-child(5) input { width: 64px; }
.ts-suggest-table td:last-child { min-width: 260px; }

/* --- Version 12.0: pictures and availability of people -------------------------------------------------------- */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.av { position: relative; display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.av > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--line); }
.av-sm { width: 28px; height: 28px; }
.av-md { width: 36px; height: 36px; }
.av-lg { width: 44px; height: 44px; }
.av-xl { width: 96px; height: 96px; }
.av .presence { position: absolute; right: -2px; bottom: -2px; width: 42%; height: 42%; min-width: 11px; min-height: 11px;
  max-width: 16px; max-height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.av .presence:empty { display: none; }
.av-xl .presence { max-width: 24px; max-height: 24px; right: 2px; bottom: 2px; }
.presence svg, .presence-icon { width: 100%; height: 100%; display: block; }
.user-menu summary .av { width: 30px; height: 30px; }
.presence-menu { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 4px 0 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.presence-menu-label { padding: 2px 10px 4px; }
.presence-choice { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 10px; border: 0; background: none;
  border-radius: 8px; color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.presence-choice:hover, .presence-choice:focus-visible { background: var(--surface-2, rgba(127,127,127,.1)); }
.presence-choice svg { width: 14px; height: 14px; flex: none; }
.presence-choice.is-current { font-weight: 700; }
.presence-choice.is-current::after { content: "✓"; margin-left: auto; color: var(--leaf); }
.chat-list-icon .av { width: 26px; height: 26px; }
.chat-room-title.has-avatar { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-msg-head .chat-msg-av { width: 24px; height: 24px; align-self: center; }
.chat-msg-head .chat-msg-av .presence { min-width: 10px; min-height: 10px; }
.chat-member-list li .av { align-self: center; }
/* profile: picture and colour */
.pf-picture { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pf-colors { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 8px 0; }
.pf-colors legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.pf-swatch { position: relative; }
.pf-swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pf-swatch span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pf-swatch input:checked + span { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.pf-swatch input:focus-visible + span { outline: 2px solid var(--bluetree); outline-offset: 3px; }
.pf-swatch.is-taken span::after { content: ""; position: absolute; right: -1px; top: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-3); }
.pf-swatch.pf-auto span { background: conic-gradient(#1f6feb, #2e9e4f, #f2b705, #d13438, #8e5cd9, #1f6feb); }
.pf-custom { display: inline-flex; align-items: center; gap: 6px; }
.pf-custom input[type=color] { width: 36px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; }
.cd-list, .cd-mails { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.cd-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cd-add input[name=domain] { max-width: 220px; }
.cd-add input[name=note] { max-width: 220px; }
.cd-mails li { overflow-wrap: anywhere; }
.av-xs { width: 18px; height: 18px; }
.av-xs .presence { min-width: 9px; min-height: 9px; right: -3px; bottom: -3px; }
.side-chat .av { margin-right: 0; }

/* --- Version 12.1: code checks, ZIP upload into branches ------------------------------------------------------- */
.bu-upload summary { cursor: pointer; list-style: none; }
.bu-upload summary::-webkit-details-marker { display: none; }
.bu-upload[open] summary { margin-bottom: 12px; }
.bu-mode, .cc-cats { border: 0; padding: 0; margin: 6px 0; display: grid; gap: 4px; }
.bu-mode legend, .cc-cats legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.cc-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.cc-tile { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); text-decoration: none; color: var(--ink); border-left: 5px solid var(--cc, var(--line)); }
.cc-tile-n { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--cc, var(--ink)); }
.cc-tile-l { font-size: .84rem; font-weight: 600; }
.cc-tile-c { font-size: .76rem; color: var(--ink-3); }
.cc-good { --cc: #2e9e4f; } .cc-fair { --cc: #c98a00; } .cc-poor { --cc: #d13438; } .cc-none { --cc: var(--ink-3); }
.cc-overall { background: var(--surface-2, var(--surface)); }
.cc-score { font-weight: 800; color: var(--cc, var(--ink)); }
.cc-sev-high { background: #fde7e9; color: #a4262c; } .cc-sev-medium { background: #fff4ce; color: #7a5b00; }
.cc-sev-low { background: #e8f1fb; color: #1f5fa8; } .cc-sev-info { background: var(--line); color: var(--ink-2); }
.cc-st-running, .cc-st-queued { background: #e8f1fb; color: #1f5fa8; } .cc-st-done { background: #e6f4ea; color: #1e7a3c; }
.cc-st-failed { background: #fde7e9; color: #a4262c; }
.cc-findings td:first-child { width: 90px; }
.cc-findings td:nth-child(3) { max-width: 320px; overflow-wrap: anywhere; }
.cc-ai ol { margin: 6px 0 0 1.2em; padding: 0; display: grid; gap: 4px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cc-sev-high { background: #4a1d20; color: #ffb3b8; }
  :root:not([data-theme="light"]) .cc-sev-medium { background: #3d3210; color: #ffd966; }
  :root:not([data-theme="light"]) .cc-sev-low { background: #13304d; color: #9fc8f5; }
}
:root[data-theme="dark"] .cc-sev-high { background: #4a1d20; color: #ffb3b8; }
:root[data-theme="dark"] .cc-sev-medium { background: #3d3210; color: #ffd966; }
:root[data-theme="dark"] .cc-sev-low { background: #13304d; color: #9fc8f5; }
.bu-new[hidden] { display: none !important; }

/* --- Version 12.2: calendar ------------------------------------------------------------------------------------ */
.cal { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 20px; align-items: start; }
.cal-side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.cal-newbtn { justify-content: center; }
.cal-h { font-size: .82rem; font-weight: 650; color: var(--ink-2); margin: 0 0 6px; }
.cal-box { border-top: 1px solid var(--line); padding-top: 12px; }
.cal-minihint { margin: -6px 0 0; font-size: .74rem; }
.cal-list { display: flex; flex-direction: column; gap: 2px; }
.cl-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-s); cursor: pointer; font-size: .88rem; }
.cl-item:hover { background: var(--hover); }
.cl-item input { margin: 0; accent-color: var(--uc); }
.cl-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--uc); flex: none; }
.cl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ask { margin-top: 8px; font-size: .86rem; }
.cal-ask summary { cursor: pointer; color: var(--brand); }
.cal-ask form { margin-top: 8px; }
.cal-settings { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .88rem; text-decoration: none; padding: 4px 6px; border-radius: var(--radius-s); }
.cal-settings:hover { background: var(--hover); color: var(--ink); }
.cal-settings svg { width: 16px; height: 16px; }

/* small months */
.cal-minis { display: flex; flex-direction: column; gap: 10px; user-select: none; }
.mm-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 28px; }
.mm-title { font-weight: 650; font-size: .86rem; flex: 1; text-align: center; }
.mm-nav { border: 0; background: transparent; color: var(--ink-2); font-size: 1.15rem; line-height: 1; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.mm-nav:hover { background: var(--hover); color: var(--ink); }
.mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.mm-dow { font-size: .68rem; color: var(--ink-3); text-align: center; padding: 2px 0; }
.mm-day { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .78rem; height: 28px; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; touch-action: none; }
.mm-day:hover { background: var(--hover); }
.mm-day.is-other { color: var(--ink-3); }
.mm-day.has-ev { font-weight: 750; }
.mm-day.is-in { background: var(--bluetree-soft); color: var(--bluetree-strong); }
.mm-day.is-picking { background: var(--bluetree); color: var(--bluetree-ink); }
.mm-day.is-today { box-shadow: inset 0 0 0 1.5px var(--bluetree); }

/* bar */
.cal-main { min-width: 0; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cal-arrow { font-size: 1.3rem; line-height: 1; padding-inline: 10px; }
.cal-title { font-size: 1.25rem; margin: 0 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-s); overflow: hidden; }
.cal-views .btn { border: 0; border-radius: 0; box-shadow: none; }
.cal-views .btn + .btn { border-left: 1px solid var(--line); }
.cal-views .btn[aria-pressed="true"] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 650; }
.cal-keys { margin-top: 8px; font-size: .76rem; }
.cal-grid { height: calc(100vh - 196px); min-height: 460px; }

/* week grid */
.cg { --hour: 48px; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.cg-head, .cg-allday { display: grid; grid-template-columns: 56px minmax(0, 1fr); overflow-y: hidden; scrollbar-gutter: stable; flex: none; }
.cg-head { grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cg-day { border: 0; background: transparent; font: inherit; color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; cursor: pointer; border-left: 1px solid var(--line); }
.cg-day:hover { background: var(--hover); }
.cg-dow { font-size: .74rem; }
.cg-num { font-size: 1.15rem; font-weight: 650; color: var(--ink); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-variant-numeric: tabular-nums; }
.cg-day.is-today .cg-num { background: var(--bluetree); color: var(--bluetree-ink); }
.cg-day.is-today .cg-dow { color: var(--bluetree); font-weight: 650; }
.cg-allday { border-bottom: 1px solid var(--line-strong); }
.cg-adlabel { font-size: .68rem; color: var(--ink-3); padding: 6px 4px; text-align: right; }
.cg-adcols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--lanes, 1), 24px); padding: 3px 0 4px; max-height: 108px; overflow-y: auto; }
.cg-adcell { border-left: 1px solid var(--line); }
.cg-scroll { flex: 1; overflow-y: scroll; scrollbar-gutter: stable; position: relative; }
.cg-body { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(0, 1fr)); position: relative; }
.cg-hours { position: relative; }
.cg-hour { height: var(--hour); font-size: .68rem; color: var(--ink-3); text-align: right; padding-right: 8px; transform: translateY(-.55em); font-variant-numeric: tabular-nums; }
.cg-col { position: relative; border-left: 1px solid var(--line); }
.cg-slot { height: calc(var(--hour) / 2); border-top: 1px dotted var(--line); }
.cg-slot.is-hour { border-top: 1px solid var(--line); }
.cg-slot.is-off { background: var(--surface-2); }
.cg-slot.is-slot { background: var(--bluetree-soft); box-shadow: inset 0 0 0 1px var(--bluetree); }
.cg-col.is-today { background: color-mix(in srgb, var(--bluetree) 3%, transparent); }
.cg-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--rust); z-index: 3; pointer-events: none; }
.cg-now::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); }

/* appointments */
.ce { position: absolute; box-sizing: border-box; overflow: hidden; border-radius: 6px; padding: 2px 6px 2px 8px; font-size: .76rem; line-height: 1.25;
  color: var(--ink); background: color-mix(in srgb, var(--uc) 17%, var(--surface)); border-left: 4px solid var(--cc, var(--uc));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--uc) 22%, transparent) inset; cursor: pointer; z-index: 1; touch-action: none; user-select: none; }
.ce:hover { background: color-mix(in srgb, var(--uc) 26%, var(--surface)); }
.ce:focus-visible { outline: 2px solid var(--bluetree); outline-offset: 1px; }
.ce-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ce-time { font-weight: 500; color: var(--ink-2); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ce-m { display: flex; align-items: center; gap: 4px; color: var(--ink-2); min-width: 0; }
.ce-loc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ce-flags { display: inline-flex; gap: 2px; margin-left: auto; flex: none; }
.ce-i { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ce-rs { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.ce.is-sel { outline: 2px solid var(--bluetree); outline-offset: 0; z-index: 2; }
.ce.is-cut { opacity: .45; }
.ce.is-dragging { opacity: .3; }
.ce.is-readonly { cursor: default; }
.ce.is-invited { background: repeating-linear-gradient(135deg, var(--surface) 0 6px, color-mix(in srgb, var(--uc) 16%, var(--surface)) 6px 12px); border-left-style: dashed; }
.ce.is-tentative { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--uc) 10%, var(--surface)) 0 6px, color-mix(in srgb, var(--uc) 22%, var(--surface)) 6px 12px); }
.ce.is-virtual { cursor: default; font-style: normal; }
.ce.is-holiday { --uc: var(--leaf); }
.ce-ghost { opacity: .9; z-index: 6; pointer-events: none; box-shadow: var(--shadow-pop); }
.ce-bar, .cm .ce { position: relative; white-space: nowrap; margin: 1px 2px; padding-block: 1px; }
.ce-bar .ce-t, .cm .ce-t { white-space: nowrap; }
.ce-bar .ce-m, .cm .ce-m { display: none; }

/* month */
.cm { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; }
.cm-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.cm-dow { font-size: .74rem; color: var(--ink-2); padding: 6px 8px; }
.cm-body { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); }
.cm-cell { border-left: 1px solid var(--line); border-top: 1px solid var(--line); min-width: 0; overflow: hidden; padding: 2px 0; }
.cm-cell:nth-child(7n + 1) { border-left: 0; }
.cm-cell:nth-child(-n + 7) { border-top: 0; }
.cm-cell.is-other { background: var(--surface-2); }
.cm-cell.is-other .cm-num { color: var(--ink-3); }
.cm-cell.is-slot { box-shadow: inset 0 0 0 2px var(--bluetree); }
.cm-num { border: 0; background: transparent; font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink); width: 26px; height: 26px; border-radius: 50%; margin: 0 0 1px 4px; cursor: pointer; font-variant-numeric: tabular-nums; }
.cm-num:hover { background: var(--hover); }
.cm-cell.is-today .cm-num { background: var(--bluetree); color: var(--bluetree-ink); }
.cm-more { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: .74rem; padding: 0 8px; cursor: pointer; }
.cm-more:hover { color: var(--bluetree); text-decoration: underline; }

/* context menu */
.cal-menu { position: fixed; z-index: 1000; min-width: 230px; max-width: 320px; max-height: 80vh; overflow-y: auto; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.cal-mi { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .88rem; text-align: left; padding: 6px 10px; border-radius: var(--radius-s); cursor: pointer; }
.cal-mi:hover, .cal-mi:focus-visible { background: var(--hover); outline: none; }
.cal-mi[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--bluetree); }
.cal-mi kbd { margin-left: auto; font: inherit; font-size: .74rem; color: var(--ink-3); }
.cal-mi.is-danger { color: var(--rust); }
.cal-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ce-cats { display: inline-flex; flex-wrap: wrap; gap: 3px; margin-left: 4px; }
.ce-cat { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; line-height: 1.3; max-width: 100%; overflow: hidden; white-space: nowrap; }
.ce-cat::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--kc); flex: none; }
.cal-msep { border-top: 1px solid var(--line); margin: 4px 6px; padding-top: 4px; font-size: .72rem; color: var(--ink-3); }
.cal-msep:empty { padding-top: 0; }

/* editor */
.cal-dialog { width: min(740px, 96vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.cal-dialog::backdrop { background: rgba(10, 20, 40, .42); }
.cal-dialog form { display: flex; flex-direction: column; max-height: 92vh; }
.cal-dhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.cal-dhead h2 { margin: 0; font-size: 1.1rem; }
.cal-dbody { padding: 12px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.cal-dbody > .hint:empty { display: none; }
.cal-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.cal-f { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; color: var(--ink-2); min-width: 0; }
.cal-f > span:first-child { font-weight: 550; }
.cal-f input, .cal-f select, .cal-f textarea { font: inherit; color: var(--ink); }
.cal-wide { flex: 1 1 100%; }
.cal-wide input, .cal-wide textarea { width: 100%; box-sizing: border-box; }
.cal-inline { flex-direction: row; align-items: center; gap: 8px; }
.cal-inline input { width: 5em; }
.cal-dt { display: flex; gap: 6px; }
.cal-dt input[type="time"] { width: 9em; }
.cal-dt input[type="number"] { width: 7em; }
.cal-allday { padding-bottom: 6px; }
.cal-note { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; background: var(--bluetree-soft); color: var(--ink); padding: 8px 10px; border-radius: var(--radius-s); margin: 0; }
.cal-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.cal-join { align-self: flex-start; font-size: .86rem; font-weight: 600; }
.cal-fs { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cal-fs legend { font-size: .84rem; font-weight: 650; color: var(--ink-2); padding: 0 4px; }
.cal-days { gap: 4px; }
.cal-day { position: relative; }
.cal-day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cal-day span { display: inline-grid; place-items: center; min-width: 40px; height: 30px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 15px; font-size: .8rem; }
.cal-day input:checked + span { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink); }
.cal-day input:focus-visible + span { outline: 2px solid var(--bluetree); outline-offset: 2px; }
.cal-sg { position: relative; }
.cal-sg input { width: 100%; box-sizing: border-box; }
.cal-suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-pop); max-height: 240px; overflow-y: auto; }
.sg-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: .86rem; }
.sg-item.is-active, .sg-item:hover { background: var(--hover); }
.sg-sub { color: var(--ink-3); font-size: .78rem; }
.att-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.att { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; background: var(--surface-2); max-width: 100%; }
.att-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-mail { color: var(--ink-3); font-size: .76rem; }
.att-resp { font-size: .72rem; padding: 0 6px; border-radius: 999px; background: var(--surface); }
.att-resp.is-accepted { color: var(--leaf); }
.att-resp.is-declined { color: var(--rust); }
.att-resp.is-tentative { color: var(--amber); }
.att-req { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: inherit; font-size: .72rem; padding: 1px 8px; border-radius: 999px; cursor: pointer; }
.att-req[aria-pressed="true"] { color: var(--bluetree-strong); border-color: var(--bluetree); }
.att-x { border: 0; background: transparent; color: var(--ink-3); font-size: 1rem; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.att-x:hover { background: var(--hover); color: var(--rust); }
.cal-dfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--line); }
.cal-spacer { flex: 1; }
.cal-answer { display: inline-flex; gap: 6px; }
.cal-answer .btn[aria-pressed="true"] { background: var(--bluetree-soft); border-color: var(--bluetree); color: var(--bluetree-strong); }
.cal-askbox { width: min(460px, 94vw); padding: 18px 20px; }
.cal-askbox h2 { margin: 0 0 6px; font-size: 1.05rem; }
.cal-askbox p { margin: 0 0 14px; color: var(--ink-2); }
.cal-askbtns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
[data-ed-kind][hidden], [data-ed-private][hidden], .cal-dialog [hidden] { display: none !important; }

/* settings */
.cs-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-person { display: inline-flex; align-items: center; gap: 8px; }
.cs-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-cats input[type="color"] { width: 40px; height: 32px; padding: 2px; border-radius: var(--radius-s); }
.cs-share, .cs-request { margin-top: 14px; }
.cs-share summary { cursor: pointer; color: var(--brand); }

/* reminder popups */
.rem-stack { position: fixed; right: 16px; bottom: 16px; z-index: 950; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.rem-stack { pointer-events: none; align-items: flex-end; }
.rem-stack > * { pointer-events: auto; width: 100%; }
.rem-stack.is-folded > .rem { display: none; }
.rem-pill { width: auto !important; border: 1px solid var(--line); background: var(--surface); color: var(--bluetree-strong); font: inherit; font-size: .84rem; font-weight: 650; padding: 7px 14px; border-radius: 999px; box-shadow: var(--shadow-pop); cursor: pointer; }
.rem-pill[hidden] { display: none; }
.rem { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bluetree); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); padding: 10px 12px 12px; }
.rem-head { display: flex; align-items: center; justify-content: space-between; }
.rem-kicker { font-size: .74rem; color: var(--bluetree); font-weight: 650; }
.rem-x { border: 0; background: transparent; color: var(--ink-3); font-size: 1.1rem; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; }
.rem-x:hover { background: var(--hover); color: var(--ink); }
.rem-title { display: block; font-weight: 650; color: var(--ink); text-decoration: none; margin: 2px 0; }
.rem-title:hover { text-decoration: underline; }
.rem-when, .rem-loc { margin: 0; font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.rem-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .rem { animation: rem-in .18s ease-out; }
  @keyframes rem-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}

@media (max-width: 960px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
  .cal-side { position: static; }
  .cal-minis { flex-direction: row; flex-wrap: wrap; }
  .cal-minis .mm { flex: 1 1 240px; }
  .cal-minihint { display: none; }
}
@media (max-width: 700px) {
  .cal-main { order: -1; }
  .cal-grid { height: 72vh; }
  .cal-title { font-size: 1.05rem; }
  .cal-views { width: 100%; }
  .cal-views .btn { flex: 1; padding-inline: 4px; }
  .cg-head, .cg-allday, .cg-body { grid-template-columns: 44px repeat(var(--cols), minmax(0, 1fr)); }
  .cg-allday { grid-template-columns: 44px minmax(0, 1fr); }
  .cal-keys { display: none; }
}
.cal-dialog input[type=time], #defaults input[type=time] { font: inherit; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 11px; }
/* version 12.3: external calendars */
.cl-item.is-external { padding-left: 22px; font-size: .84rem; color: var(--ink-2); }
.cl-item.is-external[title] .cl-name::after { content: " !"; color: var(--rust); font-weight: 700; }
.cs-sources { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cs-source p { margin: 4px 0 0; overflow-wrap: anywhere; }
.cs-source input[type="color"] { width: 40px; height: 32px; padding: 2px; border-radius: var(--radius-s); }
.cs-form input[type="text"] { width: auto; flex: 1 1 200px; min-width: 0; }
.cs-form select { width: auto; flex: 0 1 auto; max-width: 100%; }

/* --- Version 14.0: calendar editor – one scrollbar, compact, clearer frame ----------------------------------------- */
.cal-dialog { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(16, 24, 48, .28), 0 0 0 1px var(--line); }
.cal-dialog::backdrop { background: rgba(16, 24, 48, .5); backdrop-filter: blur(2px); }
.cal-dialog form { max-height: 92vh; }
.cal-editor { width: min(780px, 96vw); }
.cal-dhead { padding: 12px 12px 12px 20px; background: var(--bluetree-soft); border-bottom: 1px solid var(--line); }
.cal-dhead h2 { font-size: 1.05rem; color: var(--ink); }
.cal-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.cal-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cal-close:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.cal-close:focus-visible { outline: 2px solid var(--bluetree); outline-offset: 2px; }
.cal-dbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; gap: 10px; }
.cal-dfoot { padding: 10px 20px 12px; background: var(--surface-2); }
.cal-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 14px; align-items: end; }
.cal-grid2 .cal-f select, .cal-grid2 .cal-f input { width: 100%; box-sizing: border-box; }
.cal-grid2 .cal-dt select { flex: 1; min-width: 0; }
.cal-private { padding-bottom: 8px; }
.cal-people { align-items: start; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cal-people .cal-f > span:first-child { font-weight: 550; }
.cal-people .hint { margin: 2px 0 0; font-size: .76rem; }
.cal-repeat [data-rr] { border-left: 3px solid var(--bluetree-soft); padding-left: 12px; display: flex; flex-direction: column; gap: 8px; }
.cal-repeat [data-rr][hidden], .cal-repeat[hidden] { display: none; }
.cal-dbody textarea { min-height: 72px; resize: vertical; }
.cal-times .cal-dt input[type="date"] { width: 10.5em; }
/* selecting a period with the mouse */
.cg-slot.is-span, .cg-adcell.is-span, .cm-cell.is-span { background: color-mix(in srgb, var(--bluetree) 22%, var(--surface)); }
.cg-col, .cg-adcols, .cm-body { user-select: none; }
/* small months: the shown days stand out clearly */
.mm-day.is-in { background: var(--bluetree); color: var(--bluetree-ink); font-weight: 650; }
.mm-day.is-in:hover { background: var(--bluetree-strong); }
.mm-day.is-in.is-other { background: color-mix(in srgb, var(--bluetree) 55%, var(--surface)); color: var(--bluetree-ink); }
.mm-day.is-today { box-shadow: inset 0 0 0 2px var(--bluetree); }
.mm-day.is-today.is-in { box-shadow: inset 0 0 0 2px var(--bluetree-ink), 0 0 0 2px var(--bluetree); }
.mm-day.is-picking { background: var(--bluetree-strong); color: var(--bluetree-ink); }
.cal-repeat:has(> [data-rr][hidden]) { display: none; }

/* --- Version 14.0: people pickers (autocomplete with picture, name and login) -------------------------------------- */
.up-wrap { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 100%; }
.up-wrap > input { width: 100%; box-sizing: border-box; }
.up-wrap > input.has-av { padding-left: 38px; }
/* version 18.8: the button with the magnifier and the window with all people */
.up-wrap.has-loupe > input { padding-right: 38px; }
.up-search-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid;
  place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.up-search-btn:hover, .up-search-btn:focus-visible { background: var(--bluetree-soft); color: var(--bluetree-strong); outline: none; }
.up-search-btn:disabled { opacity: .4; cursor: default; background: transparent; }
.up-dialog { width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 48px)); padding: 18px 18px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-l); display: none; flex-direction: column; gap: 8px; }
.up-dialog[open] { display: flex; }
.up-dialog::backdrop { background: rgb(0 0 0 / .35); }
.up-dialog-title { margin: 0; font-size: 1.08rem; }
.up-dialog-search { width: 100%; }
.up-dialog-count { margin: 0; }
.up-dlist { list-style: none; margin: 0; padding: 4px; overflow: auto; min-height: 120px; flex: 1 1 auto; border: 1px solid var(--line);
  border-radius: var(--radius-m); }
.up-dlist:focus-visible { outline: 2px solid var(--bluetree); outline-offset: 1px; }
.up-ditem { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.up-ditem:hover, .up-ditem.is-active { background: var(--bluetree-soft); }
.up-ditem.is-on { font-weight: 600; }
.up-ditem .up-text { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.up-ditem .up-login { color: var(--ink-3); font-weight: 400; }
.up-dcheck { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 4px; display: grid; place-items: center; }
.up-ditem.is-on .up-dcheck { background: var(--bluetree); border-color: var(--bluetree); }
.up-ditem.is-on .up-dcheck::after { content: ""; width: 8px; height: 4px; border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px); }
.up-dnone { padding: 12px 8px; }
.up-dialog-actions { margin: 4px 0 0; }
.up-chosen { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; pointer-events: none; }
.up-chosen[hidden] { display: none; }
.up-av { width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-2); }
.up-av-none { display: inline-block; background: transparent; }
.up-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 3px); min-width: 240px; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); max-height: 300px; overflow-y: auto; }
.up-list[hidden] { display: none; }
.up-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-s); cursor: pointer; font-size: .88rem; color: var(--ink); }
.up-item.is-active, .up-item:hover { background: var(--hover); }
.up-text { display: flex; gap: 6px; min-width: 0; align-items: baseline; flex-wrap: wrap; }
.up-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.up-login { color: var(--ink-3); font-size: .8rem; }
.sg-item.is-person { justify-content: flex-start; align-items: center; gap: 10px; }
.att .up-av { width: 20px; height: 20px; margin-left: -6px; }
.inline-form .up-wrap, .filters .up-wrap { width: auto; min-width: 220px; }
/* version 18.9: the chosen people as objects in the field (picture, name, × to take one out) */
.up-wrap.up-box { flex-wrap: wrap; gap: 4px 6px; min-height: 38px; padding: 4px 8px; box-sizing: border-box; cursor: text;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.up-wrap.up-box.has-loupe { padding-right: 38px; }
.up-wrap.up-box > .up-search-btn { top: 3px; transform: none; }
.up-wrap.up-box:hover { border-color: color-mix(in srgb, var(--ink-3) 60%, var(--line-strong)); }
.up-wrap.up-box:focus-within { border-color: var(--bluetree); box-shadow: var(--focus); }
.up-wrap.up-box > input[type=text] { flex: 1 1 120px; width: auto; min-width: 120px; border: 0; box-shadow: none; background: transparent;
  padding: 4px 2px; }
.up-wrap.up-box > input[type=text]:focus { box-shadow: none; }
.up-wrap.up-box > input[hidden] { display: none; }
.up-toks { display: contents; }
.up-toks[hidden] { display: none; }
.up-tok { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 3px 2px 2px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86rem; color: var(--ink); line-height: 1.2; }
.up-tok .up-av { width: 22px; height: 22px; }
.up-tok-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; padding-right: 2px; }
.up-tok:not(:has(.up-tok-x)) .up-tok-name { padding-right: 8px; }
.up-tok-x { display: grid; place-items: center; width: 20px; height: 20px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--rust); cursor: pointer; }
.up-tok-x:hover, .up-tok-x:focus-visible { background: color-mix(in srgb, var(--rust) 14%, transparent); outline: none; }
.inline-form .up-wrap.up-box, .filters .up-wrap.up-box { min-height: 36px; }
/* version 14.0: profile – mailboxes and calendar */
.pf-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.pf-nav a { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: .86rem; }
.pf-nav a:hover { border-color: var(--bluetree); color: var(--bluetree-strong); }
.pf-part { margin: 30px 0 10px; font-size: 1.2rem; scroll-margin-top: 80px; }
.pf-lead { margin: -4px 0 12px; color: var(--ink-2); max-width: 75ch; }
.panel[id] { scroll-margin-top: 80px; }
.mb-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mb-item p { margin: 4px 0 0; overflow-wrap: anywhere; }
.mb-name { margin-right: 4px; }
.mb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mb-row > span { display: flex; flex-direction: column; gap: 4px; }
.mb-imap { display: flex; flex-direction: column; gap: 6px; }
.mb-imap[hidden] { display: none; }
.pf-wide { max-width: 760px; }
.mb-form { max-width: 560px; }
.mb-form > .btn, .cs-share .stack-form > .btn { align-self: flex-start; width: auto; }
.mb-h { font-size: .9rem; margin: 10px 0 2px; color: var(--ink-2); }

/* version 15.0: rights of users and groups on objects */
table.access-table th.c, table.access-table td.c, table.access-check th.c, table.access-check td.c { text-align: center; padding-right: 10px; }
table.access-table td.actions { white-space: nowrap; text-align: right; }
table.access-table td.actions .inline-form { display: inline; margin-left: 8px; }
table.access-check { max-width: 640px; }
table.access-check .yes { color: var(--leaf); font-weight: 700; }
.rights-set { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.rights-set legend { font-weight: 700; padding: 0 6px; }
.access-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 10px; }
.access-overview h3 { margin: 0 0 6px; font-size: 1rem; }
@media (max-width: 760px) { .access-overview { grid-template-columns: 1fr; } }
.error-text { color: var(--rust); }
/* one-line forms: a field (also with the people picker) and its button side by side */
.inline-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 560px; }
.inline-add > .up-wrap, .inline-add > input[type=text] { flex: 1 1 240px; width: auto; }

/* version 15.1: folding panels – open when they hold entries */
details.fold > summary { cursor: pointer; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--ink-3); }
details.fold[open] > summary h2::before { content: "▾"; }
details.fold:not([open]) > summary { margin-bottom: 0; border-bottom: 0; }
.stack-form > .panel { margin-bottom: 16px; }
.check-list .check { padding: 4px 0; }

/* version 15.3: actions of a form at the top right, also while scrolling */
.form-actions-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.page-head .form-actions-top { align-self: flex-end; }
form > .form-actions-js { justify-content: flex-end; margin: 0 0 14px; grid-column: 1 / -1; }
.form-actions-top.is-floating { position: fixed; top: 10px; right: 18px; z-index: 55; background: var(--surface);
  padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 24px rgba(15, 23, 42, .14), 0 0 0 1px var(--line); }
.form-actions-marker { display: block; width: 0; height: 0; }
.form-actions[hidden] { display: none !important; }
/* selection lists with a filter */
.sp-wrap { display: block; width: 100%; }
.sp-wrap .sp-field { width: 100%; box-sizing: border-box; padding-right: 30px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238a93a4' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.sp-list { max-height: 320px; overflow: auto; }
.sp-multi-filter { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
/* popups: the title bar moves them */
.popup-handle { cursor: move; user-select: none; touch-action: none; }
@media (max-width: 760px) { .form-actions-top.is-floating { left: 10px; right: 10px; justify-content: flex-end; } }
/* folding panels of long pages */
.fold-panel > .panel-head h2[role=button] { cursor: pointer; }
.fold-panel > .panel-head h2[role=button]::before { content: "▾"; display: inline-block; width: 1.1em; color: var(--ink-3); }
.fold-panel.is-folded > .panel-head h2[role=button]::before { content: "▸"; }
.fold-panel.is-folded > :not(.panel-head) { display: none !important; }
.fold-panel.is-folded > .panel-head { margin-bottom: 0; }
details.field-fold { margin-bottom: 14px; }
details.field-fold > summary { cursor: pointer; list-style: none; }
details.field-fold > summary::-webkit-details-marker { display: none; }
details.field-fold > summary label { display: inline; cursor: pointer; }
details.field-fold > summary label::before { content: "▸ "; color: var(--ink-3); }
details.field-fold[open] > summary label::before { content: "▾ "; }
/* version 15.5: main customer of a project */
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-main { color: var(--ink-2); white-space: nowrap; }
.pc-row:not(:has(input[type=checkbox]:checked)) .pc-main { visibility: hidden; }
/* version 15.6: links to objects in the drawing editor */
.ge-pill { cursor: pointer; }
.ge-pill:hover rect { filter: brightness(1.12); }
.ge-btn:has(.ge-link-count) { position: relative; }
.ge-link-count { position: absolute; top: -5px; right: -7px; font-size: .62rem; font-weight: 700; line-height: 1.4; color: #fff;
  background: var(--bluetree); border-radius: 8px; padding: 0 4px; white-space: nowrap; pointer-events: none; }
.ge-link-count:empty, .ge-link-count[hidden] { display: none; }
.ge-links-mode [data-node]:not([data-linked]) { opacity: .28; }
.ge-links-mode [data-node]:not([data-linked]):has(.ge-unlinked) { opacity: .7; }
.ge-links-mode [data-mark][data-linked] .ge-pill rect { stroke-width: 2.5; }
.ge-ref-card { border: 1px solid var(--line); border-left: 4px solid var(--ref-color, var(--line)); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px; background: var(--surface-2, var(--surface)); }
.ge-ref-card.is-linked { background: color-mix(in srgb, var(--ref-color) 7%, var(--surface)); }
.ge-ref-kind { font-size: .75rem; font-weight: 700; color: var(--ref-color, var(--ink-2)); margin-bottom: 2px; }
.ge-ref-card .ge-ref-current { display: grid; gap: 2px; margin-bottom: 8px; }
.ge-ref-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ge-ref-search { margin-top: 8px; display: grid; gap: 6px; }
.ge-ref-search[hidden] { display: none; }
.ge-ref-more { display: flex; gap: 12px; flex-wrap: wrap; }
.ge-objsearch { display: grid; gap: 6px; }
.ge-objsearch input[type=search] { width: 100%; box-sizing: border-box; }
.ge-obj-results { max-height: 260px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.ge-obj-results button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: 0 8px; width: 100%;
  padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ge-obj-results button[draggable=true] { cursor: grab; }
.ge-obj-results button:hover, .ge-obj-results button:focus-visible { background: var(--bluetree-soft); }
.ge-obj-results button:focus-visible { outline: 2px solid var(--bluetree); }
.ge-obj-results .ge-hint { grid-column: 2; }
.ge-obj-kind { display: inline-block; align-self: start; font-size: .68rem; font-weight: 700; color: #fff; border-radius: 999px;
  padding: 2px 7px; white-space: nowrap; max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
.ge-fold { border-top: 1px solid var(--line); padding: 6px 0; }
.ge-fold > summary { cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--ink-2); padding: 4px 0; }
.ge-fold-body { padding-top: 6px; }
.ge-linklist { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.ge-linklist-item { all: unset; box-sizing: border-box; display: flex; gap: 8px; align-items: center; width: 100%; padding: 4px 6px;
  border-radius: 6px; cursor: pointer; font-size: .85rem; }
.ge-linklist-item:hover, .ge-linklist-item:focus-visible { background: var(--bluetree-soft); }
.ge-linklist-item.is-missing { color: var(--ink-3); }
.ge-pal-objects .ge-objsearch { padding: 4px 2px; }

/* --- Version 16.0: emojis in the chat (picker; small / large / off per person), call buttons --------------------- */
.chat-insert { position: relative; }
.chat-emoji-pop { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 45; width: 292px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.chat-emoji-pop[hidden] { display: none; }
.chat-emoji-pop button { border: 0; background: none; font-size: 1.3rem; line-height: 1; padding: 5px 0; border-radius: 6px;
  cursor: pointer; }
.chat-emoji-pop button:hover, .chat-emoji-pop button:focus-visible { background: var(--hover); }
.chat-emoji-pop p { grid-column: 1 / -1; margin: 6px 2px 0; }
.chat-rich .emoji { font-style: normal; }
.chat-room[data-emoji="large"] .chat-rich .emoji { font-size: 1.45em; line-height: 1; vertical-align: -0.12em; }
.chat-room .chat-rich.chat-emoji-only .emoji { font-size: 1.7em; line-height: 1.15; }
.chat-room[data-emoji="large"] .chat-rich.chat-emoji-only .emoji { font-size: 2.8em; }
.chat-room[data-emoji="off"] .chat-rich .emoji { color: var(--ink-2); }
.chat-room[data-emoji="off"] .chat-rich.chat-emoji-only .emoji { font-size: 1em; }
.chat-call svg { color: var(--bluetree); }
.pf-emoji-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.pf-emoji-modes legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.pf-emoji-sample { display: inline-block; min-width: 1.6em; text-align: center; }
.pf-emoji-sample.is-large { font-size: 1.5em; line-height: 1; }

/* --- Version 16.0: board – WIP label, priority and assignee on the card, new items in a column ----------------- */
.column-head { gap: 6px; min-height: 46px; }
.column-head h2 { margin-right: auto; }
.column-wip { white-space: nowrap; cursor: help; }
.column.over .column-wip { background: var(--rust); border-color: var(--rust); color: #fff; }
.column-add { width: 26px; height: 26px; }
.column-add svg { width: 15px; height: 15px; }
.quick-add { margin: 2px 10px 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 10px; display: grid; gap: 6px; }
.quick-add[hidden] { display: none; }
.quick-add input[name=title] { width: 100%; }
.quick-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.quick-add-row { flex-wrap: nowrap; }
.quick-add-row select { width: auto; flex: 1 1 auto; min-width: 0; }
.quick-add .hint { margin: 0; }
.card-quick { display: inline-flex; align-items: center; gap: 4px; }
.card-quick button { border: 1px solid transparent; background: none; border-radius: 999px; padding: 1px 5px; display: inline-flex;
  align-items: center; gap: 3px; font: inherit; color: var(--ink-3); cursor: pointer; min-height: 24px; }
.card-quick button:hover, .card-quick button:focus-visible, .card-quick button[aria-expanded="true"] {
  border-color: var(--line-strong); background: var(--hover); color: var(--ink); }
.card-quick .card-prio.prio-high, .card-quick .card-prio.prio-urgent { color: var(--rust); font-weight: 700; }
.card-quick .card-prio.prio-low svg { opacity: .45; }
.card-quick .card-assign { padding: 1px; }
.card-quick .card-assign.is-empty { width: 24px; justify-content: center; border-style: dashed; border-color: var(--line-strong); }
.card-pop { position: absolute; z-index: 80; min-width: 190px; max-width: min(300px, calc(100vw - 16px)); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
  display: grid; gap: 2px; }
.card-pop input[type=search] { width: 100%; margin-bottom: 4px; }
.card-pop-list { display: grid; gap: 2px; max-height: 280px; overflow: auto; }
.card-pop-head { font-size: .74rem; font-weight: 700; color: var(--ink-3); padding: 6px 8px 2px; }
.card-pop-opt { text-align: left; border: 0; background: none; border-radius: 6px; padding: 6px 8px; font: inherit;
  font-size: .86rem; color: var(--ink); cursor: pointer; }
.card-pop-opt:hover, .card-pop-opt:focus-visible { background: var(--hover); outline: none; }
.card-pop-opt[aria-selected="true"] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 700; }
.card-pop-opt.prio-urgent, .card-pop-opt.prio-high { color: var(--rust); }
.card-pop-opt.is-none { color: var(--ink-2); font-style: italic; }

/* --- Version 16.0: the personal dashboard – modules in a grid of six columns, the designer ------------------------ */
.dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: start; }
.dash-grid > .panel { margin: 0; min-width: 0; }
.dash-s { grid-column: span 2; }
.dash-m { grid-column: span 3; }
.dash-l { grid-column: span 4; }
.dash-f { grid-column: 1 / -1; }
@media (max-width: 1100px) { .dash-s { grid-column: span 3; } .dash-l { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dash-grid > .dash-mod { grid-column: 1 / -1; } }
.dash-mod h3 { font-size: .95rem; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-mod .plain-list li { gap: 10px; }
.dash-mod.dash-f.panel[data-mod="tiles"] { background: none; border: 0; box-shadow: none; padding: 0; }
.dash-mod[data-mod="tiles"] .mydash-tiles { margin-bottom: 0; }
.mydash:not(.is-editing) .dash-mod.is-empty { display: none; }
.mydash.is-editing .dash-mod { outline: 2px dashed var(--line-strong); outline-offset: 2px; }
.mydash.is-editing .dash-mod.is-empty { opacity: .75; }
.mydash.is-editing .dash-mod.dash-f.panel[data-mod="tiles"] { background: var(--surface); border: 1px solid var(--line); padding: 12px; }
.dash-mod-bar { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dash-mod-bar[hidden] { display: none; }
.dash-mod-bar strong { margin-right: auto; font-size: .86rem; }
.dash-mod-bar select { width: auto; font-size: .82rem; padding-block: 2px; }
.dash-handle { cursor: grab; color: var(--ink-3); display: inline-flex; }
.dash-designer { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--bluetree); border-radius: var(--radius-m);
  background: var(--bluetree-soft); display: grid; gap: 10px; }
.dash-designer[hidden] { display: none; }
.dash-designer p { margin: 0; }
.dash-palette, .dash-designer-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dash-palette [hidden] { display: none; }
.dash-ai { display: flex; gap: 8px; align-items: flex-end; }
.dash-ai textarea { flex: 1; min-height: 48px; resize: vertical; }
.dash-big { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.dash-big strong { font-size: 1.6rem; }
.dash-news li span:first-child { min-width: 0; }
.dash-news .tech-chip { font-size: .7rem; margin-left: 4px; }
.dash-empty { margin: 0; }
.mydash.is-editing .dash-mod > h3 { display: none; }
.dash-mod-bar { cursor: grab; }
.dash-mod-bar select, .dash-mod-bar button { cursor: pointer; }

/* --- Version 16.0: TeamViewer state, additional fields ------------------------------------------------------------ */
.tv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tv-state { font-size: .76rem; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); }
.tv-state.tv-online { color: var(--leaf); border-color: var(--leaf); }
.tv-state.tv-offline { color: var(--ink-3); }
.tv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.tv-dot.tv-online { background: var(--leaf); }
.vm-power { font-size: .72rem; border-radius: 999px; padding: 0 7px; border: 1px solid var(--line); color: var(--ink-2); }
.vm-power.vm-running { color: var(--leaf); border-color: var(--leaf); }

/* --- Version 16.0: the assistant does things – photos of a room, deletions to confirm ---------------------------- */
.ai-composer { flex-wrap: wrap; }
.ai-photo-list { flex-basis: 100%; display: flex; gap: 6px; flex-wrap: wrap; }
.ai-photo-chip { position: relative; display: inline-block; }
.ai-photo-chip img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.ai-photo-chip button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); font-size: .8rem; line-height: 1; }
.ai-photo-btn { align-self: flex-end; }
.ai-photos { margin-top: 4px; }
.ai-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--rust); border-radius: var(--radius-m); background: var(--surface); }
.ai-confirm-deleted, .ai-confirm-kept { border-color: var(--line); color: var(--ink-2); }
.ai-confirm .ai-act.danger { color: #fff; background: var(--rust); border-color: var(--rust); }

/* --- Version 17.1: users – a calmer table, the form of a new user ------------------------------------------------ */
.user-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.user-table tr.is-inactive td { opacity: .65; }
.user-name { font-weight: 700; }
.user-cell code { font-size: .8rem; }
.user-actions { white-space: nowrap; text-align: right; }
.user-actions > * { margin-left: 6px; vertical-align: middle; }
.user-actions .btn svg { width: 14px; height: 14px; }
.user-more { display: inline-block; position: relative; }
.user-more > summary { list-style: none; min-width: 30px; justify-content: center; }
.user-more > summary::-webkit-details-marker { display: none; }
.user-more-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 190px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop);
  display: grid; gap: 2px; text-align: left; }
.user-more-menu form { margin: 0; }
.user-more-menu .link-button { display: block; width: 100%; text-align: left; padding: 6px 8px; border-radius: 6px; }
.user-more-menu .link-button:hover { background: var(--hover); }
.user-new-form { max-width: 860px; }
.role-pick, .group-pick { display: grid; gap: 8px; }
.role-pick { max-height: none; overflow: visible; }
.group-pick { max-height: 280px; overflow: auto; padding-right: 6px; }
.group-filter { max-width: 320px; margin-bottom: 8px; }

/* --- Version 17.1: finance ------------------------------------------------------------------------------------ */
.finance-tabs { align-items: center; }
.finance-state { margin-left: auto; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px;
  border: 1px solid var(--line); color: var(--ink-3); }
.finance-state.is-on { color: var(--leaf); border-color: var(--leaf); }
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.finance-two { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); }
.fin-table code { font-size: .86rem; }
.fin-table tr.is-inactive td { opacity: .6; }
.import-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 0;
  border-top: 1px solid var(--line); }
.import-row:first-of-type { border-top: 0; }
.import-row input[type=file] { margin-top: 6px; }
.vat-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.vat-group { padding: 8px 0 12px; border-bottom: 1px solid var(--line); }
.vat-group:last-child { border-bottom: 0; }
.vat-group-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.vat-now { margin-left: auto; font-size: .82rem; color: var(--ink-2); }
.vat-rates td, .vat-rates th { padding-top: 4px; padding-bottom: 4px; }
.vat-add { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.invoice-form { flex-wrap: wrap; gap: 8px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-weight: 600; }
.activity-table td { vertical-align: middle; }
.activity-table input[type=text] { min-width: 180px; }
.activity-table .num-input { max-width: 110px; text-align: right; }
.activity-table .small-num { max-width: 80px; }
.activity-table select { max-width: 240px; }
.activity-table th.center, .activity-table td.center { text-align: center; }
.activity-table tr.is-inactive td { opacity: .65; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions form { display: inline-flex; margin: 0 0 0 6px; }
.activity-table .row-actions { flex-wrap: nowrap; justify-content: flex-end; }

/* --- Version 17.2: delete and edit as icons (red X, pencil) --------------------------------------------------- */
.act-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; vertical-align: middle; list-style: none;
  text-decoration: none; flex: none; }
.act-icon::-webkit-details-marker { display: none; }
.act-icon svg { width: 17px; height: 17px; }
.act-icon:hover, .act-icon:focus-visible { background: var(--hover); color: var(--ink); text-decoration: none; }
.act-icon.act-del { color: var(--rust); }
.act-icon.act-del svg { stroke-width: 2.4; }
.act-icon.act-del:hover, .act-icon.act-del:focus-visible { background: color-mix(in srgb, var(--rust) 12%, transparent); color: var(--rust); }
.act-icon[disabled] { opacity: .4; cursor: default; }
details > summary.act-icon { display: inline-grid; }
.inline-form .act-icon, td .act-icon { margin: -4px 0; }
/* Version 17.2: somebody else changed the page while you type */
.live-note { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, .18); font-size: .92rem; max-width: calc(100vw - 40px); }
/* Version 17.2: remote connection of a device */
.remote-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--bluetree);
  vertical-align: -5px; margin-left: 4px; }
.remote-ico svg { width: 16px; height: 16px; }
.remote-ico:hover { background: var(--hover); }
.remote-ico.tv-online { color: var(--leaf); }
.remote-ico.tv-offline { color: var(--ink-3); }
.pw-linked li { display: flex; align-items: center; gap: 8px; }
.pw-linked li .inline-form { margin-left: auto; }
.pw-panel-actions { display: grid; gap: 8px; margin-top: 10px; }
.pw-panel-actions select { min-width: 0; max-width: 100%; }
/* Version 17.2: monitoring – the numbers are links, filters as chips */
.sm-stat-link { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.sm-stat-link:hover { border-bottom-style: solid; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; color: var(--ink-2); text-decoration: none; background: var(--surface); }
.sm-chip:hover { background: var(--hover); }
.sm-chip.is-on { border-color: var(--bluetree); color: var(--bluetree-strong, var(--ink)); background: var(--bluetree-soft); font-weight: 600; }
.sm-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
/* Version 17.2: the overview of a customer or site – modules like the dashboard */
.custdash { margin-top: 6px; }
.custdash-head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.custdash.is-editing .custdash-head { display: none; }
.cd-head { display: flex; align-items: center; gap: 8px; }
.cd-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.act-icon.act-add { color: var(--bluetree); }
.cd-new { position: relative; }
.cd-new > summary { list-style: none; }
.cd-new-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.cd-new-menu a { padding: 6px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.cd-new-menu a:hover { background: var(--hover); }
.cd-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cd-list > li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.cd-list > li:first-child { border-top: 0; }
.cd-contacts > li { align-items: flex-start; }
.cd-contacts > li > div:first-child { flex: 1; min-width: 0; }
.cd-reach { display: grid; justify-items: end; gap: 2px; }
.cd-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cd-kpis { margin: 0; }
.cd-mon { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-mon-n { display: grid; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); min-width: 110px; }
.cd-mon-n strong { font-size: 1.4rem; }
.cd-mon-n:hover { background: var(--hover); }

/* --- Version 18: notifications – read, done, delete right in the list ------------------------------------------- */
.notify-actions-list > li, .bell-panel li { display: flex; align-items: flex-start; gap: 6px; }
.notify-actions-list > li > a, .bell-panel li > a { flex: 1; min-width: 0; }
.notify-acts { display: inline-flex; gap: 2px; flex: none; padding-top: 4px; }
.notify-list li.is-done { opacity: .62; }
.notify-list li.is-done .notify-title { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.act-icon.act-done { color: var(--leaf); }
.act-icon.act-done.is-on { background: color-mix(in srgb, var(--leaf) 14%, transparent); }
.notify-filter { margin: 0 0 12px; }
/* Version 18: a module of the navigation in a new window */
.side-row { position: relative; display: flex; align-items: center; }
.side-row > .side-link { flex: 1; min-width: 0; }
.side-window { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 6px; color: var(--side-ink-2, var(--ink-3)); opacity: 0; transition: opacity .12s; }
.side-window svg { width: 14px; height: 14px; }
.side-row:hover .side-window, .side-window:focus-visible { opacity: 1; }
.side-window:hover { background: var(--side-hover, var(--hover)); color: var(--side-ink, var(--ink)); }
.side-row:hover > .side-link .side-count { margin-right: 26px; }
@media (hover: none) { .side-window { opacity: .7; } }
.admin-tile { position: relative; }
.admin-tile-ext { position: absolute; top: 10px; right: 10px; color: var(--ink-3); }
.admin-tile-ext svg { width: 14px; height: 14px; }
.nav-admin-list { list-style: none; margin: 10px 0 16px; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.nav-admin-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.nav-admin-list .check { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.nav-admin-move { margin-left: auto; display: inline-flex; gap: 2px; }
.nav-admin-move .act-icon { font-size: .7rem; }
/* Version 18: the manual */
.manual-search { flex: 1; max-width: 420px; }
.manual-search input { width: 100%; }
.manual-toc { list-style: none; margin: 4px 0 8px 10px; padding: 0; border-left: 2px solid var(--line); }
.manual-toc li a { display: block; padding: 2px 8px; font-size: .82rem; color: var(--ink-2); }
.manual-toc li.lvl-3 a { padding-left: 18px; font-size: .78rem; }
.manual-doc { max-width: 920px; line-height: 1.6; }
.manual-doc h1 { font-size: 1.7rem; margin-top: 0; }
.manual-doc h2 { margin-top: 1.8em; padding-top: .4em; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.manual-doc h3 { scroll-margin-top: 72px; }
.manual-doc pre { overflow-x: auto; background: var(--paper); padding: 12px; border-radius: 8px; }
.manual-doc table { border-collapse: collapse; display: block; overflow-x: auto; }
.manual-doc th, .manual-doc td { border: 1px solid var(--line); padding: 4px 8px; }
/* Version 18: platform services */
.platform-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.platform-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .platform-layout { grid-template-columns: 1fr; } }
/* Version 18: objects named in a description */
.prose a.asset-ref { text-decoration: none; border-bottom: 1px dashed currentColor; }
.sr-connect { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.tv-state { font-size: .8rem; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--ink-2); }
.tv-state.tv-online { background: color-mix(in srgb, var(--leaf) 16%, transparent); color: var(--leaf); }
.tv-state.tv-offline { color: var(--ink-3); }
/* Version 18: chat – new and unanswered in red, search, hide and own window per chat */
.chat-unread, .side-chat .side-count, [data-side-chat-count] { background: var(--rust); border-color: var(--rust); color: #fff; }
.side-link[aria-current="page"].side-chat .side-count { background: var(--rust); border-color: var(--rust); color: #fff; }
.chat-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rust); margin-left: auto;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rust) 25%, transparent); }
.chat-search { padding: 0 10px 8px; }
.chat-search input { width: 100%; }
.chat-row-acts { position: absolute; right: 32px; display: none; gap: 2px; align-items: center; }
.chat-list li:hover .chat-row-acts, .chat-list li:focus-within .chat-row-acts { display: inline-flex; }
.chat-list li:hover > a, .chat-list li:focus-within > a { padding-right: 92px; }
.chat-row-btn { border: 0; background: transparent; color: var(--ink-3); cursor: pointer; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 6px; }
.chat-row-btn:hover, .chat-row-btn:focus-visible { background: var(--hover); color: var(--ink); }
.chat-row-btn svg { width: 14px; height: 14px; }
.chat-hidden-toggle { margin: 0; padding: 6px 16px 10px; }
.chat-results { max-width: 90ch; overflow: auto; }
.chat-people-results, .chat-hit-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.chat-people-results li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; }
.chat-people-name { flex: 1; min-width: 180px; }
.chat-people-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chat-hit-list a { display: block; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.chat-hit-list a:hover { background: var(--hover); }
.chat-hit-text { display: block; margin-top: 2px; color: var(--ink-2); font-size: .9rem; }
.chat-hit-text mark { background: color-mix(in srgb, var(--amber, #e0a100) 35%, transparent); color: inherit; border-radius: 3px; }
.chat-del-dialog { width: min(480px, 94vw); padding: 18px 20px; }
.chat-del-dialog h2 { margin-top: 0; font-size: 1.1rem; }
.side-link[aria-current="page"] [data-side-chat-count] { background: var(--rust); border-color: var(--rust); color: #fff; }
.chat-results h1 { margin-bottom: 4px; }
.chat-results h2 { margin: 18px 0 8px; font-size: 1rem; }
/* Version 18: what an agent is doing right now */
.agent-now { margin: 6px 0 0; color: var(--bluetree-strong, var(--ink-2)); }
.agent-now .icon-inline { animation: gbt-pulse 1.6s ease-in-out infinite; }
@keyframes gbt-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .agent-now .icon-inline { animation: none; } }
.agent-now-panel { border-left: 3px solid var(--bluetree, var(--brand)); }
.agent-now-panel h2 { margin-top: 0; font-size: 1.05rem; }
/* Version 18: the tree of the customer list */
.cust-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cust-layout { grid-template-columns: 1fr; } }
.cust-tree { position: sticky; top: 72px; max-height: calc(100vh - 96px); overflow: auto; }
.cust-tree h2 { margin: 0 0 4px; font-size: 1rem; }
.ct-list, .ct-sub { list-style: none; margin: 0; padding: 0; }
.ct-sub { padding-left: 18px; border-left: 1px solid var(--line); margin-left: 11px; }
.ct-list li { margin: 1px 0; }
.ct-list li > a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .9rem; }
.ct-list li > a:hover { background: var(--hover); }
.ct-toggle { border: 0; background: transparent; width: 22px; height: 22px; padding: 0; cursor: pointer; color: var(--ink-3);
  display: inline-grid; place-items: center; border-radius: 6px; vertical-align: middle; }
.ct-toggle:hover, .ct-toggle:focus-visible { background: var(--hover); color: var(--ink); }
.ct-toggle svg { width: 14px; height: 14px; transition: transform .15s; }
[aria-expanded="true"] > .ct-toggle svg { transform: rotate(90deg); }
[aria-busy="true"] > .ct-toggle { opacity: .4; }
.ct-group-label { display: block; margin-top: 6px; font-size: .76rem; font-weight: 700; color: var(--ink-3); }
.ct-leaf > a { font-size: .86rem; }
.ct-count { margin-left: 4px; font-size: .74rem; color: var(--ink-3); }
/* Version 18: templates of the AI assistant */
.ai-templates { position: relative; align-self: flex-end; }
.ai-templates > summary { list-style: none; }
.ai-templates > summary::-webkit-details-marker { display: none; }
.ai-tpl-panel { position: absolute; bottom: 44px; left: 0; z-index: 50; width: min(420px, 86vw); padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.ai-tpl-list { list-style: none; margin: 6px 0 10px; padding: 0; max-height: 240px; overflow: auto; }
.ai-tpl-list li { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.ai-tpl-list .link-button { text-align: left; flex: 1; }
.ai-tpl-save { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.ai-tpl-save label { font-size: .84rem; }
/* Version 18.1: «Mailbox» – the webmail (mailboxes and folders | messages | reading pane) */
.wm-empty { max-width: 70ch; }
.wm-empty h1 { margin-top: 0; }
.wm-app { position: relative; display: grid; grid-template-columns: var(--wm-c1, 230px) var(--wm-c2, 380px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 112px); min-height: 520px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.wm-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.wm-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface-2); }
.wm-search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.wm-search input { border: 0; background: transparent; flex: 1; padding: 7px 0; min-width: 0; }
.wm-search input:focus { outline: none; }
.wm-search:focus-within { border-color: var(--bluetree); box-shadow: 0 0 0 3px var(--bluetree-soft); }
.wm-bar-end { margin-left: auto; display: inline-flex; gap: 4px; }
.wm-folders { overflow: auto; padding: 8px 6px 16px; border-right: 1px solid var(--line); background: var(--surface-2); }
.wm-box + .wm-box { margin-top: 6px; }
.wm-box-head { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; padding: 6px 8px;
  font-weight: 650; color: var(--ink); cursor: pointer; border-radius: var(--radius-s); text-align: left; }
.wm-box-head:hover { background: var(--hover); }
.wm-box-head svg { width: 14px; height: 14px; transition: transform .15s; flex: none; }
.wm-box-head[aria-expanded="true"] svg { transform: rotate(90deg); }
.wm-box-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-tag { font-size: .7rem; font-weight: 600; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; flex: none; }
.wm-folder-list { list-style: none; margin: 0; padding: 0 0 0 10px; }
.wm-folder { position: relative; }
.wm-folder > .wm-folder-list { display: none; }
.wm-folder.is-open > .wm-folder-list { display: block; }
.wm-ftoggle { position: absolute; left: -12px; top: 6px; width: 16px; height: 16px; border: 0; padding: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.wm-ftoggle svg { width: 12px; height: 12px; transition: transform .15s; }
.wm-folder.is-open > .wm-ftoggle svg { transform: rotate(90deg); }
.wm-fbtn { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent; padding: 5px 8px;
  border-radius: var(--radius-s); color: var(--ink); cursor: pointer; text-align: left; font-size: .9rem; }
.wm-fbtn:hover { background: var(--hover); }
.wm-fbtn[aria-current] { background: var(--bluetree-soft); color: var(--bluetree-strong); font-weight: 650; }
.wm-fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-fcount { font-size: .78rem; font-weight: 700; color: var(--bluetree-strong); }
.wm-box-error { color: var(--rust); padding: 4px 10px; margin: 0; }
.wm-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.wm-list-head { padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.wm-list-head h2 { margin: 0 0 8px; font-size: 1.05rem; }
.wm-chips .sm-chip { font-size: .78rem; padding: 2px 9px; cursor: pointer; background: transparent; }
.wm-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 6px 10px; background: var(--bluetree-soft); font-size: .85rem; }
.wm-bulk [data-wm-bulk-count] { font-weight: 650; margin-right: 6px; }
.wm-messages { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; outline: none; }
.wm-msg { display: grid; grid-template-columns: 18px 32px minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 12px 9px 8px;
  border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.wm-msg:hover { background: var(--hover); }
.wm-msg.is-current { background: var(--bluetree-soft); }
.wm-msg.is-selected { background: color-mix(in srgb, var(--bluetree-soft) 70%, var(--surface)); }
.wm-msg.is-unread { border-left-color: var(--bluetree); }
.wm-msg.is-unread .wm-msg-from, .wm-msg.is-unread .wm-msg-subject { font-weight: 700; }
.wm-msg.is-unread .wm-msg-subject { color: var(--bluetree-strong); }
.wm-check { margin: 9px 0 0; opacity: 0; }
.wm-msg:hover .wm-check, .wm-check:checked, .wm-check:focus-visible { opacity: 1; }
.wm-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700;
  color: #fff; background: hsl(var(--h, 220) 45% 46%); }
.wm-avatar-l { width: 40px; height: 40px; font-size: .9rem; flex: none; }
.wm-msg-top { display: flex; align-items: baseline; gap: 8px; }
.wm-msg-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.wm-msg-meta { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--ink-3); flex: none; }
.wm-mi svg { width: 13px; height: 13px; vertical-align: -2px; }
.wm-flagged { color: var(--rust); }
.wm-msg.is-flagged { background: color-mix(in srgb, var(--rust) 6%, transparent); }
.wm-msg-subject, .wm-msg-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.wm-msg-preview { color: var(--ink-3); font-size: .8rem; }
.wm-none, .wm-loading { padding: 18px 14px; list-style: none; }
.wm-more { margin: 8px auto; display: block; }
.wm-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; }
.wm-placeholder { margin: auto; text-align: center; color: var(--ink-3); padding: 24px; }
.wm-placeholder svg { width: 48px; height: 48px; opacity: .45; }
.wm-read-head { padding: 14px 20px 10px; border-bottom: 1px solid var(--line); }
.wm-read-subject { margin: 0 0 10px; font-size: 1.2rem; line-height: 1.3; }
.wm-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.wm-actions .is-on { color: var(--rust); }
.wm-danger { color: var(--rust); }
.wm-move { font-size: .84rem; padding: 3px 6px; max-width: 170px; }
.wm-from { display: flex; gap: 10px; align-items: flex-start; }
.wm-from-text { flex: 1; min-width: 0; font-size: .9rem; }
.wm-rcpt { font-size: .82rem; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.wm-rcpt-label { color: var(--ink-3); margin-right: 4px; }
.wm-date { flex: none; }
.wm-customer { display: inline-block; margin-top: 8px; }
.wm-images { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 20px; font-size: .84rem;
  background: color-mix(in srgb, var(--amber, #e0a100) 14%, var(--surface)); border-bottom: 1px solid var(--line); }
.wm-files { list-style: none; margin: 0; padding: 10px 20px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.wm-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-m);
  color: var(--ink); text-decoration: none; font-size: .84rem; max-width: 260px; }
.wm-file:hover { background: var(--hover); }
.wm-file svg { width: 15px; height: 15px; flex: none; }
.wm-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-body { flex: 1; min-height: 360px; width: 100%; border: 0; background: #fff; }
.wm-compose { display: flex; flex-direction: column; gap: 0; padding: 12px 20px 16px; min-height: 100%; }
.wm-cfield { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 4px 0; }
.wm-cfield.is-hidden { display: none; }
.wm-clabel { width: 64px; flex: none; color: var(--ink-3); font-size: .86rem; }
.wm-cfield input, .wm-cfield select { flex: 1; border: 0; padding: 7px 2px; background: transparent; min-width: 0; }
.wm-cfield input:focus, .wm-cfield select:focus { outline: 2px solid var(--bluetree-soft); }
.wm-ccbcc { flex: none; }
.wm-editor { min-height: 260px; margin-top: 10px; }
.wm-compose .ql-container { min-height: 220px; font-size: .95rem; }
.wm-quoted { margin: 8px 0; }
.wm-cbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wm-cfiles { font-size: .8rem; max-width: 260px; }
.wm-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-size: .88rem; box-shadow: var(--shadow-pop); z-index: 20; }
.wm-toast.is-bad { background: var(--rust); color: #fff; }
.wm-single { grid-template-columns: minmax(0, 1fr); }
.wm-single .wm-folders, .wm-single .wm-list, .wm-single .wm-bar { display: none; }
.side-mail-count { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink, #fff); }
@media (max-width: 1100px) {
  .wm-app { grid-template-columns: minmax(180px, 210px) minmax(0, 1fr); }
  .wm-read { position: absolute; inset: 52px 0 0 0; background: var(--surface); z-index: 5; }
  .wm-read:has(.wm-placeholder) { display: none; }
}
@media (max-width: 720px) {
  .wm-app { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 80vh; }
  .wm-folders { max-height: 30vh; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .wm-box-head svg, .wm-ftoggle svg { transition: none; } }
/* Version 18.1: mailboxes of the webmail (settings) */
.wm-set-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wm-set-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.wm-set-list .wm-set-name { flex: 1; min-width: 200px; }
.wm-set-list input[type=text] { max-width: 260px; }
.wm-bulk[hidden], .wm-more[hidden] { display: none; }
/* Version 18.5: widths, favourites, «All inboxes», the mailbox of an e-mail, recipients as chips, signature, drop */
.wm-split { position: absolute; bottom: 0; width: 7px; cursor: col-resize; z-index: 6; touch-action: none; }
.wm-split::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background .12s; }
.wm-split:hover::after, .wm-split:focus-visible::after, .wm-app.is-resizing .wm-split::after { background: var(--bluetree); width: 2px; left: 2px; }
.wm-split:focus-visible { outline: none; }
.wm-app.is-resizing { cursor: col-resize; user-select: none; }
.wm-app.is-resizing iframe { pointer-events: none; }
.wm-favs-head { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 8px; font-size: .78rem; font-weight: 650; color: var(--ink-3); }
.wm-favs-head svg { width: 14px; height: 14px; color: var(--amber, #c99400); }
.wm-favs { padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.wm-fav-list { padding-left: 4px; }
.wm-fbtn > svg { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.wm-fbtn.is-fav .wm-fname::after { content: "★"; margin-left: 5px; font-size: .7rem; color: var(--amber, #c99400); }
.wm-fav-box { font-size: .68rem; color: var(--ink-3); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-left: 2px solid var(--mb, var(--line)); padding-left: 5px; }
.wm-fav-dots { display: inline-flex; gap: 2px; }
.wm-box-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mb, var(--ink-3)); flex: none; }
.wm-msg.has-box { box-shadow: inset 2px 0 0 var(--mb); }
.wm-msg-box { display: inline-block; max-width: 40%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; margin-right: 6px;
  padding: 0 5px; font-size: .7rem; line-height: 1.5; border-radius: 4px; color: var(--ink-2);
  background: color-mix(in srgb, var(--mb) 13%, transparent); }
.wm-in-box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; padding: 4px 10px; font-size: .82rem;
  border-radius: var(--radius-s); border-left: 3px solid var(--mb); background: color-mix(in srgb, var(--mb) 8%, var(--surface)); }
.wm-in-box svg { width: 14px; height: 14px; color: var(--mb); }
.wm-in-box-label { color: var(--ink-3); }
.wm-from-box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex: 1; padding: 6px 10px; font-size: .88rem; border-radius: var(--radius-s);
  border-left: 3px solid var(--mb); background: color-mix(in srgb, var(--mb) 9%, var(--surface)); }
.wm-from-box svg { width: 15px; height: 15px; color: var(--mb); }
.wm-from-row select { font-weight: 600; }
.wm-chips-field { position: relative; align-items: flex-start; }
.wm-chips-field .wm-clabel { padding-top: 7px; }
.wm-chipbox { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 34px; padding: 3px 0; cursor: text; }
.wm-chip-input { flex: 1; min-width: 140px; border: 0; padding: 5px 2px; background: transparent; }
.wm-chip-input:focus { outline: none; }
.wm-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 9px; border-radius: 999px; font-size: .84rem;
  background: var(--bluetree-soft); color: var(--bluetree-strong); max-width: 100%; }
.wm-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-chip.is-bad { background: color-mix(in srgb, var(--rust) 14%, transparent); color: var(--rust); }
.wm-chip-x { border: 0; background: transparent; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.wm-chip-x:hover, .wm-chip-x:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); outline: none; }
.wm-chip-x svg { width: 12px; height: 12px; }
.wm-suggest { position: absolute; left: 74px; right: 0; top: 100%; z-index: 30; list-style: none; margin: 2px 0 0; padding: 4px; max-height: 280px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); }
.wm-sug { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.wm-sug svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ink-3); }
.wm-sug.is-active, .wm-sug:hover { background: var(--bluetree-soft); }
.wm-sug-text { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 4px; }
.wm-sug-sub { flex-basis: 100%; }
.wm-sig { position: relative; display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: var(--radius-m); background: #fff; }
.wm-sig[hidden] { display: none; }
.wm-sig-view { flex: 1; min-width: 0; overflow: auto; }
.wm-sig-pick { display: inline-flex; align-items: center; gap: 4px; }
.wm-sig-pick[hidden] { display: none; }
.wm-sig-pick svg { width: 16px; height: 16px; color: var(--ink-3); }
.wm-sig-select { font-size: .84rem; padding: 3px 6px; max-width: 220px; }
.wm-attached { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.wm-attached:empty { display: none; }
.wm-attached .act-icon { margin-left: 2px; }
.wm-compose { position: relative; }
.wm-drop { position: absolute; inset: 6px; z-index: 40; display: grid; place-items: center; border: 2px dashed var(--bluetree);
  border-radius: var(--radius-l); background: color-mix(in srgb, var(--bluetree-soft) 85%, transparent); color: var(--bluetree-strong);
  font-weight: 650; pointer-events: none; }
.wm-drop[hidden] { display: none; }
.wm-dialog { min-width: min(420px, 92vw); }
.wm-dialog .field { display: grid; gap: 4px; margin-bottom: 14px; }
.wm-pick { list-style: none; margin: 0 0 14px; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-m); }
.wm-pick-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.wm-pick-btn:hover, .wm-pick-btn:focus-visible { background: var(--bluetree-soft); outline: none; }
.wm-pick-btn svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.wm-set-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex-basis: 100%; padding-left: 30px; }
.wm-set-extra select { font-size: .84rem; padding: 2px 6px; margin-left: 4px; }
.wm-set-color input[type=color] { width: 30px; height: 22px; padding: 0; border: 1px solid var(--line); vertical-align: middle; margin-left: 4px; }
.sig-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.sig-vars .sm-chip { cursor: pointer; font-family: var(--mono, monospace); font-size: .78rem; }
.sig-editor { min-height: 180px; background: #fff; color: #1b1f24; }
.sig-preview { width: 100%; min-height: 200px; border: 1px solid var(--line); border-radius: var(--radius-m); background: #fff; }
.wm-set-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mb); }
@media (max-width: 1100px) { .wm-split { display: none; } }
@media (prefers-reduced-motion: reduce) { .wm-split::after { transition: none; } }
.wm-actions .btn svg, .wm-images .btn svg, .wm-cbar .btn svg { width: 15px; height: 15px; }
.wm-set-list .dash-handle { cursor: grab; color: var(--ink-3); display: inline-grid; }
.wm-set-list .dash-handle svg { width: 16px; height: 16px; }
/* Version 18.2: templates of the AI assistant (administration) */
.tpl-admin { display: grid; gap: 16px; max-width: 980px; }
.tpl-admin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tpl-admin-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-m); }
.tpl-admin-main { flex: 1; min-width: 0; }
.tpl-admin-main p { margin: 4px 0 0; }
.tpl-admin-text { color: var(--ink-2); white-space: pre-wrap; }
.ai-tpl-desc { display: block; font-size: .78rem; color: var(--ink-3); }
.ai-tpl-org { font-size: .7rem; font-weight: 700; color: var(--bluetree-strong); margin-right: 4px; }
.ai-tpl-ctx { display: grid; gap: 6px; margin: 8px 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.ai-tpl-ctx[hidden] { display: none; }

/* version 18.2: connect directly or send a request (remote.js) */
dialog.rc-dialog { width: min(540px, 94vw); }
.rc-dialog h3 { margin: 14px 0 4px; font-size: 1rem; }
.rc-dialog section { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 10px; }
.rc-form label { display: grid; gap: 4px; }
.rc-other { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.rc-other[hidden] { display: none; }
.rc-ok { color: var(--ok, #15803d); font-weight: 600; }
.rc-err { color: var(--danger, #b91c1c); }
.rc-history { margin: 4px 0 0; padding-left: 18px; }
.rc-foot { justify-content: flex-end; }

/* version 18.2: grouped objects (Drawings › Grouped objects) */
.grp-table input, .grp-table select { width: 100%; min-width: 0; }
.grp-table .grp-num { max-width: 7em; }
.grp-list { list-style: none; margin: 0; padding: 0; }
.grp-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.grp-list li:last-child { border-bottom: 0; }
.grp-list li.is-off { opacity: .65; }
.grp-main { flex: 1; display: grid; gap: 2px; }
.grp-acts { display: inline-flex; gap: 4px; }

/* version 18.2: grouped objects in the drawing editor */
.ge-group-list { display: grid; gap: 6px; padding: 4px 2px; }
.ge-group-item { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border: 1px solid #bae6fd; border-radius: 8px;
  background: #f0f9ff; color: #0c4a6e; cursor: grab; font: inherit; }
.ge-group-item:hover, .ge-group-item:focus-visible { border-color: #0284c7; background: #e0f2fe; }
.ge-group-item .ge-hint { font-size: .78rem; }
.ge-group-form { display: grid; gap: 8px; }
.ge-group-form h4 { margin: 6px 0 0; font-size: .9rem; }
.ge-group-counts .ge-num, .ge-group-sec .ge-num { max-width: 6em; }
.ge-check { display: flex; gap: 6px; align-items: flex-start; font-size: .88rem; }
.ge-group-sec { display: grid; gap: 6px; margin: 0 0 10px; padding: 8px; border: 1px solid #bae6fd; border-radius: 8px; background: #f8fcff; }
.ge-remote { cursor: pointer; }
.ge-remote:hover rect { filter: brightness(1.15); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ge-group-item { background: #0b2533; border-color: #075985; color: #e0f2fe; }
  :root:not([data-theme="light"]) .ge-group-sec { background: #0b1d27; border-color: #075985; }
}
:root[data-theme="dark"] .ge-group-item { background: #0b2533; border-color: #075985; color: #e0f2fe; }
:root[data-theme="dark"] .ge-group-sec { background: #0b1d27; border-color: #075985; }
#people .cd-list li > span:last-child { display: inline-flex; align-items: center; gap: 8px; }
#people .cd-list .inline-form { display: inline; margin: 0; }

/* version 18.2: Administration › Keycloak (IAM) */
.iam-state { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.iam-state li { display: grid; gap: 2px; padding: 8px 10px 8px 34px; border: 1px solid var(--line); border-radius: 8px; position: relative; }
.iam-state li::before { content: ""; position: absolute; left: 11px; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); }
.iam-state li.is-done::before { background: var(--ok, #15803d); border-color: var(--ok, #15803d); }
.iam-errors { margin: 4px 0 0; color: var(--danger, #b91c1c); }
.code-block { overflow-x: auto; padding: 10px 12px; border-radius: 8px; background: var(--code-bg, #0f172a); color: #e2e8f0; font-size: .82rem; }
.login-local { margin-top: 10px; text-align: center; }
/* Version 18.5: telephone system – the card of a call (bottom right), records, administration */
.tel-stack { position: fixed; right: 16px; bottom: 16px; z-index: 140; display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.tel-pop { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bluetree); border-radius: var(--radius-l);
  box-shadow: var(--shadow-pop); padding: 10px 12px 10px 14px; font-size: .9rem; }
.tel-pop[data-state="ringing"] { border-left-color: var(--leaf, #2f7d32); }
.tel-pop[data-state="missed"] { border-left-color: var(--rust); }
.tel-pop[data-state="ended"] { border-left-color: var(--ink-3); }
.tel-pop.is-new { animation: tel-in .25s ease-out; }
@keyframes tel-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tel-pop[data-state="ringing"] .tel-pop-state::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
  background: var(--leaf, #2f7d32); animation: tel-ring 1s infinite; }
@keyframes tel-ring { 50% { opacity: .25; } }
.tel-pop-head { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: .78rem; font-weight: 650; }
.tel-pop-timer { margin-left: auto; font-variant-numeric: tabular-nums; }
.tel-pop-x { border: 0; background: transparent; font-size: 1.2rem; line-height: 1; padding: 0 2px; color: var(--ink-3); cursor: pointer; }
.tel-pop-x:hover, .tel-pop-x:focus-visible { color: var(--ink); }
.tel-pop-who { display: flex; flex-direction: column; margin: 4px 0 2px; }
.tel-pop-name { font-size: 1.08rem; line-height: 1.3; }
.tel-pop-num { font-variant-numeric: tabular-nums; }
.tel-pop-facts { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .82rem; color: var(--ink-2); }
.tel-pop-items { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); font-size: .82rem; }
.tel-pop-items ul { margin: 2px 0 0; padding-left: 16px; }
.tel-pop-sub { font-weight: 650; color: var(--ink-2); }
.tel-pop-form { display: grid; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.tel-pop-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tel-pop-note { width: 100%; font: inherit; font-size: .85rem; min-height: 52px; height: 58px; max-height: 160px; resize: vertical; }
.tel-pop-foot { margin-top: 8px; font-size: .82rem; }
.tel-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: .78rem;
  background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--tc) 40%, transparent); }
.tel-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); }
.tel-chip-btn { cursor: pointer; }
.tel-chip-btn.is-on { background: var(--tc); color: #fff; }
.tel-chip-btn.is-on::before { background: #fff; }
.tel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.tel-tags { display: flex; flex-wrap: wrap; gap: 6px 10px; border: 0; padding: 0; margin: 0 0 10px; }
.tel-tags legend { font-weight: 650; margin-bottom: 4px; }
.tel-tagopt { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--tc, var(--line)) 50%, transparent); }
.tel-note { white-space: pre-wrap; }
.tel-link-pick { position: relative; }
.tel-link-results { position: absolute; z-index: 10; left: 0; right: 0; list-style: none; margin: 2px 0 0; padding: 4px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-pop); max-height: 260px; overflow: auto; }
.tel-link-results[hidden] { display: none; }
.tel-link-results li { padding: 3px 6px; }
.tel-links li { display: flex; align-items: center; gap: 6px; }
.tel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tel-row .chip-input { min-width: 260px; flex: 1; }
.tel-new { align-items: end; margin-top: 12px; }
.tel-new-btn { align-self: end; }
.tel-tag { width: 12px; height: 12px; border-radius: 50%; background: var(--tc); }
.tel-pos { width: 70px; }
.tel-cc { width: 60px; }
.tel-setup { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 12px; }
.tel-setup dt { font-weight: 650; font-size: .84rem; }
.tel-setup dd { margin: 0; display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.tel-setup code { overflow-wrap: anywhere; font-size: .8rem; }
.tel-token { border-color: var(--amber, #c99400); }
.tel-providers { padding-left: 18px; }
@media (max-width: 640px) { .tel-setup { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tel-pop.is-new, .tel-pop[data-state="ringing"] .tel-pop-state::before { animation: none; } }
.tel-row input[type=text] { width: auto; flex: 1 1 160px; min-width: 0; }
.tel-row input[type=color], .tel-new input[type=color] { width: 40px; height: 34px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.tel-settings { margin-top: 6px; }
.tel-settings-form { display: grid; gap: 6px; margin-top: 6px; max-width: 420px; }
.tel-settings-form .field { display: grid; gap: 2px; }

/* --- Version 19.1: «add» forms behind a link (lists of the administration) ------------------------------------- */
.add-toggle-row { margin: 14px 0 0; }
.add-toggle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.add-toggle[aria-expanded="true"] .icon-inline { transform: rotate(45deg); }
.add-toggle .icon-inline { transition: transform .15s ease; }
.add-box { margin-top: 10px; padding: 14px 16px 16px; background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--radius-m); }
.add-box .tel-new { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .add-toggle .icon-inline { transition: none; } }

/* --- Version 19.1: lists of the navigation – «More» / «Less» with the activities among the further entries ---------- */
.side-more-btn { width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .82rem;
  color: var(--ink-3); text-align: left; min-height: 28px; }
.side-more-btn:hover { color: var(--ink); }
.side-more-btn[hidden], .side-space-list > [hidden] { display: none; }
.side-more-count { background: var(--bluetree); border-color: var(--bluetree); color: var(--bluetree-ink); }
.side-space-list { display: flex; flex-direction: column; gap: 1px; }
.side-chat-list li[data-entry][hidden] { display: none; }

/* --- Version 19.1: release notes ------------------------------------------------------------------------------- */
.relnotes-btn, .tp-top-btn { position: relative; }
.relnotes-dot { position: absolute; top: 3px; right: 2px; display: grid; place-items: center; width: 15px; height: 15px;
  border-radius: 50%; background: var(--bluetree); color: var(--bluetree-ink); font: italic 700 .66rem/1 Georgia, serif;
  box-shadow: 0 0 0 2px var(--paper); }
.relnotes-dot[hidden] { display: none; }
.relnotes-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(80vh, 900px); border: 0; padding: 0;
  border-radius: var(--radius-l); box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink);
  display: none; flex-direction: column; }
.relnotes-dialog[open] { display: flex; }
.relnotes-dialog.is-large { width: calc(100vw - 40px); max-width: 1400px; height: calc(100vh - 40px); max-height: none; }
.relnotes-dialog::backdrop { background: rgba(10, 22, 40, .45); }
.relnotes-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.relnotes-head h2 { font-size: 1.08rem; margin: 0 auto 0 0; }
.relnotes-body { overflow-y: auto; padding: 8px 18px 18px; }
.rn-entry { border-bottom: 1px solid var(--line); padding: 10px 0; }
.rn-entry:last-child { border-bottom: 0; }
.rn-entry summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; font-weight: 650; }
.rn-entry summary::-webkit-details-marker { display: none; }
.rn-entry summary::before { content: "›"; color: var(--ink-3); transition: transform .15s ease; display: inline-block; }
.rn-entry[open] summary::before { transform: rotate(90deg); }
.rn-version { flex: none; font-variant-numeric: tabular-nums; color: var(--bluetree); font-weight: 750; }
.rn-title { min-width: 0; }
.rn-new { flex: none; font-size: .7rem; font-weight: 700; color: var(--bluetree-ink); background: var(--bluetree);
  border-radius: 999px; padding: 1px 8px; }
.rn-body { padding: 4px 0 0 18px; font-size: .92rem; }
.rn-entry.is-new { background: linear-gradient(90deg, var(--bluetree-soft), transparent 70%); margin: 0 -18px; padding: 10px 18px; }
.rn-page { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.rn-index { position: sticky; top: 76px; padding: 10px 12px; }
.rn-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.rn-list { display: grid; gap: 16px; }
.rn-section h2 { font-size: 1.1rem; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rn-section.is-new { border-left: 3px solid var(--bluetree); }
@media (max-width: 960px) { .rn-page { grid-template-columns: minmax(0, 1fr); } .rn-index { position: static; } }
@media (prefers-reduced-motion: reduce) { .rn-entry summary::before { transition: none; } }

/* --- Version 19.1: the task list on the right ------------------------------------------------------------------ */
.shell[data-tasks="open"] { grid-template-columns: 252px minmax(0, 1fr) 340px; }
.shell[data-tasks="collapsed"] { grid-template-columns: 252px minmax(0, 1fr) 46px; }
html[data-sidebar="collapsed"] .shell[data-tasks="open"] { grid-template-columns: 64px minmax(0, 1fr) 340px; }
html[data-sidebar="collapsed"] .shell[data-tasks="collapsed"] { grid-template-columns: 64px minmax(0, 1fr) 46px; }
.taskpanel { position: sticky; top: 0; height: 100vh; display: flex; min-width: 0; background: var(--side-bg);
  border-left: 1px solid var(--line); z-index: 20; }
.taskpanel[hidden] { display: none; }
.tp-rail { display: none; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 16px 0; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; font: inherit; }
.tp-rail:hover { background: var(--hover); color: var(--ink); }
.tp-rail svg { width: 18px; height: 18px; }
.tp-rail-count { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--bluetree); color: var(--bluetree-ink);
  font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.tp-rail-label { writing-mode: vertical-rl; font-size: .8rem; font-weight: 650; letter-spacing: .02em; color: var(--ink-3); }
.taskpanel[data-state="collapsed"] .tp-rail { display: flex; }
.tp-body { display: none; flex-direction: column; width: 100%; min-width: 0; overflow: hidden; }
.taskpanel[data-state="open"] .tp-body { display: flex; }
.tp-head { display: flex; align-items: center; gap: 2px; padding: 12px 8px 6px 14px; }
.tp-head h2 { font-size: .98rem; margin: 0 auto 0 0; display: flex; align-items: center; gap: 6px; }
.tp-head-count { font-size: .74rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tp-head [data-tp-collapse] svg { transform: rotate(-90deg); }
.tp-add { display: flex; gap: 6px; padding: 4px 12px 8px; }
.tp-add input { flex: 1; min-width: 0; padding: 7px 10px; font-size: .88rem; }
.tp-add .btn { padding: 0 9px; }
.tp-search { display: flex; gap: 6px; align-items: center; padding: 0 12px 8px; border-bottom: 1px solid var(--line); }
.tp-search input { flex: 1; min-width: 0; padding: 6px 10px; font-size: .86rem; }
.tp-chip { flex: none; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); border-radius: 999px;
  padding: 3px 9px; font: inherit; font-size: .74rem; font-weight: 650; cursor: pointer; }
.tp-chip[aria-pressed="true"] { background: var(--bluetree-soft); border-color: var(--bluetree); color: var(--bluetree); }
.tp-note { margin: 8px 12px 0; padding: 6px 10px; border-radius: var(--radius-s); background: var(--amber-soft); color: var(--ink); }
.tp-note[hidden] { display: none; }
.tp-list { list-style: none; margin: 0; padding: 4px 6px 8px; overflow-y: auto; }
.taskpanel .tp-list:not(.tp-list-closed) { flex: 1 1 auto; }
.tp-list[hidden], .tp-sub[hidden] { display: none; }
.tp-list-closed { flex: 0 1 auto; max-height: 34vh; border-top: 1px solid var(--line); }
.tp-sub { font-size: .76rem; font-weight: 650; color: var(--ink-3); margin: 8px 14px 0; }
.tp-item { display: flex; gap: 8px; align-items: flex-start; padding: 7px 6px; border-radius: 8px; transition: opacity .2s ease; }
.tp-item:hover { background: var(--hover); }
.tp-item.is-leaving { opacity: .35; }
.tp-item.is-closed .tp-title { color: var(--ink-3); text-decoration: line-through; }
.tp-check { flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.6px solid var(--line-strong);
  background: var(--surface); cursor: pointer; padding: 0; }
.tp-check:hover { border-color: var(--leaf); background: var(--leaf-soft); }
.tp-check.is-done { background: var(--leaf); border-color: var(--leaf); }
.tp-check:disabled { cursor: default; opacity: .6; }
.tp-main { min-width: 0; flex: 1; }
.tp-title { display: block; width: 100%; border: 0; background: none; padding: 0; text-align: left; font: inherit;
  font-size: .88rem; font-weight: 600; color: var(--ink); cursor: pointer; overflow-wrap: anywhere; }
.tp-title:hover { color: var(--bluetree); }
.tp-key { color: var(--ink-3); font-weight: 650; font-variant-numeric: tabular-nums; }
.tp-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; font-size: .74rem; color: var(--ink-3); }
.tp-meta a { color: var(--ink-3); }
.tp-meta a:hover { color: var(--bluetree); }
.tp-due { font-variant-numeric: tabular-nums; }
.tp-due.is-overdue { color: var(--rust); font-weight: 650; }
.tp-tag { color: var(--violet); font-weight: 650; }
.tp-empty { padding: 14px 8px; }
.tp-foot { margin: 0; padding: 8px 14px 12px; border-top: 1px solid var(--line); }
.tp-dialog { width: min(600px, calc(100vw - 32px)); max-height: 86vh; border: 0; border-radius: var(--radius-l); padding: 16px 18px 18px;
  box-shadow: var(--shadow-pop); background: var(--surface); color: var(--ink); overflow-y: auto; }
.tp-dialog::backdrop { background: rgba(10, 22, 40, .45); }
.tp-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tp-dlg-head h2 { font-size: 1.06rem; margin: 2px 0 10px; overflow-wrap: anywhere; }
.tp-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 8px; font-size: .88rem; }
.tp-fact { display: contents; }
.tp-fact dt { color: var(--ink-3); }
.tp-fact dd { margin: 0; }
.tp-desc { max-height: 36vh; overflow-y: auto; font-size: .9rem; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px 12px; }
.tp-acts { margin: 0; padding-left: 18px; font-size: .86rem; }
.tp-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.tp-dlg-actions .act-del { margin-left: auto; }
.tp-pt-form textarea { width: 100%; }
.tp-move { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.tp-move select { flex: 1; min-width: 180px; }
.pt-table tr.is-done td { color: var(--ink-3); }
.pt-table tr.is-overdue td:nth-child(2) { color: var(--rust); font-weight: 650; }
.pt-note { white-space: pre-line; }
@media (max-width: 960px) {
  .shell[data-tasks], html[data-sidebar="collapsed"] .shell[data-tasks] { grid-template-columns: minmax(0, 1fr); }
  .taskpanel { position: fixed; right: 0; top: 0; width: min(360px, 92vw); box-shadow: var(--shadow-pop); z-index: 45; }
  .taskpanel:not(.is-shown) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tp-item { transition: none; } }
.tp-dialog .tp-sub { margin: 14px 0 6px; }
.tp-dlg-head .icon-btn { font-size: 1.5rem; line-height: 1; }
.top-search { min-width: 170px; }
@media (max-width: 1680px) {
  .shell[data-tasks="open"] .top-actions .btn span, .shell[data-tasks="open"] .ext-label { display: none; }
  .shell[data-tasks="open"] .top-actions .btn { padding: 0 10px; }
}
.nav-admin-list .check svg { width: 18px; height: 18px; flex: none; opacity: .75; }
.nav-admin-list .check strong { white-space: nowrap; }
.nav-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.nav-list-set { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 14px 4px; }
.nav-list-set legend { font-weight: 700; padding: 0 6px; }
.nav-list-set input[type=number] { width: 100px; }