/* wwwroot/css/components.css */

/* surfaces */
.ds-card { background: var(--color-surface-1); border-radius: var(--radius-xl); padding: var(--space-6); }
.ds-card--inner { border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-card--tile { border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-2); }
.ds-card__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.ds-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--color-brand-purple); box-shadow: inset 0 0 0 1.5px var(--color-brand-purple-ring); }
.ds-avatar--lg { width: 42px; height: 42px; }
.ds-pair { display: grid; gap: 4px; }
.ds-pair + .ds-pair { margin-top: var(--space-4); }
.ds-pair__label { font-weight: var(--weight-bold); color: var(--color-text); }
.ds-pair__value { color: var(--color-text-body); }

/* buttons */
.ds-btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--btn-h); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-pill);
  font-size: var(--text-sm); line-height: 1.43; font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; text-decoration: none; text-align: center;
  background: var(--color-surface-2); color: var(--color-text);
  transition: background-color var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-base) var(--ease);
}
.ds-btn--lg { --btn-h: 54px; }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn:active { transform: scale(0.98); }
.ds-btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.ds-btn--accent { background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-lg); letter-spacing: 0; text-transform: none; --btn-h: 47px; }
.ds-btn--dark { background: var(--color-surface-1); border-radius: var(--radius-lg); --btn-h: 57px; }
.ds-btn--secondary { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.ds-btn--danger { background: var(--color-negative); color: var(--color-on-primary); }
.ds-btn--ghost { background: transparent; padding: 0 var(--space-2); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; }
@media (hover: hover) {
  .ds-btn--primary:hover { background: var(--color-primary-hover); }
  .ds-btn--accent:hover { background: var(--color-accent-hover); }
  .ds-btn--dark:hover { background: var(--color-surface-hover-1); }
  .ds-btn--secondary:hover { background: var(--color-surface-hover-2); }
  .ds-btn--ghost:hover { text-decoration: underline; }
}
.ds-btn--primary:active { background: var(--color-primary-pressed); }
.ds-btn--accent:active { background: var(--color-accent-pressed); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }
.ds-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.ds-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-top-color: var(--color-on-primary); border-right-color: var(--color-on-primary); animation: ds-spin 0.8s linear infinite; }
.ds-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); }
@media (hover: hover) { .ds-icon-btn:hover { background: var(--color-surface-hover-2); color: var(--color-text); } }
.ds-icon-btn[disabled] { color: var(--color-text-disabled); cursor: not-allowed; }

/* send disc */
.ds-send { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: var(--color-surface-1); color: var(--color-accent); transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.ds-send[disabled], .ds-send[aria-disabled="true"] { color: var(--color-send-arrow-disabled); cursor: not-allowed; }
@media (hover: hover) { .ds-send:not([disabled]):hover { background: var(--color-accent); color: var(--color-on-accent); } }

/* fields: stacked (login) and inline (contact); the caption is always a real label */
.ds-field { --field-bg: var(--color-surface-2); position: relative; display: flex; background: var(--field-bg); border-radius: var(--radius-field); box-shadow: inset 0 0 0 1px var(--field-edge); transition: background-color var(--dur-fast) var(--ease); }
.ds-field--on-card { --field-bg: var(--color-bg); }
.ds-field--stacked { flex-direction: column; min-height: 54px; padding: 8px 24px 6px; }
.ds-field--inline { align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0 var(--space-4) 0 var(--space-4); border-radius: var(--radius-field-sm); }
.ds-field__caption { font-size: var(--text-sm); line-height: 1.3; font-weight: var(--weight-regular); color: var(--color-text); white-space: nowrap; }
.ds-field--inline .ds-field__caption { font-weight: var(--weight-medium); text-transform: uppercase; }
.ds-field__required { color: var(--color-text-muted); font-weight: var(--weight-regular); text-transform: none; }
.ds-field__input { flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); font-size: var(--text-sm); line-height: 1.5; outline: none; }
.ds-field__input::placeholder { color: var(--color-text-subtle); opacity: 1; }
.ds-field--area { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); padding: 16px 21px; min-height: 120px; }
.ds-field--area .ds-field__input { resize: vertical; min-height: 80px; }
@media (hover: hover) { .ds-field:hover { background: var(--color-surface-hover-2); } .ds-field--on-card:hover { background: var(--color-bg); } }
.ds-field:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 0; }
/* the error edge is never the outline, so a focused invalid field shows both: the edge inside, the ring 2 px outside (03 section 6, AIS-126) */
.ds-field[data-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--color-negative); }
.ds-field[data-invalid="true"]:focus-within { outline-offset: 2px; }
.ds-field[aria-disabled="true"] { background: var(--color-surface-1); color: var(--color-text-disabled); }
.ds-field__help { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); }
.ds-field__error { display: flex; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-negative); }
@media (max-width: 639px) { .ds-field--inline { flex-direction: column; align-items: stretch; min-height: 54px; padding: 8px 24px 6px; gap: 0; border-radius: var(--radius-field); } }

/* select tile (dimension picker) */
.ds-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 187px)); gap: 15px 18px; }
.ds-tile { position: relative; display: flex; align-items: center; justify-content: center; min-height: 62px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-sm); text-align: center; transition: background-color var(--dur-fast) var(--ease); }
@media (hover: hover) { .ds-tile:hover { background: var(--color-surface-hover-2); } }
.ds-tile[aria-checked="true"], .ds-tile[aria-pressed="true"] { background: var(--color-surface-3); }
.ds-tile[aria-checked="true"]::after, .ds-tile[aria-pressed="true"]::after {
  content: ""; position: absolute; right: 8px; bottom: -4px; width: 22px; height: 14px; border-radius: var(--radius-pill);
  background: var(--color-check) url("/icons/ui/check-dark.svg") center / 12px no-repeat; animation: ds-pop 160ms var(--ease);
}
@media (max-width: 1099px) { .ds-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* chips and badges */
.ds-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 177px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-chip); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-xs); }
.ds-chip--filter { min-width: 0; height: 32px; padding: 0 var(--space-4); border: 0; }
.ds-chip--filter[aria-pressed="true"] { background: var(--color-surface-3); }
.ds-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--tint-neutral); color: var(--color-text-muted); }
.ds-status--info { background: var(--tint-info); color: var(--color-info); }
.ds-status--warning { background: var(--tint-warning); color: var(--color-warning); }
.ds-status--negative { background: var(--tint-negative); color: var(--color-negative); }
.ds-status--positive { background: var(--tint-positive); color: var(--color-positive-strong); }
.ds-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--color-negative); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.ds-ind { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: var(--color-indicator-positive); color: var(--color-on-check); }
.ds-ind--neg { background: var(--color-negative); }

/* toggle, checkbox */
.ds-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; border: 0; padding: 0; border-radius: var(--radius-pill); background: var(--color-toggle-off); transition: background-color var(--dur-base) var(--ease); }
.ds-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-text); transition: transform var(--dur-base) var(--ease); }
.ds-toggle[aria-checked="true"] { background: var(--color-primary); }
.ds-toggle[aria-checked="true"]::after { transform: translateX(20px); }
.ds-check { appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--color-text-subtle); border-radius: 6px; background: transparent; display: inline-grid; place-content: center; }
.ds-check:checked { background: var(--color-primary) url("/icons/ui/check-dark.svg") center / 14px no-repeat; border-color: var(--color-primary); }

/* progress, utilization */
.ds-progress { display: flex; height: 29px; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-on-accent); }
.ds-progress__used { display: grid; place-items: center; background: var(--color-accent); min-width: 2.5rem; }
.ds-progress__rest { display: grid; place-items: center; background: var(--color-accent-strong); flex: 1; }
.ds-progress--warn .ds-progress__used { background: var(--color-warning); }
.ds-bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
.ds-bar__fill { height: 100%; background: var(--color-accent); border-radius: inherit; transition: width var(--dur-slow) var(--ease); }

/* package card */
.ds-package { position: relative; display: flex; flex-direction: column; min-height: 400px; padding: 52px 21px 56px; border-radius: var(--radius-lg); background: var(--color-surface-1); }
.ds-package__title { text-align: center; font-weight: var(--weight-bold); text-transform: uppercase; margin-bottom: var(--space-5); }
.ds-package__cta { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: min(206px, calc(100% - 44px)); }
.ds-package__note { position: absolute; left: 0; right: 0; top: calc(100% + 28px); text-align: center; }

/* data table (app skin) */
.ds-table-wrap { position: relative; overflow: auto; max-width: 100%; }   /* relative: the hidden labels of the cells belong to the scroller, they must not widen the page */
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.ds-table th { position: sticky; top: 0; z-index: var(--z-sticky); height: 44px; padding: 0 var(--space-4); text-align: left; background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-upper); white-space: nowrap; }
.ds-table td { height: 48px; padding: 0 var(--space-4); border-bottom: 1px solid var(--color-border-subtle); color: var(--color-text); }
.ds-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table tbody tr.is-selected { background: var(--color-surface-3); }
@media (hover: hover) { .ds-table tbody tr:hover { background: var(--color-surface-hover-2); } }
.ds-table tfoot td { position: sticky; bottom: 0; background: var(--color-surface-2); font-weight: var(--weight-bold); border-top: 1px solid var(--color-border-strong); }
.ds-table th[aria-sort] { cursor: pointer; }

/* report replica skin */
.ds-report { background: var(--color-report-frame); border-radius: var(--radius-xl); padding: 14px; overflow: auto; max-height: 694px; }
.ds-report__tile { background: var(--color-report-panel); border-radius: var(--radius-md); padding: var(--space-3); min-width: 0; }
.ds-report__title { font-size: var(--text-xs); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.ds-rtable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-xs); line-height: 16px; color: var(--color-text); }
.ds-rtable th { padding: 3px 8px; background: var(--color-report-header); font-weight: var(--weight-bold); text-align: center; vertical-align: middle; }
.ds-rtable td { padding: 3px 8px; text-align: left; vertical-align: middle; }
.ds-rtable td.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-rtable td:first-child { border-right: 1px solid var(--color-report-divider); }
.ds-rtable tbody tr:nth-child(odd) { background: var(--color-report-frame); }
.ds-rtable tbody tr:nth-child(even) { background: var(--color-report-panel); }
.ds-rtable tfoot td, .ds-rtable .is-total td { font-weight: var(--weight-bold); }
.ds-slicer-btn { min-height: 24px; padding: 0 10px; border: 0; border-radius: 3px; background: var(--color-report-slicer); color: var(--color-text); font-size: var(--text-xs); }
.ds-slicer-btn--neutral { background: var(--color-report-slicer-neutral); }
.ds-slicer-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--color-accent); }

/* chat */
.ds-chat { --chat-inset: 16px; --chat-input-pull: 4px; display: flex; flex-direction: column; background: var(--color-surface-1); border-radius: var(--radius-xl); padding: var(--space-4) var(--chat-inset) 24px; min-height: 779px; }
.ds-chat--wide { --chat-inset: 48px; --chat-input-pull: -15px; }   /* text inset 48, input inset 33 (Delta.png) */
@media (max-width: 1099px) { .ds-chat--wide { --chat-inset: 16px; --chat-input-pull: 4px; } }   /* stacked under the report the wide panel uses the compact insets */
.ds-chat__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 54px; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-chat__log { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) 0; font-size: var(--text-chat); line-height: var(--lh-chat); color: var(--color-text-body); hyphens: auto; }
.ds-chat__log h3 { margin: var(--space-4) 0 0; font-size: var(--text-chat); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-msg--user { margin-left: auto; max-width: 80%; width: fit-content; padding: var(--space-3) 18px; border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text); }
.ds-chat__input { margin-inline: var(--chat-input-pull); display: flex; align-items: center; gap: var(--space-3); min-height: 90px; padding: var(--space-3) var(--space-3) var(--space-3) 24px; border-radius: var(--radius-chat); background: var(--color-surface-2); }
.ds-chat__input textarea { flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--color-text); font-size: var(--text-chat); line-height: var(--lh-chat); max-height: 9.6rem; }
.ds-chat__input textarea::placeholder { color: var(--color-text-subtle); }
.ds-chat__input:focus-within { outline: 2px solid var(--color-focus-ring); }
.ds-typing { display: inline-flex; gap: 5px; }
.ds-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); animation: ds-bounce 1s infinite; }
.ds-typing i:nth-child(2) { animation-delay: 0.15s; } .ds-typing i:nth-child(3) { animation-delay: 0.3s; }
.ds-export-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-7); padding: var(--space-3) 15px; font-size: var(--text-sm); color: var(--color-text); }   /* Delta.png: icon x 990, links ~18 px apart, 42 px between the groups */
.ds-export-row__group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ds-export-row__label { margin-inline-end: var(--space-2); }
.ds-export-row__link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 26px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--color-text); font: inherit; cursor: pointer; }
@media (hover: hover) { .ds-export-row__link:not([aria-disabled="true"]):hover { text-decoration: underline; } }
.ds-export-row__link[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-export-row__link[aria-busy="true"] { color: var(--color-text); cursor: progress; }
.ds-export-row__spinner { width: 14px; height: 14px; }
@media (max-width: 599px) { .ds-export-row { gap: var(--space-1) var(--space-4); } .ds-export-row__link { min-width: var(--touch-min); min-height: var(--touch-min); justify-content: center; } }
.ds-export-menu { display: contents; }   /* only a handle for the roving focus of the answer toolbar */

/* voice button: state lives in data-state */
.ds-voice { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); flex: none; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); }
@media (hover: hover) { .ds-voice[data-state="idle"]:hover { background: var(--color-surface-hover-2); color: var(--color-text); } }
.ds-voice[data-state="unavailable"] { color: var(--color-text-disabled); }
.ds-voice[data-state="listening"], .ds-voice[data-state="hearing"] { background: var(--color-accent); color: var(--color-on-accent); }
.ds-voice[data-state="listening"]::before, .ds-voice[data-state="listening"]::after,
.ds-voice[data-state="hearing"]::before, .ds-voice[data-state="hearing"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: ds-ring 1.2s var(--ease) infinite; }
.ds-voice[data-state="listening"]::after, .ds-voice[data-state="hearing"]::after { animation-delay: 0.6s; }
.ds-voice[data-state="thinking"] { background: var(--color-surface-2); color: var(--color-accent); }
.ds-voice[data-state="speaking"] { background: var(--color-accent-strong); color: var(--color-on-accent); }
.ds-speaking-line { background: var(--color-surface-2); border-radius: var(--radius-xs); }

/* feedback: toast, dialog, drawer, skeleton, spinner */
.ds-toast-host { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.ds-toast-region { display: flex; flex-direction: column; gap: var(--space-3); }   /* the two live regions are always there; empty ones take no room and no clicks */
.ds-toast-region:has(.ds-toast) + .ds-toast-region:has(.ds-toast) { margin-top: var(--space-3); }
.ds-toast-host .ds-toast { pointer-events: auto; }
.ds-toast { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-3); box-shadow: var(--shadow-overlay); font-size: var(--text-sm); animation: ds-rise var(--dur-slow) var(--ease); }
.ds-scrim { position: fixed; inset: 0; z-index: var(--z-dialog); background: var(--color-scrim); display: grid; place-items: center; padding: var(--space-4); }
.ds-dialog { width: min(520px, 100%); max-height: 90dvh; overflow: auto; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-surface-1); box-shadow: var(--shadow-overlay); animation: ds-rise var(--dur-slow) var(--ease); }
.ds-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.ds-dialog .ds-field__caption { white-space: normal; }   /* a long caption wraps instead of widening the bottom sheet at 320-390 px (AIS-149) */
.ds-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(480px, 100vw); padding: var(--space-6); background: var(--color-surface-1); border-radius: var(--radius-xl) 0 0 var(--radius-xl); box-shadow: var(--shadow-overlay); overflow: auto; animation: ds-slide var(--dur-slow) var(--ease); }
.ds-menu { min-width: 200px; padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-3); box-shadow: var(--shadow-overlay); }
.ds-menu [role="menuitem"] { display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); padding: 0 var(--space-3); border-radius: var(--radius-xs); }
.ds-menu [role="menuitem"]:hover { background: var(--color-surface-hover-2); }
.ds-skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface-3), var(--color-surface-2)); background-size: 200% 100%; animation: ds-shimmer 1.4s linear infinite; }
.ds-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-surface-3); border-top-color: var(--color-accent); animation: ds-spin 0.8s linear infinite; }
.ds-empty { display: grid; justify-items: center; gap: var(--space-3); padding: 48px var(--space-4); text-align: center; }
.ds-empty p { max-width: 420px; color: var(--color-text-muted); }
.ds-alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--tint-negative); color: var(--color-negative); font-size: var(--text-sm); }
.ds-alert--warning { background: var(--tint-warning); color: var(--color-warning); }
.ds-alert--info { background: var(--tint-info); color: var(--color-info); }
.ds-offline-bar { padding: 6px var(--gutter); background: var(--tint-warning); color: var(--color-warning); font-size: var(--text-xs); text-align: center; }

/* contact screen: slanted surface-2 shape behind the content */
.ds-contact { position: relative; min-height: 607px; }
.ds-contact__shape { position: absolute; inset: 0; background: var(--color-surface-2); border-radius: var(--radius-xl) 0 0 var(--radius-xl); clip-path: polygon(0 0, 32.3% 0, 51.4% 100%, 0 100%); }
/* the slanted layout needs a panel about 1250 px wide (information column and form column side by side), which is a viewport of about 1600 px; below that the shape is a plain card above the form */
@media (max-width: 1599px) { .ds-contact__shape { position: static; clip-path: none; border-radius: var(--radius-xl); padding: var(--space-6); } }

