@layer tokens, fonts, ledger, ledger-extra, components, layout, pages, views;

@layer tokens {
/* Generated by management/tools/sync-ledger.mjs from management/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 {
@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 management/tools/sync-ledger.mjs from management/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 {
/* The theme's own values, set once for light and dark. Chart lines go one step deeper in dark, where the bright brand is too light for a line; a tooltip's keys take the other theme's. */
:root {
	--chart-line-1: var(--brand);
	--chart-line-2: var(--info);
	--chart-tip-line-1: #3ddc84;
	--chart-tip-line-2: #7aa9ff;
	--select-chevron: 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");
}

@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;
		--select-chevron: 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"] {
	--chart-line-1: #22a061;
	--chart-line-2: #5b8ff0;
	--chart-tip-line-1: #0f6b3c;
	--chart-tip-line-2: #1d5fd1;
	--select-chevron: 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");
}

/* Every transition sits in a prefers-reduced-motion: no-preference block. */
:root {
	--animation-duration: 400ms;
	--animation-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Body text is 12px; the other sizes follow Ledger's at 12/14, rounded (at least 10px). `--text-NN` is Ledger's NNpx, `--leading-NN` its line height. */
:root {
	--text-11: 10px;
	--text-12: 10px;
	--text-13: 11px;
	--text-14: 12px;
	--text-15: 13px;
	--text-16: 14px;
	--text-18: 15px;
	--text-20: 17px;
	--text-24: 21px;
	--text-26: 22px;
	--text-30: 26px;
	--text-32: 27px;
	--leading-16: 14px;
	--leading-18: 16px;
	--leading-20: 17px;
	--leading-22: 19px;
	--leading-26: 22px;
	--leading-30: 26px;
	--leading-38: 33px;
}

/* In ledger.css's order: a modifier after its base, so it still wins. */
.lg-preview,
.lg-root { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-btn { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-btn--sm { font-size: var(--text-13); }
.lg-btn--lg { font-size: var(--text-15); }
.lg-label,
.lg-hint { font-size: var(--text-13); line-height: var(--leading-18); }
.lg-input,
.lg-textarea,
.lg-select { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-kbd { font-size: var(--text-11); }
.lg-menu-item { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-menu-label { font-size: var(--text-12); }
.lg-check small { font-size: var(--text-13); }
.lg-seg button { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-tab { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-count { font-size: var(--text-12); line-height: var(--leading-18); }
.lg-badge { font-size: var(--text-13); }
.lg-card-title { font-size: var(--text-15); line-height: var(--leading-22); }
.lg-stat-label { font-size: var(--text-14); }
.lg-stat-value { font-size: var(--text-32); line-height: var(--leading-38); }
.lg-stat-value--sm { font-size: var(--text-24); line-height: var(--leading-30); }
.lg-delta { font-size: var(--text-13); }
.lg-table { font-size: var(--text-14); }
.lg-table th { font-size: var(--text-13); }
.lg-table-foot { font-size: var(--text-13); }
.lg-pager button { font-size: var(--text-13); }
.lg-chart text { font-size: var(--text-11); }
.lg-chart .big { font-size: var(--text-30); }
.lg-chart .lbl { font-size: var(--text-12); }
.lg-legend { font-size: var(--text-13); }
.lg-tip { font-size: var(--text-13); }
.lg-dialog h3 { font-size: var(--text-18); line-height: var(--leading-26); }
.lg-avatar { font-size: var(--text-13); }
.lg-avatar--sm { font-size: var(--text-11); }
.lg-avatar--lg { font-size: var(--text-18); }
.lg-user small { font-size: var(--text-13); }
.lg-nav-group { font-size: var(--text-12); }
.lg-text-display { font-size: var(--text-32); line-height: var(--leading-38); }
.lg-text-title { font-size: var(--text-24); line-height: var(--leading-30); }
.lg-text-heading { font-size: var(--text-18); line-height: var(--leading-26); }
.lg-text-subheading { font-size: var(--text-15); line-height: var(--leading-22); }
.lg-text-body,
.lg-text-body-strong { font-size: var(--text-14); line-height: var(--leading-20); }
.lg-text-small,
.lg-text-mono { font-size: var(--text-13); line-height: var(--leading-18); }
.lg-text-caption { font-size: var(--text-12); line-height: var(--leading-16); }

:is(.lg-stack, .lg-window-body, .window-section, .lg-fieldset) > :is(h2, h3, h4, p) {
	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 var(--text-13)/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;
}

.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;
	}
}

/* A list box (`multiple`) shows its options itself, so it has no chevron. */
select.lg-select:not([multiple]) {
	appearance: none;
	padding-right: 36px;
	background-image: var(--select-chevron);
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

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;
}

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

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

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

.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 control height and side padding for buttons, triggers, selects, fields and segmented controls, so rows line up; the small size is for icon buttons only. */
:root {
	--control-height: 36px;
	--control-height-sm: 28px;
	--control-pad: 12px;
}

/* A text field is content-box by default and stood two pixels taller than a button: every control counts its border in. */
.lg-btn,
.lg-input,
.lg-textarea,
.lg-select {
	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: var(--text-14);
	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);
}

/* The tray's edge is an inset shadow under the options, so the chosen pill covers it where it sits. */
.lg-seg {
	box-sizing: border-box;
	height: var(--control-height);
	gap: 0;
	padding: 0;
	border: 0;
	box-shadow: inset 0 0 0 1px var(--border);
}

.lg-seg button {
	height: var(--control-height);
	padding-inline: calc(var(--control-pad) + 4px);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--ink-subtle);
	transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.lg-seg button:hover {
	color: var(--ink-muted);
}

.lg-seg button[aria-pressed="true"] {
	border-color: color-mix(in srgb, var(--ink) 12%, var(--bg-surface));
	color: var(--ink);
	box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 0.5px 1px color-mix(in srgb, var(--ink) 5%, transparent);
}

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

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

.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 var(--text-15)/22px var(--font-sans);
}

.lg-field-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.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;
}

.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;
}

.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: var(--text-12);
	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);
}

