/* The kit's styles, then Intelligence's views. */
/* The management kit's styles, served at /kit/ and rolled into each management client's own stylesheet, which starts
   by importing this sheet first and adds its views after it. Order of the layers, lowest first: the
   design's tokens and fonts, its component classes (generated from foundation/design/ledger-ui) and the kit's
   additions to them, then each x- component's own styles (adopted by the components themselves), the frame's layout,
   the kit pages and the app's views. */
@layer tokens, fonts, ledger, ledger-extra, components, layout, pages, views;

@layer tokens {
/* Generated by foundation/tools/sync-ledger.mjs from foundation/design/ledger-ui/tokens.json; do not edit. */
:root {
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 999px;
	--bg-page: #f4f4f3;
	--bg-surface: #ffffff;
	--bg-subtle: #f7f7f6;
	--bg-muted: #eeeeec;
	--border: #e6e6e3;
	--border-strong: #8c918e;
	--ink: #141615;
	--ink-muted: #5c6360;
	--ink-subtle: #6f7672;
	--brand: #0f6b3c;
	--brand-hover: #0b5530;
	--on-brand: #ffffff;
	--brand-soft: #e3f4ea;
	--brand-ink: #0b5530;
	--warning: #9a5200;
	--warning-soft: #fdf0dc;
	--danger: #c2321f;
	--danger-soft: #fde8e4;
	--info: #1d5fd1;
	--info-soft: #e5eefc;
	--focus: #1d5fd1;
	--inverse: #141615;
	--on-inverse: #ffffff;
	--chart-2: #6fcf97;
	--overlay: rgba(10,12,11,0.45);
	--shadow-xs: 0 1px 2px rgba(20,22,21,0.06);
	--shadow-md: 0 4px 12px rgba(20,22,21,0.08);
	--shadow-lg: 0 12px 32px rgba(20,22,21,0.14);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg-page: #0c0e0d;
		--bg-surface: #151817;
		--bg-subtle: #1b1f1d;
		--bg-muted: #242927;
		--border: #2a302d;
		--border-strong: #6b736f;
		--ink: #f2f4f3;
		--ink-muted: #a3aba7;
		--ink-subtle: #8b938f;
		--brand: #3ddc84;
		--brand-hover: #5fe69b;
		--on-brand: #06250f;
		--brand-soft: #12301f;
		--brand-ink: #7be8ab;
		--warning: #f5a94a;
		--warning-soft: #33240f;
		--danger: #ff7a66;
		--danger-soft: #3a1712;
		--info: #7aa9ff;
		--info-soft: #13233f;
		--focus: #7aa9ff;
		--inverse: #f2f4f3;
		--on-inverse: #141615;
		--chart-2: #1f8f55;
		--overlay: rgba(0,0,0,0.62);
		--shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
		--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
		--shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg-page: #0c0e0d;
	--bg-surface: #151817;
	--bg-subtle: #1b1f1d;
	--bg-muted: #242927;
	--border: #2a302d;
	--border-strong: #6b736f;
	--ink: #f2f4f3;
	--ink-muted: #a3aba7;
	--ink-subtle: #8b938f;
	--brand: #3ddc84;
	--brand-hover: #5fe69b;
	--on-brand: #06250f;
	--brand-soft: #12301f;
	--brand-ink: #7be8ab;
	--warning: #f5a94a;
	--warning-soft: #33240f;
	--danger: #ff7a66;
	--danger-soft: #3a1712;
	--info: #7aa9ff;
	--info-soft: #13233f;
	--focus: #7aa9ff;
	--inverse: #f2f4f3;
	--on-inverse: #141615;
	--chart-2: #1f8f55;
	--overlay: rgba(0,0,0,0.62);
	--shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
	--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
	--shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
	color-scheme: dark;
}
}
@layer fonts {
/* Self-hosted for every management site (served at /kit/): Inter for everything, JetBrains Mono for codes (SIL Open Font License, see assets/fonts). */
@font-face {
	font-family: "Inter";
	src: url("/kit/assets/fonts/inter-variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/kit/assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("/kit/assets/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
}
@layer ledger {
/* Generated by foundation/tools/sync-ledger.mjs from foundation/design/ledger-ui/components/bundle.css; do not edit. */
/* Ledger UI: plain HTML + CSS components. Every class is prefixed lg-. All colours come from tokens.css. */
.lg-preview,.lg-root{font-family:var(--font-sans);font-size:14px;line-height:20px;color:var(--ink);background:var(--bg-surface);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
.lg-preview{padding:24px;box-sizing:border-box}
.lg-preview *,.lg-root *{box-sizing:border-box}
.lg-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lg-col{display:flex;flex-direction:column;gap:12px}
.lg-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lg-ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lg-muted{color:var(--ink-muted)}
.lg-num{font-variant-numeric:tabular-nums}
:where(.lg-preview,.lg-root) :focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* Button */
.lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-surface);color:var(--ink);font:500 14px/20px var(--font-sans);cursor:pointer;box-shadow:var(--shadow-xs);white-space:nowrap;transition:background .12s,border-color .12s}
.lg-btn:hover{background:var(--bg-subtle)}
.lg-btn:active{background:var(--bg-muted)}
.lg-btn--primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.lg-btn--primary:hover,.lg-btn--primary:active{background:var(--brand-hover);border-color:var(--brand-hover)}
.lg-btn--ghost{border-color:rgba(0,0,0,0);box-shadow:none;background:none}
.lg-btn--ghost:hover{background:var(--bg-muted)}
.lg-btn--danger{background:var(--danger);border-color:var(--danger);color:var(--bg-surface)}
.lg-btn--danger:hover{background:var(--danger);filter:brightness(.92)}
.lg-btn--sm{height:28px;padding:0 10px;font-size:13px;border-radius:var(--radius-sm)}
.lg-btn--lg{height:44px;padding:0 18px;font-size:15px}
.lg-btn--icon{width:36px;padding:0}
.lg-btn--icon.lg-btn--sm{width:28px}
.lg-btn:disabled,.lg-btn[aria-disabled=true]{opacity:.5;cursor:not-allowed}

/* Field / Input */
.lg-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.lg-label{font-weight:500;font-size:13px;line-height:18px}
.lg-hint{font-size:13px;line-height:18px;color:var(--ink-subtle)}
.lg-hint--error{color:var(--danger);display:flex;gap:6px;align-items:center}
.lg-input,.lg-textarea,.lg-select{width:100%;height:36px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--ink);font:400 14px/20px var(--font-sans);transition:border-color .12s}
.lg-textarea{height:auto;min-height:84px;padding:8px 12px;resize:vertical}
.lg-input::placeholder,.lg-textarea::placeholder{color:var(--ink-subtle)}
.lg-input:hover,.lg-textarea:hover,.lg-select:hover{border-color:var(--ink-muted)}
.lg-input:focus,.lg-textarea:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.lg-input[aria-invalid=true]{border-color:var(--danger)}
.lg-input:disabled{background:var(--bg-subtle);color:var(--ink-subtle);cursor:not-allowed}
.lg-input-wrap{position:relative;display:flex;align-items:center}
.lg-input-wrap>.lg-ic{position:absolute;left:12px;color:var(--ink-subtle);pointer-events:none}
.lg-input-wrap>.lg-ic+.lg-input{padding-left:36px}
.lg-input-wrap>.lg-affix{position:absolute;right:8px;display:flex;gap:4px}
.lg-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-subtle);color:var(--ink-muted);font:500 11px/1 var(--font-mono)}

