.
- */
-.iw-table-wrap {
- overflow-x: auto;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
-}
-
-.iw-table {
- width: 100%;
- border-collapse: collapse;
- font-size: var(--font-size-body-compact);
-}
-
-.iw-table caption {
- padding: var(--space-dense);
- text-align: start;
- font-size: var(--font-size-label-dense);
- font-weight: var(--font-weight-label-dense);
- color: var(--text-secondary);
-}
-
-.iw-table th,
-.iw-table td {
- padding: var(--space-compact) var(--space-dense);
- text-align: start;
- vertical-align: baseline;
- border-block-end: var(--edge-boundary-essential) solid var(--rule-subtle);
-}
-
-.iw-table thead th {
- height: var(--target-compact-row);
- background: var(--surface-grouped);
- border-block-end: var(--edge-boundary-essential) solid var(--border-essential);
- font-size: var(--font-size-label-dense);
- font-weight: var(--font-weight-label-dense);
- white-space: nowrap;
- position: sticky;
- top: 0;
- z-index: 1;
-}
-
-.iw-table tbody tr {
- height: var(--iw-row-height);
-}
-
-.iw-table tbody tr:hover {
- background: var(--surface-hover);
-}
-
-.iw-table tbody tr:last-child td {
- border-block-end: none;
-}
-
-/* Numeric and date columns keep stable alignment across rows. */
-.iw-table [data-numeric] {
- font-variant-numeric: tabular-nums;
- text-align: right;
- white-space: nowrap;
-}
-
-/*
- * Selected row: identity edge plus a checked control. The row is never
- * identified by background colour alone.
- */
-.iw-table tbody tr[aria-selected="true"] {
- background: var(--surface-grouped);
- box-shadow: inset var(--edge-state-emphasis) 0 0 0 var(--identity);
-}
-
-/* Sortable header button sits inside the th and keeps native semantics. */
-.iw-sort {
- display: inline-flex;
- align-items: center;
- gap: var(--space-detail);
- padding: var(--space-detail) 0;
- border: none;
- background: none;
- color: inherit;
- font: inherit;
- font-weight: var(--font-weight-label-dense);
- cursor: pointer;
-}
-
-.iw-sort::after {
- content: "\2195";
- font-family: var(--font-data);
- color: var(--text-secondary);
-}
-
-th[aria-sort="ascending"] .iw-sort::after {
- content: "\2191";
- color: var(--text-primary);
-}
-
-th[aria-sort="descending"] .iw-sort::after {
- content: "\2193";
- color: var(--text-primary);
-}
-
-/* ==========================================================================
- 8. Status, priority, and badges
- ========================================================================== */
-
-/*
- * State is carried by the text label. The marker adds a second, non-colour
- * channel so status survives greyscale and forced-colors.
- */
-.iw-status {
- display: inline-flex;
- align-items: baseline;
- gap: var(--space-detail);
- font-size: var(--font-size-label-dense);
- font-weight: var(--font-weight-label-dense);
- white-space: nowrap;
-}
-
-.iw-status::before {
- content: "\25A1";
- font-family: var(--font-data);
-}
-
-.iw-status[data-state="ready"]::before {
- content: "\25A0";
- color: var(--success);
-}
-
-.iw-status[data-state="in-progress"]::before {
- content: "\25D0";
- color: var(--identity);
-}
-
-.iw-status[data-state="at-risk"]::before {
- content: "\25B2";
- color: var(--warning);
-}
-
-.iw-status[data-state="blocked"]::before {
- content: "\2715";
- color: var(--danger);
-}
-
-.iw-status[data-state="complete"]::before {
- content: "\2713";
- color: var(--success);
-}
-
-/* Priority uses a monospaced code so P0…P3 align down a column. */
-.iw-priority {
- display: inline-flex;
- align-items: baseline;
- gap: var(--space-detail);
- font-family: var(--font-data);
- font-size: var(--font-size-label-dense);
- font-weight: var(--font-weight-label-dense);
- white-space: nowrap;
-}
-
-.iw-priority::before {
- content: "\2014\2014\2014";
- letter-spacing: -0.15em;
- color: var(--rule-subtle);
-}
-
-.iw-priority[data-priority="p0"]::before {
- content: "\2588\2588\2588";
- letter-spacing: 0;
- color: var(--danger);
-}
-
-.iw-priority[data-priority="p1"]::before {
- content: "\2588\2588\2014";
- letter-spacing: 0;
- color: var(--warning);
-}
-
-.iw-priority[data-priority="p2"]::before {
- content: "\2588\2014\2014";
- letter-spacing: 0;
- color: var(--text-secondary);
-}
-
-.iw-badge {
- display: inline-flex;
- align-items: center;
- gap: var(--space-detail);
- padding: 0 var(--space-compact);
- min-height: var(--target-minimum);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- background: var(--surface-grouped);
- font-size: var(--font-size-caption);
- font-weight: var(--font-weight-label-dense);
- white-space: nowrap;
-}
-
-.iw-badge--identity {
- border-color: var(--identity);
- border-inline-start-width: var(--edge-state-emphasis);
-}
-
-/* ==========================================================================
- 9. Callouts
- ========================================================================== */
-
-/*
- * Callouts sit on Surface 1 so the coloured title text keeps its verified
- * contrast ratio. The left edge and the title word carry the meaning together.
- */
-.iw-callout {
- display: grid;
- align-content: start;
- gap: var(--space-detail);
- padding: var(--space-dense) var(--space-standard);
- background: var(--surface-primary);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-inline-start-width: var(--edge-state-emphasis);
- border-radius: var(--edge-radius-authored);
-}
-
-.iw-callout > p {
- margin: 0;
-}
-
-.iw-callout-title {
- margin: 0;
- font-size: var(--font-size-label-dense);
- line-height: var(--line-height-label-dense);
- font-weight: var(--font-weight-title);
-}
-
-.iw-callout--warning {
- border-inline-start-color: var(--warning);
-}
-
-.iw-callout--warning .iw-callout-title {
- color: var(--warning);
-}
-
-.iw-callout--danger {
- border-inline-start-color: var(--danger);
-}
-
-.iw-callout--danger .iw-callout-title {
- color: var(--danger);
-}
-
-.iw-callout--success {
- border-inline-start-color: var(--success);
-}
-
-.iw-callout--success .iw-callout-title {
- color: var(--success);
-}
-
-.iw-callout--identity {
- border-inline-start-color: var(--identity);
-}
-
-/* ==========================================================================
- 10. Navigation
- ========================================================================== */
-
-.iw-nav {
- display: grid;
- gap: var(--space-detail);
-}
-
-.iw-nav ul {
- list-style: none;
- margin: 0;
- padding: 0;
- display: grid;
- gap: var(--space-detail);
-}
-
-.iw-nav a {
- display: flex;
- align-items: center;
- min-height: var(--iw-control-height);
- padding: var(--space-compact) var(--space-dense);
- border-inline-start: var(--edge-state-emphasis) solid transparent;
- color: var(--text-primary);
- text-decoration: none;
-}
-
-.iw-nav a:hover {
- background: var(--surface-hover);
-}
-
-/* Current position: identity edge plus a weight change, never colour alone. */
-.iw-nav a[aria-current] {
- border-inline-start-color: var(--identity);
- background: var(--surface-grouped);
- font-weight: var(--font-weight-title);
-}
-
-.iw-breadcrumb {
- font-size: var(--font-size-label-dense);
- color: var(--text-secondary);
-}
-
-.iw-breadcrumb ol {
- list-style: none;
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-compact);
- margin: 0;
- padding: 0;
-}
-
-.iw-breadcrumb li + li::before {
- content: "/";
- margin-inline-end: var(--space-compact);
- color: var(--rule-subtle);
-}
-
-.iw-breadcrumb a {
- color: inherit;
-}
-
-.iw-breadcrumb [aria-current] {
- color: var(--text-primary);
- font-weight: var(--font-weight-emphasis);
-}
-
-/* Tabs. Use with role="tablist" and native buttons. */
-.iw-tabs {
- display: flex;
- flex-wrap: wrap;
- gap: 0;
- border-block-end: var(--edge-boundary-essential) solid var(--border-essential);
-}
-
-.iw-tab {
- min-height: var(--iw-control-height);
- padding: var(--space-compact) var(--space-standard);
- border: none;
- border-block-end: var(--edge-state-emphasis) solid transparent;
- background: none;
- color: var(--text-secondary);
- font: inherit;
- font-size: var(--font-size-body-compact);
- font-weight: var(--font-weight-emphasis);
- cursor: pointer;
-}
-
-.iw-tab:hover {
- color: var(--text-primary);
- background: var(--surface-hover);
-}
-
-.iw-tab[aria-selected="true"] {
- color: var(--text-primary);
- border-block-end-color: var(--identity);
- font-weight: var(--font-weight-title);
-}
-
-/* ==========================================================================
- 11. Dialog
- ========================================================================== */
-
-.iw-dialog {
- padding: 0;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- background: var(--surface-primary);
- color: var(--text-primary);
- max-width: min(560px, calc(100vw - var(--space-section)));
- font-family: var(--font-interface);
-}
-
-.iw-dialog::backdrop {
- background: rgb(0 0 0 / 0.55);
-}
-
-.iw-dialog-header,
-.iw-dialog-footer {
- padding: var(--space-standard);
-}
-
-.iw-dialog-header {
- border-block-end: var(--edge-boundary-essential) solid var(--rule-subtle);
-}
-
-.iw-dialog-body {
- padding: var(--space-standard);
- display: grid;
- gap: var(--space-standard);
-}
-
-.iw-dialog-footer {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-compact);
- justify-content: flex-end;
- border-block-start: var(--edge-boundary-essential) solid var(--rule-subtle);
-}
-
-/* ==========================================================================
- 12. Feedback and progression
- ========================================================================== */
-
-/* Live status region. Pair with role="status" and aria-live="polite". */
-.iw-live {
- margin: 0;
- padding: var(--space-compact) var(--space-dense);
- background: var(--surface-grouped);
- border-inline-start: var(--edge-state-emphasis) solid var(--identity);
- border-radius: var(--edge-radius-authored);
- font-size: var(--font-size-body-compact);
-}
-
-.iw-empty {
- display: grid;
- gap: var(--space-compact);
- justify-items: start;
- padding: var(--space-section) var(--space-standard);
- border: var(--edge-boundary-essential) dashed var(--border-essential);
- border-radius: var(--edge-radius-authored);
-}
-
-/* Bulk action bar for a filtered result. */
-.iw-bulk-bar {
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-compact);
- align-items: center;
- padding: var(--space-compact) var(--space-dense);
- background: var(--surface-grouped);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- font-size: var(--font-size-body-compact);
-}
-
-/*
- * Signature: calibrated indexing applied to progression. Each step shows a real
- * position in a real sequence.
- */
-.iw-steps {
- list-style: none;
- display: flex;
- flex-wrap: wrap;
- gap: var(--space-standard);
- margin: 0;
- padding: 0;
- font-size: var(--font-size-label-dense);
-}
-
-.iw-steps li {
- display: flex;
- align-items: baseline;
- gap: var(--space-compact);
- padding-block-end: var(--space-compact);
- border-block-end: var(--edge-state-emphasis) solid var(--rule-subtle);
- color: var(--text-secondary);
-}
-
-.iw-steps li::before {
- content: attr(data-step);
- font-family: var(--font-data);
- font-variant-numeric: tabular-nums;
-}
-
-.iw-steps li[aria-current] {
- color: var(--text-primary);
- border-block-end-color: var(--identity);
- font-weight: var(--font-weight-title);
-}
-
-.iw-steps li[data-complete] {
- color: var(--text-primary);
- border-block-end-color: var(--success);
-}
-
-/* Determinate meter tied to a stated quantity. */
-.iw-meter {
- display: grid;
- gap: var(--space-detail);
-}
-
-.iw-meter-track {
- height: var(--space-compact);
- background: var(--surface-grouped);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- overflow: hidden;
-}
-
-.iw-meter-fill {
- height: 100%;
- background: var(--identity);
-}
-
-/* ==========================================================================
- 13. Catalog components (C36-C79)
- ==========================================================================
- The classes below cover the components admitted on platform convention.
- Each one styles a native control or a plain container around one: the
- behaviour stays with the platform, only the appearance is ours.
- ========================================================================== */
-
-/* C37 Divider with an optional label. A rule that says what it separates. */
-.iw-divider {
- display: grid;
- grid-template-columns: auto 1fr;
- align-items: center;
- gap: var(--space-compact);
- margin-block: var(--space-standard);
- font-size: var(--font-size-label-dense);
- color: var(--text-secondary);
-}
-
-.iw-divider::after {
- content: "";
- height: var(--edge-boundary-essential);
- background: var(--rule-subtle);
-}
-
-/* C38 Card. A surface that carries one subject and its actions. */
-.iw-card {
- display: grid;
- gap: var(--space-compact);
- padding: var(--space-standard);
- background: var(--surface-primary);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
-}
-
-.iw-card-title {
- margin: 0;
- font-size: var(--font-size-section-title);
- font-weight: var(--font-weight-title);
-}
-
-/* C39 Avatar. Initials by default; an image only when one exists. */
-.iw-avatar {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- inline-size: var(--iw-avatar-size, 2rem);
- block-size: var(--iw-avatar-size, 2rem);
- border-radius: 50%;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- background: var(--surface-grouped);
- font-size: var(--font-size-label-dense);
- font-weight: var(--font-weight-title);
-}
-
-.iw-identity-row {
- display: flex;
- align-items: center;
- gap: var(--space-compact);
-}
-
-/* C40 Skeleton. A placeholder with the shape of the content it waits for. */
-.iw-skeleton {
- display: block;
- block-size: var(--space-standard);
- background: var(--surface-grouped);
- border: var(--edge-boundary-essential) solid var(--rule-subtle);
- border-radius: var(--edge-radius-authored);
-}
-
-.iw-skeleton + .iw-skeleton {
- margin-block-start: var(--space-compact);
-}
-
-/* C41 Tag. A user-applied label, removable where the user applied it. */
-.iw-tag {
- display: inline-flex;
- align-items: center;
- gap: var(--space-detail);
- padding: 0 var(--space-compact);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- background: var(--surface-grouped);
- font-size: var(--font-size-label-dense);
-}
-
-/* C42 Tooltip and C66 shortcut hint. Supporting text, never the only route. */
-.iw-kbd {
- font-family: var(--font-data);
- font-size: var(--font-size-label-dense);
- padding: 0 var(--space-detail);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- background: var(--surface-grouped);
-}
-
-.iw-shortcut-row {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- gap: var(--space-compact);
- align-items: baseline;
-}
-
-/* C67 Icon. Sized from the icon scale rather than from the text around it, and
- coloured by inheritance so it follows every contrast decision already made for
- that text. The inline size is a floor: dense contexts keep it instead of
- shrinking, because the drawings stop resolving before the type does. */
-.iw-icon {
- inline-size: var(--icon-size-inline);
- block-size: var(--icon-size-inline);
- vertical-align: -0.125em;
- flex: none;
-}
-
-.iw-icon--standard {
- inline-size: var(--icon-size-standard);
- block-size: var(--icon-size-standard);
-}
-
-.iw-icon--prominent {
- inline-size: var(--icon-size-prominent);
- block-size: var(--icon-size-prominent);
-}
-
-/* C68 Image or thumbnail. The frame holds its ratio before the image arrives. */
-.iw-figure {
- margin: 0;
- display: grid;
- gap: var(--space-detail);
- max-inline-size: 30rem;
-}
-
-.iw-figure-frame {
- aspect-ratio: 16 / 9;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- background: var(--surface-grouped);
- overflow: hidden;
-}
-
-.iw-figure-frame > img {
- inline-size: 100%;
- block-size: 100%;
- object-fit: cover;
- display: block;
-}
-
-/* C69 Count badge. The number is decoration here; the host carries it in words. */
-.iw-count-host {
- display: inline-flex;
- align-items: center;
- gap: var(--space-detail);
-}
-
-.iw-count {
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: 1em;
- padding: 0 0.4em;
- font-family: var(--font-data);
- font-size: var(--font-size-label-dense);
-}
-
-/* C70 Metric tile. One quantity, its period, and how it moved. */
-.iw-metrics {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--iw-metric-min, 14rem)), 1fr));
- gap: var(--space-compact);
-}
-
-.iw-metric {
- margin: 0;
- display: grid;
- gap: var(--space-detail);
- padding: var(--space-compact);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- min-inline-size: 0;
-}
-
-.iw-metric-label {
- color: var(--text-secondary);
- font-size: var(--font-size-label-dense);
-}
-
-.iw-metric-value {
- margin: 0;
- font-family: var(--font-data);
- font-size: var(--font-size-heading);
-}
-
-.iw-metric-period {
- margin: 0;
- color: var(--text-secondary);
- font-size: var(--font-size-label-dense);
-}
-
-/* C71 Sparkline. One ink, no axes, and the numbers live in the text beside it. */
-.iw-sparkline {
- inline-size: 100%;
- block-size: 2rem;
- color: var(--text-primary);
-}
-
-/* C72 Bar comparison. A table of labelled numbers; the bars are length only. */
-.iw-comparison {
- inline-size: 100%;
- border-collapse: collapse;
-}
-
-.iw-comparison caption {
- text-align: start;
- color: var(--text-secondary);
- padding-block-end: var(--space-detail);
-}
-
-.iw-comparison th,
-.iw-comparison td {
- padding: var(--space-detail) var(--space-compact);
- text-align: start;
- font-weight: inherit;
-}
-
-.iw-comparison td {
- font-family: var(--font-data);
-}
-
-.iw-bar {
- display: block;
- block-size: 0.5rem;
- inline-size: var(--iw-bar-length, 0%);
- background: var(--text-primary);
- margin-block-end: var(--space-detail);
-}
-
-/* C43 Slider. The native range plus the value it stands for, as text. */
-.iw-range {
- inline-size: 100%;
- max-inline-size: 22rem;
- accent-color: var(--identity);
-}
-
-/* C47/C48 Combo box and multi-select. Native list semantics, our spacing. */
-.iw-option-list {
- list-style: none;
- margin: 0;
- padding: var(--space-compact);
- display: grid;
- gap: var(--space-compact);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- background: var(--surface-primary);
-}
-
-/* C50 Segmented control. One row of radios that behaves as one control. */
-.iw-segmented {
- display: inline-flex;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- overflow: hidden;
-}
-
-.iw-segmented label {
- padding: var(--space-compact) var(--space-dense);
- font-size: var(--font-size-label-dense);
- border-inline-start: var(--edge-boundary-essential) solid var(--border-essential);
-}
-
-.iw-segmented label:first-of-type {
- border-inline-start: 0;
-}
-
-.iw-segmented input {
- position: absolute;
- opacity: 0;
- pointer-events: none;
-}
-
-.iw-segmented label:has(input:checked) {
- background: var(--identity);
- color: var(--identity-ink);
- font-weight: var(--font-weight-title);
-}
-
-.iw-segmented label:has(input:focus-visible) {
- outline: var(--edge-focus-ring) solid var(--focus-ring);
- outline-offset: calc(var(--edge-focus-ring) * -1);
-}
-
-/* C52 Tree view. Structure carried by indentation and expanded state. */
-.iw-tree,
-.iw-tree ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.iw-tree ul {
- padding-inline-start: var(--space-standard);
- border-inline-start: var(--edge-boundary-essential) solid var(--rule-subtle);
- margin-inline-start: var(--space-compact);
-}
-
-.iw-tree [role="treeitem"] > span {
- display: inline-block;
- padding: var(--space-detail) 0;
-}
-
-/* C55/C56 Progress and activity. Every wait names what it is waiting for. */
-.iw-progress {
- inline-size: 100%;
- max-inline-size: 22rem;
- block-size: var(--space-compact);
- accent-color: var(--identity);
-}
-
-.iw-activity {
- display: flex;
- align-items: center;
- gap: var(--space-compact);
-}
-
-.iw-activity-mark {
- inline-size: 1rem;
- block-size: 1rem;
- border: var(--edge-state-emphasis) solid currentColor;
- border-right-color: transparent;
- border-radius: 50%;
- animation: iw-spin 1s linear infinite;
-}
-
-@keyframes iw-spin {
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: reduce) {
- .iw-activity-mark {
- animation: none;
- border-right-color: currentColor;
- }
-}
-
-/* C57/C59/C60 Popover, drawer, and coach mark: three surfaces, one edge. */
-.iw-surface {
- padding: var(--space-dense);
- background: var(--surface-primary);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- display: grid;
- gap: var(--space-compact);
- justify-items: start;
-}
-
-.iw-surface--coach {
- border-inline-start-width: var(--edge-state-emphasis);
- border-inline-start-color: var(--identity);
-}
-
-/* C61 Accordion. Sibling disclosures presented as one list of headings. */
-.iw-accordion {
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- overflow: hidden;
-}
-
-.iw-accordion-heading {
- margin: 0;
- font-size: inherit;
-}
-
-.iw-accordion-trigger {
- display: grid;
- grid-template-columns: minmax(0, 1fr) auto;
- gap: var(--space-compact);
- inline-size: 100%;
- text-align: start;
- padding: var(--space-dense);
- background: none;
- border: 0;
- border-block-end: var(--edge-boundary-essential) solid var(--rule-subtle);
- color: inherit;
- font: inherit;
- font-weight: var(--font-weight-title);
- cursor: pointer;
-}
-
-.iw-accordion-panel {
- padding: var(--space-dense);
- border-block-end: var(--edge-boundary-essential) solid var(--rule-subtle);
-}
-
-/* C62 Context menu. The same actions the visible control already offers. */
-.iw-menu {
- list-style: none;
- margin: 0;
- padding: var(--space-compact);
- display: grid;
- gap: var(--space-detail);
- background: var(--surface-primary);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- min-inline-size: 12rem;
-}
-
-.iw-menu [role="menuitem"] {
- display: block;
- inline-size: 100%;
- text-align: start;
- padding: var(--space-compact);
- background: none;
- border: 0;
- color: inherit;
- font: inherit;
- cursor: pointer;
-}
-
-.iw-menu [role="menuitem"][aria-disabled="true"] {
- color: var(--text-secondary);
- cursor: default;
-}
-
-.iw-menu [role="menuitem"]:hover:not([aria-disabled="true"]) {
- background: var(--surface-grouped);
-}
-
-/* C63 Split view. A divider that is a control, not a decoration. */
-.iw-split {
- display: grid;
- grid-template-columns: minmax(0, 2fr) auto minmax(0, 3fr);
- gap: var(--space-dense);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
- padding: var(--space-dense);
-}
-
-.iw-split-divider {
- inline-size: var(--edge-state-emphasis);
- background: var(--border-essential);
- border: 0;
- padding: 0;
- cursor: col-resize;
-}
-
-@media (max-width: 47.9375rem) {
- .iw-split {
- grid-template-columns: minmax(0, 1fr);
- }
-
- .iw-split-divider {
- display: none;
- }
-}
-
-/* C65 Colour picker. The swatch is decorative; the value is the text. */
-.iw-swatch {
- inline-size: 1.5rem;
- block-size: 1.5rem;
- border: var(--edge-boundary-essential) solid var(--border-essential);
- border-radius: var(--edge-radius-authored);
-}
-
-/* ==========================================================================
- 14. Utilities
- ========================================================================== */
-
-.iw-visually-hidden {
- position: absolute;
- width: 1px;
- height: 1px;
- margin: -1px;
- padding: 0;
- overflow: hidden;
- clip-path: inset(50%);
- white-space: nowrap;
- border: 0;
-}
-
-.iw-skip-link {
- position: absolute;
- inset-inline-start: var(--space-standard);
- inset-block-start: calc(var(--space-standard) * -4);
- z-index: 10;
- padding: var(--space-compact) var(--space-standard);
- background: var(--surface-primary);
- border: var(--edge-boundary-essential) solid var(--border-essential);
- color: var(--text-primary);
-}
-
-.iw-skip-link:focus {
- inset-block-start: var(--space-standard);
-}
-
-.iw-rule {
- border: none;
- border-block-start: var(--edge-boundary-essential) solid var(--rule-subtle);
- margin-block: var(--space-standard);
-}
-
-/* A field that spans every column of an iw-form-grid. */
-.iw-field--full {
- grid-column: 1 / -1;
-}
-
-/* ==========================================================================
- 15. Environment adaptation
- ========================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
- .iw-root *,
- .iw-root *::before,
- .iw-root *::after {
- transition-duration: var(--motion-duration-reduced) !important;
- animation-duration: var(--motion-duration-reduced) !important;
- scroll-behavior: auto !important;
- }
-}
-
-/*
- * Forced colors: hand every colour decision back to the user's palette and keep
- * the non-colour channels (markers, edges, weight) doing the work.
- */
-/* --------------------------------------------------------------------------
- C73-C79 Commands. Dialog, toggle button, icon button, button group, split
- button, menu bar, and inline message. Each one wraps a native control; the
- modality, the pressed state, and the menu semantics stay with the platform.
- -------------------------------------------------------------------------- */
-
-/* C73 Dialog. `