.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);
}

/* A sticky header cell does not take collapsed borders along, so the borders stay separate and the header draws its line as an inset shadow. */
.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: var(--text-13);
	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;
}

.lg-stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-4);
}

/* The note keeps its line while it is empty, so the tiles of a row stay one height. */
.lg-stat-grid > .lg-card {
	display: grid;
	align-content: start;
	gap: var(--space-1);
	padding: var(--space-4);
}

.lg-stat-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-height: 22px;
	color: var(--ink-muted);
	font-size: var(--text-13);
}

.lg-count--attention {
	background: var(--warning-soft);
	color: var(--warning);
}

.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: var(--text-13);
	line-height: 18px;
}

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

.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);
	overflow: hidden;
	container-type: inline-size;
}

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

.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: 100dvh;
	max-height: 100dvh;
	border-radius: 0;
	border-width: 0 0 0 1px;
}

@media (width < 640px) {
	.lg-window:is([data-size="form"], [data-size="wide"], [data-size="panel"]) {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		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;
}

.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);
}

.lg-window-head h2 {
	min-width: 0;
	margin: 0;
	font: 600 var(--text-18)/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);
}

.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;
}

.lg-window-foot[data-folded] > :is(button, a):has(~ .lg-spacer):not([data-foot-more]) {
	display: none;
}

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

/* Where the browser cannot keep a closed window in the top layer (no `overlay`), it closes at once. */
@media (prefers-reduced-motion: no-preference) {
	.lg-window,
	.lg-window::backdrop {
		transition:
			opacity var(--animation-duration) var(--animation-easing),
			translate var(--animation-duration) var(--animation-easing);
	}

	@starting-style {
		.lg-window[open] {
			opacity: 0;
			translate: 0 -1.25rem;
		}

		.lg-window[data-size="panel"][open] {
			opacity: 1;
			translate: 100% 0;
		}

		.lg-window[open]::backdrop {
			opacity: 0;
		}
	}

	@supports (overlay: auto) {
		.lg-window,
		.lg-window::backdrop {
			transition:
				opacity var(--animation-duration) var(--animation-easing),
				translate var(--animation-duration) var(--animation-easing),
				display var(--animation-duration) allow-discrete,
				overlay var(--animation-duration) allow-discrete;
		}

		.lg-window:not([open]) {
			opacity: 0;
			translate: 0 -1.25rem;
		}

		.lg-window[data-size="panel"]:not([open]) {
			opacity: 1;
			translate: 100% 0;
		}

		.lg-window:not([open])::backdrop {
			opacity: 0;
		}
	}
}

.lg-window:not([open]),
.lg-window:not([open])::backdrop {
	pointer-events: none;
}

.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;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.lg-popover {
		transition:
			opacity var(--animation-duration) var(--animation-easing),
			translate var(--animation-duration) var(--animation-easing);
	}

	.lg-popover[data-placing] {
		opacity: 0;
		translate: 0 -0.6rem;
		transition: none;
	}

	.lg-popover[data-placing][data-side="above"] {
		translate: 0 0.6rem;
	}

	@supports (overlay: auto) {
		.lg-popover {
			transition:
				opacity var(--animation-duration) var(--animation-easing),
				translate var(--animation-duration) var(--animation-easing),
				display var(--animation-duration) allow-discrete,
				overlay var(--animation-duration) allow-discrete;
		}

		.lg-popover:not(:popover-open) {
			opacity: 0;
			translate: 0 -0.6rem;
		}

		.lg-popover[data-side="above"]:not(:popover-open) {
			translate: 0 0.6rem;
		}
	}
}

.lg-menu-pill {
	position: absolute;
	top: var(--pill-top, 0);
	left: var(--pill-left, 0);
	width: var(--pill-width, 0);
	height: var(--pill-height, 0);
	border-radius: var(--radius-sm);
	background: var(--bg-muted);
	opacity: 0;
	pointer-events: none;
}

.lg-menu-pill[data-shown] {
	opacity: 1;
}

.lg-menu:has(> .lg-menu-pill) .lg-menu-item {
	position: relative;
}

.lg-menu:has(> .lg-menu-pill) .lg-menu-item:is(:hover, [data-active]) {
	background: none;
}

@media (prefers-reduced-motion: no-preference) {
	.lg-menu-pill {
		transition: opacity var(--animation-duration) var(--animation-easing);
	}

	.lg-menu-pill[data-moved] {
		transition:
			top var(--animation-duration) var(--animation-easing),
			left var(--animation-duration) var(--animation-easing),
			width var(--animation-duration) var(--animation-easing),
			height var(--animation-duration) var(--animation-easing),
			opacity var(--animation-duration) var(--animation-easing);
	}
}