/* keyframes */
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-shimmer { to { background-position: -200% 0; } }
@keyframes ds-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes ds-ring { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ds-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ds-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ds-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* high contrast / forced colours */
@media (forced-colors: active) {
  .ds-card, .ds-workspace, .ds-panel, .ds-field, .ds-btn, .ds-tile, .ds-chip, .ds-chat__input { border: 1px solid CanvasText; }
  .ds-tile[aria-checked="true"], .ds-sidebar__item[aria-current="page"] { outline: 2px solid Highlight; }
}
@media (max-width: 767px) {
  .ds-toast-host { left: var(--space-4); right: var(--space-4); top: calc(env(safe-area-inset-top) + var(--space-3)); bottom: auto; max-width: none; }
  .ds-dialog { align-self: end; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .ds-drawer { width: 100vw; border-radius: 0; }
  .ds-chat__input { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
}

/* added by the shell ticket: parts of the Tier-F components that the delivered rules do not cover -------------- */
.ds-icon, .ds-feature-icon { flex: none; }
.ds-formfield { display: grid; }
.ds-field__control { position: relative; display: flex; align-items: center; }
.ds-field__control .ds-field__input { width: 100%; padding-right: 40px; }   /* no 211 px minimum from the input's default size (AIS-149, 320 px) */
.ds-field__reveal { position: absolute; right: -16px; bottom: -6px; }
.ds-empty__title { font-size: var(--text-lg); line-height: 1.4; font-weight: var(--weight-semibold); }
.ds-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-2); }
.ds-empty[data-density="page"] { padding-block: 72px; }
.ds-alert { align-items: flex-start; }
.ds-alert > svg { margin-top: 2px; }
.ds-alert__text { flex: 1; min-width: 0; }
.ds-btn svg { flex: none; }
.ds-chip .ds-icon-btn { width: var(--touch-min); height: var(--touch-min); margin: -8px -12px -8px -4px; color: var(--color-text-muted); }
.ds-chip--filter { cursor: pointer; }
.ds-hero-blob { display: block; width: 375px; max-width: 100%; height: auto; }
.ds-tenant-logo { display: block; width: auto; max-width: 146px; height: 32px; }
.ds-tenant-wordmark { font-size: var(--text-lg); line-height: 1.2; font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }
.ds-avatar { display: inline-grid; place-items: center; }
.ds-avatar__head { fill: var(--color-text); }
.ds-avatar__body { fill: var(--color-accent); }
.ds-avatar__spark { fill: var(--color-negative); }
.ds-brand-logo { position: relative; display: inline-block; }
.ds-brand--text { display: inline-flex; align-items: baseline; width: auto; height: auto; font-size: 2.25rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; }
.ds-brand__period { display: inline-block; width: 0.28em; height: 0.28em; margin-left: 0.08em; border-radius: 50%; background: var(--color-primary); }
.ds-brand__dot { fill: var(--color-primary); }
.ds-brand__text { fill: currentColor; font-family: var(--font-family); font-weight: 800; }
.ds-brand-logo--login .ds-brand { width: 230px; height: 108px; }
.ds-brand-logo--compact .ds-brand { width: 93px; height: 46px; }
.ds-tooltip-wrap { position: relative; display: inline-flex; }
:where(button.ds-tooltip-wrap) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; }   /* the named trigger of an icon tooltip looks like the span one */
.ds-tooltip { position: absolute; left: 50%; top: calc(100% + 6px); z-index: var(--z-toast); width: max-content; max-width: 260px; padding: 6px; border-radius: var(--radius-xs); background: var(--color-surface-3); color: var(--color-text); font-size: var(--text-xs); line-height: 1.4; transform: translateX(-50%); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.ds-tooltip-wrap:hover > .ds-tooltip { visibility: visible; opacity: 1; transition-delay: var(--tooltip-delay, 400ms); }
.ds-tooltip-wrap:focus-within > .ds-tooltip { visibility: visible; opacity: 1; transition-delay: 0ms; }
.ds-tooltip-wrap[data-dismissed] > .ds-tooltip { visibility: hidden; opacity: 0; transition-delay: 0ms; }
.ds-tabstrip { display: flex; gap: var(--space-5); }
.ds-segmented { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--color-surface-2); }
.ds-segmented__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-width: 96px; min-height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-segmented__item[aria-selected="true"], .ds-segmented__item[aria-pressed="true"] { background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-bold); }
.ds-toast { align-items: center; }
.ds-toast__text { flex: 1; min-width: 0; }
.ds-toast__action { color: var(--color-accent); font-weight: var(--weight-semibold); text-decoration: underline; }
.ds-toast--error { color: var(--color-negative); }
.ds-toast--warning { color: var(--color-warning); }
.ds-toast .ds-icon-btn { width: var(--touch-min); height: var(--touch-min); margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0; }
.ds-h2 { margin-bottom: var(--space-3); }
.ds-brand__powered-name { text-transform: uppercase; }
.ds-brand-logo__powered { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text); }
.ds-brand-logo__powered strong { font-weight: var(--weight-bold); }
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

/* shared form controls (AIS-17): label/value list, text area, select, checkbox, radio, range, search ------------- */
.ds-pair-list { margin: 0; padding: 0; }
.ds-pair__label, .ds-pair__value { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .ds-pair--inline { grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr); align-items: baseline; gap: var(--space-4); } }
.ds-field__counter { align-self: flex-end; margin-top: var(--space-1); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.ds-select-wrap { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }
.ds-select { appearance: none; padding-right: 28px; cursor: pointer; text-overflow: ellipsis; }
.ds-select option, .ds-select optgroup { background: var(--color-surface-3); color: var(--color-text); }
.ds-select:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
/* a bare select (no .ds-field around it) draws its own ring; inside a .ds-field the field's :focus-within ring is the one (03 section 6, H-27 HA-3) */
.ds-select:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.ds-field .ds-select:focus-visible { outline: none; }
.ds-select__chevron { position: absolute; right: 0; pointer-events: none; color: var(--color-text-muted); }
.ds-checkbox { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min); color: var(--color-text); font-size: var(--text-sm); cursor: pointer; }
.ds-checkbox:has(input:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-check:disabled { border-color: var(--color-text-disabled); }
.ds-radio-group { display: grid; gap: var(--space-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-radio-group--inline { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); }
.ds-radio-item { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--touch-min); padding-block: 12px; color: var(--color-text); font-size: var(--text-sm); line-height: 20px; cursor: pointer; }
.ds-radio-item:has(input:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-radio-item__text { display: grid; gap: 2px; }
.ds-radio-item__description { font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-muted); }
.ds-radio { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--color-text); border-radius: 50%; background: transparent; display: inline-grid; place-content: center; }
.ds-radio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); transform: scale(0); transition: transform var(--dur-fast) var(--ease); }
.ds-radio:checked::before { transform: scale(1); }
.ds-radio:disabled { border-color: var(--color-text-disabled); }
.ds-range-field { display: flex; align-items: center; gap: var(--space-4); min-height: var(--touch-min); }
.ds-range-field__value { min-width: 3.5rem; text-align: right; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ds-range { flex: 1; min-width: 0; height: var(--touch-min); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ds-range:disabled { cursor: not-allowed; opacity: 0.4; }
.ds-range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-text-subtle); }
.ds-range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--color-text-subtle); }
.ds-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border: 0; border-radius: 50%; background: var(--color-primary); }
.ds-range::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--color-primary); }
.ds-field.ds-search, .ds-field.ds-chip-editor__field { flex-direction: row; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-1) 0 var(--space-4); border-radius: var(--radius-field-sm); }
.ds-field.ds-search { gap: var(--space-2); }   /* the icon keeps its 8 px from the text below 640 px too, where the inline field pattern drops its gap */
.ds-search .ds-icon { color: var(--color-text-muted); }
.ds-search input::-webkit-search-cancel-button { appearance: none; display: none; }

/* shared overlays and lists (AIS-17): drawer, chip list, file drop zone ------------------------------------------- */
.ds-scrim--drawer { display: block; padding: 0; }
.ds-drawer { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ds-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-6) var(--space-5) var(--space-4) var(--space-6); }
.ds-drawer__titles { min-width: 0; }
.ds-drawer__title { font-size: var(--text-lg); line-height: 1.4; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ds-drawer__subtitle { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-drawer__body { flex: 1; min-height: 0; padding: var(--space-2) var(--space-6) var(--space-5); overflow-y: auto; }
.ds-drawer__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface-1); }
.ds-chip-list { display: flex; flex-wrap: wrap; gap: 13px; margin: 0; padding: 0; list-style: none; }
.ds-chip--muted { color: var(--color-text-muted); }
.ds-chip--more { min-width: 0; }
.ds-chip-editor { display: grid; gap: var(--space-3); }
.ds-chip-editor__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-chip-editor__add .ds-field { flex: 1 1 14rem; }
.ds-field.ds-chip-editor__field { align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4); border-radius: var(--radius-field-sm); }
.ds-dropzone { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--space-2); min-height: 120px; padding: var(--space-5); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface-2); color: var(--color-text); text-align: center; transition: background-color var(--dur-fast) var(--ease); }
@media (hover: hover) { .ds-dropzone:hover:not([data-busy="true"]) { background: var(--color-surface-hover-2); } }
.ds-dropzone:focus-within { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.ds-dropzone[data-busy="true"] { cursor: not-allowed; opacity: 0.7; }
.ds-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ds-dropzone__input:disabled { cursor: not-allowed; }
.ds-dropzone__body { display: grid; justify-items: center; gap: var(--space-2); pointer-events: none; }
.ds-dropzone__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-dropzone__rows { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ds-dropzone__row { display: grid; gap: var(--space-1); }
.ds-dropzone__name { overflow-wrap: anywhere; }
.ds-dropzone__error { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-negative); }
.ds-bar__fill--indeterminate { width: 100%; background: linear-gradient(90deg, var(--color-surface-3), var(--color-accent), var(--color-surface-3)); background-size: 200% 100%; animation: ds-shimmer 1.4s linear infinite; }
@media (forced-colors: active) { .ds-drawer, .ds-dropzone, .ds-search, .ds-chip-editor__field { border: 1px solid CanvasText; } }

/* shared data display (AIS-17): data table extras, filter bar, pager ----------------------------------------------- */
.ds-datatable { min-width: 0; }
.ds-table-toolbar { margin-bottom: var(--space-4); }
.ds-table--compact td { height: 40px; }
.ds-table--static-header th { position: static; }
.ds-table__primary { font-weight: var(--weight-semibold); }
.ds-table__actions { text-align: right; white-space: nowrap; }
.ds-table__row--clickable { cursor: pointer; }
/* the row button (13 section 4.1, H-27 HA-5): the row's Tab stop and name, drawn as the cell content it wraps */
.ds-table__rowbutton { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; text-transform: inherit; cursor: pointer; }
.ds-table tbody tr.is-selected > td:first-child, .ds-rtable tbody tr.is-selected > td:first-child { box-shadow: inset 3px 0 0 var(--color-accent); }   /* the selected row is not told by colour alone */
.ds-table td.ds-table__empty { height: auto; border-bottom: 0; }
.ds-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--touch-min); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
@media (hover: hover) { .ds-table__sort:hover { color: var(--color-text); } }
.ds-table__caret--idle { opacity: 0.4; }
.ds-table--loading .ds-table__skeleton { animation: ds-delay-show 1ms linear 300ms backwards; }
.ds-table--sticky-first th:first-child, .ds-table--sticky-first td:first-child { position: sticky; left: 0; }
.ds-table--sticky-first th:first-child { z-index: calc(var(--z-sticky) + 1); }
.ds-table--sticky-first td:first-child { background: var(--table-surface, var(--color-surface-1)); }
.ds-table--sticky-first tbody tr.is-selected td:first-child { background: var(--color-surface-3); }
@media (hover: hover) { .ds-table--sticky-first tbody tr:hover td:first-child { background: var(--color-surface-hover-2); } }
@media (max-width: 639px) { .ds-col-hide-640 { display: none; } }
@media (max-width: 767px) { .ds-col-hide-768 { display: none; } }
@media (max-width: 1099px) { .ds-col-hide-1100 { display: none; } }
@media (max-width: 1279px) { .ds-col-hide-1280 { display: none; } }
@media (max-width: 639px) {
  .ds-table--stack, .ds-table--stack tbody, .ds-table--stack tfoot, .ds-table--stack tr, .ds-table--stack td { display: block; }
  .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-table--stack tbody tr, .ds-table--stack tfoot tr { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
  .ds-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); height: auto; padding: var(--space-2) 0; border-bottom: 0; text-align: right; }
  .ds-table--stack td::before { content: attr(data-label); flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-upper); text-align: left; text-transform: uppercase; color: var(--color-text-muted); }
  .ds-table--stack td.ds-table__primary { display: block; text-align: left; }
  .ds-table--stack td.ds-table__primary::before, .ds-table--stack td.ds-table__actions::before, .ds-table--stack td.ds-table__empty::before { content: none; }
  .ds-table--stack td.ds-table__actions { justify-content: flex-end; }
  .ds-table--stack.ds-table--sticky-first th:first-child, .ds-table--stack.ds-table--sticky-first td:first-child { position: static; background: transparent; }
  .ds-table--stack td > .ds-table__rowbutton { flex: 1 1 auto; width: auto; min-width: 0; }   /* beside the header label of a stacked cell */
  .ds-table--stack tbody tr.is-selected { box-shadow: inset 3px 0 0 var(--color-accent); }   /* a stacked row is a card: the bar is on the card */
  .ds-table--stack tbody tr.is-selected > td:first-child { box-shadow: none; }
}
.ds-filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.ds-filterbar__filters, .ds-filterbar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.ds-filterbar__filters { flex: 1 1 auto; }
.ds-filterbar__filters > .ds-formfield { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }   /* a select with long options shrinks on a phone instead of widening the page */
.ds-filterbar__filters .ds-select { min-width: 0; }
.ds-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-3); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.ds-pager__range { margin-right: var(--space-2); }
@keyframes ds-delay-show { from { opacity: 0; } to { opacity: 1; } }

/* report components I (AIS-18): report table skin, expander, signed values, KPI card, sparkline, date range ---------- */
.ds-table-error { margin-bottom: var(--space-3); }
.ds-table-footer { margin-top: var(--space-3); }
.ds-table tr[data-child-of] > td:first-child { padding-inline-start: calc(var(--space-4) + 16px); }
.ds-rtable tr[data-child-of] > td:first-child { padding-inline-start: 24px; }
.ds-rtable th[aria-sort="ascending"]::after, .ds-rtable th[aria-sort="descending"]::after { content: ""; display: block; width: 0; height: 0; margin: 2px auto 0; border-inline: 4px solid transparent; }
.ds-rtable th[aria-sort="ascending"]::after { border-bottom: 5px solid currentColor; }
.ds-rtable th[aria-sort="descending"]::after { border-top: 5px solid currentColor; }
.ds-rtable__sort { display: inline-block; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.ds-rtable td.ds-table__empty { text-align: center; border-right: 0; }
.ds-rtable .is-total { background: var(--color-report-panel); }
.ds-rtable .is-total td { border-top: 1px solid var(--color-report-divider); }
.ds-rtable--sticky-header th { position: sticky; top: 0; z-index: var(--z-sticky); }
.ds-rtable--sticky-first th:first-child, .ds-rtable--sticky-first td:first-child { position: sticky; left: 0; }
.ds-rtable--sticky-first td:first-child { background: inherit; }
.ds-rtable--sticky-first th:first-child { z-index: calc(var(--z-sticky) + 1); }
.ds-rtable--loading .ds-table__skeleton { animation: ds-delay-show 1ms linear 300ms backwards; }
@media (pointer: coarse) { .ds-rtable__sort { min-width: var(--touch-min); min-height: var(--touch-min); } }
.ds-expander { position: relative; display: inline-block; flex: none; width: 12px; height: 12px; margin-inline-end: 6px; padding: 0; vertical-align: -1px; border: 1px solid var(--color-text-muted); border-radius: 0; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.ds-expander::before { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; line-height: 1; }
.ds-expander[aria-expanded="true"]::before { content: "\2212"; }
.ds-expander::after { content: ""; position: absolute; inset: -6px; }
.ds-expander__spinner { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -2px; border-width: 1.5px; }
@media (pointer: coarse) { .ds-expander::after { inset: -16px; } }
@media (hover: hover) { .ds-expander:hover { color: var(--color-text); border-color: var(--color-text); } }

.ds-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-delta-badge { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-delta-badge svg { width: 12px; height: 12px; }
.ds-ind { vertical-align: middle; }
.ds-ind .ds-icon { stroke-width: 3; }

.ds-kpi { align-items: flex-start; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; background: var(--color-surface-1); }
.ds-kpi--surface-2 { background: var(--color-surface-2); }
.ds-kpi__label { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-kpi__value { font-size: 1.75rem; line-height: 1.2; font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-kpi__delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-kpi__period, .ds-kpi__caption { font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-spark { display: block; overflow: visible; }
.ds-spark__line { fill: none; stroke: var(--color-text-muted); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ds-spark__dot { fill: var(--color-accent); }

.ds-datebox-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-datebox-field__legend { margin-bottom: var(--space-1); padding: 0; border-bottom: 1px solid var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.ds-datebox-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ds-datebox-item { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ds-datebox { box-sizing: content-box; width: 9.5ch; min-width: 62px; height: 20px; padding: 0 var(--space-1); border: 1px solid var(--color-report-divider); border-radius: 3px; background: var(--color-surface-1); color: var(--color-text); font-size: var(--text-xs); text-align: center; font-variant-numeric: tabular-nums; }
.ds-datebox[aria-invalid="true"] { border-color: var(--color-negative); box-shadow: inset 0 0 0 0.5px var(--color-negative); }   /* 1.5 px with the border; the :focus-visible ring stays */
.ds-datebox:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-datebox-item .ds-icon-btn { width: 28px; height: 28px; }
.ds-datebox-item .ds-icon-btn svg { width: 16px; height: 16px; }
@media (pointer: coarse) { .ds-datebox-item .ds-icon-btn { width: var(--touch-min); height: var(--touch-min); } }
.ds-datebox-slider { position: relative; height: var(--touch-min); }
.ds-datebox-slider__track { position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; transform: translateY(-50%); background: var(--color-text-muted); }
.ds-datebox-slider__thumb { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; }
.ds-datebox-slider__thumb::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ds-datebox-slider__thumb::-moz-range-track { height: 100%; background: transparent; }
.ds-datebox-slider__thumb::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: content-box; width: 14px; height: 14px; border: 15px solid transparent; border-radius: 50%; background: var(--color-text); background-clip: padding-box; pointer-events: auto; cursor: pointer; }
.ds-datebox-slider__thumb::-moz-range-thumb { box-sizing: content-box; width: 14px; height: 14px; border: 15px solid transparent; border-radius: 50%; background: var(--color-text); background-clip: padding-box; pointer-events: auto; cursor: pointer; }
.ds-datebox-slider__thumb:focus-visible { outline: none; }
.ds-datebox-slider__thumb:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-focus-ring); outline-offset: -15px; }
.ds-datebox-slider__thumb:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-focus-ring); outline-offset: -15px; }
.ds-datebox-slider__thumb:disabled::-webkit-slider-thumb { background: var(--color-text-disabled); background-clip: padding-box; cursor: not-allowed; }
.ds-datebox-slider__thumb:disabled::-moz-range-thumb { background: var(--color-text-disabled); background-clip: padding-box; cursor: not-allowed; }
@media (forced-colors: active) { .ds-ind, .ds-delta-badge, .ds-expander, .ds-datebox { border: 1px solid CanvasText; } }

/* report components II (AIS-19): report frame and tiles, slicers, charts, how calculated, source chip ------------------- */
.ds-report__body { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.ds-report--preview { container-type: inline-size; position: relative; height: 100%; max-height: none; padding: 0; overflow: hidden; }
.ds-report--preview::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48px; background: linear-gradient(to bottom, transparent, var(--color-report-frame)); pointer-events: none; }
.ds-report__scaled { box-sizing: border-box; padding: 14px; }
@media (max-width: 1099px) { .ds-report:not(.ds-report--preview) { max-height: 100%; } }
.ds-report__tile { display: flex; flex-direction: column; gap: var(--space-2); }
.ds-report__tile[data-state="loading"], .ds-report__tile[data-state="empty"], .ds-report__tile[data-state="error"] { min-height: 8rem; }
.ds-report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.ds-report__title { margin: 0; line-height: 1.5; }
.ds-report__title-actions { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.ds-report__skeleton { flex: 1; min-height: 6rem; }
.ds-report__empty { display: grid; flex: 1; place-items: center; margin: 0; text-align: center; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }

.ds-slicerbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-nav-start) 0%, var(--color-nav-peak) 26%, var(--color-nav-mid) 52%, var(--color-nav-end) 80%, var(--color-nav-edge) 100%); }
.ds-slicerbar__home { flex: none; }
.ds-slicerbar__home .ds-icon-btn { width: 38px; height: 38px; border-radius: var(--radius-xs); background: var(--color-surface-1); color: var(--color-text); }
.ds-slicerbar__groups { display: contents; }
.ds-slicerbar__logo { flex: none; margin-left: auto; }
@media (max-width: 1399px) {
  .ds-slicerbar__logo { order: 1; }
  .ds-slicerbar__groups { display: flex; flex: 1 0 100%; flex-wrap: wrap; order: 2; gap: var(--space-2) var(--space-4); }
}
.ds-slicer-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-slicer-group__title { display: block; width: 100%; margin-bottom: var(--space-1); padding: 0 0 2px; border-bottom: 1px solid var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.4; }
.ds-slicer-group__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ds-slicer-group__chevron { display: inline-flex; color: var(--color-text-muted); }
.ds-slicer-btn { display: inline-flex; align-items: center; cursor: pointer; line-height: 1.4; }
.ds-slicer-btn:disabled { opacity: 0.4; cursor: not-allowed; }
@media (hover: hover) { .ds-slicer-btn:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--color-text-muted); } .ds-slicer-btn[aria-pressed="true"]:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--color-accent); } }
@media (pointer: coarse) { .ds-slicer-btn { min-height: var(--touch-min); } .ds-slicerbar__home .ds-icon-btn { width: var(--touch-min); height: var(--touch-min); } }
@media (forced-colors: active) { .ds-report__tile, .ds-slicer-btn { border: 1px solid CanvasText; } }

