/* CoC Board styles (docs/ui_design.md). Components use tokens only; no inline styles (CSP). */

/* ---------- Tokens (section 6) ---------- */
:root {
	--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
	--t-xs: 12px; --t-sm: 14px; --t-md: 16px; --t-lg: 20px; --t-xl: 24px;
	--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
	--e-1: 0 1px 2px rgba(0,0,0,.08); --e-2: 0 8px 24px rgba(0,0,0,.18);
	--bg: #f6f6f4; --surface: #ffffff; --surface-2: #efefec; --line: #dcdcd6; --fg: #1b1b19; --fg-muted: #62625c;
	--accent: #2b5fd9; --positive: #1f7a3d; --neutral-strong: #4a4a45; --attention: #a35a00; --danger: #c2261d;
	--on-strong: #ffffff; --scrim: rgba(0,0,0,.4);
	--target: 44px;
	--clan-0: #2f6fb0; --clan-1: #b5651d; --clan-2: #7a4fa3; --clan-3: #0f7f78; --clan-4: #b3265e; --clan-5: #6b7a1d;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141413; --surface: #1d1d1b; --surface-2: #262624; --line: #36362f; --fg: #ececea; --fg-muted: #a3a39b;
		--accent: #7aa2ff; --positive: #5cc983; --neutral-strong: #c4c4bd; --attention: #f0a54a; --danger: #ff8a80;
		--on-strong: #141413; --scrim: rgba(0,0,0,.4);
		--clan-0: #7db4ea; --clan-1: #e6a463; --clan-2: #bb9de6; --clan-3: #5fcfc5; --clan-4: #f08ab4; --clan-5: #c5d46c;
		--e-1: 0 1px 2px rgba(0,0,0,.5); --e-2: 0 8px 24px rgba(0,0,0,.6);
		color-scheme: dark;
	}
}
.clan-0 { --cc: var(--clan-0); } .clan-1 { --cc: var(--clan-1); } .clan-2 { --cc: var(--clan-2); }
.clan-3 { --cc: var(--clan-3); } .clan-4 { --cc: var(--clan-4); } .clan-5 { --cc: var(--clan-5); }
.info { --tone: var(--accent); } .positive { --tone: var(--positive); } .neutral { --tone: var(--neutral-strong); }
.attention { --tone: var(--attention); } .danger { --tone: var(--danger); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; display: flex; flex-direction: column; font: var(--t-md)/1.45 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-lg); } h3 { font-size: var(--t-md); }
a { color: var(--accent); }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--fg-muted); }
.small { font-size: var(--t-sm); }
.icon { width: var(--icon, 16px); height: var(--icon, 16px); flex: none; vertical-align: -3px; }
.icon.lg { --icon: 20px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline { display: inline; margin: 0; }

/* ---------- App shell ---------- */
.appbar { position: relative; z-index: 30; display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-4); min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--fg); text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: var(--s-1); align-self: stretch; }
.nav a { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); color: var(--fg-muted); text-decoration: none; border-bottom: 2px solid transparent; font-size: var(--t-sm); font-weight: 600; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
.spacer { flex: 1; }
.sync { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-3); border: 1px solid transparent; border-radius: var(--r-md); background: none; color: var(--fg-muted); font: inherit; font-size: var(--t-sm); cursor: pointer; white-space: nowrap; }
.sync:hover { background: var(--surface-2); }
.sync.stale { color: var(--attention); border-color: color-mix(in srgb, var(--attention) 40%, transparent); }
.sync .idle, .sync .busy { display: inline-flex; }
.sync .busy, .htmx-request.sync .idle { display: none; }
.htmx-request.sync .busy { display: inline-flex; }
.htmx-request.sync .busy .icon { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
main { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); }
main.narrowpage { max-width: 1280px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.page-head h1 { display: inline-flex; align-items: center; gap: var(--s-2); }
.page-head .actions { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.page-head .actions form { display: contents; }
.tabbar { display: none; }
.public-top { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); min-height: 56px; background: var(--surface); border-bottom: 1px solid var(--line); }
.lang { display: inline-flex; gap: var(--s-1); margin: 0; }
.lang .btn[aria-current="true"] { color: var(--fg); }

/* Menus (season switcher, app menu) */
.menu { position: relative; }
:is(.menu, .who) > summary { list-style: none; }
:is(.menu, .who) > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; top: calc(100% + 4px); z-index: 30; min-width: 240px; padding: var(--s-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-2); }
.menu-panel.right { right: 0; }
.menu-panel form { margin: 0; }
.menu-item { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: var(--target); padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: inherit; font-size: var(--t-sm); text-align: left; text-decoration: none; cursor: pointer; }
.menu-item:hover { background: var(--surface-2); }
.menu-item[aria-current="true"] { font-weight: 700; }
.menu-item[aria-disabled="true"] { color: var(--fg-muted); cursor: not-allowed; }
.menu-item[aria-disabled="true"]:hover { background: none; }
.menu-item .badge { margin-left: auto; }
.menu-sep { height: 1px; margin: var(--s-1) 0; background: var(--line); }
.menu-label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--t-xs); color: var(--fg-muted); }
.switcher { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.switcher:hover { background: var(--surface-2); }
.switcher .st { color: var(--fg-muted); font-weight: 400; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--target); padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--fg)); }
.btn.quiet { border-color: transparent; background: none; color: var(--accent); }
.btn.quiet:hover { background: var(--surface-2); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: var(--on-strong); }
.btn.icon-only { padding: 0; width: var(--target); }
.btn[aria-busy="true"], .btn.htmx-request, button:disabled { opacity: .7; cursor: progress; }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.stepper li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg-muted); white-space: nowrap; }
.stepper li + li::before { content: ""; width: 24px; height: 1px; background: var(--line); }
.stepper .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.stepper .done { color: var(--fg); }
.stepper .done .dot { background: var(--fg-muted); border-color: var(--fg-muted); }
.stepper [aria-current="step"] { color: var(--fg); font-weight: 700; }
.stepper [aria-current="step"] .dot { background: var(--accent); border-color: var(--accent); }

