/* ============================================================
   IXXO Cart 8 — admin UI kit components
   Every component of content/engine/ui, token-driven, the same class names
   in every area. Area look = its token file + its shell file. No raw colour
   values and no physical directions here (CssRulesTest).
   ============================================================ */

/* ------------------------------------------------------------ base */
:root{ --ic-dir: 1; }
[dir="rtl"]{ --ic-dir: -1; }
*, *::before, *::after{ box-sizing: border-box; }
html, body{ block-size: 100%; }
body{
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: var(--t-body);
	line-height: 1.5;
	font-feature-settings: "cv11";
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4{ margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
h1{ font-size: var(--t-title); line-height: 1.25; letter-spacing: -0.02em; }
h2{ font-size: var(--t-16); line-height: 1.35; }
h3{ font-size: var(--t-14); line-height: 1.4; }
p{ margin: 0; }
a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 2px; }
[hidden]{ display: none !important; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
code, kbd, pre{ font-family: var(--font-mono); }
.ic-icon{ inline-size: 16px; block-size: 16px; flex: none; stroke-width: 1.75; }
.ic-icon-sm{ inline-size: 14px; block-size: 14px; }
.ic-icon-lg{ inline-size: 20px; block-size: 20px; }
/* The orange parts of the IXXO logo (ui/shell/logo.php); the colour stays in the token files. */
.ic-logo-mark{ fill: var(--logo-orange); }
.ic-mono{ font-family: var(--font-mono); font-size: 0.92em; font-weight: 500; letter-spacing: -0.01em; }
.ic-num{ font-variant-numeric: tabular-nums; }
.ic-muted{ color: var(--ink-2); }
.ic-subtle{ color: var(--ink-3); }
.ic-sr-only{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic-skip{ position: absolute; inset-inline-start: var(--s-4); inset-block-start: -48px; z-index: var(--z-toast); background: var(--ink); color: var(--ink-inverse); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); }
.ic-skip:focus{ inset-block-start: var(--s-3); }
.ic-stack{ display: flex; flex-direction: column; gap: var(--s-4); }
.ic-stack-sm{ display: flex; flex-direction: column; gap: var(--s-2); }
.ic-row{ display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ic-kbd{ display: inline-flex; align-items: center; gap: 2px; font: 500 var(--t-11)/1 var(--font-mono); color: var(--ink-2); padding: 3px 5px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--surface-2); }

/* ------------------------------------------------------------ page header */
.ic-page-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.ic-page-title-row{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ic-page-sub{ color: var(--ink-2); margin-block-start: 2px; max-inline-size: 80ch; }
.ic-page-help{ display: inline-flex; align-items: center; gap: 4px; min-block-size: 26px; padding-block: 0; padding-inline: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: 500 var(--t-12)/1 var(--font-ui); cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast); }
.ic-page-help .ic-icon{ inline-size: 15px; block-size: 15px; color: var(--info-ink); }
.ic-page-help:hover{ color: var(--ink); border-color: var(--line-strong); background: var(--info-soft); }
.ic-actions{ display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ic-crumbs{ display: flex; align-items: center; gap: 6px; font-size: var(--t-13); color: var(--ink-3); margin-block-end: var(--s-2); flex-wrap: wrap; }
.ic-crumbs a{ color: var(--ink-2); }
.ic-crumbs .ic-icon{ inline-size: 14px; block-size: 14px; transform: scaleX(var(--ic-dir)); }

/* ------------------------------------------------------------ cards ("IXXO touches": titles on their own header line) */
.ic-card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-inline-size: 0; }
.ic-card-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.ic-card-title{ display: flex; align-items: center; gap: 4px; }
.ic-card-head h2{ font-size: var(--t-14); }
.ic-card-desc{ color: var(--ink-2); font-size: var(--t-13); margin-block-start: 2px; max-inline-size: 70ch; }
/* --ic-dock-gutter: how far a docked save bar reaches over the body's padding; a flush body
   has none, so `initial` unsets it and the bar keeps its own small gutter */
.ic-card-body{ --ic-dock-gutter: var(--s-5); padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.ic-card-body-flush{ --ic-dock-gutter: initial; padding: 0; gap: 0; }
.ic-card-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-13); flex-wrap: wrap; }

/* ------------------------------------------------------------ layout helpers */
.ic-columns{ display: grid; gap: var(--s-6); align-items: start; }
.ic-columns-main{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ic-columns-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ic-columns-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ic-divider{ block-size: 1px; background: var(--line); border: 0; margin: 0; }
.ic-toolbar{ display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.ic-kv{ display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: var(--s-2) var(--s-4); margin: 0; }
.ic-kv > div{ display: contents; }
.ic-kv dt{ color: var(--ink-2); font-size: var(--t-13); }
.ic-kv dd{ margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ tabs: links that wrap, never a scrollbar (spec §19.3) */
.ic-tabs{ display: flex; flex-wrap: wrap; column-gap: var(--s-5); row-gap: 0; border-block-end: 1px solid var(--line); }
.ic-tab{ position: relative; display: inline-flex; align-items: center; gap: var(--s-2); block-size: 40px; color: var(--ink-2); font: 500 var(--t-14)/1 var(--font-ui); white-space: nowrap; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.ic-tab:hover{ color: var(--ink); text-decoration: none; }
.ic-tab[aria-current="page"]{ color: var(--ink); }
.ic-tab::after{ content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; border-radius: 2px 2px 0 0; background: var(--accent); transform: scaleX(0); transition: transform var(--dur) var(--ease-out); }
.ic-tab[aria-current="page"]::after{ transform: scaleX(1); }
.ic-tab-count{ font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ tab panels: tabs that switch panels on the page (the one-page editor, ic.js `tab-panels`) */
/* Without JavaScript the tab row would do nothing: it is hidden and every panel shows with its heading.
   Once ic.js has started the block, the tabs show and the headings go (the tab names the panel). */
.ic-tab-panels{ display: flex; flex-direction: column; gap: var(--s-5); min-inline-size: 0; }
.ic-tab-panels:not([data-ic-started]) > .ic-tab-list{ display: none; }
.ic-tab-panels[data-ic-started] > .ic-tab-panel > .ic-tab-panel-title{ display: none; }
.ic-tab-panel{ display: flex; flex-direction: column; gap: var(--s-5); min-inline-size: 0; }
.ic-tab-panel[hidden]{ display: none; }
.ic-tab-panel:focus-visible{ outline-offset: 4px; }
.ic-tab-panel-title{ margin: 0; font: 600 var(--t-16)/1.3 var(--font-display); color: var(--ink); }
.ic-tab-list .ic-tab{ padding: 0; border: 0; background: none; cursor: pointer; }
.ic-tab[aria-selected="true"]{ color: var(--ink); }
.ic-tab[aria-selected="true"]::after{ transform: scaleX(1); }
/* A tab whose panel holds an error: a red dot after the name (the hidden words "has errors" say it too). */
.ic-tabs-dot{ inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.ic-tabs-error{ color: var(--danger-ink); }
.ic-tabs-error[aria-selected="true"]{ color: var(--danger-ink); }

/* ------------------------------------------------------------ buttons ("IXXO touches": flat, no bevel) */
.ic-btn{
	--btn-h: var(--h-md);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
	min-block-size: var(--btn-h); padding: 0 var(--s-4);
	border-radius: var(--r-md); border: 1px solid transparent;
	font: 500 var(--t-14)/1 var(--font-ui); letter-spacing: -0.005em;
	white-space: nowrap; cursor: pointer; text-decoration: none; user-select: none;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ic-btn:hover{ text-decoration: none; }
.ic-btn:active:not(:disabled){ transform: translateY(1px); }
.ic-btn:disabled, .ic-btn[aria-disabled="true"]{ opacity: 0.45; cursor: not-allowed; }
.ic-btn-primary{ background: var(--primary); color: var(--on-primary); }
.ic-btn-primary:hover:not(:disabled){ background: var(--primary-hover); }
.ic-btn-primary:active:not(:disabled){ background: var(--primary-press); }
.ic-btn-secondary{ background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.ic-btn-secondary:hover:not(:disabled){ background: var(--surface-2); }
.ic-btn-ghost{ background: transparent; color: var(--ink-2); }
.ic-btn-ghost:hover:not(:disabled){ background: var(--surface-3); color: var(--ink); }
.ic-btn-danger{ background: var(--danger); color: var(--on-danger); }
.ic-btn-danger:hover:not(:disabled){ background: var(--danger-hover); }
.ic-btn-danger-outline{ background: var(--surface); color: var(--danger-ink); border-color: color-mix(in oklch, var(--danger) 40%, var(--line)); }
.ic-btn-danger-outline:hover:not(:disabled){ background: var(--danger-soft); }
.ic-btn-link{ background: none; border: 0; padding: 0; min-block-size: auto; color: var(--primary); }
.ic-btn-link:hover{ text-decoration: underline; text-underline-offset: 2px; }
.ic-btn-sm{ --btn-h: var(--h-sm); padding: 0 var(--s-3); font-size: var(--t-13); }
.ic-btn-lg{ --btn-h: var(--h-lg); padding: 0 var(--s-5); font-size: var(--t-16); }
.ic-btn-icon{ inline-size: var(--btn-h); min-inline-size: 24px; padding: 0; }
.ic-btn[data-loading="true"]{ pointer-events: none; }
.ic-spinner{ inline-size: 14px; block-size: 14px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: ic-spin 700ms linear infinite; }
@keyframes ic-spin{ to{ transform: rotate(360deg); } }
.ic-avatar{ inline-size: 32px; block-size: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: var(--t-12); font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent); }
.ic-avatar-sm{ inline-size: 24px; block-size: 24px; font-size: var(--t-11); }
.ic-avatar-lg{ inline-size: 40px; block-size: 40px; font-size: var(--t-14); }

/* ------------------------------------------------------------ menu */
.ic-menu-wrap{ position: relative; display: inline-block; }
.ic-menu{ position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; z-index: var(--z-pop); min-inline-size: 220px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: ic-pop var(--dur) var(--ease-out); }
@keyframes ic-pop{ from{ opacity: 0; transform: scale(0.97) translateY(-4px); } }
.ic-menu-item{ display: flex; align-items: center; gap: var(--s-3); inline-size: 100%; min-block-size: 34px; padding: 0 var(--s-3); border: 0; background: none; border-radius: var(--r-sm); font: 400 var(--t-14)/1 var(--font-ui); color: var(--ink); cursor: pointer; text-align: start; text-decoration: none; }
.ic-menu-item:hover, .ic-menu-item:focus-visible{ background: var(--surface-2); outline: none; text-decoration: none; }
.ic-menu-item .ic-icon{ color: var(--ink-3); }
.ic-menu-item.is-danger, .ic-menu-item.is-danger .ic-icon{ color: var(--danger-ink); }
.ic-menu-sep{ border: 0; block-size: 1px; background: var(--line); margin: 4px -4px; }
.ic-menu-label{ font-size: var(--t-12); color: var(--ink-3); padding: 6px var(--s-3) 4px; }
/* The menu's heading (the picture menu: the person's name and role) and a plain line among the entries. */
.ic-menu-head{ display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); margin-block-end: 4px; border-block-end: 1px solid var(--line); }
.ic-menu-head-title{ font-weight: 600; overflow-wrap: anywhere; }
.ic-menu-head-sub{ font-size: var(--t-12); color: var(--ink-3); }
.ic-menu-note{ display: flex; align-items: center; gap: var(--s-3); min-block-size: 34px; margin: 0; padding: 0 var(--s-3); font-size: var(--t-14); color: var(--ink-2); }
.ic-menu-note .ic-icon{ color: var(--success); }

/* ------------------------------------------------------------ dialogs and drawers (<dialog>) */
.ic-dialog{ border: 0; padding: 0; background: transparent; color: var(--ink); max-inline-size: calc(100% - 32px); }
.ic-dialog::backdrop{ background: var(--scrim); backdrop-filter: blur(2px); }
.ic-dialog[open]{ animation: ic-dialog-in var(--dur-slow) var(--ease-out); }
@keyframes ic-dialog-in{ from{ opacity: 0; transform: translateY(8px) scale(0.985); } }
.ic-modal{ inline-size: 480px; max-inline-size: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); }
.ic-dialog-wide .ic-modal{ inline-size: 680px; }
.ic-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) 0; }
.ic-modal-sub{ color: var(--ink-2); font-size: var(--t-13); }
.ic-modal-body{ padding: var(--s-3) var(--s-5) var(--s-5); color: var(--ink); display: flex; flex-direction: column; gap: var(--s-4); }
.ic-modal-body > p{ color: var(--ink-2); }
.ic-modal-body > *{ flex-shrink: 0; }
.ic-modal-foot{ display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); background: var(--surface-2); border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg); flex-wrap: wrap; }
.ic-drawer{ margin-block: 0; margin-inline: auto 0; block-size: 100%; max-block-size: 100%; max-inline-size: 100%; }
.ic-drawer[open]{ animation: ic-slide var(--dur-slow) var(--ease-out); }
@keyframes ic-slide{ from{ transform: translateX(calc(24px * var(--ic-dir))); opacity: 0; } }
.ic-drawer-panel{ inline-size: 480px; max-inline-size: 100vw; block-size: 100%; background: var(--surface); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; }
.ic-drawer-panel .ic-modal-body{ flex: 1; overflow-y: auto; }
.ic-drawer-panel .ic-modal-foot{ border-radius: 0; }

/* ------------------------------------------------------------ top bar: search, bell, conversations (Phase 9a) */
/* A number on a top-bar icon (bell, conversations): orange, like the menu's waiting work. */
.ic-top-icon{ position: relative; }
.ic-top-count{ position: absolute; inset-block-start: 3px; inset-inline-end: 1px; min-inline-size: 17px; block-size: 17px; padding: 0 4px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 var(--t-11)/17px var(--font-ui); text-align: center; box-shadow: 0 0 0 2px var(--canvas); font-variant-numeric: tabular-nums; }
.ic-search{ flex: 1; min-inline-size: 0; max-inline-size: 520px; }
.ic-search-trigger{ display: flex; align-items: center; gap: var(--s-2); inline-size: 100%; block-size: var(--h-md); padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-3); font: inherit; cursor: pointer; text-align: start; transition: border-color var(--dur-fast) var(--ease-out); }
.ic-search-trigger:hover{ border-color: var(--line-strong); }
.ic-search-trigger-text{ flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ic-search-panel{ border: 0; padding: 0; margin-block: 12vh auto; inline-size: 600px; max-inline-size: calc(100% - 32px); background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-modal); overflow: hidden; }
.ic-search-panel::backdrop{ background: var(--scrim); backdrop-filter: blur(2px); }
.ic-search-panel[open]{ animation: ic-dialog-in var(--dur-slow) var(--ease-out); }
.ic-search-box{ display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); border-block-end: 1px solid var(--line); color: var(--ink-3); }
.ic-search-input{ flex: 1; min-inline-size: 0; block-size: 52px; border: 0; outline: 0; background: transparent; font: 400 var(--t-16) var(--font-ui); color: var(--ink); }
.ic-search-input::-webkit-search-cancel-button{ cursor: pointer; }
.ic-search-results{ max-block-size: 340px; overflow-y: auto; padding: 4px; }
.ic-search-results:empty{ display: none; }
.ic-search-heading{ display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-12); color: var(--ink-3); padding: 8px var(--s-3) 4px; }
.ic-search-row{ display: flex; align-items: center; gap: var(--s-3); min-block-size: 40px; padding: 0 var(--s-3); border-radius: var(--r-sm); border-inline-start: 3px solid transparent; color: var(--ink); text-decoration: none; }
.ic-search-row:hover{ background: var(--surface-2); text-decoration: none; }
/* The active result (arrows, Enter): the primary's soft fill and a bar, darker than hover. */
.ic-search-row[aria-selected="true"]{ background: var(--primary-soft); border-inline-start-color: var(--primary); color: var(--primary-soft-ink); text-decoration: none; }
.ic-search-row[aria-selected="true"] .ic-search-detail{ color: var(--primary-soft-ink); }
.ic-search-title{ flex: 1; min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ic-search-detail{ flex: none; max-inline-size: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--t-12); color: var(--ink-3); }
.ic-search-status{ padding: var(--s-3) var(--s-4); font-size: var(--t-13); color: var(--ink-2); }
.ic-search-status:empty{ display: none; }
.ic-bell{ position: relative; }
.ic-bell-panel{ position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: -48px; z-index: var(--z-pop); display: flex; flex-direction: column; inline-size: 400px; max-inline-size: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); animation: ic-pop var(--dur) var(--ease-out); }
.ic-bell-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-2); padding-inline: var(--s-4) var(--s-2); border-block-end: 1px solid var(--line); }
.ic-bell-title{ font-weight: 600; }
.ic-bell-filters{ display: flex; gap: 4px; padding: var(--s-2) var(--s-4) 0; }
.ic-bell-filter{ block-size: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font: 500 var(--t-13)/1 var(--font-ui); color: var(--ink-2); cursor: pointer; }
.ic-bell-filter[aria-pressed="true"]{ background: var(--ink); color: var(--ink-inverse); border-color: var(--ink); }
.ic-bell-list{ list-style: none; margin: 0; padding: var(--s-2); max-block-size: min(440px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ic-bell-list:empty{ display: none; }
.ic-bell-status{ padding: var(--s-4); font-size: var(--t-13); color: var(--ink-2); text-align: center; }
.ic-bell-status:empty{ display: none; }
.ic-bell-more{ align-self: center; margin-block-end: var(--s-2); }
.ic-bell-foot{ display: flex; justify-content: flex-end; padding: var(--s-2) var(--s-4); border-block-start: 1px solid var(--line); font-size: var(--t-13); }
.ic-notice-link{ display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.ic-notice-link[href]:hover{ background: var(--surface-2); text-decoration: none; }
.ic-notice-icon{ inline-size: 30px; block-size: 30px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-2); }
.ic-notice-icon.is-info{ background: var(--info-soft); color: var(--info-ink); }
.ic-notice-icon.is-success{ background: var(--success-soft); color: var(--success-ink); }
.ic-notice-icon.is-warning{ background: var(--warning-soft); color: var(--warning-ink); }
.ic-notice-icon.is-danger{ background: var(--danger-soft); color: var(--danger-ink); }
.ic-notice-icon.is-brand{ background: var(--primary-soft); color: var(--primary-soft-ink); }
.ic-notice-icon.is-accent{ background: var(--accent-soft); color: var(--accent-ink); }
.ic-notice-body{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-notice-text{ font-size: var(--t-13); line-height: 1.4; }
.ic-notice-unread .ic-notice-text{ font-weight: 500; }
.ic-notice-time{ font-size: var(--t-12); color: var(--ink-3); }
.ic-notice-dot{ inline-size: 8px; block-size: 8px; flex: none; margin-block-start: 6px; border-radius: 50%; background: var(--accent); }
.ic-notice:not(.ic-notice-unread) .ic-notice-dot{ display: none; }
/* A gallery sample: the panel drawn in the page instead of floating. */
.ic-search.is-sample, .ic-bell.is-sample{ flex: none; max-inline-size: 100%; }
.ic-search.is-sample .ic-search-panel{ position: static; margin: var(--s-2) 0 0; inline-size: 100%; max-inline-size: 100%; box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
.ic-bell.is-sample .ic-bell-panel{ position: static; margin-block-start: var(--s-2); inline-size: 100%; }

/* ------------------------------------------------------------ toasts (flash messages and IC.ajax notify) */
.ic-toasts{ position: fixed; inset-inline-end: var(--s-4); inset-block-end: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-end; }
.ic-toast{ display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); padding-inline: var(--s-4) var(--s-3); min-inline-size: 280px; max-inline-size: calc(100vw - 32px); background: var(--ink); color: var(--ink-inverse); border-radius: var(--r-md); box-shadow: var(--shadow-modal); animation: ic-toast-in var(--dur-slow) var(--ease-out); }
.ic-toast-text{ flex: 1; }
.ic-toast .ic-icon{ color: var(--primary-soft); }
.ic-toast-error .ic-icon{ color: var(--danger-soft); }
.ic-toast-close{ display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; border: 0; background: transparent; color: var(--ink-inverse); border-radius: var(--r-sm); cursor: pointer; }
@keyframes ic-toast-in{ from{ opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------ alerts, tags ("IXXO touches": square), recommended */
.ic-alert{ display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--t-13); background: var(--surface-2); }
.ic-alert > .ic-icon{ margin-block-start: 2px; }
.ic-alert-body{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; }
.ic-alert-title{ font-weight: 600; color: var(--ink); font-size: var(--t-14); }
.ic-alert-text{ color: var(--ink-2); }
.ic-alert-actions{ margin-block-start: var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ic-alert-info{ background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 30%, transparent); }
.ic-alert-info > .ic-icon{ color: var(--info-ink); }
.ic-alert-success{ background: var(--success-soft); border-color: color-mix(in oklch, var(--success) 30%, transparent); }
.ic-alert-success > .ic-icon{ color: var(--success-ink); }
.ic-alert-warning{ background: var(--warning-soft); border-color: color-mix(in oklch, var(--warning) 45%, transparent); }
.ic-alert-warning > .ic-icon{ color: var(--warning-ink); }
.ic-alert-danger{ background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); }
.ic-alert-danger > .ic-icon{ color: var(--danger-ink); }
.ic-alert-brand{ background: var(--primary-soft); border-color: color-mix(in oklch, var(--primary) 25%, transparent); }
.ic-alert-accent{ background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 30%, transparent); }
.ic-alert ul{ margin: var(--s-1) 0 0; padding-inline-start: var(--s-5); }
.ic-tag{ display: inline-flex; align-items: center; gap: 6px; block-size: 22px; padding: 0 7px; border-radius: var(--r-xs); font-size: var(--t-11); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; background: var(--surface-3); color: var(--ink-2); }
.ic-tag::before{ content: ""; inline-size: 6px; block-size: 6px; border-radius: 1px; background: currentColor; opacity: 0.9; }
.ic-tag-plain::before{ display: none; }
.ic-tag-success{ background: var(--success-soft); color: var(--success-ink); }
.ic-tag-warning{ background: var(--warning-soft); color: var(--warning-ink); }
.ic-tag-danger{ background: var(--danger-soft); color: var(--danger-ink); }
.ic-tag-info{ background: var(--info-soft); color: var(--info-ink); }
.ic-tag-brand{ background: var(--primary-soft); color: var(--primary-soft-ink); }
.ic-tag-accent{ background: var(--accent-soft); color: var(--accent-ink); }
.ic-rec{ display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-11); font-weight: 600; color: var(--success-ink); background: var(--success-soft); border-radius: var(--r-pill); padding: 1px 8px; inline-size: fit-content; }
.ic-rec .ic-icon{ inline-size: 12px; block-size: 12px; }

/* A colour dot with its name (ShopUi::swatch()): the colour is the circle's fill attribute, the ring a token, so a white swatch still shows. */
.ic-swatch{ display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-14); color: var(--ink); vertical-align: middle; }
.ic-swatch-dot{ inline-size: 16px; block-size: 16px; flex: none; overflow: visible; }
.ic-swatch-dot circle{ stroke: var(--line-strong); stroke-width: 1; }
.ic-swatch.is-selected .ic-swatch-dot circle{ stroke: var(--primary); stroke-width: 2.5; }
.ic-swatch.is-selected .ic-swatch-label{ font-weight: 600; }

