/* components.css -- the Figma library components the React package does not ship yet, in the
   design-system BEM grammar, plus the few overrides where the canvas differs from the package defaults.
   Only --atoura-* tokens (and --ap-font-display from fonts.css); geometry from the component specs and
   the canvas (see docs/component-map.md for the source of each block). */

.ap-icon { display: inline-block; vertical-align: middle; }
.ap-prewrap { white-space: pre-wrap; }
.ap-preline { white-space: pre-line; }

/* --- hooks: variants the vendored bundle treats as defaults, kept as named classes for the migration --- */
.atoura-badge--neutral { }                      /* neutral is the badge default */
.atoura-button__label { }                       /* the label span inside a button */
.atoura-general-alert--info { }                 /* info is the alert default border */
.atoura-threshold-event-banner--neutral { }     /* neutral is the banner default border */
.atoura-banner__action { flex: 0 0 auto; }

/* --- overrides of vendored primitives ------------------------------------------------------ */
.atoura-button { text-decoration: none; }
.atoura-button--full { width: 100%; max-width: none; }            /* the canvas draws 352-wide primaries */
.atoura-button--arrow { padding-right: var(--atoura-spacing-8); gap: var(--atoura-spacing-4); }
.atoura-button--compact { min-height: 26px; padding: var(--atoura-spacing-4) var(--atoura-spacing-8) var(--atoura-spacing-4) var(--atoura-spacing-16); }
.atoura-button--primary:disabled, .atoura-button--primary[aria-disabled="true"]:not([data-inert]) { background: var(--atoura-color-action-primary-disabled); border-color: var(--atoura-color-brand-200); box-shadow: none; cursor: default; }
.atoura-button--secondary:disabled, .atoura-button--secondary[aria-disabled="true"]:not([data-inert]) { color: var(--atoura-color-text-disabled); cursor: default; box-shadow: none; }
.atoura-button[data-inert] { cursor: default; }
/* link button (Figma variant=link, not in the package yet): text ink, no box, a leading icon at gap 4, in the
   Portfolio file's link ink (a PROPOSED property, see fonts.css). */
.atoura-button--link { align-self: flex-start; justify-content: flex-start; gap: var(--atoura-spacing-4); min-width: 0; min-height: 22px; /* literal-ok: drawn link row */ padding: var(--atoura-spacing-2) var(--atoura-spacing-4); color: var(--ap-color-accent-ink); background: none; border: 0; box-shadow: none; text-align: left; }
.atoura-button--link .atoura-button__label { font-weight: var(--atoura-type-weight-medium); }
/* Tabs: the six tabs always fit (tighter spacing below 388 px, where the drawn spacing needs more than the
   column), so the list is never a scroll container: the focus ring and the touch target stay whole. Below the
   320 px canvas minimum the list wraps rather than overflow the page. */
.ap-tab-list { overflow: visible; flex-wrap: wrap; max-width: 100%; }
.ap-tab { position: relative; text-decoration: none; }
.ap-tab::after { content: ""; position: absolute; inset: -10px 0; } /* a 42 px touch target without changing the drawn row */
@media (max-width: 387px) { .ap-tab-list { gap: var(--atoura-spacing-4); } .ap-tab { padding-left: var(--atoura-spacing-4); padding-right: var(--atoura-spacing-4); } }
/* Tabs drawn but not wired (the Portfolio views and networks) keep the drawn default look, as the queue's inert
   tabs do; aria-disabled tells assistive technology they do nothing. */
.ap-tab[aria-disabled="true"] { opacity: 1; cursor: default; }
/* The Portfolio view tabs (three long labels) do not fit a phone column, where the canvas clips them: a
   wrapper scrolls them sideways instead, padded so the touch targets and the focus ring stay whole inside
   it (the list itself keeps its drawn box and bottom rule). */
.ap-tab-scroll { align-self: stretch; overflow-x: auto; overflow-y: hidden; padding: 10px var(--atoura-spacing-4); margin: -10px calc(-1 * var(--atoura-spacing-4)); scrollbar-width: none; }
.ap-tab-scroll::-webkit-scrollbar { display: none; }
.ap-tab-scroll > .ap-tab-list { flex-wrap: nowrap; width: max-content; max-width: none; }
@media (max-width: 387px) { .ap-tab-scroll > .ap-tab-list { gap: var(--atoura-spacing-gap-sm); } .ap-tab-scroll .ap-tab { padding-left: var(--atoura-spacing-gap-sm); padding-right: var(--atoura-spacing-gap-sm); } }
/* Select and read-only field: the 50 px drawn box (8 + 16 label + 18 value + 8), the boundary on an inset
   ring as the vendored field does, so the stroke sits inside the box like the canvas stroke. */