.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 {
: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;
}

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

.app-main {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	min-width: 0;
	min-height: 0;
	/* No scrollbar gutter: most pages do not scroll here, and a kept gutter would stand as extra space at their right. */
	overflow-y: auto;
	overscroll-behavior: contain;
}

.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;
}

.app[data-mode="booting"] > x-sidebar,
.app[data-mode="booting"] .app-topbar,
.app[data-mode="booting"] x-breadcrumbs {
	visibility: hidden;
}

.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);
}

.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 var(--text-24)/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;
}

@media (width < 640px) {
	.page-actions > x-more {
		order: 1;
	}
}

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

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

.tab-panel > :is(div, p, section):empty:not([aria-live]) {
	display: none;
}

.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);
}

.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));
}

/* The rows shrink as far as a card's head and a low plot, so three rows under the key figures fit a 768px high window. */
#main > .kit-dashboard,
.tab-panel > .kit-dashboard {
	flex: 1 1 0;
}

/* The tabs of the merged dashboard sit as close above its rows as the rows sit to each other, so a site's rows still
   fit a 900px high window under them. */
#main:has(> .tab-panel:not([hidden]) > .kit-dashboard) {
	gap: var(--space-4);
}

#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;
}

.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;
}

@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-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);
	}

	x-breadcrumbs {
		position: static;
	}

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

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

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

	.app::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 19;
		background: var(--overlay);
		backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	.app:has(> x-sidebar[data-open])::after {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#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 var(--animation-duration) var(--animation-easing),
			visibility var(--animation-duration);
	}

	.app::after {
		transition:
			opacity var(--animation-duration) var(--animation-easing),
			visibility var(--animation-duration);
	}
}

html:is([data-environment="development"], [data-environment="transit"]) {
	--env-tape: 3px;
	--env-tape-shift: 22.627px;
}

html[data-environment="development"] {
	--env-tape-accent: #c41212;
}

html[data-environment="transit"] {
	--env-tape-accent: #fc0;
}

html:is([data-environment="development"], [data-environment="transit"])::after {
	content: "";
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 25;
	block-size: var(--env-tape);
	pointer-events: none;
	background: repeating-linear-gradient(-45deg, #111 0 8px, var(--env-tape-accent) 8px 16px);
	background-size: var(--env-tape-shift) var(--env-tape-shift);
	mask-image: linear-gradient(to right, #000 0%, transparent 22%, transparent 78%, #000 100%);

	@media (prefers-reduced-motion: no-preference) {
		animation: env-tape-march 1.2s linear infinite;
	}
}

@keyframes env-tape-march {
	to {
		background-position: var(--env-tape-shift) 0;
	}
}

@media print {
	html:is([data-environment="development"], [data-environment="transit"])::after {
		display: none;
	}
}
}
@layer pages {
.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 var(--text-24)/30px var(--font-sans);
	letter-spacing: -0.015em;
}

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

.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;
}

.sign-in-code {
	gap: var(--space-4);
}

.notice {
	display: grid;
	justify-items: start;
	gap: var(--space-3);
	max-width: 60ch;
}

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

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

: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;
}

.lg-window-body:has(> x-table, > .window-panel:not([hidden]) > x-table, > form > .window-panel:not([hidden]) > x-table) > :not(x-table, .window-panel, form:has(> .window-panel)),
.lg-window-body > form:has(> .window-panel:not([hidden]) > x-table) > :not(.window-panel),
.window-panel:has(> x-table) > :not(x-table) {
	flex: none;
}

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

.lg-window-body > x-table,
.lg-window-body > .window-panel > x-table,
.lg-window-body > form > .window-panel > x-table {
	flex: 1 1 auto;
	min-height: var(--window-table-min-height, 14rem);
}

.profile-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

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

.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: var(--text-13);
}

.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;
}

:is([data-window="workflow"] textarea[name="yaml"], [data-window="ai-prompt"] textarea[name="body"]) {
	font-family: var(--font-mono);
	font-size: var(--text-13);
	line-height: 18px;
	min-height: 24rem;
	tab-size: 2;
}

.localization-panel {
	margin-top: var(--space-3);
}

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

.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: var(--text-13)/18px var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: text;
}

.lg-window[data-size="full"] {
	--window-width: calc(100vw - 32px);
	height: calc(100dvh - 48px);
}

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

.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 var(--text-13)/20px var(--font-mono);
	tab-size: 2;
}

.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;
}

.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 var(--text-14)/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 var(--text-12)/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: var(--text-12)/18px var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	user-select: text;
}

.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;
}

.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: var(--text-12);
	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: var(--text-13)/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);
}

x-sidebar [data-sites] .lg-nav[aria-current="true"] {
	color: var(--ink);
	font-weight: 600;
}

.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;
}

.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;
}

.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: var(--text-26);
	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: var(--text-13);
}

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

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

.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: var(--text-13);
}

.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 {
	color: var(--brand-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kit-privacy-actions {
	align-items: flex-start;
}

.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 var(--text-16)/22px var(--font-sans);
}

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

.configuration-site-title {
	margin: 0;
	font: 600 var(--text-18)/26px var(--font-sans);
}

/* At least 14rem, more when a hint needs it, so no text is cut. */
.configuration-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	grid-auto-rows: minmax(14rem, 1fr);
	gap: var(--space-3);
}