.ds-chart-frame { display: flow-root; position: relative; min-width: 0; }
.ds-chart-frame__toggle { position: absolute; top: 0; right: 0; z-index: 1; }
.ds-chart__table { margin-top: var(--touch-min); }
.ds-chart { --chart-surface: var(--color-surface-1); container-type: inline-size; position: relative; margin: 0; overflow-x: auto; }
.ds-chart--report { --chart-surface: var(--color-report-panel); }
.ds-chart__svg { position: relative; display: block; width: 100%; min-width: 320px; height: auto; }
.ds-chart__empty { margin: 0; padding: var(--space-5) var(--space-3); text-align: center; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-chart__gridline { stroke: var(--color-border-subtle); stroke-width: 1px; }
.ds-chart--report .ds-chart__gridline { stroke: var(--color-report-divider); stroke-dasharray: 1 3; }
.ds-chart__axis { stroke: var(--color-border-strong); stroke-width: 1px; }
.ds-chart--report .ds-chart__axis { stroke: var(--color-report-divider); }
.ds-chart__ytick, .ds-chart__xtick, .ds-chart__axis-title { fill: var(--color-text-muted); font-size: 12px; }
@container (max-width: 519px) { .ds-chart__xtick--odd { display: none; } }
.ds-chart-s--a { --series: var(--color-accent-strong); }
.ds-chart-s--b { --series: var(--color-chart-pair-light); }
.ds-chart-s--1 { --series: var(--color-chart-1); }
.ds-chart-s--2 { --series: var(--color-chart-2); }
.ds-chart-s--3 { --series: var(--color-chart-3); }
.ds-chart-s--4 { --series: var(--color-chart-4); }
.ds-chart-s--5 { --series: var(--color-chart-5); }
.ds-chart-s--6 { --series: var(--color-chart-6); }
.ds-chart-s--7 { --series: var(--color-chart-7); }
.ds-chart-s--8 { --series: var(--color-chart-8); }
.ds-chart__bar, .ds-chart__enddot, .ds-chart__lone, .ds-chart__point, .ds-chart__tipdot { fill: var(--series); }
.ds-chart__seglabel { fill: var(--color-on-accent); font-size: 12px; pointer-events: none; }
.ds-chart__seglabel--above, .ds-chart--app .ds-chart__seglabel.ds-chart-s--6 { fill: var(--color-text); }   /* near-black on every fill, white only on chart-6 (25 section 6.1, H-27 HA-4) */
.ds-chart__line { fill: none; stroke: var(--series); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.ds-chart__area { fill: var(--series); fill-opacity: 0.1; stroke: none; }
.ds-chart__enddot, .ds-chart__point { stroke: var(--chart-surface); stroke-width: 2px; }
.ds-chart__endlabel { fill: var(--color-text); font-size: 12px; }
.ds-chart__hit { fill: transparent; }
.ds-chart__cross { stroke: var(--color-border-strong); stroke-width: 1px; }
.ds-chart__cross, .ds-chart__point, .ds-chart__tip { visibility: hidden; pointer-events: none; }
.ds-chart__cat:hover > .ds-chart__cross, .ds-chart__cat:hover > .ds-chart__point, .ds-chart__cat:hover > .ds-chart__tip,
.ds-chart__cat:focus-within > .ds-chart__cross, .ds-chart__cat:focus-within > .ds-chart__point, .ds-chart__cat:focus-within > .ds-chart__tip { visibility: visible; }
.ds-chart__tip rect { fill: var(--color-surface-3); }
.ds-chart__tiptext { fill: var(--color-text); font-size: 12px; }
.ds-chart__tiptext--bold { font-weight: var(--weight-bold); }
.ds-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-chart__legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-chart__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--series); }
.ds-chart__legend--overlay { position: absolute; top: 2%; left: 0; right: var(--touch-min); }
.ds-chart--line .ds-chart__legend { margin-bottom: var(--space-2); }

.ds-hbar-wrap { --hbar-label: 38%; --hbar-gutter: 3.75rem; }
.ds-hbar-wrap { padding-top: 2.5rem; }
.ds-hbar-body { position: relative; }
.ds-hbar { position: relative; margin: 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; }
.ds-hbar::-webkit-scrollbar { width: 4px; }
.ds-hbar::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--color-scrollbar-thumb); }
.ds-hbar__row { display: grid; grid-template-columns: var(--hbar-label) minmax(0, 1fr); align-items: center; height: 17px; font-size: var(--text-xs); line-height: 17px; }
.ds-hbar__row:focus-visible { outline-offset: -2px; }
.ds-hbar__label { overflow: hidden; padding-right: var(--space-2); text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.ds-hbar__plot { display: flex; align-items: center; min-width: 0; margin-right: var(--hbar-gutter); }
.ds-hbar__bar { flex: none; height: 14px; background: var(--color-accent-strong); }
.ds-hbar__value { flex: none; margin-left: var(--space-1); white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text); }
.ds-hbar__grid { position: absolute; top: 0; bottom: 0; left: var(--hbar-label); right: var(--hbar-gutter); pointer-events: none; }
.ds-hbar__gridline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--color-border-subtle); }
.ds-chart--report .ds-hbar__gridline { border-left: 1px dotted var(--color-report-divider); }
.ds-hbar__ref { position: absolute; z-index: 1; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--color-text-muted); }
.ds-hbar__reflabel { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-hbar__axis { position: relative; height: 1.5rem; margin: var(--space-1) var(--hbar-gutter) 0 var(--hbar-label); }
.ds-hbar__tick { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }

.ds-howcalc { border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-body); }
.ds-howcalc__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-min); padding: 0 var(--space-4); border-radius: var(--radius-md); list-style: none; cursor: pointer; font-weight: var(--weight-semibold); color: var(--color-text); }
.ds-howcalc__summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .ds-howcalc__summary:hover { background: var(--color-surface-hover-2); } }
.ds-howcalc__chevron { flex: none; color: var(--color-text-muted); }
.ds-howcalc[open] .ds-howcalc__chevron { transform: rotate(180deg); }
.ds-howcalc__body { display: grid; justify-items: start; gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); }
.ds-howcalc__sections { display: grid; gap: var(--space-3); width: 100%; margin: 0; }
.ds-howcalc__section dt { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-howcalc__section dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }
.ds-howcalc__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ds-howcalc__key { font-weight: var(--weight-semibold); color: var(--color-text); }
.ds-howcalc__badge { margin-left: var(--space-2); }
.ds-howcalc__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (forced-colors: active) { .ds-howcalc, .ds-sourcechip { border: 1px solid CanvasText; } }

.ds-sourcechip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-chip); background: var(--color-surface-2); font-size: var(--text-xs); line-height: 1.5; text-decoration: none; color: var(--color-text); }
.ds-sourcechip svg { flex: none; }
.ds-sourcechip__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sourcechip__text--clip { max-width: 360px; }   /* a platform citation (title, section, pages) is clipped; the full text stays in the DOM and in the tooltip (spec 60 9.4) */
.ds-sourcechip__demo { flex: none; color: var(--color-text-muted); }
.ds-sourcechip--stale { background: var(--tint-warning); }
.ds-sourcechip__stale { display: inline-flex; flex: none; align-items: center; gap: var(--space-1); font-weight: var(--weight-semibold); color: var(--color-warning); }
a.ds-sourcechip { position: relative; }
@media (hover: hover) { a.ds-sourcechip:hover { background: var(--color-surface-hover-2); } a.ds-sourcechip--stale:hover { background: var(--tint-warning); } }
@media (pointer: coarse) { a.ds-sourcechip::after { content: ""; position: absolute; inset: -8px 0; } }

/* Prodaja report (AIS-21): bottom sheet, slicer bar on phones, tile grid ------------------------------------------------- */
.ds-scrim--sheet { display: grid; place-items: end stretch; padding: 0; z-index: var(--z-drawer); }
.ds-sheet { width: 100%; max-height: 88dvh; overflow-y: auto; padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--color-surface-1); box-shadow: var(--shadow-overlay); animation: ds-rise var(--dur-slow) var(--ease); }
.ds-sheet__handle { display: block; width: 40px; height: 4px; margin: var(--space-1) auto var(--space-2); border-radius: var(--radius-pill); background: var(--color-border-strong); }
.ds-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ds-sheet__title { font-size: var(--text-lg); line-height: 1.4; font-weight: var(--weight-bold); }
.ds-sheet__body { padding-block: var(--space-2); }
@media (forced-colors: active) { .ds-sheet { border: 1px solid CanvasText; } }

.ds-slicers__phone { display: none; }
@media (max-width: 767px) {
  .ds-slicers__bar { display: none; }
  .ds-slicers__phone { display: block; }
}
.ds-slicerbar__logo .ds-tenant-logo { height: 28px; max-width: 125px; }
.ds-slicerbar__logo .ds-tenant-wordmark { font-size: var(--text-md); }
.ds-slicerbar .ds-datebox-field__legend { width: 100%; }
.ds-slicerbar .ds-datebox-slider { height: 28px; }