/* ------------------------------------------------------------ empty state, progress, metrics */
.ic-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-10) var(--s-6); }
.ic-empty-art{ inline-size: 56px; block-size: 56px; border-radius: var(--r-lg); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); margin-block-end: var(--s-2); }
.ic-empty-art .ic-icon{ inline-size: 24px; block-size: 24px; }
.ic-empty p{ color: var(--ink-2); max-inline-size: 44ch; }
.ic-empty .ic-actions{ margin-block-start: var(--s-3); justify-content: center; }
.ic-progress-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); align-items: center; }
.ic-progress-label{ grid-column: 1 / -1; font-size: var(--t-13); color: var(--ink-2); }
.ic-progress-value{ font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ic-progress{ --progress-color: var(--primary); appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 6px; border: 0; border-radius: 6px; background: var(--surface-3); overflow: hidden; color: var(--progress-color); }
.ic-progress::-webkit-progress-bar{ background: var(--surface-3); border-radius: 6px; }
.ic-progress::-webkit-progress-value{ background: var(--progress-color); border-radius: 6px; }
.ic-progress::-moz-progress-bar{ background: var(--progress-color); border-radius: 6px; }
.ic-progress-success{ --progress-color: var(--success); }
.ic-progress-warning{ --progress-color: var(--warning); }
.ic-progress-danger{ --progress-color: var(--danger); }
.ic-progress-info{ --progress-color: var(--info); }
.ic-progress-accent{ --progress-color: var(--accent); }
.ic-metric{ display: flex; flex-direction: column; gap: 6px; padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-inline-size: 0; }
.ic-metric-head{ display: flex; align-items: center; gap: 6px; }
.ic-metric-label{ font-size: var(--t-13); color: var(--ink-2); }
.ic-metric-value{ font-family: var(--font-display); font-size: var(--t-22); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ic-metric-link{ display: block; color: inherit; text-decoration: none; }
.ic-metric-link:hover, .ic-metric-link:focus-visible{ text-decoration: underline; }
.ic-metric-note{ font-size: var(--t-12); color: var(--ink-3); }
.ic-metric-note.ic-tone-success{ color: var(--success-ink); }
.ic-metric-note.ic-tone-danger{ color: var(--danger-ink); }
.ic-metric-note.ic-tone-warning{ color: var(--warning-ink); }
/* A row of up to four tiles in one panel (Home's numbers): one border around them, a line between. */
.ic-metric-row{ display: grid; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.ic-metric-row-1{ grid-template-columns: minmax(0, 1fr); }
.ic-metric-row-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ic-metric-row-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ic-metric-row-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ic-metric-row > .ic-metric{ border: 0; border-radius: 0; }
.ic-metric-row > .ic-metric + .ic-metric{ border-inline-start: 1px solid var(--line); }
.ic-metric-row .ic-metric-value{ overflow-wrap: anywhere; }
/* The chart (Phase 9g): axis values and labels are HTML beside a stretched SVG plot, so the
   text keeps its size; colours come from the area tokens through the series classes. In a
   right-to-left page the plot is mirrored with its labels. */
/* The container query sizes the chart from its parent, never from its content: so it takes
   the full width, and in a shrink-to-fit box (a flex item, a table cell) it counts as 280px
   instead of collapsing to nothing. */
.ic-chart{ display: grid; gap: var(--s-3); margin: 0; inline-size: 100%; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: 280px; }
.ic-chart__body{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); row-gap: 6px; }
.ic-chart__y{ grid-row: 1; grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; margin-block: -0.75em; font-size: var(--t-11); line-height: 1.5; color: var(--ink-3); text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-chart__plot{ grid-row: 1; grid-column: 2; display: block; inline-size: 100%; block-size: 240px; overflow: visible; transform: scaleX(var(--ic-dir)); }
.ic-chart__x{ grid-row: 2; grid-column: 2; display: flex; }
.ic-chart__label{ flex: 1 1 0; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: var(--t-11); color: var(--ink-3); }
.ic-chart__grid, .ic-chart__axis{ stroke: var(--ic-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ic-chart__axis{ stroke: var(--line-strong); }
.ic-chart__s1{ --ic-chart-colour: var(--ic-chart-1); }
.ic-chart__s2{ --ic-chart-colour: var(--ic-chart-2); }
.ic-chart__s3{ --ic-chart-colour: var(--ic-chart-3); }
.ic-chart__s4{ --ic-chart-colour: var(--ic-chart-4); }
.ic-chart__bar{ fill: var(--ic-chart-colour); }
.ic-chart__line{ fill: none; stroke: var(--ic-chart-colour); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ic-chart__legend{ display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: 0; padding: 0; list-style: none; font-size: var(--t-12); color: var(--ink-2); }
.ic-chart__legend li{ display: inline-flex; align-items: center; gap: 6px; }
.ic-chart__key{ inline-size: 10px; block-size: 10px; border-radius: 2px; background: var(--ic-chart-colour); }
.ic-chart__key.is-line{ inline-size: 14px; block-size: 2px; }
.ic-chart__empty{ margin: 0; padding: var(--s-6) var(--s-4); text-align: center; font-size: var(--t-13); color: var(--ink-3); }
/* A narrow chart (a phone, or a narrow card on a wide screen) is lower and shows every other label. */
@container (max-width: 480px){
	.ic-chart__plot{ block-size: 180px; }
	.ic-chart__label--odd{ visibility: hidden; }
}

/* ------------------------------------------------------------ advice tooltips: closed ones take no space, open ones flip (spec §19.4) */
.ic-label-row{ display: flex; align-items: center; gap: 4px; }
.ic-hint{ position: relative; display: inline-flex; vertical-align: middle; margin-inline-start: 2px; }
.ic-hint-btn{ display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: help; }
.ic-hint-btn .ic-icon{ inline-size: 15px; block-size: 15px; }
.ic-hint-btn:hover, .ic-hint.is-open .ic-hint-btn{ color: var(--info-ink); background: var(--info-soft); }
.ic-hint-body{ position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: -8px; z-index: var(--z-pop); inline-size: max-content; max-inline-size: min(320px, 80vw); display: none; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); background: var(--ink); color: var(--ink-inverse); font: 400 var(--t-13)/1.5 var(--font-ui); text-align: start; white-space: normal; letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-pop); }
.ic-hint:hover .ic-hint-body, .ic-hint:focus-within .ic-hint-body, .ic-hint.is-open .ic-hint-body{ display: flex; }
.ic-hint-body.is-flipped{ inset-inline-start: auto; inset-inline-end: -8px; }
/* Escape hid it (ic.js); it shows again once the pointer and the focus have left. */
.ic-hint.is-dismissed .ic-hint-body{ display: none; }
.ic-hint-title{ display: block; margin-block-end: 2px; color: var(--ink-inverse); font-weight: 600; }
.ic-hint-text{ display: block; }

/* ------------------------------------------------------------ forms */
.ic-form{ display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }
.ic-field{ display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.ic-label{ font-size: var(--t-13); font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.ic-req{ color: var(--danger-ink); }
.ic-opt{ color: var(--ink-3); font-weight: 400; }
.ic-help{ font-size: var(--t-12); color: var(--ink-2); }
.ic-error{ font-size: var(--t-12); color: var(--danger-ink); display: flex; align-items: center; gap: 6px; }
.ic-error .ic-icon{ inline-size: 14px; block-size: 14px; }
/* The field look belongs to the native select only (select.ic-select): Tom Select copies the select's
   classes onto the .ts-wrapper it builds, and the wrapper would draw a second border around .ts-control. */
.ic-input, select.ic-select, .ic-textarea{
	inline-size: 100%;
	font: 400 var(--t-14)/1.4 var(--font-ui);
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-md);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ic-input, select.ic-select{ min-block-size: var(--h-md); padding: 0 var(--s-3); }
.ic-input::placeholder, .ic-textarea::placeholder{ color: var(--ink-3); }
.ic-input:hover, select.ic-select:hover, .ic-textarea:hover{ border-color: color-mix(in oklch, var(--ink) 30%, var(--line-strong)); }
.ic-input:focus, select.ic-select:focus, .ic-textarea:focus{ outline: none; border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 20%, transparent); }
.ic-input:disabled, select.ic-select:disabled, .ic-textarea:disabled{ background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; border-color: var(--line); }
.ic-input[readonly]{ background: var(--surface-2); border-style: dashed; }
.ic-input[aria-invalid="true"], select.ic-select[aria-invalid="true"], .ic-textarea[aria-invalid="true"]{ border-color: var(--danger); }
.ic-input[aria-invalid="true"]:focus, .ic-textarea[aria-invalid="true"]:focus{ box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent); }
.ic-input[type="file"]{ padding: 5px var(--s-2); }
.ic-textarea{ padding: var(--s-2) var(--s-3); min-block-size: 104px; resize: vertical; line-height: 1.55; }
.ic-textarea.ic-code{ font-family: var(--font-mono); font-size: var(--t-13); }
.ic-input-group{ display: flex; align-items: stretch; inline-size: 100%; }
.ic-input-group .ic-input{ border-radius: 0; flex: 1; min-inline-size: 0; }
.ic-input-group > :first-child{ border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); }
.ic-input-group > :last-child{ border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.ic-addon{ display: grid; place-items: center; padding: 0 var(--s-3); background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: var(--t-13); white-space: nowrap; }
.ic-addon:first-child{ border-inline-end: 0; }
.ic-addon:last-child{ border-inline-start: 0; }
.ic-input-icon{ position: relative; inline-size: 100%; display: block; }
.ic-input-icon > .ic-icon{ position: absolute; inset-inline-start: 11px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ic-input-icon .ic-input{ padding-inline-start: 34px; }
.ic-select-wrap{ position: relative; inline-size: 100%; display: block; }
select.ic-select{ appearance: none; -webkit-appearance: none; padding-inline-end: 34px; cursor: pointer; }
select.ic-select[multiple]{ padding: var(--s-1) var(--s-2); min-block-size: 96px; }
.ic-select-wrap > .ic-icon{ position: absolute; inset-inline-end: 11px; inset-block-start: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.ic-select-wrap:has(select[multiple]) > .ic-icon, .ic-select-wrap:has(.ts-wrapper) > .ic-icon{ display: none; }
.ic-check, .ic-radio{
	appearance: none; -webkit-appearance: none; margin: 0; flex: none;
	inline-size: 16px; block-size: 16px; cursor: pointer;
	border: 1px solid var(--line-strong); background: var(--surface);
	display: inline-grid; place-content: center;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ic-check{ border-radius: var(--r-xs); }
.ic-radio{ border-radius: 50%; }
.ic-check:hover, .ic-radio:hover{ border-color: var(--ink-3); }
.ic-check:checked, .ic-check:indeterminate{ background: var(--primary); border-color: var(--primary); }
.ic-check:checked::after{ content: ""; inline-size: 9px; block-size: 5px; border: 2px solid var(--on-primary); border-block-start: 0; border-inline-end: 0; transform: translateY(-1px) rotate(calc(-45deg * var(--ic-dir))); }
.ic-check:indeterminate::after{ content: ""; inline-size: 8px; block-size: 2px; background: var(--on-primary); border-radius: 1px; }
.ic-radio:checked{ border-color: var(--primary); border-width: 5px; }
.ic-check:disabled, .ic-radio:disabled{ opacity: 0.45; cursor: not-allowed; }
.ic-choice{ display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.ic-choice > input{ margin-block-start: 2px; }
.ic-choice-text{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ic-choice-title{ font-weight: 500; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ic-choice-help{ font-size: var(--t-13); color: var(--ink-2); }
/* A check box's help sits under its label (outside it, so it is read once), lined up with the label text. */
.ic-check-help{ margin: 0; padding-inline-start: calc(16px + var(--s-3)); }
.ic-field:has(.ic-switch) > .ic-check-help{ padding-inline-start: calc(34px + var(--s-3)); }
.ic-switch{
	--w: 34px; --h: 20px;
	appearance: none; -webkit-appearance: none; margin: 0;
	position: relative; flex: none;
	inline-size: var(--w); block-size: var(--h);
	border-radius: var(--r-pill); border: 0; padding: 0; cursor: pointer;
	background: var(--line-strong);
	transition: background var(--dur) var(--ease-out);
}
.ic-switch::after{ content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: calc(var(--h) - 4px); block-size: calc(var(--h) - 4px); border-radius: 50%; background: var(--switch-knob); box-shadow: var(--shadow-knob); transition: transform var(--dur) var(--ease-out); }
.ic-switch:checked{ background: var(--primary); }
.ic-switch:checked::after{ transform: translateX(calc((var(--w) - var(--h)) * var(--ic-dir))); }
.ic-switch:disabled{ opacity: 0.45; cursor: not-allowed; }
.ic-fieldset{ border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.ic-legend{ padding: 0; font-size: var(--t-13); font-weight: 500; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; margin-block-end: 6px; }
.ic-choices{ display: flex; flex-direction: column; gap: var(--s-2); }
.ic-radio-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-3); }
.ic-radio-card{ position: relative; display: flex; flex-direction: column; gap: 6px; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-lg); cursor: pointer; background: var(--surface); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.ic-radio-card:hover{ border-color: var(--ink-3); }
.ic-radio-card:has(input:checked){ border-color: var(--primary); background: color-mix(in oklch, var(--primary-soft) 55%, var(--surface)); box-shadow: 0 0 0 1px var(--primary); }
.ic-radio-card:has(input:focus-visible){ outline: 2px solid var(--focus); outline-offset: 2px; }
.ic-radio-card:has(input:disabled){ opacity: 0.55; cursor: not-allowed; }
.ic-radio-card input{ position: absolute; inset-block-start: var(--s-4); inset-inline-end: var(--s-4); }
.ic-rc-title{ font-weight: 600; display: flex; align-items: center; gap: var(--s-2); padding-inline-end: 24px; }
.ic-rc-help{ font-size: var(--t-13); color: var(--ink-2); }
/* The whole card picks its radio: the label covers the card; advice stays clickable above it. */
.ic-rc-label{ cursor: pointer; }
.ic-rc-label::after{ content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.ic-radio-card .ic-hint{ position: relative; z-index: 1; }
.ic-form-actions{ display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); flex-wrap: wrap; padding-block: var(--s-3); }
.ic-savebar-msg{ display: none; align-items: center; gap: var(--s-2); margin-inline-end: auto; font-weight: 500; color: var(--ink); }
.ic-savebar-msg .ic-icon{ color: var(--accent); }
/* "IXXO touches": unsaved changes dock a light bar across the bottom of the page. It reaches
   out over its container's padding, which the container names in --ic-dock-gutter (the admin
   and console content areas, a card body). Anywhere else it keeps a small inner gutter so its
   buttons never touch the bar's edge. */
.ic-form[data-dirty="true"] .ic-form-actions{ position: sticky; inset-block-end: 0; z-index: var(--z-sticky); margin-inline: calc(var(--ic-dock-gutter, 0px) * -1); padding-block: var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); padding-inline: var(--ic-dock-gutter, var(--s-4)); background: var(--surface); border-block-start: 1px solid var(--line-strong); box-shadow: var(--shadow-dock); }
.ic-form[data-dirty="true"] .ic-savebar-msg{ display: flex; }
/* Tom Select and Flatpickr, dressed in the kit's tokens. .ts-control is the field's one border; its states
   follow a plain field's (hover, focus ring, refused, disabled). The refused state is read from the hidden
   select just before the wrapper, which keeps aria-invalid. The rules outweigh tom-select.min.css, which
   loads after this file. */
.ts-wrapper .ts-control{ min-block-size: var(--h-md); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: 400 var(--t-14)/1.4 var(--font-ui); color: var(--ink); box-shadow: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.ts-wrapper.single .ts-control{ padding-inline-start: var(--s-3); }
.ts-wrapper:hover .ts-control{ border-color: color-mix(in oklch, var(--ink) 30%, var(--line-strong)); }
.ts-wrapper.focus .ts-control{ border-color: var(--info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--info) 20%, transparent); }
select[aria-invalid="true"] + .ts-wrapper .ts-control{ border-color: var(--danger); }
select[aria-invalid="true"] + .ts-wrapper.focus .ts-control{ box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 18%, transparent); }
.ts-wrapper.disabled .ts-control{ opacity: 1; background: var(--surface-2); color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.ts-dropdown{ border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); font: 400 var(--t-14)/1.4 var(--font-ui); color: var(--ink); }
.ts-dropdown .active{ background: var(--surface-2); color: var(--ink); }
.flatpickr-calendar{ font-family: var(--font-ui); box-shadow: var(--shadow-pop); border-radius: var(--r-md); }

/* ------------------------------------------------------------ generated settings pages (spec §14: label and control side by side, max ~880px) */
.ic-settings{ display: grid; grid-template-columns: 220px minmax(0, var(--settings-max)); gap: var(--s-8); align-items: start; }
.ic-subnav{ position: sticky; inset-block-start: 80px; display: flex; flex-direction: column; gap: 1px; }
.ic-subnav-label{ font-size: var(--t-12); color: var(--ink-3); padding: var(--s-4) var(--s-3) var(--s-1); font-weight: 500; }
.ic-subnav a{ display: flex; align-items: center; gap: var(--s-3); min-block-size: 34px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--ink-2); font-weight: 500; text-decoration: none; }
.ic-subnav a:hover{ background: var(--surface-3); color: var(--ink); }
.ic-subnav a[aria-current="page"]{ background: var(--surface-3); color: var(--ink); }
.ic-settings-section{ display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }
.ic-settings-intro h2{ margin-block-end: 2px; }
.ic-settings-intro p{ color: var(--ink-2); font-size: var(--t-13); }
.ic-set-rows{ display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.ic-field.ic-set-row, .ic-set-row{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--s-5); align-items: start; padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--line); }
.ic-set-row:first-child{ border-block-start: 0; }
.ic-set-text{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ic-set-text .ic-label, .ic-set-text .ic-legend{ font-size: var(--t-14); margin: 0; }
.ic-set-text .ic-help{ font-size: var(--t-13); max-inline-size: 56ch; }
.ic-set-control{ display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.ic-set-control .ic-switch{ margin-block-start: 2px; }
/* A note under a control (field.php): after the help and the error line. */
.ic-note{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.ic-set-note{ display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--ink-3); }
.ic-settings .ic-form-actions{ max-inline-size: var(--settings-max); }

/* ------------------------------------------------------------ tables: text wraps, numbers and tags stay on one line (spec §19.5) */
.ic-table-wrap{ overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.ic-table-wrap::-webkit-scrollbar{ block-size: 8px; }
.ic-table-wrap::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 8px; }
.ic-table-wrap::-webkit-scrollbar-track{ background: transparent; }
.ic-table{ inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-14); }
.ic-table caption{ caption-side: top; text-align: start; padding: var(--s-3) var(--s-5); font-weight: 600; }
.ic-table th{ position: sticky; inset-block-start: 0; text-align: start; font-weight: 500; font-size: var(--t-12); color: var(--ink-2); background: var(--surface-2); padding: 0 var(--s-4); block-size: 36px; border-block-end: 1px solid var(--line); white-space: nowrap; }
.ic-table th:first-child, .ic-table td:first-child{ padding-inline-start: var(--s-5); }
.ic-table th:last-child, .ic-table td:last-child{ padding-inline-end: var(--s-5); }
.ic-table td{ padding: var(--s-2) var(--s-4); block-size: 52px; border-block-end: 1px solid var(--line); white-space: normal; overflow-wrap: break-word; }
.ic-table tbody tr:last-child td{ border-block-end: 0; }
.ic-table tbody tr{ transition: background var(--dur-fast) var(--ease-out); }
.ic-table tbody tr:hover{ background: color-mix(in oklch, var(--surface-2) 70%, transparent); }
.ic-table tbody tr.is-selected{ background: color-mix(in oklch, var(--primary-soft) 70%, transparent); }
.ic-table .ic-cell-end{ text-align: end; }
/* Cells break between words; a long value without spaces (mono codes, e-mail and web addresses) may break anywhere, so it cannot widen the table (spec §19.5). */
.ic-table .ic-cell-anywhere{ overflow-wrap: anywhere; }
.ic-table .ic-cell-nowrap{ white-space: nowrap; overflow-wrap: normal; }
.ic-table td .ic-form-actions{ padding-block: 0; }
/* A field in a table cell keeps a usable width while the table scrolls. Only a table that asks for it (ShopUiTable fields_named_by_headers: a combinations table, whose column headers name each field) keeps the label text for screen readers alone; the required mark and the hint stay visible. */
.ic-table-fields-named td .ic-field .ic-label-text, .ic-table-fields-named td .ic-field .ic-choice-text{ position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic-table td .ic-field .ic-input{ min-inline-size: 6rem; }
.ic-table td .ic-field select.ic-select{ min-inline-size: 8rem; }
.ic-table .ic-cell-media{ display: flex; align-items: center; gap: var(--s-3); }
.ic-table .ic-cell-media > .ic-icon, .ic-table .ic-cell-media > .ic-cell-image{ flex: none; }
.ic-table .ic-cell-image{ display: block; inline-size: 40px; block-size: 40px; object-fit: contain; border-radius: var(--r-sm); background: var(--surface-2); }
.ic-table .ic-cell-check{ inline-size: 44px; padding-inline-end: 0; }
/* A row's check box sits in a label that is at least 24 × 24 px (WCAG 2.2 target size) without moving the box. */
.ic-check-target{ display: inline-grid; place-items: center; min-inline-size: 24px; min-block-size: 24px; padding: 4px; margin: -4px; cursor: pointer; }
.ic-table td a{ font-weight: 600; color: var(--ink); }
.ic-table td a:hover{ color: var(--primary); }
.ic-table-compact td{ block-size: 44px; }
.ic-table-empty td{ block-size: auto; padding: 0; }
.ic-th-sort{ display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.ic-th-sort:hover{ color: var(--ink); text-decoration: none; }
.ic-th-sort .ic-icon{ inline-size: 13px; block-size: 13px; }
.ic-bulkbar{ display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) var(--s-5); padding: var(--s-2) var(--s-4); background: var(--ink); color: var(--ink-inverse); border-radius: var(--r-md); flex-wrap: wrap; }
.ic-bulkbar .ic-btn-ghost{ color: color-mix(in oklch, var(--ink-inverse) 80%, transparent); }
.ic-bulkbar .ic-btn-ghost:hover{ background: color-mix(in oklch, var(--ink-inverse) 12%, transparent); color: var(--ink-inverse); }
.ic-filters{ display: flex; align-items: flex-end; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.ic-filters .ic-field{ flex: 0 1 200px; }
.ic-filters .ic-filter-search{ flex: 1 1 240px; max-inline-size: 360px; }
.ic-filters .ic-filter-date{ flex: 0 1 160px; }
/* Date presets: the select and its from/to pair sit in the bar like other fields; the pair
   shows only for "Choose dates" where :has() works (elsewhere it simply stays visible). */
.ic-filter-presets, .ic-filter-dates{ display: contents; }
.ic-filter-presets:not(:has(option[value="custom"]:checked)) .ic-filter-dates{ display: none; }
/* How many rows match, at the end of the bar (it wraps along with the controls). */
.ic-filters-count{ margin-inline-start: auto; align-self: center; color: var(--ink-2); font-size: var(--t-13); white-space: nowrap; }
.ic-pagination{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-13); flex-wrap: wrap; }
/* The links stay at the end of the line also when no count is shown before them. */
.ic-pagination-links{ display: flex; gap: var(--s-2); margin-inline-start: auto; }
.ic-pagination .ic-icon{ transform: scaleX(var(--ic-dir)); }

/* ------------------------------------------------------------ tree (categories; ic.js `tree`: tree keys, drag with SortableJS) */
.ic-tree{ min-inline-size: 0; }
.ic-tree[aria-busy="true"]{ opacity: 0.6; pointer-events: none; }
.ic-tree-list{ list-style: none; margin: 0; padding: 0; }
.ic-tree-list .ic-tree-list{ padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--line); margin-inline-start: var(--s-3); }
.ic-tree-list[hidden]{ display: none; }
.ic-tree-item{ border-radius: var(--r-sm); }
.ic-tree-item:focus-visible{ outline: none; }
.ic-tree-item:focus-visible > .ic-tree-row{ outline: 2px solid var(--focus); outline-offset: 0; }
.ic-tree-row{ display: flex; align-items: center; gap: var(--s-2); min-block-size: 40px; padding-inline: var(--s-2); border-radius: var(--r-sm); }
.ic-tree-row:hover{ background: var(--surface-2); }
.ic-tree-label{ flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; color: var(--ink); }
.ic-tree-badge{ flex: none; font-variant-numeric: tabular-nums; }
.ic-tree-menu{ flex: none; }
/* The handle is for a mouse or a finger (keyboard moves are in the item's menu): a 24 × 24 px target. */
.ic-tree-handle{ display: inline-grid; place-items: center; inline-size: 24px; block-size: 24px; flex: none; color: var(--ink-3); cursor: grab; touch-action: none; }
.ic-tree-handle:hover{ color: var(--ink); }
/* SortableJS marks the place an item would land (its ghost) and the item being dragged. */
.ic-tree .sortable-ghost > .ic-tree-row{ background: var(--primary-soft); outline: 1px dashed var(--line-strong); }
.ic-tree .sortable-chosen > .ic-tree-row{ background: var(--surface-2); }

/* ------------------------------------------------------------ media manager (product photos; ic.js `media-manager`: drag with SortableJS) */
.ic-media-list{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.ic-media-item{ border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--s-3); min-inline-size: 0; }
.ic-media-photo{ gap: var(--s-2); }
.ic-media-place{ padding: 0; font-size: var(--t-12); font-weight: 600; color: var(--ink-2); margin-block-end: var(--s-1); }
.ic-upload-current{ display: block; inline-size: 96px; block-size: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.ic-media-thumb{ position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
.ic-media-thumb img{ display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
/* The handle is for a mouse or a finger (keyboard users type the order numbers): a 28 × 28 px target over the picture. */
.ic-media-handle{ position: absolute; inset-block-start: var(--s-1); inset-inline-start: var(--s-1); display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-sm); cursor: grab; touch-action: none; }
.ic-media-handle:hover{ color: var(--ink); }
.ic-media-position{ max-inline-size: 96px; }
.ic-media-list .sortable-ghost{ background: var(--primary-soft); outline: 1px dashed var(--line-strong); }
.ic-media-list .sortable-chosen{ background: var(--surface-2); }

/* ------------------------------------------------------------ inline number edit (a list cell) and the bulk bar's fields */
.ic-inline-number{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.ic-inline-number.is-readonly{ display: inline; font-variant-numeric: tabular-nums; }
.ic-inline-number-current{ min-inline-size: 3ch; text-align: end; font-variant-numeric: tabular-nums; }
.ic-inline-number-input{ inline-size: 96px; font-variant-numeric: tabular-nums; }
.ic-inline-number-error{ flex-basis: 100%; }
.ic-bulkbar-fields{ display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); color: var(--ink); }
.ic-bulkbar-fields .ic-field{ flex-direction: row; align-items: center; gap: var(--s-2); }
.ic-bulkbar-fields .ic-label{ color: var(--ink-inverse); }
.ic-bulkbar .ic-btn[aria-pressed="true"]{ background: color-mix(in oklch, var(--ink-inverse) 20%, transparent); color: var(--ink-inverse); }

/* ------------------------------------------------------------ price preview (Pricing): a refused row is marked at its start, in words in the badge */
.ic-price-preview tr.ic-tone-danger td:first-child{ border-inline-start: 3px solid var(--danger); }
.ic-price-preview .ic-price-new{ font-weight: 600; }
.ic-price-preview .ic-price-same{ color: var(--ink-3); }
.ic-price-preview-count{ padding: var(--s-3) var(--s-5); color: var(--ink-2); font-size: var(--t-13); }

/* ------------------------------------------------------------ band table (shipping prices by weight, order value or items) */
.ic-band-field .ic-table-wrap{ border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ic-band-table th .ic-band-unit{ font-weight: 400; color: var(--ink-3); }
.ic-band-table td{ vertical-align: top; }
.ic-band-cell{ display: flex; align-items: center; gap: var(--s-2); }
.ic-band-cell .ic-input-group, .ic-band-cell > .ic-input{ inline-size: auto; min-inline-size: 7rem; max-inline-size: 11rem; }
.ic-band-above{ color: var(--ink-2); font-size: var(--t-13); white-space: nowrap; }
.ic-band-table td .ic-check{ margin-block-start: var(--s-2); }
.ic-band-row-error td{ padding-block-start: 0; }
.ic-band-row-error .ic-error{ margin-block-start: 0; }

/* ------------------------------------------------------------ permission matrix (role editor): a box per key, its marks beside the line */
.ic-permission-matrix{ display: flex; flex-direction: column; gap: var(--s-4); min-inline-size: 0; }
.ic-permission-matrix:focus{ outline: none; }
.ic-permission-all{ margin: 0; padding-block-end: var(--s-2); border-block-end: 1px solid var(--line); }
.ic-permission-all[hidden]{ display: none; }
.ic-permission-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; }
.ic-permission-key{ min-inline-size: 0; }
.ic-permission-key .ic-choice-title{ font-weight: 400; overflow-wrap: anywhere; }
/* Override mode: one key per row, its line and then Uses the role / Allow / Deny, wrapping on narrow screens. */
.ic-permission-matrix.is-override .ic-permission-list{ grid-template-columns: minmax(0, 1fr); }
.ic-permission-override{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.ic-permission-line{ display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-permission-choices{ display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.ic-permission-choices .ic-choice{ align-items: center; }
.ic-permission-value{ color: var(--ink-2); font-size: var(--t-13); }

/* ------------------------------------------------------------ code editor (e-mail templates): line numbers beside text that does not wrap */
.ic-code-editor{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; inline-size: 100%; }
.ic-code-gutter{
	padding: var(--s-2); min-inline-size: 3ch;
	font-family: var(--font-mono); font-size: var(--t-13); line-height: 1.55;
	color: var(--ink-3); background: var(--surface-2); text-align: end; white-space: pre;
	border: 1px solid var(--line-strong); border-inline-end: 0;
	border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md);
	overflow: hidden; user-select: none;
}
.ic-code-gutter[hidden]{ display: none; }
.ic-code-editor .ic-textarea.ic-code{ white-space: pre; overflow-x: auto; tab-size: 4; }
.ic-code-editor:has(.ic-code-gutter:not([hidden])) .ic-textarea.ic-code{ border-start-start-radius: 0; border-end-start-radius: 0; }
.ic-code-editor:not(:has(.ic-code-gutter:not([hidden]))) .ic-textarea.ic-code{ grid-column: 1 / -1; }
.ic-code-editor .ic-textarea[readonly]{ background: var(--surface-2); }

/* ------------------------------------------------------------ rich text (descriptions, pages): Quill's snow theme in the kit's lines and type */
.ic-richtext{ inline-size: 100%; }
/* The text area is the field until ic.js starts Quill; then the editor shows and the text area only posts. */
.ic-richtext-editor[hidden], .ic-richtext .ic-textarea[hidden]{ display: none; }
.ic-richtext .ql-toolbar.ql-snow{ border-color: var(--line-strong); background: var(--surface-2); border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); }
.ic-richtext .ql-container.ql-snow{ border-color: var(--line-strong); font: inherit; border-end-start-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.ic-richtext .ql-editor{ min-block-size: 12em; font-size: var(--t-14); line-height: 1.55; }
.ic-richtext .ql-editor:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------ switch row (e-mails, languages): a locked row shows its lock and words instead */
.ic-switch-row.is-locked .ic-set-control{ justify-content: center; }

/* ------------------------------------------------------------ help panel and pictures (spec §14b) */
.ic-help-intro{ color: var(--ink); font-size: var(--t-14); line-height: 1.6; }
.ic-video{ display: flex; flex-direction: column; gap: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.ic-video video{ display: block; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--side-bg); }
.ic-video-meta{ display: flex; flex-direction: column; gap: 2px; padding: 0 var(--s-3) var(--s-3); }
.ic-video-meta .ic-subtle{ font-size: var(--t-12); }
.ic-diagram{ margin: 0; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--s-3); }
.ic-diagram figcaption{ font-size: var(--t-12); color: var(--ink-3); text-align: center; }
/* A tag in a help picture may be a whole phrase ("Later, with Stripe Connect …" in Greek): it wraps on a narrow phone instead of running out of the panel. */
.ic-diagram .ic-tag{ white-space: normal; block-size: auto; min-block-size: 22px; padding-block: 2px; max-inline-size: 100%; }
.ic-flow{ display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ic-flow-step{ display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ic-flow-step .ic-subtle{ font-size: var(--t-11); }
.ic-flow-arrow{ color: var(--ink-3); line-height: 0; }
.ic-flow-arrow .ic-icon{ inline-size: 14px; block-size: 14px; }
.ic-flow-side{ display: flex; justify-content: center; padding-block-start: var(--s-2); border-block-start: 1px dashed var(--line-strong); }
.ic-money{ display: flex; flex-direction: column; gap: var(--s-3); }
.ic-money-row{ display: flex; flex-direction: column; gap: 6px; }
.ic-money-title{ font-size: var(--t-12); font-weight: 600; color: var(--ink-2); }
.ic-money-line{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ic-money-node{ padding: 4px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-strong); font-size: var(--t-12); font-weight: 500; }
.ic-money-arrow{ display: inline-flex; flex-direction: column; align-items: center; color: var(--accent-ink); font-size: var(--t-11); }
.ic-money-arrow .ic-icon{ inline-size: 16px; block-size: 16px; transform: scaleX(var(--ic-dir)); }
.ic-taxmap{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.ic-tax-cell{ display: flex; flex-direction: column; gap: 2px; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-12); }
.ic-tax-cell b{ font-size: var(--t-14); }
.ic-tax-cell-brand{ border-color: var(--primary); }
.ic-tax-cell-info{ border-color: color-mix(in oklch, var(--info) 45%, var(--line)); }
.ic-tax-cell-warning{ border-color: color-mix(in oklch, var(--warning) 55%, var(--line)); }
.ic-types{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.ic-type-cell{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--s-3) var(--s-2); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: var(--t-12); text-align: center; }
.ic-type-cell .ic-icon{ color: var(--primary); }
.ic-bar-diagram{ display: flex; block-size: 28px; border-radius: var(--r-md); overflow: hidden; font-size: var(--t-11); font-weight: 600; }
.ic-bar-diagram > div{ display: grid; place-items: center; white-space: nowrap; padding: 0 6px; }
.ic-bar-a{ flex: 6; background: var(--primary-soft); color: var(--primary-soft-ink); }
.ic-bar-b{ flex: 1; background: var(--warning-soft); color: var(--warning-ink); }
.ic-help-steps{ margin: 6px 0 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; }
.ic-faq{ border-block-start: 1px solid var(--line); }
.ic-faq summary{ display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-3) 0; cursor: pointer; font-weight: 500; list-style: none; }
.ic-faq summary::-webkit-details-marker{ display: none; }
.ic-faq summary .ic-icon{ transition: transform var(--dur) var(--ease-out); color: var(--ink-3); }
.ic-faq[open] summary .ic-icon{ transform: rotate(180deg); }
.ic-faq p{ padding-block-end: var(--s-3); color: var(--ink-2); }
.ic-help-foot{ display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap; font-size: var(--t-12); color: var(--ink-3); }
.ic-help-foot-item{ display: inline-flex; align-items: center; gap: 6px; }
.ic-help-foot .ic-icon{ inline-size: 14px; block-size: 14px; }

/* ------------------------------------------------------------ sign-in screens, 2FA, e-mail preview */
.ic-auth{ min-block-size: 100dvh; display: grid; place-items: center; padding: var(--s-6) var(--s-4); background: var(--canvas); }
.ic-auth-card{ inline-size: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.ic-auth-brand{ display: flex; align-items: center; gap: var(--s-3); color: var(--ink); }
.ic-auth-brand .ic-logo{ block-size: 20px; inline-size: auto; }
.ic-auth-brand b{ font-family: var(--font-display); font-weight: 600; padding-inline-start: var(--s-3); border-inline-start: 1px solid var(--line-strong); }
.ic-auth-card h1{ font-size: var(--t-20); }
/* On the sign-in card the action is the one thing to do: it spans the card. */
.ic-auth-card .ic-form-actions{ padding-block: 0; }
.ic-auth-card .ic-form-actions .ic-btn{ flex: 1; }
.ic-auth-links{ display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-13); flex-wrap: wrap; }
.ic-qr{ max-inline-size: 16rem; }
.ic-qr svg{ display: block; inline-size: 100%; block-size: auto; }
.ic-codes{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.ic-codes code{ display: block; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); text-align: center; letter-spacing: 0.08em; }
.ic-preview-frame{ display: block; inline-size: 100%; block-size: 600px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ic-pre{ margin: 0; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--t-12); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ page blocks: settings hub, checklist, attention list, notification choices */
.ic-hub{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); align-items: start; }
.ic-hub-section{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-inline-size: 0; }
.ic-hub-title{ font-size: var(--t-14); padding: var(--s-4) var(--s-5) 0; }
.ic-hub-links{ list-style: none; margin: 0; padding: var(--s-2); display: flex; flex-direction: column; }
.ic-hub-link{ display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); color: var(--ink); text-decoration: none; }
.ic-hub-link:hover{ background: var(--surface-2); text-decoration: none; }
.ic-hub-icon{ inline-size: 34px; block-size: 34px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary-soft-ink); }
.ic-hub-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-hub-name{ font-weight: 500; }
.ic-hub-desc{ font-size: var(--t-13); color: var(--ink-2); }
.ic-hub-arrow{ display: inline-flex; flex: none; color: var(--ink-3); }
.ic-hub-arrow .ic-icon{ transform: scaleX(var(--ic-dir)); }
.ic-checklist{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ic-checklist-row{ display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); }
.ic-checklist-row:first-child{ border-block-start: 0; }
.ic-step-dot{ inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
.ic-checklist-row.is-done .ic-step-dot{ background: var(--primary); border: 0; color: var(--on-primary); }
.ic-step-dot .ic-icon{ inline-size: 12px; block-size: 12px; stroke-width: 2.5; }
.ic-checklist-text{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-checklist-title{ font-weight: 500; }
.ic-checklist-row.is-done .ic-checklist-title{ color: var(--ink-2); }
.ic-checklist-desc{ font-size: var(--t-13); color: var(--ink-3); }
.ic-checklist-action{ flex: none; }
.ic-attention-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ic-attention-row{ display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); }
.ic-attention-row:first-child{ border-block-start: 0; }
.ic-attention-icon{ inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-3); color: var(--ink-2); }
.ic-attention-icon.is-info{ background: var(--info-soft); color: var(--info-ink); }
.ic-attention-icon.is-success{ background: var(--success-soft); color: var(--success-ink); }
.ic-attention-icon.is-warning{ background: var(--warning-soft); color: var(--warning-ink); }
.ic-attention-icon.is-danger{ background: var(--danger-soft); color: var(--danger-ink); }
.ic-attention-icon.is-brand{ background: var(--primary-soft); color: var(--primary-soft-ink); }
.ic-attention-icon.is-accent{ background: var(--accent-soft); color: var(--accent-ink); }
.ic-attention-text{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-attention-title{ font-weight: 600; }
.ic-attention-detail{ font-size: var(--t-12); color: var(--ink-3); }
.ic-attention-more{ padding: var(--s-3) var(--s-5); border-block-start: 1px solid var(--line); font-size: var(--t-13); color: var(--ink-2); }
.ic-attention-more a{ font-weight: 500; }
.ic-timeline-block{ display: flex; flex-direction: column; gap: var(--s-4); }
.ic-timeline{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ic-timeline-item{ position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: var(--s-3); padding-block-end: var(--s-4); }
.ic-timeline-item:last-child{ padding-block-end: 0; }
.ic-timeline-item:not(:last-child)::before{ content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 14px; inset-block-end: 0; inline-size: 1px; background: var(--line); }
.ic-timeline-dot{ inline-size: 11px; block-size: 11px; margin-block-start: 4px; border-radius: 50%; background: var(--ink-3); }
.ic-timeline-item.ic-tone-info .ic-timeline-dot{ background: var(--info-ink); }
.ic-timeline-item.ic-tone-success .ic-timeline-dot{ background: var(--success-ink); }
.ic-timeline-item.ic-tone-warning .ic-timeline-dot{ background: var(--warning-ink); }
.ic-timeline-item.ic-tone-danger .ic-timeline-dot{ background: var(--danger-ink); }
.ic-timeline-item.ic-tone-brand .ic-timeline-dot{ background: var(--primary); }
.ic-timeline-item.ic-tone-accent .ic-timeline-dot{ background: var(--accent-ink); }
.ic-timeline-body{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-timeline-title{ font-weight: 500; }
.ic-timeline-detail{ font-size: var(--t-13); color: var(--ink-2); }
.ic-timeline-meta{ display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-12); color: var(--ink-3); }
.ic-timeline-empty{ margin: 0; font-size: var(--t-13); color: var(--ink-3); }
/* The message thread: the other side's messages at the start, one's own at the end in the primary's soft fill; the body keeps its line breaks and breaks a long word anywhere. */
.ic-thread-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.ic-message{ display: flex; flex-direction: column; gap: var(--s-2); max-inline-size: min(100%, 640px); align-self: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); min-inline-size: 0; }
.ic-message.is-own{ align-self: flex-end; background: var(--primary-soft); border-color: transparent; }
.ic-message-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font-size: var(--t-12); color: var(--ink-3); min-inline-size: 0; }
.ic-message-author{ font-size: var(--t-13); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ic-message-you, .ic-message-side{ font-weight: 500; color: var(--ink-2); }
.ic-message-body{ margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.ic-message-files{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ic-message-image{ display: block; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.ic-message-image:focus-visible, .ic-message-file:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.ic-message-thumb{ display: block; inline-size: 96px; block-size: 96px; object-fit: cover; }
.ic-message-file{ display: inline-flex; align-items: center; gap: var(--s-2); max-inline-size: 100%; padding: var(--s-1) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: var(--t-13); text-decoration: none; }
.ic-message-file:hover{ border-color: var(--line-strong); }
.ic-message-file-name{ overflow-wrap: anywhere; min-inline-size: 0; }
.ic-message-file-size{ flex: none; color: var(--ink-3); font-size: var(--t-12); }
.ic-thread-empty{ margin: 0; font-size: var(--t-13); color: var(--ink-3); }
.ic-line-items{ inline-size: 100%; border-collapse: collapse; }
.ic-line-items th{ text-align: start; font-size: var(--t-12); font-weight: 500; color: var(--ink-2); padding: var(--s-2) var(--s-3); border-block-end: 1px solid var(--line); }
.ic-line-items td{ padding: var(--s-3); border-block-end: 1px solid var(--line); vertical-align: top; }
.ic-line-items tbody tr:last-child td{ border-block-end: 0; }
.ic-line-items .ic-line-num{ text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ic-line-product{ min-inline-size: 0; overflow-wrap: anywhere; }
.ic-line-name{ display: block; font-weight: 500; }
.ic-line-meta{ display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-12); color: var(--ink-3); }
.ic-line-sub{ display: block; font-size: var(--t-12); color: var(--ink-3); }
.ic-line-refunded{ color: var(--danger-ink); }
.ic-line-total{ font-weight: 500; }
.ic-totals{ display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.ic-totals-row{ display: flex; justify-content: space-between; gap: var(--s-4); }
.ic-totals-row dt{ color: var(--ink-2); }
.ic-totals-row dd{ margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-totals-row.is-muted dt, .ic-totals-row.is-muted dd{ color: var(--ink-3); font-size: var(--t-13); }
.ic-totals-grand{ padding-block-start: var(--s-2); border-block-start: 1px solid var(--line); font-weight: 600; }
.ic-totals-grand dt{ color: var(--ink); }
.ic-avatar-stack{ display: inline-flex; align-items: center; }
.ic-avatar-stack .ic-avatar{ border: 2px solid var(--surface); }
.ic-avatar-stack .ic-avatar + .ic-avatar{ margin-inline-start: -6px; }
.ic-avatar-more{ background: var(--surface-3); color: var(--ink-2); }
.ic-choice-group{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); min-inline-size: 0; }
.ic-choice-group + .ic-choice-group{ margin-block-start: var(--s-4); }
.ic-choice-head, .ic-choice-row{ display: grid; grid-template-columns: minmax(0, 1fr) 72px 72px; gap: var(--s-4); align-items: center; padding: var(--s-3) var(--s-5); }
.ic-choice-head{ border-block-end: 1px solid var(--line); }
.ic-choice-head h2{ font-size: var(--t-14); }
.ic-choice-col{ display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--t-12); color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.ic-choice-row + .ic-choice-row{ border-block-start: 1px solid var(--line); }
.ic-choice-about{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }
.ic-choice-name{ font-weight: 500; display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ic-choice-desc{ font-size: var(--t-13); color: var(--ink-2); max-inline-size: 64ch; }
.ic-choice-cell{ display: flex; justify-content: center; }
.ic-lock-note{ display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-12); color: var(--ink-3); font-weight: 500; white-space: nowrap; }
.ic-lock-note .ic-icon{ inline-size: 13px; block-size: 13px; }
/* ------------------------------------------------------------ the component gallery (development and staging only) */
.ic-gallery{ display: flex; flex-direction: column; gap: var(--s-8); }
.ic-gallery-nav{ display: flex; gap: var(--s-2); flex-wrap: wrap; }
.ic-gallery-section{ display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-block-start: 80px; }
.ic-gallery-section > header p{ color: var(--ink-2); font-size: var(--t-13); max-inline-size: 70ch; }
/* A phone-wide frame for samples that change on a narrow screen (the chart). */
.ic-gallery-phone{ inline-size: 100%; max-inline-size: 375px; }
.ic-gallery-row{ display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ic-gallery-caption{ font-size: var(--t-12); color: var(--ink-3); font-family: var(--font-mono); }
.ic-gallery-icons{ display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--s-2); }
.ic-gallery-icon{ display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2); border-radius: var(--r-md); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-11); text-align: center; }

/* ------------------------------------------------------------ page-loading motion (Phase 9a, spec §3.4; ic.js `page-motion`)
   ic.js adds .ic-entering to <main> on arrival (for 1.4 s): its blocks rise 55 ms apart and the first 14
   table rows follow 28 ms apart from 120 ms. A click on a page link adds .ic-leaving: the old page hides
   behind a copy of the outline from <template id="ic-page-outline">. Without the script nothing here
   applies, so every page is complete as served; the delays are this fixed set of rules (no inline styles). */
@keyframes ic-page-rise{ from{ opacity: 0.55; transform: translateY(12px); } }
@keyframes ic-page-row{ from{ opacity: 0.4; transform: translateY(6px); } }
@keyframes ic-page-shimmer{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }
.ic-entering > *{ animation: ic-page-rise var(--dur-page) var(--ease-page) both; }
.ic-entering > :nth-child(1){ animation-delay: 0ms; }
.ic-entering > :nth-child(2){ animation-delay: 55ms; }
.ic-entering > :nth-child(3){ animation-delay: 110ms; }
.ic-entering > :nth-child(4){ animation-delay: 165ms; }
.ic-entering > :nth-child(5){ animation-delay: 220ms; }
.ic-entering > :nth-child(6){ animation-delay: 275ms; }
.ic-entering > :nth-child(7){ animation-delay: 330ms; }
.ic-entering > :nth-child(8){ animation-delay: 385ms; }
.ic-entering > :nth-child(9){ animation-delay: 440ms; }
.ic-entering > :nth-child(10){ animation-delay: 495ms; }
.ic-entering > :nth-child(n+11){ animation-delay: 550ms; }
.ic-entering .ic-table tbody tr:nth-child(-n+14){ animation: ic-page-row var(--dur-page-row) var(--ease-page) both; }
.ic-entering .ic-table tbody tr:nth-child(1){ animation-delay: 120ms; }
.ic-entering .ic-table tbody tr:nth-child(2){ animation-delay: 148ms; }
.ic-entering .ic-table tbody tr:nth-child(3){ animation-delay: 176ms; }
.ic-entering .ic-table tbody tr:nth-child(4){ animation-delay: 204ms; }
.ic-entering .ic-table tbody tr:nth-child(5){ animation-delay: 232ms; }
.ic-entering .ic-table tbody tr:nth-child(6){ animation-delay: 260ms; }
.ic-entering .ic-table tbody tr:nth-child(7){ animation-delay: 288ms; }
.ic-entering .ic-table tbody tr:nth-child(8){ animation-delay: 316ms; }
.ic-entering .ic-table tbody tr:nth-child(9){ animation-delay: 344ms; }
.ic-entering .ic-table tbody tr:nth-child(10){ animation-delay: 372ms; }
.ic-entering .ic-table tbody tr:nth-child(11){ animation-delay: 400ms; }
.ic-entering .ic-table tbody tr:nth-child(12){ animation-delay: 428ms; }
.ic-entering .ic-table tbody tr:nth-child(13){ animation-delay: 456ms; }
.ic-entering .ic-table tbody tr:nth-child(14){ animation-delay: 484ms; }
.ic-leaving > :not(.ic-page-outline){ display: none; }
.ic-page-outline, .ic-outline-sample{ display: flex; flex-direction: column; gap: var(--s-6); }
.ic-outline-head{ display: flex; flex-direction: column; gap: var(--s-2); }
.ic-outline-card{ display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.ic-outline-split{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.ic-outline-bar{ display: block; inline-size: 100%; block-size: 18px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-3) 0%, color-mix(in oklch, var(--surface-3) 40%, var(--surface)) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: ic-page-shimmer var(--dur-shimmer) ease-in-out infinite; }
.ic-outline-title{ inline-size: 220px; max-inline-size: 80%; block-size: 26px; }
.ic-outline-subtitle{ inline-size: 460px; max-inline-size: 80%; block-size: 14px; }
.ic-outline-heading{ block-size: 16px; }
.ic-outline-row{ block-size: 40px; }
.ic-outline-box{ block-size: 64px; }
.ic-outline-w92{ inline-size: 92%; }
.ic-outline-w64{ inline-size: 64%; }
.ic-outline-w50{ inline-size: 50%; }
.ic-outline-w40{ inline-size: 40%; }

/* ------------------------------------------------------------ small screens and reduced motion */
@media (max-width: 1180px){
	.ic-columns-main{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px){
	.ic-outline-split{ grid-template-columns: minmax(0, 1fr); }
	.ic-settings{ grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
	.ic-subnav{ position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
	.ic-subnav-label{ display: none; }
	.ic-subnav a{ min-block-size: 32px; border: 1px solid var(--line); background: var(--surface); }
	.ic-subnav a[aria-current="page"]{ border-color: var(--primary); background: var(--primary-soft); color: var(--primary-soft-ink); }
}
@media (max-width: 720px){
	.ic-columns-2, .ic-columns-3{ grid-template-columns: minmax(0, 1fr); }
	/* Number tiles two by two; a row of three puts its last tile across both columns. */
	.ic-metric-row-2, .ic-metric-row-3, .ic-metric-row-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ic-metric-row-3 > .ic-metric:last-child{ grid-column: 1 / -1; }
	.ic-metric-row > .ic-metric + .ic-metric{ border-inline-start: 0; }
	.ic-metric-row > .ic-metric:nth-child(2n){ border-inline-start: 1px solid var(--line); }
	.ic-metric-row > .ic-metric:nth-child(n+3){ border-block-start: 1px solid var(--line); }
	.ic-card-head, .ic-card-foot, .ic-toolbar, .ic-filters, .ic-pagination, .ic-set-row{ padding-inline: var(--s-4); }
	.ic-filters .ic-field, .ic-filters .ic-filter-search{ flex: 1 1 100%; max-inline-size: none; }
	.ic-filters .ic-filter-date{ flex: 1 1 40%; }
	.ic-card-body{ --ic-dock-gutter: var(--s-4); padding: var(--s-4); }
	.ic-card-body-flush{ --ic-dock-gutter: initial; padding: 0; }
	.ic-field.ic-set-row, .ic-set-row{ grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
	.ic-kv{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.ic-kv dd{ margin-block-end: 6px; }
	.ic-drawer-panel{ inline-size: 100vw; }
	.ic-input, select.ic-select, .ic-textarea, .ic-search-input{ font-size: 16px; }
	/* The search shrinks to its icon; the bell's panel spans the screen under the bar. */
	.ic-search:not(.is-sample){ flex: 0 0 auto; }
	.ic-search:not(.is-sample) .ic-search-trigger{ inline-size: var(--h-md); padding: 0; justify-content: center; }
	.ic-search:not(.is-sample) .ic-search-trigger-text, .ic-search:not(.is-sample) .ic-kbd{ display: none; }
	.ic-bell:not(.is-sample) .ic-bell-panel{ position: fixed; inset-block-start: calc(56px + env(safe-area-inset-top, 0px)); inset-inline: 12px; inline-size: auto; }
	.ic-btn{ --btn-h: 40px; }
	.ic-btn-sm{ --btn-h: 34px; }
	/* The attention row's button moves under its text; the notification columns narrow. */
	.ic-checklist-row, .ic-attention-row, .ic-attention-more{ padding-inline: var(--s-4); }
	.ic-attention-row{ grid-template-columns: 32px minmax(0, 1fr); }
	.ic-attention-row > .ic-btn{ grid-column: 2; justify-self: start; }
	.ic-choice-head, .ic-choice-row{ grid-template-columns: minmax(0, 1fr) 52px 52px; gap: var(--s-2); padding-inline: var(--s-4); }
	.ic-choice-col .ic-icon{ display: none; }
}
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{ animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
	/* ic.js adds no page motion then; should a class still be there, nothing waits on a delay or shimmers. */
	.ic-entering > *, .ic-entering .ic-table tbody tr, .ic-outline-bar{ animation: none !important; }
}