/* Select + Menu (shared popover surface) */
.lg-pop{position:relative;display:inline-block}
.lg-select{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left}
.lg-select .lg-ic{color:var(--ink-muted)}
.lg-select[aria-expanded=true]{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:1px}
.lg-menu{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:100%;width:max-content;padding:4px;margin:0;list-style:none;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.lg-menu[hidden]{display:none}
.lg-menu--right{left:auto;right:0}
.lg-menu--static{position:static;display:inline-block;min-width:220px}
.lg-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:6px 8px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink);font:400 14px/20px var(--font-sans);text-align:left;cursor:pointer}
.lg-menu-item:hover,.lg-menu-item[data-active]{background:var(--bg-muted)}
.lg-menu-item[aria-selected=true]{font-weight:500}
.lg-menu-item[aria-selected=true]::after{content:"";margin-left:auto;width:5px;height:9px;border:solid var(--brand);border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.lg-menu-item--danger{color:var(--danger)}
.lg-menu-item .lg-ic{color:var(--ink-muted)}
.lg-menu-item--danger .lg-ic{color:inherit}
.lg-menu-item .lg-kbd{margin-left:auto}
.lg-menu-label{padding:6px 8px 4px;font-size:12px;font-weight:500;color:var(--ink-subtle)}
.lg-menu-sep{height:1px;margin:4px -4px;background:var(--border)}

/* Checkbox, Radio, Switch */
.lg-check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer}
.lg-check small{display:block;color:var(--ink-muted);font-size:13px}
.lg-checkbox,.lg-radio,.lg-switch{appearance:none;-webkit-appearance:none;margin:2px 0 0;flex:none;cursor:pointer;background:var(--bg-surface);border:1px solid var(--border-strong);position:relative;transition:background .12s,border-color .12s}
.lg-checkbox{width:16px;height:16px;border-radius:4px}
.lg-checkbox:checked,.lg-checkbox:indeterminate{background:var(--brand);border-color:var(--brand)}
.lg-checkbox:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--on-brand);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lg-checkbox:indeterminate::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:var(--on-brand)}
.lg-radio{width:16px;height:16px;border-radius:50%}
.lg-radio:checked{border-color:var(--brand);border-width:5px}
.lg-switch{width:36px;height:20px;border-radius:var(--radius-full);background:var(--border-strong);border-color:var(--border-strong);margin-top:0}
.lg-switch::after{content:"";position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--bg-surface);box-shadow:var(--shadow-xs);transition:transform .15s}
.lg-switch:checked{background:var(--brand);border-color:var(--brand)}
.lg-switch:checked::after{transform:translateX(16px);background:var(--on-brand)}
.lg-checkbox:disabled,.lg-radio:disabled,.lg-switch:disabled{opacity:.5;cursor:not-allowed}
.lg-setting{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:14px 0;border-bottom:1px solid var(--border)}
.lg-setting:last-child{border-bottom:0}

/* Segmented control, Tabs */
.lg-seg{display:inline-flex;gap:2px;padding:3px;background:var(--bg-muted);border-radius:var(--radius-md)}
.lg-seg button{height:30px;padding:0 12px;border:0;border-radius:var(--radius-sm);background:none;color:var(--ink-muted);font:500 14px/20px var(--font-sans);cursor:pointer}
.lg-seg button:hover{color:var(--ink)}
.lg-seg button[aria-pressed=true]{background:var(--bg-surface);color:var(--ink);box-shadow:var(--shadow-xs)}
.lg-tabs{display:flex;gap:24px;border-bottom:1px solid var(--border)}
.lg-tab{padding:10px 0;margin-bottom:-1px;border:0;border-bottom:2px solid rgba(0,0,0,0);background:none;color:var(--ink-muted);font:500 14px/20px var(--font-sans);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.lg-tab:hover{color:var(--ink)}
.lg-tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--brand)}
.lg-count{padding:0 6px;border-radius:var(--radius-full);background:var(--bg-muted);color:var(--ink-muted);font-size:12px;line-height:18px}

/* Badge */
.lg-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-sm);background:var(--bg-muted);color:var(--ink);font-size:13px;font-weight:500;white-space:nowrap}
.lg-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.lg-badge--plain::before{display:none}
.lg-badge--success{background:var(--brand-soft);color:var(--brand-ink)}
.lg-badge--warning{background:var(--warning-soft);color:var(--warning)}
.lg-badge--danger{background:var(--danger-soft);color:var(--danger)}
.lg-badge--info{background:var(--info-soft);color:var(--info)}

/* Card, Stat */
.lg-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);padding:24px;min-width:0}
.lg-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.lg-card-title{font-size:15px;line-height:22px;font-weight:500;margin:0}
.lg-stat-label{color:var(--ink-muted);font-size:14px}
.lg-stat-value{font-size:32px;line-height:38px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lg-stat-value--sm{font-size:24px;line-height:30px}
.lg-delta{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand-ink);font-size:13px;font-weight:500}
.lg-delta--down{background:var(--danger-soft);color:var(--danger)}

/* Table */
.lg-table-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.lg-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;flex-wrap:wrap}
.lg-table-scroll{overflow-x:auto}
.lg-table{width:100%;border-collapse:collapse;font-size:14px}
.lg-table th{padding:10px 16px;text-align:left;font-weight:500;font-size:13px;color:var(--ink-muted);background:var(--bg-subtle);border-block:1px solid var(--border);white-space:nowrap}
.lg-table td{padding:14px 16px;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle}
.lg-table tbody tr:hover td{background:var(--bg-subtle)}
.lg-table tbody tr[aria-selected=true] td{background:var(--brand-soft)}
.lg-table .lg-right{text-align:right}
.lg-table th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.lg-table-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;color:var(--ink-muted);font-size:13px;flex-wrap:wrap}
.lg-ring{width:18px;height:18px;vertical-align:-4px;margin-right:8px;transform:rotate(-90deg)}
.lg-ring circle{fill:none;stroke-width:4}
.lg-ring .t{stroke:var(--bg-muted)}.lg-ring .v{stroke:var(--brand);stroke-linecap:round}
.lg-ring--warn .v{stroke:var(--warning)}.lg-ring--danger .v{stroke:var(--danger)}

/* Pagination, Breadcrumb */
.lg-pager{display:inline-flex;gap:4px;align-items:center}
.lg-pager button{min-width:32px;height:32px;padding:0 8px;border:1px solid rgba(0,0,0,0);border-radius:var(--radius-md);background:none;color:var(--ink);font:500 13px/1 var(--font-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.lg-pager button:hover{background:var(--bg-muted)}
.lg-pager button[aria-current=page]{background:var(--brand);color:var(--on-brand)}
.lg-pager button:disabled{color:var(--ink-subtle);cursor:not-allowed;background:none}
.lg-crumbs{display:flex;gap:10px;align-items:center;color:var(--ink-muted);margin:0;padding:0;list-style:none}
.lg-crumbs a{color:inherit;text-decoration:none}.lg-crumbs a:hover{color:var(--ink);text-decoration:underline}
.lg-crumbs li+li::before{content:"/";margin-right:10px;color:var(--ink-subtle)}
.lg-crumbs [aria-current]{color:var(--ink);font-weight:500}

/* Charts */
.lg-chart{width:100%;height:auto;display:block;overflow:visible}
.lg-chart text{font:500 11px var(--font-sans);fill:var(--ink-subtle)}
.lg-chart .grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 4}
.lg-chart .line{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lg-chart .line2{fill:none;stroke:var(--info);stroke-width:2;stroke-dasharray:5 4;stroke-linecap:round}
.lg-chart .area{fill:var(--brand-soft)}
.lg-chart .bar{fill:var(--brand)}.lg-chart .bar2{fill:var(--chart-2)}
.lg-chart .pt{fill:var(--bg-surface);stroke:var(--brand);stroke-width:2}
.lg-chart .g-danger{stroke:var(--danger)}.lg-chart .g-warn{stroke:var(--warning)}.lg-chart .g-ok{stroke:var(--brand)}
.lg-chart .g{fill:none;stroke-width:10;stroke-linecap:round}
.lg-chart .big{font:600 30px var(--font-sans);fill:var(--ink);letter-spacing:-.02em}
.lg-chart .lbl{font:500 12px var(--font-sans);fill:var(--ink-muted)}
.lg-chart .track{fill:none;stroke:var(--bg-muted);stroke-width:12}
.lg-chart .d1{fill:none;stroke:var(--brand);stroke-width:12}.lg-chart .d2{fill:none;stroke:var(--chart-2);stroke-width:12}.lg-chart .d3{fill:none;stroke:var(--info);stroke-width:12}
.lg-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-muted)}
.lg-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--brand)}
.lg-legend i.s2{background:var(--chart-2)}.lg-legend i.s3{background:var(--info)}