.ap-select { display: flex; align-items: center; gap: var(--atoura-spacing-gap-sm); flex: 1 1 0; min-width: 0; min-height: 50px; /* literal-ok: drawn select */ padding: var(--atoura-spacing-8) var(--atoura-spacing-12); background: var(--atoura-color-surface-raised); box-shadow: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-border-default); border-radius: var(--atoura-rounded-control); color: inherit; text-decoration: none; }
.ap-select--open { box-shadow: inset 0 0 0 var(--atoura-border-width-focus) var(--ap-color-focus-open); }
.ap-select__text { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; overflow: hidden; }
.ap-select__label { font-size: var(--atoura-type-size-xs); line-height: 16px; color: var(--atoura-color-text-secondary); }
.ap-select__value { font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-select--inert { cursor: default; }
.ap-field { display: flex; flex-direction: column; gap: 0; width: 100%; padding: var(--atoura-spacing-8) var(--atoura-spacing-12); background: var(--atoura-color-surface-raised); box-shadow: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-border-default); border-radius: var(--atoura-rounded-control); }
.ap-field--area { padding: var(--atoura-spacing-12); gap: var(--atoura-spacing-2); }
.ap-field--tall { min-height: 144px; /* literal-ok: the drawn text-area box */ }
.ap-field--disabled { background: var(--atoura-color-surface-sunken); box-shadow: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-neutral-400); }
.ap-field--disabled .ap-field__label { color: var(--atoura-color-text-muted); }
.ap-field--disabled .ap-field__value { color: var(--atoura-color-text-secondary); }
.ap-field__label { font-size: var(--atoura-type-size-xs); line-height: 16px; color: var(--atoura-color-text-secondary); }
.ap-field__value { display: block; width: 100%; font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); line-height: 18px; overflow-wrap: anywhere; }

/* --- section (sunken card holding a screen section) ------------------------------------------ */
.atoura-section { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; padding: var(--atoura-spacing-16); background: var(--atoura-color-surface-sunken); border: 0.75px solid var(--atoura-color-neutral-300); border-radius: var(--atoura-rounded-card); }
.atoura-section--gap-24 { gap: var(--atoura-spacing-24); }
.atoura-section__group { display: flex; flex-direction: column; gap: var(--atoura-spacing-8); width: 100%; }
.atoura-section__group-title { font-family: var(--ap-font-display); font-size: 18px; line-height: 1.3; color: var(--atoura-color-text-primary); }
.atoura-section__content { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; }

.atoura-title-row__heading { margin: 0; width: 100%; font: inherit; }
.atoura-title-row { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 0; background: none; border: 0; color: inherit; text-align: left; font: inherit; border-radius: var(--atoura-rounded-control); }
.atoura-title-row--toggle { cursor: pointer; }
.atoura-title-row__title { margin: 0; font-family: var(--ap-font-display); font-weight: 400; line-height: 1.3; color: var(--atoura-color-text-primary); }
.atoura-title-row__chevron { display: block; width: 32px; height: 32px; margin: -4px -4px -8px; }

.atoura-inner-card { display: flex; flex-direction: column; gap: var(--atoura-spacing-16); width: 100%; padding: var(--atoura-spacing-16); background: var(--atoura-color-surface-raised); border: 1px solid var(--atoura-color-neutral-300); border-radius: var(--atoura-rounded-card); }
.atoura-inner-card__title { margin: 0; font-family: var(--ap-font-display); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--atoura-color-text-primary); }
.atoura-inner-card__head { display: flex; align-items: center; gap: var(--atoura-spacing-24); flex-wrap: wrap; }
.atoura-inner-card--gap-8 { gap: var(--atoura-spacing-8); }
.atoura-inner-card--gap-16 { gap: var(--atoura-spacing-16); }
.atoura-inner-card--gap-32 { gap: var(--atoura-spacing-32); }