/* ---------- Badge, chip ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; background: var(--surface-2); color: var(--fg-muted); }
.badge .icon { --icon: 14px; vertical-align: -2px; }
.badge:is(.info, .positive, .neutral, .attention, .danger) { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.chip { display: inline-flex; align-items: center; gap: var(--s-2); padding: 2px var(--s-3) 2px var(--s-2); border-radius: var(--r-full); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.chip::before, .clan-ctl > button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }

/* ---------- Banner, toast, dialog ---------- */
.banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); }
.banner > .icon { margin-top: 2px; }
.banner > div { flex: 1; min-width: 200px; }
.banner:is(.info, .attention, .danger) { border-left: 4px solid var(--tone); }
.banner:is(.info, .attention, .danger) > .icon { color: var(--tone); }
.banner .btn { margin-top: -6px; margin-bottom: -6px; }
.toast { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4); max-width: calc(100vw - 32px); border-radius: var(--r-md); background: var(--fg); color: var(--bg); box-shadow: var(--e-2); font-size: var(--t-sm); animation: toast-in .2s ease-out; }
.toast[hidden] { display: none; }
.toast .btn { min-height: 40px; color: var(--bg); border-color: transparent; background: none; }
.toast .btn:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.toast.danger { background: var(--danger); color: var(--on-strong); }
.toast.danger .btn { color: var(--on-strong); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--fg); box-shadow: var(--e-2); }
dialog::backdrop { background: var(--scrim); }
.dlg { padding: var(--s-5); display: grid; gap: var(--s-3); margin: 0; }
.dlg p { color: var(--fg-muted); }
.dlg p:empty { display: none; }
.dlg-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }

/* ---------- Cards ---------- */
.cards { display: flex; gap: var(--s-3); overflow-x: auto; padding: 2px 2px var(--s-2); margin: 0 -2px var(--s-4); scrollbar-width: thin; }
.card { flex: 0 0 auto; min-width: 148px; display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); text-decoration: none; box-shadow: var(--e-1); position: relative; text-align: left; }
.card.clan { border-top: 4px solid var(--cc); padding-top: calc(var(--s-3) - 3px); }
.card:hover { background: var(--surface-2); }
.card[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-label { display: flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: var(--fg-muted); white-space: nowrap; }
.card-num { font-size: var(--t-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.card-sub { font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; display: flex; gap: var(--s-2); }
.card-sub .att { color: var(--attention); font-weight: 600; display: inline-flex; gap: 2px; align-items: center; }
.card-sub .att .icon { --icon: 12px; }
.card.kpi.attention.has .card-num, .card.kpi.attention.has .card-label { color: var(--attention); }

/* ---------- Filter bar ---------- */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-3); }
.seg { display: inline-flex; padding: 2px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.seg > button, .seg > label > span { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 38px; padding: 0 var(--s-3); border: 0; border-radius: calc(var(--r-md) - 2px); background: none; color: var(--fg-muted); font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.seg > label { display: inline-flex; position: relative; }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label input:checked + span, .seg > button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--e-1); }
.seg > label input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg > button:hover:not([aria-pressed="true"]), .seg > label:hover input:not(:checked) + span { color: var(--fg); }
/* Shared input look; :where keeps it at zero specificity so each control overrides only what differs. */
:where(.select, .search input, .field input, .field select, .celledit input) { min-height: var(--target); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; }
.select { font-size: var(--t-sm); }
.search { position: relative; flex: 1 1 200px; max-width: 320px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); }
.search input { width: 100%; padding: 0 40px 0 36px; font-size: var(--t-sm); }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); font: var(--t-xs) ui-monospace, monospace; color: var(--fg-muted); }
.count { margin: 0 0 var(--s-2); font-size: var(--t-sm); color: var(--fg-muted); }