/* Tooltip, Toast, Alert */
.lg-tip{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-md);background:var(--inverse);color:var(--on-inverse);font-size:13px;font-weight:500;box-shadow:var(--shadow-md);position:relative}
.lg-tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:var(--inverse);transform:translateX(-50%) rotate(45deg)}
.lg-tip--chart::after{display:none}
.lg-tip--chart b{font-weight:500;opacity:.75}
.lg-toast{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--radius-lg);background:var(--inverse);color:var(--on-inverse);box-shadow:var(--shadow-md);max-width:420px}
.lg-toast button{all:unset;cursor:pointer;margin-left:auto;font-weight:500;text-decoration:underline}
.lg-alert{display:flex;gap:12px;padding:12px 14px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-subtle)}
.lg-alert .lg-ic{margin-top:2px}
.lg-alert b{display:block;font-weight:500}
.lg-alert span{color:var(--ink-muted)}
.lg-alert--success{background:var(--brand-soft);border-color:var(--brand-soft)}.lg-alert--success .lg-ic,.lg-alert--success b{color:var(--brand-ink)}
.lg-alert--warning{background:var(--warning-soft);border-color:var(--warning-soft)}.lg-alert--warning .lg-ic,.lg-alert--warning b{color:var(--warning)}
.lg-alert--danger{background:var(--danger-soft);border-color:var(--danger-soft)}.lg-alert--danger .lg-ic,.lg-alert--danger b{color:var(--danger)}
.lg-alert--success span,.lg-alert--warning span,.lg-alert--danger span{color:var(--ink)}

/* Progress */
.lg-progress{height:8px;border-radius:var(--radius-full);background:var(--bg-muted);overflow:hidden}
.lg-progress>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}

/* Dialog */
.lg-scrim{background:var(--overlay);padding:32px;display:flex;justify-content:center;border-radius:var(--radius-lg)}
.lg-dialog{width:100%;max-width:440px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:20px}
.lg-dialog h3{margin:0 0 4px;font-size:18px;line-height:26px;font-weight:600}
.lg-dialog p{margin:0 0 16px;color:var(--ink-muted)}
.lg-dialog-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Avatar, Profile */
.lg-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:600;font-size:13px;flex:none;position:relative}
.lg-avatar--sm{width:28px;height:28px;font-size:11px}.lg-avatar--lg{width:56px;height:56px;font-size:18px}
.lg-avatar--info{background:var(--info-soft);color:var(--info)}.lg-avatar--warn{background:var(--warning-soft);color:var(--warning)}
.lg-avatar[data-status]::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--brand);border:2px solid var(--bg-surface)}
.lg-avatars{display:inline-flex}.lg-avatars .lg-avatar{margin-left:-8px;border:2px solid var(--bg-surface)}.lg-avatars .lg-avatar:first-child{margin-left:0}
.lg-user{display:flex;align-items:center;gap:10px;min-width:0;padding:6px;border:0;background:none;border-radius:var(--radius-md);color:inherit;font:inherit;text-align:left;cursor:pointer}
.lg-user:hover{background:var(--bg-muted)}
.lg-user b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-user small{display:block;color:var(--ink-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-profile-head{display:flex;gap:16px;align-items:center}
.lg-dl{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:20px 0 0}
.lg-dl dt{color:var(--ink-muted)}.lg-dl dd{margin:0;text-align:right}

/* Sidebar */
.lg-sidebar{width:260px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px;display:flex;flex-direction:column;gap:2px}
.lg-nav{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border:1px solid rgba(0,0,0,0);border-radius:var(--radius-md);color:var(--ink-muted);text-decoration:none;font-weight:400}
.lg-nav:hover{background:var(--bg-muted);color:var(--ink)}
.lg-nav[aria-current=page]{background:var(--bg-surface);border-color:var(--border);box-shadow:var(--shadow-xs);color:var(--ink);font-weight:500}
.lg-nav .lg-count{margin-left:auto}
.lg-nav-group{padding:14px 10px 6px;font-size:12px;font-weight:500;color:var(--ink-subtle)}
.lg-brandmark{display:flex;align-items:center;gap:10px;padding:6px 10px 12px;font-weight:600}
.lg-brandmark i{width:22px;height:22px;border-radius:var(--radius-sm);background:var(--brand)}

/* Dropzone */
.lg-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 24px;border:1.5px dashed var(--border-strong);border-radius:var(--radius-xl);background:var(--bg-subtle);text-align:center;color:var(--ink-muted);cursor:pointer}
.lg-drop:hover,.lg-drop[data-over]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.lg-drop b{color:var(--ink);font-weight:500}
.lg-file{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md)}
.lg-file .lg-progress{flex:1;min-width:60px}

/* Type styles (tokens.json type groups) */
.lg-text-display{font:600 32px/38px var(--font-sans);letter-spacing:-0.02em;}
.lg-text-title{font:600 24px/30px var(--font-sans);letter-spacing:-0.015em;}
.lg-text-heading{font:600 18px/26px var(--font-sans);}
.lg-text-subheading{font:500 15px/22px var(--font-sans);}
.lg-text-body{font:400 14px/20px var(--font-sans);}
.lg-text-body-strong{font:500 14px/20px var(--font-sans);}
.lg-text-small{font:400 13px/18px var(--font-sans);}
.lg-text-caption{font:500 12px/16px var(--font-sans);}
.lg-text-mono{font:400 13px/18px var(--font-mono);}
}
@layer ledger-extra {
/* What the management kit adds to Ledger UI, in its spirit: tokens only, borders before shadows, one green. */

/* Chart lines: brand and info, one step deeper in dark, where the bright brand is too light for a line. On a chart
   tooltip (the inverse surface) the keys take the other theme's brand and info, which stand out from it. */
:root {
	--chart-line-1: var(--brand);
	--chart-line-2: var(--info);
	--chart-tip-line-1: #3ddc84;
	--chart-tip-line-2: #7aa9ff;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--chart-line-1: #22a061;
		--chart-line-2: #5b8ff0;
		--chart-tip-line-1: #0f6b3c;
		--chart-tip-line-2: #1d5fd1;
	}
}

:root[data-theme="dark"] {
	--chart-line-1: #22a061;
	--chart-line-2: #5b8ff0;
	--chart-tip-line-1: #0f6b3c;
	--chart-tip-line-2: #1d5fd1;
}

/* A heading inside a stack or a window keeps to the stack's own spacing (no browser margins), and a list a part fills
   later takes no room, and adds no gap, while it is empty. */