.ds-report-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
.ds-report-grid > .ds-report__tile { min-height: 0; }
.ds-report-grid .ds-datatable { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ds-report-grid .ds-table-wrap { flex: 1 1 auto; min-height: 0; }
.ds-report-grid .ds-chart-frame { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.ds-report-grid .ds-hbar-wrap { padding-top: 0; }
.ds-report-grid .ds-hbar-wrap--ref { padding-top: 1.5rem; }
.ds-report-grid .ds-tile--charts { min-height: 260px; }
.ds-report-grid .ds-tile--v4 .ds-table-wrap { max-height: 420px; }
.ds-rtable--sticky-header tfoot td { position: sticky; bottom: 0; z-index: var(--z-sticky); background: var(--color-report-panel); }
@media (min-width: 1100px) {
  .ds-report-grid--sales { grid-template-columns: minmax(0, 549fr) minmax(0, 271fr) minmax(0, 363fr); grid-template-rows: 308px 298px; }
  .ds-report-grid--sales > .ds-tile--v4 { grid-column: 1 / span 2; }
  .ds-report-grid--sales .ds-tile--v4 .ds-table-wrap { max-height: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .ds-report-grid--sales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-report-grid--sales > .ds-tile--v1, .ds-report-grid--sales > .ds-tile--v4, .ds-report-grid--sales > .ds-tile--v5 { grid-column: 1 / -1; }
}
.ds-slicers .ds-slicerbar { column-gap: 10px; }
.ds-slicers .ds-slicer-btn { padding: 0 8px; }
@media (pointer: fine) { .ds-slicers .ds-datebox-item .ds-icon-btn { width: 24px; height: 24px; } }
.ds-report-grid .ds-rtable th, .ds-report-grid .ds-rtable td { padding: 3px 3px; }
.ds-report-grid .ds-rtable td:first-child, .ds-report-grid .ds-rtable th:first-child { overflow-wrap: anywhere; }
.ds-report-grid .ds-rtable td.is-num { white-space: nowrap; }
.ds-report-grid .ds-rtable td:has(> .ds-ind) { text-align: center; }
.ds-report-grid .ds-chart { height: 100%; }
.ds-report-grid .ds-chart__svg { height: 100%; }
.ds-chart--report .ds-chart__legend { column-gap: var(--space-2); }
/* the narrow promo table needs the room of a 12 px text: the month column may break "Ukupno" in two lines, as controlling.png does */
.ds-report-grid > .ds-tile--v2 { padding-inline: 8px; }
.ds-report-grid .ds-tile--v2 .ds-rtable th, .ds-report-grid .ds-tile--v2 .ds-rtable td { padding-inline: 1px; }
.ds-report-grid .ds-rtable tr > :first-child { min-width: 34px; }
.ds-chart--report .ds-chart__legend--overlay { right: 36px; }

/* Preview reports (AIS-22): Nabavka, Zalihe, Finansije, eCommerce ------------------------------------------------------- */
.ds-report-grid--preview > .ds-report__tile { min-width: 0; }
.ds-tile__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; min-width: 0; }
.ds-tile__split > * { min-width: 0; }
.ds-report-grid--preview .ds-table-wrap { max-height: 340px; }
.ds-report-grid--preview .ds-rtable tr > :first-child, .ds-report-grid .ds-tile--v1 .ds-rtable tr > :first-child { min-width: 3.5rem; }
.ds-report-grid--preview .ds-chart, .ds-report-grid--preview .ds-chart__svg { height: auto; }
.ds-report-grid--preview .ds-chart__svg { max-height: 340px; }
.ds-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 11px; }
.ds-kpi-row .ds-kpi__value { font-size: var(--text-lg); }
.ds-report__caption { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-flag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 6px; border-radius: var(--radius-xs); }
.ds-flag--negative { background: var(--tint-negative); box-shadow: inset 0 0 0 1px var(--color-negative); }
.ds-flag--negative .ds-icon { color: var(--color-negative); }
.ds-flag--warning { background: var(--tint-warning); box-shadow: inset 0 0 0 1px var(--color-warning); }
.ds-flag--warning .ds-icon { color: var(--color-warning); }
.ds-plan-status { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.ds-slicer-group--members .ds-slicer-btn { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1100px) {
  .ds-report-grid--preview { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ds-report-grid--preview > .ds-tile--span-6 { grid-column: span 6; }
  .ds-report-grid--preview > .ds-tile--span-4 { grid-column: span 4; }
  .ds-report-grid--preview > .ds-tile--span-3 { grid-column: span 3; }
  .ds-report-grid--preview > .ds-tile--span-2 { grid-column: span 2; }
}
/* a tile wide enough for a table and a chart side by side shows them so, whatever the viewport; a narrower one stacks them */
.ds-report-grid--preview > .ds-report__tile { container-type: inline-size; }
@container (min-width: 1000px) {
  .ds-tile__split:has(> .ds-chart-frame:first-child) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ds-tile__split:has(> .ds-chart-frame:last-child) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.ds-report-grid--preview .ds-rtable--labels .ds-rtable tr > :first-child { min-width: 7rem; }

/* company profile (SC-04 view, SC-15 edit): Profile.png, DESIGN S-04 */
.ds-company { display: grid; gap: var(--space-5); min-width: 0; }
.ds-company__logo { display: flex; align-items: center; justify-content: center; min-height: 36px; padding-top: var(--space-2); }
.ds-company__logo .ds-tenant-logo { height: 30px; max-width: 140px; }
.ds-company__logo-caption { margin: var(--space-4) 0 var(--space-2); }
.ds-company__legal { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.3; overflow-wrap: anywhere; }
.ds-company__address, .ds-company__ids { display: grid; margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.2; color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-company__fields { display: grid; gap: var(--space-4); }
.ds-company__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-company__sublabel { margin: 0 0 var(--space-4); font-size: var(--text-sm); text-transform: uppercase; color: var(--color-text-body); }
.ds-company__counter { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ds-company__competitors { min-height: 231px; }
.ds-company__right { display: flex; flex-direction: column; align-self: stretch; gap: var(--space-5); min-width: 0; }
.ds-company__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: auto; }
.ds-company__actions .ds-btn--dark { min-width: 274px; }
.ds-company__summary p { margin: 0; }
.ds-company__summary ul { margin: var(--space-1) 0 0; padding-inline-start: var(--space-5); }
@media (max-width: 767px) {
  /* the button area becomes a bar pinned to the bottom of the screen; the column wrapper steps aside so the whole panel is its containing block */
  .ds-company__right { display: contents; }
  .ds-company__actions { position: sticky; bottom: 0; z-index: var(--z-sticky); margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5)); padding: var(--space-3) var(--space-5); background: var(--color-surface-1); }
  .ds-company__actions .ds-btn { flex: 1 1 0; min-width: 0; }
  .ds-company__actions .ds-btn--dark { min-width: 0; }
}
.ds-company .ds-pair { gap: 0; }
.ds-company .ds-pair + .ds-pair { margin-top: var(--space-2); }
.ds-company .ds-pair__label, .ds-company .ds-pair__value { font-size: var(--text-sm); line-height: 1.2; }
.ds-company__logo-remove { margin-top: var(--space-3); }

/* subscription (SC-05): Profile - Sub.png, DESIGN S-05 */
.ds-subscription { display: grid; gap: var(--space-5); min-width: 0; }
.ds-subscription__plan { margin: 0; padding-left: calc(24px + var(--space-3)); font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; }
.ds-subscription__usage { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ds-subscription__extension { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ds-subscription .ds-pair, .ds-package .ds-pair { gap: 0; }
.ds-subscription .ds-pair + .ds-pair { margin-top: var(--space-2); }
.ds-package .ds-pair + .ds-pair { margin-top: var(--space-4); }
.ds-subscription .ds-pair__label, .ds-subscription .ds-pair__value { font-size: var(--text-sm); line-height: 1.3; }
.ds-subscription__right { min-width: 0; }
.ds-subscription__head { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; margin: 0 0 var(--space-6) 10px; }
.ds-subscription__title { margin: 0; }
.ds-subscription__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 64px 22px; padding-bottom: 64px; }
.ds-subscription__cards > * { max-width: 294px; align-self: start; }
.ds-subscription__cards--note .ds-package[aria-current="true"] { margin-bottom: 110px; }
.ds-package .ds-pair__label, .ds-package .ds-pair__value { font-size: var(--text-sm); line-height: 1.3; }
.ds-package__cta .ds-tooltip-wrap { display: flex; width: 100%; }
.ds-package__title { font-size: var(--text-md); letter-spacing: 0; margin-inline: -14px; }
.ds-package[aria-current="true"] .ds-btn[aria-disabled="true"] { opacity: 1; }
.ds-package__caption { margin: 0; font-size: var(--text-sm); }
.ds-subscription__pending { display: grid; justify-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-subscription__pending p { margin: 0; }
.ds-package-dialog__plan { margin: 0 0 var(--space-4); }
.ds-package-dialog__facts { margin-bottom: var(--space-4); }
.ds-package-dialog__facts .ds-pair { gap: 0; }
.ds-package-dialog__facts .ds-pair + .ds-pair { margin-top: var(--space-2); }
@media (max-width: 1099px) { .ds-subscription__cards { grid-template-columns: minmax(0, 420px); } .ds-subscription__cards > * { max-width: 420px; } }

/* contact us (SC-06): Profile - Contact us.png, DESIGN S-06; the panel has no padding here, the slanted shape fills it and the panel is dark around the shape */
.ds-panel:has(.ds-contact) { background: var(--color-surface-1); padding: 0; }
.ds-contact__shape { display: flex; flex-direction: column; justify-content: center; }
.ds-contact__info { display: grid; gap: var(--space-8); padding: var(--space-7) 0 var(--space-7) 46px; }
.ds-contact__block { display: grid; grid-template-columns: 66px minmax(0, 370px); column-gap: var(--space-5); align-items: center; }
.ds-contact__block > .ds-feature-icon { grid-column: 1; grid-row: 1; }
.ds-contact__title { grid-column: 2; grid-row: 1; margin: 0; overflow-wrap: anywhere; }
.ds-contact__text { grid-column: 2; margin: var(--space-2) 0 0; font-size: var(--text-md); line-height: 1.15; color: var(--color-text-body); }
.ds-contact__social { grid-column: 2; justify-self: start; display: inline-grid; place-items: center; width: 39px; height: 39px; margin-top: var(--space-5); border-radius: var(--radius-xs); background: var(--color-bg); color: var(--color-text-muted); }
.ds-contact__social--inert { color: var(--color-text-subtle); }
@media (hover: hover) { a.ds-contact__social:hover { color: var(--color-text); } }
.ds-contact__form { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: 607px; width: min(512px, 100%); margin-left: min(56%, calc(100% - 512px - var(--space-6))); }
.ds-contact__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ds-contact__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 18px; }
.ds-contact__row > * { min-width: 0; }
.ds-contact__row .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-contact__row .ds-field { min-width: 0; }
/* the caption sits above the value in the two fields of the row (the pattern of phones), so an e-mail address of 30 characters fits in the 512 px form and is never truncated */
@media (min-width: 640px) { .ds-contact__row .ds-field--inline { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; min-height: 54px; padding-block: 6px; } }
.ds-contact__fields .ds-field--area { min-height: 287px; padding-top: 12px; }
.ds-contact__fields .ds-field--area .ds-field__input { flex: 1; resize: none; }
.ds-contact__avatar { position: absolute; top: 9px; right: 9px; }
.ds-contact__submit { display: flex; justify-content: center; margin-top: 6px; }
.ds-contact__submit .ds-btn { width: min(377px, 100%); }
.ds-contact__sent { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-1); text-align: center; }
.ds-contact__check { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); }
.ds-contact__sent-text { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); line-height: 1.4; }
.ds-contact__skeleton { display: grid; gap: 10px; }
@media (max-width: 1599px) {
  .ds-panel:has(.ds-contact) { padding: var(--space-5) var(--space-6) var(--space-6) var(--space-7); }
  .ds-contact { min-height: 0; }
  .ds-contact__info { gap: var(--space-6); padding: 0; }
  .ds-contact__form { min-height: 0; width: min(512px, 100%); margin: var(--space-5) 0 0; }
}
@media (max-width: 1099px) {
  .ds-panel:has(.ds-contact) { padding: var(--space-5); }
  .ds-contact__form { width: 100%; }
  .ds-contact__submit .ds-btn { width: 100%; }
}
@media (max-width: 639px) {
  .ds-contact__row { grid-template-columns: minmax(0, 1fr); }
  .ds-contact__shape { padding: var(--space-5); }
  .ds-contact__block { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2); }
  .ds-contact__block > .ds-feature-icon, .ds-contact__title, .ds-contact__text, .ds-contact__social { grid-column: 1; grid-row: auto; }
  .ds-contact__title { font-size: var(--text-xl); }
}

/* AI chat panel: header, log, answer typesetting, evidence, feedback, actions, input (36 section 3) ------------------------------------------ */
.ds-chat { position: relative; min-width: 0; }
.ds-chat__title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-chat__head-actions { display: flex; align-items: center; gap: var(--space-1); }
.ds-chat__info { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch-min); min-height: var(--touch-min); color: var(--color-text-muted); }
.ds-chat__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-chat__chips .ds-chip { min-width: 0; height: auto; min-height: 28px; padding-block: var(--space-1); }
.ds-chat__log { position: relative; scrollbar-gutter: stable; }   /* contains the visually hidden announcements, so they neither scroll the page nor escape the log */
.ds-chat__greeting { color: var(--color-text-body); }
.ds-chat__skeleton { display: grid; gap: var(--space-3); }
.ds-chat__before { display: grid; gap: var(--space-2); }
.ds-chat__alert, .ds-chat__quota { margin-block: var(--space-2); }
.ds-chat__offer { margin: 0 0 var(--space-2); }
.ds-chat__prompts { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); }
.ds-chip--prompt { min-width: 0; height: auto; min-height: 28px; padding: var(--space-1) var(--space-3); border: 0; text-align: left; line-height: 1.4; cursor: pointer; }
@media (hover: hover) { .ds-chip--prompt:hover { background: var(--color-surface-3); } }
@media (max-width: 1099px), (pointer: coarse) { .ds-chip--prompt { min-height: var(--touch-min); } }
.ds-chat__input textarea { field-sizing: content; min-height: calc(2 * var(--lh-chat) * var(--text-chat)); overflow-y: auto; }
.ds-chat__input[data-disabled="true"] { opacity: 0.7; }
.ds-chat__counter { align-self: flex-end; flex: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-send { flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--color-surface-1); color: var(--color-send-arrow-disabled); }
.ds-send[data-state="ready"] { color: var(--color-accent); }
.ds-send[data-state="stop"] { background: var(--color-accent); color: var(--color-on-accent); }
.ds-send[disabled] { cursor: not-allowed; }
@media (hover: hover) { .ds-send[data-state="ready"]:hover { background: var(--color-surface-3); } .ds-send[data-state="stop"]:hover { background: var(--color-accent-hover); } }
@media (forced-colors: active) { .ds-send { border: 1px solid CanvasText; } }

/* waiting feedback */
.ds-typing-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); color: var(--color-text-muted); }
.ds-typing-row .ds-bar { width: 160px; }
.ds-bar--indeterminate { position: relative; }
.ds-bar--indeterminate .ds-bar__fill { display: block; width: 40%; animation: ds-indeterminate 1.4s linear infinite; }
@keyframes ds-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .ds-typing i, .ds-bar--indeterminate .ds-bar__fill { animation: none; } .ds-bar--indeterminate .ds-bar__fill { width: 100%; } }

/* messages */
.ds-msg { margin-top: var(--space-4); }
.ds-msg--ai { display: flex; gap: var(--space-3); }
.ds-msg__icon { flex: none; margin-top: 2px; }
.ds-msg__content { min-width: 0; flex: 1; }
.ds-msg__muted { margin-top: var(--space-2); color: var(--color-text-muted); }
.ds-msg__voice { margin-right: var(--space-2); vertical-align: middle; color: var(--color-text-muted); }
.ds-msg--highlight { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md); }   /* drawn inside the message: the scrolling chat log clips anything outside it */

/* answer typesetting (DESIGN 9.4) */
.ds-answer { min-width: 0; }
.ds-answer strong { font-weight: var(--weight-bold); color: var(--color-text); }
.ds-chat-heading { margin: var(--space-4) 0 0; font-size: var(--text-chat); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-chat__log .ds-chat-p { margin-top: var(--space-3); }
.ds-chat__log .ds-chat-lines { margin-top: var(--space-3); }
.ds-chat__log .ds-chat-lines > .ds-chat-p, .ds-chat__log .ds-chat-line { margin-top: 0; }
.ds-chat-notice { margin-top: var(--space-3); }
.ds-chat-notice--hypothesis .ds-alert__text { font-style: italic; }
.ds-chat-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--color-text-muted); }   /* the general-knowledge closing note (DESIGN N-01): no alert frame */
.ds-chat-note svg { flex: none; margin-top: 3px; }
.ds-alert__link { flex: none; margin-left: auto; color: inherit; font-weight: var(--weight-semibold); white-space: nowrap; }
.ds-chat-table { margin-top: var(--space-3); }
.ds-chat-table__scroll { max-width: 100%; margin-top: var(--space-2); overflow-x: auto; }
.ds-chat-table .ds-table td.is-num { white-space: nowrap; }   /* a figure and its unit stay on one line; the table scrolls sideways instead (13 columns of the delta table) */