/* ---------- Table ---------- */
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
th, td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { position: sticky; top: 0; z-index: 2; background: var(--surface); font-size: var(--t-xs); font-weight: 600; color: var(--fg-muted); }
th.num, td.num { text-align: right; }
th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 2px; min-height: 32px; }
th a:hover { color: var(--accent); }
th[aria-sort] { color: var(--fg); }
th .icon { --icon: 14px; }
.sticky { position: sticky; left: 0; z-index: 1; background: var(--surface); }
th.sticky { z-index: 3; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
@keyframes flash { from { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); } to { background: var(--surface); } }
tr.flash td { animation: flash 1.2s ease-out; }
.nm { font-weight: 600; }
.sub { display: block; font-size: var(--t-xs); color: var(--fg-muted); }
.who > summary { cursor: pointer; }
.who .detail { padding-top: var(--s-1); font-size: var(--t-xs); color: var(--fg-muted); white-space: normal; }
.weapon { display: inline-flex; align-items: center; gap: 1px; margin-left: var(--s-1); font-size: var(--t-xs); color: var(--fg-muted); }
.weapon .icon { --icon: 12px; }

.heroes {
	display: inline-grid;
	grid-template-columns: repeat(6, 2.2rem);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.heroes abbr { text-decoration: none; cursor: help; }
.pref-ctl > button[aria-pressed="true"].yes { background: var(--positive); color: var(--on-strong); }
.pref-ctl > button[aria-pressed="true"].no { background: var(--neutral-strong); color: var(--on-strong); }
.pref-ctl > button { min-width: 52px; justify-content: center; }
.clan-ctl > button[aria-pressed="true"] { background: var(--cc); color: var(--on-strong); }
.clan-ctl > button[aria-pressed="true"]::before { background: var(--on-strong); }
.clan-sel { border-left: 4px solid var(--cc, var(--line)); }
.current { display: inline-flex; align-items: center; gap: var(--s-1); }
.current .ok { color: var(--positive); display: inline-flex; }
.cellbtn { display: flex; align-items: center; gap: var(--s-1); width: 100%; min-height: 40px; max-width: 220px; padding: 0 var(--s-2); margin: 0 calc(-1 * var(--s-2)); border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: inherit; text-align: left; cursor: text; }
.cellbtn:hover { background: var(--surface-2); }
.cellbtn .clip { overflow: hidden; text-overflow: ellipsis; }
.cellbtn .add { color: var(--fg-muted); display: inline-flex; gap: var(--s-1); align-items: center; }
.celledit { display: flex; gap: var(--s-1); margin: 0; }
.celledit input { min-height: 40px; min-width: 160px; padding: 0 var(--s-2); border-color: var(--accent); border-radius: var(--r-sm); }
.celledit .btn { min-height: 40px; width: 40px; }
.cell-err { display: flex; gap: var(--s-1); align-items: center; margin-top: var(--s-1); font-size: var(--t-xs); color: var(--danger); white-space: normal; }
.cell-help { display: block; margin-top: var(--s-1); font-size: var(--t-xs); white-space: normal; }
.empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-6) var(--s-5); border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--fg-muted); }
.empty h1 { color: var(--fg); }
.empty.page { margin-top: var(--s-7); }
.more { display: none; }
.mobile-only { display: none; }