:is(.lg-stack, .lg-window-body, .window-section) > :is(h2, h3, h4) {
	margin: 0;
}

:is(.lg-stack, .lg-window-body) > div:empty:not([aria-live]) {
	display: none;
}

/* `hidden` always hides, even where a class sets a display. */
[hidden] {
	display: none !important;
}

/* Lucide draws on a 24 grid; at 16px the design's 1.6px stroke is 2.4 units. */
.lg-ic[data-grid="24"] {
	stroke-width: 2.4;
}

.lg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-link {
	color: var(--info);
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
}

.lg-link:hover {
	text-decoration: underline;
}

.lg-mono {
	font: 400 13px/18px var(--font-mono);
}

.lg-amount {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.lg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.lg-stack--tight {
	gap: var(--space-2);
}

.lg-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.lg-spacer {
	flex: 1;
}

/* Empty, loading and error states inside a card or a table. */
.lg-empty {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	padding: var(--space-8) var(--space-6);
	color: var(--ink-muted);
	text-align: center;
}

.lg-empty b {
	color: var(--ink);
	font-weight: 500;
}

.lg-skeleton {
	display: block;
	height: 12px;
	border-radius: var(--radius-sm);
	background: var(--bg-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.lg-skeleton {
		animation: lg-pulse 1.4s ease-in-out infinite;
	}
}

@keyframes lg-pulse {
	50% {
		opacity: 0.45;
	}
}

/* Ledger's Select trigger, on the native select: its chevron is drawn here. A list box (`multiple`) shows its options
   itself, so it has no chevron and is as high as it is made. */
select.lg-select:not([multiple]) {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6360' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) select.lg-select:not([multiple]) {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aba7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	}
}

:root[data-theme="dark"] select.lg-select:not([multiple]) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3aba7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

select.lg-select[multiple] {
	height: auto;
	padding: 4px;
}

select.lg-select:focus {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
	border-color: var(--focus);
}

select.lg-select:disabled {
	background-color: var(--bg-subtle);
	color: var(--ink-subtle);
	cursor: not-allowed;
}

/* Text in a tone, for a list column of plain values that marks some of them (a count of failures): a column is either
   badges or plain text, never both. */
.kit-text-danger {
	color: var(--danger);
}

.kit-text-warning {
	color: var(--warning);
}

.kit-text-success {
	color: var(--brand);
}

/* Forms laid out in a grid of fields; one column on narrow screens. */
.lg-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.lg-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

.lg-form-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lg-form-grid > .lg-field--wide {
	grid-column: 1 / -1;
}

@container (width < 520px) {
	.lg-form-grid,
	.lg-form-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* One size scale for the controls: a button (with words, small or not), a dropdown's trigger, a select, a field and a
   segmented control are one control high with the same padding at the sides, so a toolbar, a page's head, a list's
   tools and a form row line up wherever they meet. The small size is for icon buttons only, in rows and dense lists
   (a table row's menu, a line's remove), where nothing stands beside them. */
:root {
	--control-height: 36px;
	--control-height-sm: 28px;
	--control-pad: 12px;
}

/* A text field is content-box by default, so it stood two pixels taller than a button: every control counts its
   border in. */
.lg-btn,
.lg-input,
.lg-textarea,
.lg-select,
.lg-seg {
	box-sizing: border-box;
}

.lg-btn,
.lg-btn--sm:not(.lg-btn--icon),
.lg-input,
.lg-select {
	height: var(--control-height);
	padding-inline: var(--control-pad);
}

.lg-btn--sm:not(.lg-btn--icon) {
	font-size: 14px;
	border-radius: var(--radius-md);
}

.lg-btn--icon {
	width: var(--control-height);
	padding: 0;
}

.lg-btn--icon.lg-btn--sm {
	width: var(--control-height-sm);
	height: var(--control-height-sm);
}

.lg-input-wrap > .lg-ic + .lg-input {
	padding-left: calc(var(--control-pad) + 24px);
}

.lg-seg {
	height: var(--control-height);
	padding: 3px;
}

.lg-seg button {
	height: calc(var(--control-height) - 6px);
	padding-inline: var(--control-pad);
}

/* Fields (inputs, selects, text areas and the components built on them) wear the same border as cards and tables;
   the stronger one shows under the pointer, and focus keeps its ring. */
.lg-input,
.lg-textarea,
.lg-select {
	border-color: var(--border);
}

.lg-input:hover,
.lg-textarea:hover,
.lg-select:hover {
	border-color: var(--border-strong);
}

/* Two short fields that belong together (a period's first and last day) stay on one row down to a phone's width. */
.lg-form-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}

@container (width < 340px) {
	.lg-form-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}

.lg-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.lg-fieldset > legend {
	padding: 0 0 var(--space-2);
	font: 500 15px/22px var(--font-sans);
}

/* The <label> inside a field: the label's words above the control (hints and errors follow it, outside). */
.lg-field-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* A label beside its control instead of above it: filters in a toolbar or a card's head, so every control in the row
   is the same height and lines up. */
.lg-field-label--inline {
	flex-direction: row;
	align-items: center;
	gap: var(--space-2);
}

.lg-field-label--inline > .lg-label {
	white-space: nowrap;
}

.lg-field-label--inline > x-date-input {
	width: 10.5rem;
}

.lg-field-label--inline > select.lg-select {
	width: auto;
	min-width: 8rem;
}

.lg-field-label--inline > x-account-picker {
	width: 16rem;
}

/* The star is for the eye only: its empty alternative keeps it out of the field's accessible name. */
.lg-required::after {
	content: " *" / "";
	color: var(--ink-muted);
}

.lg-hint--error .lg-ic {
	flex: none;
}

.lg-setting-hint {
	display: block;
}

/* A field shown, not edited. */
.lg-facts {
	display: grid;
	grid-template-columns: minmax(8rem, auto) 1fr;
	gap: var(--space-2) var(--space-6);
	margin: 0;
}

.lg-facts dt {
	color: var(--ink-muted);
}

.lg-facts dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* A suggestion the AI made, and how sure it is. */
.lg-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 22px;
	padding: 0 8px;
	border-radius: var(--radius-full);
	background: var(--info-soft);
	color: var(--info);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
}

.lg-chip--low {
	background: var(--warning-soft);
	color: var(--warning);
}

.lg-chip .lg-ic {
	width: 12px;
	height: 12px;
}

/* Amounts below zero keep their minus sign; the colour only supports it. */
.lg-negative {
	color: var(--danger);
}

/* The card a section of a page sits in, with a head row. */
.lg-card--flush {
	padding: 0;
}

.lg-card-body {
	padding: var(--space-6);
}

.lg-card-head--padded {
	padding: var(--space-4) var(--space-6);
	margin: 0;
	border-bottom: 1px solid var(--border);
}

/* Statements: income statement, balance sheet, trial balance, budget grid. A sticky header cell does not take
   collapsed borders along (rows would show through a gap under it), so the borders stay separate and the header draws
   its line as an inset shadow, which sticks with it. */
.lg-statement {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.lg-statement th,
.lg-statement td {
	padding: 8px 16px;
	border-bottom: 1px solid var(--border);
	text-align: left;
	white-space: nowrap;
}

.lg-statement thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-muted);
	background: var(--bg-subtle);
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--border);
}

.lg-statement .lg-amount,
.lg-statement th.lg-amount {
	text-align: right;
}

.lg-statement tr[data-level="heading"] td {
	padding-top: 20px;
	font-weight: 600;
	border-bottom-color: var(--border-strong);
}