.configuration-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto minmax(0, 1fr);
	grid-template-areas: "icon mark" "text text";
	align-content: start;
	gap: var(--space-3);
	padding: var(--space-5);
	overflow: hidden;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease, translate 120ms ease;
}

.configuration-card:hover {
	border-color: var(--border-strong);
	background: var(--bg-subtle);
	box-shadow: var(--shadow-md);
	translate: 0 -1px;
}

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

.configuration-card-icon {
	grid-area: icon;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--ink-muted);
}

.configuration-card-text {
	grid-area: text;
	display: grid;
	align-content: start;
	gap: var(--space-1);
	min-width: 0;
}

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

.configuration-card-hint {
	color: var(--ink-muted);
	font-size: var(--text-13);
	line-height: 18px;
}

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

.lg-window:is([data-window="configurations-export"], [data-window="configurations-import"]) {
	--window-width: 760px;
}

/* 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;
}

.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;
}

.profile-preference-group > h4 {
	margin: 0;
}

.flag-distribution-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3) var(--space-4);
}

.lg-window[data-window="flag"] {
	--window-width: 832px;
}

.flag-handpicked {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4) var(--space-6);
	align-items: start;
}

@media (width < 640px) {
	.flag-handpicked {
		grid-template-columns: minmax(0, 1fr);
	}
}

.flag-percent {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.flag-percent .flag-range {
	flex: 1;
	accent-color: var(--brand);
}

.flag-percent .lg-input {
	width: 6rem;
}

.flag-member-results {
	max-height: 14rem;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding-inline: var(--space-3);
}

.flag-member-results[hidden] {
	display: none;
}

.flag-member-none {
	padding: var(--space-2) 0;
}

.flag-member-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.flag-member-chips:empty {
	display: none;
}

.flag-member-chip button {
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.flag-member-chip button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
	border-radius: var(--radius-full);
}

.kit-tiles {
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

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

.kit-range {
	flex-wrap: wrap;
}

.kit-range .lg-input[type="date"] {
	width: auto;
}

.member-picker {
	display: grid;
	gap: 2px;
	max-block-size: min(16rem, 40vh);
	overflow: auto;
}

.member-picker-end {
	min-block-size: 1px;
}

.member-picker-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.member-picker-item > span:first-child {
	display: grid;
	min-width: 0;
}

.member-picker-item:hover,
.member-picker-item[aria-pressed="true"] {
	border-color: var(--border);
	background: var(--bg-subtle);
}
}
@layer views {
.dashboard-metric-compare {
	color: var(--ink-muted);
}

/* The list reaches into the card's padding, so a row's hover fills it while its text lines up with the card's title. */
.dashboard-list {
	display: grid;
	align-content: start;
	gap: var(--space-1);
	margin-inline: calc(-1 * var(--space-3));
}

.dashboard-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2px var(--space-3);
	padding: var(--space-2) var(--space-3);
	min-width: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.dashboard-row:hover {
	background: var(--bg-muted);
}

.dashboard-row:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

.dashboard-row-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.dashboard-row-sub {
	grid-column: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--text-13);
}

.dashboard-row-when {
	grid-column: 2;
	grid-row: 1;
	font-size: var(--text-13);
}

.case-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	min-width: 0;
}

.case-card-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.case-card-copy {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ink-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.case-card-listing {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.case-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	font-size: var(--text-13);
}

.case-card-counts {
	display: inline-flex;
	gap: var(--space-3);
	margin-inline-start: auto;
}

.case-card-counts > span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.case-avatars {
	display: flex;
	align-items: center;
}

.case-avatar {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bg-muted);
	box-shadow: 0 0 0 2px var(--bg-surface);
	font-size: var(--text-11);
	font-weight: 600;
}

.case-avatar + .case-avatar {
	margin-inline-start: -6px;
}

.case-avatar.is-empty {
	color: var(--ink-muted);
}

.case-priority {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
}

.case-priority::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink-subtle, var(--border));
}

.case-priority.is-normal::before {
	background: var(--warning);
}

.case-priority.is-high::before {
	background: var(--danger);
}

.case-window {
	display: grid;
	gap: var(--space-4);
}

.case-window-lead {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-4);
	align-items: start;
}

.case-fields {
	display: grid;
	gap: var(--space-3);
}

.case-thread {
	display: grid;
	gap: var(--space-3);
}

.case-message {
	display: grid;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
}

.case-message.is-internal {
	background: var(--bg-subtle);
}

.case-message-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2);
}

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