/* evidence */
.ds-evidence { display: grid; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-evidence > * { min-width: 0; }   /* a grid item may shrink below its longest word, so the log never scrolls sideways at 320 px */
.ds-evidence__line { margin: 0; }
.ds-evidence__label { font-weight: var(--weight-semibold); color: var(--color-text); }
.ds-evidence__sources { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-evidence__facts summary { min-height: var(--touch-min); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; }
.ds-evidence__facts summary::-webkit-details-marker { display: none; }
.ds-evidence__facts[open] .ds-evidence__chevron { transform: rotate(180deg); }
.ds-evidence__facts th { text-align: left; font-weight: var(--weight-regular); color: var(--color-text-muted); }

/* feedback toolbar and report-gap note */
.ds-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.ds-feedback .ds-icon-btn[aria-pressed="true"] { background: var(--color-surface-2); color: var(--color-accent); }
.ds-feedback__note { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-feedback__form { display: grid; gap: var(--space-3); width: min(360px, calc(100vw - 48px)); }

/* action plan */
.ds-actions { margin-top: var(--space-3); }
.ds-actions__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-action__body { flex: 1 1 200px; min-width: 0; }
.ds-chat__log .ds-action__body p { margin-top: 0; }
.ds-action__title { font-weight: var(--weight-bold); color: var(--color-text); }
.ds-action__rationale { margin-top: var(--space-1); }
.ds-action__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-action__buttons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ds-action__link { text-decoration: none; }
.ds-actions__note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* tool workspace: the dimension picker of the delta mode (32 section 3.1, DESIGN 8.6 and S-03) */
.ds-picker { margin-top: 40px; }
.ds-prompt { margin: 0 0 34px; padding-inline: 31px; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 20px; color: var(--color-text); }
.ds-picker__reason { margin: var(--space-3) 0 0; padding-inline: 31px; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-picker .ds-tile { padding-inline: var(--space-2); }   /* "Sekundarna klasifikacija" stays on one line in the 187 px tile (Delta.png) */
.ds-tile[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.ds-tile-grid > .ds-tooltip-wrap > .ds-tile { flex: 1 1 auto; }   /* a tile the live model lacks sits in its tooltip and still fills the grid cell */
@media (hover: hover) { .ds-tile[aria-disabled="true"]:hover { background: var(--color-surface-2); } .ds-tile[aria-disabled="true"][aria-checked="true"]:hover { background: var(--color-surface-3); } }
@media (max-width: 1099px) {
  .ds-picker { margin-top: var(--space-5); }
  .ds-prompt, .ds-picker__reason { padding-inline: 0; }
  .ds-prompt { margin-bottom: var(--space-4); }
}
.ds-chat__delta-empty { display: grid; justify-items: center; align-content: center; gap: var(--space-3); min-height: 240px; color: var(--color-text-muted); text-align: center; }
.ds-chat__delta-empty p { margin: 0; }

/* the outdated-result chip of a tool answer (REP-R5) */
.ds-msg__stale { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; }

/* opportunity cards of the income generator (32 section 3.2, DESIGN N-13): the accent of the group is never the only cue, the group heading names it */
.ds-opportunities { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.ds-opportunities > .ds-status { justify-self: start; }
.ds-opportunity-group { display: grid; gap: var(--space-3); }
.ds-opportunity-group > .ds-chat-heading { margin-top: var(--space-2); }
.ds-opportunity { --opportunity-accent: var(--color-chart-1); display: grid; gap: var(--space-2); padding: 22px; border-inline-start: 3px solid var(--opportunity-accent); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ds-opportunity[data-group="priceMargin"] { --opportunity-accent: var(--color-chart-2); }
.ds-opportunity[data-group="promoEfficiency"] { --opportunity-accent: var(--color-chart-3); }
.ds-chat__log .ds-opportunity p, .ds-chat__log .ds-opportunity h4 { margin: 0; }
.ds-opportunity__title { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-opportunity__evidence { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.ds-opportunity__label { color: var(--color-text-muted); }
.ds-opportunity__potential { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.ds-opportunity__rule { color: var(--color-text-muted); }
.ds-opportunity__buttons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
@media (forced-colors: active) { .ds-opportunity { border: 1px solid CanvasText; } }

/* popover and menu (13 section 3.4) */
.ds-popover-anchor { display: inline-flex; }
.ds-popover-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer); }
.ds-popover { position: fixed; top: 0; left: 0; z-index: calc(var(--z-drawer) + 1); max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-3); box-shadow: var(--shadow-overlay); }
.ds-popover[role="menu"] { padding: 0; background: none; box-shadow: none; }
.ds-menu__item { width: 100%; border: 0; background: none; color: var(--color-text); font-size: var(--text-sm); text-align: left; }
.ds-menu__item--danger { color: var(--color-negative); }
.ds-menu [role="menuitem"][aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-menu [role="menuitem"]:focus-visible { background: var(--color-surface-hover-2); }
.ds-menu__text { display: grid; gap: 2px; padding-block: var(--space-2); }   /* an entry with a second line (MenuItem.Description, e.g. why it is disabled) */
.ds-menu__description { max-width: 16rem; font-size: var(--text-xs); color: var(--color-text-muted); white-space: normal; }
@media (forced-colors: active) { .ds-popover, .ds-menu, .ds-action { border: 1px solid CanvasText; } }

/* conversation list of the assistant page (36 section 3.10) */
.ds-convlist { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--color-surface-1); }
.ds-convlist__body { display: flex; flex-direction: column; gap: var(--space-1); min-height: 0; margin: -4px; padding: 4px; overflow-y: auto; scrollbar-width: thin; }   /* 4 px of room inside the scroll box: the focus ring of the rename input (2 px, offset 2 px) is not clipped (03 section 6) */
.ds-convlist__skeleton { display: grid; gap: var(--space-2); }
.ds-convlist__empty { margin: var(--space-3) 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-convlist__group { margin: var(--space-3) 0 var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: var(--tracking-upper); color: var(--color-text-muted); }
.ds-convlist__items { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ds-conv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); border-radius: var(--radius-md); }
.ds-conv[data-selected="true"] { background: var(--color-surface-3); }
.ds-conv__open { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--touch-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font-size: var(--text-sm); text-align: left; }
.ds-conv__open[aria-current="true"] { font-weight: var(--weight-semibold); }
.ds-conv__open[aria-disabled="true"] { cursor: not-allowed; color: var(--color-text-muted); }
.ds-conv__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-conv[data-archived="true"] .ds-conv__title { color: var(--color-text-muted); }
@media (hover: hover) { .ds-conv:not([data-selected="true"]):hover { background: var(--color-surface-hover-2); } }
.ds-conv__rename, .ds-assistant__title-input { flex: 1; min-width: 0; min-height: var(--touch-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-sm); }
.ds-conv__rename:focus-visible, .ds-assistant__title-input:focus-visible { outline: 2px solid var(--color-focus-ring); }
.ds-conv__rename[aria-invalid="true"], .ds-assistant__title-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--color-negative); }
.ds-conv__rename[aria-invalid="true"]:focus-visible, .ds-assistant__title-input[aria-invalid="true"]:focus-visible { outline-offset: 2px; }
.ds-conv__error, .ds-assistant__title-error { flex-basis: 100%; margin: 0 var(--space-3) var(--space-1); font-size: var(--text-xs); color: var(--color-negative); }
@media (forced-colors: active) { .ds-convlist, .ds-conv[data-selected="true"], .ds-conv__rename, .ds-assistant__title-input { border: 1px solid CanvasText; } }

/* the header chips of the full-page chat (domain dropdown, editable title) and the archived notice */
.ds-chat__head-extras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-bottom: var(--space-2); }
.ds-chat__archived { margin-block: var(--space-2); }
.ds-assistant__domain { flex: none; width: 200px; max-width: 100%; }
.ds-assistant__domain.ds-field--inline { min-height: var(--touch-min); }
.ds-assistant__title { display: flex; flex: 1 1 220px; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-width: 0; }
.ds-assistant__title-btn { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; min-height: var(--touch-min); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-assistant__title-btn:disabled { cursor: not-allowed; color: var(--color-text-muted); }
@media (hover: hover) { .ds-assistant__title-btn:not(:disabled):hover { background: var(--color-surface-hover-2); } }
.ds-assistant__title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.ds-assistant__title-new { padding: 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-convlist > .ds-btn { padding-inline: var(--space-3); white-space: nowrap; }

/* phones (DESIGN 14.1, Chat): the suggested questions are one scrolling row, each chip wraps its own text; the history button of the full-page chat is compact */
@media (max-width: 767px) {
  .ds-chat__prompts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ds-chat__prompts .ds-chip--prompt { flex: none; width: max-content; max-width: min(14rem, 70vw); height: auto; padding-block: var(--space-2); text-align: left; white-space: normal; }
  .ds-assistant__history { padding-inline: var(--space-3); letter-spacing: 0; white-space: nowrap; }
  .ds-chat__log { min-height: 96px; }   /* the log never collapses to a few pixels under the notice, the voice bar and the input */
}
/* 320 px phones (verification P1 A-7): header, notice, voice bar and input have to fit the 568 px of the sheet and leave the log 96 px. The speaker switch is the first row of the voice settings popover (the
   gear stays), the history button is its icon (its name is read out), a suggested question is one line, the quota notice and the input are compact */
@media (max-width: 399px) {
  .ds-voice-controls .ds-voice-toggle { display: none; }
  .ds-chat__prompts .ds-chip--prompt { display: block; max-width: 12rem; overflow: hidden; line-height: calc(var(--touch-min) - 2 * var(--space-2)); text-overflow: ellipsis; white-space: nowrap; }
  .ds-chat__quota { gap: var(--space-2); margin-block: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
  .ds-chat__prompts { padding-bottom: 0; }
  .ds-chat__input { gap: var(--space-1); padding-inline: var(--space-2); }   /* the field keeps a usable width beside the microphone and the send disc */
  .ds-assistant__history-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.ds-report { position: relative; }   /* the frame scrolls its tables: their hidden labels (absolutely positioned) belong to the frame, they must not widen the page on a phone */

/* voice (34 section 7, DESIGN N-01 voice states): button states beyond the delivered rules, the status line, the speaker toggle, the captions, the settings popover and SC-40 ----------------------- */
.ds-voice[data-state="requesting"], .ds-voice[data-state="thinking"] { background: var(--color-surface-2); color: var(--color-accent); }
.ds-voice[data-state="error"] { color: var(--color-negative); }
.ds-voice[data-state="unavailable"] { cursor: not-allowed; }
.ds-voice[data-state="speaking"] { gap: 3px; }
.ds-voice__spinner { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--color-accent); animation: ds-spin 0.8s linear infinite; }
.ds-voice__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ds-voice__bars i { width: 3px; height: 4px; border-radius: 1px; background: currentColor; animation: ds-wave 0.9s ease-in-out infinite; }
.ds-voice__bars i:nth-child(2) { animation-delay: 0.15s; }
.ds-voice__bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-wave { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.ds-voice--large { width: 48px; height: 48px; }
@media (max-width: 767px) { .ds-voice { width: 48px; height: 48px; } }   /* DESIGN 14.1: the voice button is 48 px on phones */
@media (prefers-reduced-motion: reduce) {
  .ds-voice[data-state="listening"]::before, .ds-voice[data-state="hearing"]::before { inset: -3px; opacity: 1; animation: none; }
  .ds-voice[data-state="listening"]::after, .ds-voice[data-state="hearing"]::after { display: none; }
  .ds-voice__spinner { animation: none; border-top-color: var(--color-accent); border-right-color: var(--color-accent); }
  .ds-voice__bars i { animation: none; height: 10px; }
}
@media (forced-colors: active) { .ds-voice, .ds-voice-toggle { border: 1px solid CanvasText; } }

.ds-chat__voice-bar { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }
.ds-chat__voice-status { margin-bottom: var(--space-2); }
.ds-voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ds-voice-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-voice-toggle[aria-checked="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
@media (hover: hover) { .ds-voice-toggle[aria-checked="false"]:hover { background: var(--color-surface-hover-2); color: var(--color-text); } }

.ds-voice-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-height: var(--touch-min); padding-inline: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-voice-meter { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; flex: none; }
.ds-voice-meter i { width: 4px; border-radius: 2px; background: var(--color-surface-3); }
.ds-voice-meter i:nth-child(1) { height: 6px; }
.ds-voice-meter i:nth-child(2) { height: 9px; }
.ds-voice-meter i:nth-child(3) { height: 12px; }
.ds-voice-meter i:nth-child(4) { height: 15px; }
.ds-voice-meter i:nth-child(5) { height: 18px; }
.ds-voice-meter i[data-on="true"] { background: var(--color-accent); }
.ds-voice-status__text { font-weight: var(--weight-medium); color: var(--color-text); }
.ds-voice-status__partial { flex: 1 1 12rem; min-width: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }

.ds-voice-caption { margin-top: var(--space-3); padding-left: var(--space-3); border-left: 2px solid var(--color-border-strong); font-size: var(--text-sm); color: var(--color-text-body); }
.ds-voice-caption__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.ds-voice-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ds-voice-caption__hint { font-size: var(--text-xs); }
.ds-voice-caption__text { margin: 0; }
.ds-voice-caption__sentence { padding: 1px 4px; border-radius: var(--radius-xs); }
.ds-voice-caption__sentence[data-current="true"] { background: var(--color-surface-2); color: var(--color-text); }
.ds-voice-caption__mock { min-height: var(--touch-min); }
.ds-msg__edit { margin: -10px -12px -10px var(--space-1); vertical-align: middle; }

.ds-voice-pop { display: grid; gap: var(--space-4); width: min(340px, calc(100vw - 48px)); }
.ds-voice-pop__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ds-voice-pop__field { display: grid; gap: var(--space-2); }
.ds-voice-pop__field > label { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-voice-pop__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-voice-pop__status { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-voice-pop__status p { margin: 0; }

.ds-voice-panel { display: grid; justify-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-5); border-radius: var(--radius-chat); background: var(--color-surface-2); text-align: center; }
.ds-voice-orb { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--color-surface-3); color: var(--color-accent); }
.ds-voice-orb[data-state="listening"], .ds-voice-orb[data-state="hearing"] { background: var(--color-accent); color: var(--color-on-accent); }
.ds-voice-orb[data-state="listening"]::before, .ds-voice-orb[data-state="listening"]::after,
.ds-voice-orb[data-state="hearing"]::before, .ds-voice-orb[data-state="hearing"]::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: ds-ring 1.2s var(--ease) infinite; }
.ds-voice-orb[data-state="listening"]::after, .ds-voice-orb[data-state="hearing"]::after { animation-delay: 0.6s; }
.ds-voice-orb[data-state="thinking"]::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--color-accent); animation: ds-spin 0.9s linear infinite; }
.ds-voice-orb[data-state="speaking"] { background: var(--color-accent-strong); color: var(--color-on-accent); }
.ds-voice-orb .ds-voice__bars { height: 40px; gap: 6px; }
.ds-voice-orb .ds-voice__bars i { width: 7px; animation-name: ds-wave-big; }
@keyframes ds-wave-big { 0%, 100% { height: 8px; } 50% { height: 40px; } }
.ds-voice-panel__status { justify-content: center; }
.ds-voice-panel .ds-voice-status__text { font-size: var(--text-lg); }
.ds-voice-panel .ds-voice-status__partial { flex-basis: 100%; text-align: center; }
.ds-voice-panel__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.ds-voice-panel__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-voice-panel__engines { display: grid; gap: 2px; font-size: var(--text-xs); color: var(--color-text-subtle); }
@media (prefers-reduced-motion: reduce) {
  .ds-voice-orb[data-state="listening"]::before, .ds-voice-orb[data-state="hearing"]::before { inset: -4px; opacity: 1; animation: none; }
  .ds-voice-orb[data-state="listening"]::after, .ds-voice-orb[data-state="hearing"]::after { display: none; }
  .ds-voice-orb[data-state="thinking"]::before { animation: none; border-color: var(--color-accent); }
  .ds-voice-orb .ds-voice__bars i { animation: none; height: 24px; }
}
@media (min-width: 768px) {
  .ds-voice-panel { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--space-6); padding: var(--space-4) var(--space-6); text-align: left; }
  .ds-voice-panel .ds-voice-orb { grid-row: 1 / span 4; }
  .ds-voice-panel__status, .ds-voice-panel__actions { justify-content: flex-start; }
  .ds-voice-panel .ds-voice-status__partial { text-align: left; }
}
@media (max-width: 767px) {
  .ds-voice-panel { position: fixed; inset: 0; z-index: var(--z-dialog); align-content: center; border-radius: 0; background: var(--color-surface-1); padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

/* tasks, notifications and the mail outbox (AIS-39): origin chip, due and effect badges, stepper, list and detail of "Moji zadaci", notification rows, outbox -------------------- */
.ds-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-prewrap--box { max-height: 20rem; overflow: auto; padding: var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-dialog__form { display: grid; gap: var(--space-4); margin-top: var(--space-4); }

/* the filter bar on the surface-2 content panel: fields and chips take the darker fill so that they stay visible */
.ds-filterbar--panel .ds-field { --field-bg: var(--color-surface-1); }
.ds-filterbar--panel .ds-search { min-width: min(100%, 22rem); }
.ds-filterbar--panel .ds-chip--filter { background: var(--color-surface-1); }
.ds-filterbar--panel .ds-chip--filter[aria-pressed="true"] { background: var(--color-surface-3); }
@media (max-width: 639px) {
  .ds-filterbar--scroll .ds-filterbar__filters { flex-wrap: nowrap; overflow-x: auto; }
  .ds-filterbar--scroll .ds-chip { flex: none; }
}

.ds-origin { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text-body); font-size: var(--text-xs); white-space: nowrap; }
.ds-origin--compact { flex: none; width: 24px; padding: 0; justify-content: center; }
.ds-due { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-due__date { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-effect { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--tint-neutral); color: var(--color-text-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-effect--muted { font-weight: var(--weight-regular); color: var(--color-text-muted); }

.ds-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-stepper__step { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-stepper__step + .ds-stepper__step::before { content: ""; width: 24px; height: 2px; margin-right: var(--space-1); background: var(--color-border-strong); }
.ds-stepper__mark { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--color-border-strong); border-radius: 50%; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ds-stepper__step.is-done .ds-stepper__mark { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.ds-stepper__step.is-current { color: var(--color-text); font-weight: var(--weight-semibold); }
.ds-stepper__step.is-current:not(.is-done) .ds-stepper__mark { border-color: var(--color-accent); color: var(--color-accent); }
.ds-stepper--compact .ds-stepper__label { font-size: var(--text-xs); }

.ds-tasks-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.ds-tasks-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-tasks-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 479px) { .ds-tasks-head > .ds-segmented { display: flex; flex-wrap: wrap; width: 100%; border-radius: var(--radius-lg); } .ds-tasks-head > .ds-segmented .ds-segmented__item { flex: 1 1 40%; min-width: 0; padding-inline: var(--space-2); } }   /* the four task tabs on a phone: two rows of two */
.ds-tasks { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ds-tasks__list, .ds-tasks__detail { min-width: 0; }
.ds-tasks__list .ds-table th, .ds-tasks__list .ds-table td { padding-inline: var(--space-3); }
.ds-tasks__detail-body { display: grid; gap: var(--space-4); }
@media (max-width: 1099px) {
  .ds-tasks { grid-template-columns: minmax(0, 1fr); }
  .ds-tasks__detail { display: none; }
}
.ds-task-title { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ds-task-title__text { min-width: 7rem; overflow-wrap: break-word; }
.ds-task-title__comments { flex: none; color: var(--color-text-muted); }
/* the origin column says it in words from 1100 px up; below that the glyph beside the title is all there is */
.ds-task-title .ds-origin--compact { display: none; }
@media (max-width: 1099px) { .ds-task-title .ds-origin--compact { display: inline-flex; } }
.ds-tasks--assignee .ds-task-title .ds-origin--compact { display: inline-flex; }

.ds-task-detail { display: grid; gap: var(--space-4); min-width: 0; }
.ds-task-detail > .ds-status { justify-self: start; }
.ds-task-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.ds-task-detail__title { font-size: var(--text-lg); line-height: 1.4; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ds-task-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ds-task-detail__section { display: grid; gap: var(--space-2); }
.ds-task-detail__h { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-task-detail__caption, .ds-task-detail__muted { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-task-detail__measure { font-weight: var(--weight-semibold); }
.ds-task-detail__origin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-task-detail__send { display: flex; justify-content: flex-end; }
.ds-task-effects, .ds-task-comments, .ds-task-history { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-task-effects__item { display: grid; gap: var(--space-1); }
.ds-task-effects__kind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-task-effects__text { font-size: var(--text-sm); color: var(--color-text-body); }
.ds-task-comments__meta { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-task-history__item { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-body); }
.ds-task-history__when { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ds-task-history__who { font-weight: var(--weight-semibold); }
@media (max-width: 639px) {
  .ds-task-history__item { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.ds-notif-group + .ds-notif-group { margin-top: var(--space-5); }
.ds-notif-group__title { margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-notif-list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ds-notif { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text); text-align: left; }
@media (hover: hover) { .ds-notif:hover { background: var(--color-surface-hover-2); } }
.ds-notif.is-read { color: var(--color-text-muted); }
.ds-notif__body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ds-notif__title { font-weight: var(--weight-semibold); overflow-wrap: break-word; }
.ds-notif.is-read .ds-notif__title { font-weight: var(--weight-regular); }
.ds-notif__detail { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: break-word; }
.ds-notif__meta { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ds-notif__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.ds-notif__go { flex: none; color: var(--color-text-muted); }
.ds-notif-skeleton { display: grid; gap: var(--space-3); }
/* phones: full-width rows, the time under the text instead of beside it, a card with less padding */
@media (max-width: 639px) {
  .ds-notif-card, .ds-tasks__list .ds-card { padding: var(--space-3); }
  .ds-notif { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: var(--space-1) var(--space-3); padding-inline: var(--space-2); }
  .ds-notif > .ds-feature-icon { grid-row: 1 / span 2; }
  .ds-notif__meta { grid-column: 2; }
  .ds-notif__go { display: none; }
  .ds-tasks__list .ds-table--stack td { flex-wrap: wrap; justify-content: flex-start; gap: var(--space-1) var(--space-3); }
  .ds-tasks__list .ds-table--stack td.ds-table__primary { display: flex; }
  .ds-tasks__list .ds-table--stack td:empty { display: none; }
}

.ds-outbox__banner { margin-bottom: var(--space-4); }
.ds-outbox__channel { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-outbox__recipient { display: grid; min-width: 0; overflow-wrap: anywhere; }
.ds-outbox__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-outbox__body-title { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); }
@media (forced-colors: active) { .ds-origin, .ds-effect, .ds-notif__dot { border: 1px solid CanvasText; } }

/* access matrix (13 section 5.4): rows of three native radios against the levels none / read / contribute; below 640 px a row stacks and every radio shows its level */
.ds-matrix { display: grid; min-width: 0; }
.ds-matrix__head, .ds-matrix__row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 4.5rem); align-items: center; gap: var(--space-2); }
.ds-matrix__head { padding-bottom: var(--space-2); font-size: var(--text-xs); line-height: 1.3; font-weight: var(--weight-semibold); color: var(--color-text-muted); text-align: center; }
.ds-matrix__row { min-height: var(--touch-min); padding-block: var(--space-2); border-top: 1px solid var(--color-border-subtle); }
.ds-matrix__label { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
.ds-matrix__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.ds-matrix__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-matrix__label .ds-status { height: auto; min-height: 24px; padding-block: var(--space-1); border-radius: var(--radius-chip); line-height: 1.3; }
.ds-matrix__levels { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, 4.5rem); gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.ds-matrix__cell { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); cursor: pointer; }
.ds-matrix__cell:has(input:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-matrix__locked { grid-column: 2 / -1; font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-matrix__hint { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
@media (min-width: 640px) { .ds-matrix__level { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 639px) {
  .ds-matrix__head { display: none; }
  .ds-matrix__row { grid-template-columns: minmax(0, 1fr); }
  .ds-matrix__levels { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
  .ds-matrix__locked { grid-column: 1; }
  .ds-matrix__cell { gap: var(--space-2); font-size: var(--text-sm); }
}

/* users and access (SC-25): the tab row, the toolbar chips, the two-line cells of the users table, the sections of the editor drawers, switch rows and check lists */
.ds-admin-tabs { margin-bottom: var(--space-5); }
.ds-admin-tabs .ds-tabstrip { flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.ds-admin-bar .ds-filterbar__actions { margin-left: auto; }
@media (max-width: 639px) { .ds-admin-tabs .ds-section-tab { font-size: var(--text-lg); white-space: normal; text-align: left; } }
.ds-admin-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-admin-alert { margin-bottom: var(--space-4); }
.ds-admin-card { padding: var(--space-4); }
.ds-admin-card .ds-table th, .ds-admin-card .ds-table td { padding-inline: var(--space-2); }
.ds-admin-card .ds-table th { white-space: normal; }
.ds-users-table td:nth-child(2) { overflow-wrap: break-word; }
@media (pointer: fine) { .ds-users-table .ds-table__actions .ds-icon-btn { width: 36px; height: 36px; } }   /* three actions per row: 36 px for a mouse, 44 px for touch */
/* from 1100 px up the row actions stay in view while the wide users table scrolls sideways */
@media (min-width: 1100px) {
  .ds-users-table .ds-table__actions { position: sticky; right: 0; background: var(--color-surface-1); box-shadow: -1px 0 0 var(--color-border-strong); }
  .ds-users-table th.ds-table__actions { z-index: calc(var(--z-sticky) + 1); background: var(--color-surface-2); }
}
@media (hover: hover) and (min-width: 1100px) { .ds-users-table tbody tr:hover td.ds-table__actions { background: var(--color-surface-hover-2); } }
.ds-admin-card .ds-table td { padding-block: var(--space-2); }
.ds-admin-card .ds-chip { min-width: 0; }
.ds-admin-card .ds-chip-list { gap: var(--space-1); }
.ds-admin-card .ds-status { white-space: nowrap; }
.ds-user-cell { display: grid; gap: 2px; justify-items: start; min-width: 0; }
.ds-user-cell__name { font-weight: var(--weight-bold); white-space: nowrap; }
.ds-user-cell__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
/* phones: the sticky name column is narrow (the name and the owner badge wrap), so more of the scrolling columns stays in view */
@media (max-width: 639px) {
  .ds-admin-card { padding: var(--space-3); }
  .ds-users-table td:first-child { max-width: 9.5rem; }
  .ds-users-table .ds-user-cell__name { white-space: normal; }
  .ds-users-table .ds-user-cell__sub { overflow-wrap: anywhere; }
  .ds-users-table .ds-user-cell .ds-status { height: auto; min-height: 24px; padding-block: var(--space-1); border-radius: var(--radius-chip); white-space: normal; line-height: 1.3; }
}
.ds-form-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.ds-form-section:first-of-type { padding-top: 0; border-top: 0; }
.ds-form-section__title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-form-section .ds-formfield, .ds-csettings .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-form-section__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ds-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.ds-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--touch-min); font-size: var(--text-sm); color: var(--color-text); }
.ds-check-list { display: grid; min-width: 0; }
.ds-check-list--scroll { max-height: 16rem; overflow-y: auto; }
.ds-temp-password { display: flex; align-items: flex-end; gap: var(--space-2); }
.ds-temp-password .ds-formfield { flex: 1; min-width: 0; }
.ds-csettings { display: grid; gap: var(--space-4); max-width: 40rem; }
.ds-csettings__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
@media (max-width: 639px) { .ds-csettings__pair { grid-template-columns: minmax(0, 1fr); } }

/* domains (SC-26): the banner row, the grid of domain cards (1 / 2 / 3 columns), the card and the panels of the access drawer */
.ds-domains-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.ds-domains-head .ds-alert { flex: 1 1 18rem; }
.ds-domain-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 768px) { .ds-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ds-domain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-domain-card { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ds-domain-card[aria-busy="true"] { opacity: 0.6; }
.ds-domain-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.ds-domain-card__name { min-width: 0; overflow-wrap: anywhere; }
.ds-domain-card__facts { display: grid; gap: var(--space-1); font-size: var(--text-sm); }
.ds-domain-card__warning { display: flex; align-items: center; gap: var(--space-2); color: var(--color-warning); font-weight: var(--weight-bold); }
.ds-domain-card__reason { color: var(--color-text-muted); }
.ds-domain-card__reason::first-letter { text-transform: uppercase; }
.ds-domain-card__switch { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.ds-domain-card__switch .ds-field__help { margin-top: 0; }
.ds-domain-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ds-domain-card__icons { display: inline-flex; flex-wrap: wrap; }
.ds-domain-access__alert { margin-top: var(--space-4); }
.ds-domain-access__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.ds-domain-card__switch .ds-toggle::before { content: ""; position: absolute; inset: -10px 0; }   /* the 44 x 24 pill gets a 44 x 44 hit area */

/* data sources (SC-27, AIS-43): the head row, the eight-column table, the drawer of one source and its forms -------- */
.ds-sources-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.ds-sources-head .ds-btn--ghost { margin-right: auto; white-space: normal; text-align: left; }
.ds-sources-table .ds-table { min-width: 66rem; }   /* eight columns: below 1100 px the table scrolls sideways inside its wrapper, it never stacks */
.ds-sources-table .ds-table__primary { white-space: nowrap; }
.ds-sources-table td:nth-child(2) { min-width: 11.5rem; }   /* the type label takes two lines at most */
.ds-sources-table td:nth-child(n+6) { white-space: nowrap; }   /* dates stay on one line */
@media (max-width: 639px) { .ds-sources-table td.ds-table__primary { max-width: 9.5rem; white-space: normal; overflow-wrap: anywhere; } }   /* phones: a narrow name column leaves room for the scrolling ones */
.ds-source-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.ds-source-live { margin-inline-start: var(--space-2); vertical-align: middle; }   /* the live chip after the name of a source in the list */
.ds-source-alert { margin-top: var(--space-4); }
.ds-source-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-source-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-source-actions .ds-tooltip { left: 0; transform: none; }   /* the button sits near the left edge of the drawer: the tooltip opens rightwards */
.ds-source-table .ds-table th, .ds-source-table .ds-table td { padding-inline: var(--space-2); }
.ds-source-table .ds-table th { white-space: normal; }
.ds-source-table .ds-table td { height: auto; padding-block: var(--space-2); vertical-align: top; }
.ds-source-table .ds-status { white-space: nowrap; }
.ds-source-notes { display: grid; gap: var(--space-1); }
.ds-source-notes .ds-field__help { margin: 0; }
.ds-source-row-actions { display: inline-flex; gap: var(--space-1); white-space: nowrap; }
@media (min-width: 640px) { .ds-source-table .ds-table__actions { width: 1%; } }   /* as wide as the three actions of a suggestion side by side, the text columns share the rest */
@media (max-width: 639px) { .ds-source-row-actions { flex-wrap: wrap; justify-content: flex-end; } }
@media (max-width: 479px) { .ds-source-tabs { display: flex; } .ds-source-tabs .ds-segmented__item { flex: 1 1 auto; min-width: 0; padding-inline: var(--space-2); } }   /* three tabs across a phone */
@media (pointer: fine) { .ds-source-row-actions .ds-btn { --btn-h: 32px; } }   /* three actions per suggestion: 32 px for a mouse, 44 px for touch */
.ds-source-tables summary { min-height: var(--touch-min); display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); cursor: pointer; }
.ds-source-tables ul { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-text-body); }
.ds-source-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-form-group { display: grid; gap: var(--space-2); min-width: 0; }
.ds-source-footer { display: contents; }   /* only a handle for the focus: the buttons stay items of the drawer footer */

/* ---- Instructions (SC-22, DESIGN N-05): strip, segment nav, list, detail, editor, submit step, versions, conflicts, usage -------------------------- */
.ds-istrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-text); }
.ds-istrip__item { white-space: nowrap; }
.ds-istrip__conflicts { border: 0; cursor: pointer; font-family: inherit; }
.ds-segnav { display: flex; flex-direction: column; gap: var(--space-1); }
.ds-segnav__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--touch-min); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.ds-segnav__item[aria-selected="true"] { background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-bold); }
@media (hover: hover) { .ds-segnav__item:not([aria-selected="true"]):hover { background: var(--color-surface-hover-2); color: var(--color-text); } }
.ds-segnav__number { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface-2); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ds-segnav__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.ds-segnav__caption { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-subtle); }
.ds-segnav__count { flex: none; min-width: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.ds-segnav__item[aria-selected="true"] .ds-segnav__count, .ds-segnav__item[aria-selected="true"] .ds-segnav__number { background: var(--color-surface-1); }
@media (max-width: 1099px) {
  .ds-segnav { flex-direction: row; gap: 2px; padding: 2px; overflow-x: auto; border-radius: var(--radius-pill); background: var(--color-surface-2); scrollbar-width: thin; }
  .ds-segnav__item { flex: none; width: auto; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-pill); white-space: nowrap; }
  .ds-segnav__number, .ds-segnav__caption { display: none; }
}
.ds-ifilters { margin-bottom: var(--space-4); }
.ds-ifilters .ds-filterbar__actions { margin-left: auto; }
.ds-ibadges { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ds-mandatory { background: var(--color-accent); color: var(--color-on-accent); }
.ds-itable__title { display: grid; gap: var(--space-1); }
.ds-itable__name { font-weight: var(--weight-semibold); }
.ds-itable__summary { font-size: var(--text-xs); font-weight: var(--weight-regular); color: var(--color-text-muted); white-space: normal; }
.ds-itable__level { display: grid; gap: 2px; }
.ds-itable__target { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-itable .ds-table td { height: auto; padding-block: var(--space-2); vertical-align: top; }
.ds-itable .ds-table th { white-space: normal; }
.ds-itable__cards { display: none; margin: 0; padding: 0; list-style: none; }
@media (max-width: 639px) {
  .ds-itable .ds-table-wrap { display: none; }
  .ds-itable__cards { display: grid; gap: var(--space-3); }
}
.ds-icard { display: grid; gap: var(--space-2); width: 100%; padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text); font-family: inherit; font-size: var(--text-sm); text-align: left; }
.ds-icard--compact { padding: var(--space-3); }
button.ds-icard { cursor: pointer; }
@media (hover: hover) { button.ds-icard:hover { background: var(--color-surface-hover-2); } }
.ds-icard__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-icard__title { font-weight: var(--weight-semibold); }
.ds-icard__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-icard__summary { color: var(--color-text-body); white-space: pre-wrap; }
.ds-levelchips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-levelchips__chip[aria-disabled="true"] { color: var(--color-text-disabled); cursor: not-allowed; }
.ds-levelchips__chip[aria-checked="true"] { background: var(--color-surface-3); color: var(--color-text); font-weight: var(--weight-semibold); }
.ds-precedence { display: grid; gap: var(--space-1); }
.ds-precedence__caption { margin: 0; }
.ds-idetail { display: grid; gap: var(--space-4); }
.ds-idetail > .ds-btn { justify-self: start; }
.ds-idetail__head { display: grid; gap: var(--space-3); }
.ds-idetail__titles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-idetail__titles h2 { margin: 0; }
.ds-idetail__meta, .ds-idetail__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.ds-idetail__levels { display: grid; gap: var(--space-2); }
.ds-idetail__tabs { align-self: start; }
.ds-idetail__panel { display: grid; gap: var(--space-4); }
.ds-idetail__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-ieditor, .ds-segform { display: grid; gap: var(--space-3); }
.ds-ieditor .ds-formfield, .ds-segform .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-segform__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.ds-issue-warning { margin-top: calc(-1 * var(--space-2)); }
.ds-thresholds { display: grid; gap: var(--space-2); }
.ds-thresholds .ds-btn { justify-self: start; }
.ds-thresholds__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-thresholds__row .ds-formfield { flex: 1 1 10rem; }
.ds-thresholds__row .ds-field--inline { flex-direction: column; align-items: stretch; }
.ds-overrides { display: grid; gap: var(--space-2); }
.ds-approval, .ds-reviewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-approval { position: sticky; top: 0; z-index: var(--z-sticky); }
.ds-approval__text, .ds-reviewbar__text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.ds-approval__actions, .ds-reviewbar__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.ds-submit { display: grid; gap: var(--space-4); }
.ds-submit__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.ds-submit .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-submit__preview { display: grid; gap: var(--space-3); }
.ds-submit__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-versions { display: grid; gap: var(--space-3); }
.ds-versions__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-versions__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-versions__row.is-current { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.ds-versions__number { font-weight: var(--weight-semibold); }
.ds-versions__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); flex: 1 1 auto; min-width: 0; }
.ds-versions__diff-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ds-diff { display: grid; gap: var(--space-3); }
.ds-diff__field { display: grid; gap: var(--space-1); }
.ds-diff__label { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-diff__pair { display: grid; gap: var(--space-2); }
.ds-diff--side .ds-diff__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-diff__side { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-diff__side--before { background: var(--tint-negative); color: var(--color-negative); }
.ds-diff__side--after { background: var(--tint-positive); color: var(--color-positive-strong); }
.ds-diff__glyph { flex: none; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ds-diff__text { color: var(--color-text-body); }
@media (max-width: 767px) { .ds-diff--side .ds-diff__pair { grid-template-columns: minmax(0, 1fr); } }
.ds-conflict { display: grid; gap: var(--space-3); }
.ds-conflict__cards { display: grid; gap: var(--space-3); }
.ds-conflict__side { display: grid; gap: var(--space-1); min-width: 0; }
.ds-conflict__caption { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-conflict .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-conflict__actions { margin-top: var(--space-3); }
@media (min-width: 900px) {
  .ds-dialog:has(.ds-conflict) { width: min(880px, 100%); }
  .ds-conflict__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-conflicts__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-conflicts__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-conflicts__text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.ds-usage { display: grid; gap: var(--space-3); }
.ds-usage__counts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.ds-usage__counts li { display: flex; align-items: center; gap: var(--space-2); }
.ds-usage__trend { display: grid; gap: var(--space-1); }
.ds-create-instruction { display: grid; gap: var(--space-3); }
.ds-create-instruction .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-chipfield .ds-chip-editor { display: grid; gap: var(--space-2); }

/* instruction preview ("Pregled efekta", 45 section 8) */
.ds-preview { display: grid; gap: var(--space-4); }
.ds-preview__head { display: grid; gap: var(--space-1); }
.ds-preview__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ds-preview__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-preview__questions { display: grid; gap: var(--space-3); }
.ds-preview__question { display: flex; align-items: flex-end; gap: var(--space-2); }
.ds-preview__field { flex: 1 1 auto; min-width: 0; }
.ds-preview .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-preview__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-preview__tools .ds-btn { min-height: 44px; }
.ds-preview__verified { flex: 1 1 16rem; min-width: 0; }
.ds-preview__progress { display: grid; gap: var(--space-2); }
.ds-preview__progress-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-preview__results { display: grid; gap: var(--space-3); }
.ds-preview__pair { display: grid; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-preview__pair-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ds-preview__pair-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-preview__pair-question { flex: 1 1 auto; min-width: 0; font-size: var(--text-sm); }
.ds-preview__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ds-preview__column { display: grid; align-content: start; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-1); }
.ds-preview__column-title { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-preview__answer { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed, 1.5); overflow-wrap: anywhere; }
.ds-preview__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ds-idetail__preview { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-1); }
@media (max-width: 767px) {
  .ds-preview__columns { grid-template-columns: minmax(0, 1fr); }
}

/* ---- SC-23 Documents and sources (DESIGN N-06, 41 section 9) ---- */
.ds-feeds__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-feeds__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch-min); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-subtle); }
.ds-feeds__row:last-child { border-bottom: 0; }
.ds-feeds__text { display: grid; gap: 2px; min-width: 0; }
.ds-feeds__name { font-weight: var(--weight-semibold); }
.ds-feeds__meta, .ds-feeds__state { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-feeds__failed { color: var(--color-warning); }
.ds-stable .ds-table td { height: auto; padding-block: var(--space-2); vertical-align: top; }
.ds-stable .ds-table th { white-space: normal; }
.ds-stable__name { font-weight: var(--weight-semibold); }
.ds-stable__status { display: grid; gap: var(--space-1); }
.ds-stable__hint { font-size: var(--text-xs); color: var(--color-warning); }
@media (max-width: 1099px) {
  .ds-stable .ds-table-wrap { overflow-x: auto; }
  .ds-stable .ds-table { min-width: 960px; }   /* seven columns: the table scrolls inside its card instead of squeezing the names (DESIGN 14.1) */
  .ds-stable .ds-table th:first-child, .ds-stable .ds-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--color-surface-1); }
}
.ds-sdetail { display: grid; gap: var(--space-5); }
.ds-sdetail__section { display: grid; gap: var(--space-2); }
.ds-sdetail__section h3, .ds-sdetail__section h4 { margin: 0; }
.ds-sdetail__subtitle { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-sdetail__domains { margin-top: var(--space-2); }
.ds-sdetail__excerpt { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-text-body); font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-sdetail__link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.ds-sdetail__versions { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-sdetail__version { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-sdetail__version-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-sdetail__form { display: grid; gap: var(--space-4); }
.ds-sdetail__file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.ds-sdetail__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-wizard { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.ds-wizard__step { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.ds-wizard__step.is-current { color: var(--color-text); font-weight: var(--weight-semibold); }
.ds-wizard__step.is-current .ds-stepper__mark { border-color: var(--color-accent); color: var(--color-accent); }
.ds-wizard__step.is-done .ds-stepper__mark { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.ds-wizard__body { display: grid; gap: var(--space-4); }
.ds-wizard__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-uprows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-uprow { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-uprow__file { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.ds-uprow__name { font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.ds-uprow__size { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-uprow__error { display: flex; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-negative); }
.ds-uprow .ds-btn { justify-self: start; }

/* ---- SC-33 Template library (43 section 8): notice, filter bar, card grid, detail drawer, preview, copy dialog, editor ---- */
.ds-templates { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.ds-templates__types { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-templates__types .ds-chip { min-width: 0; }
.ds-templates .ds-filterbar__filters .ds-select-wrap { min-width: 11rem; }
.ds-templates__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1279px) { .ds-templates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ds-templates__grid { grid-template-columns: minmax(0, 1fr); } }
.ds-tcard { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; background: var(--color-surface-1); }
.ds-tcard__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-tcard__badges .ds-status { min-width: 0; }
.ds-tcard__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-tcard__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin: 0; color: var(--color-text-body); font-size: var(--text-sm); }
.ds-tcard__meta { margin: 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
.ds-tcard__copies { margin: 0; color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ds-tcard__actions { display: flex; justify-content: flex-end; margin-top: auto; }
.ds-tdetail { display: grid; gap: var(--space-4); }
.ds-tdetail > p { margin: 0; }
.ds-tdetail__versions { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-tdetail__versions li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-tdetail__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ds-tpreview { display: grid; gap: var(--space-4); }
.ds-tpreview__section { display: grid; gap: var(--space-2); }
.ds-tpreview__section h3, .ds-tpreview__section p { margin: 0; }
.ds-tpreview__list, .ds-tpreview__steps { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); color: var(--color-text-body); font-size: var(--text-sm); }
.ds-tpreview__steps li { display: grid; gap: 2px; }
.ds-tpreview__steps li > strong { color: var(--color-text); }
.ds-tpreview__terms { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-sm); }
.ds-tpreview__terms dt { font-weight: var(--weight-semibold); color: var(--color-text); }
.ds-tpreview__terms dd { margin: 0; color: var(--color-text-body); }
.ds-tpreview__table th, .ds-tpreview__table td { padding: var(--space-2) var(--space-3); vertical-align: top; }
.ds-tpreview__table tbody th { position: static; height: auto; text-transform: none; letter-spacing: normal; color: var(--color-text); font-size: var(--text-sm); background: transparent; }
.ds-tpreview__threshold { display: block; white-space: nowrap; }
.ds-tpreview__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-tpreview__placeholder { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--color-surface-3); color: var(--color-accent); font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
.ds-copy-template { display: grid; gap: var(--space-3); }
.ds-copy-template .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-copy-template > p { margin: 0; }
.ds-tlink { color: var(--color-accent); font-size: var(--text-sm); text-decoration: underline; }
.ds-teditor { display: grid; gap: var(--space-3); }
.ds-teditor__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ds-teditor__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .ds-teditor__row, .ds-teditor__row--3 { grid-template-columns: minmax(0, 1fr); } }
.ds-teditor__tools { display: flex; justify-content: flex-end; margin-top: var(--space-1); }
.ds-teditor__issues { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-teditor__issues h3 { margin: 0; }
.ds-teditor__issues ul { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-4); }
.ds-teditor__issues li { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-xs); overflow-wrap: anywhere; }

/* SC-21 guided entry (46 section 6, DESIGN N-05): the conversation card beside the proposals card; stacked behind segmented tabs below 1100 px and in drawer mode. */
.ds-guided { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; margin-top: var(--space-4); }
.ds-guided--stacked { grid-template-columns: minmax(0, 1fr); }
.ds-guided__tabs { justify-self: start; }
.ds-guided__chat, .ds-guided__proposals { min-width: 0; }
.ds-guided__chat[hidden], .ds-guided__proposals[hidden] { display: none; }
.ds-guided__loading { display: grid; gap: var(--space-3); }
.ds-guided__banner { margin-bottom: var(--space-3); }
.ds-guided__log { display: flex; flex-direction: column; gap: var(--space-3); max-height: 50vh; overflow-y: auto; padding: var(--space-3) 0; font-size: var(--text-chat); line-height: var(--lh-chat); color: var(--color-text-body); scrollbar-gutter: stable; }
.ds-guided__ai { margin: 0; }
.ds-guided__user { margin-top: 0; }
.ds-guided__status { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; margin-top: var(--space-2); font-size: var(--text-sm); }
.ds-guided__input { margin-top: var(--space-2); }
.ds-guided__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.ds-guided__error, .ds-guided__closed { margin-top: var(--space-3); }
.ds-guided__list { display: grid; gap: var(--space-3); }
.ds-guided__card { background: var(--color-surface-2); }
.ds-guided__card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ds-guided__card-title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-guided__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-guided__levels { margin-top: var(--space-2); }
.ds-guided__lines { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; padding-left: var(--space-4); font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-guided__card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.ds-guided__finish { display: flex; justify-content: flex-end; margin-top: var(--space-4); }
.ds-guided__editor { display: grid; gap: var(--space-4); }
.ds-guided-page { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.ds-guided-page__title { margin: 0; }
.ds-guided-page__start { display: grid; gap: var(--space-4); max-width: 520px; margin-top: var(--space-4); }
@media (max-width: 1099px) { .ds-guided { grid-template-columns: minmax(0, 1fr); } }
.ds-guided--stacked .ds-guided__banner { flex-wrap: wrap; }
.ds-guided--stacked .ds-guided__banner .ds-alert__text { flex: 1 1 200px; }
/* SC-24 knowledge gaps (42 section 7, DESIGN N-07) */
.ds-gaps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-gaps__main { min-width: 0; }
.ds-gaps__tabs { margin-bottom: var(--space-4); flex-wrap: wrap; }
.ds-gaps__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.ds-gaps__toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ds-gaps__toolbar .ds-search { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.ds-gaps__toolbar .ds-field__input { min-width: 0; }
.ds-gaps__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ds-gaps__empty { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); color: var(--color-positive); font-size: var(--text-md); }
.ds-gaps__empty span { color: var(--color-text); }
.ds-gap-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-gap-row__main { display: grid; gap: var(--space-2); flex: 1 1 320px; min-width: 0; }
.ds-gap-row__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-gap-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-body); }
.ds-gap-row__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; }
.ds-gap-row__actions .ds-btn { max-width: 100%; white-space: normal; }
.ds-gap-kpis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ds-gap-kpis__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
.ds-gap-kpis__period { justify-self: end; max-width: 100%; overflow-x: auto; }
.ds-meter { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-meter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ds-meter__label { font-size: var(--text-sm); color: var(--color-text-body); }
.ds-meter__value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-meter__track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--color-surface-1); }
.ds-meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); background: var(--color-accent); }
.ds-meter--warning .ds-meter__fill { background: var(--color-warning); }
.ds-meter--negative .ds-meter__fill { background: var(--color-negative); }
.ds-meter__target { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--color-text); }
.ds-meter__caption { font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-coverage { display: grid; gap: var(--space-4); }
.ds-coverage__meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-3); }
.ds-coverage__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.ds-coverage__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); }
.ds-coverage__list { display: grid; gap: var(--space-2); align-content: start; }
.ds-coverage__items { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-coverage__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); }
.ds-coverage__title { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ds-gdetail { display: grid; gap: var(--space-5); }
.ds-gdetail__section { display: grid; gap: var(--space-2); }
.ds-gdetail__section h3 { margin: 0; }
.ds-gdetail__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-gdetail__question, .ds-gdetail__event { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-gdetail__retest { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.ds-gdetail__retest--passed .ds-icon { color: var(--color-positive); }
.ds-gdetail__retest--failed .ds-icon { color: var(--color-warning); }
.ds-my-gaps__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-my-gaps__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-my-gaps__title { flex: 1 1 14rem; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }
.ds-reviews__title { overflow-wrap: anywhere; }
.ds-reviews__actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-guided__hint { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; }
.ds-gdetail__askers { display: grid; gap: 2px; margin: 0; }
.ds-gap-dismiss__reasons { display: grid; gap: var(--space-2); margin: var(--space-4) 0 var(--space-3); }
/* ProgressBar (54 section 4, DESIGN 8.8): the bar with its label and elapsed time as text beside it */
.ds-progressbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.ds-progressbar .ds-bar { flex: 1 1 6rem; min-width: 4rem; }
.ds-progressbar .ds-bar__fill { display: block; }
.ds-progressbar__label { flex: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text); }
.ds-progressbar__elapsed { flex: none; font-size: var(--text-xs); color: var(--color-text-muted); }
/* SC-30 AI quality (44 section 5) */
.ds-aiq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-aiq .ds-filterbar { margin-bottom: 0; }
.ds-aiq-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.ds-aiq-filters__group .ds-segmented { max-width: 100%; overflow-x: auto; }
.ds-aiq-filters__group .ds-segmented__item { min-width: 72px; }
.ds-aiq-filters__label { font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--color-text-muted); }
.ds-aiq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1099px) { .ds-aiq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ds-aiq-kpis { grid-template-columns: minmax(0, 1fr); } }
.ds-aiq-kpis .ds-kpi .ds-status { margin-top: var(--space-2); }
.ds-aiq__panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 1100px) { .ds-aiq__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-aiq__reasons { grid-column: 1 / -1; } }
.ds-aiq-panel { display: grid; gap: var(--space-3); min-width: 0; }
.ds-aiq-panel h2 { margin: 0; }
.ds-aiq-panel__empty { margin: 0; padding: var(--space-3); }
.ds-aiq-panel__bar { min-width: 10rem; }
.ds-aiq-reasons { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-aiq-reasons__row { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
@media (max-width: 559px) { .ds-aiq-reasons__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }
.ds-aiq-reasons__label { color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-aiq-rating { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.ds-aiq-rating--up .ds-icon { color: var(--color-positive); }
.ds-aiq-rating--down .ds-icon { color: var(--color-warning); }
.ds-aiq-table__question { display: block; min-width: 12rem; overflow-wrap: anywhere; }
.ds-aiq-table__date { white-space: nowrap; }
.ds-aiq-detail { display: grid; gap: var(--space-5); }
.ds-aiq-detail__text { margin: 0; overflow-wrap: anywhere; }
.ds-aiq-detail__answer { white-space: pre-wrap; }
.ds-aiq-detail__sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-aiq-detail__hint { margin: 0; font-size: var(--text-sm); }
.ds-aiq-detail__reported { align-self: center; font-size: var(--text-sm); }
.ds-aiq-applied { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-aiq-applied__title { color: var(--color-accent); font-weight: var(--weight-bold); }
.ds-aiq-platform { display: grid; gap: var(--space-4); min-width: 0; }
/* SC-20 team and duties (50 section 6, DESIGN N-04): banner, tabs, team tree beside the members table, role cards, duty cards, editor preview, stats drawer */
.ds-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-team__banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.ds-team__banner-text { margin: 0; color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-bold); }
.ds-team__main { min-width: 0; }
.ds-team__tabs { margin: -6px -4px calc(var(--space-4) - 6px); padding: 6px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }   /* the 6 px above and below and 4 px at the ends keep the 44 px hit area and the focus ring of a tab inside the scrolling row */
.ds-team__tabs .ds-section-tab { flex: none; }
.ds-team__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.ds-team-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.ds-team-toolbar .ds-btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.ds-team-members { display: grid; grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.ds-team-members__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.ds-team-members__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ds-team-members__title { display: grid; gap: var(--space-1); min-width: 0; }
.ds-team-members__title h2, .ds-team-members__title p { margin: 0; overflow-wrap: anywhere; }
.ds-team-tree { padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ds-team-tree__list { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ds-team-tree__list--nested { margin-top: var(--space-1); padding-left: var(--space-4); }
.ds-team-tree__node { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--touch-min); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-body); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.ds-team-tree__node--team { color: var(--color-text); font-weight: var(--weight-bold); }
.ds-team-tree__node[aria-current="true"] { background: var(--color-surface-3); color: var(--color-text); }
@media (hover: hover) { .ds-team-tree__node:hover { background: var(--color-surface-hover-2); } }
.ds-team-tree__name { min-width: 0; overflow-wrap: anywhere; }
.ds-team-tree__count { flex: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ds-team-tree-select { display: none; }
@media (max-width: 1099px) {
  .ds-team-members { grid-template-columns: minmax(0, 1fr); }
  .ds-team-tree { display: none; }
  .ds-team-tree-select { display: block; }
}
.ds-team-table td:nth-child(3) { min-width: 9rem; overflow-wrap: break-word; }
.ds-team-table__tasks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.ds-team-temp { display: flex; align-items: flex-end; gap: var(--space-2); }
.ds-team-temp__value { display: grid; flex: 1; gap: var(--space-1); min-width: 0; }
.ds-team-temp__code { display: block; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text); font-size: var(--text-md); overflow-wrap: anywhere; user-select: all; }
.ds-team-roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 768px) { .ds-team-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ds-team-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-team-roles-tab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-team-role { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; background: var(--color-surface-2); }
.ds-team-role--highlight, .ds-duty-card--highlight { box-shadow: inset 0 0 0 2px var(--color-accent); }
.ds-team-role__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-team-role__name { margin: 0; color: var(--color-text); font-size: var(--text-lg); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ds-team-role__description { margin: 0; color: var(--color-text-body); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-team-role__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: var(--text-sm); }
.ds-team-role__profile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
a.ds-team-role__profile-link { color: var(--color-text); text-decoration: none; }
@media (hover: hover) { a.ds-team-role__profile-link:hover { background: var(--color-surface-3); } }
.ds-team-role__actions, .ds-duty-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.ds-team-dutybar { margin-bottom: 0; }
.ds-team-dutybar .ds-filterbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-width: 0; }
.ds-team-dutybar__state { min-width: min(100%, 16rem); }
.ds-duty-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.ds-duty-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; background: var(--color-surface-2); scroll-margin-top: var(--space-8); }
.ds-duty-card[aria-busy="true"] { opacity: 0.6; }
.ds-duty-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ds-duty-card__title { flex: 1 1 14rem; min-width: 0; margin: 0; color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ds-duty-card__facts { display: grid; gap: var(--space-1); }
.ds-duty-card__line { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-text-body); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-duty-card__line .ds-icon { flex: none; margin-top: 2px; color: var(--color-text-muted); }
.ds-duty-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.ds-duty-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-duty-editor__alert { margin-bottom: var(--space-4); }
.ds-duty-editor__group { display: grid; gap: var(--space-2); }
.ds-trigger { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.ds-trigger__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 479px) { .ds-trigger__pair { grid-template-columns: minmax(0, 1fr); } }
.ds-duty-preview { display: grid; gap: var(--space-2); background: var(--color-surface-2); }
.ds-duty-preview h3 { margin: 0; }
.ds-duty-preview__next { margin: 0; color: var(--color-text); white-space: pre-line; overflow-wrap: anywhere; }
.ds-duty-stats { display: grid; gap: var(--space-5); }
.ds-duty-stats__counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-2); margin: 0; }
.ds-duty-stats__count { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-duty-stats__count dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.ds-duty-stats__count dd { margin: 0; color: var(--color-text); font-size: var(--text-lg); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ds-duty-stats__reasons { display: grid; gap: var(--space-2); }
.ds-duty-stats__reasons h3, .ds-duty-stats__reasons p { margin: 0; }
.ds-duty-stats__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-duty-stats__reason { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-duty-stats__who { color: var(--color-text-muted); font-size: var(--text-xs); }
.ds-duty-stats__note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--color-text-body); font-size: var(--text-sm); }
.ds-team-discussion { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); min-width: 0; }
.ds-team-discussion__role { max-width: 28rem; }
.ds-team-proposals { display: grid; gap: var(--space-3); min-width: 0; }
.ds-team-proposals h2 { margin: 0; }
.ds-team-proposals__empty { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
@media (forced-colors: active) { .ds-team-tree, .ds-trigger, .ds-team-temp__code, .ds-duty-stats__count { border: 1px solid CanvasText; } }
.ds-team-discussion .ds-guided__chat, .ds-team-discussion .ds-guided__proposals { background: var(--color-surface-2); }
.ds-team-discussion .ds-guided__card { background: var(--color-surface-3); }
.ds-team-role .ds-chip { background: var(--color-surface-3); }
/* SC-17 team overview (51 section 6.2): filters, KPI row, the employees table and the fact cards; neutral numbers only. */
.ds-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-overview__filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.ds-overview__period { margin-left: auto; max-width: 100%; overflow-x: auto; }
.ds-overview__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-3); }
@media (max-width: 640px) { .ds-overview__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-overview__kpis > :last-child { grid-column: 1 / -1; } }
.ds-overview__note { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-overview__person { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ds-overview__person .ds-chip { min-width: 0; height: 24px; }
.ds-overview__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--space-4); align-items: start; }
.ds-overview__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-overview__item { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-overview__item--action { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.ds-overview__body { display: grid; gap: var(--space-1); min-width: 0; }
.ds-overview__title { color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.ds-overview__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-overview__text { font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
/* SC-18 weekly brief (52 section 5, DESIGN N-02): header card, KPI row (2 x 2 below 768 px), deviation cards (a scroll-snap row on phones), paired inner cards, footer. */
.ds-brief { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-brief .ds-card__head { flex-wrap: wrap; }
.ds-brief__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-left: auto; min-width: 0; }
.ds-brief__tools .ds-field { margin: 0; }
.ds-brief__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-brief__chips .ds-chip { min-width: 0; max-width: 100%; overflow-wrap: anywhere; height: auto; min-height: 28px; }
.ds-brief__headline { margin: var(--space-4) 0 0; font-size: var(--text-md); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-brief__meta { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ds-brief .ds-card > .ds-alert { margin-top: var(--space-3); }
.ds-brief__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 767px) { .ds-brief__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-brief__kpis .ds-kpi__value { font-size: var(--text-lg); } }
.ds-brief__deviations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 767px) {
  .ds-brief__deviations { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
  .ds-brief__deviations > .ds-deviation { flex: 0 0 min(85%, 18rem); scroll-snap-align: start; }
}
.ds-brief__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-4); align-items: start; }
.ds-brief__bullets, .ds-brief__counts, .ds-brief__tasks { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-brief__counts { padding-left: 0; list-style: none; }
.ds-brief__tasks { margin-top: var(--space-4); padding-left: 0; list-style: none; }
.ds-brief__tasks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: var(--touch-min); }
.ds-brief__tasks a, .ds-brief .ds-action__link { display: inline-flex; align-items: center; min-height: var(--touch-min); }
.ds-brief__subtitle { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-brief__footer { display: grid; gap: var(--space-3); }
.ds-brief-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-brief-feedback .ds-feedback { margin-top: 0; }
.ds-brief-feedback__thanks { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-deviation { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-deviation__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ds-deviation__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-deviation__spark { max-width: 100%; height: auto; }
.ds-deviation__why { justify-self: start; min-height: var(--touch-min); padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ds-brief-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-1); }
.ds-brief-banner__text { flex: 1 1 16rem; margin: 0; font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-brief-banner__actions { display: flex; align-items: center; gap: var(--space-2); }
@media (forced-colors: active) { .ds-deviation, .ds-brief-banner { border: 1px solid CanvasText; } }
/* SC-28 audit trail (54 section 5.1, DESIGN N-10): filter bar, the append-only table with a truncated object column, the detail drawer and the stored-answer view */
.ds-audit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-audit .ds-filterbar { margin-bottom: 0; }
.ds-audit-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: 100%; }
.ds-audit-filters__group .ds-segmented { max-width: 100%; }
.ds-audit-filters__group .ds-segmented__item { min-width: 72px; }
@media (max-width: 479px) { .ds-audit-filters__group .ds-segmented { display: flex; width: 100%; } .ds-audit-filters__group .ds-segmented__item { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); } }
.ds-audit-filters__label { font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: uppercase; color: var(--color-text-muted); }
.ds-audit-filters .ds-field__input[type="date"] { min-width: 9.5rem; }
.ds-audit-table__time { white-space: nowrap; }
.ds-audit-table__object { display: block; max-width: 28rem; }
.ds-audit-detail { display: grid; gap: var(--space-5); }
.ds-audit-detail__text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ds-audit-answer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 960px; margin-top: var(--space-4); }
.ds-audit-answer__card { display: grid; gap: var(--space-4); }
.ds-audit-answer__title { margin: 0; }
.ds-audit-answer__sources { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-usage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-usage .ds-filterbar { margin-bottom: 0; }
.ds-usage__tabs { justify-self: start; max-width: 100%; overflow-x: auto; }
.ds-usage__scope { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ds-usage-filters .ds-field__input[type="date"] { min-width: 9.5rem; }
.ds-usage__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1099px) { .ds-usage__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ds-usage__kpis { grid-template-columns: minmax(0, 1fr); } }
.ds-usage__kpis .ds-progress { align-self: stretch; margin-top: var(--space-3); }
.ds-usage__charts, .ds-usage__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1099px) { .ds-usage__charts, .ds-usage__tables { grid-template-columns: minmax(0, 1fr); } }
.ds-usage__note { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.ds-usage-hint { margin: var(--space-3) 0 0; text-align: center; }
.ds-usage-platform, .ds-usage-metrics { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-usage-metrics__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-alert.ds-usage-survey { flex-wrap: wrap; align-items: center; border: 1px solid var(--color-accent); }
.ds-usage-metrics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1099px) { .ds-usage-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ds-usage-metrics__grid { grid-template-columns: minmax(0, 1fr); } }
.ds-usage-metric { display: grid; align-content: start; gap: var(--space-2); }
.ds-usage-metric__value { margin: 0; font-size: 1.75rem; line-height: 1.2; font-weight: var(--weight-bold); color: var(--color-text); }
.ds-usage-metric__target, .ds-usage-metric__detail { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.ds-usage-metric .ds-status { justify-self: start; }
.ds-usage-survey-dialog { display: grid; gap: var(--space-4); }
.ds-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 960px; margin-top: var(--space-4); }
.ds-setup .ds-progressbar { margin-top: var(--space-2); }
.ds-setup__steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-setup-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); }
.ds-setup-step__disc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--color-surface-3); color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-setup-step__disc--done { background: var(--color-primary); color: var(--color-on-primary); }
.ds-setup-step__text { display: grid; gap: var(--space-1); min-width: 0; }
.ds-setup-step__title { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-setup-step__description, .ds-setup-step__progress { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.ds-setup-step__progress { color: var(--color-text-body); }
.ds-setup-step__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 767px) {
  .ds-setup-step { grid-template-columns: auto minmax(0, 1fr); }
  .ds-setup-step__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
.ds-demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-demo__intro { margin: 0; color: var(--color-text-body); }
.ds-demo__bar, .ds-demo__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-demo__chips { gap: var(--space-2); }
.ds-demo__chips .ds-chip { background: var(--color-surface-3); }
.ds-demo__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1099px) { .ds-demo__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .ds-demo__grid { grid-template-columns: minmax(0, 1fr); } }
.ds-demo-card { display: grid; align-content: start; gap: var(--space-3); }
.ds-demo-card__hint { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.ds-demo-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-demo-card__actions .ds-progressbar, .ds-demo-card__actions .ds-switch-row { flex: 1 1 100%; }
.ds-demo-result { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-demo-result__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 5rem; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.ds-demo-result__job { overflow-wrap: anywhere; color: var(--color-text); }
.ds-demo-result__duration { text-align: right; color: var(--color-text-muted); }
@media (max-width: 559px) {
  .ds-demo-result__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .ds-demo-result__job { grid-column: 1 / -1; }
  .ds-demo-result .ds-status { justify-self: start; }
}
.ds-demo-reset { display: grid; gap: var(--space-4); }

/* SC-38 data export and deletion, platform deletion requests (55 section 5) */
.ds-data-export { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-data-export__card { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
.ds-data-export__card > .ds-card__head { margin-bottom: calc(var(--space-5) - var(--space-4)); }
.ds-data-export__text { margin: 0; color: var(--color-text-body); }
.ds-data-export__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ds-data-export__consequences { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); color: var(--color-text-body); }
.ds-data-export__status, .ds-data-export__tenant { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-data-export__reason { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-data-export__tenant .ds-chip { min-width: 0; background: var(--color-surface-3); }
.ds-data-export__pending { flex-wrap: wrap; align-items: center; }
.ds-data-export__pending .ds-alert__text { flex: 1 1 20rem; }
.ds-data-export__countdown { font-weight: var(--weight-bold); white-space: nowrap; }
.ds-deletion-dialog { display: grid; gap: var(--space-4); }
.ds-deletion-dialog .ds-data-export__consequences { font-size: var(--text-sm); }

/* SC-31 model and tests (35 section 6, DESIGN N-11) */
.ds-model { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); }
.ds-model__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.ds-model__region { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.ds-model-providers { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-model-provider { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--touch-min); padding: var(--space-1) var(--space-3); border-radius: var(--radius-chip); background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-text); }
.ds-model-provider__models { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); }
.ds-model__card { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
.ds-model__card > .ds-card__head { flex-wrap: wrap; margin-bottom: 0; }
.ds-model__baseline { margin-left: auto; }
.ds-model-settings { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ds-model-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.ds-model-candidate__field { flex: 1 1 9rem; min-width: 0; contain: inline-size; }   /* a select is as wide as its longest option: contained, the column can shrink */
.ds-model-settings .ds-table__actions { white-space: normal; }
.ds-model-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.ds-model-reason { max-width: 24rem; margin: var(--space-2) 0 0 auto; font-size: var(--text-sm); text-align: right; color: var(--color-text-muted); overflow-wrap: anywhere; }
.ds-model-last, .ds-model-outcome { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-model-last__critical { font-size: var(--text-sm); color: var(--color-text-muted); }
.ds-model-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1099px) { .ds-model-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ds-model-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-model-kpis .ds-kpi__value { font-size: var(--text-lg); } }
.ds-model__history { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 639px) { .ds-model__history { grid-template-columns: minmax(0, 1fr); } .ds-model__baseline { margin-left: 0; } .ds-model-reason { margin-left: 0; text-align: left; } }
.ds-model-results__summary { display: block; max-width: 22rem; overflow-wrap: anywhere; }
.ds-model-questions__text, .ds-model-questions__domain { display: block; overflow-wrap: anywhere; }
.ds-model-questions__domain { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-muted); }
.ds-model-testset { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ds-model-testset__bar { display: flex; justify-content: flex-end; }
.ds-model-result { display: grid; gap: var(--space-4); }
.ds-model-result__question { margin: 0; font-weight: var(--weight-semibold); color: var(--color-text); overflow-wrap: anywhere; }
.ds-model-result__answer { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-body); }
.ds-model-facts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ds-model-fact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-model-fact--found .ds-model-fact__word, .ds-model-fact--found .ds-icon, .ds-model-diff--fixed { color: var(--color-positive); }
.ds-model-fact--missing .ds-model-fact__word, .ds-model-fact--missing .ds-icon, .ds-model-diff--worse { color: var(--color-negative); }
.ds-model-fact__word, .ds-model-diff { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-model-fact__text { color: var(--color-text); overflow-wrap: anywhere; }
.ds-model-actions .ds-tooltip { left: auto; right: 0; transform: none; }   /* the actions sit at the right edge of the table: the tooltip opens leftwards */
.ds-model__history .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-model__history .ds-field { min-width: 0; }
.ds-model-settings .ds-table--stack td.ds-table__actions { flex-direction: column; align-items: flex-end; }
.ds-model-settings .ds-table--stack td > .ds-model-candidate { flex: 1 1 auto; justify-content: flex-end; }
@media (min-width: 640px) and (max-width: 1439px) {   /* two selects and three buttons per row need a wide table: the settings are cards from 1439 px down */
  .ds-model-settings .ds-table--stack, .ds-model-settings .ds-table--stack tbody, .ds-model-settings .ds-table--stack tr, .ds-model-settings .ds-table--stack td { display: block; }
  .ds-model-settings .ds-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ds-model-settings .ds-table--stack tbody tr { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
  .ds-model-settings .ds-table--stack td { display: flex; justify-content: space-between; gap: var(--space-4); height: auto; padding: var(--space-2) 0; border-bottom: 0; text-align: right; }
  .ds-model-settings .ds-table--stack td::before { content: attr(data-label); flex: none; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-upper); text-align: left; text-transform: uppercase; color: var(--color-text-muted); }
  .ds-model-settings .ds-table--stack td.ds-table__primary { display: block; text-align: left; }
  .ds-model-settings .ds-table--stack td.ds-table__primary::before, .ds-model-settings .ds-table--stack td.ds-table__actions::before { content: none; }
}
.ds-model-actions .ds-btn { white-space: nowrap; }
@media (min-width: 1440px) { .ds-model-actions { flex-direction: column; align-items: flex-end; } }

/* placeholder modules (AIS-73, 22 section 4, DESIGN N-14): the DEMO ribbon over the caption, number cards in the report-panel colour, tile skeletons after 300 ms */
.ds-ribbon { position: absolute; top: 0; right: 0; padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--tint-info); color: var(--color-info); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.ds-module__head { position: relative; min-height: 1.75rem; margin-bottom: var(--space-3); padding-right: 9rem; }
.ds-module__caption { margin: 0; padding-top: 2px; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-muted); }
.ds-module-kpis .ds-kpi { background: var(--color-report-panel); }
.ds-module-page .ds-report__skeleton { animation: ds-delay-show 1ms linear 300ms backwards; }
/* competitor analysis, dynamic pricing and 3M LOGICIEL (22 section 4) */
.ds-competitors__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: 11px; }
.ds-competitors__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.ds-competitors__events { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.5; }
.ds-table td.ds-table__span { color: var(--color-text-muted); font-style: italic; }
.ds-pricing__rule { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: 1.5; }
.ds-pricing__filter { max-width: 22rem; margin-bottom: var(--space-3); }
.ds-pricing__table th:first-child, .ds-pricing__table td:first-child { min-width: 14rem; }
.ds-pricing__table .ds-status { white-space: nowrap; }
.ds-pricing__disclaimer { margin-top: var(--space-3); }
.ds-module3m { display: grid; justify-items: center; gap: var(--space-5); }
.ds-module3m__card { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); width: 100%; max-width: 640px; text-align: center; }
.ds-module3m__title { margin: 0; font-size: var(--text-xl); }
.ds-module3m__text { margin: 0; color: var(--color-text-muted); }
.ds-module3m__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 640px; margin: 0; padding: 0; list-style: none; }
.ds-module3m__feature { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; color: var(--color-text-muted); }
.ds-module3m__feature-title { font-weight: var(--weight-bold); }
.ds-module3m__feature-note { font-size: var(--text-xs); }
@media (max-width: 599px) {
  .ds-module3m__features { grid-template-columns: minmax(0, 1fr); }
}

/* tenants and support mode (AIS-75, 11 sections 6.5-6.7, DESIGN N-08 pattern; no mock-up) */
.ds-support-enter__tenant { margin: 0 0 var(--space-3); font-weight: var(--weight-bold); color: var(--color-text); }
.ds-tenants__name, .ds-tenants__plan { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ds-tenants__tips { display: grid; gap: var(--space-1); min-width: 7rem; font-size: var(--text-sm); }
.ds-tenants__bar { height: 8px; }
.ds-tenant, .ds-tenant__overview, .ds-tenant-plan { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-tenant__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ds-tenant__name { margin: 0; overflow-wrap: anywhere; }
.ds-tenant .ds-admin-tabs { margin-bottom: 0; }
.ds-tenant__overview .ds-admin-alert { margin-bottom: 0; }
.ds-tenant__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ds-tenant__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 767px) { .ds-tenant__grid { grid-template-columns: minmax(0, 1fr); } }
.ds-tenant__card { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-4); }
.ds-tenant__card > .ds-card__head { margin-bottom: 0; }
.ds-tenant-settings, .ds-branding-fields, .ds-tenant-branding .ds-admin-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-tenant-settings .ds-formfield, .ds-branding-fields .ds-formfield, .ds-tenant-plan .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-branding-fields .ds-field__caption { white-space: normal; }
.ds-tenant-branding { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); align-items: start; gap: var(--space-4); }
@media (max-width: 1023px) { .ds-tenant-branding { grid-template-columns: minmax(0, 1fr); } }
.ds-tenant-plan__extension { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 639px) { .ds-tenant-plan__extension { grid-template-columns: minmax(0, 1fr); } }
.ds-branding-preview { display: grid; gap: var(--space-3); margin: 0; min-width: 0; }
.ds-branding-preview__caption { font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-upper); text-transform: uppercase; color: var(--color-text-muted); }
.ds-branding-preview__login { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-1); text-align: center; }
.ds-drawer .ds-branding-preview__login { background: var(--color-surface-2); }
.ds-branding-preview__login .ds-brand-logo--login .ds-brand { width: 160px; height: 75px; }
.ds-branding-preview__slogan { margin: 0; font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-branding-preview__bar { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-3); }
.ds-branding-preview__product { min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-text); overflow-wrap: anywhere; }

/* MY SETTINGS (AIS-76, 10 section 5, DESIGN 12.0 / N-12): inner cards in the two panel columns; "Sačuvano" beside the title; skeleton cards after 300 ms */
.ds-settings__skeleton { animation: ds-delay-show 1ms linear 300ms backwards; }
.ds-settings__card > .ds-card__head { flex-wrap: wrap; }
.ds-settings__saved { margin-left: auto; font-size: var(--text-sm); color: var(--color-positive); }
.ds-settings__help, .ds-settings__note { margin: 0; font-size: var(--text-sm); color: var(--color-text-body); overflow-wrap: anywhere; }
.ds-settings__note { margin-top: var(--space-4); color: var(--color-text-muted); }
.ds-settings__help + .ds-settings__switches, .ds-settings__fields + .ds-settings__switches { margin-top: var(--space-3); }
.ds-settings__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.ds-settings__muted { color: var(--color-text-muted); }
.ds-settings__label { display: grid; gap: 2px; }
.ds-settings__label .ds-settings__muted { font-size: var(--text-xs); }
.ds-settings__name { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ds-settings__name-box { flex: 1 1 12rem; min-width: 0; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4); border-radius: var(--radius-field-sm); }
.ds-settings__name-field .ds-field__error { margin-top: var(--space-2); }
.ds-settings__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.ds-settings__name-box .ds-field__input { width: 100%; }
.ds-settings__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.ds-settings__fields .ds-formfield { grid-template-columns: minmax(0, 1fr); }
.ds-settings__range { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@media (max-width: 479px) { .ds-settings .ds-segmented { display: flex; } .ds-settings .ds-segmented__item { flex: 1 1 0; min-width: 0; padding-inline: var(--space-2); } }

/* support inbox (AIS-77, 12 section 8; no mock-up: DESIGN 9.3 table, 9.8 drawer) */
.ds-inbox__sender { display: grid; min-width: 11rem; overflow-wrap: anywhere; }
.ds-inbox__preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 28rem; overflow: hidden; overflow-wrap: anywhere; }
.ds-inbox-detail__text { margin: 0; }
.ds-inbox-detail__replies { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ds-inbox-detail__reply { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.ds-inbox-detail__reply-head { font-size: var(--text-sm); }
.ds-inbox-detail__reply p { margin: 0; }

/* touch targets below 768 px (03 section 6, DESIGN.md 14, H-27 HA-11): a control that looks smaller than 44 x 44 gets a transparent hit area of at least 44 x 44
   (the .ds-domain-tab::before pattern) without changing its look; where neighbours are closer, the hit area stops where it would overlap theirs */
@media (max-width: 767.98px) {
  a.ds-sourcechip, button.ds-chip, .ds-segmented__item, .ds-rtable__sort, .ds-datebox-item .ds-icon-btn, .ds-slicerbar__home .ds-icon-btn, .ds-users-table .ds-table__actions .ds-icon-btn { position: relative; }
  .ds-segmented__item::before, .ds-rtable__sort::before, .ds-slicerbar__home .ds-icon-btn::before {
    content: ""; position: absolute; inset: min(0px, calc(50% - 22px));
  }
  .ds-users-table .ds-table__actions .ds-icon-btn::before, .ds-datebox-item .ds-icon-btn::before { content: ""; position: absolute; inset: min(0px, calc(50% - 22px)) 0; }   /* side by side with their neighbours (three row actions; date field and calendar button): taller, not wider */
  button.ds-chip::before, a.ds-sourcechip::after { content: ""; position: absolute; inset: -4px 0; }   /* filter and source chips wrap with an 8 px row gap: half of it above and below */
  .ds-toggle::before { content: ""; position: absolute; inset: -10px 0; }   /* the 44 x 24 pill (its ::after is the knob) */
  .ds-expander::after { inset: -6px -17px; }   /* 44 wide; 22 tall like the shortest (one-line) report row, so the expanders of adjacent rows do not overlap */
  .ds-slicer-btn { min-height: var(--touch-min); }   /* the touch look: 2 px gaps leave no room for a transparent hit area and the member buttons clip one (overflow: hidden) */
}
/* prefers-contrast: more (DESIGN.md 15.2 rule 13, H-27 HW-4): buttons get an edge as the fields do */
@media (prefers-contrast: more) {
  .ds-btn { border: 1px solid var(--color-field-border-hc); }
}
/* forced colours drop box-shadows: an invalid field keeps a 2 px edge, the error text with its glyph stays the main cue (03 section 6, AIS-126) */
@media (forced-colors: active) {
  .ds-field[data-invalid="true"], .ds-datebox[aria-invalid="true"], .ds-conv__rename[aria-invalid="true"], .ds-assistant__title-input[aria-invalid="true"] { border-width: 2px; }
}