/* Ops Intelligence: control-room layout. Navy frame, calm panels, colour reserved for data. */
:root {
  --ink: #13213A; --ink-2: #1F3356; --ink-3: #2A4270;
  --bg: #EEF2F6; --panel: #FFFFFF; --panel-2: #F6F8FB; --line: #D8E0EA;
  --text: #172234; --muted: #5A6A80;
  --accent: #1E5AA8; --good: #0B8A7E; --warn: #B87E00; --bad: #C0392B; --off: #CBD4DF;
  --r-s: 6px; --r-m: 10px; --r-l: 14px;
  --shadow: 0 1px 2px rgba(19, 33, 58, .06), 0 4px 16px rgba(19, 33, 58, .05);
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #0A1322; --ink-2: #15284A; --ink-3: #1E3763;
    --bg: #0E1726; --panel: #152136; --panel-2: #1A2842; --line: #26354F;
    --text: #E3E9F2; --muted: #93A3BA; --accent: #6FA3E8; --good: #2BB3A3; --warn: #E3AE2E; --bad: #E26A5E; --off: #2E3E58;
    --shadow: none; }
}
:root[data-theme="dark"] { --ink: #0A1322; --ink-2: #15284A; --ink-3: #1E3763;
    --bg: #0E1726; --panel: #152136; --panel-2: #1A2842; --line: #26354F;
    --text: #E3E9F2; --muted: #93A3BA; --accent: #6FA3E8; --good: #2BB3A3; --warn: #E3AE2E; --bad: #E26A5E; --off: #2E3E58;
    --shadow: none; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 15px/1.5 var(--font); color: var(--text); background: var(--bg); font-variant-numeric: tabular-nums; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 13px; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------- shell */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; align-items: start; }