.case-files {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.case-picker {
	display: grid;
	gap: var(--space-2);
}

.case-picker-list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.message-unread-dot {
	display: inline-block;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	margin-inline-end: var(--space-2);
	border-radius: 50%;
	background: var(--info);
	vertical-align: middle;
}

.message-thread {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.message-card {
	padding: var(--space-4) var(--space-5);
}

.message-card[data-mine] {
	background: var(--bg-subtle);
}

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

.message-body {
	margin-top: var(--space-3);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.message-card[data-archived] .message-body {
	color: var(--ink-muted);
}

.policy-preview {
	line-height: 1.6;
	overflow-wrap: break-word;
}

.policy-preview h1 {
	margin: 0 0 var(--space-2);
	font-size: var(--text-20);
	text-wrap: balance;
}

.policy-preview :is(h2, h3) {
	margin: var(--space-6) 0 var(--space-3);
	font-size: var(--text-16);
	text-wrap: balance;
}

.policy-preview :is(p, ul, ol) {
	margin: 0;
	text-wrap: pretty;
}

.policy-preview :is(p, ul, ol) + :is(p, ul, ol) {
	margin-top: var(--space-4);
}

.policy-preview a {
	color: var(--info);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.policy-preview img {
	max-width: 100%;
	border-radius: var(--radius-md);
}

.policy-preview ins.policy-diff-add {
	background: var(--brand-soft);
	color: inherit;
	text-decoration: none;
	border-radius: var(--radius-sm);
	box-decoration-break: clone;
}

.policy-preview del.policy-diff-del {
	background: var(--danger-soft);
	color: inherit;
	text-decoration: line-through;
	border-radius: var(--radius-sm);
	box-decoration-break: clone;
}

.policy-source {
	white-space: pre-wrap;
	font-family: var(--font-mono);
	font-size: var(--text-13);
}

.policy-preview-note {
	margin: 0 0 var(--space-3);
}

.policy-revisions-table {
	block-size: 18rem;
}

.policy-compare {
	margin-top: var(--space-4);
}

.user-docs {
	display: grid;
	grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: var(--space-4);
}

@container (max-width: 760px) {
	.user-docs {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 16rem) minmax(0, 1fr);
	}
}

.user-docs-nav {
	min-block-size: 0;
	overflow: auto;
	padding: var(--space-2);
}

.user-docs-editor {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	min-block-size: 0;
	overflow: auto;
}

.user-docs-editor-head {
	align-items: flex-start;
	margin-bottom: 0;
}

.user-docs-editor-head > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.user-docs-save-state {
	display: inline-grid;
	place-items: center;
	align-self: center;
	color: var(--ink-muted);
}

.user-docs-save-state:empty {
	display: none;
}

.user-docs-save-state[data-save-state="saved"] {
	color: var(--brand);
}

.user-docs-save-state[data-save-state="failed"] {
	color: var(--danger);
}

@media (prefers-reduced-motion: no-preference) {
	.user-docs-save-state[data-save-state="busy"] svg {
		animation: user-docs-turn 1s linear infinite;
	}
}

@keyframes user-docs-turn {
	to {
		rotate: 1turn;
	}
}

.user-docs-editor > .lg-form {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.user-docs-stage {
	flex: 1 1 0;
	min-block-size: 24rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	grid-auto-rows: minmax(0, 1fr);
	gap: var(--space-4);
	min-width: 0;
}

.user-docs-stage x-markdown {
	min-width: 0;
	min-block-size: 0;
}

.user-docs-stage textarea {
	flex: 1 1 0;
	min-block-size: 0;
	font-size: var(--text-13);
	resize: none;
}

.user-docs-preview {
	min-block-size: 0;
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
	overflow: auto;
}

.user-docs-preview > img {
	display: block;
}

.user-docs-preview > * + :is(img, .user-docs-preview-body),
.user-docs-preview-body > * + * {
	margin-top: var(--space-4);
}

.user-docs-preview .docs-table th {
	text-align: left;
	vertical-align: top;
}

.user-docs-file-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The picture's download link covers the whole card (its ::after); the edit and delete buttons lie above it. */
.user-docs-file {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr;
	grid-template-areas:
		"thumb"
		"copy"
		"tools";
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.user-docs-file-thumb {
	grid-area: thumb;
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: var(--bg-muted);
	color: var(--ink-muted);
}

.user-docs-file-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
}

.user-docs-file:has(.user-docs-file-thumb):hover {
	background: var(--bg-subtle);
}

.user-docs-file-thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.user-docs-file-copy {
	grid-area: copy;
	display: grid;
	gap: var(--space-1);
	min-width: 0;
	padding: var(--space-3) var(--space-3) 0;
}

.user-docs-file > .lg-cluster {
	grid-area: tools;
	align-self: end;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: var(--space-1);
	padding: var(--space-2);
	position: relative;
	z-index: 1;
}

.user-docs-file--add {
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	grid-template-areas: none;
	align-items: stretch;
	padding: 0;
	border-style: dashed;
}

.user-docs-file-add {
	display: grid;
	place-items: center;
	min-block-size: 8rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	color: var(--ink-muted);
	cursor: pointer;
}

.user-docs-file-add:hover {
	background: var(--bg-subtle);
	color: var(--ink);
}

.user-docs-file-copy :is(b, code) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-docs-file-copy code {
	color: var(--ink-muted);
	font-size: var(--text-12);
}

.user-doc-file-preview {
	inline-size: 100%;
	max-block-size: 12rem;
	object-fit: cover;
	border-radius: var(--radius-md);
	background: var(--bg-muted);
}

.system-social .social-setup summary {
	cursor: pointer;
}

.system-social .social-setup code {
	overflow-wrap: anywhere;
}

.webhook-events {
	flex-wrap: nowrap;
	overflow: hidden;
}

.runtime-settings-form .runtime-group {
	min-width: 0;
}

/* A label that wraps to two lines must not push its input down. */
.runtime-settings-form .lg-form-grid {
	align-items: end;
}

.runtime-settings-form .lg-form-grid > .lg-check {
	min-block-size: var(--control-height);
	align-items: center;
}

.runtime-list x-table {
	--table-min-width: 0;
}

.runtime-row-actions {
	white-space: nowrap;
}

.transfer-group {
	display: grid;
	gap: var(--space-2);
}

.transfer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-3);
}

.workflow-task {
	display: grid;
	gap: var(--space-3);
	max-width: 32rem;
	padding: var(--space-5);
}

.lg-window.is-ai-busy {
	overflow: hidden;
}

.ai-assist-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-3);
	padding: var(--space-6);
	background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
	backdrop-filter: blur(2px);
	color: var(--ink);
	text-align: center;
}