.atoura-field-row { display: flex; flex-direction: column; gap: 0; width: 100%; }
.atoura-field-row__label { font-size: var(--atoura-type-size-xs); line-height: 16px; color: var(--atoura-color-text-muted); }
.atoura-field-row__value { font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); line-height: 18px; }
.atoura-field-row__sub { font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-muted); }
/* record rows (decision records, stage closures): 12 semibold label over 12 regular value, both primary ink. */
.atoura-field-row--record .atoura-field-row__label { font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-primary); }
.atoura-field-row--record .atoura-field-row__value { font-size: var(--atoura-type-size-xs); line-height: 16px; font-weight: var(--atoura-type-weight-regular); }
.atoura-field-row--delta .atoura-field-row__value { display: inline-flex; align-items: center; gap: var(--atoura-spacing-4); flex-wrap: wrap; }

/* --- selector (selector.md) ----------------------------------------------------------------- */
/* Strokes on rings (inside, like the canvas box) so both states keep the drawn 64 px height. */
.atoura-selector { display: flex; align-items: center; gap: var(--atoura-spacing-8); width: 100%; padding: var(--atoura-spacing-8); background: var(--atoura-color-action-secondary-default); border: 0; box-shadow: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-neutral-400), 0 2px 2px 0 rgba(0, 0, 0, 0.08); /* literal-ok: drawn selector shadow */ border-radius: var(--atoura-rounded-control); color: var(--atoura-color-text-primary); font: inherit; text-align: left; cursor: pointer; min-height: 48px; }
.atoura-selector--active { background: var(--ap-color-selected-fill); box-shadow: inset 0 0 0 1px var(--ap-color-accent-ink), 0 0 0 1px var(--ap-color-accent-ink), 0 2px 8px 0 var(--ap-color-selected-glow); cursor: default; }
.atoura-selector[aria-disabled="true"] { cursor: default; }
.atoura-selector .ap-icon { flex: 0 0 24px; }
.atoura-selector__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; font-size: var(--atoura-type-size-xs); line-height: 16px; }
.atoura-selector__title { font-weight: var(--atoura-type-weight-semibold); }
.atoura-selector__desc { font-weight: var(--atoura-type-weight-regular); }

/* --- general-alert (general-alert.md) ------------------------------------------------------- */
.atoura-general-alert { display: flex; align-items: flex-start; gap: var(--atoura-spacing-8); width: 100%; min-width: 160px; padding: var(--atoura-spacing-8); background: var(--atoura-color-surface-raised); border: 1px solid var(--atoura-color-feedback-info-fg); border-radius: var(--atoura-rounded-control); box-shadow: 0 2px 2px 0 var(--atoura-color-neutral-200); }
.atoura-general-alert .ap-icon { flex: 0 0 16px; margin-top: 1px; }
.atoura-general-alert__text { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; font-size: var(--atoura-type-size-xs); line-height: 1.35; }
.atoura-general-alert__title { font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-primary); }
.atoura-general-alert__body { color: var(--atoura-color-text-secondary); }
.atoura-general-alert--success { border-color: var(--atoura-color-feedback-success-fg); }
.atoura-general-alert--warning { border-color: var(--atoura-color-feedback-warning-fg); }
.atoura-general-alert--danger { border-color: var(--atoura-color-feedback-danger-fg); }

/* --- sla-chip (Portfolio-file component, no spec) ------------------------------------------- */
.atoura-sla-chip { display: inline-flex; align-items: center; padding: var(--atoura-spacing-4) var(--atoura-spacing-gap-sm); font-size: var(--atoura-type-size-xs); font-weight: var(--atoura-type-weight-semibold); line-height: 16px; white-space: nowrap; color: var(--atoura-color-text-primary); background: var(--atoura-color-surface-sunken); border: 1px solid var(--atoura-color-border-strong); border-radius: var(--atoura-rounded-pill); }
.atoura-sla-chip--warning { background: var(--atoura-color-feedback-warning-bg); border-color: var(--atoura-color-feedback-warning-fg); }