/* ---------- Forms ---------- */
.field { display: grid; gap: var(--s-1); }
.field > label, .field > .label { font-size: var(--t-sm); font-weight: 600; }
.field .seg { justify-self: start; }
.field .help { font-size: var(--t-xs); color: var(--fg-muted); }
.field .err { display: flex; gap: var(--s-1); align-items: center; font-size: var(--t-xs); color: var(--danger); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.form { display: grid; gap: var(--s-4); max-width: 480px; margin: 0; }
.form.wide { max-width: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.panel { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.login { max-width: 400px; margin: var(--s-8) auto 0; }
.login .brand { justify-content: center; margin-bottom: var(--s-5); font-size: var(--t-lg); display: flex; }
.login .banner { margin: 0; }
.section { margin-top: var(--s-6); }
.section > h2 { margin-bottom: var(--s-3); }
.list { display: grid; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.list-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row.clan { border-left: 4px solid var(--cc); }
.list-row .grow { flex: 1; min-width: 160px; }
.list-row form { margin: 0; }
.syncrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.syncrow .grow { flex: 1; min-width: 200px; }
.sync-last.stale { color: var(--attention); font-weight: 600; }
.syncres { margin-top: var(--s-3); font-size: var(--t-sm); }
.syncres:empty { display: none; }
.syncres ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.syncres .error { color: var(--danger); }
.lineup-clan { margin-top: var(--s-5); }
.lineup-clan h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.lineup-clan h2::before { content: ""; width: 4px; height: 1.1em; border-radius: 2px; background: var(--cc); }
.lineup-clan h2 .muted { font-size: var(--t-sm); font-weight: 400; }
.foot { padding: var(--s-4); text-align: center; font-size: var(--t-xs); color: var(--fg-muted); }

/* ---------- Narrow (≤ 760px, NFR-002) ---------- */
@media (max-width: 760px) {
	.appbar { gap: var(--s-2); padding: 0 var(--s-3); }
	.appbar .nav, .appbar .brand { display: none; }
	.appbar .menu:first-of-type { min-width: 0; }
	.switcher { padding: 0 var(--s-2); }
	.sync .lbl { display: none; }
	.menu-panel { min-width: min(240px, calc(100vw - 24px)); }
	main { padding: var(--s-4) var(--s-4) calc(96px + env(safe-area-inset-bottom)); }
	.page-head .actions { margin-left: 0; width: 100%; }
	.page-head .actions .btn { flex: 1; }
	.stepper li:not([aria-current="step"]) .lbl { display: none; }
	.stepper li + li::before { width: 12px; }
	.tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
	.tabbar a { display: grid; justify-items: center; align-content: center; gap: 2px; padding: var(--s-2) 0; min-height: 56px; font-size: var(--t-xs); color: var(--fg-muted); text-decoration: none; }
	.tabbar a[aria-current="page"] { color: var(--accent); font-weight: 700; }
	.filters .search { max-width: none; flex-basis: 100%; order: -1; }
	.search kbd { display: none; }
	.filters .seg { flex: 1 1 auto; }
	.filters .seg > label { flex: 1; }
	.filters .seg > label > span { width: 100%; justify-content: center; }
	.filters .select { flex: 1 1 140px; }
	/* table → card list */
	.tablewrap.cardlist { border: 0; background: none; overflow: visible; }
	.cardlist table, .cardlist tbody { display: block; }
	.cardlist thead { display: none; }
	.cardlist tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-3); padding: var(--s-3); margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
	.cardlist td { display: block; padding: 0; border: 0; white-space: normal; background: none !important; position: static; }
	.cardlist td[data-label]::before { content: attr(data-label); display: block; font-size: var(--t-xs); color: var(--fg-muted); }
	.cardlist td.c-name { grid-column: 1; }
	.cardlist td.c-name::before, .cardlist td.c-nums::before { display: none; }
	.cardlist td.c-nums { grid-column: 2; text-align: right; }
	.cardlist td.wide { grid-column: 1 / -1; }
	.cardlist td.wide .seg { display: flex; flex-wrap: wrap; }
	.cardlist td.wide .seg > button { flex: 1; justify-content: center; }
	.cardlist td.wide .select { width: 100%; }
	.cardlist td.extra { display: none; grid-column: 1 / -1; }
	.cardlist tr.open td.extra { display: block; }
	.cardlist td.c-more { grid-column: 1 / -1; }
	.cardlist .more { display: inline-flex; max-width: 100%; white-space: normal; }
	.cardlist .hide-narrow { display: none; }
	.cardlist .cellbtn { max-width: none; margin: 0; padding: 0 var(--s-2); border: 1px solid var(--line); }
	.cardlist .celledit input { min-width: 0; flex: 1; }
	.mobile-only { display: revert; }
	.cardlist td.mobile-only { display: block; }
	.c-nums .sub.mobile-only { display: block; }
	.toast { bottom: 80px; }
	.login { margin-top: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
	tr.flash td, .toast, .htmx-request.sync .busy .icon { animation: none; }
}