.ai-assist-overlay p {
	max-width: 24rem;
	margin: 0;
	font-weight: 500;
}

.ai-assist-spinner {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	background: var(--brand-soft);
	color: var(--brand-ink);
}

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

.ai-text {
	border-color: var(--brand);
	background: color-mix(in srgb, var(--brand-soft) 40%, var(--bg-surface));
}
}
@layer views {
.member-link {
	text-align: start;
}

/* A little wider than a wide window, so their payments fit without scrolling sideways. */
.lg-window:is([data-window="marketplace-member"], [data-window="listing"]) {
	--window-width: 1080px;
}

.marketplace-member-company {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
}

.member-credits {
	display: grid;
	gap: var(--space-4);
}

.ai-ledger-in {
	color: var(--brand);
}

.ai-ledger-out {
	color: var(--ink-muted);
}

.company-cell {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.company-cell-name {
	overflow: hidden;
	text-overflow: ellipsis;
}

.company-cell-logo,
.company-head-logo {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	object-fit: contain;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-surface);
	color: var(--ink-muted);
}

.company-head-logo {
	width: 52px;
	height: 52px;
}

.company-view {
	display: grid;
	gap: var(--space-4);
}

.company-description,
.company-notes {
	white-space: pre-wrap;
}

.company-multi {
	min-height: 8rem;
}

.company-logo {
	display: grid;
	gap: var(--space-3);
}

.company-logo-preview img {
	max-width: 12rem;
	max-height: 8rem;
	object-fit: contain;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.member-option small {
	display: block;
	color: var(--ink-muted);
}

/* The cell's width at most, so a long title ends in an ellipsis inside its own cell. */
.listing-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	max-width: 100%;
}

.listing-title-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listing-package {
	display: inline-flex;
	color: var(--ink-muted);
}

.listing-note {
	white-space: pre-wrap;
}

.listing-media-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--space-3);
}

.listing-media-card {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.listing-media-card.is-hidden img {
	opacity: 0.45;
}

.listing-media-card figcaption {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.listing-media-thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-sm, var(--radius-md));
	background: var(--bg-subtle);
	color: var(--ink-muted);
}

.listing-media-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listing-media-video {
	position: relative;
}

.listing-media-video img {
	position: absolute;
	inset: 0;
}

.listing-media-play {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--bg) 85%, transparent);
	color: var(--ink);
}

.listing-media-progress {
	inline-size: 100%;
	block-size: 0.35rem;
}

.listing-media-progress[hidden] {
	display: none;
}