/* --- threshold-event-banner (queue and home card, no spec) --------------------------------- */
.atoura-threshold-event-banner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--atoura-spacing-16); width: 100%; padding: var(--atoura-spacing-16); background: var(--atoura-color-surface-raised); border: 1px solid var(--atoura-color-border-strong); border-radius: var(--atoura-rounded-card); box-shadow: 0 2px 2px 0 var(--atoura-color-neutral-200); }
.atoura-threshold-event-banner--danger { border-color: var(--atoura-color-feedback-danger-fg); }
.atoura-threshold-event-banner--warning { border-color: var(--atoura-color-feedback-warning-fg); }
.atoura-threshold-event-banner--info { border-color: var(--atoura-color-feedback-info-fg); }
.atoura-threshold-event-banner--success { border-color: var(--atoura-color-feedback-success-fg); }
.atoura-banner__main { display: flex; flex-direction: column; gap: var(--atoura-spacing-12); flex: 1 1 272px; min-width: 0; } /* 272 is the wrap threshold, not a minimum */
.atoura-banner__top { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); }
.atoura-banner__type { font-size: var(--atoura-type-size-xs); font-weight: var(--atoura-type-weight-medium); text-align: right; }
.atoura-banner__text { display: flex; flex-direction: column; gap: var(--atoura-spacing-2); }
.atoura-banner__merchant { font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-semibold); }
.atoura-banner__detail { font-size: var(--atoura-type-size-xs); color: var(--atoura-color-text-secondary); }
.atoura-banner__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-8); flex: 1 1 128px; min-width: 0; }
.atoura-banner__actions--end { justify-content: flex-end; }

/* --- menu-bar (menu-bar.md, mobile context) ------------------------------------------------- */
.atoura-menu-bar { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: var(--atoura-spacing-16) var(--atoura-spacing-24); background: var(--atoura-color-surface-page); }
.atoura-menu-bar__logo { display: inline-flex; align-items: center; gap: var(--atoura-spacing-8); padding-right: var(--atoura-spacing-4); }
.atoura-menu-bar__actions { display: flex; align-items: center; gap: var(--atoura-spacing-16); }
.atoura-menu-bar__icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.atoura-menu-bar__menu { position: relative; text-decoration: none; border-radius: var(--atoura-rounded-control); }
.atoura-menu-bar__menu::after { content: ""; position: absolute; inset: -10px; } /* a 44 px touch target around the drawn 24 px glyph */
.atoura-menu-bar__bar { position: absolute; left: 4px; width: 16px; height: 2px; border-radius: 0.5px; background: var(--atoura-color-neutral-900); }
.atoura-menu-bar__bar:nth-child(1) { top: 5px; } .atoura-menu-bar__bar:nth-child(2) { top: 11px; } .atoura-menu-bar__bar:nth-child(3) { top: 17px; }

/* --- page-footer (page-footer.md) ----------------------------------------------------------- */
.atoura-page-footer { display: flex; align-items: center; justify-content: center; gap: var(--atoura-spacing-8); width: 100%; height: 48px; padding: var(--atoura-spacing-16); font-size: var(--atoura-type-size-xs); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-muted); white-space: nowrap; }
.atoura-page-footer__copy { min-width: 120px; text-align: right; }
.atoura-page-footer__divider { font-weight: var(--atoura-type-weight-regular); }
.atoura-page-footer__link { min-width: 120px; color: inherit; }

/* --- nav drawer (overlay) ------------------------------------------------------------------- */
.atoura-nav-drawer { position: absolute; inset: 0; }
.atoura-nav-drawer__scrim { display: block; background: rgba(8, 8, 8, 0.5); /* literal-ok: the canvas drawer scrim (N-* frames), darker than --atoura-color-scrim */ }
/* The panel centres its content vertically as drawn (274 wide, gap 16): equal 56 px padding top and bottom
   plus auto margins give exactly the drawn position when the list fits (Home at 99 on the 800 frame) and
   never let the list rise under the close button (24 to 40) when it does not; then the panel scrolls. */