.side { background: var(--ink); color: #D5DEEA; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 18px; text-decoration: none; color: #fff; border-bottom: 1px solid var(--ink-2); }
.brand img { border-radius: 9px; flex: none; object-fit: contain; background: #fff; }
.brand strong { display: block; font-size: 15.5px; line-height: 1.25; }
.brand small { display: block; font-size: 12px; color: #8FA0B8; line-height: 1.35; }
.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.nav-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #6F82A0; margin: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); color: #B8C5D6; text-decoration: none; font-size: 14.5px; }
.nav a svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }
.nav a:hover { background: var(--ink-2); color: #fff; }
.nav a.active { background: var(--ink-3); color: #fff; box-shadow: inset 3px 0 0 #2BB3A3; }
.side-foot { margin-top: auto; border-top: 1px solid var(--ink-2); padding: 14px 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who strong { display: block; color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
.who small { display: block; font-size: 12px; color: #8FA0B8; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink-3); color: #fff; display: grid; place-items: center; font-weight: 600; flex: none; }
.side .btn.ghost { color: #B8C5D6; }
.side .btn.ghost:hover { background: var(--ink-2); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 32px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.topbar h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.topbar-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.source-switch { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); overflow: hidden; }
.source-label { font-size: 12.5px; color: var(--muted); padding: 0 10px; border-right: 1px solid var(--line); white-space: nowrap; }
.source-switch select { border: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 500; padding: 8px 10px; max-width: 260px; cursor: pointer; }
.content { padding: 26px 32px 64px; }

/* live indicator */
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--off); }
.live[data-state="live"] { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.live[data-state="live"] i { background: var(--good); animation: pulse 2s infinite; }
.live[data-state="down"] { color: var(--bad); }
.live[data-state="down"] i { background: var(--bad); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------------------------------------------------------- panels */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head.flush { padding: 0 0 4px; border: 0; }
.panel-head h2 { font-size: 15.5px; }
.empty { padding: 32px 26px; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.empty strong { color: var(--text); font-size: 16px; }
.loading { color: var(--muted); padding: 18px; margin: 0; }
.small-print { font-size: 13px; margin-top: 12px; }

/* ---------------------------------------------------------- dashboard grid */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.span-1 { grid-column: span 1; } .span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: 1 / -1; }
.content > .grid + .group, .group + .group { margin-top: 22px; }
.group { border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; background: color-mix(in srgb, var(--g-accent, var(--muted)) 5%, var(--bg)); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 14px; }
.group-head h2 { font-size: 16px; display: flex; align-items: center; gap: 9px; }
.group-head h2::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--g-accent, var(--muted)); }
.group-empty { margin: 4px 2px; }

.widget { --w-accent-c: var(--w-accent, var(--good)); background: var(--w-bg, var(--panel)); color: var(--w-fg, var(--text)); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 168px; min-width: 0; }
.widget[data-display="line"], .widget[data-display="bar"] { min-height: 280px; }
.widget[data-display="table"] { min-height: 240px; }
.w-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 0 16px; }
.w-head h3 { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; opacity: .88; }
.w-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--w-accent-c); flex: none; }
.w-menu { display: flex; align-items: center; gap: 2px; opacity: .55; transition: opacity .15s; }
.widget:hover .w-menu, .widget:focus-within .w-menu { opacity: 1; }
.w-body { flex: 1; padding: 8px 16px; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.w-foot { font-size: 12px; padding: 0 16px 12px; opacity: .6; }
.w-value { font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: break-word; }
.w-unit { white-space: nowrap; font-size: 15px; font-weight: 500; margin-left: 6px; opacity: .6; letter-spacing: 0; }
.w-deltas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.delta { font-size: 12.5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); white-space: nowrap; }
.delta em { font-style: normal; opacity: .7; }
.delta.good { color: var(--good); } .delta.bad { color: var(--bad); } .delta.flat, .delta.none { opacity: .7; }
.w-chart { position: relative; height: 210px; width: 100%; }
.w-table { overflow: auto; max-height: 320px; margin: 0 -16px; }
.w-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.w-table th { position: sticky; top: 0; background: var(--w-bg, var(--panel)); text-align: left; font-weight: 500; opacity: .75; padding: 7px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.w-table td { padding: 7px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); white-space: nowrap; }
.w-table td.num { text-align: right; }
.w-error { color: var(--bad); font-size: 13px; background: color-mix(in srgb, var(--bad) 8%, transparent); border-radius: var(--r-s); padding: 10px 12px; margin: 0; overflow-wrap: anywhere; }
.skeleton { height: 44px; border-radius: var(--r-s); background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; max-width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------- buttons, menus */
.btn { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.block { width: 100%; justify-content: center; padding: 10px; }
.btn[disabled] { opacity: .55; cursor: progress; }
.icon-btn { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: var(--r-s); border: 0; background: transparent; color: inherit; cursor: pointer; list-style: none; }
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.icon-btn svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.6; fill: currentColor; }
.icon-btn svg path { fill: none; }
.dropdown { position: relative; }
.dropdown-menu { position: absolute; right: 0; top: 34px; z-index: 10; min-width: 210px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 4px; }
.dropdown-menu a, .dropdown-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 4px; color: var(--text); text-decoration: none; font: inherit; font-size: 14px; border: 0; background: none; cursor: pointer; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--panel-2); }

/* ---------------------------------------------------------- tables (admin) */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 500; font-size: 13px; color: var(--muted); padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
.row-title { font-weight: 500; }
.row-sub { font-size: 12.5px; color: var(--muted); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill.good { color: var(--good); } .pill.bad { color: var(--bad); } .pill.muted { color: var(--muted); } .pill.accent { color: var(--accent); }

/* ---------------------------------------------------------- forms & dialogs */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; }
.form small { font-weight: 400; color: var(--muted); }
.form input:not([type=checkbox]):not([type=radio]):not([type=color]), .form select, .form textarea, .schema-search input, .note-edit {
  font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); width: 100%; }
.form textarea, .note-edit { resize: vertical; }
.form textarea[name=query] { font-family: var(--mono); font-size: 13px; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px 12px; margin: 0; min-width: 0; }
legend { font-size: 13.5px; font-weight: 500; padding: 0 4px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; border: 0; padding: 0; }
.seg legend { padding: 0 0 6px; }
.seg label { flex-direction: row; font-weight: 400; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; font-size: 14px; }
.seg input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 500; }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.colors { display: flex; gap: 18px; flex-wrap: wrap; }
.colors .color-pick { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.colors input[type=color] { width: 34px; height: 26px; border: 1px solid var(--line); border-radius: 4px; padding: 0; background: none; }
.colors input[type=color]:disabled { opacity: .35; }
.form-actions { display: flex; align-items: center; gap: 8px; padding-top: 6px; }
.spacer { flex: 1; }
.note { font-size: 13.5px; padding: 10px 12px; border-radius: var(--r-s); background: var(--panel-2); border: 1px solid var(--line); margin: 0; }
.note.error { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.note.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, transparent); }
dialog.modal { border: 1px solid var(--line); border-radius: var(--r-l); padding: 0; width: min(620px, 94vw); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.modal.wide { width: min(900px, 96vw); }
dialog.modal::backdrop { background: rgba(10, 19, 34, .5); }
dialog .form { padding: 22px 24px; }
dialog h2 { font-size: 18px; }
pre.context { max-height: 60vh; overflow: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 14px; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; margin: 0; }

/* ---------------------------------------------------------- builder */
.builder { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
.builder-list { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; }
.builder-editor { padding: 20px 22px; }
.builder-editor.empty { padding: 32px 26px; }
.layout-group { border-bottom: 1px solid var(--line); padding: 10px 8px; }
.layout-group:last-child { border-bottom: 0; }
.layout-group-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
.layout-group-head strong { font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.layout-group-head strong::before { content: ""; width: 4px; height: 14px; border-radius: 2px; background: var(--g, var(--muted)); }
.layout-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-s); border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.layout-item:hover { background: var(--panel-2); }
.layout-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.layout-item .kind { margin-left: auto; font-size: 12px; color: var(--muted); }
.layout-item .err { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.preview-wrap { border: 1px dashed var(--line); border-radius: var(--r-m); padding: 12px; background: var(--bg); }
.preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; }

/* ---------------------------------------------------------- schema */
.schema { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.schema-tables { position: sticky; top: 96px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.schema-search { padding: 10px 12px; border-bottom: 1px solid var(--line); }
#table-list { overflow: auto; flex: 1; padding: 6px; }
.t-item { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.t-item:hover { background: var(--panel-2); }
.t-item.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 500; }
.t-item small { color: var(--muted); font-weight: 400; }
.t-item .links { font-size: 11.5px; color: var(--muted); }
.schema-legend { display: flex; gap: 14px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.schema-legend .line { display: inline-block; width: 22px; border-top: 2px solid var(--muted); vertical-align: middle; margin-right: 6px; }
.schema-legend .line.dashed { border-top-style: dashed; }
.schema-detail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.erd { padding: 12px; overflow: auto; min-height: 200px; }
.erd svg { width: 100%; max-width: 980px; height: auto; display: block; margin: 0 auto; }
.erd-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.erd-tools label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.table-desc { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.note-edit { min-height: 38px; font-size: 13.5px; }
.note-view { font-size: 13.5px; }
.db-comment { font-size: 12.5px; color: var(--muted); display: block; }
.rel-chip { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; margin: 2px 4px 2px 0; border: 1px solid var(--line); cursor: pointer; background: none; color: var(--accent); font-family: inherit; }
.rel-chip.inferred { border-style: dashed; }
.key { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.key.pri { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }

/* ---------------------------------------------------------- login */
.login-page { display: grid; place-items: center; min-height: 100vh; background: radial-gradient(1200px 600px at 20% 0%, var(--ink-2), var(--ink)); padding: 20px; }
.login-card { background: var(--panel); border-radius: var(--r-l); padding: 32px 30px; width: min(400px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; }
.login-brand { display: flex; gap: 12px; align-items: center; }
.login-brand img { border-radius: 10px; }
.login-brand strong { display: block; font-size: 17px; }
.login-brand small { color: var(--muted); font-size: 13px; }
.login-card h1 { font-size: 22px; }

/* ---------------------------------------------------------- toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; }
.toast { background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-s); font-size: 14px; max-width: 400px; box-shadow: 0 8px 24px rgba(0,0,0,.2); border-left: 4px solid #2BB3A3; }
.toast.error { border-left-color: var(--bad); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1280px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span-3 { grid-column: 1 / -1; } .builder { grid-template-columns: 1fr; } .builder-list { position: static; max-height: none; } }
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .brand { border: 0; padding: 0; }
  .brand small { display: none; }
  .nav { flex-direction: row; flex-wrap: wrap; margin: 0; }
  .nav-label { display: none; }
  .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .who span:last-child { display: none; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .schema { grid-template-columns: 1fr; }
  .schema-tables { position: static; max-height: 360px; }
}
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .span-2, .span-3 { grid-column: 1 / -1; } .grid2, .grid3 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ====================================================== Phase 2: tasks */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-badge { margin-left: auto; background: var(--warn); color: #1b1300; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--shadow); margin-bottom: 20px; }
.kpi { padding: 16px 20px; border-left: 1px solid var(--line); }
.kpi:first-child { border-left: 0; }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { font-size: 28px; font-weight: 600; line-height: 1.3; }
.kpi .value.bad { color: var(--bad); } .kpi .value.warn { color: var(--warn); }
.kpi .sub { font-size: 12.5px; color: var(--muted); }
.content > .panel + .panel, .kpis + .panel { margin-top: 20px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); }
.pill.warn { color: var(--warn); }
.tag { display: inline-block; font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin: 4px 4px 0 0; }
td.num, th.num { text-align: right; }
.approvals { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)); }
.approval { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.approval:last-child { border-bottom: 0; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 10px; border: 0; background: var(--off); cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--good); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.dropdown summary.btn { list-style: none; }
.dropdown summary.btn::-webkit-details-marker { display: none; }

/* run dialog */
.run-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin: 0; }
.facts dt { font-size: 12.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; }
.log-view { background: #0E1726; color: #D7E1EE; border-radius: var(--r-s); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; max-height: 360px; overflow: auto; white-space: pre-wrap; margin: 0; font-weight: 400; }
.log-view.short { max-height: 200px; }
.code-view { white-space: pre; max-height: 60vh; }
.shot { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); }

/* editor */
.task-form { display: flex; flex-direction: column; gap: 18px; max-width: 1040px; }
.form-section { padding: 0 0 20px; }
.form-section > header { display: flex; gap: 14px; align-items: flex-start; padding: 16px 22px 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.form-section > header h2 { font-size: 16px; }
.form-section > header p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.form-section > .form { padding: 0 22px; }
.step { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.self-end { align-self: end; }
.form textarea.code, textarea.code { font-family: var(--mono); font-size: 13px; line-height: 1.55; tab-size: 4; }
textarea.editor { background: #0E1726 !important; color: #D7E1EE !important; border-color: #0E1726 !important; min-height: 320px; white-space: pre; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; }
.code-head small { font-weight: 400; color: var(--muted); }
.help-box { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; font-size: 13.5px; }
.help-box summary { cursor: pointer; font-weight: 500; }
.help-box table { margin-top: 8px; }
table.data.compact td { padding: 6px 10px; font-size: 13px; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-list .check { font-weight: 400; }
.task-actions { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } .kpi:nth-child(3) { border-left: 0; } .kpi:nth-child(n+3) { border-top: 1px solid var(--line); } .facts { grid-template-columns: 1fr 1fr; } }

/* ====================================================== Phase 2.1: assistant, picker, issues */
.nav-badge.muted-badge { background: var(--ink-3); color: #D5DEEA; }
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: 64px; z-index: 20; list-style: none; margin: 0; padding: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: 0 10px 28px rgba(0,0,0,.14); max-height: 280px; overflow: auto; }
.combo-list li { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 4px; cursor: pointer; }
.combo-list li small { color: var(--muted); font-size: 12px; }
.combo-list li.active, .combo-list li:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.combo-list li.combo-empty { cursor: default; color: var(--muted); }
#proc-signature { display: block; margin-top: 6px; font-family: var(--mono); font-size: 12.5px; }
.code-tools { display: flex; gap: 6px; }
.secret-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.inline-input { display: inline-block !important; width: auto !important; min-width: 180px; padding: 4px 8px !important; margin-left: 6px; }
.changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.changes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: var(--r-s); background: var(--panel-2); border: 1px solid var(--line); }
.changes li > span:first-child { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; }
.changes li.fixed > span:first-child { background: var(--good); }
.changes li.warning > span:first-child { background: var(--warn); }
.changes li.info > span:first-child { background: var(--accent); }
.param-help { padding-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.param-help p { margin: 0; }
.param-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.param-examples > div { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.param-examples h4 { margin: 0; font-size: 14px; }
.param-examples pre { white-space: pre; }
.known-fix { border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent); border-radius: var(--r-s); padding: 10px 12px; font-size: 14px; }
.known-fix p { margin: 6px 0; white-space: pre-wrap; }
.issue-title { max-width: 520px; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .param-examples { grid-template-columns: 1fr; } }

/* ====================================================== Phase 3: data quality */
.nav-tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 0 6px; border-radius: 4px; background: #2BB3A3; color: #06201D; line-height: 17px; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.how > div { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; }
.how p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; max-height: 240px; overflow: auto; }
.col-grid .check { font-weight: 400; }
.score-chip { display: inline-block; min-width: 46px; text-align: center; font-weight: 600; padding: 1px 8px; border-radius: 999px; font-size: 13px; }
.score-chip.big { font-size: 26px; padding: 2px 14px; }
.score-chip.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.score-chip.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.score-chip.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); }
.running-box { display: flex; gap: 16px; align-items: center; padding: 24px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--off); border-top-color: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.finding { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.finding:last-child { border-bottom: 0; }
.finding header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.finding p { margin: 0; font-size: 14px; }
.finding-count { font-weight: 600; }
.examples { max-width: 640px; }
.id-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ids { font-size: 12.5px; overflow-wrap: anywhere; }
.profile { font-size: 13.5px; max-width: 420px; }
.bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: var(--off); overflow: hidden; vertical-align: middle; }
.bar span { display: block; height: 100%; }
.pill.accent { color: var(--accent); }
tr.current-row td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } }

.stop-btn { color: #fff; background: var(--bad); border-color: var(--bad); }
.stop-btn:hover { filter: brightness(1.08); border-color: var(--bad); }


/* ====================================================== variables & dashboard filters */
.token { font-family: var(--mono); font-size: 13px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border: 0; border-radius: 4px; padding: 2px 7px; cursor: copy; }
.used summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.used { font-size: 12.5px; color: var(--muted); }
.var-guide { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.var-guide p { margin: 0; }
.split { margin-top: 20px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 16px; margin-bottom: 18px; box-shadow: var(--shadow); }
.filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.filter-bar select { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); min-width: 170px; }
.filter-state { font-size: 13px; color: var(--warn); margin-left: auto; }
.widget.is-filtered { outline: 2px dashed color-mix(in srgb, var(--warn) 60%, transparent); outline-offset: -2px; }
.widget.is-filtered .w-foot::after { content: " · filtered view"; color: var(--warn); }
.var-picker .dropdown-menu { width: 330px; max-height: 360px; overflow: auto; right: 0; }
.var-picker .dropdown-menu button { display: flex; flex-direction: column; gap: 1px; }
.var-picker .dropdown-menu small { color: var(--muted); font-size: 12px; }
.menu-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 8px 10px 2px; }
.menu-foot { border-top: 1px solid var(--line); margin-top: 4px; }
.sr-only-label { gap: 0 !important; }
.resolved { margin-top: 10px; }


/* ====================================================== groups, sizes, alerts, arrange */
.group.has-bg { background: var(--g-bg); border-color: color-mix(in srgb, var(--g-bg) 70%, #000 10%); }
.group-head h2 { color: var(--g-fg, inherit); }
.group.has-bg .group-count, .group.has-bg .group-empty { color: var(--g-fg); opacity: .8; }
.group-count { color: var(--muted); font-size: 14px; }
.widget.h-2 { min-height: 340px; }
.widget.h-3 { min-height: 480px; }
.widget.h-2 .w-chart { height: 280px; }
.widget.h-3 .w-chart { height: 420px; }
.widget.h-2 .w-table { max-height: 420px; }
.widget.h-3 .w-table { max-height: 600px; }
.widget.has-alert { border-color: var(--alert); box-shadow: 0 0 0 1px var(--alert), var(--shadow); background: color-mix(in srgb, var(--alert) 14%, var(--w-bg, var(--panel))); }
.widget.has-alert .w-dot { background: var(--alert); }
.w-alert { font-size: 11.5px; font-weight: 600; color: #fff; background: var(--alert); padding: 1px 8px; border-radius: 999px; white-space: nowrap; margin-left: 8px; }
.w-head { gap: 4px; }
.w-head h3 { flex: 1; }
.dash-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.seg-mini { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--panel); }
.seg-mini button { font: inherit; font-size: 13.5px; padding: 6px 14px; border: 0; background: transparent; color: var(--text); cursor: pointer; border-left: 1px solid var(--line); }
.seg-mini button:first-child { border-left: 0; }
.seg-mini button.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.seg-mini span { color: var(--muted); font-size: 12px; margin-left: 2px; }
.arrange-tools { display: flex; gap: 8px; align-items: center; }
.drop-zone.is-empty { display: none; }
.drop-zone + .group, .group + .group { margin-top: 22px; }
body.arranging .drop-zone { min-height: 110px; border: 2px dashed var(--line); border-radius: var(--r-m); padding: 10px; display: grid; }
body.arranging .drop-zone.drop-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
body.arranging .group-empty { display: none; }
body.arranging .widget { cursor: grab; }
.widget.dragging { opacity: .45; }
.arrange-bar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-bottom: 1px dashed var(--line); font-size: 12px; color: var(--muted); background: var(--panel-2); border-radius: var(--r-m) var(--r-m) 0 0; }
.arrange-bar button { width: 24px; height: 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); color: var(--text); cursor: pointer; font-weight: 600; }
.arrange-bar span:not(.drag-handle) { margin-left: 8px; }
.drag-handle { font-size: 16px; cursor: grab; }
/* builder additions */
.rules { display: flex; flex-direction: column; gap: 6px; }
.rule { display: grid; grid-template-columns: 1.2fr auto 1.1fr .8fr auto; gap: 8px; align-items: center; }
.rule .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.fmt-table td { padding: 5px 8px !important; }
.fmt-table input, .fmt-table select { padding: 5px 8px !important; font-size: 13px !important; }
.levels-grid { display: grid; grid-template-columns: 40px 1fr 70px auto auto; gap: 8px; align-items: center; }
.levels-grid .lvl { font-weight: 600; text-align: center; }
.size-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.export-tools { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.export-preview { margin-top: 8px; max-height: 240px; overflow: auto; }

.rule label { flex-direction: row !important; align-items: center; gap: 6px !important; }
.rule label select { flex: 1; }

/* run-time inputs */
.inputs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.input-row { border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--panel-2); }
.input-flags { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.input-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.req { color: var(--bad); }
.soon { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; background: var(--off); color: var(--muted); border-radius: 4px; padding: 0 5px; margin-left: 4px; }

/* schema filters & sample data */
.schema-filters { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.schema-filters label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.schema-filters label.check { justify-content: flex-start; }
.schema-filters select, .schema-filters input[type=date] { font: inherit; font-size: 13px; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px 6px; width: 165px; }
.schema-filter-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-note { margin: 0; font-size: 12px; }
.filter-note:empty { display: none; }
.t-item { align-items: flex-start; }
.t-item .t-name { min-width: 0; overflow-wrap: anywhere; }
.t-item .t-meta { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-size: 11.5px; line-height: 1.35; }
.t-item .t-meta .zero { color: var(--warn); }
.t-item.dim .t-name { color: var(--muted); }
.table-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.table-facts b { color: var(--text); font-weight: 500; }
.sample-box { padding: 12px 18px; }
.sample-box .table-wrap { max-width: 100%; overflow: auto; max-height: 360px; border: 1px solid var(--line); border-radius: var(--r-s); }
.sample-box table.data td, .sample-box table.data th { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; padding: 6px 10px; font-size: 13px; }
.hidden-links { font-size: 12px; color: var(--muted); padding: 8px 18px; border-bottom: 1px solid var(--line); }

/* data quality: table picker */
.tp-label { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; font-weight: 500; }
.tp-chosen { font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); min-height: 38px; }
.table-picker { display: flex; flex-direction: column; gap: 6px; }
.tp-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tp-bar input[type=search] { flex: 1 1 220px; }
.tp-bar select, .tp-bar input { font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--text); }
.tp-since { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px !important; font-weight: 400 !important; color: var(--muted); }
.tp-list { max-height: 210px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); padding: 4px; background: var(--panel); }
.tp-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.tp-item:hover { background: var(--panel-2); }
.tp-item.active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.tp-item small { color: var(--muted); white-space: nowrap; }
.shot-box { display: flex; flex-direction: column; gap: 6px; }
.shot-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 500; }
.shot-box .shot { max-height: 420px; object-fit: contain; object-position: left top; background: #0E1726; }

/* floating dropdown menus: above tables, panels and the next row */
.dropdown-menu.floating { position: fixed; right: auto; z-index: 1000; overflow: auto; }

/* code editor with line numbers */
.code-wrap { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--panel); }
.code-wrap.dark { background: #0E1726; border-color: #0E1726; }
.code-gutter { flex: none; overflow: hidden; white-space: pre; text-align: right; padding: 9px 8px 9px 6px; font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: var(--muted); background: var(--panel-2); border-right: 1px solid var(--line); user-select: none; box-sizing: border-box; }
.code-wrap.dark .code-gutter { background: #0A1220; color: #5F7391; border-right-color: #1E2C44; }
.code-wrap textarea.code { flex: 1; min-width: 0; border: 0 !important; border-radius: 0 !important; margin: 0; padding: 9px 10px !important; resize: vertical;
  overflow: auto; white-space: pre; overflow-wrap: normal; line-height: 1.55; box-shadow: none !important; }
.code-wrap textarea.code:focus { outline: none; }
.code-wrap:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-status { font-size: 12px; color: var(--muted); text-align: right; margin-top: 3px; font-family: var(--mono); }

/* ====================================================== dashboard: 12-column grid, free sizes */
.dash-grid { grid-template-columns: repeat(24, minmax(0, 1fr)); }
.dash-grid > .widget.cols { grid-column: span var(--span, 6); }
.widget { position: relative; }
.widget.sized { height: var(--hpx); min-height: 0; }
.widget.sized .w-body { min-height: 0; overflow: hidden; }
.widget.sized .w-chart { height: auto; flex: 1 1 auto; min-height: 80px; }
.widget.sized .w-body:has(.w-chart) { justify-content: stretch; }
.widget.sized .w-table { max-height: none; flex: 1 1 auto; min-height: 0; }
.widget.sized .w-body:has(.w-table) { justify-content: flex-start; }
@media (max-width: 1280px) {
  .dash-grid > .widget.sz-s { grid-column: span 8; }
  .dash-grid > .widget.sz-m { grid-column: span 12; }
  .dash-grid > .widget.sz-l { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .dash-grid > .widget.cols { grid-column: 1 / -1; } .widget.sized { height: auto; min-height: var(--hpx); } }
.resize-handle { position: absolute; z-index: 3; }
.rh-e { top: 12px; right: -4px; width: 9px; bottom: 12px; cursor: ew-resize; }
.rh-s { left: 12px; right: 12px; bottom: -4px; height: 9px; cursor: ns-resize; }
.rh-se { right: -4px; bottom: -4px; width: 16px; height: 16px; cursor: nwse-resize; }
.rh-se::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 8px; height: 8px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); }
body.arranging .rh-e:hover, body.arranging .rh-s:hover, .widget.resizing .resize-handle { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; }
.widget.resizing { outline: 2px solid var(--accent); outline-offset: 2px; user-select: none; }
.size-badge { font-family: var(--mono); color: var(--text); margin-left: auto !important; }
.arrange-bar button.auto-h { width: auto; padding: 0 6px; font-weight: 500; font-size: 11.5px; }

/* filters: typed values, markers on changed boxes */
.filter-bar input[type=search], .filter-bar input[type=date] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); min-width: 170px; }
.filter-bar label.active select, .filter-bar label.active input { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.filter-affects { font-size: 11px; color: var(--muted); margin-left: 4px; }
.filter-state { font-size: 13px; color: var(--warn); align-self: center; }
.filter-chip { font-size: 11.5px; font-weight: 500; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); padding: 1px 8px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.widget.is-filtered .w-foot::after { content: ""; }
.widget.will-filter { outline: 2px solid color-mix(in srgb, var(--warn) 70%, transparent); outline-offset: 2px; }
.widget.just-changed { animation: filterpulse 1.2s ease-out 1; }
@keyframes filterpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 70%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }

/* never let a wide table or long query widen the whole page */
.app { grid-template-columns: 248px minmax(0, 1fr); }
.builder { grid-template-columns: 340px minmax(0, 1fr); }
.builder-editor, .builder-editor .form, .schema-detail, .export-box, .preview-wrap { min-width: 0; }
.export-preview { max-width: 100%; overflow: auto; max-height: 360px; border-radius: var(--r-s); }
.export-preview table td, .export-preview table th { white-space: nowrap; }
.schema { grid-template-columns: 290px minmax(0, 1fr); }
@media (max-width: 1280px) { .builder { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .app, .schema { grid-template-columns: minmax(0, 1fr); } }
.rule-word { font-size: 13px; color: var(--muted); white-space: nowrap; }
.error-text { color: var(--bad); }
.var-preview { font-size: 13.5px; min-height: 20px; padding: 2px 2px 0; }
.var-preview:empty { display: none; }
.sample-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }

/* ====================================================== e-mail */
.mail-page { display: flex; flex-direction: column; gap: 16px; }
.mail-tabs { align-self: flex-start; }
.mail-page .panel-head .row-actions input[type=search], .mail-page .panel-head select { font: inherit; font-size: 13.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); }
.panel-body { padding: 16px 18px; }
.warn-note { border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); padding: 8px 12px; border-radius: var(--r-s); font-size: 13.5px; margin: 0; }
.mail-preview { display: flex; flex-direction: column; gap: 8px; }
.mail-subject { font-size: 14px; }
.mail-frame { width: 100%; min-height: 260px; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.mail-files { display: flex; gap: 8px; flex-wrap: wrap; }
.send-test { display: flex; gap: 8px; align-items: flex-end; }
.send-test label { flex: 1; }
.mail-toggle { font-weight: 500 !important; }
.mail-in-alerts { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.mail-rules { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mail-rules > .btn { align-self: flex-start; }
.mail-rule { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 10px; }
.mail-rule label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.mail-rule select { font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--text); }
.mail-rule-foot { display: flex; align-items: center; gap: 8px; }
.r-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); padding: 6px 8px; min-height: 40px; }
.r-box input { border: 0 !important; outline: none; flex: 1 1 200px; min-width: 160px; font: inherit; font-size: 13.5px; background: transparent; color: var(--text); padding: 2px !important; box-shadow: none !important; }
.r-chips { display: contents; }
.r-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 400; padding: 2px 4px 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.r-chip.group { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.r-chip.email { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.r-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }

/* API Script */
.api-box { display: flex; flex-direction: column; gap: 12px; }
.api-url { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
.api-rule { display: grid; grid-template-columns: minmax(0, 1fr) 190px minmax(0, 1fr); gap: 8px; }
.api-preview .log-view { max-height: 420px; }
@media (max-width: 760px) { .api-url, .api-rule { grid-template-columns: 1fr; } }
.ok-note { border-left: 3px solid var(--good); background: color-mix(in srgb, var(--good) 9%, transparent); }
#server-result { overflow-wrap: anywhere; }
.date-format { display: flex; flex-direction: column; gap: 10px; }
.date-format [data-df-custom] { display: flex; flex-direction: column; gap: 10px; }
.date-format [data-df-custom][hidden] { display: none; }
.df-example { align-self: end; padding: 8px 0; font-size: 14px; }

/* task editor: optional sections fold away */
.form-section.collapsible > header { cursor: pointer; align-items: center; }
.form-section.collapsible > header > div { flex: 1; }
.form-section.collapsible.collapsed { padding-bottom: 0; }
.form-section.collapsible.collapsed > header { border-bottom: 0; margin-bottom: 0; }
.form-section.collapsible.collapsed > header p { display: none; }
.form-section.collapsible.collapsed > :not(header) { display: none !important; }
.sec-summary { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.sec-summary.set { color: var(--good); font-weight: 500; }
.sec-toggle { border: 1px solid var(--line); background: var(--panel); color: var(--text); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; transition: transform .15s; }
.form-section.collapsible:not(.collapsed) .sec-toggle { transform: rotate(180deg); }
.form-section.collapsible > header:hover .sec-toggle { border-color: var(--accent); color: var(--accent); }

/* parameter examples stay inside the page */
.param-help, .param-examples { min-width: 0; max-width: 100%; }
.param-examples { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.param-examples > div { min-width: 0; }
.param-examples pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; }
@media (max-width: 1100px) { .param-examples { grid-template-columns: minmax(0, 1fr); } }
.help-box { min-width: 0; max-width: 100%; }

/* coloured logs & results */
.log-view .lx-time { color: #6F82A0; }
.log-view .lx-bad { color: #FF8A80; }
.log-view .lx-good { color: #5EE0C8; }
.log-view .lx-key { color: #FFD479; font-weight: 600; }
.log-view .lx-http { color: #8EC5FF; font-weight: 600; }
.log-view .lx-tag { color: #8EC5FF; }
.log-view .lx-attr { color: #6F82A0; }
.log-view .lx-val { color: #FFFFFF; font-weight: 600; background: rgba(255, 212, 121, .12); border-radius: 3px; padding: 0 2px; }
.log-head { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 500; }
.results-table th { text-align: left; white-space: nowrap; width: 1%; padding-right: 18px; vertical-align: top; }
.results-table .rv { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.results-table .rv + .rv { border-top: 1px dashed var(--line); }
.icon-copy { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 4px; cursor: pointer; font-size: 12px; padding: 0 5px; line-height: 18px; }
.icon-copy:hover { color: var(--accent); border-color: var(--accent); }
.result-dialog .result-status { display: flex; gap: 10px; align-items: center; }
.lookup-row { display: flex; gap: 8px; } .lookup-row select { flex: 1; }
tr.group-row td { background: var(--panel-2); padding: 6px 12px !important; border-bottom: 1px solid var(--line); }
.group-toggle { border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 2px 4px; }
.group-toggle .chev { color: var(--muted); width: 12px; }
.group-n { font-size: 12px; font-weight: 500; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.token-row { display: inline-flex; align-items: center; gap: 4px; }

/* small boxes: text shrinks with the box instead of spilling over its edges */
.widget { container-type: inline-size; }
.widget .w-head h3 span, .widget .w-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-value { font-size: clamp(11px, min(16cqw, calc((100cqw - 26px) / (var(--len, 6) * .62))), 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.widget.sized .w-body { justify-content: safe center; }
.w-deltas .delta { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.w-unit { font-size: clamp(10px, 4.5cqw, 15px); }
@container (max-width: 260px) {
  .w-head { padding: 8px 8px 0 10px; }
  .w-head h3 { font-size: 12.5px; }
  .w-body { padding: 4px 10px; }
  .w-foot { padding: 0 10px 8px; font-size: 11px; }
  .w-deltas { gap: 4px; margin-top: 6px; }
  .delta { font-size: 11px; padding: 1px 6px; }
  .w-menu .icon-btn { width: 24px; height: 24px; }
  .w-alert { font-size: 10.5px; padding: 0 6px; }
  .filter-chip { display: none; }
}
@container (max-width: 170px) {
  .w-deltas .delta em, .w-foot { display: none; }
  .w-menu { display: none; }
}
.widget.sized .w-body { overflow: hidden; }

.all-fields { margin-top: 10px; }
.all-fields > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.results-wrap { max-height: 60vh; overflow: auto; }

/* long values are cut with … (full value on hover) instead of making the table scroll sideways */
.cell-clip { max-width: min(380px, 28vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-clip2 { max-width: 220px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.form label .opt { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.form label.check.field-h { min-height: 40px; }

.rows-box { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--panel-2); display: flex; flex-direction: column; gap: 12px; }
.rows-box #rows-result .table-wrap { max-height: 280px; overflow: auto; }

/* ---------------------------------------------------------------- Lookup */
.lk-search { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.lk-profiles { align-self: flex-start; flex-wrap: wrap; }
.lk-form.form, .lk-form { display: flex; flex-direction: row; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.lk-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.lk-form .lk-value { flex: 1; min-width: 220px; }
.lk-form .lk-value input { font-size: 16px; }
.lk-form > .btn { height: 40px; }
.lk-form .lk-field select { min-width: 200px; }
.lk-meta { margin: 0; font-size: 13px; }
.lk-summary { margin: 4px 0 12px; }
.lk-summary p { margin: 0 0 8px; }
.lk-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lk-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; font-size: 13px; }
.lk-chip b { font-weight: 600; }
.lk-chip.ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.lk-chip.ok b { color: var(--good); }
.lk-chip.bad { border-color: var(--bad); color: var(--bad); }
.lk-chip.none { opacity: .6; }
.lk-arrow { color: var(--muted); }
.lk-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.lk-card { padding: 14px 18px; scroll-margin-top: 16px; }
.lk-card.lk-dim { opacity: .75; }
.lk-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.lk-card-head h3 { margin: 0; font-size: 15px; }
.lk-card-head h3 small { font-weight: 400; margin-left: 6px; }
.lk-card-head p { margin: 2px 0 0; font-size: 12.5px; }
.lk-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 20px; margin: 0; }
.lk-kv > div { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.lk-kv dt { color: var(--muted); font-size: 12.5px; flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; gap: 4px; align-items: baseline; }

.lk-cell { cursor: copy; }
.lk-cell:hover { text-decoration: underline dotted; }
.lk-foot { margin: 8px 0 0; font-size: 12.5px; }
.lk-builder { gap: 16px; }
.lk-builder .panel-head > div h2 { margin: 0; }
.lk-help { margin: 2px 0 0; font-size: 13px; }
.lk-row { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; background: var(--panel-2); }
.lk-grid { display: grid; gap: 10px; align-items: start; }
.lk-row-btns { padding-top: 22px; }
.lk-eq { padding-top: 30px; }
.lk-grid-table { grid-template-columns: 2fr 1.5fr .7fr 1.4fr auto; }
.lk-grid-link { grid-template-columns: 1.2fr 1.2fr auto 1.2fr 1.2fr auto; }
.lk-grid-search { grid-template-columns: 1.3fr 1.1fr 1.1fr 1fr auto; }
.lk-grid label small { font-weight: 400; }
.lk-eq { font-weight: 700; padding-bottom: 10px; color: var(--muted); }
.lk-row-btns { display: flex; gap: 6px; align-items: center; padding-bottom: 4px; }
.lk-cols { margin-top: 10px; }
.lk-col-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 240px; overflow: auto; margin-top: 6px; }
.lk-warn { margin: 6px 0 0; font-size: 12.5px; color: var(--warn); }
.lk-suggest { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lk-suggest h4 { margin: 6px 0 0; font-size: 13.5px; }
.lk-sug-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.lk-sug-row .btn { margin-left: auto; }
.lk-suggest > .btn.primary { align-self: flex-start; }
@media (max-width: 900px) { .lk-grid-table, .lk-grid-link, .lk-grid-search { grid-template-columns: 1fr 1fr; } .lk-eq { display: none; } }
.lk-card-head { flex-wrap: wrap; }

.lk-nb-tools { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.lk-nb-tools input[type=search] { max-width: 240px; }
.lk-nb-tools > label:not(.check) { flex-direction: row; align-items: center; gap: 6px; }
.lk-nb-tools select { width: auto; }
.lk-nb { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.lk-nb thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }
.lk-nb tbody tr:hover td { background: color-mix(in srgb, var(--accent, #2563eb) 6%, transparent); }
.lk-nb td { vertical-align: middle; }
.lk-nb .num { text-align: right; white-space: nowrap; }
.lk-nb-via { font-size: 12px; color: var(--muted); }

/* lookup results: wide tables scroll inside their own box, never the whole page */
#lookup-app, .lk-card, .lk-summary { min-width: 0; max-width: 100%; }
.lk-card { overflow: hidden; }
.lk-kv dd { align-items: flex-start; }
.lk-v { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lk-table { max-height: min(65vh, 560px); overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
.lk-grid-table-view { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.lk-grid-table-view th, .lk-grid-table-view td { padding: 7px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.lk-grid-table-view thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); }
.lk-grid-table-view tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.lk-grid-table-view tbody tr:hover td { background: color-mix(in srgb, var(--accent, #2563eb) 7%, transparent); }
.lk-grid-table-view td .lk-cell { font-family: var(--mono); display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.lk-grid-table-view .lk-rn { position: sticky; left: 0; z-index: 1; background: var(--panel); color: var(--muted); font-size: 11.5px; text-align: right; border-right: 1px solid var(--line); }
.lk-grid-table-view thead .lk-rn { z-index: 3; background: var(--panel-2); }
.lk-grid-table-view tbody tr td.lk-rn { background: var(--panel); }
.lk-grid-table-view tbody tr:nth-child(even) td.lk-rn { background: var(--panel-2); }
.lk-grid-table-view tbody tr:nth-child(even) td { background: var(--panel-2); }

/* lookup: one row = field list; several rows = resizable grid */
.lk-fields { columns: 3 330px; column-gap: 28px; }
.lk-f { break-inside: avoid; display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 2px; border-bottom: 1px dashed var(--line); font-size: 13px; }
.lk-fk { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-fv { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-fa { display: inline-flex; gap: 2px; }
.lk-f-empty .lk-fk { opacity: .7; }
.lk-empty-toggle { margin-top: 8px; }
.lk-view { border: 1px solid var(--line); background: var(--panel); color: var(--accent, #2563eb); border-radius: 4px; font-size: 11px; line-height: 1; padding: 2px 4px; cursor: pointer; margin-right: 4px; vertical-align: middle; }
.lk-view:hover { background: var(--panel-2); }
.lk-viewer { max-height: 65vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.lk-grid-table-view { table-layout: fixed; min-width: 0 !important; }
.lk-grid-table-view th, .lk-grid-table-view td { overflow: hidden; text-overflow: ellipsis; }
.lk-grid-table-view td .lk-cell { max-width: none; display: inline; }
.lk-grid-table-view thead th { position: sticky; top: 0; }
.lk-grid-table-view thead th > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.lk-grid-table-view thead th:not(.lk-rn) { padding-right: 14px; }
.lk-rs { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.lk-rs::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 2px; background: var(--line); }
.lk-rs:hover::after { background: var(--accent, #2563eb); }
body.lk-resizing, body.lk-resizing * { cursor: col-resize !important; user-select: none; }
.lk-summary-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.lk-summary-top p { margin: 0 !important; }

/* users & permissions */
.us-form { max-width: 1100px; }
.us-admin { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); }
.us-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.us-presets .btn.active { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
.us-presets-note { font-size: 12.5px; }
.us-sections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 12px; }
.us-section { display: flex; flex-direction: column; gap: 6px; }
.us-section legend { font-weight: 600; font-size: 13.5px; padding: 0 4px; }
.us-perm { align-items: flex-start !important; }
.us-perm input { margin-top: 3px; }
.us-perm span { display: flex; flex-direction: column; font-size: 13.5px; }
.us-perm small { color: var(--muted); font-size: 12px; }
.us-perm:has(input:disabled) { opacity: .5; }
.link-btn { border: 0; background: none; color: var(--accent, #2563eb); cursor: pointer; font-size: 12px; padding: 0; font-weight: 400; }
.us-h { margin: 16px 0 4px; font-size: 15px; }
.us-scopes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.us-scope-list { max-height: 180px; overflow: auto; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.us-sections { max-width: 360px; }
.bad-text { color: var(--bad); }

/* approvals */
.warn-tag { border-color: var(--warn) !important; color: var(--warn) !important; text-decoration: none; }
.ap-dialog { max-width: 980px; }
.ap-changes { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow: auto; }
.ap-change { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 12px; }
.ap-field { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.ap-vals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ap-vals > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ap-vals small { color: var(--muted); font-size: 11.5px; }
.ap-vals .mono { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; padding: 4px 6px; border-radius: 4px; }
.ap-old { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.ap-new { background: color-mix(in srgb, var(--good) 10%, transparent); }
.ap-diff { max-height: 320px; overflow: auto; font-size: 12px; margin: 0; }
.ap-diff .ap-add { color: #7ee2a8; }
.ap-diff .ap-del { color: #ff9b9b; }

.lk-schemas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.lk-schemas select { width: auto !important; }

/* ==================== look refresh (Oct 2026): logo + login page. Remove this block to go back. ==================== */
.brand-v2 { flex-direction: column; align-items: flex-start; gap: 10px; }
.brand-v2 .brand-logo { display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 6px 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.18); max-width: 100%; }
.brand-v2 .brand-logo img { height: 30px; width: auto; max-width: 180px; border-radius: 0; background: none; object-fit: contain; display: block; }
.brand-v2 .brand-text strong { font-size: 15px; letter-spacing: -.01em; }
.brand-v2 .brand-text small { margin-top: 1px; }

.login-v2 { background: radial-gradient(1100px 620px at 15% -10%, #23406b 0%, transparent 60%),
                        radial-gradient(900px 600px at 110% 110%, #0f5d5e55 0%, transparent 60%), var(--ink); }
.login-shell { display: grid; grid-template-columns: 1fr 1fr; width: min(880px, 100%); min-height: 500px; border-radius: 18px;
  overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.45); background: var(--panel); }
.login-side { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 22px; padding: 38px 36px; color: #E7EDF6;
  background: linear-gradient(160deg, #1b3157 0%, #142640 55%, #0f3c4a 100%); }
.login-side::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(45,212,191,.35), rgba(45,212,191,0) 70%); pointer-events: none; }
.login-logo { display: inline-flex; align-self: flex-start; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.login-logo img { height: 46px; width: auto; max-width: 240px; object-fit: contain; display: block; }
.login-side-text h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; color: #fff; }
.login-side-text p { margin: 4px 0 0; color: #9FB2CC; font-size: 14px; }
.login-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #CFDAE8; }
.login-points li { display: flex; align-items: center; gap: 10px; }
.login-points svg { width: 18px; height: 18px; stroke: #5EEAD4; stroke-width: 1.6; fill: none; flex: none; }
.login-points svg rect { fill: none; }
.login-copy { margin-top: auto; color: #7F93AF; font-size: 12px; }
.login-v2 .login-card { width: auto; border-radius: 0; box-shadow: none; padding: 44px 40px; justify-content: center; gap: 18px; }
.login-v2 .login-card h1 { font-size: 24px; margin: 0; }
.login-sub { margin: 4px 0 0; font-size: 14px; }
.login-logo-small { display: none; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 42px !important; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 30px; border: 0; background: none;
  border-radius: 6px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
.pw-toggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; }
.pw-toggle:hover, .pw-toggle.on { color: var(--accent, #2563eb); background: var(--panel-2); }
.caps-warn { color: var(--warn) !important; }
.login-btn { padding-top: 11px; padding-bottom: 11px; font-size: 15px; }
.login-help { font-size: 12.5px; margin: 0; }
@media (max-width: 760px) {
  .login-shell { grid-template-columns: 1fr; min-height: 0; }
  .login-side { display: none; }
  .login-logo-small { display: inline-flex; align-self: flex-start; box-shadow: none; border: 1px solid var(--line); padding: 8px 12px; }
  .login-logo-small img { height: 36px; }
  .login-v2 .login-card { padding: 30px 24px; }
}
/* ==================== end of look refresh ==================== */

/* lookup row filters */
.lk-flt { border: 1px solid var(--line); border-left: 3px solid var(--accent, #2563eb); border-radius: var(--r-s); background: var(--panel-2);
  padding: 10px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.lk-row .lk-flt { margin: 10px 0 0; }
.lk-flt-head { font-size: 13px; }
.lk-flt-rows { display: flex; flex-direction: column; gap: 6px; }
.lk-flt-row { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1.4fr) auto; gap: 8px; align-items: center; }
.lk-flt-row select, .lk-flt-row input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--text); width: 100%; }
.lk-flt-note { margin: 3px 0 0 !important; font-size: 12.5px; color: var(--muted); }
.lk-flt-note.on { color: var(--accent, #2563eb); }
.btn.lk-flt-on { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); }
@media (max-width: 700px) { .lk-flt-row { grid-template-columns: 1fr 1fr; } }

/* lookup tabs grouped by data source */
.lk-groups { display: flex; flex-direction: column; gap: 8px; }
.lk-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lk-group-name { min-width: 150px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 6px; }
.lk-group-name::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--line); }
.lk-group.current .lk-group-name { color: var(--accent, #2563eb); }
.lk-group.current .lk-group-name::before { background: var(--accent, #2563eb); }
@media (max-width: 700px) { .lk-group-name { min-width: 0; width: 100%; } }

/* lookup results: empty columns note, foldable cards, missing-link finder (Oct 2026) */
.lk-empty-note { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.lk-empty-note .mono { font-size: 11.5px; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-card-title { cursor: pointer; min-width: 0; flex: 1; }
.lk-card-title h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lk-fold { border: 1px solid var(--line); background: var(--panel); color: var(--text); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; flex: none; transition: transform .15s; }
.lk-card-title:hover .lk-fold { border-color: var(--accent); color: var(--accent); }
.lk-card.collapsed .lk-fold { transform: rotate(-90deg); }
.lk-card.collapsed { padding-bottom: 10px; }
.lk-card.collapsed .lk-card-head { margin-bottom: 0; }
.lk-card.collapsed .lk-card-body, .lk-card.collapsed .lk-flt, .lk-card.collapsed .lk-flt-note { display: none; }
.lk-disc-ask { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border: 1px dashed var(--accent); border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.lk-disc-ask > div { flex: 1; min-width: 240px; }
.lk-disc { padding: 12px; margin: 0 0 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--panel); font-size: 13.5px; }
.lk-disc h4 { margin: 0 0 4px; }
.lk-disc p.muted { margin: 0 0 8px; }
.lk-ok { color: var(--good); font-weight: 500; }
.lk-match select { min-width: 120px; }
/* task editor: Insert variable menu above the code box */
.code-tools .var-picker { position: relative; }
.code-tools .var-picker > summary { list-style: none; }
.code-tools .var-picker > summary::-webkit-details-marker { display: none; }
.code-tools .var-picker .dropdown-menu { width: 360px; max-height: 420px; }
.var-picker .menu-note { margin: 2px 10px 8px; font-size: 12.5px; }
.code-tools .var-picker .dropdown-menu small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.code-tools .var-picker .dropdown-menu button { min-width: 0; }
/* lookup builder: build from a SQL query */
.lk-sql textarea.code { min-height: 240px; font-size: 13px; }
.lk-sql-map { margin: 4px 0 4px 18px; padding: 0; font-size: 13px; line-height: 1.6; }
.lk-sql-res { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; padding: 10px 12px; font-size: 13px; background: var(--panel); }
.lk-sql-res h4 { margin: 0 0 4px; font-size: 13px; }
.lk-sql-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lk-sql-cols > div > div { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.lk-sql-res details { margin-top: 8px; }
.lk-sql-res details ul { margin: 4px 0 0 18px; padding: 0; color: var(--muted); }

/* ---------------------------------------------------------- AI badge: marks features that use the AI model */
:root { --ai-ink: #5B4FD1; --ai-bg: linear-gradient(135deg, rgba(91, 79, 209, .10), rgba(43, 179, 163, .10)); --ai-line: rgba(91, 79, 209, .30); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ai-ink: #B4AEFF; --ai-bg: linear-gradient(135deg, rgba(180, 174, 255, .14), rgba(43, 179, 163, .14)); --ai-line: rgba(180, 174, 255, .35); }
}
:root[data-theme="dark"] { --ai-ink: #B4AEFF; --ai-bg: linear-gradient(135deg, rgba(180, 174, 255, .14), rgba(43, 179, 163, .14)); --ai-line: rgba(180, 174, 255, .35); }
.ai-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px 0 5px; border-radius: 999px;
  font: 600 10.5px/16px var(--font); letter-spacing: .05em; color: var(--ai-ink); background: var(--ai-bg);
  border: 1px solid var(--ai-line); vertical-align: 1px; white-space: nowrap; }
.ai-badge::before { content: "✦"; font-size: 9px; }
.ai-badge.off { filter: grayscale(1); opacity: .55; }
.nav .ai-badge, .sidebar .ai-badge { margin-left: auto; color: #CFCAFF; background: rgba(180, 174, 255, .14); border-color: rgba(180, 174, 255, .35); }
.ai-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: var(--ai-bg); border: 1px solid var(--ai-line); color: var(--text); margin: 8px 0; }
.ai-note::before { content: "✦"; color: var(--ai-ink); }
.ai-note.muted-note { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.ai-note.muted-note::before { color: var(--muted); }
.ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.ai-row input { flex: 1; min-width: 240px; }
.changes li.ai > span:first-child { color: var(--ai-ink); }

/* ---------------------------------------------------------- documents */
.doc-qtable { max-height: 360px; overflow: auto; }
.doc-erow { display: grid; grid-template-columns: 120px 180px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.doc-efields > span { display: none; gap: 6px; }
.doc-erow[data-kind=query] [data-for=query], .doc-erow[data-kind=ticket] [data-for=ticket], .doc-erow[data-kind=lookup] [data-for=lookup],
.doc-erow[data-kind=task] [data-for=task], .doc-erow[data-kind=url] [data-for=url], .doc-erow[data-kind=note] [data-for=note] { display: grid; }
.doc-erow [data-for=ticket] { grid-template-columns: 90px 1fr 1fr; }
@media (max-width: 760px) { .doc-erow { grid-template-columns: 1fr; } }
.row-flash td { animation: row-flash 2.4s ease-out; }
@keyframes row-flash { 0%, 40% { background: rgba(227, 174, 46, .28); } 100% { background: transparent; } }

/* ---------------------------------------------------------- AI chat (Assistant page + "Ask AI" panel) */
.topbar-title h1 .ai-badge { font-size: 11px; vertical-align: 4px; }
.cx { --cx-grad: linear-gradient(135deg, #5B4FD1, #2BB3A3); --cx-soft: rgba(91, 79, 209, .08); color: var(--text); }
.cx svg { width: 1em; height: 1em; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
.cx .cx-orb svg, .cx .cx-avatar svg { fill: currentColor; stroke: none; }
.cx-full { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 540px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.cx-side { display: flex; flex-direction: column; gap: 6px; padding: 14px 10px; background: var(--panel-2); border-right: 1px solid var(--line); min-height: 0; }
.cx-new { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cx-new:hover { border-color: var(--ai-line); box-shadow: 0 2px 10px rgba(91, 79, 209, .12); }
.cx-side-label { margin: 12px 8px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cx-sessions { overflow: auto; display: grid; gap: 1px; align-content: start; }
.cx-sess { display: flex; align-items: center; border-radius: 10px; }
.cx-sess:hover { background: var(--panel); }
.cx-sess.active { background: var(--panel); box-shadow: inset 3px 0 0 var(--ai-ink); }
.cx-sess > button:first-child { flex: 1; min-width: 0; text-align: start; background: none; border: 0; padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; font-size: 13.5px; display: grid; gap: 1px; }
.cx-sess span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-sess small { font-size: 11px; color: var(--muted); }
.cx-del { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px 9px; opacity: 0; border-radius: 8px; }
.cx-sess:hover .cx-del { opacity: .8; } .cx-del:hover { color: var(--bad); }
.cx-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; height: 100%; }
.cx-log { flex: 1; overflow: auto; padding: 26px clamp(14px, 4vw, 48px) 10px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; }
.cx-log > * { width: 100%; max-width: 820px; margin-inline: auto; }
.cx-dock { padding: 8px clamp(12px, 4vw, 48px) 14px; }
.cx-dock > * { max-width: 820px; margin-inline: auto; }

/* empty state */
.cx-empty { margin: auto !important; text-align: center; padding: 20px 0; animation: cx-in .35s ease-out; }
.cx-orb { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; color: #fff; font-size: 26px;
  background: var(--cx-grad); box-shadow: 0 8px 24px rgba(91, 79, 209, .30); }
.cx-empty h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.cx-empty p { margin: 0 auto 20px; color: var(--muted); max-width: 520px; line-height: 1.55; }
.cx-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: start; }
.cx-suggest button { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; text-align: start; transition: transform .12s, border-color .15s, box-shadow .15s; }
.cx-suggest button:hover { border-color: var(--ai-line); box-shadow: 0 4px 14px rgba(91, 79, 209, .10); transform: translateY(-1px); }
.cx-suggest button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cx-soft); color: var(--ai-ink); font-size: 15px; flex: none; }

/* messages */
.cx-msg { display: flex; gap: 12px; animation: cx-in .25s ease-out; }
.cx-msg.user { justify-content: flex-end; }
.cx-user { max-width: min(620px, 82%); padding: 10px 15px; border-radius: 18px 18px 6px 18px; background: var(--cx-soft); border: 1px solid var(--ai-line);
  line-height: 1.55; overflow-wrap: anywhere; }
.cx-avatar { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: 15px; background: var(--cx-grad); margin-top: 1px; }
.cx-avatar.thinking { animation: cx-pulse 1.4s ease-in-out infinite; }
.cx-body { flex: 1; min-width: 0; }
.cx-text { line-height: 1.65; overflow-wrap: anywhere; padding-top: 4px; }
.cx-text code, .cx-card code { font-family: var(--mono); font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); }
.cx-time { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--muted); opacity: .8; }
.cx-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cx-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
  font-size: 12.5px; color: var(--text); text-decoration: none; max-width: 100%; }
.cx-sources a:hover { border-color: var(--ai-line); color: var(--ai-ink); }
.cx-thinking { padding-top: 6px; color: var(--muted); }
.cx-shimmer { font-weight: 500; background: linear-gradient(90deg, var(--muted) 30%, var(--ai-ink) 50%, var(--muted) 70%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: cx-shimmer 1.6s linear infinite; }
.cx-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; }
.cx-error { color: var(--bad); margin: 6px 0 0; }
.cx-found { margin: 10px 0 4px; font-size: 13.5px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.cx-found a, .cx-card a:not(.cx-btn) { color: var(--ai-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.cx-tlabel { font-weight: 600; font-size: 12.5px; margin: 12px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cx-table { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.cx-table table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.cx-table th { position: sticky; top: 0; background: var(--panel-2); text-align: start; font-weight: 600; }
.cx-table th, .cx-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.cx-table tr:last-child td { border-bottom: 0; }

/* action card */
.cx-card { margin-top: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 2px 12px rgba(19, 33, 58, .06); overflow: hidden; }
.cx-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cx-card-head > div { flex: 1; min-width: 0; display: grid; }
.cx-card-head small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.cx-card-head b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-card-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--ai-bg); color: var(--ai-ink); font-size: 17px; flex: none; }
.cx-card-body { padding: 0 14px 12px; font-size: 13.5px; }
.cx-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel-2); }
.cx-card-actions .cx-note { margin: 0 auto 0 0; }
.cx-out:empty { display: none; }
.cx-out { padding: 0 14px 12px; }
.cx-sql { font-family: var(--mono); font-size: 12px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); max-height: 200px; overflow: auto; white-space: pre-wrap; }
.cx-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cx-inputs label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cx-inputs input, .cx-inputs select { border-radius: 9px; }
.cx-state { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.cx-state.done { color: var(--good); background: rgba(11, 138, 126, .10); }
.cx-state.failed { color: var(--bad); background: rgba(192, 57, 43, .10); }
.cx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: filter .15s, box-shadow .15s; }
.cx-btn.primary { border: 0; color: #fff; background: var(--cx-grad); box-shadow: 0 2px 10px rgba(91, 79, 209, .25); }
.cx-btn.primary:hover { filter: brightness(1.08); }
.cx-btn.ghost { background: transparent; }
.cx-btn:disabled { opacity: .6; cursor: progress; }

/* composer */
.cx-context { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.cx-context[hidden] { display: none; }
.cx-context .cx-note { margin: 0; }
.cx-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 5px 8px 5px 10px; border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px dashed var(--line); background: transparent; color: var(--muted); }
.cx-chip.on { border-style: solid; border-color: var(--ai-line); background: var(--cx-soft); color: var(--ai-ink); }
.cx-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-chip i { font-style: normal; opacity: .7; }
.cx-composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 22px; border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 4px 20px rgba(19, 33, 58, .07); transition: border-color .15s, box-shadow .15s; }
.cx-composer:focus-within { border-color: var(--ai-line); box-shadow: 0 4px 24px rgba(91, 79, 209, .14); }
.cx-composer textarea { flex: 1; border: 0 !important; outline: 0; background: transparent; resize: none; font: inherit; font-size: 14.5px; line-height: 1.5;
  padding: 7px 0; min-height: 24px; max-height: 180px; color: var(--text); box-shadow: none !important; }
.cx-send { width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; cursor: pointer; color: #fff; font-size: 18px;
  background: var(--cx-grad); transition: opacity .15s, transform .12s; }
.cx-send svg { stroke-width: 2.2; }
.cx-send:disabled { opacity: .35; cursor: default; }
.cx-send:not(:disabled):hover { transform: scale(1.06); }
.cx-foot { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }

/* compact (side panel) */
.cx-compact { height: 100%; }
.cx-compact .cx-log { padding: 18px 16px 8px; gap: 18px; }
.cx-compact .cx-dock { padding: 6px 12px 12px; }
.cx-compact .cx-empty h2 { font-size: 18px; }
.cx-compact .cx-suggest { grid-template-columns: 1fr; gap: 8px; }
.cx-compact .cx-user { max-width: 88%; }
.cx-compact .cx-avatar { width: 26px; height: 26px; font-size: 13px; border-radius: 9px; }
.cx-compact .cx-msg { gap: 10px; }

/* floating button + slide-over panel */
.cxw-fab { position: fixed; right: 22px; bottom: 22px; z-index: 900; height: 52px; min-width: 52px; padding: 0 18px 0 15px; border-radius: 26px; border: 0;
  display: flex; align-items: center; gap: 8px; color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  background: linear-gradient(135deg, #5B4FD1, #2BB3A3); box-shadow: 0 10px 30px rgba(91, 79, 209, .40); transition: transform .15s, box-shadow .15s, opacity .2s; }
.cxw-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(91, 79, 209, .48); }
.cxw-fab svg { width: 20px; height: 20px; fill: currentColor; }
.cxw-fab.hide { opacity: 0; pointer-events: none; transform: scale(.8); }
.cxw-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 950; width: min(440px, 100vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(19, 33, 58, .18);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.cxw-panel.open { transform: none; }
.cxw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); }
.cxw-head .cx-avatar { width: 30px; height: 30px; }
.cxw-title { flex: 1; min-width: 0; display: grid; }
.cxw-title b { font-size: 15px; }
.cxw-title small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxw-icon { width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; font-size: 16px; text-decoration: none; }
.cxw-icon:hover { background: var(--panel-2); color: var(--text); }
.cxw-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cxw-body { flex: 1; min-height: 0; }
.cxw-scrim { position: fixed; inset: 0; z-index: 940; background: rgba(10, 19, 34, .25); opacity: 0; pointer-events: none; transition: opacity .25s; }
.cxw-scrim.open { opacity: 1; pointer-events: auto; }
@media (min-width: 1280px) { .cxw-scrim { display: none; } }

@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 79, 209, .45); } 50% { box-shadow: 0 0 0 7px rgba(91, 79, 209, 0); } }
@keyframes cx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .cx *, .cxw-panel, .cxw-fab { animation: none !important; transition: none !important; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cx { --cx-soft: rgba(180, 174, 255, .10); }
  :root:not([data-theme="light"]) .cx-card, :root:not([data-theme="light"]) .cx-composer { box-shadow: none; }
  :root:not([data-theme="light"]) .cxw-panel { box-shadow: -18px 0 50px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .cx { --cx-soft: rgba(180, 174, 255, .10); }
:root[data-theme="dark"] .cx-card, :root[data-theme="dark"] .cx-composer { box-shadow: none; }
:root[data-theme="dark"] .cxw-panel { box-shadow: -18px 0 50px rgba(0, 0, 0, .45); }
@media (max-width: 860px) {
  .cx-full { grid-template-columns: 1fr; height: calc(100vh - 120px); }
  .cx-side { display: none; }
  .cx-suggest { grid-template-columns: 1fr; }
  .cxw-fab { right: 16px; bottom: 16px; padding: 0; width: 52px; justify-content: center; }
  .cxw-fab span { display: none; }
}
.cx-suggest em { font-style: normal; flex: 1; min-width: 0; }
.cx-fill { font-style: normal; font-size: 12px; color: var(--muted); padding: 2px 7px; border-radius: 999px; border: 1px dashed var(--line); }
.cx-suggest + .cx-note { margin-top: 14px; }
.cx-hint { margin: 0 0 6px 6px; font-size: 12.5px; color: var(--ai-ink); }
.cx-hint[hidden] { display: none; }

/* ---------------------------------------------------------- Documents */
#docs-app { --dx-r: 16px; }
.dx-i { width: 1em; height: 1em; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dx-hero { background: var(--panel); border: 1px solid var(--line); border-radius: var(--dx-r); padding: 18px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.dx-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel-2);
  transition: border-color .15s, box-shadow .15s, background .15s; font-size: 18px; color: var(--muted); }
.dx-search:focus-within { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 4px rgba(30, 90, 168, .12); }
.dx-search input { flex: 1; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 15px; padding: 13px 0; color: var(--text); }
.dx-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.dx-cats button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
.dx-cats button b { font-weight: 600; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.dx-cats button:hover { border-color: var(--accent); }
.dx-cats button.active { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.dx-cats button.active b { background: rgba(255, 255, 255, .18); color: #fff; }
.dx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }
.dx-count { margin: 18px 4px 10px; font-size: 13px; color: var(--muted); }
.dx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.dx-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--dx-r); border: 1px solid var(--line); background: var(--panel);
  color: var(--text); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; min-width: 0; }
.dx-card:hover { transform: translateY(-2px); border-color: rgba(30, 90, 168, .35); box-shadow: 0 10px 28px rgba(19, 33, 58, .10); }
.dx-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.dx-card h3 { margin: 2px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.dx-snip { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); opacity: .82; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.dx-snip.muted { color: var(--muted); opacity: 1; }
.dx-snip mark { background: rgba(227, 174, 46, .35); color: inherit; border-radius: 3px; padding: 0 2px; }
.dx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-tags span, .dx-tag { font-size: 12px; color: var(--accent); background: rgba(30, 90, 168, .08); padding: 2px 8px; border-radius: 6px; }
.dx-card footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.dx-card footer span { display: inline-flex; align-items: center; gap: 4px; }
.dx-who { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dx-who i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ink-3); color: #fff; font-size: 10.5px; font-weight: 600; flex: none; }
.dx-empty { display: grid; justify-items: center; gap: 6px; padding: 56px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--dx-r); background: var(--panel); }
.dx-empty .dx-i { font-size: 34px; color: var(--muted); opacity: .6; }
.dx-empty p { margin: 0; color: var(--muted); }

/* file tile + category colors */
.dx-tile { --tc: #6B7A90; position: relative; width: 40px; height: 48px; border-radius: 8px 14px 8px 8px; background: color-mix(in srgb, var(--tc) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent); display: grid; place-items: end center; padding-bottom: 6px; flex: none; }
.dx-tile i { position: absolute; top: -1px; right: -1px; width: 13px; height: 13px; border-radius: 0 13px 0 6px; background: color-mix(in srgb, var(--tc) 30%, var(--panel)); }
.dx-tile b { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--tc); }
.dx-tile.big { width: 56px; height: 68px; border-radius: 10px 18px 10px 10px; padding-bottom: 9px; }
.dx-tile.big i { width: 18px; height: 18px; border-radius: 0 18px 0 8px; }
.dx-tile.big b { font-size: 12px; }
.t-pdf { --tc: #D2453B; } .t-word { --tc: #2B67C8; } .t-excel { --tc: #148A55; } .t-ppt { --tc: #D2702B; } .t-img { --tc: #8B4FC9; } .t-zip { --tc: #8A7A3A; }
.dx-cat { --cc: #6B7A90; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; color: var(--cc);
  background: color-mix(in srgb, var(--cc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cc) 25%, transparent); white-space: nowrap; }
.c-sop { --cc: #5B4FD1; } .c-guide { --cc: #1E7FC8; } .c-policy { --cc: #B87E00; } .c-form { --cc: #0B8A7E; } .c-report { --cc: #2E8B3A; } .c-contract { --cc: #C0392B; } .c-other { --cc: #6B7A90; }

/* detail */
.dx-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; color: var(--muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.dx-back:hover { color: var(--accent); }
.dx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.dx-col { display: grid; gap: 16px; min-width: 0; }
.dx-aside { position: sticky; top: 16px; }
.dx-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--dx-r); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.dx-head { display: flex; gap: 18px; align-items: flex-start; }
.dx-head-main { flex: 1; min-width: 0; }
.dx-head-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-head h2 { margin: 10px 0 6px; font-size: 23px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.dx-desc { margin: 0; color: var(--muted); line-height: 1.6; white-space: pre-wrap; }
.dx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dx-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .15s, background .15s, filter .15s; white-space: nowrap; }
.dx-btn:hover { border-color: var(--accent); }
.dx-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.dx-btn.primary:hover { filter: brightness(1.08); }
.dx-btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }
.dx-ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dx-ph h3, .dx-ah { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.dx-ah { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.dx-n { font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); letter-spacing: 0; }
.dx-none { margin: 0; padding: 18px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.dx-links { display: grid; gap: 10px; }
.dx-link { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s; }
.dx-link:hover { border-color: color-mix(in srgb, var(--kc, var(--accent)) 40%, var(--line)); }
.dx-link-row { display: flex; align-items: center; gap: 12px; }
.dx-kind { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none;
  color: var(--kc, var(--accent)); background: color-mix(in srgb, var(--kc, var(--accent)) 12%, transparent); }
.k-query { --kc: #1E7FC8; } .k-ticket { --kc: #D2702B; } .k-lookup { --kc: #5B4FD1; } .k-task { --kc: #0B8A7E; } .k-url { --kc: #6B7A90; } .k-note { --kc: #B87E00; }
.dx-link-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dx-link-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-link-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-link-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dx-ic { width: 32px; height: 32px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted); display: grid; place-items: center;
  cursor: pointer; font-size: 16px; text-decoration: none; flex: none; }
.dx-ic:hover { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.dx-noacc { font-size: 12px; color: var(--muted); }
.dx-sql { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px;
  max-height: 220px; overflow: auto; white-space: pre-wrap; }
.dx-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #B87E00 7%, transparent); white-space: pre-wrap; line-height: 1.55; }
.dx-url { font-family: var(--mono); }
.dx-qtable { margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; }
.dx-text summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
.dx-text summary::-webkit-details-marker { display: none; }
.dx-text summary::after { content: "›"; margin-left: auto; font-size: 18px; color: var(--muted); transition: transform .15s; }
.dx-text[open] summary::after { transform: rotate(90deg); }
.dx-text summary .muted { font-size: 12.5px; }
.dx-text pre { margin: 14px 0 0; max-height: 420px; overflow: auto; white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; line-height: 1.6;
  padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.dx-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 14px; margin: 0; font-size: 13.5px; }
.dx-dl dt { color: var(--muted); }
.dx-dl dd { margin: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-versions { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 14px; }
.dx-versions li { position: relative; display: flex; gap: 8px; align-items: flex-start; }
.dx-versions li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--panel); border: 2px solid var(--off); }
.dx-versions li.current::before { background: var(--good); border-color: var(--good); box-shadow: 0 0 0 3px rgba(11, 138, 126, .18); }
.dx-versions li > div { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 13.5px; }
.dx-versions small { color: var(--muted); font-size: 12px; }
.dx-versions p { margin: 4px 0 0; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; background: var(--panel-2); }
.dx-live { margin-left: 8px; font-size: 11px; font-weight: 600; color: var(--good); }
.dx-del { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 12px; border: 1px dashed transparent; background: none;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.dx-del:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); background: color-mix(in srgb, var(--bad) 6%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dx-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
  :root:not([data-theme="light"]) .dx-cats button.active { background: var(--accent); border-color: var(--accent); }
}
:root[data-theme="dark"] .dx-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
:root[data-theme="dark"] .dx-cats button.active { background: var(--accent); border-color: var(--accent); }
@media (max-width: 1100px) { .dx-layout { grid-template-columns: 1fr; } .dx-aside { position: static; } }
@media (max-width: 640px) {
  .dx-hero, .dx-panel { padding: 14px; }
  .dx-head { flex-direction: column; gap: 12px; }
  .dx-head h2 { font-size: 20px; }
  .dx-link-row { flex-wrap: wrap; }
  .dx-link-act { width: 100%; justify-content: flex-start; padding-left: 48px; }
  .dx-grid { grid-template-columns: 1fr; }
}
.cx-suggest em small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }

/* a message (toast) is shown where the Ask AI button sits: hide the button until the message goes */
body:has(#toasts .toast) .cxw-fab { opacity: 0; pointer-events: none; transform: scale(.8); }

/* ---------------------------------------------------------- Data quality: rules in the user's words */
.qr { border-color: var(--ai-line); background: var(--ai-bg); border-radius: 12px; }
.qr legend { display: inline-flex; align-items: center; gap: 6px; }
.qr-intro { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.qr-rules { display: grid; gap: 8px; margin-bottom: 10px; }
.qr-none { margin: 0; font-size: 13px; }
.qr-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.qr-card.new { border-color: var(--ai-line); box-shadow: 0 2px 10px rgba(91, 79, 209, .08); }
.qr-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-card-head .spacer { flex: 1; }
.qr-tag { font-size: 11px; font-weight: 600; color: var(--good); background: rgba(11, 138, 126, .10); padding: 2px 8px; border-radius: 999px; }
.qr-expl { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.qr-test p { margin: 8px 0 0; font-size: 13px; }
.qr-ok { color: var(--good); }
.qr-bad { color: var(--bad); }
.qr-ex { margin-top: 6px; font-size: 12px; }
.qr-ex td { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-sql { margin-top: 8px; font-size: 12.5px; }
.qr-sql summary { cursor: pointer; color: var(--muted); }
.qr-sql textarea { width: 100%; margin: 6px 0; font-size: 12.5px; }
.qr-log { display: grid; gap: 12px; margin-bottom: 10px; max-height: 460px; overflow: auto; }
.qr-log:empty { display: none; }
.qr-you { justify-self: end; max-width: 85%; margin-left: auto; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: var(--panel);
  border: 1px solid var(--line); font-size: 13.5px; white-space: pre-wrap; width: fit-content; }
.qr-ai { display: flex; gap: 8px; margin-top: 8px; }
.qr-av { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px;
  background: linear-gradient(135deg, #5B4FD1, #2BB3A3); }
.qr-ai-body { flex: 1; min-width: 0; display: grid; gap: 8px; }
.qr-ai-body > p { margin: 3px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.qr-kept { margin: 0; font-size: 13px; color: var(--good); }
.qr-gone { margin: 0; font-size: 13px; color: var(--muted); text-decoration: line-through; }
.qr-compose { display: flex; gap: 8px; align-items: flex-end; }
.qr-compose textarea { flex: 1; resize: vertical; min-height: 44px; }
.finding .pill.qr-pill { background: var(--ai-bg); color: var(--ai-ink); border: 1px solid var(--ai-line); }
.qr-summary { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ai-bg); border: 1px solid var(--ai-line); }
.qr-summary h3 { margin: 0 0 6px; font-size: 14px; }
.qr-summary p { margin: 4px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.qr-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.qr-tabs button { flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.qr-tabs button.active { background: var(--ink-2); color: #fff; }
.qr-tabs button.active .ai-badge { background: rgba(255, 255, 255, .18); color: #fff; border-color: transparent; }
.qr-pane[hidden] { display: none; }
.qr-cond { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.qr-cond code { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); word-break: break-word; }
.qr-look-bar { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.qr-look-bar > label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; }
.qr-look-cols > span { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
#qr-look-cols { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 96px; overflow: auto; font-size: 12.5px; }
#qr-look-cols .check { margin: 0; }
.qr-look-sum { margin: 12px 2px 6px; font-size: 13px; }
.qr-look-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.qr-look { font-size: 12.5px; }
.qr-look th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; white-space: nowrap; }
.qr-look td small { display: block; color: var(--muted); font-size: 11px; }
.qr-look tr.qr-first td { border-top: 2px solid var(--line); }
.qr-look tr.qr-unusual { background: rgba(192, 57, 43, .06); }
.qr-st { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.qr-st.st-filled, .qr-st.st-after { color: var(--good); background: rgba(11, 138, 126, .10); }
.qr-st.st-empty, .qr-st.st-blank, .qr-st.st-zero-date, .qr-st.st-0 { color: var(--warn); background: rgba(184, 126, 0, .10); }
.qr-st.st-before, .qr-st.st-negative { color: var(--bad); background: rgba(192, 57, 43, .10); }
.qr-st.diff { outline: 2px solid var(--bad); outline-offset: 1px; }
#qr-look-rules, #qr-hand-out { display: grid; gap: 8px; margin-top: 10px; }
.qr-hand { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.qr-hand label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; }
.qr-hand textarea { font-size: 12.5px; }
@media (max-width: 760px) { .qr-look-bar, .qr-hand { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Documents: categories, toolbar, list view, bulk upload */
.dx-dot { background: var(--cc, #6B7A90); }
.dx-manage { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px dashed var(--line); background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.dx-manage:hover { border-color: var(--accent); color: var(--accent); }
.dx-drophint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.dx-drophint .link-btn { font-size: inherit; }
body.dx-dragging .dx-hero { outline: 3px dashed var(--accent); outline-offset: 4px; background: rgba(30, 90, 168, .06); }
body.dx-dragging::after { content: "Drop the files to add them as documents"; position: fixed; inset: auto 0 30px; margin: auto; width: fit-content; padding: 12px 22px;
  border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; z-index: 999; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); }
.dx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 2px 12px; }
.dx-toolbar .dx-count { margin: 0; flex: 1; min-width: 140px; }
.dx-types { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-types button { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.dx-types button b { font-weight: 600; color: var(--muted); margin-left: 3px; }
.dx-types button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dx-types button.active b { color: rgba(255, 255, 255, .8); }
.dx-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dx-sort select { padding: 5px 8px; font-size: 13px; }
.dx-view { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dx-view button { width: 34px; height: 30px; border: 0; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 15px; }
.dx-view button.active { background: var(--ink-2); color: #fff; }
.dx-list { background: var(--panel); border: 1px solid var(--line); border-radius: var(--dx-r); box-shadow: var(--shadow); overflow: hidden; }
.dx-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 160px 110px 40px 90px; gap: 14px; align-items: center; padding: 10px 16px;
  border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.dx-row:last-child { border-bottom: 0; }
.dx-row:hover { background: var(--panel-2); }
.dx-row .dx-tile { width: 32px; height: 38px; }
.dx-row-main { display: grid; min-width: 0; gap: 2px; }
.dx-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-row-main small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-row-main mark { background: rgba(227, 174, 46, .35); color: inherit; }
.dx-row-tags { display: flex; gap: 4px; overflow: hidden; }
.dx-row-tags span { font-size: 11.5px; color: var(--accent); background: rgba(30, 90, 168, .08); padding: 1px 6px; border-radius: 5px; white-space: nowrap; }
.dx-row-meta { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .dx-row { grid-template-columns: auto minmax(0, 1fr) auto; } .dx-row-tags, .dx-row-meta { display: none; } }
.dx-newcat { display: flex; gap: 6px; align-items: center; margin-top: -4px; }
.dx-newcat input:first-child { flex: 1; }
.dx-newcat input[type=color], .dx-catrow input[type=color], .dx-catadd input[type=color] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; flex: none; }
.dx-catlist { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.dx-catrow { display: grid; grid-template-columns: 20px 40px 180px minmax(0, 1fr) 70px auto auto; gap: 8px; align-items: center; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dx-catrow.dragging { opacity: .5; }
.dx-grip { cursor: grab; color: var(--muted); user-select: none; text-align: center; }
.dx-catcount { font-size: 12px; color: var(--muted); text-align: right; }
.dx-catmove { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin-top: -2px; border-radius: 10px; font-size: 13px;
  background: rgba(192, 57, 43, .06); border: 1px solid rgba(192, 57, 43, .25); }
.dx-catadd { display: grid; grid-template-columns: 220px 40px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-top: 6px; border-top: 1px dashed var(--line); }
@media (max-width: 760px) { .dx-catrow, .dx-catadd { grid-template-columns: 1fr 1fr; } }
.dx-bulk-all { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
.dx-bulk-list { display: grid; gap: 6px; max-height: 52vh; overflow: auto; }
.dx-bulk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 180px 170px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.dx-bulk-row.bad { background: rgba(192, 57, 43, .05); }
.dx-bulk-row .dx-tile { width: 32px; height: 38px; }
.dx-bulk-main { display: grid; gap: 3px; min-width: 0; }
.dx-bulk-state { font-size: 12.5px; }
.dx-bulk-state.ok { color: var(--good); } .dx-bulk-state.bad { color: var(--bad); } .dx-bulk-state.busy { color: var(--muted); }
@media (max-width: 760px) { .dx-bulk-row, .dx-bulk-all { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Documents: fields, table view, preview, picking values */
.dx-fields { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; }
.dx-fields[hidden] { display: none; }
.dx-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; }
.dx-fgrid label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; }
.dx-fgrid label > span { display: flex; align-items: center; gap: 6px; }
.dx-gear { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; padding: 2px 10px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--accent, #2563eb); background: transparent; border: 1px solid var(--line, #d0d7e2); border-radius: 999px; cursor: pointer; vertical-align: middle; }
.dx-gear:hover { background: var(--ai-bg); border-color: var(--accent, #2563eb); }
.dx-fchips-gear { display: flex; justify-content: flex-end; margin: 4px 0 -4px; }
button.dx-fx { cursor: pointer; font-family: inherit; }
button.dx-fx:hover { border-color: var(--ai-ink); }
.dx-fx { font-size: 10.5px; font-weight: 600; color: var(--ai-ink); background: var(--ai-bg); border: 1px solid var(--ai-line); padding: 0 6px; border-radius: 999px; }
.dx-fchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dx-fchips > div { display: grid; padding: 4px 9px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); min-width: 0; max-width: 100%; }
.dx-fchips dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dx-fchips dd { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-fchips.big { margin-top: 12px; }
.dx-fchips.big > div { padding: 6px 12px; }
.dx-fchips.big dd { font-size: 14px; }
.dx-missing { color: var(--bad); font-weight: 600; font-size: 12px; }
.dx-ffbar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 16px; align-items: end; margin: 0 0 12px;
  padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.dx-ffbar label { display: grid; gap: 5px; min-width: 0; }
.dx-ffbar label > span { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dx-ffbar select, .dx-ffbar input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; font: inherit; font-size: 13.5px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); box-sizing: border-box; }
.dx-ffbar select:focus, .dx-ffbar input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px rgba(30, 90, 168, .12); }
.dx-ffbar .on select, .dx-ffbar .on input { border-color: var(--accent); background: rgba(30, 90, 168, .06); }
.dx-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.dx-range > span { color: var(--muted); }
.dx-ffclear { align-self: end; justify-self: start; height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 9px;
  border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.dx-ffclear:hover { color: var(--bad); border-color: var(--bad); }
.dx-tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--dx-r); box-shadow: var(--shadow); overflow: auto; max-height: 70vh; }
.dx-table th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; white-space: nowrap; }
.dx-table td { white-space: nowrap; }
.dx-table tfoot td { position: sticky; bottom: 0; background: var(--panel-2); font-weight: 600; border-top: 2px solid var(--line); }
.dx-tlink { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; max-width: 420px; }
.dx-tlink span { overflow: hidden; text-overflow: ellipsis; }
.dx-tlink .dx-tile { width: 26px; height: 32px; padding-bottom: 3px; }
.dx-tlink .dx-tile b { font-size: 8px; }
.dx-tlink:hover span { color: var(--accent); }
.dx-preview .dx-ph { margin-bottom: 10px; }
.dx-preview.closed .dx-ph { margin-bottom: 0; }
.dx-pv-act { display: inline-flex; gap: 6px; }
.dx-pdf { display: block; width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--line); border-radius: 10px; background: #525659; }
.dx-img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 10px; border: 1px solid var(--line); }
.dx-pickhint { margin: 12px 0 0; font-size: 12.5px; color: var(--ai-ink); display: flex; gap: 6px; align-items: center; }
#dx-textpre { cursor: text; }
#dx-textpre::selection { background: rgba(91, 79, 209, .25); }
.dx-pick { position: absolute; z-index: 1200; width: 320px; display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--panel);
  border: 1px solid var(--ai-line); box-shadow: 0 12px 34px rgba(19, 33, 58, .22); font-size: 13px; }
.dx-pick-v { font-weight: 600; word-break: break-word; }
.dx-pick label { display: grid; gap: 4px; font-weight: 500; }
.dx-pick label.check { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 12.5px; }
.dx-pick-err { color: var(--bad); font-size: 12.5px; }
.dx-pick-err:empty { display: none; }
.dx-pick-act { display: flex; justify-content: flex-end; gap: 6px; }
.dx-ftpl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.dx-flist { display: grid; gap: 8px; max-height: 50vh; overflow: auto; }
.dx-frow { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dx-frow-main { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto auto auto; gap: 10px; align-items: center; }
.dx-frow-main .check { margin: 0; font-size: 12.5px; white-space: nowrap; }
.dx-fmove { display: inline-flex; gap: 2px; }
.dx-fx-row { display: grid; grid-template-columns: auto 200px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.dx-fopts { font-size: 13px; }
.dx-ftry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; padding-top: 10px; border-top: 1px dashed var(--line); }
.dx-ftry label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; }
#dx-ftry-out { grid-column: 1 / -1; }
.dx-bulk-fhead { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.dx-bulk-state small { display: block; color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) { .dx-frow-main, .dx-fx-row, .dx-ftry { grid-template-columns: 1fr; } }

/* query results and files inside a document */
.dx-links > *, .dx-link, .doc-qres { min-width: 0; max-width: 100%; }
.doc-qres { overflow: hidden; }
.dx-qtable { max-width: 100%; max-height: 420px; overflow: auto; }
.dx-qtable table { width: max-content; min-width: 100%; }
.dx-qtable th { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.dx-files { display: grid; gap: 8px; }
.dx-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 12px; }
.dx-file .dx-tile { width: 32px; height: 38px; }
.dx-file-main { display: grid; gap: 2px; min-width: 0; }
.dx-file-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-file-main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-ic-del:hover { color: var(--bad); }
.dx-vact { display: inline-flex; gap: 2px; }
.dx-nopv { display: grid; justify-items: center; gap: 10px; padding: 30px; text-align: center; color: var(--muted); }
.dx-txt { background: #fff; height: 50vh; }
.dx-ftry-text { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; }
.dx-ftry-text summary { cursor: pointer; }
.dx-ftry-text pre { max-height: 260px; overflow: auto; white-space: pre-wrap; font-size: 12px; padding: 10px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.cx-docs { display: grid; gap: 6px; margin-top: 10px; }
.cx-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cx-doc:hover { border-color: var(--ai-line); box-shadow: 0 3px 12px rgba(91, 79, 209, .10); }
.cx-doc-n { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ai-bg); color: var(--ai-ink); }
.cx-doc-main { display: grid; gap: 2px; min-width: 0; }
.cx-doc-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-doc-main small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-doc-f { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; }
.cx-doc-f i { font-style: normal; color: var(--muted); }
.cx-doc-go { color: var(--muted); }

/* text of a file with line numbers */
.dx-lines { margin-top: 10px; max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; counter-reset: none; }
.dx-lines .tl { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.dx-lines .tl:hover { background: rgba(91, 79, 209, .05); }
.dx-lines .tn { user-select: none; text-align: right; padding: 0 10px 0 6px; color: var(--muted); opacity: .7; border-right: 1px solid var(--line);
  background: var(--panel); position: sticky; left: 0; }
.dx-lines .tt { padding: 0 12px; white-space: pre-wrap; word-break: break-word; unicode-bidi: plaintext; text-align: start; }
.dx-lines .tt::selection { background: rgba(91, 79, 209, .28); }
.dx-ftry-text .dx-lines { max-height: 300px; }

/* the "put it in a field" pop-up */
.dx-pick { width: 360px; gap: 12px; padding: 14px; border-radius: 16px; }
.dx-pick-head { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dx-pick-k { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dx-pick-v { font-weight: 600; font-size: 14px; word-break: break-word; }
.dx-pick-sec { display: grid; gap: 6px; }
.dx-pick-fields, .dx-pick-learn { display: grid; gap: 4px; max-height: 210px; overflow: auto; }
.dx-pick-opt { display: flex !important; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line);
  cursor: pointer; font-weight: 400 !important; transition: border-color .12s, background .12s; }
.dx-pick-opt:hover { border-color: var(--ai-line); }
.dx-pick-opt:has(input:checked) { border-color: var(--ai-ink); background: var(--cx-soft, rgba(91, 79, 209, .08)); }
.dx-pick-opt input { accent-color: var(--ai-ink); margin: 0; flex: none; }
.dx-pick-opt > span { display: grid; min-width: 0; }
.dx-pick-opt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-pick-opt small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* fields dialog: line mode and a footer that stays visible */
.dx-fline { display: grid; grid-template-columns: 80px 80px minmax(0, 1fr); gap: 8px; }
.dx-fline label { display: grid; gap: 2px; font-size: 11px; color: var(--muted); }
.dx-flddlg .form-actions { position: sticky; bottom: -1px; background: var(--panel); padding-top: 10px; margin-bottom: -4px; border-top: 1px solid var(--line); z-index: 2; }

/* Documents: sub-categories, ticking documents, placeholders */
.dx-subcats { padding: 8px 0 0; border-top: 1px dashed var(--line); }
.dx-subcats-in { font-size: 12.5px; font-weight: 600; color: var(--muted); align-self: center; margin-right: 2px; }
.dx-sub { font-size: 10px; opacity: .6; margin-left: 2px; }
.dx-cats button.open { border-color: var(--ink-2); box-shadow: inset 0 -2px 0 var(--ink-2); }
.dx-tick { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: -4px 0; cursor: pointer; }
.dx-tick input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.dx-tick-h { width: 34px; }
.dx-tick-h input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.dx-table tr.picked td { background: rgba(30, 90, 168, .07); }
.dx-row.has-tick { grid-template-columns: auto auto minmax(0, 1fr) auto 160px 110px 40px 90px; }
@media (max-width: 900px) { .dx-row.has-tick { grid-template-columns: auto auto minmax(0, 1fr) auto; } }
.dx-selbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: var(--ink-2); color: #fff; box-shadow: 0 8px 24px rgba(19, 33, 58, .25); }
.dx-selbar .muted { color: rgba(255, 255, 255, .7); font-size: 12.5px; }
.dx-selbar .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); }
.dx-catrow.sub { margin-left: calc(var(--depth) * 26px); }
.dx-catname { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dx-catname input { flex: 1; min-width: 0; }
.dx-branch { font-style: normal; color: var(--muted); }
.dx-catrow { grid-template-columns: 20px 40px 180px minmax(0, 1fr) 64px auto auto auto auto; }
.dx-catadd { grid-template-columns: 200px 200px 40px minmax(0, 1fr) auto; }
.dx-frow.inh { background: var(--panel-2); border-style: dashed; }
.dx-frow.inh [disabled] { opacity: .75; }
.dx-inh { justify-self: start; font-size: 11px; font-weight: 600; color: var(--ai-ink); background: var(--ai-bg); border: 1px solid var(--ai-line); padding: 1px 8px; border-radius: 999px; }
.dx-flabel { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 8px; }
.dx-ph-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.dx-ph-hint:empty { display: none; }
.dx-ph-hint code, .dx-link code { font-family: var(--mono); font-size: 11.5px; padding: 1px 5px; border-radius: 5px; background: var(--ai-bg); color: var(--ai-ink); border: 1px solid var(--ai-line); }
.dx-bulk-links { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; }
@media (max-width: 760px) { .dx-catrow.sub { margin-left: 12px; } .dx-flabel { grid-template-columns: 1fr; } }

/* chat: the text of a document */
.cx-content { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.cx-content-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.cx-content-head b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-content-head small { display: block; color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-content-body { max-height: 420px; overflow: auto; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.cx-content-body p { margin: 0 0 6px; }
.cx-ctext { white-space: pre-wrap; word-break: break-word; }
.cx-csheet { font-weight: 700; color: var(--ai-ink); margin: 8px 0 6px !important; }
.cx-ctable { border-collapse: collapse; font-size: 12.5px; margin-bottom: 10px; min-width: 100%; }
.cx-ctable td { border: 1px solid var(--line); padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.cx-ctable tr.h td { background: var(--panel-2); font-weight: 600; }
.cx-content > .cx-note { padding: 0 14px 10px; margin: 0; }

/* documents list: calmer, one line of what differs per document */
.dx-hero { padding: 14px 16px; gap: 12px; }
.dx-search input { padding: 11px 0; font-size: 14.5px; }
.dx-cats { gap: 6px; }
.dx-cats button { padding: 5px 11px; font-size: 12.5px; }
.dx-cats-tools { margin-left: auto; display: inline-flex; gap: 6px; }
.dx-cats-tools .dx-manage { font-size: 12.5px; padding: 5px 11px; }
.dx-toolbar { margin: 14px 2px 10px; }
.dx-count { display: inline-flex; align-items: center; gap: 10px; }
.dx-countpick { width: 16px; height: 16px; margin: 0 0 0 14px; accent-color: var(--accent); cursor: pointer; }
.dx-row, .dx-row.has-tick { grid-template-columns: auto auto minmax(0, 1fr) auto 40px 84px; gap: 12px; padding: 9px 16px; border-bottom-color: color-mix(in srgb, var(--line) 60%, transparent); }
.dx-row:not(.has-tick) { grid-template-columns: auto minmax(0, 1fr) auto 40px 84px; }
.dx-row .dx-tile { width: 28px; height: 34px; border-radius: 6px 10px 6px 6px; }
.dx-row .dx-tile b { font-size: 8px; }
.dx-row .dx-tile i { width: 10px; height: 10px; }
.dx-row-main b { font-size: 14px; }
.dx-row-main small { display: flex; gap: 14px; font-size: 12px; }
.dx-rf i { font-style: normal; color: var(--muted); opacity: .8; margin-right: 3px; }
.dx-rf { color: var(--text); white-space: nowrap; }
.dx-row-cat { display: flex; justify-content: flex-end; min-width: 0; }
.dx-row-time { justify-content: flex-end; }
.dx-row.picked { background: rgba(30, 90, 168, .06); }
.dx-row:hover .dx-row-main b { color: var(--accent); }
.dx-selbar .spacer { flex: 1; }
.dx-selbar .btn:not(.ghost):not(.danger) { background: #fff; color: var(--ink-2); border-color: #fff; }
.dx-linksmany { display: grid; gap: 12px; }
@media (max-width: 900px) {
  .dx-row, .dx-row.has-tick { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .dx-row:not(.has-tick) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dx-row .dx-row-meta, .dx-row .dx-row-cat:empty { display: none; }
  .dx-cats-tools { margin-left: 0; }
}

/* ---------------------------------------------------------- schema (tabs, fitted diagram) */
.schema { grid-template-columns: 300px minmax(0, 1fr); }
.schema-tables { border-radius: 16px; overflow: hidden; }
.schema-search input { border-radius: 10px !important; }
.schema-fwrap { border-bottom: 1px solid var(--line); }
.schema-fwrap summary { cursor: pointer; padding: 9px 14px; font-size: 13px; font-weight: 500; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 8px; }
.schema-fwrap summary::-webkit-details-marker { display: none; }
.schema-fwrap summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.schema-fwrap[open] summary::before { transform: rotate(90deg); }
.schema-fwrap .schema-filters { border-bottom: 0; padding-top: 0; }
.sx-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 7px; font-weight: 600; }
#table-list { overflow: auto; padding: 6px; display: grid; gap: 2px; }
.t-item { flex-direction: column; align-items: stretch !important; gap: 2px; padding: 8px 10px; border-radius: 10px; }
.t-item .t-name { font-size: 13.5px; font-weight: 500; }
.t-item .t-meta { flex-direction: row !important; align-items: center !important; gap: 6px; color: var(--muted); }
.t-item .t-links { margin-left: auto; font-size: 11px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.t-item.active { background: color-mix(in srgb, var(--accent) 11%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.sx-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 56px 24px; border-radius: 16px; }
.sx-empty-ic { font-size: 30px; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.sx-empty strong { font-size: 16px; }
.sx-empty p { margin: 0; max-width: 420px; color: var(--muted); font-size: 13.5px; }
.schema-detail { gap: 14px; }
.sx-head { border-radius: 16px; padding: 18px 20px; display: grid; gap: 14px; }
.sx-title { display: flex; gap: 14px; align-items: flex-start; }
.sx-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.sx-tmain { flex: 1; min-width: 0; display: grid; gap: 6px; }
.sx-tmain h2 { margin: 0; font-size: 19px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.sx-tdesc { width: 100%; border-color: transparent !important; background: var(--panel-2) !important; min-height: 34px !important; }
.sx-tdesc:focus { border-color: var(--accent) !important; background: var(--panel) !important; }
.sx-tdesc-view { margin: 0; font-size: 13.5px; }
.sx-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-facts > span { display: grid; gap: 1px; padding: 7px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13px; min-width: 90px; }
.sx-facts i { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sx-facts b { font-weight: 600; }
.sx-facts b.zero { color: var(--warn); }
.sx-facts small { color: var(--muted); font-size: 11px; }
.sx-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); width: fit-content; box-shadow: var(--shadow); }
.sx-tabs button { border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 7px 14px; border-radius: 9px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.sx-tabs button b { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.sx-tabs button:hover { color: var(--text); }
.sx-tabs button.active { background: var(--ink-2); color: #fff; }
.sx-tabs button.active b { background: rgba(255, 255, 255, .18); color: #fff; }
.sx-pane { border-radius: 16px; overflow: hidden; }
.sx-cols td { vertical-align: top; }
.sx-reltools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sx-nb { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 200px; font-size: 12.5px; }
.sx-nb .muted { margin-right: 4px; }
.sx-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.sx-zoom { display: inline-flex; gap: 2px; }
.sx-zoom .btn { min-width: 34px; }
.btn.active { background: var(--ink-2); color: #fff; border-color: var(--ink-2); }
.erd { padding: 12px; overflow: auto; min-height: 120px; max-height: 70vh; background: var(--panel-2); }
.erd svg { width: auto; max-width: none; margin: 0 auto; }
.sx-norel { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 28px 16px; font-size: 13.5px; color: var(--text); }
.sx-norel span { color: var(--muted); font-size: 12.5px; }
.sx-pane .schema-legend { border-top: 1px solid var(--line); flex-wrap: wrap; }
.sx-pane .sample-box { padding: 14px 16px; }
.btn.ghost.active, .btn.active { background: var(--ink-2) !important; color: #fff !important; border-color: var(--ink-2) !important; }
.erd.grab { cursor: grab; } .erd.grabbing { cursor: grabbing; user-select: none; }

/* documents: coloured field values */
.dx-fchips > div[data-fc] { background: color-mix(in srgb, var(--fc) 9%, var(--panel)); border-color: color-mix(in srgb, var(--fc) 35%, transparent); }
.dx-fchips > div[data-fc] dt { color: color-mix(in srgb, var(--fc) 75%, var(--muted)); }
.dx-fchips > div[data-fc] dd { color: var(--fc); }
.dx-rf em { font-style: normal; }
.dx-rf[data-fc] em { color: var(--fc); font-weight: 600; background: color-mix(in srgb, var(--fc) 9%, transparent); padding: 0 6px; border-radius: 5px; }
.dx-fval { display: inline-block; padding: 1px 8px; border-radius: 6px; font-weight: 600; }
.dx-fval[data-fc], dd[data-fc] .dx-fval { color: var(--fc); background: color-mix(in srgb, var(--fc) 10%, transparent); }
.dx-frow-main { grid-template-columns: minmax(0, 1fr) 130px auto auto 118px auto; }
.dx-fcol { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dx-fcol i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--muted); pointer-events: none; }
.dx-fcol[data-fc] i { background: var(--fc); border: 0; }
.dx-fcol select { padding-left: 27px !important; font-size: 12.5px; width: 100%; }

/* documents: the toolbar and filter selects match the page */
.dx-sort select, .dx-ffbar label select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7A90' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; padding-right: 30px !important; }
.dx-sort select { font: inherit; font-size: 13px; font-weight: 500; color: var(--text); background-color: var(--panel);
  border: 1px solid var(--line); border-radius: 9px; height: 32px; padding: 0 30px 0 12px; transition: border-color .15s, box-shadow .15s; box-shadow: none; }
.dx-sort select:hover, .dx-ffbar label select:hover { border-color: var(--accent); }
.dx-sort select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 90, 168, .12); }
.dx-sort { gap: 8px; }

/* documents: Excel / CSV / Word preview in the page */
.dx-sheetpv { min-height: 120px; }
.dx-sheetpv .loading { padding: 16px; }
.dx-xl-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dx-xl-tabs button { border: 1px solid transparent; border-bottom: 0; background: none; font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 8px 8px 0 0; color: var(--muted); cursor: pointer; white-space: nowrap; }
.dx-xl-tabs button.active { background: var(--panel); border-color: var(--line); color: #15803D; font-weight: 600; margin-bottom: -1px; }
.dx-grid-wrap { overflow: auto; max-height: 560px; }
.dx-xl { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 100%; }
.dx-xl th, .dx-xl td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.dx-xl thead th { position: sticky; top: 0; z-index: 2; background: var(--panel-2); color: var(--muted); font-weight: 600; font-size: 11.5px; text-align: center; }
.dx-xl tbody th { position: sticky; left: 0; z-index: 1; background: var(--panel-2); color: var(--muted); font-weight: 500; font-size: 11.5px; text-align: right; min-width: 34px; }
.dx-xl thead th:first-child { left: 0; z-index: 3; }
.dx-xl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.dx-xl tbody tr:hover td { background: rgba(30, 90, 168, .05); }
.dx-xl-more { margin: 0; padding: 8px 12px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); }
.dx-docpv { white-space: pre-wrap; padding: 18px 22px; max-height: 620px; overflow: auto; font-size: 14px; line-height: 1.7; }

/* lookup: follow a value to the table it comes from */
.lk-jump { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; padding: 0; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; transition: all .12s; }
.lk-jump:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translate(1px, -1px); }
td > .lk-jump { float: left; margin-top: 1px; }
.lk-jump-menu { position: absolute; z-index: 60; min-width: 250px; max-width: 360px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(19, 33, 58, .22); padding: 6px; display: grid; gap: 2px; }
.lk-jump-menu p { margin: 4px 8px 6px; font-size: 12.5px; color: var(--muted); }
.lk-jump-menu button { display: grid; gap: 1px; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; color: var(--text); }
.lk-jump-menu button:hover { background: var(--panel-2); }
.lk-jump-menu small { color: var(--muted); font-size: 11.5px; }
.lk-xp { padding: 14px 18px; display: grid; gap: 12px; margin-bottom: 14px; border-left: 3px solid var(--accent); }
.lk-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lk-crumb { border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); display: inline-flex; gap: 6px; align-items: center; }
.lk-crumb small { color: var(--muted); }
.lk-crumb:hover { border-color: var(--accent); }
.lk-crumb.on { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.lk-crumb.on small { color: rgba(255, 255, 255, .75); }
.lk-xp-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; }
.lk-xp-top h3 { margin: 0 0 4px; font-size: 16px; font-weight: 500; }
.lk-xp-top p { margin: 0; font-size: 12.5px; }
.lk-xp-badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); vertical-align: 2px; margin-right: 4px; }
.lk-xp-ai { font-size: 13.5px; padding: 9px 12px; border-radius: 10px; background: var(--ai-bg, rgba(91, 79, 209, .08)); border: 1px solid var(--ai-line, rgba(91, 79, 209, .25)); }
.lk-xp-ai:empty { display: none; }
.lk-xp-spark { color: var(--ai-ink, #5B4FD1); font-weight: 700; margin-right: 4px; }
.lk-xp-more { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.lk-xp-add { border: 1px dashed var(--line); background: none; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); }
.lk-xp-add:hover { border-color: var(--accent); color: var(--accent); }
.lk-xp-add.ai { border-style: solid; border-color: var(--ai-line, rgba(91, 79, 209, .4)); background: var(--ai-bg, rgba(91, 79, 209, .08)); color: var(--ai-ink, #5B4FD1); font-weight: 500; }
.lk-xp-loading { margin: 0 0 10px; }
.lk-grid-table-view td > .lk-jump { opacity: .3; }
.lk-grid-table-view tr:hover td > .lk-jump, .lk-grid-table-view td > .lk-jump:focus { opacity: 1; }

/* lookup: Simple / Detailed view */
.lk-viewtgl { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); margin-right: 6px; }
.lk-viewtgl button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 7px; color: var(--muted); cursor: pointer; }
.lk-viewtgl button.active { background: var(--ink-2); color: #fff; }
.lk-s-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.lk-card.lk-s { margin: 0; padding: 0; border-radius: 14px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); border-top: 4px solid var(--lc); }
.lk-s:has(.lk-s-table) { grid-column: 1 / -1; }
.lk-s-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; margin: 0;
  background: color-mix(in srgb, var(--lc) 8%, var(--panel)); border-bottom: 1px solid color-mix(in srgb, var(--lc) 18%, var(--line)); cursor: pointer; }
.lk-s-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--lc); display: flex; align-items: center; gap: 6px; }
.lk-s-head .lk-fold { color: var(--lc); }
.lk-s-count { font-size: 12px; font-weight: 600; color: var(--lc); background: color-mix(in srgb, var(--lc) 12%, transparent); padding: 2px 9px; border-radius: 999px; }
.lk-s.collapsed .lk-card-body { display: none; }
.lk-s .lk-card-body { padding: 0; }
.lk-s-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lk-s-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: 9px 14px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); min-width: 0; }
.lk-s-f .lk-s-k { grid-column: 1; }
.lk-s-f .lk-s-v { grid-column: 1; grid-row: 2; }
.lk-s-f .lk-s-act { grid-column: 2; grid-row: 1 / 3; align-self: center; opacity: .25; transition: opacity .12s; }
.lk-s-f:hover .lk-s-act { opacity: 1; }
.lk-s-k { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--lc) 70%, var(--muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-s-v { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.lk-s-act { display: inline-flex; gap: 2px; }
.lk-s-one { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 14px 16px; align-items: center; }
.lk-s-one .lk-s-big { grid-column: 1; font-size: 22px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.lk-s-one .lk-s-act { grid-column: 2; grid-row: 1 / 3; }
.lk-s-table { overflow: auto; max-height: 460px; }
.lk-s-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
.lk-s-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--lc) 10%, var(--panel)); color: color-mix(in srgb, var(--lc) 80%, var(--text)); border-bottom: 1px solid color-mix(in srgb, var(--lc) 25%, var(--line)); white-space: nowrap; }
.lk-s-table td { padding: 7px 12px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.lk-s-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--lc) 3%, transparent); }
.lk-s-table tbody tr:hover td { background: color-mix(in srgb, var(--lc) 8%, transparent); }
.lk-s-table td > .lk-jump { opacity: .3; }
.lk-s-table tr:hover td > .lk-jump { opacity: 1; }
.lk-s-none { margin: 12px 2px 0; font-size: 12.5px; color: var(--muted); }
.lk-s-none span { white-space: nowrap; }
.lk-s-summary { margin-bottom: 12px; }
.lk-flt-mode { width: auto !important; display: inline-block; margin: 0 6px; padding: 3px 8px !important; font-size: 13px !important; }
.lk-col-named { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px 16px; }
.lk-coln { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; align-items: center; }
.lk-coln input[data-col-label] { padding: 4px 8px !important; font-size: 12.5px !important; }

/* documents: procedures inside a Word SOP */
.dx-hits { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.dx-hits span { font-size: 12px; color: var(--accent); background: rgba(30, 90, 168, .08); border: 1px solid rgba(30, 90, 168, .18); padding: 1px 8px; border-radius: 6px; cursor: pointer; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-hits span:hover { background: var(--accent); color: #fff; }
.dx-procs .dx-procs-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); border-top: 1px solid var(--line); min-height: 420px; }
.dx-toc { border-right: 1px solid var(--line); display: flex; flex-direction: column; max-height: 78vh; background: var(--panel-2); }
.dx-toc-q { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--muted); }
.dx-toc-q input { flex: 1; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 7px 0 !important; font-size: 13px; outline: 0; }
#dx-toc-list { overflow: auto; padding: 0 6px 10px; display: grid; gap: 1px; align-content: start; }
.dx-toc-i { display: grid; gap: 1px; text-align: start; border: 0; background: none; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; color: var(--text); }
.dx-toc-i span { font-size: 13px; font-weight: 500; line-height: 1.35; }
.dx-toc-i small { font-size: 11px; color: var(--muted); }
.dx-toc-i.lv2 { padding-inline-start: 22px; }
.dx-toc-i.lv2 span { font-weight: 400; }
.dx-toc-i:hover { background: var(--panel); }
.dx-toc-i.on { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); color: var(--accent); }
.dx-proc { padding: 18px 24px 24px; min-width: 0; max-height: 78vh; overflow: auto; }
.dx-proc-head { position: sticky; top: -18px; z-index: 2; background: var(--panel); padding: 4px 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.dx-proc-head h2 { margin: 0 0 8px; font-size: 20px; }
.dx-proc-path { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.dx-proc-kw { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.dx-proc-kw span { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: rgba(91, 79, 209, .1); color: #5B4FD1; }
.dx-proc-act { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-steps { font-size: 14px; line-height: 1.75; }
.dx-steps p { margin: 0 0 6px; overflow-wrap: anywhere; }
.dx-st-li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-inline-start: calc(var(--ind, 0) * 22px); }
.dx-st-li b { color: var(--accent); font-weight: 600; min-width: 18px; }
.dx-st-sub { margin: 16px 0 6px; font-size: 15px; color: var(--ink-2); }
.dx-st-fig { margin: 10px 0 14px; }
.dx-st-fig img { display: block; max-width: 100%; max-height: 520px; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 10px rgba(19, 33, 58, .08); cursor: zoom-in; background: #fff; }
.dx-st-img { max-height: 120px; vertical-align: middle; border-radius: 6px; border: 1px solid var(--line); }
.dx-st-table { overflow: auto; margin: 8px 0 12px; }
.dx-st-table table { border-collapse: collapse; font-size: 13px; min-width: 60%; }
.dx-st-table td, .dx-st-table th { border: 1px solid var(--line); padding: 6px 10px; vertical-align: top; text-align: start; }
.dx-st-table th { background: var(--panel-2); font-weight: 600; }
.dx-st-code { background: #0f1b2d; color: #d6e2f5; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; overflow: auto; margin: 8px 0 12px; }
.dx-zoom { display: grid; gap: 12px; }
.dx-zoom img { max-width: 100%; max-height: 78vh; margin: 0 auto; display: block; }
@media (max-width: 900px) { .dx-procs .dx-procs-body { grid-template-columns: 1fr; } .dx-toc { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); } .dx-proc { max-height: none; } }
/* chat: a SOP procedure */
.cx-proc .cx-content-body { max-height: 520px; }
.cx-proc .cx-content-body h5 { margin: 12px 0 4px; font-size: 13.5px; }
.cx-pfig { display: block; margin: 8px 0 12px; }
.cx-pfig img { display: block; max-width: 100%; max-height: 360px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.cx-pimg-s { max-height: 80px; vertical-align: middle; border-radius: 4px; }
.cx-pcode { background: #0f1b2d; color: #d6e2f5; border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow: auto; margin: 6px 0 10px; }
button.cx-doc { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }

/* lookup: search header (lookup picker + one search bar) */
.lk-hero { padding: 16px 18px; display: grid; gap: 14px; margin-bottom: 16px; border-radius: 16px; }
.lk-hero-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lk-pick { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font: inherit; color: var(--text); text-align: start; max-width: 100%; transition: border-color .15s, box-shadow .15s; }
.lk-pick:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(30, 90, 168, .10); }
.lk-pick-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 18px; flex: none; }
.lk-pick-txt { display: grid; min-width: 0; }
.lk-pick-txt small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.lk-pick-txt b { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.lk-pick-car { color: var(--muted); font-size: 12px; margin-left: 4px; }
.lk-hero-meta { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.lk-hero-meta i { font-style: normal; opacity: .6; }
.lk-hero-meta span:first-child { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-bar { display: flex; align-items: stretch; gap: 0; border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lk-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(30, 90, 168, .10); }
.lk-bar-value { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 200px; margin: 0; }
.lk-bar-ic { color: var(--muted); font-size: 18px; }
.lk-bar-value input { flex: 1; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; font-size: 16px; padding: 13px 0 !important; min-width: 0; }
.lk-bar-sel { display: flex; align-items: center; gap: 6px; padding: 0 6px 0 12px; border-left: 1px solid var(--line); margin: 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.lk-bar-sel select { appearance: none; -webkit-appearance: none; border: 0 !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7A90' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 6px center !important;
  box-shadow: none !important; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); padding: 8px 22px 8px 2px !important; max-width: 200px; cursor: pointer; text-overflow: ellipsis; }
.lk-bar-go { border-radius: 0 !important; height: auto !important; padding: 0 26px !important; font-size: 15px; }
@media (max-width: 760px) { .lk-bar { flex-wrap: wrap; } .lk-bar-value { flex-basis: 100%; } .lk-bar-sel { border-left: 0; border-top: 1px solid var(--line); flex: 1; } .lk-bar-go { flex-basis: 100%; padding: 10px !important; } }
.lk-pop { position: fixed; z-index: 70; width: 420px; max-width: calc(100vw - 24px); max-height: 60vh; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(19, 33, 58, .22); overflow: hidden; }
.lk-pop-q { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); margin: 0; }
.lk-pop-q input { flex: 1; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 4px 0 !important; font-size: 14px; }
.lk-pop-list { overflow: auto; padding: 6px; }
.lk-pop-g p { margin: 8px 8px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.lk-pop-i { display: grid; gap: 1px; width: 100%; text-align: start; border: 0; background: none; border-radius: 9px; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--text); }
.lk-pop-i b { font-weight: 600; font-size: 14px; }
.lk-pop-i small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-pop-i:hover { background: var(--panel-2); }
.lk-pop-i.on { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.lk-pop-i.other { opacity: .55; }
.lk-pop-new { border: 0; border-top: 1px solid var(--line); background: var(--panel-2); padding: 10px; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }

/* the data source switcher at the top of every page */
.source-switch { border-radius: 12px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.source-switch:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(30, 90, 168, .08); }
.source-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 0 12px; align-self: stretch; background: var(--panel-2); }
.source-label::before { content: ""; width: 12px; height: 14px; background: var(--muted); opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cellipse cx='6' cy='2.5' rx='5.5' ry='2.2'/%3E%3Cpath d='M.5 3v8.5C.5 12.7 3 13.7 6 13.7s5.5-1 5.5-2.2V3c0 1.2-2.5 2.2-5.5 2.2S.5 4.2.5 3z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cellipse cx='6' cy='2.5' rx='5.5' ry='2.2'/%3E%3Cpath d='M.5 3v8.5C.5 12.7 3 13.7 6 13.7s5.5-1 5.5-2.2V3c0 1.2-2.5 2.2-5.5 2.2S.5 4.2.5 3z'/%3E%3C/svg%3E") no-repeat center / contain; }
.source-switch select { appearance: none; -webkit-appearance: none; padding: 9px 34px 9px 12px; font-weight: 600;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7A90' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
.source-switch select:focus { outline: 0; }
.source-switch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30, 90, 168, .12); }
.dx-catrow { grid-template-columns: 20px 40px 170px minmax(0, 1fr) 60px repeat(5, auto); }

/* ---- documents: settings of one, several or all categories */
.dx-set h2 { display: flex; align-items: center; gap: 8px; }
.dx-set h2 .dx-i { width: 20px; height: 20px; }
.dx-set-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dx-set-lbl { font-weight: 600; font-size: 13px; }
.dx-set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-set-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 11px; border-radius: 999px; background: var(--ai-bg); border: 1px solid var(--ai-line); font-size: 12.5px; font-weight: 600; }
.dx-set-chip button { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 11px; padding: 0 4px; }
.dx-set-chip button:hover { color: var(--danger, #c0392b); }
.dx-set-pick { position: relative; }
.dx-set-pick > summary { list-style: none; cursor: pointer; }
.dx-set-pick > summary::-webkit-details-marker { display: none; }
.dx-set-pop { position: absolute; z-index: 20; top: calc(100% + 6px); inset-inline-start: 0; width: 340px; max-width: 80vw; padding: 10px; background: var(--panel, #fff);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.dx-set-quick { display: flex; gap: 12px; margin: 6px 2px; font-size: 12.5px; }
.dx-set-list { max-height: 260px; overflow: auto; display: grid; gap: 2px; }
.dx-set-list .check { padding: 4px 6px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.dx-set-list .check:hover { background: var(--ai-bg); }
.dx-set-sum { margin: 4px 0 10px; font-size: 12.5px; }
.dx-set-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dx-set-tabs button { border: 0; background: transparent; padding: 8px 14px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dx-set-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.dx-set-body { min-height: 180px; }
.dx-set-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 12px; }
.dx-set-row label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 240px; }
.dx-set-row .btn .dx-i { width: 15px; height: 15px; margin-inline-end: 4px; vertical-align: -2px; }
.dx-set-cmp { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
.dx-set-st { font-size: 12px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); }
.dx-set-st.ok { color: #1f7a4d; border-color: #9fd8b9; background: #eefaf3; }
.dx-set-st.diff { color: #9a5b00; border-color: #f0cf94; background: #fff7e8; }
.dx-set-links { display: grid; gap: 8px; margin-bottom: 10px; }
.dx-set-link { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.dx-set-link:has(.doc-elinks) { grid-template-columns: 1fr; }
.dx-set-lmain { min-width: 0; display: grid; gap: 4px; font-size: 13px; }
.dx-set-val { display: block; white-space: pre-wrap; word-break: break-word; font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--ai-bg); }
.dx-set-cnt { font-size: 12px; font-weight: 600; color: #1f7a4d; white-space: nowrap; padding-top: 2px; }
.dx-set-cnt.part { color: #9a5b00; }
.dx-set-act { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 700px) { .dx-set-link { grid-template-columns: 1fr; } }
.dx-set-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.dx-var { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; border: 1px solid var(--ai-line); background: var(--ai-bg);
  color: var(--ai-ink); font: 600 12px ui-monospace, SFMono-Regular, Consolas, monospace; cursor: pointer; }
.dx-var small { font: 500 11px system-ui, sans-serif; color: var(--muted); }
.dx-var:hover { border-color: var(--ai-ink); }
.dx-fkey { justify-self: end; width: fit-content; margin-inline-start: auto; display: block; font-size: 11.5px; color: var(--ai-ink); background: var(--ai-bg); border: 1px solid var(--ai-line); border-radius: 6px; padding: 0 6px; margin-bottom: 4px; }

/* ---- documents: first page = the categories as big tiles; cards per row */
.dx-home-bar { justify-content: space-between; }
.dx-home { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.dx-home-tile { position: relative; display: grid; gap: 6px; align-content: start; min-height: 170px; padding: 22px 22px 18px; border-radius: 16px; cursor: pointer;
  background: var(--panel, #fff); border: 1px solid var(--line); border-top: 5px solid var(--cc, var(--accent)); box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dx-home-tile:hover, .dx-home-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .12); outline: none; }
.dx-home-tile.empty { opacity: .62; }
.dx-home-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--cc, var(--accent));
  background: color-mix(in srgb, var(--cc, #2563eb) 12%, transparent); }
.dx-home-ic .dx-i { width: 24px; height: 24px; }
.dx-home-tile strong { font-size: 19px; line-height: 1.25; margin-top: 4px; }
.dx-home-tile small { color: var(--muted); font-size: 12.5px; }
.dx-home-n { position: absolute; top: 18px; inset-inline-end: 20px; font-size: 30px; font-weight: 700; color: var(--cc, var(--accent)); line-height: 1; }
.dx-home-types { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-home-types i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--ai-bg); color: var(--muted); }
.dx-home-kids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.dx-home-kids button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.dx-home-kids button:hover { border-color: var(--cc, var(--accent)); color: var(--cc, var(--accent)); }
.dx-home-kids b { color: var(--muted); font-weight: 600; margin-inline-start: 2px; }
.dx-home-kids em { font-size: 12px; color: var(--muted); align-self: center; }
.dx-home-all { --cc: #334155; }
.dx-home-chip { padding-inline: 10px !important; }
.dx-home-chip .dx-i { width: 15px; height: 15px; vertical-align: -3px; }
.dx-grid.fixed { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@media (max-width: 900px) { .dx-grid.fixed { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
@media (max-width: 600px) { .dx-grid.fixed { grid-template-columns: 1fr; } }
.dx-fcopy { margin-inline-start: 8px; max-width: 320px; font-size: 12.5px; padding: 4px 8px; }
.dx-ffone { width: 100%; min-width: 150px; }
.dx-ffsel { font-size: 12px; padding: 4px 6px; max-width: 190px; }
.dx-fline-sel { display: block; margin-top: 6px; }

/* ---- data quality: insights (what the data says) */
.qi-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 14px; }
.qi-tabs button { border: 0; background: transparent; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.qi-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.qi-tabs button b { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--ai-bg); margin-inline-start: 4px; }
.qi-pane > .panel { margin-bottom: 16px; }
.qi-heads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qi-heads li { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--ai-bg); font-size: 14px; }
.qi-k { flex: none; width: 22px; text-align: center; }
.qi-ex-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 12px; }
.qi-ex-bar label { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; min-width: 220px; }
.qi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.qi-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.qi-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.qi-card h3, .qi-grid2 h3, .qi-text h3 { margin: 0 0 8px; font-size: 13px; }
.qi-bars { display: grid; gap: 5px; }
.qi-bar { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.qi-bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qi-bt { display: block; height: 10px; border-radius: 999px; background: var(--ai-bg); overflow: hidden; }
.qi-bt i { display: block; height: 100%; border-radius: 999px; background: var(--accent); opacity: .85; }
.qi-bn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qi-bn small { color: var(--muted); }
.qi-cols { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-bottom: 38px; overflow-x: auto; overflow-y: hidden; }
.qi-col { position: relative; flex: 1 0 18px; height: 100%; display: flex; align-items: flex-end; }
.qi-col i { display: block; width: 100%; background: var(--accent); opacity: .8; border-radius: 4px 4px 0 0; min-height: 2px; }
.qi-col small { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%) rotate(-35deg); transform-origin: top; font-size: 9.5px; color: var(--muted); white-space: nowrap; }
.qi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.qi-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ai-line); background: var(--ai-bg); font-size: 13px; }
.qi-chips span b { color: var(--ai-ink); margin-inline-start: 4px; font-size: 11.5px; }
.qi-chips span small { color: var(--muted); }
.qi-chips.small span { font-size: 12px; padding: 2px 8px; }
.qi-ai { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.qi-focus { flex: 1 1 320px; }
.qi-ai-res { margin-top: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--ai-line); background: color-mix(in srgb, var(--ai-bg) 60%, transparent); }
.qi-sum { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.qi-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.qi-cat { padding: 10px 12px; border-radius: 10px; background: var(--panel, #fff); border: 1px solid var(--line); display: grid; gap: 6px; }
.qi-cat-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.qi-cat-h span { color: var(--muted); white-space: nowrap; font-size: 12px; }
.qi-cat p { margin: 0; font-size: 12.5px; color: var(--muted); }
.qi-cat details summary { cursor: pointer; font-size: 12px; color: var(--accent); }
.qi-cat ul, .qi-obs { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12.5px; }
.qi-split td { vertical-align: top; }
.qi-ex-bar select, .qi-focus { font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel, #fff); color: inherit; }
.qi-ex-bar select:focus, .qi-focus:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }

/* ---- data quality insights: changes, unusual days, durations, monitors, ask, settings */
.qi-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.qi-ask { flex: 1 1 520px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px;
  border: 1px solid var(--ai-line); background: var(--panel, #fff); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.qi-ask > span { color: var(--ai-ink); }
.qi-ask input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; padding: 6px 0; color: inherit; }
.qi-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.qi-answer .panel-head h2 { font-size: 15px; }
.qi-heads li.k-anomaly { background: #fff4e5; }
.qi-heads li.k-change { background: #eef4ff; }
.qi-heads li.k-time { background: #f2f7f2; }
.qi-ptabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.qi-ptabs button { font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; }
.qi-ptabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.qi-ptotal { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.qi-chgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.qi-chg { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.qi-chg h4 { margin: 0 0 6px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qi-chg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qi-chg li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.qi-ci { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.qi-mv { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--ai-bg); }
.qi-mv.up, .qi-mv.new { color: #b45309; background: #fff4e5; }
.qi-mv.down, .qi-mv.gone { color: #1f7a4d; background: #eefaf3; }
.qi-why { font: inherit; font-size: 11.5px; font-weight: 600; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--ai-line); background: transparent;
  color: var(--ai-ink); cursor: pointer; margin-inline-start: auto; }
.qi-why:hover { background: var(--ai-bg); }
.qi-anom { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qi-anom li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--ai-bg); font-size: 13.5px; }
.qi-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #d97706; }
.qi-anom li.high .qi-dot { background: #dc2626; }
.qi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.qi-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.qi-kpis small { color: var(--muted); font-size: 11.5px; }
.qi-kpis b { font-size: 20px; }
.qi-kpis .warn b { color: #b45309; }
.qi-kpis .bad b { color: #b42318; }
.qi-dsel { font: inherit; font-size: 12.5px; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel, #fff); color: inherit; }
.qi-mons ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qi-mons li { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 10px; align-items: baseline; padding: 8px 12px;
  border-radius: 10px; font-size: 13px; background: #eefaf3; }
.qi-mons li.fired { background: #fdecec; }
.qi-mons li.fired b::before { content: "⚠ "; color: #b42318; }
.qi-mons li.na { background: var(--ai-bg); }
.qi-mons.bad { border-color: #f4b4b4; }
.qi-kw { display: flex; flex-wrap: wrap; gap: 4px; }
.qi-kw code { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--ai-bg); }
.qi-keep { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.qi-share { display: inline-block; width: 60px; height: 7px; border-radius: 999px; background: var(--ai-bg); overflow: hidden; vertical-align: middle; }
.qi-share i { display: block; height: 100%; background: var(--accent); }
.qi-whydlg h3 { font-size: 13px; margin: 14px 0 6px; }
.qi-set fieldset { margin-bottom: 12px; }
.qi-mhead, .qi-mrow { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(130px, 1.3fr) minmax(110px, 1fr) minmax(80px, .8fr) minmax(120px, 1.1fr) 82px 80px 34px 30px;
  gap: 6px; align-items: center; }
.qi-mhead { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.qi-mrow { margin-bottom: 6px; }
.qi-mrow input, .qi-mrow select, .qi-crow input { min-width: 0; font-size: 12.5px; }
.qi-cbox { border: 1px dashed var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.qi-cbox h4 { margin: 0 0 6px; font-size: 12.5px; }
.qi-crow { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr) 30px; gap: 6px; margin-bottom: 6px; }
@media (max-width: 900px) { .qi-mhead { display: none; } .qi-mrow { grid-template-columns: 1fr 1fr; } .qi-mons li { grid-template-columns: 1fr; } }
.qi-pane > .panel { padding-bottom: 16px; }
.qi-pane > .panel > :not(.panel-head):not(.table-wrap):not(table) { margin-left: 18px; margin-right: 18px; }
.qi-pane > .panel > .panel-head + * { margin-top: 14px; }
.qi-pane > .panel > .table-wrap, .qi-pane > .panel > table { margin-top: 10px; }

/* ---------------------------------------------------------- side menu: groups that open and close */
.nav { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
.nav-group { margin-top: 10px; }
.nav-group + .nav-group, .nav a + .nav-group { margin-top: 2px; }
.nav-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-s);
  color: #B8C5D6; font-size: 14.5px; cursor: pointer; user-select: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover { background: var(--ink-2); color: #fff; }
.nav-group > summary svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }
.nav-group > summary .nav-caret { margin-left: auto; width: 14px; height: 14px; transition: transform .15s ease; opacity: .7; }
.nav-group[open] > summary .nav-caret { transform: rotate(90deg); }
.nav-group[open] > summary { color: #fff; }
.nav-group > summary .nav-badge { margin-left: auto; }
.nav-group > summary .nav-badge + .nav-caret { margin-left: 6px; }
.nav-group[open] > summary .nav-badge-closed { display: none; }
.nav-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid var(--ink-3); }
.nav-sub a, .nav-sub .nav-group > summary { font-size: 14px; padding: 7px 10px; }
.nav-sub .nav-group { margin-top: 0; }
.nav-sub a svg, .nav-sub .nav-group > summary svg:not(.nav-caret) { width: 16px; height: 16px; }
.nav .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-ext { margin-left: auto; font-size: 12px; color: #6F82A0; }
.nav a:hover .nav-ext { color: #B8C5D6; }
@media (max-width: 960px) {
  .nav { overflow: visible; }
  .nav-group { margin: 0; position: relative; }
  .nav-sub { position: absolute; z-index: 30; left: 0; top: 100%; min-width: 220px; margin: 4px 0 0; padding: 6px; border: 1px solid var(--ink-3);
    border-radius: var(--r-m); background: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
  .nav-sub .nav-sub { position: static; box-shadow: none; border: 0; border-left: 1px solid var(--ink-3); border-radius: 0; margin-left: 12px; }
}

/* ---------------------------------------------------------- Administration > Menu links */
.links-tree { display: flex; flex-direction: column; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.link-row:first-child { border-top: 0; }
.link-row .link-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.link-row .link-main svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.5; flex: none; }
.link-row .link-title { font-weight: 600; }
.link-row .link-url { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.link-row.off .link-title, .link-row.off .link-url { opacity: .5; text-decoration: line-through; }
.link-row .link-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.link-tag { font-size: 11.5px; padding: 0 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); line-height: 19px; white-space: nowrap; }
.link-tag.group { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick label { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; background: var(--panel); }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick label:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.icon-pick svg { width: 18px; height: 18px; stroke: var(--text); fill: none; stroke-width: 1.5; }
.user-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 140px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); }
.user-pick label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.links-preview { padding: 14px; background: var(--ink); border-radius: var(--r-m); }
.form fieldset.plain { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form fieldset.plain > legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 4px; }
.form fieldset.plain > small { color: var(--muted); font-size: 12.5px; }
.form .icon-pick label, .form .user-pick label { flex-direction: row; font-weight: 400; }
.us-sub { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.rh-table td { vertical-align: middle; }
.rh-row.has { cursor: pointer; }
.rh-row.has:hover { background: var(--panel-2); }
.rh-row .chev { display: inline-block; width: 12px; color: var(--muted); }
.rh-bar { display: block; height: 10px; border-radius: 3px; background: var(--good); }
.rh-bar.sub { height: 6px; opacity: .55; }
.rh-tasks td { font-size: 13.5px; color: var(--muted); background: var(--panel-2); }
.rh-tasks .rh-task { padding-left: 34px; }

/* the light / dark button at the top */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.theme-btn .t-sun { display: none; }
:root[data-theme="dark"] .theme-btn .t-sun { display: block; }
:root[data-theme="dark"] .theme-btn .t-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .t-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .t-moon { display: none; }
}
.topbar .theme-btn { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: var(--r-m); }
.topbar .theme-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------------------------------------------------------- dashboard filters: top, group, box */
.f-bar .f-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.f-bar select, .f-bar input[type=search], .f-bar input[type=date] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line);
  border-radius: var(--r-s); background: var(--panel-2); color: var(--text); min-width: 160px; }
.f-bar .f-field.active select, .f-bar .f-field.active input { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.filter-bar .f-title { display: inline-flex; align-items: center; gap: 6px; align-self: center; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding-right: 6px; border-right: 1px solid var(--line); margin-right: 2px; }
.filter-bar .f-title svg, .btn-ico, .g-gear svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.btn-ico { vertical-align: -3px; margin-right: 5px; }
.filter-status { display: flex; align-items: center; gap: 12px; margin: -6px 0 14px; padding: 8px 14px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--warn) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); }
.filter-status .filter-state { margin: 0; }
.filter-status #filter-reset { margin-left: auto; }
/* in a group's header: compact, on the same line as the title */
.group-head { align-items: center; gap: 14px; flex-wrap: wrap; }
.group-head .group-count { margin-left: auto; }
.g-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 4px 10px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--g-accent, var(--accent)) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--g-accent, var(--accent)) 22%, var(--line)); }
.g-filters .f-field { flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; }
.g-filters select, .g-filters input[type=search], .g-filters input[type=date] { padding: 4px 8px; font-size: 13px; min-width: 130px; background: var(--panel); }
.g-gear { color: var(--muted); width: 28px; height: 28px; }
.g-gear:hover { color: var(--text); background: var(--panel-2); }
/* inside one box: a slim row under its title */
.w-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 6px 16px 0; }
.w-filters .f-field { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
.w-filters select, .w-filters input[type=search], .w-filters input[type=date] { padding: 3px 7px; font-size: 12.5px; min-width: 110px;
  background: color-mix(in srgb, var(--panel) 70%, transparent); border-color: color-mix(in srgb, var(--w-fg, var(--text)) 18%, transparent); color: var(--w-fg, var(--text)); }
.w-filters .f-field > span { color: var(--w-fg, var(--muted)); opacity: .8; }
.place-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; padding: 4px 2px; }
.place-list label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); flex-direction: row; font-weight: 400; }
.place-list label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.place-list .mono { color: var(--muted); font-size: 12px; }
.place-list .elsewhere { margin-left: auto; font-size: 12px; color: var(--muted); }
.f-bar input[type=number] { font: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); width: 110px; }
.g-filters input[type=number] { padding: 4px 8px; font-size: 13px; width: 90px; background: var(--panel); }
.w-filters input[type=number] { padding: 3px 7px; font-size: 12.5px; width: 80px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  border-color: color-mix(in srgb, var(--w-fg, var(--text)) 18%, transparent); color: var(--w-fg, var(--text)); }
/* builder: "Filters in this box / group / at the top" */
.vf-box legend small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.vf-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; }
.vf-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "c n v" "c w w"; align-items: center;
  column-gap: 10px; row-gap: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; font-weight: 400 !important; }
.vf-row input { grid-area: c; }
.vf-row .vf-name { grid-area: n; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-row .vf-name .mono { color: var(--muted); font-size: 12px; }
.vf-row .vf-now { grid-area: v; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.vf-row .vf-where { grid-area: w; font-size: 12px; color: var(--muted); }
.vf-row .vf-where:empty { display: none; }
.vf-row:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.vf-empty { margin: 0; font-size: 13px; }
.w-filters .f-field { flex: 1 1 130px; min-width: 0; max-width: 260px; }
.w-filters .f-field > span { flex: none; white-space: nowrap; }
.w-filters .f-field select, .w-filters .f-field input { flex: 1 1 auto; min-width: 0; width: 100%; }

/* ---------------------------------------------------------- task schedule: calendar (cron) and set dates */
.cal-box { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel-2); }
.cal-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: start; }
.cal-label { font-size: 13px; font-weight: 600; padding-top: 6px; }
.cal-label small { display: block; font-weight: 400; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; min-width: 36px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  color: var(--text); cursor: pointer; text-align: center; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.date { display: inline-flex; align-items: center; gap: 6px; cursor: default; font-family: var(--mono); font-size: 12.5px; }
.chip.date button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.chip.date.past { opacity: .5; text-decoration: line-through; }
.cal-add { display: flex; gap: 8px; align-items: center; }
.cal-preview { font-size: 13.5px; min-height: 20px; }
.cal-preview .err { color: var(--bad); }
.cal-next { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cal-next span { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
@media (max-width: 700px) { .cal-row { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- Operations > Problems */
.pill.ok { color: var(--good); }
.pill.prb-status { color: var(--pill, var(--accent)); background: color-mix(in srgb, var(--pill, var(--accent)) 10%, transparent); }
.seg-mini button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.seg-mini label { display: inline-flex; cursor: pointer; border-left: 1px solid var(--line); flex-direction: row !important; font-weight: 400 !important; }
.seg-mini label:first-child { border-left: 0; }
.seg-mini label input { position: absolute; opacity: 0; pointer-events: none; }
.seg-mini label span { padding: 6px 14px; font-size: 13.5px; }
.seg-mini label:has(input:checked) span { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 500; }
.prb-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.prb-filters input[type=search] { flex: 1 1 220px; min-width: 180px; }
.prb-table td { vertical-align: top; }
.prb-table tr[data-href] { cursor: pointer; }
.prb-table tr[data-href]:hover td { background: var(--panel-2); }
.prb-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prb-title a { font-weight: 600; color: var(--text); text-decoration: none; }
.prb-title a:hover { text-decoration: underline; }
.prb-ref { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.prb-ref.big { font-size: 13px; font-weight: 600; letter-spacing: .03em; }
.prio { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.prio.critical { color: var(--bad); } .prio.high { color: var(--warn); }
.tk-chip { display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 0 6px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line); }
.req { color: var(--bad); }
.prb-form .grid3 { align-items: start; }
.tk-row { display: grid; grid-template-columns: 170px 1fr 1.4fr auto; gap: 8px; margin-bottom: 8px; }
.prb-head { padding: 18px 22px; }
.prb-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prb-h { font-size: 22px; line-height: 1.3; margin: 8px 0 4px; }
.prb-summary { margin: 0 0 6px; color: var(--muted); font-size: 15px; white-space: pre-wrap; }
.prb-linked { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lk-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 360px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text); font-size: 13px; text-decoration: none; }
.lk-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-chip svg, .st-item svg, .lk-row svg, .prb-files svg, .lk-add .dropdown-menu svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; flex: none; }
a.lk-chip:hover { border-color: var(--accent); color: var(--accent); }
.lk-chip.document { color: #2f6fd6; } .lk-chip.task { color: #7a4fd0; } .lk-chip.lookup { color: #0b7a6e; } .lk-chip.check { color: #b5591a; }
.lk-chip.ticket { font-family: var(--mono); font-size: 12.5px; } .lk-chip.impact { color: var(--warn); }
.lk-add .dropdown-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: inherit; padding: 7px 12px; cursor: pointer; }
.lk-add .dropdown-menu button:hover { background: var(--panel-2); }
.prb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.prb-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.prb-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
@media (max-width: 1100px) { .prb-grid { grid-template-columns: 1fr; } .prb-side { position: static; } }
.prb-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 0 16px 14px; }
.prb-fields dt { font-size: 12px; color: var(--muted); }
.prb-fields dd { margin: 2px 0 0; font-weight: 500; }
@media (max-width: 700px) { .prb-fields { grid-template-columns: 1fr 1fr; } .tk-row { grid-template-columns: 1fr 1fr; } }
.prb-note { margin: 0 16px 14px; padding: 10px 12px; border-radius: var(--r-s); border: 1px dashed color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 6%, var(--panel)); font-size: 14px; white-space: pre-wrap; }
.prb-sub { font-size: 14px; margin: 4px 16px 6px; }
.prb-text { margin: 0 16px 16px; white-space: pre-wrap; line-height: 1.6; }
.imp-count { margin: 0 16px 8px; }
.imp-table { max-height: 420px; overflow: auto; margin: 0 16px 14px; border: 1px solid var(--line); border-radius: var(--r-s); }
.prb-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 0 16px 12px; }
.prb-pic { margin: 0; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; background: var(--panel-2); }
.prb-pic img { display: block; width: 100%; height: 150px; object-fit: cover; }
.prb-pic figcaption { padding: 6px 8px; font-size: 12.5px; }
.prb-files { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.prb-files li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drop-hint { margin: 0 16px 12px; }
.file-btn { cursor: pointer; }
.prb-events { list-style: none; margin: 0; padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; max-height: 360px; overflow: auto; }
.prb-events li { display: grid; grid-template-columns: 120px 100px minmax(0, 1fr); gap: 8px; }
.prb-events .when, .prb-events .who { color: var(--muted); font-size: 12.5px; }
/* stages: like the versions card of a document */
.versions-card { padding: 14px 16px 16px; }
.vc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.vc-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.vc-head .badge { font-size: 12px; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stage { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 8px 6px 10px; border-radius: var(--r-s); cursor: pointer; }
.stage:hover { background: var(--panel-2); }
.stage.selected { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.stage::before { content: ""; position: absolute; left: 14px; top: 22px; bottom: -8px; width: 2px; background: var(--line); }
.stage:last-child::before { display: none; }
.stage .dot { width: 12px; height: 12px; margin: 4px 0 0 3px; border-radius: 50%; border: 2px solid var(--muted); background: var(--panel); z-index: 1; }
.stage.current .dot { border-color: var(--good); background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.st-title { font-size: 14px; line-height: 1.35; }
.st-title b { display: inline-block; min-width: 18px; color: var(--accent); }
.st-title .cur { font-size: 12px; color: var(--good); font-weight: 600; }
.st-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.st-note { margin-top: 6px; padding: 6px 9px; border-radius: var(--r-s); background: var(--panel-2); font-size: 13px; white-space: pre-wrap; }
.st-items { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.st-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); text-decoration: none; min-width: 0; }
.st-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item:hover { color: var(--accent); }
.st-actions { display: flex; gap: 12px; margin-top: 6px; }
.del-prb { align-self: center; }
.lk-results { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow: auto; }
.lk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-s); }
.lk-row > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* the bar on a document / task page: back to the problem, problems that link it */
.prb-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 14px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--panel); }
.prb-bar.back { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.prb-back { color: var(--accent); text-decoration: none; }
.prb-mini { font-size: 13px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--text); background: var(--panel-2); }
.prb-mini.done { opacity: .7; }
.prb-mini:hover { border-color: var(--accent); }
/* Administration > Problem lists */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; align-items: start; }
.pl-card .pl-help { margin: -4px 16px 8px; }
.pl-list { display: flex; flex-direction: column; padding-bottom: 10px; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); }
.pl-row.off .pl-val { opacity: .5; text-decoration: line-through; }
.pl-color { width: 10px; height: 10px; border-radius: 50%; }
.pl-group { padding: 8px 12px 2px; border-top: 1px solid var(--line); }
.pl-add-in { display: block; margin: 4px 0 6px; font-size: 13px; }
.crumb { color: var(--muted); text-decoration: none; font-weight: 500; }
.crumb:hover { color: var(--accent); }
.crumb-sep { color: var(--muted); margin: 0 4px; }
/* problems: search box like the other filters */
.prb-filters .search-box { flex: 1 1 260px; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--muted); }
.prb-filters .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.prb-filters .search-box svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; flex: none; }
.prb-filters .search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; padding: 7px 0; color: var(--text); }
.prb-filters .seg-mini button { padding: 6px 14px; }
/* problem page: clearer box titles */
#problem .panel-head h2, #problem .fold-head h2 { font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
#problem .panel-head { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.prb-fields .wide { grid-column: 1 / -1; }
.prb-fields .wide dd { font-weight: 400; white-space: pre-wrap; }
/* a box that opens and closes (Impact cases) */
.fold-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.fold-head h2 { margin: 0; }
.fold-head:hover { background: var(--panel-2); }
.fold-caret { display: inline-block; color: var(--muted); transition: transform .15s ease; font-size: 13px; }
.fold.open .fold-caret { transform: rotate(90deg); }
.fold-sum { margin-left: auto; font-size: 13px; color: var(--muted); }
.fold.open .fold-head { border-bottom: 1px solid var(--line); }
.fold-body { padding-top: 12px; }
.imp-src { display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; }
.imp-part { padding: 4px 0 4px 24px; border-left: 2px solid var(--line); margin-left: 6px; }
/* attachments */
.att-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 12px; }
.att-where { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.att-where select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); color: var(--text); max-width: 260px; }
.att-empty { margin: 0 16px 14px; }
.att-group { padding: 0 0 6px; }
.att-h { font-size: 13px; font-weight: 600; color: var(--muted); margin: 4px 16px 8px; text-transform: none; }
.url-text { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-field { cursor: pointer; }
/* problem page: linked documents & tasks, quick view */
.lk-table td { vertical-align: middle; }
.lk-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.lk-kind svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.lk-kind.document { color: #2f6fd6; } .lk-kind.task { color: #7a4fd0; } .lk-kind.lookup { color: #0b7a6e; } .lk-kind.check { color: #b5591a; }
.lk-acts { text-align: right; white-space: nowrap; }
.lk-acts > * { margin-left: 6px; }
#linked .panel-head .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; vertical-align: -2px; margin-right: 3px; }
#linked .panel-head { flex-wrap: wrap; gap: 6px; }
.qv-dlg { width: min(1100px, 94vw); }
.qv-head { display: flex; align-items: center; gap: 8px; }
.qv-head h2 { margin: 0; }
.qv-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-s); background: #fff; }
.qv-img { max-width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); }
.qv-text { white-space: pre-wrap; max-height: 65vh; overflow: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); font-size: 14px; line-height: 1.6; }
.qv-sheet { max-height: 45vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); }
/* Lookup page: problem lookups kept apart */
.lk-prb-btn .badge { font-size: 11.5px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); margin-left: 4px; }
.lk-prb-note { margin-bottom: 12px; }

/* ================================================================ dashboard: flexible boxes
   Every box adapts to the size it is given:
   - a number box puts the value and its comparisons side by side when it is wide, under each other when narrow,
     and only the value when it is tiny; in a fixed height the value shrinks to fit the height too
   - a table gets compact rows and becomes a list of cards (label: value) in a narrow box
   - filters inside a box are small chips in its footer, not a row of inputs
   - "Compact" (default) packs boxes tighter; small boxes fill empty holes in the rows */
.dash-left { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash-grid { grid-auto-flow: row dense; }

/* footer: "Updated" on the left, filter chips on the right */
.w-foot { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; opacity: 1; }
.w-foot .w-updated { opacity: .6; margin-right: auto; white-space: nowrap; }
.w-foot .w-filters { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; justify-content: flex-end; }
.w-foot .w-filters .f-field { flex: none; max-width: none; flex-direction: row; align-items: center; gap: 4px; font-size: 11px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: 999px; padding: 1px 4px 1px 8px;
  background: color-mix(in srgb, var(--w-bg, var(--panel)) 75%, transparent); color: var(--w-fg, var(--text)); }
.w-foot .w-filters .f-field > span { opacity: .65; color: inherit; }
.w-foot .w-filters .f-field > span small { display: none; }
.w-foot .w-filters input, .w-foot .w-filters input[type=number], .w-foot .w-filters input[type=search], .w-foot .w-filters input[type=date],
.w-foot .w-filters select { border: 0; box-shadow: none; background: transparent; padding: 1px 2px; font-size: 11.5px; font-weight: 600;
  min-width: 3ch; width: 6ch; max-width: 22ch; color: inherit; border-radius: 6px; }
.w-foot .w-filters input[type=date] { width: auto; }
.w-foot .w-filters select { width: auto; }
.w-foot .w-filters input:focus, .w-foot .w-filters select:focus { outline: 2px solid var(--accent); outline-offset: 0; background: var(--panel); color: var(--text); }
.w-foot .w-filters .f-field.active { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn); }
.w-foot .w-filters .f-field.active input, .w-foot .w-filters .f-field.active select { border: 0; box-shadow: none; }
.w-foot .w-filters input::-webkit-inner-spin-button { display: none; }

/* number box */
.widget[data-display="number"] { min-height: 0; }
.widget[data-display="number"] .w-body { padding-top: 4px; padding-bottom: 4px; }
@container (min-width: 430px) {
  .widget[data-display="number"] .w-body { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
  .widget[data-display="number"] .w-value { flex: 0 1 auto; min-width: 0; }
  .widget[data-display="number"] .w-deltas { margin-top: 0; flex: 0 1 auto; justify-content: flex-end; }
  .widget[data-display="number"] .w-value { font-size: clamp(14px, calc((55cqw - 26px) / (var(--len, 6) * .62)), 40px); }
}
/* fixed height: the body knows its height, so the value fits it and the comparisons hide when there is no room */
.widget.sized .w-body { container: wbody / size; }
.widget.sized[data-display="number"] .w-value { font-size: clamp(11px, min(16cqw, calc((100cqw - 26px) / (var(--len, 6) * .62)), 62cqh), 44px); }
@container wbody (max-height: 78px) { .w-deltas { display: none; } }
@container wbody (min-width: 430px) {
  .w-value { font-size: clamp(11px, min(calc((55cqw - 26px) / (var(--len, 6) * .62)), 70cqh), 44px) !important; }
}

/* table box */
.w-table th { padding: 6px 12px; font-size: 12px; }
.w-table td { padding: 5px 12px; }
.w-table tbody tr:hover td { background: color-mix(in srgb, currentColor 5%, transparent); }
.widget[data-display="table"] { min-height: 0; }
.widget[data-display="table"] .w-body { justify-content: flex-start; }
@container (max-width: 380px) {
  .w-table { margin: 0 -10px; }
  .w-table table, .w-table tbody, .w-table tr, .w-table td { display: block; width: 100%; }
  .w-table thead { display: none; }
  .w-table tr { padding: 6px 10px; border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
  .w-table td { border: 0; padding: 1px 0; text-align: right !important; display: flex; justify-content: space-between; gap: 10px; white-space: normal; }
  .w-table td::before { content: attr(data-label); opacity: .6; text-align: left; flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* chart box */
.widget[data-display="line"], .widget[data-display="bar"] { min-height: 0; }

/* compact spacing (default; "Comfortable" keeps the roomy look) */
body.dash-compact .grid.dash-grid { gap: 10px; }
body.dash-compact .group { padding: 10px 12px; }
body.dash-compact .group-head { margin: 0 2px 8px; }
body.dash-compact .group-head h2 { font-size: 14.5px; }
body.dash-compact .drop-zone + .group, body.dash-compact .group + .group, body.dash-compact .content > .grid + .group { margin-top: 12px; }
body.dash-compact .w-head { padding: 8px 8px 0 12px; }
body.dash-compact .w-head h3 { font-size: 13px; }
body.dash-compact .w-body { padding: 4px 12px; }
body.dash-compact .w-foot { padding: 2px 12px 8px; font-size: 11px; }
body.dash-compact .w-table { margin: 0 -12px; }
body.dash-compact .w-chart { height: 180px; }
body.dash-compact .widget.h-2 .w-chart { height: 250px; }
body.dash-compact .w-value { line-height: 1.05; }
body.dash-compact .w-deltas { margin-top: 6px; gap: 4px; }
body.dash-compact .delta { font-size: 11.5px; padding: 1px 7px; }
body.dash-compact .dash-tools { margin-bottom: 10px; }
@container (max-width: 260px) {
  .w-foot .w-filters .f-field > span { display: none; }
}
body.dash-masonry .grid.dash-grid { grid-auto-rows: 4px; row-gap: 0 !important; align-items: start; }
body.dash-masonry .dash-grid > .widget { align-self: start; }

/* filter chips in a box: clearly visible (accent colour) */
.w-foot .w-filters .f-field { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--w-bg, var(--panel))); color: var(--accent); }
.w-foot .w-filters .f-field > span { opacity: .9; font-weight: 500; }
.w-foot .w-filters .f-field > span::before { content: "⚲ "; }
.w-foot .w-filters input, .w-foot .w-filters select { color: var(--text); background: var(--panel); border-radius: 999px; padding: 1px 6px; }
.w-foot .w-filters .f-field.active { background: color-mix(in srgb, var(--warn) 16%, var(--w-bg, var(--panel))); color: var(--warn); }

/* ================================================================ scheduled reports */
.rep-editor > .panel + .panel, .rep-editor > .panel + .note { margin-top: 16px; }
.rep-body { padding: 14px 18px 16px; display: grid; gap: 12px; }
.rep-body > label:not(.check), .rep-body .grid2 > label:not(.check) { display: flex; flex-direction: column; gap: 5px; }
.rep-body > label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.rep-editor.form { max-width: none; }
.rep-empty { padding: 28px; max-width: 760px; }
.rep-empty h2 { margin-bottom: 6px; }
.rep-empty p { margin-bottom: 14px; line-height: 1.6; }
.rep-fmt { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; color: #fff; }
.rep-fmt.xlsx { background: #1d7a46; } .rep-fmt.docx { background: #2b5797; }
.rep-q { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 8px; background: var(--panel-2); }
.rep-q-head { display: grid; grid-template-columns: auto 1fr minmax(140px, 240px) auto; gap: 8px; align-items: center; }
.rep-q-no { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rep-q textarea.code { width: 100%; font-size: 12.5px; }
.rep-q-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; }
.rep-q-opts > label:not(.check) { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.rep-q-opts input[name=q_cell] { width: 130px; }
.rep-q-opts .spacer { flex: 1; }
.rep-q-test { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); }
.rep-cell { display: grid; grid-template-columns: minmax(110px, 170px) 90px 1fr auto auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.rep-help { margin: 0; padding-left: 18px; display: grid; gap: 4px; line-height: 1.55; font-size: 13.5px; }
.rep-tpl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rep-sheets { display: grid; gap: 6px; font-size: 13px; }
.rep-sheets > div { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel-2); }
.rep-next { padding-top: 2px; }
.rep-next.error { color: var(--bad); }
.rep-presets { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.rep-danger { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.rep-list td .small { margin-top: 2px; }
td.nowrap, .nowrap { white-space: nowrap; }
@media (max-width: 640px) { .rep-q-head { grid-template-columns: auto 1fr auto; } .rep-q-head select { grid-column: 2 / -1; } .rep-cell { grid-template-columns: 1fr 80px auto; } .rep-cell input[name=c_value] { grid-column: 1 / -1; } }
.rep-inline { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; }
.rep-narrow { max-width: 260px; }
.rep-narrow input { max-width: 180px; }
.rep-time { max-width: 260px; }
.rep-cron input { max-width: 420px; }
.rep-body .seg { margin-bottom: 2px; }
.rep-q-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rep-q-tools .var-picker .dropdown-menu { right: 0; left: auto; }
.rep-param { display: grid; grid-template-columns: minmax(120px, 190px) minmax(160px, 280px) 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; }
.rep-q-head input[name=q_name] { max-width: 420px; }
.rep-q-head { grid-template-columns: auto minmax(160px, 420px) minmax(140px, 260px) 1fr auto; }
.rep-q-head .icon-btn { justify-self: end; grid-column: -2; }
.rep-q-opts select, .rep-q-opts input { max-width: 220px; }
.rep-body .grid2 select, .rep-body .grid2 input { max-width: 100%; }
@media (max-width: 640px) { .rep-param { grid-template-columns: 1fr 1fr auto; } .rep-param [name=p_label] { grid-column: 1 / -1; } }
/* list of reports: the name takes the space, the other columns stay compact */
table.rep-list th:nth-child(1) { width: auto; }
table.rep-list th:nth-child(2) { width: 70px; }
table.rep-list th:nth-child(3) { width: 210px; }
table.rep-list th:nth-child(4) { width: 150px; }
table.rep-list th:nth-child(5) { width: 220px; }
table.rep-list th:nth-child(6) { width: 90px; }
table.rep-list th:nth-child(7) { width: 150px; }
table.rep-list td { padding-top: 10px; padding-bottom: 10px; }
table.rep-list td:last-child { text-align: right; }
.ai-box { display: grid; gap: 4px; }
.ai-box label.check.locked { opacity: .7; }
.ai-box .lock-note { margin: -2px 0 4px 26px; font-size: 12px; color: var(--warn); }
.pol-table select { padding: 4px 8px; font-size: 13px; }
.pol-table td { vertical-align: middle; }
.rep-fail { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: var(--bad); text-decoration: none; max-width: 220px; }
.rep-fail:hover { text-decoration: underline; }

/* charts comparing the versions of a document */
.dx-charts #dx-ch-body { padding: 4px 16px 16px; display: grid; gap: 14px; }
.ch-card { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; background: var(--panel); }
.ch-head { display: flex; align-items: flex-start; gap: 12px; }
.ch-head > div:first-child { flex: 1; min-width: 0; }
.ch-kpi { text-align: right; }
.ch-now { display: block; font-size: 22px; font-weight: 600; line-height: 1.1; }
.ch-delta { font-size: 12.5px; font-weight: 600; }
.ch-delta small { font-weight: 400; color: var(--muted); }
.ch-delta.up, td.up { color: var(--good); } .ch-delta.down, td.down { color: var(--bad); }
.ch-acts { display: flex; gap: 2px; }
.ch-canvas { position: relative; height: 260px; margin-top: 10px; }
.ch-table { margin-top: 8px; }
.ch-table summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.ch-table table { margin-top: 6px; }
.ch-table td.num, .ch-table th.num { text-align: right; }
.ch-err { margin: 6px 0 0; font-size: 12.5px; color: var(--warn); }
.ch-pending { margin: 0; font-size: 13px; color: var(--muted); }