.listing-media-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listing-media-list,
.listing-media-order {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.listing-media-file,
.listing-media-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.listing-media-row .listing-media-thumb {
	flex: none;
	width: 4rem;
}

.listing-media-row .doc-alias {
	flex: 1 1 auto;
	min-width: 0;
}

.listing-language {
	display: grid;
	gap: var(--space-3);
}

.listing-land-areas {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.listing-land-areas[hidden] {
	display: none;
}

.land-area-swatch {
	display: inline-block;
	inline-size: 0.75rem;
	aspect-ratio: 1;
	margin-inline-end: var(--space-2);
	border-radius: 0.2rem;
	vertical-align: middle;
}

.land-zone-language,
.land-zone-codes {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.land-zone-code-row {
	display: grid;
	grid-template-columns: 1fr 10rem auto;
	gap: var(--space-3);
	align-items: end;
}

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

.listing-add-ons,
.listing-sale-price {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.listing-add-ons [data-add-on-add] {
	justify-self: start;
}

.listing-add-on {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
	gap: var(--space-3);
	align-items: end;
}

.listing-metrics {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--space-3);
}

.listing-metric {
	display: grid;
	gap: var(--space-1);
}

/* Weekdays down, 48 half hours across; each cell's strength is --heat (0 to 1). */
.views-heatmap {
	display: grid;
	grid-template-columns: max-content repeat(48, minmax(0, 1fr));
	gap: 2px;
	align-items: center;
	min-inline-size: 0;
}

.views-heatmap-mark {
	font-size: var(--text-11);
	color: var(--ink-muted);
	white-space: nowrap;
	overflow: visible;
	line-height: 1;
}

.views-heatmap-day {
	padding-inline-end: var(--space-2);
	font-size: var(--text-11);
	color: var(--ink-muted);
	text-align: end;
}

.views-heatmap-cell {
	aspect-ratio: 1;
	min-block-size: 6px;
	border-radius: 2px;
	background: color-mix(in oklab, var(--brand) calc(var(--heat, 0) * 90% + 6%), var(--bg-muted));
}

/* The brand's ink, not bold: no bold in a table. */
#bids-host .is-high {
	color: var(--brand-ink);
}

.feedback-view {
	display: grid;
	gap: var(--space-4);
}

.feedback-message {
	margin: 0;
	white-space: pre-wrap;
}

/* Fixed proportions, low enough that the window does not scroll. */
.feedback-shot {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	max-height: min(44dvh, 26rem);
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--bg-subtle);
}

.feedback-shot-open {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: var(--space-2);
	border: 0;
	background: none;
	cursor: zoom-in;
}

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

.feedback-shot-open img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.ai-message {
	display: grid;
	gap: var(--space-4);
}

.ai-files {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ai-files .lg-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.package-name {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.lg-window x-table[data-package-prices],
.lg-window x-table[data-market-sources],
.lg-window x-table[data-news-sentiment-table] {
	min-height: 14rem;
}

.purchase-buyers {
	min-height: 14rem;
}

.source-file-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.source-file {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.source-file-copy {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.source-file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listing-map-figure {
	display: grid;
	gap: var(--space-2);
	margin: 0;
}

.listing-map-figure[hidden] {
	display: none;
}

.listing-map {
	block-size: clamp(14rem, 34vh, 22rem);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg-subtle);
}

.listing-languages {
	display: grid;
	gap: var(--space-3);
}

.listing-media-editor .listing-media-card,
.listing-media-editor .listing-media-row {
	background: var(--bg-surface);
	touch-action: auto;
}

.listing-media-editor .listing-media-card {
	align-content: start;
}

.listing-media-editor .listing-media-grab {
	padding: 0;
	border: 0;
	font: inherit;
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.listing-media-editor .listing-media-grab img {
	pointer-events: none;
}

.listing-media-editor .listing-media-grab:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.listing-media-editor .is-reordering,
.listing-media-editor .is-reordering .listing-media-grab {
	cursor: grabbing;
}

.listing-media-editor .is-dragging {
	border-color: var(--brand);
	box-shadow: 0 0 0 1px var(--brand);
	opacity: 0.85;
	position: relative;
	z-index: 1;
}

.listing-media-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
}

.listing-media-card .listing-media-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.listing-media-row .listing-media-body {
	flex: 1 1 auto;
}

.listing-media-row .listing-media-body .doc-alias {
	flex: 1 1 12rem;
	min-width: 0;
}

.listing-media-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.listing-media-badges .lg-badge svg {
	inline-size: 0.85em;
	block-size: 0.85em;
	margin-inline-end: 0.25em;
}

.listing-media-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--space-1);
	margin-inline-start: auto;
}

.listing-media-card.is-ai-excluded .listing-media-thumb img {
	opacity: 0.5;
}

.listing-media-guidance {
	display: grid;
	gap: var(--space-1);
}

.listing-media-guidance p {
	margin: 0;
	font-size: var(--text-13);
	line-height: 18px;
}

.listing-media-empty {
	padding: var(--space-2);
	list-style: none;
}

.listing-media-ai-summary[hidden] {
	display: none;
}

/* A drag never selects the rows' text. */
.package-table tbody tr[data-row] {
	cursor: grab;
	user-select: none;
}

.package-table tbody.is-reordering tr[data-row] {
	cursor: grabbing;
}

.package-table tbody tr.is-dragging {
	background: var(--brand-soft);
}

.package-grip {
	display: inline-flex;
	color: var(--ink-subtle);
}

.listing-rate-target {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.listing-rate-stars {
	display: flex;
	gap: 2px;
}

.listing-rate-star {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--ink-subtle);
	cursor: pointer;
}

.listing-rate-star:disabled {
	cursor: default;
}

.listing-rate-star:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 1px;
}

.listing-rate-stars[data-score="1"] .listing-rate-star:nth-child(-n + 1),
.listing-rate-stars[data-score="2"] .listing-rate-star:nth-child(-n + 2),
.listing-rate-stars[data-score="3"] .listing-rate-star:nth-child(-n + 3),
.listing-rate-stars[data-score="4"] .listing-rate-star:nth-child(-n + 4),
.listing-rate-stars[data-score="5"] .listing-rate-star:nth-child(-n + 5),
.listing-rate-stars:has(.listing-rate-star:not(:disabled):hover) .listing-rate-star:has(~ .listing-rate-star:hover),
.listing-rate-stars .listing-rate-star:not(:disabled):hover {
	color: var(--warning);
}

.listing-rate-star svg {
	width: 22px;
	height: 22px;
}

.listing-rate-stars[data-score="1"] .listing-rate-star:nth-child(-n + 1) svg,
.listing-rate-stars[data-score="2"] .listing-rate-star:nth-child(-n + 2) svg,
.listing-rate-stars[data-score="3"] .listing-rate-star:nth-child(-n + 3) svg,
.listing-rate-stars[data-score="4"] .listing-rate-star:nth-child(-n + 4) svg,
.listing-rate-stars[data-score="5"] .listing-rate-star:nth-child(-n + 5) svg {
	fill: currentColor;
}

.listing-bid-amount {
	grid-template-columns: minmax(0, 1fr) minmax(7rem, 9rem);
}

.news-row-thumb {
	inline-size: 3.5rem;
	block-size: 2rem;
	margin-inline-end: var(--space-2);
	object-fit: cover;
	border-radius: var(--radius-sm);
	vertical-align: middle;
}

/* A fifth narrower than the wide windows, so their lists fit the window. */
.lg-window[data-window="market-news"],
.lg-window[data-window="news-entry"] {
	--window-width: 768px;
	--table-min-width: 0;
}

.news-hero-preview {
	inline-size: 100%;
	/* 16:9 shown 20 % lower, so the tab needs no scrolling; the image is cropped to fit. */
	aspect-ratio: 20 / 9;
	object-fit: cover;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}

.news-hero-preview.is-empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: var(--space-2);
	color: var(--ink-muted);
	background: var(--bg-subtle);
}