.atoura-nav-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: 274px; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--atoura-spacing-16); padding: calc(var(--atoura-spacing-48) + var(--atoura-spacing-8) + env(safe-area-inset-top, 0px)) var(--atoura-spacing-24) calc(var(--atoura-spacing-48) + var(--atoura-spacing-8)) calc(var(--atoura-spacing-24) + env(safe-area-inset-left, 0px)); background: var(--atoura-color-surface-page); box-shadow: 0 8px 8px rgba(8, 8, 8, 0.5); /* literal-ok: the canvas drawer shadow */ overflow-y: auto; }
.atoura-nav-drawer__panel > .atoura-nav-drawer__group:first-of-type { margin-top: auto; }
.atoura-nav-drawer__panel > .atoura-nav-drawer__group:last-child { margin-bottom: auto; }
.atoura-nav-drawer__close { position: absolute; top: calc(var(--atoura-spacing-24) + env(safe-area-inset-top, 0px)); left: calc(var(--atoura-spacing-24) + env(safe-area-inset-left, 0px)); display: inline-flex; width: 16px; height: 16px; border-radius: var(--atoura-rounded-control); }
.atoura-nav-drawer__close::after { content: ""; position: absolute; inset: -14px; } /* a 44 px touch target around the drawn 16 px close */
.atoura-nav-drawer__group { display: flex; flex-direction: column; width: 226px; }
.atoura-nav-drawer__group-title { padding: var(--atoura-spacing-4) var(--atoura-spacing-8); line-height: 16px; font-size: var(--atoura-type-size-xs); font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-secondary); }
.atoura-nav-drawer__item { display: flex; align-items: center; gap: var(--atoura-spacing-4); min-width: 226px; padding: var(--atoura-spacing-4) var(--atoura-spacing-8); line-height: 18px; border-radius: var(--atoura-rounded-control); font-size: var(--atoura-type-size-sm); font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); text-decoration: none; }
.atoura-nav-drawer__item--active { background: var(--atoura-color-brand-100); font-weight: var(--atoura-type-weight-semibold); }
.atoura-nav-drawer__item--inert { cursor: default; }
.atoura-nav-drawer__group:first-child .atoura-nav-drawer__item { color: var(--atoura-color-text-secondary); }

/* --- nav sidebar (desktop frames): the navigation groups beside the body from 1024 px (app.css places it);
   a group's active item is drawn in the lighter selected fill, the active Home in the drawer's brand-100. --- */
.atoura-nav-sidebar { display: none; flex-direction: column; gap: var(--atoura-spacing-16); }
.atoura-nav-sidebar .atoura-nav-drawer__item--active { background: var(--ap-color-selected-glow); }
.atoura-nav-sidebar .atoura-nav-drawer__group:first-child .atoura-nav-drawer__item--active { background: var(--atoura-color-brand-100); } /* Home, as drawn */

/* --- Portfolio cards (Portfolio file desktop frames, no spec) --------------------------------------- */
/* The drawn corner arrow is 16 px; its export carries the 2 px drop shadow's room (24 px). */
.atoura-card-arrow { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.atoura-card-arrow img { position: absolute; left: -4px; top: -2px; display: block; max-width: none; }
.atoura-trend-card, .atoura-iso-card, .atoura-iso-performance-card, .atoura-opportunity-card { display: flex; flex-direction: column; min-width: 0; padding: var(--atoura-spacing-16); background: var(--atoura-color-surface-raised); border-radius: var(--atoura-rounded-card); }
.atoura-trend-card, .atoura-iso-card { border: var(--atoura-border-stroke-regular) solid var(--atoura-color-border-default); }
.atoura-trend-card { gap: var(--atoura-spacing-8); }
.atoura-trend-card__head, .atoura-iso-card__head { display: flex; align-items: center; gap: var(--atoura-spacing-32); }
.atoura-iso-card__head { align-items: flex-start; }
.atoura-trend-card__title, .atoura-iso-card__title, .atoura-iso-performance-card__title { flex: 1 1 0; min-width: 0; margin: 0; font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); }
.atoura-trend-card__figure { display: flex; align-items: center; gap: var(--atoura-spacing-8); }
.atoura-trend-card__figure--progress { flex-direction: column; align-items: stretch; }
.atoura-trend-card__numbers { display: flex; flex-direction: column; gap: var(--atoura-spacing-4); flex: 1 1 0; min-width: 0; }
.atoura-trend-card__value { font-size: 24px; line-height: 1.3; font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-primary); }
.atoura-trend-card__delta { display: inline-flex; align-items: center; gap: var(--atoura-spacing-4); font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-medium); }
.atoura-trend-card__delta--danger { color: var(--ap-color-chart-danger); }
/* The chart is the exported path at its drawn size from the box's corner, clipped by the box (as the canvas
   frame clips it), so it reads the same at any width; the box stroke sits over it. */