.lg-statement tr[data-level="group"] td {
	font-weight: 500;
}

.lg-statement tr[data-level="account"] td:first-child {
	padding-left: 32px;
	color: var(--ink-muted);
}

.lg-statement tr[data-level="subtotal"] td {
	font-weight: 500;
	background: var(--bg-subtle);
}

.lg-statement tr[data-level="total"] td {
	font-weight: 600;
	border-top: 2px solid var(--ink);
	border-bottom: 0;
}

/* The total's own line replaces the line above it (separate borders would draw both). */
.lg-statement tr:has(+ tr[data-level="total"]) td {
	border-bottom: 0;
}

/* Key figures in a row of cards. */
.lg-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-4);
}

.lg-stat-grid .lg-card {
	padding: var(--space-5);
}

/* A count in a pill next to a navigation item or tab. */
.lg-count--attention {
	background: var(--warning-soft);
	color: var(--warning);
}

/* Lists of rows inside cards (to-do, overdue invoices): each row a button. */
.lg-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lg-list-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px var(--space-4);
	width: 100%;
	padding: 12px 0;
	border: 0;
	border-bottom: 1px solid var(--border);
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.lg-list li:last-child .lg-list-row {
	border-bottom: 0;
}

.lg-list-row:hover .lg-list-title {
	text-decoration: underline;
}