.news-problems {
	margin: var(--space-1) 0 0;
	padding-inline-start: 1.25em;
}

.lg-window[data-window="listing-batch"] .lg-window-body:has(> .window-panel[data-panel="details"]:not([hidden])) {
	overflow: hidden;
}

.lg-window[data-window="listing-batch"] .lg-window-body > .window-panel[data-panel="details"]:not([hidden]) {
	flex: 1 1 auto;
	min-height: 0;
}

.lg-window[data-window="listing-batch"] .window-panel[data-panel="details"] > x-grid {
	flex: 1 1 0;
	min-height: 14rem;
}

.listing-batch-options {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container (520px <= width < 880px) {
	.listing-batch-options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (width < 520px) {
	.listing-batch-options {
		grid-template-columns: minmax(0, 1fr);
	}
}
}
@layer views {
.security-verification {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 9rem 10rem 2rem;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-2);
	border-block-end: 1px solid var(--border-subtle, var(--border));
}

.security-verification:last-child {
	border-block-end: 0;
}

.security-verification-what {
	min-width: 0;
	overflow-wrap: anywhere;
}

.security-verification-actions {
	justify-self: end;
}

@container (width < 520px) {
	.security-verification {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.security-list {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.security-text {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font: inherit;
	background: var(--surface-sunken, transparent);
	border: 1px solid var(--border);
	border-radius: var(--radius-2, 6px);
}

.security-overdue,
.security-threat {
	color: var(--danger, currentColor);
}

.security-configurations {
	display: grid;
	gap: var(--space-4);
}

/* Wide enough for every tab on one line (they wrap on a smaller screen). */
.lg-window[data-window="member"] {
	--window-width: 1180px;
}

.lg-window[data-window="member"] .window-tabs {
	flex-wrap: wrap;
}

.security-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--space-3) var(--space-4);
	margin: 0;
}

.security-facts[data-details] {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (width < 640px) {
	.security-facts[data-details] {
		grid-template-columns: minmax(0, 1fr);
	}
}

.security-facts > div {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.security-facts dt {
	color: var(--ink-muted);
	font-size: var(--text-13);
}

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

.security-member-roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.privacy-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2);
	min-width: 0;
}

.privacy-card-title {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.privacy-card-email,
.privacy-card-received {
	margin: 0;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
}
@layer views {
.messaging-member-picker {
	position: relative;
	display: grid;
	gap: var(--space-2);
	min-width: 16rem;
}

.messaging-member-results {
	display: grid;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.messaging-member-results .lg-btn {
	justify-content: flex-start;
	gap: var(--space-2);
	width: 100%;
}

.messaging-language-panel {
	display: grid;
	gap: var(--space-3);
}

.messaging-language-panel .lg-textarea {
	font-family: var(--font-mono);
	min-height: 12rem;
}

.messaging-samples > summary {
	cursor: pointer;
	padding-block: var(--space-2);
}

.messaging-body {
	margin: 0;
	padding: var(--space-3);
	max-height: 24rem;
	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: var(--text-14);
}

.messaging-preview {
	margin: 0;
}

.messaging-dashboard > .kit-dashboard-row > .lg-card {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.messaging-scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
}

.messaging-dl {
	margin: 0;
}

.messaging-failures {
	display: grid;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.messaging-failure {
	display: grid;
	gap: var(--space-1);
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: none;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.messaging-failure:hover,
.messaging-failure:focus-visible {
	border-color: var(--border-strong, var(--ink-subtle));
}

.messaging-failure-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.messaging-failure-to,
.messaging-failure .kit-error {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
}
@layer views {
.telemetry-metrics {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

.telemetry-toolbar,
.telemetry-range {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.telemetry-toolbar .lg-select {
	width: auto;
}

.telemetry-range .lg-input[type="date"] {
	width: auto;
}

.telemetry-trail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-height: 28px;
	font-size: var(--text-13);
}

.telemetry-trail-root[aria-current="true"] {
	color: var(--ink);
	opacity: 1;
}

.telemetry-trail-sep {
	display: inline-flex;
	color: var(--ink-subtle);
}

.telemetry-trail-sep svg {
	width: 14px;
	height: 14px;
}

.telemetry-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	min-height: 28px;
	padding: 0 var(--space-1) 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-full);
	background: var(--bg-surface);
}

.telemetry-filter-step {
	min-width: 0;
	max-width: 28rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 var(--space-1) 0 var(--space-3);
	border: 0;
	border-radius: var(--radius-full);
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.telemetry-filter-step[aria-current="true"] {
	cursor: default;
}

.telemetry-filter-step:not([aria-current="true"]):hover .telemetry-filter-value {
	text-decoration: underline;
}

.telemetry-filter-step:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.telemetry-filter-value {
	font-weight: 500;
}

.telemetry-filter-remove {
	flex: none;
}

.telemetry-settings {
	display: grid;
	gap: var(--space-4);
	max-width: 48rem;
}
}
@layer views {
.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: var(--text-13);
}

.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;
}

.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;
}
}