.atoura-trend-card__spark { flex: 1 1 0; min-width: 0; height: 56px; background-color: var(--atoura-color-surface-sunken); background-repeat: no-repeat; background-position: 0 0; background-origin: border-box; border: var(--atoura-border-width-default) solid var(--atoura-color-neutral-400); border-radius: var(--atoura-rounded-card); }
.atoura-trend-card__bar { display: block; height: 8px; border-radius: var(--atoura-rounded-control); background: var(--atoura-color-surface-sunken); overflow: hidden; }
.atoura-trend-card__fill { display: block; height: 100%; border-radius: var(--atoura-rounded-control); }
.atoura-trend-card__fill--danger { background: var(--ap-color-chart-danger); }
.atoura-trend-card__fill--info { background: var(--ap-color-chart-info); }
.atoura-iso-card { gap: var(--atoura-spacing-16); }
.atoura-iso-card__name { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.atoura-iso-card__type { font-size: var(--atoura-type-size-sm); line-height: 18px; color: var(--atoura-color-text-muted); }
.atoura-iso-card__rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--atoura-spacing-8); margin: 0; }
.atoura-iso-card__row { display: flex; flex-direction: column; min-width: 0; }
.atoura-iso-card__row dt { font-size: var(--atoura-type-size-xs); line-height: 16px; color: var(--atoura-color-text-muted); }
.atoura-iso-card__row dd { margin: 0; font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-medium); color: var(--atoura-color-text-primary); }
.atoura-iso-card__badges { display: flex; flex-wrap: wrap; gap: var(--atoura-spacing-8); }
/* the performance card's stroke is drawn outside the layout (an inset ring); the opportunity card's inside it (a border) */
.atoura-iso-performance-card { gap: var(--atoura-spacing-4); box-shadow: inset 0 0 0 var(--atoura-border-width-default) var(--atoura-color-neutral-400); }
.atoura-iso-performance-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--atoura-spacing-16); }
.atoura-iso-performance-card__name { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--atoura-spacing-8); flex: 1 1 0; min-width: 0; }
.atoura-iso-performance-card__title { flex: 0 1 auto; font-weight: var(--atoura-type-weight-semibold); }
.atoura-iso-performance-card__network { font-size: var(--atoura-type-size-sm); line-height: 18px; color: var(--atoura-color-text-secondary); }
.atoura-iso-performance-card__stats { display: flex; flex-wrap: wrap; gap: var(--atoura-spacing-8) var(--atoura-spacing-16); margin: 0; }
.atoura-iso-performance-card__stat { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; /* literal-ok: drawn stat gap 6 */ }
.atoura-iso-performance-card__stat dt { font-size: var(--atoura-type-size-xs); line-height: 16px; color: var(--atoura-color-text-secondary); white-space: nowrap; }
.atoura-iso-performance-card__stat dd { margin: 0; }
.atoura-opportunity-card { flex-direction: row; align-items: flex-start; gap: var(--atoura-spacing-8); border: var(--atoura-border-width-default) solid var(--atoura-color-neutral-400); }
.atoura-opportunity-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--atoura-spacing-4); flex: 1 1 0; min-width: 0; }
.atoura-opportunity-card__merchant { font-size: var(--atoura-type-size-sm); line-height: 18px; font-weight: var(--atoura-type-weight-semibold); color: var(--atoura-color-text-primary); }
.atoura-opportunity-card__line { font-size: var(--atoura-type-size-sm); line-height: 18px; color: var(--atoura-color-text-secondary); }

/* Forced colours (Windows High Contrast) drop box-shadows: give the ring-drawn boundaries a system border, and
   the open select and the checked option a Highlight border so their state stays visible. */
@media (forced-colors: active) {
  .ap-select, .ap-field, .atoura-selector { border: 1px solid CanvasText; }
  .ap-select--open, .atoura-selector--active { border: 2px solid Highlight; }
  .atoura-iso-performance-card { border: 1px solid CanvasText; }
  .atoura-trend-card__bar { border: 1px solid CanvasText; }
  .atoura-trend-card__fill { forced-color-adjust: none; background: CanvasText; }
}