.lg-list-title {
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lg-list-sub {
	grid-column: 1;
	color: var(--ink-muted);
	font-size: 13px;
	line-height: 18px;
}

.lg-list-value {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Native dialogs as Ledger dialogs and panels. While toasts show, a window ends above them (`--toast-room`, set by
   x-toast): a floating window is centred in the space above, a panel and a phone's full-screen window are shortened. */
.lg-window:modal {
	inset-block-end: var(--toast-room, 0px);
}

.lg-window {
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
	width: min(var(--window-width, 440px), calc(100vw - 32px));
	max-height: calc(100dvh - 48px - var(--toast-room, 0px));
	overflow: hidden;
	container-type: inline-size;
}

.lg-window[open] {
	display: flex;
	flex-direction: column;
}

/* What a window covers is dimmed and blurred, as behind the notification drawer and the phone menu. */
.lg-window::backdrop {
	background: var(--overlay);
	backdrop-filter: blur(4px);
}

.lg-window[data-size="form"] {
	--window-width: 640px;
}

.lg-window[data-size="wide"] {
	--window-width: 960px;
}

.lg-window[data-size="panel"] {
	--window-width: 760px;
	margin: 0 0 0 auto;
	height: calc(100dvh - var(--toast-room, 0px));
	max-height: calc(100dvh - var(--toast-room, 0px));
	border-radius: 0;
	border-width: 0 0 0 1px;
}

/* On a phone the larger windows take the whole screen, edge to edge; small questions stay floating. */
@media (width < 640px) {
	.lg-window:is([data-size="form"], [data-size="wide"], [data-size="panel"]) {
		width: 100vw;
		max-width: 100vw;
		height: calc(100dvh - var(--toast-room, 0px));
		max-height: calc(100dvh - var(--toast-room, 0px));
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

.lg-window-head {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-5) var(--space-3);
}

.lg-window-head > .lg-spacer {
	min-width: 0;
}

/* The title on one line with its badges after it (a member's roles); the title gives way first. */
.lg-window-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.lg-window-badges {
	display: flex;
	flex: none;
	gap: var(--space-1);
}

/* A long title stays on one line, cut with an ellipsis (its whole text is the title's tooltip). */
.lg-window-head h2 {
	min-width: 0;
	margin: 0;
	font: 600 18px/26px var(--font-sans);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lg-window-head p {
	margin: 2px 0 0;
	color: var(--ink-muted);
}

.lg-window-sub {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-top: var(--space-2);
}

.lg-window-actions {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* The head's icon buttons match the close button beside them. */
.lg-window-actions .lg-btn--icon {
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
}

.lg-window-icon {
	display: flex;
	flex: none;
	align-self: center;
}

:is(.lg-window-icon, .lg-window-badges, .lg-window-sub, .lg-window-actions):empty {
	display: none;
}

.lg-window-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: var(--space-2) var(--space-5) var(--space-5);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.lg-window-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5);
	border-top: 1px solid var(--border);
	background: var(--bg-surface);
}

.lg-window-foot .lg-spacer {
	flex: 1;
}

body:has(> .lg-window[open]) .app-main {
	overflow: hidden;
}

/* Popovers (menus and listboxes) placed by script next to their trigger. */
.lg-popover {
	position: fixed;
	inset: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
	min-width: 180px;
	max-height: min(360px, 60dvh);
	overflow: auto;
	background: var(--bg-surface);
	color: var(--ink);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.lg-popover:not(:popover-open) {
	display: none;
}

/* Skip link to the main content. */
.lg-skip {
	position: absolute;
	left: var(--space-4);
	top: -48px;
	z-index: 100;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background: var(--inverse);
	color: var(--on-inverse);
	text-decoration: none;
}

.lg-skip:focus {
	top: var(--space-4);
}
}
@layer layout {
/* The frame of every management client, as the Management Client's: the menu as a full-height column at the left,
   the page column beside it with the breadcrumb bar at its top; a top bar with a drawer on narrow screens. The frame is the window's height and
   the page scrolls inside it, so a long list's table can fill what is left and scroll on its own, page by page. While
   toasts show, the frame ends above them (`--toast-room`, set by x-toast), so a card never covers a control; a page
   that holds a dashboard keeps the whole window (below). */

:root {
	--sidebar-width: 256px;
	--pad-page: var(--space-6);
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background: var(--bg-page);
	overflow: hidden;
}

.app {
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	height: 100dvh;
	box-sizing: border-box;
	padding-bottom: var(--toast-room, 0px);
}

.app > x-sidebar {
	min-height: 0;
}

/* The top bar, the breadcrumb bar and the page, apart by the same gap as the parts of a page. */
.app-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
	min-height: 0;
	/* The page scrolls here, which also clips; the page's own padding keeps the focus ring of a control at its edge
	   whole. */
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
}

.app-topbar {
	display: none;
}

#main {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: 0 var(--pad-page) var(--pad-page);
	min-width: 0;
	outline: none;
	container-type: inline-size;
}

/* Starting: nothing but the canvas until the session is known. */
.app[data-mode="booting"] > x-sidebar,
.app[data-mode="booting"] .app-topbar,
.app[data-mode="booting"] x-breadcrumbs {
	visibility: hidden;
}

/* Signed out: the sign-in card alone on the canvas. */
.app[data-mode="signed-out"] {
	grid-template-columns: minmax(0, 1fr);
}

.app[data-mode="signed-out"] > x-sidebar,
.app[data-mode="signed-out"] .app-topbar,
.app[data-mode="signed-out"] x-breadcrumbs {
	display: none;
}

.app[data-mode="signed-out"] #main {
	padding-top: var(--pad-page);
}

/* A page: title row with actions, then its cards. */
.page-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.page-head h1 {
	margin: 0;
	font: 600 24px/30px var(--font-sans);
	letter-spacing: -0.015em;
}

.page-head > div:first-child {
	flex: 1 1 24rem;
	min-width: 0;
}

.page-head p {
	margin: 4px 0 0;
	color: var(--ink-muted);
}

.page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.page-actions:empty {
	display: none;
}

/* On a phone the actions sit under the title, from the left: the primary action first, the more menu (⋯) after it. */
@media (width < 640px) {
	.page-actions > x-more {
		order: 1;
	}
}

/* A section's tab and what it shows; a list fills the rest of the window and scrolls inside its card. */
.tab-panel {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.tab-panel[hidden] {
	display: none;
}

/* A slot a tab fills later (a result, a range line) takes no room, and adds no gap, while it is empty. */
.tab-panel > :is(div, p, section):empty:not([aria-live]) {
	display: none;
}

/* What fills the rest of the window and scrolls inside itself: a list, or any part marked `data-fill` (a chart, a
   board), straight in the page, in a tab or in a `.page-fill` box (a column that takes the rest itself). A part may set
   the least height it needs (`--fill-min-height`). */
.page-fill {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

#main > :is(x-table, [data-fill]),
.tab-panel > :is(x-table, [data-fill]),
.page-fill > :is(x-table, [data-fill]),
.page-fill > [role="tabpanel"]:not([hidden]) > :is(x-table, [data-fill]) {
	flex: 1 1 0;
	min-height: var(--fill-min-height, 360px);
}

/* A page's own tabs in a `.page-fill` box (a tab list over its panels): the open panel takes the rest of the box, and
   its list the rest of the panel. */
.page-fill > [role="tabpanel"]:not([hidden]) {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-height: 0;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--space-4);
	align-items: start;
}

.cards--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A dashboard (`kit-dashboard`, straight in the page or in a tab's panel) fills the page below the frame with no page
   scroll: its rows (`kit-dashboard-row`) stack, a row of key figures (`data-kind="metrics"`) as high as its content,
   every other row sharing what is left equally. A row puts its cards side by side, `data-columns` of them on a line (1
   to 6; without it every card on one line; a card's `data-span="2"` takes two of them); a card's last part (a chart,
   bars, a list) fills the card, a chart redrawing as it changes size, anything else scrolling inside the card. A
   dashboard has no title or lead: the page's
   head shows only the page's actions, and nothing while there are none. The rows shrink as far as a card's head, a
   chart's legend and a low plot (`--kit-dashboard-row-min`), so three rows under the key figures fit a 768px high
   window; only a shorter window, or a phone where the cards stack (each at least `--kit-dashboard-card-min`), scrolls
   the page.

   The frame does not end above the toasts on a page that holds a dashboard: it fills the window and must neither
   scroll nor shrink while they show, and an overview has nothing to fill in, so the cards show over its lower corner.
   Where the cards stack and the page scrolls, the dashboard ends with the toasts' room instead, so its last card can
   be scrolled above them. */
.app:has(#main > .kit-dashboard, #main > .tab-panel:not([hidden]) > .kit-dashboard) {
	padding-bottom: 0;
}

#main > .kit-dashboard,
.tab-panel > .kit-dashboard {
	flex: 1 1 0;
}

#main:has(> .kit-dashboard, > .tab-panel:not([hidden]) > .kit-dashboard) > .page-head > div:first-child {
	display: none;
}

#main:has(> .kit-dashboard, > .tab-panel:not([hidden]) > .kit-dashboard) > .page-head:not(:has(.page-actions:not(:empty, [hidden]))) {
	display: none;
}

.kit-dashboard {
	--kit-dashboard-row-min: 10rem;
	--kit-dashboard-card-min: 16rem;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.kit-dashboard-row {
	--kit-dashboard-columns: 1;
	flex: 1 1 0;
	min-height: var(--kit-dashboard-row-min);
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-rows: minmax(0, 1fr);
	gap: var(--space-4);
}

.kit-dashboard-row[data-columns] {
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--kit-dashboard-columns), minmax(0, 1fr));
}

.kit-dashboard-row[data-columns="2"] {
	--kit-dashboard-columns: 2;
}

.kit-dashboard-row[data-columns="3"] {
	--kit-dashboard-columns: 3;
}

.kit-dashboard-row[data-columns="4"] {
	--kit-dashboard-columns: 4;
}

.kit-dashboard-row[data-columns="5"] {
	--kit-dashboard-columns: 5;
}

.kit-dashboard-row[data-columns="6"] {
	--kit-dashboard-columns: 6;
}

/* A card may take two columns of its row (`data-span="2"`): a chart, a list. */
.kit-dashboard-row[data-columns] > [data-span="2"] {
	grid-column: span 2;
}

.kit-dashboard-row[data-kind="metrics"] {
	flex: none;
	min-height: 0;
	grid-auto-rows: auto;
}

.kit-dashboard-row:not([data-kind="metrics"]) > .lg-card {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.kit-dashboard-row:not([data-kind="metrics"]) > .lg-card > :not(.lg-card-head):last-child {
	flex: 1 1 0;
	min-height: 0;
	overflow: auto;
}

.kit-dashboard-row > .lg-card > x-chart:last-child {
	--x-chart-height: 2.5rem;
	overflow: visible;
}

/* A narrower page puts at most two cards on a line; a phone's stacks them, each as high as it needs, and scrolls. */
@container (width < 1100px) {
	.kit-dashboard-row:is([data-columns="3"], [data-columns="4"], [data-columns="5"], [data-columns="6"]) {
		--kit-dashboard-columns: 2;
	}
}

@container (width < 720px) {
	.kit-dashboard-row,
	.kit-dashboard-row[data-columns] {
		flex: none;
		min-height: 0;
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: minmax(var(--kit-dashboard-card-min), auto);
	}

	.kit-dashboard-row[data-columns] > [data-span="2"] {
		grid-column: auto;
	}

	.kit-dashboard {
		padding-bottom: var(--toast-room, 0px);
	}

	.kit-dashboard-row[data-kind="metrics"] {
		grid-auto-rows: auto;
	}
}

@media (width < 1024px) {
	:root {
		--pad-page: var(--space-4);
	}

	.app {
		grid-template-columns: minmax(0, 1fr);
	}

	.app-topbar {
		position: sticky;
		top: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		background: var(--bg-page);
		border-bottom: 1px solid var(--border);
	}

	/* Under the phone's top bar the crumbs scroll with the page. */
	x-breadcrumbs {
		position: static;
	}

	.app-topbar .lg-brandmark {
		padding: 0;
	}

	.app > x-sidebar {
		position: fixed;
		inset: 0 auto var(--toast-room, 0px) 0;
		z-index: 20;
		width: min(300px, 86vw);
		translate: -105% 0;
		visibility: hidden;
	}

	.app > x-sidebar[data-open] {
		translate: 0 0;
		visibility: visible;
	}

	.app:has(> x-sidebar[data-open])::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 19;
		background: var(--overlay);
		backdrop-filter: blur(4px);
	}

	#main > :is(x-table, [data-fill]),
	.tab-panel > :is(x-table, [data-fill]),
	.page-fill > :is(x-table, [data-fill]) {
		flex: none;
		height: max(70dvh, var(--fill-min-height, 0px));
	}

	.cards--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (width < 1024px) and (prefers-reduced-motion: no-preference) {
	.app > x-sidebar {
		transition: translate 0.2s ease, visibility 0.2s;
	}
}
}
@layer pages {
/* What the kit's views, pages and windows need beyond Ledger classes. Keep this small. */

/* Sign-in: one card on the canvas. */
.sign-in {
	flex: 1;
	display: grid;
	place-items: center;
	padding: var(--space-6) 0;
}

.sign-in .lg-card {
	width: min(400px, 100%);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.sign-in h1 {
	margin: 0;
	font: 600 24px/30px var(--font-sans);
	letter-spacing: -0.015em;
}

.sign-in p {
	margin: 0;
	color: var(--ink-muted);
}

/* The sign-in's buttons at the right of the card; on the code step "Send the code again" sits left of "Sign in", and
   "Use another e-mail" is centred under them. */
.sign-in-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3);
}

.sign-in-other {
	display: flex;
	justify-content: center;
}

/* The code boxes, with room between them and the hint under them. */
.sign-in-code {
	gap: var(--space-4);
}

/* Not found and no access: a message with a way back. */
.notice {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	max-width: 60ch;
}

.notice h1 {
	margin: 0;
	font: 600 24px/30px var(--font-sans);
}

.notice p {
	margin: 0;
	color: var(--ink-muted);
}

/* Tabs inside a window (windows/window-tabs.js). */
/* What holds a tab list stacks it over its panels with one gap, the same in every window (the body itself, a window's
   own wrapper, a language's tabs inside a panel): the tab list has no margin of its own to add to it. */
:has(> .window-tabs) {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

.window-tabs {
	flex: none;
	margin-bottom: 0;
}

.window-panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
}

/* A list in a window, straight in its body or in the open tab's panel (`.window-panel`, straight in the body): once the
   window is as high as it may be, the list scrolls (page by page) and the body does not. What stands before or beside
   it (facts, the tab list, a toolbar) keeps its own height; the open panel takes the rest of the body and the list the
   rest of the panel. A panel without a list leaves the body scrolling as before. */
.lg-window-body:has(> x-table, > .window-panel:not([hidden]) > x-table) > :not(x-table, .window-panel),
.window-panel:has(> x-table) > :not(x-table) {
	flex: none;
}

.lg-window-body > .window-panel:not([hidden]):has(> x-table) {
	flex: 1 1 auto;
	min-height: 0;
}

/* A list in a window never folds away, even empty: below its least height the body scrolls instead. */
.lg-window-body > x-table,
.lg-window-body > .window-panel > x-table {
	flex: 1 1 auto;
	min-height: var(--window-table-min-height, 14rem);
}

/* The account's settings: the photo beside its button, the verification state under e-mail and phone. */
.profile-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.profile-photo-row {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.profile-photo-preview,
.profile-photo-current {
	overflow: hidden;
}

.profile-photo-preview img,
.profile-photo-current img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-verify {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-height: 0;
	font-size: 13px;
}

.profile-photo-rules {
	margin: 0;
	padding-left: var(--space-5);
	color: var(--ink-muted);
}

.profile-photo-pick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.profile-photo-pick x-dropzone {
	align-self: stretch;
}

.profile-photo-crop {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.profile-photo-crop[hidden],
.profile-photo-pick[hidden] {
	display: none;
}

.profile-photo-crop p {
	margin: 0;
	text-align: center;
}

/* Code in a field: a workflow's YAML, an AI prompt. */
:is([data-window="workflow"] textarea[name="yaml"], [data-window="ai-prompt"] textarea[name="body"]) {
	font-family: var(--font-mono);
	font-size: 13px;
	line-height: 18px;
	min-height: 24rem;
	tab-size: 2;
}

/* Localization's tabs over its lists: the open tab's panel takes the rest of the page (`page-fill`) and its list fills
   it, scrolling inside itself. */
.localization-panel {
	margin-top: var(--space-3);
}

.localization-panel[hidden] {
	display: none;
}

/* An AI test's answer: the text the model gave or read, scrolling inside the window. */
.integration-test-answer {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.integration-test-text {
	max-height: min(40dvh, 22rem);
	margin: 0;
	padding: var(--space-3);
	overflow: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	font: 13px/18px var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: text;
}

/* The workflow designer fills the screen. */
.lg-window[data-size="full"] {
	--window-width: calc(100vw - 32px);
	height: calc(100dvh - 48px - var(--toast-room, 0px));
}

.lg-window[data-window="workflow-designer"] .lg-window-body {
	overflow: hidden;
	gap: var(--space-3);
}

/* Its open tab (Design or Code) takes the rest of the body: the designer, or the YAML filling it top to bottom. */
.lg-window[data-window="workflow-designer"] .window-panel:not([hidden]),
.lg-window[data-window="workflow-designer"] x-workflow,
.wf-code {
	flex: 1 1 auto;
	min-height: 0;
}

.wf-code .lg-textarea {
	flex: 1 1 auto;
	min-height: 12rem;
	resize: none;
	font: 400 13px/20px var(--font-mono);
	tab-size: 2;
}

/* A workflow's runs as a table the window holds, and a run's steps and log lines scrolling inside the window (a long
   message wraps instead of widening it). */
.lg-window[data-window="workflow-runs"] {
	--window-width: 1120px;
}

.lg-window[data-window="workflow-runs"] x-table {
	flex: none;
	height: min(64dvh, 32rem);
	--table-min-width: 0;
}

/* A run's window: the workflow's graph (read-only) beside a pane of the run or the chosen step. */
.lg-window[data-window="workflow-run"] .lg-window-body {
	overflow: hidden;
}

.wf-run-stage {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
	gap: var(--space-3);
}

.wf-run-stage x-workflow {
	min-height: 0;
}

.wf-run-pane {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
	min-height: 0;
	overflow: auto;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--bg-surface);
}

@media (width < 900px) {
	.wf-run-stage {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(20rem, 1fr) auto;
		overflow: auto;
	}
}

.wf-run-head h3,
.wf-run-section h3 {
	margin: 0;
	font: 600 14px/20px var(--font-sans);
}

.wf-run-head p {
	margin: var(--space-1) 0 0;
	overflow-wrap: anywhere;
}

.wf-run-section {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.wf-run-fields {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	min-width: 0;
}

.wf-run-field {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: var(--space-2);
	align-items: baseline;
}

.wf-run-field dt {
	color: var(--ink-muted);
}

.wf-run-field dd {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-align: end;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-run-field.is-block {
	grid-template-columns: minmax(0, 1fr);
}

.wf-run-field.is-block dd {
	text-align: start;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.wf-run-group {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-left: var(--space-2);
	border-left: 2px solid var(--border);
}

.wf-run-group h4 {
	margin: 0;
	color: var(--ink-muted);
	font: 600 12px/16px var(--font-sans);
}

.wf-run-text {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.wf-run-log {
	margin: 0;
	max-height: min(45dvh, 24rem);
	overflow: auto;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	font: 12px/18px var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: text;
}

/* A row's details (an audit row, a queue failure, a new key): its facts, then its JSON scrolling inside the window. */
.kit-details {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--space-2) var(--space-4);
	margin: 0;
}

.kit-details dt {
	color: var(--ink-muted);
}

.kit-details dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Facts in a grid of two or three columns (`--details-columns`), each label above its value: the window's overview. */
.kit-details--grid {
	--details-columns: 2;
	grid-template-columns: repeat(var(--details-columns), minmax(0, 1fr));
	gap: var(--space-3) var(--space-4);
}

.kit-details--grid[data-columns="3"] {
	--details-columns: 3;
}

.kit-details--grid > div {
	display: grid;
	gap: 2px;
	min-width: 0;
	align-content: start;
}

.kit-details--grid dt {
	font-size: 12px;
	line-height: 16px;
}

.kit-details--grid dd {
	text-align: start;
}

.kit-details--grid > .kit-details-wide {
	grid-column: 1 / -1;
}

@container (width < 560px) {
	.kit-details--grid,
	.kit-details--grid[data-columns="3"] {
		--details-columns: 1;
	}
}

.kit-json {
	max-height: min(40dvh, 22rem);
	margin: var(--space-2) 0 0;
	padding: var(--space-3);
	overflow: auto;
	font: 13px/18px var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--bg-muted);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

[data-window="api-key-secret"] input[name="secret"] {
	font-family: var(--font-mono);
}

/* The Sites group: the current site marked. */
x-sidebar [data-sites] .lg-nav[aria-current="true"] {
	color: var(--ink);
	font-weight: 600;
}

/* The staff feedback panel (windows/feedback-window.js): the moods, the message and the screenshot. */
.kit-feedback-moods {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
}

.kit-feedback-mood {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	background: none;
	color: var(--ink-subtle);
	opacity: 0.6;
	cursor: pointer;
}

.kit-feedback-mood svg {
	width: 30px;
	height: 30px;
}

.kit-feedback-mood:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.kit-feedback-mood:is(:hover, [aria-checked="true"]) {
	opacity: 1;
}

.kit-feedback-mood[aria-checked="true"] {
	border-color: currentColor;
	background: var(--bg-subtle);
}

.kit-feedback-mood[data-tone="bad"]:is(:hover, [aria-checked="true"]) {
	color: var(--danger);
}

.kit-feedback-mood[data-tone="neutral"]:is(:hover, [aria-checked="true"]) {
	color: var(--warning);
}

.kit-feedback-mood[data-tone="good"]:is(:hover, [aria-checked="true"]) {
	color: var(--info);
}

.kit-feedback-mood[data-tone="great"]:is(:hover, [aria-checked="true"]) {
	color: var(--brand);
}

.kit-feedback-shot {
	display: grid;
	gap: var(--space-2);
}

.kit-feedback-shot:empty {
	display: none;
}

.kit-feedback-shot-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	overflow: hidden;
	cursor: zoom-in;
}

.kit-feedback-shot-button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.kit-feedback-shot-button img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* Marking the screenshot (windows/feedback-shot-window.js). */
.kit-shot {
	display: grid;
	gap: var(--space-3);
}

.kit-shot-tools [aria-pressed="true"] {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand-ink);
}

.kit-shot-view {
	position: relative;
	justify-self: center;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	cursor: crosshair;
	touch-action: none;
	user-select: none;
}

.kit-shot-view img,
.kit-shot-view canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.kit-shot-view img {
	pointer-events: none;
}

/* A policy as a page (views/policy.js), signed in or not. */
.kit-policy {
	width: min(100%, 52rem);
	margin-inline: auto;
	padding: var(--space-8);
	line-height: 1.6;
}

.kit-policy h1 {
	margin: 0 0 var(--space-2);
	font-size: 26px;
	line-height: 1.25;
	text-wrap: balance;
}

.kit-policy h2,
.kit-policy h3 {
	margin: var(--space-6) 0 var(--space-3);
	text-wrap: balance;
}

.kit-policy p,
.kit-policy li {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

.kit-policy-revision {
	margin: 0 0 var(--space-4);
	font-size: 13px;
}

.kit-policy-back {
	margin-top: var(--space-6);
}

.app[data-mode="signed-out"] .kit-policy {
	text-align: left;
}

/* The welcome of an incomplete account (windows/welcome-window.js): its steps, the verifications and the policies. */
.kit-welcome-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: welcome-step;
}

.kit-welcome-steps li {
	counter-increment: welcome-step;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	color: var(--ink-muted);
	font-size: 13px;
}

.kit-welcome-steps li::before {
	content: counter(welcome-step);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.kit-welcome-steps li[aria-current="step"] {
	border-color: var(--brand);
	background: var(--brand-soft);
	color: var(--brand-ink);
}

.kit-welcome-steps li[data-done] {
	color: var(--ink);
}

.kit-welcome-verify {
	align-items: center;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.kit-welcome-policies {
	margin: 0;
	padding-left: var(--space-5);
}

.kit-welcome-accept a,
.kit-cookie-policy a {
	color: var(--brand-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* The member's privacy (windows/privacy-window.js). */
.kit-privacy-actions {
	align-items: flex-start;
}

/* The Configurations page (views/configurations.js): groups of cards, each card a page or a window. */
.configuration-groups {
	display: grid;
	gap: var(--space-8);
}

.configuration-group {
	display: grid;
	gap: var(--space-3);
	min-width: 0;
}

.configuration-group-title {
	margin: 0;
	font: 600 16px/22px var(--font-sans);
}

/* Every card is as high as any other, in every group: room for its title and two lines of its hint. */
.configuration-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	grid-auto-rows: 6rem;
	gap: var(--space-3);
}

/* A card's icon, its text and its mark stand at its top. */
.configuration-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-3);
	padding: var(--space-4);
	overflow: hidden;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.configuration-card:hover {
	border-color: var(--border-strong);
	background: var(--bg-subtle);
}

.configuration-card:focus-visible {
	outline: 2px solid var(--brand-ink);
	outline-offset: 2px;
}

/* The icon is no box of its own: the card is. */
.configuration-card-icon {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--ink-muted);
}

.configuration-card-text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.configuration-card-title {
	font-weight: 600;
}

.configuration-card-hint {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--ink-muted);
	font-size: 13px;
	line-height: 18px;
}

.configuration-card-mark {
	display: inline-grid;
	color: var(--warning);
}

/* Export and Import of the configurations (windows/configurations-transfer-window.js): the directions as a list of
   choices, the sections a tree of checkboxes (components/x-check-tree.js) with each row's rule at its end; a little
   wider than a form, for the rules. */
.lg-window:is([data-window="configurations-export"], [data-window="configurations-import"]) {
	--window-width: 760px;
}

/* One-line choices: each checkbox and radio stands in the middle of its words (Ledger's sit at a wrapped label's
   first line). */
.transfer-form :is(.transfer-directions, x-check-tree) .lg-check {
	align-items: center;
}

.transfer-form :is(.transfer-directions, x-check-tree) .lg-check > :is(.lg-checkbox, .lg-radio) {
	margin: 0;
}

.transfer-form .transfer-directions {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	border: 0;
}

/* The sections under a line, once a file and a direction are chosen; each row's rule at its end. */
.transfer-form .transfer-sections {
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}

.transfer-form .transfer-insertion {
	display: inline-flex;
	gap: var(--space-3);
}

.transfer-form x-check-tree[hidden] {
	display: none;
}
}
@layer views {
/* Intelligence's views: the dashboard's key figures (the kit's dashboard layout places its rows and charts), the
   session's transcript, a member's credits and ledger, the credit rules' task rows and the JSON of a call. Tokens
   only, borders before shadows. */

/* The key figures span the dashboard's width, as many in a row as fit. */
.intelligence-tiles {
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.intelligence-tile {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4);
}

.intelligence-tile-note {
	min-height: 1.25rem;
	color: var(--ink-muted);
	font-size: 0.875rem;
}

.intelligence-json {
	margin: 0;
	padding: var(--space-3);
	max-height: 28rem;
	overflow: auto;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	background: var(--bg-subtle);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
}

.intelligence-error {
	color: var(--danger);
	overflow-wrap: anywhere;
}

/* A session's transcript: one row per entry, the member's at the start, the assistant's and the tools' indented. */

.intelligence-transcript,
.intelligence-notes {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.intelligence-notes {
	padding-inline-start: var(--space-5);
	list-style: decimal;
}

.intelligence-entry {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.intelligence-entry--assistant,
.intelligence-entry--tool {
	margin-inline-start: var(--space-6);
}

.intelligence-entry--tool {
	background: var(--bg-subtle);
}

.intelligence-text {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.intelligence-call > summary,
.intelligence-entry--tool summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
}

/* The credit rules' task rows: the task's name, its credits and a remove button on one line. */

.intelligence-costs {
	display: grid;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.intelligence-cost-row {
	flex-wrap: nowrap;
}

.intelligence-cost-row .lg-input[type="number"] {
	width: 8rem;
}
}