/* Iran Mall Public Relations — shared design system (Web + Admin).
   Tokens first, then base, layout, components, states and utilities.
   Logical properties only, so RTL is native and LTR islands (dir="ltr") stay correct. */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations"), url("fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand — sampled from the company logo: globe blue, ribbon gold, panel grey and the navy of its dark version.
     Blue and gold are complementary; the lighter and darker steps below complete the palette. */
  --im-navy-950: #0d1832;
  --im-navy-900: #16264a;
  --im-blue-900: #133a75;
  --im-blue-800: #194890;
  --im-blue-700: #2a62c4;
  --im-blue-100: #d5e1f3;
  --im-blue-50: #eaf0f9;
  --im-gold-700: #7a5a1c;
  --im-gold-500: #d7b16f;
  --im-gold-300: #debe90;
  --im-gold-50: #faf5ea;
  --im-gray-300: #d4d7d6;

  /* Semantic colors */
  --im-primary: var(--im-blue-800);
  --im-primary-hover: var(--im-blue-900);
  --im-primary-contrast: #fff;
  --im-accent: var(--im-gold-500);
  --im-bg: #f5f6f8;
  --im-surface: #fff;
  --im-surface-muted: #f8f9fb;
  --im-surface-elevated: #fff;
  --im-border: #d5d8de;
  --im-border-strong: #b4bac6;
  /* Edge of a form control (field, secondary button, segmented switch): 3:1 on white and on the page background
     (WCAG 1.4.11). Neutral on purpose, so it holds whatever brand colours are chosen. Decorative edges keep --im-border. */
  --im-control-border: #7c8698;
  --im-control-border-hover: #5f6b80;
  --im-divider: #eceef2;
  --im-text: #1b2233;
  --im-text-secondary: #55607a;
  --im-text-disabled: #8a93a5;
  --im-success: #146c43;
  --im-success-bg: #e7f6ee;
  --im-warning: #8a5300;
  --im-warning-bg: #fff4e0;
  --im-danger: #b42318;
  --im-danger-hover: #912018;
  --im-danger-bg: #fdecea;
  --im-info: #194890;
  --im-info-bg: #eaf0f9;
  --im-internal: #6b3fa0;
  --im-internal-bg: #f4eefb;
  /* Edges of the state colours (alerts, messages) and of the warm gold tint */
  --im-success-border: #bfe5d0;
  --im-danger-border: #f3c7c2;
  --im-warning-border: #f5dbac;
  --im-info-border: #c6d8f7;
  --im-internal-border: #c9b1e6;
  --im-gold-200: #e6d3ad;
  /* Edges of the reply box of a request: public reply and internal note (3:1 on white) */
  --im-control-border-public: #3d9a6c;
  --im-control-border-internal: #9a6fcf;
  /* Text and lines on the navy surfaces (footer, sidebar, heading bands) and on pictures: AA on --im-navy-950.
     A dimmer grey is not used for text there (#64748b was 3.7:1). */
  --im-on-dark: #e2e8f0;
  --im-on-dark-muted: #cbd5e1;
  --im-on-dark-subtle: #94a3b8;
  --im-on-image: #f1f5f9;
  --im-scrim: rgba(13, 24, 50, .5);

  /* Typography (--im-font-bold is the bold face; the branding settings replace it when a bold font is uploaded) */
  --im-font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  --im-font-bold: var(--im-font);
  --im-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --im-text-2xs: .75rem; /* the floor: no text is smaller */
  --im-text-xs: .8125rem;
  --im-text-sm: .875rem;
  --im-text-md: 1rem;
  --im-text-prose: 1.0625rem; /* running text of articles and page blocks */
  --im-text-lg: 1.125rem;
  --im-text-xl: 1.375rem;
  --im-text-2xl: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --im-text-display: clamp(1.875rem, 1.3rem + 2.2vw, 2.75rem);
  --im-leading: 1.85;
  --im-leading-tight: 1.45;

  /* Spacing (4px scale) */
  --im-space-1: .25rem;
  --im-space-2: .5rem;
  --im-space-3: .75rem;
  --im-space-4: 1rem;
  --im-space-5: 1.25rem;
  --im-space-6: 1.5rem;
  --im-space-8: 2rem;
  --im-space-10: 2.5rem;
  --im-space-12: 3rem;

  /* Shape & depth */
  --im-radius-xs: .25rem;
  --im-radius-sm: .5rem;
  --im-radius-md: .75rem;
  --im-radius-lg: 1rem;
  --im-radius-pill: 999px;
  --im-shadow-sm: 0 1px 2px rgba(13, 24, 50, .06);
  --im-shadow-md: 0 8px 24px rgba(13, 24, 50, .08);
  --im-shadow-lg: 0 24px 64px rgba(13, 24, 50, .22);
  --im-shadow-xs: 0 1px 2px rgba(13, 24, 50, .08);
  --im-shadow-raised: 0 14px 30px -12px rgba(13, 24, 50, .45); /* a tile lifted on hover */
  --im-shadow-overflow: 0 6px 12px -10px rgba(13, 24, 50, .35); /* a sticky bar over content that scrolls under it */
  --im-shadow-on-dark: 0 12px 28px rgba(4, 8, 20, .35);
  --im-shadow-on-image: 0 8px 24px rgba(0, 0, 0, .35);
  --im-shadow-lightbox: 0 20px 60px rgba(0, 0, 0, .55);
  /* White fills and lines on navy surfaces and pictures, from faint to nearly opaque */
  --im-glass-1: rgba(255, 255, 255, .08);
  --im-glass-2: rgba(255, 255, 255, .14);
  --im-glass-3: rgba(255, 255, 255, .2);
  --im-glass-4: rgba(255, 255, 255, .45);
  --im-glass-solid: rgba(255, 255, 255, .95);
  --im-focus-ring: 0 0 0 3px rgba(42, 98, 196, .4); /* soft halo only; never the focus indicator on its own */
  /* Keyboard focus: a solid 2px ring 2px away from the control, 3:1 or more against what is around it (WCAG 1.4.11,
     2.4.7). --im-focus follows the focus colour of the branding settings; dark surfaces switch to --im-focus-on-dark. */
  --im-focus: var(--im-blue-700);
  --im-focus-on-dark: var(--im-gold-500);
  --im-focus-width: 2px;
  --im-focus-offset: 2px;
  --im-focus-shadow: 0 0 0 var(--im-focus-offset) var(--im-surface), 0 0 0 calc(var(--im-focus-offset) + var(--im-focus-width)) var(--im-focus);

  /* Controls & layout (targets: 44px for the main controls, never under 24px; the small size grows on touch screens) */
  --im-control-height: 2.75rem;
  --im-control-height-sm: 2.25rem;
  --im-target-min: 1.5rem;
  --im-content-width: 1200px;
  --im-reading-width: 72ch;
  --im-sidebar-width: 17rem;
  --im-header-height: 4rem;

  /* Layers (--im-z-raised: a bar that stays over the content it scrolls with, below the sticky header). Plain numbers from
     -2 to 2 elsewhere only order the parts of one component (a picture under its shade, text over a decoration or over the
     full-size link of a card, the layers of the video player); each such component is its own stacking context, so they
     never compete with these page layers. */
  --im-z-raised: 5;
  --im-z-sticky: 20;
  --im-z-drawer: 40;
  --im-z-dialog: 60;
  --im-z-toast: 80;

  /* Motion: four durations and one curve; prefers-reduced-motion switches them all off (end of this file) */
  --im-duration-fast: 100ms;
  --im-duration: 160ms;
  --im-duration-slow: 250ms;
  --im-duration-slower: 500ms;
  --im-ease: cubic-bezier(.2, .8, .2, 1);
}
@media (pointer: coarse) {
  :root { --im-control-height-sm: 2.75rem; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--im-header-height) + var(--im-space-4)); }
/* A focused control is never left under a sticky header or a sticky save bar (WCAG 2.4.11): the page scrolls it clear. */
html:has(.form-actions-sticky), .dialog:has(.form-actions-sticky), .drawer:has(.form-actions-sticky) { scroll-padding-block-end: 5.5rem; }
body {
  margin: 0;
  font-family: var(--im-font);
  font-size: var(--im-text-md);
  line-height: var(--im-leading);
  color: var(--im-text);
  background: var(--im-bg);
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { line-height: var(--im-leading-tight); color: var(--im-navy-950); margin: 0 0 var(--im-space-3); font-weight: 700; }
h1 { font-size: var(--im-text-2xl); }
h2 { font-size: var(--im-text-xl); }
h3 { font-size: var(--im-text-lg); }
h1:focus { outline: none; }
p { margin: 0 0 var(--im-space-3); }
a { color: var(--im-blue-800); text-underline-offset: .2em; }
a:hover { color: var(--im-primary-hover); }
img { max-width: 100%; height: auto; }
code, kbd, .ltr-code { font-family: var(--im-font-mono); font-size: max(.75rem, .9em); } /* a code in small type stays 12px */
/* Persian words wrap between words only; addresses, codes and other Latin runs may break anywhere. */
.break-anywhere, .ltr-code, :where(td, dd, .card, .message) :is([dir="ltr"], code) { overflow-wrap: anywhere; }
bdi, [dir="ltr"] { unicode-bidi: isolate; }
small { font-size: max(.75rem, .8333em); } /* the browser's "smaller", but never under 12px */
:focus-visible { outline: var(--im-focus-width) solid var(--im-focus); outline-offset: var(--im-focus-offset); }
/* Dark surfaces: the ring turns to the accent colour, which stands out on navy and on pictures. */
.site-footer, .video-frame { --im-focus: var(--im-focus-on-dark); }
::selection { background: #dbe5ff; }
hr { border: 0; border-block-start: 1px solid var(--im-divider); margin: var(--im-space-6) 0; }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; inset-inline-start: var(--im-space-4); inset-block-start: -10rem;
  z-index: var(--im-z-toast); padding: var(--im-space-2) var(--im-space-4);
  background: var(--im-navy-950); color: #fff; border-radius: var(--im-radius-sm);
}
.skip-link:focus { inset-block-start: var(--im-space-2); color: #fff; }

/* ---------- Icons ---------- */
.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; vertical-align: -.25em; }
.icon-dir { transform: scaleX(-1); } /* directional glyphs drawn LTR, mirrored for RTL */
[dir="ltr"] .icon-dir { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--im-space-2);
  min-block-size: var(--im-control-height); padding: 0 var(--im-space-4);
  border: 1px solid transparent; border-radius: var(--im-radius-sm);
  font: inherit; font-weight: 600; font-size: var(--im-text-sm); line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--im-duration) var(--im-ease), border-color var(--im-duration), color var(--im-duration);
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--im-primary); color: var(--im-primary-contrast); }
.btn-primary:hover:not([disabled]) { background: var(--im-primary-hover); color: #fff; }
.btn-secondary { background: var(--im-surface); color: var(--im-navy-950); border-color: var(--im-control-border); }
.btn-secondary:hover:not([disabled]) { background: var(--im-surface-muted); color: var(--im-navy-950); }
.btn-ghost { background: transparent; color: var(--im-blue-800); }
.btn-ghost:hover:not([disabled]) { background: var(--im-blue-50); }
.btn-danger { background: var(--im-danger); color: #fff; }
.btn-danger:hover:not([disabled]) { background: var(--im-danger-hover); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--im-danger); }
.btn-danger-ghost:hover:not([disabled]) { background: var(--im-danger-bg); }
.btn-sm { min-block-size: var(--im-control-height-sm); padding: 0 var(--im-space-3); }
.btn-icon { inline-size: var(--im-control-height); padding: 0; }
.btn-icon.btn-sm { inline-size: var(--im-control-height-sm); }
.btn-block { inline-size: 100%; }
.btn .spinner { inline-size: 1em; block-size: 1em; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--im-space-6); }
.form-section {
  background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg);
  padding: var(--im-space-5); box-shadow: var(--im-shadow-sm);
}
.form-section > header { margin-block-end: var(--im-space-4); }
.form-section > header h2 { font-size: var(--im-text-lg); margin: 0; }
.form-section > header p { margin: var(--im-space-1) 0 0; color: var(--im-text-secondary); font-size: var(--im-text-sm); }
.form-grid { display: grid; gap: var(--im-space-4) var(--im-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .span-2, .form-grid .field-wide { grid-column: 1 / -1; }
.field { display: grid; gap: var(--im-space-1); align-content: start; min-inline-size: 0; }
.field > label, .field-label { font-weight: 600; font-size: var(--im-text-sm); color: var(--im-navy-900); }
.field .required { color: var(--im-danger); margin-inline-start: .15em; }
.field .hint { color: var(--im-text-secondary); font-size: var(--im-text-xs); line-height: 1.6; }
.field-error, .validation-message { color: var(--im-danger); font-size: var(--im-text-xs); line-height: 1.6; font-weight: 600; }
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"])), select, textarea {
  inline-size: 100%; min-block-size: var(--im-control-height);
  padding: var(--im-space-2) var(--im-space-3);
  font: inherit; font-size: var(--im-text-md); line-height: 1.6; color: var(--im-text);
  background: var(--im-surface); border: 1px solid var(--im-control-border); border-radius: var(--im-radius-sm);
  transition: border-color var(--im-duration), box-shadow var(--im-duration);
}
textarea { min-block-size: 7.5rem; resize: vertical; }
textarea.textarea-lg { min-block-size: 20rem; }
select { appearance: auto; }
input:hover, select:hover, textarea:hover { border-color: var(--im-control-border-hover); }
/* A field in use (keyboard or pointer) gets the focus colour on its edge and a 2px ring around it. */
input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"])):focus, select:focus, textarea:focus {
  outline: var(--im-focus-width) solid var(--im-focus); outline-offset: 0; border-color: var(--im-focus);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--im-surface-muted); color: var(--im-text-disabled); cursor: not-allowed; }
input[readonly], textarea[readonly] { background: var(--im-surface-muted); border-style: dashed; }
.invalid:not(form), input.modified.invalid, [aria-invalid="true"] { border-color: var(--im-danger) !important; }
input[type="file"] { font: inherit; font-size: var(--im-text-sm); max-inline-size: 100%; }
.check { display: inline-flex; align-items: flex-start; gap: var(--im-space-2); min-block-size: 2.75rem; padding-block: .6rem; cursor: pointer; font-size: var(--im-text-sm); }
.check input { inline-size: 1.15rem; block-size: 1.15rem; margin: .2rem 0 0; accent-color: var(--im-primary); flex: none; }
.check small { display: block; font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 var(--im-space-4); }
/* One choice among a few, each a card with a radio, a name and a line of description (option-cards / option-card). The
   chosen card is outlined and tinted; the focus ring goes around the card. */
.option-cards { border: 0; margin: 0; padding: 0; display: grid; gap: var(--im-space-2); min-inline-size: 0; }
.option-cards > legend { margin-block-end: var(--im-space-2); }
.option-card { display: flex; align-items: flex-start; gap: var(--im-space-3); padding: var(--im-space-3); border: 1px solid var(--im-control-border); border-radius: var(--im-radius-md); background: var(--im-surface); cursor: pointer; }
.option-card > input { margin-block-start: .3rem; flex: none; }
.option-card > span { display: grid; gap: 2px; min-inline-size: 0; }
.option-card:has(input:checked) { border-color: var(--im-blue-700); box-shadow: inset 0 0 0 1px var(--im-blue-700); background: var(--im-blue-50); }
.option-card:has(input:focus-visible) { outline: var(--im-focus-width) solid var(--im-focus); outline-offset: 2px; }
.option-card.is-disabled { cursor: not-allowed; color: var(--im-text-secondary); background: var(--im-surface-muted); }
.h-sm { font-size: var(--im-text-md); margin: 0; }
.text-warning { color: var(--im-warning) !important; }
.me-auto { margin-inline-end: auto !important; }
fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
legend { font-weight: 700; font-size: var(--im-text-sm); margin-block-end: var(--im-space-2); padding: 0; }
.form-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-3);
  padding-block-start: var(--im-space-2);
}
.form-actions .spacer { flex: 1; }
.form-actions-sticky {
  position: sticky; inset-block-end: 0; z-index: var(--im-z-sticky);
  margin-inline: calc(var(--im-space-5) * -1); padding: var(--im-space-3) var(--im-space-5);
  background: rgba(255, 255, 255, .96); border-block-start: 1px solid var(--im-border);
  backdrop-filter: blur(6px);
}
.validation-errors { margin: 0; padding: var(--im-space-3) var(--im-space-5); list-style: disc inside; color: var(--im-danger); background: var(--im-danger-bg); border-radius: var(--im-radius-md); font-size: var(--im-text-sm); }
.input-group { display: flex; gap: var(--im-space-2); }
.input-group > input { flex: 1; }

/* ---------- Cards & surfaces ---------- */
.card {
  background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg);
  padding: var(--im-space-5); box-shadow: var(--im-shadow-sm); min-inline-size: 0;
}
.card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--im-space-2) var(--im-space-3); margin-block-end: var(--im-space-4); }
.card-header h2, .card-header h3 { margin: 0; font-size: var(--im-text-lg); }
.card-link { color: inherit; text-decoration: none; display: block; transition: border-color var(--im-duration), box-shadow var(--im-duration); }
.card-link:hover { border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); color: inherit; }
.muted { color: var(--im-text-secondary); }
.small { font-size: var(--im-text-sm); }
.xsmall { font-size: var(--im-text-xs); }

/* ---------- Page header & breadcrumbs ---------- */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--im-space-3) var(--im-space-4); margin-block-end: var(--im-space-6); }
.page-header-text { min-inline-size: 0; flex: 1 1 22rem; }
.page-header h1 { margin: 0; }
.page-header .lead { margin: var(--im-space-1) 0 0; color: var(--im-text-secondary); }
.page-header-actions { display: flex; flex-wrap: wrap; gap: var(--im-space-2); }
.eyebrow { display: block; margin: 0 0 var(--im-space-1); font-size: var(--im-text-xs); font-weight: 700; color: var(--im-gold-700); letter-spacing: 0; }
/* Breadcrumbs (Breadcrumbs.razor): legible but quieter than the heading; links underlined before hover; the separator
   points the reading way (right to left) and is not read aloud. */
.breadcrumbs { margin: 0 0 var(--im-space-2); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--im-space-2); list-style: none; margin: 0; padding: 0; font-size: var(--im-text-sm); line-height: 1.6; color: var(--im-text-secondary); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--im-space-2); min-inline-size: 0; }
.breadcrumbs li + li::before { content: "‹"; content: "‹" / ""; font-size: 1.15em; line-height: 1; color: var(--im-text-secondary); opacity: .75; }
.breadcrumbs a { display: inline-flex; align-items: center; min-block-size: var(--im-target-min); padding-inline: 2px; color: var(--im-blue-800); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: .3em; border-radius: var(--im-radius-sm); }
.breadcrumbs a:hover { color: var(--im-navy-950); text-decoration-color: currentColor; }
.breadcrumbs [aria-current="page"] { color: var(--im-text); }
.breadcrumbs-dark ol, .breadcrumbs-dark li + li::before, .breadcrumbs-dark [aria-current="page"] { color: var(--im-on-dark-muted); }
.breadcrumbs-dark a { color: #fff; }
.breadcrumbs-dark a:hover { color: var(--im-gold-300); }
.breadcrumbs-dark a:focus-visible, .breadcrumbs-image a:focus-visible { outline-color: var(--im-focus-on-dark); }
.breadcrumbs-image ol, .breadcrumbs-image li + li::before, .breadcrumbs-image a, .breadcrumbs-image [aria-current="page"] { color: var(--im-on-image); opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .45); }
.breadcrumbs-image a:hover { color: #fff; text-decoration-color: currentColor; }
@media screen and (max-width: 640px) {
  .breadcrumbs-current { flex: 1 1 6rem; }
  .breadcrumbs-current > span { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Chips / badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35em; padding: .1rem .6rem; min-block-size: 1.6rem;
  border-radius: var(--im-radius-pill); font-size: var(--im-text-xs); font-weight: 600; line-height: 1.4; white-space: nowrap;
  background: var(--im-surface-muted); color: var(--im-text-secondary); border: 1px solid var(--im-divider);
}
.chip::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; opacity: .85; }
.chip-plain::before { display: none; }
.chip-success { background: var(--im-success-bg); color: var(--im-success); border-color: transparent; }
.chip-warning { background: var(--im-warning-bg); color: var(--im-warning); border-color: transparent; }
.chip-danger { background: var(--im-danger-bg); color: var(--im-danger); border-color: transparent; }
.chip-info { background: var(--im-info-bg); color: var(--im-info); border-color: transparent; }
.chip-accent { background: var(--im-gold-50); color: var(--im-gold-700); border-color: transparent; }
.chip-internal { background: var(--im-internal-bg); color: var(--im-internal); border-color: transparent; }
.chip-list { display: flex; flex-wrap: wrap; gap: var(--im-space-1); }
/* Colours of member groups (ManagerGroupRules.Colors): text and background pairs at 4.5:1 or more, the text colour also
   used as the accent of a group heading on the about page. */
.group-tone-neutral { --group-fg: #3d4552; --group-bg: #eef1f5; }
.group-tone-navy { --group-fg: #1b2a4a; --group-bg: #e3e9f4; }
.group-tone-blue { --group-fg: #0b4a8b; --group-bg: #e2eefb; }
.group-tone-gold { --group-fg: #6b4a00; --group-bg: #fbf1d6; }
.group-tone-green { --group-fg: #1e5b38; --group-bg: #e0f2e7; }
.group-tone-ink { --group-fg: #1f1f24; --group-bg: #e9e9ee; }
.chip.group-chip { background: var(--group-bg, var(--im-surface-muted)); color: var(--group-fg, var(--im-text)); border-color: transparent; }
.member-group-title[class*="group-tone-"] { color: var(--group-fg); border-inline-start: 4px solid var(--group-fg); padding-inline-start: var(--im-space-3); }
/* Documents of an opportunity (Web/Components/Shared/DocumentList.razor): the public page and the panel preview share it. */
.doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-2); }
.doc-item { display: flex; align-items: center; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-4); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); }
.doc-icon { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--im-radius-md); background: var(--im-surface-muted); color: var(--im-text-secondary); }
.doc-body { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 2px; }
.doc-body strong { overflow-wrap: anywhere; }
.doc-text { margin: 0; color: var(--im-text-secondary); font-size: var(--im-text-sm); white-space: pre-line; }
.doc-meta { font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.doc-download { flex: none; }
@media screen and (max-width: 480px) { .doc-item { flex-wrap: wrap; } .doc-download { inline-size: 100%; justify-content: center; } }

/* ---------- Toolbar & filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--im-space-3); margin-block-end: var(--im-space-4); }
.toolbar .search { flex: 1 1 18rem; max-inline-size: 28rem; position: relative; }
.toolbar .search .icon { position: absolute; inset-inline-start: .75rem; inset-block-start: 50%; transform: translateY(-50%); color: var(--im-text-secondary); pointer-events: none; }
.toolbar .search input { padding-inline-start: 2.4rem; }
.toolbar .filter { display: grid; gap: 2px; min-inline-size: 10rem; }
.toolbar .filter label, .toolbar .filter .field-label { font-size: var(--im-text-xs); color: var(--im-text-secondary); font-weight: 600; }
.toolbar .toolbar-end { margin-inline-start: auto; display: flex; gap: var(--im-space-2); flex-wrap: wrap; }
.filter-group { display: contents; }
.filter-toggle { display: none; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2); margin: calc(var(--im-space-2) * -1) 0 var(--im-space-4); font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.segmented { display: inline-flex; border: 1px solid var(--im-control-border); border-radius: var(--im-radius-sm); overflow: hidden; }
.segmented a, .segmented button { border: 0; background: var(--im-surface); padding: 0 var(--im-space-3); min-block-size: var(--im-control-height-sm); font: inherit; font-size: var(--im-text-sm); color: var(--im-text); text-decoration: none; display: inline-flex; align-items: center; cursor: pointer; }
.segmented > * + * { border-inline-start: 1px solid var(--im-control-border) !important; }
.segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--im-navy-950); color: #fff; }

/* ---------- Data table (desktop table, mobile cards) ---------- */
/* Positioned, so text that is hidden off screen inside a cell (visually-hidden) scrolls with the table instead of
   widening the page. */
.table-wrap { position: relative; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); overflow-x: auto; box-shadow: var(--im-shadow-sm); }
.data-table { inline-size: 100%; border-collapse: collapse; font-size: var(--im-text-sm); }
.data-table th {
  position: sticky; inset-block-start: 0; text-align: start; font-weight: 700; font-size: var(--im-text-xs);
  color: var(--im-text-secondary); background: var(--im-surface-muted); padding: var(--im-space-3) var(--im-space-4);
  border-block-end: 1px solid var(--im-border); white-space: nowrap;
}
.data-table td { padding: var(--im-space-3) var(--im-space-4); border-block-end: 1px solid var(--im-divider); vertical-align: middle; text-align: start; overflow-wrap: break-word; }
.data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody tr:hover { background: #fafbfe; }
.data-table .cell-title { font-weight: 600; color: var(--im-navy-950); min-inline-size: 12rem; }
/* A title that opens its item reads as a link before any hover: link colour and a light underline that darkens on hover.
   Rows themselves are never links, so selecting text or using the buttons of a row does not open it. */
.data-table .cell-title a, .title-link { color: var(--im-blue-800); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .28em; }
.data-table .cell-title a { display: inline-block; min-inline-size: 1.5rem; min-block-size: 1.5rem; }
.data-table .cell-title a:hover, .title-link:hover { color: var(--im-navy-950); text-decoration-color: currentColor; }
/* Second line under a title (code, address, owner), in tables, lists and buttons alike. */
.cell-sub { display: block; font-weight: 400; color: var(--im-text-secondary); font-size: var(--im-text-xs); line-height: 1.6; }
.data-table .cell-wide { min-inline-size: 12rem; }
@media print, (min-width: 721px) { .data-table .cell-wide { min-inline-size: 16rem; } }
.cell-badges { margin-block-start: var(--im-space-1); }
.data-table .cell-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table .cell-actions { text-align: end; white-space: nowrap; inline-size: 1%; }
.data-table .cell-actions .btn + .btn { margin-inline-start: var(--im-space-1); }
.data-table tr.is-overdue td:first-child { box-shadow: inset -3px 0 0 var(--im-danger); }
.truncate { max-inline-size: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media screen and (max-width: 720px) {
  .table-wrap.stack { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .stack .data-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack .data-table, .stack .data-table tbody, .stack .data-table tr, .stack .data-table td { display: block; inline-size: 100%; }
  /* A row is a card: its title across, its details two by two (label above value), its actions in one wrapping line. */
  .stack .data-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--im-space-3); background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); padding: var(--im-space-2) var(--im-space-3); margin-block-end: var(--im-space-3); }
  /* Items keep their own size (a badge is not stretched to the cell) and sit at the top when the neighbour is taller. */
  .stack .data-table td { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; gap: 0; border: 0; padding: var(--im-space-1) 0; min-inline-size: 0; }
  .stack .data-table td::before { content: attr(data-label); color: var(--im-text-secondary); font-size: var(--im-text-xs); font-weight: 600; }
  .stack .data-table td.cell-title { grid-column: 1 / -1; grid-template-columns: 1fr; font-size: var(--im-text-md); padding-block-end: var(--im-space-2); }
  .stack .data-table td.cell-title::before { display: none; }
  .stack .data-table td.cell-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--im-space-1); text-align: start; border-block-start: 1px solid var(--im-divider); margin-block-start: var(--im-space-2); padding-block-start: var(--im-space-2); white-space: normal; }
  .stack .data-table td.cell-actions .btn + .btn { margin-inline-start: 0; }
  /* A badge in a half-width detail may wrap rather than push the card wider than the screen. */
  .stack .data-table td .chip { max-inline-size: 100%; white-space: normal; }
  .stack .data-table td.cell-actions::before { display: none; }
  .stack .data-table tr.is-overdue { border-inline-start: 4px solid var(--im-danger); }
  .stack .data-table tr.is-overdue td:first-child { box-shadow: none; }
}

/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--im-space-3); margin-block-start: var(--im-space-4); font-size: var(--im-text-sm); color: var(--im-text-secondary); }
.pager-controls { display: flex; align-items: center; gap: var(--im-space-2); }

/* ---------- States ---------- */
.state { display: grid; justify-items: center; text-align: center; gap: var(--im-space-2); padding: var(--im-space-10) var(--im-space-5); background: var(--im-surface); border: 1px dashed var(--im-border-strong); border-radius: var(--im-radius-lg); }
.state .state-icon { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--im-surface-muted); color: var(--im-text-secondary); }
.state .state-icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }
.state h2, .state h3 { margin: 0; font-size: var(--im-text-lg); }
.state p { margin: 0; color: var(--im-text-secondary); max-inline-size: 42ch; }
.state .state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--im-space-2); margin-block-start: var(--im-space-2); }
.state-error { border-style: solid; border-color: var(--im-danger-border); background: #fffafa; }
.state-error .state-icon { background: var(--im-danger-bg); color: var(--im-danger); }
.state-compact { padding: var(--im-space-6) var(--im-space-4); }
.skeleton { display: grid; gap: var(--im-space-3); }
.skeleton-line { block-size: .9rem; border-radius: var(--im-radius-sm); background: linear-gradient(90deg, #eceff4 25%, #f6f8fb 50%, #eceff4 75%); background-size: 200% 100%; animation: im-shimmer 1.4s linear infinite; }
.skeleton-line.w-60 { inline-size: 60%; } .skeleton-line.w-40 { inline-size: 40%; } .skeleton-line.w-80 { inline-size: 80%; }
.skeleton-block { block-size: 3.25rem; border-radius: var(--im-radius-md); background: linear-gradient(90deg, #eceff4 25%, #f6f8fb 50%, #eceff4 75%); background-size: 200% 100%; animation: im-shimmer 1.4s linear infinite; }
.spinner { inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: im-spin .7s linear infinite; display: inline-block; }
@keyframes im-shimmer { to { background-position: -200% 0; } }
@keyframes im-spin { to { transform: rotate(360deg); } }

/* ---------- Alerts / feedback ---------- */
.alert { display: flex; align-items: flex-start; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-4); border-radius: var(--im-radius-md); font-size: var(--im-text-sm); border: 1px solid transparent; margin-block-end: var(--im-space-4); }
.alert .icon { margin-block-start: .2em; }
.alert > div { flex: 1; min-inline-size: 0; }
.alert strong { display: block; }
.alert-success { background: var(--im-success-bg); color: var(--im-success); border-color: var(--im-success-border); }
.alert-danger { background: var(--im-danger-bg); color: var(--im-danger); border-color: var(--im-danger-border); }
.alert-warning { background: var(--im-warning-bg); color: var(--im-warning); border-color: var(--im-warning-border); }
.alert-info { background: var(--im-info-bg); color: var(--im-info); border-color: var(--im-info-border); }
.toast-region { position: fixed; inset-block-end: var(--im-space-4); inset-inline-start: 50%; transform: translateX(50%); z-index: var(--im-z-toast); display: grid; gap: var(--im-space-2); inline-size: min(28rem, calc(100vw - 2rem)); pointer-events: none; }
.toast-region .alert { pointer-events: auto; box-shadow: var(--im-shadow-md); margin: 0; }
/* A notice: what it is in words, the message, keep and close; a thin bar shows the time left (stopped while hovered or
   focused, hidden when motion is reduced). */
.toast { position: relative; overflow: hidden; align-items: center; }
.toast .toast-label { display: inline; margin-inline-end: .25em; }
.toast-actions { display: flex; gap: 2px; align-self: flex-start; margin-block: -.35rem; margin-inline-end: -.5rem; }
.toast-actions .btn { color: inherit; }
.toast-actions [aria-pressed="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
.toast-timer { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: currentColor; opacity: .35; transform-origin: right; animation: toast-life var(--toast-life, 15s) linear forwards; }
[dir="ltr"] .toast-timer { transform-origin: left; }
.toast.is-paused .toast-timer { animation-play-state: paused; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .toast-timer { display: none; } }

/* Tooltip of icon-only controls (im.js): above the control, below it when there is no room; hoverable; Escape closes. */
.im-tip { position: absolute; z-index: calc(var(--im-z-toast) + 10); max-inline-size: min(18rem, calc(100vw - 1rem)); padding: var(--im-space-1) var(--im-space-2); border-radius: var(--im-radius-sm); background: var(--im-navy-950); color: #fff; font-family: var(--im-font); font-size: var(--im-text-xs); line-height: 1.6; box-shadow: var(--im-shadow-md); pointer-events: auto; overflow-wrap: anywhere; }
.im-tip[hidden] { display: none; }

/* ---------- Dialog & drawer ---------- */
.overlay { position: fixed; inset: 0; z-index: var(--im-z-dialog); display: grid; place-items: center; padding: var(--im-space-4); background: var(--im-scrim); }
.dialog { inline-size: min(34rem, 100%); max-block-size: calc(100dvh - 2rem); overflow: auto; background: var(--im-surface-elevated); border-radius: var(--im-radius-lg); box-shadow: var(--im-shadow-lg); padding: var(--im-space-6); }
.dialog-lg { inline-size: min(52rem, 100%); }
.dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--im-space-3); margin-block-end: var(--im-space-3); }
.dialog header h2 { margin: 0; font-size: var(--im-text-lg); }
.dialog footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--im-space-2); margin-block-start: var(--im-space-5); }
.drawer-overlay { place-items: stretch end; padding: 0; }
.drawer { inline-size: min(36rem, 100%); block-size: 100dvh; overflow: auto; background: var(--im-surface-elevated); box-shadow: var(--im-shadow-lg); padding: var(--im-space-6); }
@media screen and (max-width: 720px) {
  .overlay:not(.drawer-overlay) { place-items: end stretch; padding: 0; }
  .dialog { inline-size: 100%; border-end-start-radius: 0; border-end-end-radius: 0; max-block-size: 92dvh; }
  .dialog footer { flex-direction: column-reverse; }
  .dialog footer .btn { inline-size: 100%; }
}

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--im-space-1); border-block-end: 1px solid var(--im-border); margin-block-end: var(--im-space-5); overflow-x: auto; scrollbar-width: thin; }
.tabs a, .tabs button { display: inline-flex; align-items: center; gap: var(--im-space-2); min-block-size: var(--im-control-height); padding: 0 var(--im-space-4); border: 0; border-block-end: 3px solid transparent; background: none; font: inherit; font-size: var(--im-text-sm); font-weight: 600; color: var(--im-text-secondary); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--im-blue-800); border-block-end-color: var(--im-blue-800); }
.tabs .count { font-size: var(--im-text-xs); background: var(--im-surface-muted); border-radius: var(--im-radius-pill); padding: 0 .45rem; }

/* ---------- Timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; inset-block: .5rem; inset-inline-start: .55rem; inline-size: 2px; background: var(--im-divider); }
.timeline > li { position: relative; padding-inline-start: 2.25rem; padding-block-end: var(--im-space-5); }
.timeline > li:last-child { padding-block-end: 0; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: .15rem; inset-block-start: .45rem; inline-size: .85rem; block-size: .85rem; border-radius: 50%; background: var(--im-surface); border: 3px solid var(--im-blue-800); }
.timeline > li.is-internal::before { border-color: var(--im-internal); }
.timeline > li.is-public::before { border-color: var(--im-success); }
.timeline > li.is-status::before { border-color: var(--im-gold-500); }
.timeline time, .timeline .meta { display: block; font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.timeline :is(h2, h3) { font-size: var(--im-text-md); margin: 0; }
.message { border-radius: var(--im-radius-md); padding: var(--im-space-3) var(--im-space-4); margin-block-start: var(--im-space-2); white-space: pre-wrap; overflow-wrap: break-word; }
.message-public { background: var(--im-success-bg); border: 1px solid var(--im-success-border); }
.message-internal { background: var(--im-internal-bg); border: 1px dashed var(--im-internal-border); }
.message-requester { background: var(--im-surface-muted); border: 1px solid var(--im-border); }

/* ---------- Tree ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-inline-start: var(--im-space-6); border-inline-start: 1px dashed var(--im-border-strong); margin-inline-start: 1.05rem; }
.tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2) var(--im-space-3); padding: var(--im-space-2) var(--im-space-3); border-radius: var(--im-radius-md); min-block-size: 3.25rem; }
.tree-row:hover { background: var(--im-surface-muted); }
.tree-row .tree-name { font-weight: 600; flex: 1 1 12rem; min-inline-size: 0; }
.tree-row .tree-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2); }
.tree-row .tree-actions { display: flex; flex-wrap: wrap; gap: var(--im-space-1); }
.tree-toggle { inline-size: 2.25rem; block-size: 2.25rem; }
.tree-spacer { inline-size: 2.25rem; flex: none; }

/* ---------- Stats, progress ---------- */
/* Five figures fit one row on a desktop; phones show them two by two. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--im-space-4); }
@media screen and (max-width: 720px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-space-3); } }
.stat { background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); padding: var(--im-space-4) var(--im-space-5); display: grid; gap: var(--im-space-1); text-decoration: none; color: inherit; }
.stat .stat-value { font-size: var(--im-text-2xl); font-weight: 800; color: var(--im-navy-950); font-variant-numeric: tabular-nums; line-height: 1.3; }
.stat .stat-label { color: var(--im-text-secondary); font-size: var(--im-text-sm); }
.stat .stat-meta { color: var(--im-text-secondary); font-size: var(--im-text-xs); }
a.stat:hover { border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); color: inherit; }
.stat-danger .stat-value { color: var(--im-danger); }

/* ---------- "At a glance" statistics (public pages and the layout preview in administration) ----------
   Three layouts chosen in administration: cards (default), a strip of large figures and a compact two-column list. */
.stat-band { display: grid; gap: var(--im-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
/* A lone statistic card keeps a card width instead of stretching across the row. */
.stat-band:not(.is-strip):not(.is-compact):has(> .stat:only-child) { grid-template-columns: minmax(min(100%, 16rem), 22rem); }
.stat-band .stat { min-inline-size: 0; container-type: inline-size; overflow-wrap: anywhere; }
.stat-band .stat .stat-value { font-size: clamp(1.5rem, 15cqi, 2.5rem); font-weight: 800; color: var(--im-blue-800); display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .4rem; line-height: 1.25; }
.stat-band .stat .stat-value small { font-size: var(--im-text-sm); white-space: nowrap; }
.stat-band .stat .stat-meta { line-height: 1.8; }
.stat-band .stat .stat-icon { inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--im-blue-50); color: var(--im-blue-800); margin-block-end: var(--im-space-1); }
.stat-band .stat .stat-icon .icon { inline-size: 1.25rem; block-size: 1.25rem; }
.stat-band .stat .stat-description { color: var(--im-text-secondary); font-size: var(--im-text-sm); line-height: 1.9; }
/* Strip: figures side by side with hairline separators (the gaps show the divider colour); a wrapped row stretches. */
.stat-band.is-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--im-divider); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); overflow: hidden; }
.stat-band.is-strip .stat { flex: 1 1 9.5rem; border: 0; border-radius: 0; justify-items: center; text-align: center; padding: var(--im-space-5) var(--im-space-3); }
.stat-band.is-strip .stat .stat-icon { display: none; }
.stat-band.is-strip .stat .stat-label { order: 2; }
.stat-band.is-strip .stat .stat-value { justify-content: center; font-size: clamp(1.75rem, 18cqi, 2.75rem); }
.stat-band.is-strip .stat .stat-description, .stat-band.is-strip .stat .stat-meta { order: 3; }
/* Compact list: title and value on one line, in as many columns as fit. */
.stat-band.is-compact { gap: 0 var(--im-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.stat-band.is-compact .stat { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--im-space-4); background: transparent; border: 0; border-block-end: 1px solid var(--im-divider); border-radius: 0; padding: var(--im-space-3) 0; }
.stat-band.is-compact .stat .stat-icon { display: none; }
.stat-band.is-compact .stat .stat-label { color: var(--im-text); font-size: var(--im-text-md); }
.stat-band.is-compact .stat .stat-value { font-size: var(--im-text-lg); justify-content: flex-end; }
.stat-band.is-compact .stat .stat-description, .stat-band.is-compact .stat .stat-meta { grid-column: 1 / -1; }
.progress { display: flex; align-items: center; gap: var(--im-space-3); }
.progress-track { flex: 1; block-size: .5rem; border-radius: var(--im-radius-pill); background: var(--im-divider); overflow: hidden; }
.progress-bar { block-size: 100%; background: linear-gradient(90deg, var(--im-blue-800), var(--im-blue-700)); border-radius: inherit; }
.progress-value { font-size: var(--im-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; min-inline-size: 3.5rem; text-align: end; }

/* ---------- Definition lists ---------- */
.meta-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--im-space-2) var(--im-space-4); margin: 0; font-size: var(--im-text-sm); }
.meta-list dt { color: var(--im-text-secondary); }
.meta-list dd { margin: 0; min-inline-size: 0; overflow-wrap: break-word; }
.meta-list dd a { display: inline-flex; align-items: center; min-block-size: var(--im-target-min); }

/* ---------- Media grid ---------- */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--im-space-4); }
.media-tile { position: relative; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); overflow: hidden; display: grid; }
.media-tile.is-selected { outline: 3px solid var(--im-blue-700); outline-offset: -1px; }
.media-thumb { aspect-ratio: 4 / 3; background: var(--im-surface-muted); display: grid; place-items: center; color: var(--im-text-secondary); overflow: hidden; }
.media-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.media-thumb .icon { inline-size: 2.25rem; block-size: 2.25rem; }
.media-body { padding: var(--im-space-2) var(--im-space-3) var(--im-space-3); display: grid; gap: 2px; min-inline-size: 0; }
.media-body strong { font-size: var(--im-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-body span { font-size: var(--im-text-xs); color: var(--im-text-secondary); }
.media-tile .media-actions { display: flex; gap: var(--im-space-1); padding: 0 var(--im-space-2) var(--im-space-2); flex-wrap: wrap; }
.dropzone { display: grid; gap: var(--im-space-2); justify-items: center; text-align: center; padding: var(--im-space-6); border: 2px dashed var(--im-border-strong); border-radius: var(--im-radius-lg); background: var(--im-surface-muted); }
.dropzone:focus-within { border-color: var(--im-focus); }

/* ---------- Layout helpers ---------- */
.stack-sm > * + * { margin-block-start: var(--im-space-2); }
.stack-md > * + * { margin-block-start: var(--im-space-4); }
.stack-lg > * + * { margin-block-start: var(--im-space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--im-space-2); }
.split { display: grid; gap: var(--im-space-6); grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; }
.split-wide-aside { grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem); }
.split-list-first { grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); }
.search-inline { position: relative; flex: 1 1 14rem; max-inline-size: 22rem; }
/* A date filter holds the three selects of the date picker on one row (with its clear button). */
.filter-date { min-inline-size: min(19rem, 100%); }
/* Filter bars with dates fill their rows: the filters share the width instead of leaving a lone one on a row. */
.toolbar:has(.filter-date) > .filter { flex: 1 1 11rem; }
.toolbar:has(.filter-date) > .filter-date { flex: 2 1 19rem; }
.grid-2 { display: grid; gap: var(--im-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: var(--im-space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sticky-aside { position: sticky; inset-block-start: calc(var(--im-header-height) + var(--im-space-4)); }
.text-end { text-align: end; }
.m-0 { margin: 0; }
.text-lg { font-size: var(--im-text-lg); }
.text-xl { font-size: var(--im-text-xl); }
.text-danger { color: var(--im-danger); }
.pre-line { white-space: pre-line; }
.cover { inline-size: 100%; block-size: 100%; object-fit: cover; }
.summary-link { cursor: pointer; color: var(--im-blue-800); font-weight: 600; }
.gallery-link { display: block; aspect-ratio: 4 / 3; border-radius: var(--im-radius-md); overflow: hidden; background: var(--im-surface-muted); }
.tile-button { all: unset; cursor: pointer; display: grid; }
.tile-button:focus-visible { outline: 3px solid var(--im-focus); outline-offset: -3px; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

@media screen and (max-width: 1100px) {
  .split, .split-wide-aside, .split-list-first { grid-template-columns: minmax(0, 1fr); }
  .sticky-aside { position: static; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 720px) {
  .form-grid, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .page-header { align-items: stretch; }
  .page-header-actions { inline-size: 100%; }
  .page-header-actions .btn { flex: 1 1 auto; }
  .toolbar .search { max-inline-size: none; flex-basis: 100%; }
  .toolbar .filter { flex: 1 1 45%; min-inline-size: 0; }
  .toolbar .filter-date { flex-basis: 100%; }
  .toolbar .toolbar-end { margin-inline-start: 0; inline-size: 100%; }
  .filter-toggle { display: inline-flex; }
  .filter-group { display: none; inline-size: 100%; gap: var(--im-space-3); flex-wrap: wrap; }
  .filter-group.is-open { display: flex; }
  .tabs { flex-wrap: wrap; overflow: visible; row-gap: 0; }
  .tabs a, .tabs button { padding-inline: var(--im-space-3); }
  .form-section { padding: var(--im-space-4); }
  .form-actions-sticky { margin-inline: calc(var(--im-space-4) * -1); padding-inline: var(--im-space-4); }
  .meta-list { grid-template-columns: 1fr; gap: 0; }
  .meta-list dd { margin-block-end: var(--im-space-2); }
}

/* Reduced motion: one rule for the whole interface (site, panel and blocks), so no component needs its own. */
/* ---------- Breakpoints ----------
   One set for the whole interface: 480 (phone), 720 (phone and small tablet: one column), 1000 (tablet: side columns
   stack), 1100 (the header menu and the panel sidebar fold), plus 360 for the smallest header and 420 for the photo wall.
   They match the window classes of Material Design 3 (compact under 600, medium to 840, expanded above). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  .no-print, .skip-link { display: none !important; }
  body { background: #fff; }
}

/* Communication channels: icon + title cards, used by the contact hub and the admin preview (44px icon targets). */
.channel-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.channel-link { display: flex; align-items: center; gap: var(--im-space-3); padding: var(--im-space-3) var(--im-space-4); border: 1px solid var(--im-border); border-radius: var(--im-radius-lg); background: var(--im-surface); color: var(--im-text); text-decoration: none; transition: border-color var(--im-duration), box-shadow var(--im-duration); }
.channel-link:hover, .channel-link:focus-visible { border-color: var(--im-border-strong); box-shadow: var(--im-shadow-md); color: var(--im-text); }
.channel-icon { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: var(--im-blue-50); color: var(--im-blue-800); }
.channel-icon .icon { inline-size: 1.4rem; block-size: 1.4rem; }
.channel-icon img { inline-size: 1.75rem; block-size: 1.75rem; object-fit: contain; }

/* ---------- Site menu (public shell and its live preview in administration) ----------
   Desktop: links and groups (disclosure menus) in the header. Phones and tablets: the same entries in a panel, each group
   as a labelled list. The header decides which of the two is shown (content.css). */
.site-nav { display: flex; align-items: center; gap: var(--im-space-1); margin-inline-start: auto; }
.site-nav > a { display: inline-flex; align-items: center; min-block-size: var(--im-control-height); padding: 0 var(--im-space-3); border-radius: var(--im-radius-sm); color: var(--im-text); text-decoration: none; font-size: var(--im-text-sm); font-weight: 600; white-space: nowrap; }
.site-nav > a:hover { background: var(--im-blue-50); color: var(--im-blue-800); }
.site-nav > a.active { color: var(--im-blue-800); background: var(--im-blue-50); }
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--im-space-1); min-block-size: var(--im-control-height); padding: 0 var(--im-space-3); border-radius: var(--im-radius-sm); color: var(--im-text); font-size: var(--im-text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary:hover, .nav-dropdown > summary.active, .nav-dropdown[open] > summary { background: var(--im-blue-50); color: var(--im-blue-800); }
.nav-dropdown > summary .icon { inline-size: 1rem; block-size: 1rem; transition: transform var(--im-duration); }
.nav-dropdown[open] > summary .icon { transform: rotate(180deg); }
.nav-dropdown-panel { position: absolute; inset-block-start: calc(100% + .35rem); inset-inline-start: 0; min-inline-size: 16rem; background: var(--im-surface); border: 1px solid var(--im-border); border-radius: var(--im-radius-md); box-shadow: var(--im-shadow-md); padding: var(--im-space-2); display: grid; gap: 2px; z-index: var(--im-z-sticky); }
.nav-dropdown-panel a { display: flex; align-items: center; justify-content: flex-start; gap: var(--im-space-3); min-block-size: var(--im-control-height); padding: 0 var(--im-space-3); border-radius: var(--im-radius-sm); color: var(--im-text); text-decoration: none; font-size: var(--im-text-sm); font-weight: 600; white-space: nowrap; }
.nav-dropdown-panel a:hover, .nav-dropdown-panel a.active { background: var(--im-blue-50); color: var(--im-blue-800); }
.nav-dropdown-panel a .icon { color: var(--im-blue-800); }
.site-menu-panel { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--im-surface); border-block-end: 1px solid var(--im-border); box-shadow: var(--im-shadow-md); padding: var(--im-space-3) clamp(1rem, 4vw, 2rem) var(--im-space-5); display: grid; gap: 2px; max-block-size: calc(100dvh - var(--im-header-height)); overflow: auto; overscroll-behavior: contain; }
.site-menu-panel a { display: flex; align-items: center; gap: var(--im-space-3); min-block-size: 3rem; padding: 0 var(--im-space-3); border-radius: var(--im-radius-sm); color: var(--im-text); text-decoration: none; font-weight: 600; }
.site-menu-panel a.active, .site-menu-panel a:hover { background: var(--im-blue-50); color: var(--im-blue-800); }
.site-menu-group { display: grid; gap: 2px; padding-block: var(--im-space-2); border-block-start: 1px solid var(--im-divider); }
.site-menu-group + a { border-block-start: 1px solid var(--im-divider); border-radius: 0; }
.site-menu-heading { padding: var(--im-space-1) var(--im-space-3) 0; font-size: var(--im-text-xs); font-weight: 700; color: var(--im-gold-700); }
.site-menu-group a { padding-inline-start: var(--im-space-5); }
.site-nav > a, .site-menu-panel a, .nav-dropdown > summary, .nav-dropdown-panel a, .site-menu-heading { font-family: var(--im-font-bold); }

/* ---------- Quick access (home page and its live preview in administration) ----------
   A card grid (never a horizontal scroller) so every destination is visible and tappable at a glance on phone, tablet and
   desktop alike. .quick-links-compact gives the phone layout at any width (the phone preview in administration). */
.quick-links { background: var(--im-surface); border-block-end: 1px solid var(--im-border); padding-block: var(--im-space-6); }
/* Tiles share the row and a last, shorter row is centred, so no tile is left alone at the start of a line. */
.quick-links-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--im-space-3); }
.quick-links-inner > a { flex: 1 1 5.5rem; max-inline-size: 8rem; }
.quick-links a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--im-space-2); text-align: center; padding: var(--im-space-4) var(--im-space-2); border-radius: var(--im-radius-lg); background: var(--im-bg); border: 1px solid var(--im-border); color: var(--im-text); text-decoration: none; font-size: var(--im-text-sm); font-weight: 600; line-height: 1.3; transition: transform var(--im-duration) var(--im-ease), box-shadow var(--im-duration), border-color var(--im-duration), background var(--im-duration); }
.quick-links a .icon { inline-size: 1.4rem; block-size: 1.4rem; padding: var(--im-space-2); box-sizing: content-box; border-radius: 50%; background: var(--im-blue-50); color: var(--im-blue-800); transition: background var(--im-duration), color var(--im-duration); }
.quick-links a:hover, .quick-links a:focus-visible { transform: translateY(-3px); box-shadow: var(--im-shadow-md); border-color: var(--im-border-strong); background: var(--im-surface); color: var(--im-blue-800); }
.quick-links a:hover .icon, .quick-links a:focus-visible .icon { background: var(--im-navy-950); color: var(--im-gold-500); }
.quick-links-compact { padding-block: var(--im-space-4); }
.quick-links-compact .quick-links-inner { gap: var(--im-space-2); }
.quick-links-compact .quick-links-inner > a { flex: 0 0 calc((100% - 2 * var(--im-space-2)) / 3); max-inline-size: none; }
.quick-links-compact a { padding: var(--im-space-3) var(--im-space-1); font-size: var(--im-text-xs); border-radius: var(--im-radius-md); }
@media screen and (max-width: 720px) {
  .quick-links { padding-block: var(--im-space-4); }
  .quick-links-inner { gap: var(--im-space-2); }
  .quick-links-inner > a { flex: 0 0 calc((100% - 2 * var(--im-space-2)) / 3); max-inline-size: none; }
  .quick-links a { padding: var(--im-space-3) var(--im-space-1); font-size: var(--im-text-xs); border-radius: var(--im-radius-md); }
}

/* ---------- Site footer (public shell and its live preview in administration) ----------
   One identity column (brand, contact details, channels) and up to four link columns: desktop one row,
   tablet two columns under the identity column, mobile a single column. Text on the dark surface keeps 4.5:1. */
.site-footer { background: var(--im-navy-950); color: var(--im-on-dark-muted); padding-block: var(--im-space-10) var(--im-space-6); font-size: var(--im-text-sm); }
.footer-inner { inline-size: 100%; max-inline-size: var(--im-content-width); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.site-footer a { color: var(--im-on-dark); text-decoration: none; border-radius: var(--im-radius-sm); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--im-gold-500); outline-offset: 2px; box-shadow: none; color: #fff; }
.footer-grid { display: grid; gap: var(--im-space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
.footer-grid.cols-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.footer-grid.cols-2 { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.footer-grid.cols-3 { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.footer-grid.cols-4 { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
.footer-grid h2 { color: #fff; font-size: var(--im-text-md); line-height: var(--im-leading-tight); margin: 0 0 var(--im-space-3); }
.footer-brand a { display: flex; align-items: center; gap: var(--im-space-3); color: inherit; }
.footer-brand a:hover { color: #fff; text-decoration: none; }
.footer-brand img { flex: none; inline-size: 3rem; block-size: 3rem; object-fit: contain; }
.footer-brand small { display: block; margin-block-start: var(--im-space-1); font-size: var(--im-text-xs); font-weight: 400; line-height: 1.6; color: var(--im-on-dark-muted); }
.footer-contact { font-style: normal; display: grid; gap: var(--im-space-2); margin-block: var(--im-space-4); }
.footer-contact > a { display: flex; align-items: flex-start; gap: var(--im-space-2); line-height: 1.8; overflow-wrap: anywhere; }
.footer-contact .icon { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .3rem; color: var(--im-gold-500); }
.footer-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--im-space-1); }
.footer-column a { display: inline-block; padding-block: var(--im-space-1); overflow-wrap: anywhere; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--im-space-2) var(--im-space-4); margin-block-start: var(--im-space-8); padding-block-start: var(--im-space-4); border-block-start: 1px solid var(--im-glass-2); color: #a8b3c4; font-size: var(--im-text-xs); }
/* Channels in the footer: icon-only round buttons (the accessible name carries the title). */
.site-footer .channel-links.is-compact { display: flex; flex-wrap: wrap; gap: var(--im-space-2); }
.site-footer .channel-links.is-compact .channel-link { padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.site-footer .channel-links.is-compact .channel-icon { background: var(--im-glass-1); color: #fff; }
.site-footer .channel-links.is-compact .channel-link:hover .channel-icon, .site-footer .channel-links.is-compact .channel-link:focus-visible .channel-icon { background: var(--im-gold-500); color: var(--im-navy-950); }
/* Touch screens: every footer link is a 44px row. */
@media (pointer: coarse) {
  .footer-column a, .footer-contact > a { display: flex; align-items: center; min-block-size: var(--im-control-height); padding-block: 0; }
}
@media screen and (max-width: 1000px) {
  .footer-grid[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-identity { grid-column: 1 / -1; }
}
/* Phones: the link columns stand two by two under the identity column, so the footer stays short. */
@media screen and (max-width: 480px) {
  .footer-grid[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--im-space-6) var(--im-space-4); }
  .footer-bottom { flex-direction: column; }
}
.site-footer.is-preview { border-radius: var(--im-radius-md); padding-block: var(--im-space-6) var(--im-space-4); }
.site-footer.is-stacked .footer-grid[class] { grid-template-columns: minmax(0, 1fr); gap: var(--im-space-5); }
.site-footer.is-stacked .footer-inner { padding-inline: var(--im-space-4); }
.site-footer.is-stacked .footer-bottom { margin-block-start: var(--im-space-5); }
.channel-text { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; }

/* ---------- Video player (VideoPlayer.razor + video-player.js) ----------
   A 16:9 frame with an LTR timeline inside RTL pages. Without JavaScript the browser's own controls are used; with it
   the controls below take over. Every state is a token of data-vp-state on the frame (playing, paused, ended, started,
   idle, waiting, dragging, touch, muted, noaudio, fullscreen). The frame is a size container, so the controls adapt to
   the width of the player (article column, text + video block, admin preview) and not to the width of the page. */
.video-frame { position: relative; inline-size: 100%; aspect-ratio: 16 / 9; background: var(--im-navy-950); border-radius: var(--im-radius-lg); overflow: hidden; container-type: inline-size; outline: none; }
.video-frame:fullscreen { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-frame:-webkit-full-screen { inline-size: 100%; block-size: 100%; aspect-ratio: auto; border-radius: 0; background: #000; }
.video-element { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; display: block; background: #000; object-fit: contain; }
.video-state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--im-space-2); padding: var(--im-space-5); text-align: center; color: var(--im-on-dark); }
.video-state[hidden], .video-element[hidden] { display: none; }
.video-state b { color: #fff; font-size: var(--im-text-md); }
.video-state p { margin: 0; font-size: var(--im-text-sm); max-inline-size: 34ch; }
.video-state-icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--im-glass-2); color: var(--im-gold-500); }
.video-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--im-space-2); margin-block-start: var(--im-space-2); }
.video-state-btn { display: inline-flex; align-items: center; gap: var(--im-space-2); min-block-size: 2.5rem; padding: 0 var(--im-space-4); border: 1px solid var(--im-glass-4); border-radius: var(--im-radius-pill); background: transparent; color: #fff; font: inherit; font-size: var(--im-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; }
.video-state-btn:hover { background: var(--im-glass-2); color: #fff; }
.video-state-btn.is-primary { background: var(--im-gold-500); border-color: var(--im-gold-500); color: var(--im-navy-950); }
.video-state-btn.is-primary:hover { background: var(--im-gold-300); color: var(--im-navy-950); }
.video-state-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.vp { position: absolute; inset: 0; isolation: isolate; color: #fff; font-size: var(--im-text-sm); line-height: 1.4; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* Layers inside the controls: poster (0), bottom shade (1), then the buttons and the bar (2). */
.video-frame .vp > .vp-poster { position: absolute; inset: 0; z-index: 0; inline-size: 100%; block-size: 100%; max-block-size: none; aspect-ratio: auto; border-radius: 0; object-fit: cover; pointer-events: none; }
.video-frame[data-vp-state~="started"] .vp-poster { display: none; }
.vp-center, .vp-spinner, .vp-flash, .vp-bar { z-index: 2; }
.vp::before { content: ""; position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; block-size: min(60%, 9rem); background: linear-gradient(0deg, rgba(4, 8, 20, .88), rgba(4, 8, 20, .5) 45%, transparent); pointer-events: none; transition: opacity var(--im-duration) var(--im-ease); }
.vp button { -webkit-tap-highlight-color: transparent; }
.vp .vp-ic { display: none; }
.vp .vp-ic-play { fill: currentColor; }
.vp .vp-ic-pause { stroke-width: 3.2; }
.video-frame[data-vp-state~="paused"]:not([data-vp-state~="ended"]) .vp-ic-play,
.video-frame[data-vp-state~="playing"] .vp-ic-pause,
.video-frame[data-vp-state~="ended"] .vp-ic-replay,
.video-frame:not([data-vp-state~="muted"]) .vp-ic-volume,
.video-frame[data-vp-state~="muted"] .vp-ic-muted,
.video-frame:not([data-vp-state~="fullscreen"]) .vp-ic-fs,
.video-frame[data-vp-state~="fullscreen"] .vp-ic-fs-exit { display: block; }

/* Centre: the large play button; on touch screens also pause and the two 10-second skips (as in mobile players). */
.vp-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 9cqi, 3.5rem); padding-block-end: 1.5rem; pointer-events: none; }
.vp-center > * { pointer-events: auto; transition: opacity var(--im-duration) var(--im-ease), transform var(--im-duration) var(--im-ease), background var(--im-duration), color var(--im-duration); }
.vp-big, .vp-skip { display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(13, 24, 50, .68); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--im-shadow-on-image); }
.vp-big { inline-size: clamp(3.25rem, 13cqi, 4.75rem); block-size: clamp(3.25rem, 13cqi, 4.75rem); }
.vp-big .icon { inline-size: 46%; block-size: 46%; }
.vp-big .vp-ic-play { transform: translateX(6%); }
.vp-big:hover { background: var(--im-gold-500); color: var(--im-navy-950); transform: scale(1.06); }
.vp-skip { position: relative; display: none; inline-size: clamp(2.5rem, 9cqi, 3.25rem); block-size: clamp(2.5rem, 9cqi, 3.25rem); }
.vp-skip .icon { inline-size: 62%; block-size: 62%; }
.vp-skip > span, .vp-skip-sm > span { position: absolute; inset: 0; display: grid; place-items: center; padding-block-start: .12em; font-size: var(--im-text-2xs); font-weight: 700; line-height: 1; pointer-events: none; }
.video-frame[data-vp-state~="touch"][data-vp-state~="started"] .vp-skip { display: grid; }
.video-frame[data-vp-state~="playing"]:not([data-vp-state~="touch"]) .vp-big { opacity: 0; transform: scale(.9); pointer-events: none; }
.video-frame[data-vp-state~="waiting"] .vp-big { opacity: 0; pointer-events: none; }
.video-frame[data-vp-state~="idle"] .vp-center > * { opacity: 0; pointer-events: none; }
.vp-spinner { position: absolute; inset: 0; margin: auto; display: none; inline-size: 3rem; block-size: 3rem; border: 3px solid var(--im-glass-3); border-block-start-color: var(--im-gold-500); border-radius: 50%; animation: vp-spin .8s linear infinite; pointer-events: none; }
.video-frame[data-vp-state~="waiting"] .vp-spinner { display: block; }
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-flash { position: absolute; inset-block-start: 42%; inset-inline: 0; margin-inline: auto; inline-size: max-content; max-inline-size: 80%; padding: .35rem .85rem; border-radius: var(--im-radius-pill); background: rgba(13, 24, 50, .82); font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--im-duration); }
.vp-flash[data-side="back"] { inset-inline: 7% auto; }
.vp-flash[data-side="forward"] { inset-inline: auto 7%; }
.vp-flash[data-side="center"] { inset-block-start: 12%; }
.vp-flash.is-on { opacity: 1; }

/* Bottom bar: seek bar, then the row of controls. */
.vp-bar { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; gap: 2px; padding: 0 var(--im-space-3) var(--im-space-2); cursor: default; transition: opacity var(--im-duration) var(--im-ease); }
.video-frame[data-vp-state~="idle"] .vp-bar, .video-frame[data-vp-state~="idle"] .vp::before { opacity: 0; pointer-events: none; }
.video-frame[data-vp-state~="idle"] .vp { cursor: none; }
/* The seek bar looks thin but its target is 24px high (WCAG 2.5.8). */
.vp-progress { position: relative; display: grid; align-items: center; block-size: 1.5rem; cursor: pointer; touch-action: none; outline: none; }
.vp-track { position: relative; display: block; block-size: .25rem; border-radius: var(--im-radius-pill); background: rgba(255, 255, 255, .28); overflow: hidden; transition: block-size var(--im-duration); }
.vp-buffered, .vp-played { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; }
.vp-buffered { background: rgba(255, 255, 255, .42); }
.vp-played { background: var(--im-gold-500); }
.vp-thumb { position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: .9rem; block-size: .9rem; margin-block-start: -.45rem; margin-inline-start: -.45rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(215, 177, 111, .5), 0 1px 4px rgba(0, 0, 0, .5); transform: scale(0); transition: transform var(--im-duration); pointer-events: none; }
.vp-progress:hover .vp-track, .vp-progress:focus-visible .vp-track, .video-frame[data-vp-state~="dragging"] .vp-track { block-size: .4rem; }
.vp-progress:hover .vp-thumb, .vp-progress:focus-visible .vp-thumb, .video-frame[data-vp-state~="dragging"] .vp-thumb, .video-frame[data-vp-state~="touch"] .vp-thumb { transform: scale(1); }
.vp-progress:focus-visible .vp-thumb { box-shadow: 0 0 0 3px var(--im-gold-500), 0 0 0 5px #fff; }
.vp-tip { position: absolute; inset-block-end: 100%; inset-inline-start: 0; transform: translateX(-50%); margin-block-end: .3rem; padding: .15rem .5rem; border-radius: var(--im-radius-sm); background: rgba(13, 24, 50, .94); font-size: var(--im-text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.vp-row { display: flex; align-items: center; gap: 2px; min-block-size: 2.5rem; }
.vp-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-inline-size: 2.5rem; block-size: 2.5rem; padding: 0 .45rem; border: 0; border-radius: var(--im-radius-sm); background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; transition: background var(--im-duration); }
.vp-btn:hover { background: var(--im-glass-2); }
.vp-btn .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.vp-btn:focus-visible, .vp-big:focus-visible, .vp-skip:focus-visible, .vp-volume-range:focus-visible { outline: 2px solid var(--im-gold-500); outline-offset: 1px; box-shadow: none; }
.vp-volume { display: inline-flex; align-items: center; }
.video-frame[data-vp-state~="noaudio"] .vp-volume { display: none; }
.vp-volume-range { inline-size: 0; block-size: 1.25rem; margin: 0; padding: 0; opacity: 0; accent-color: var(--im-gold-500); cursor: pointer; transition: inline-size var(--im-duration) var(--im-ease), opacity var(--im-duration); }
.vp-volume:hover .vp-volume-range, .vp-volume:focus-within .vp-volume-range { inline-size: 4.5rem; margin-inline-end: var(--im-space-2); opacity: 1; }
.vp-time { padding-inline: var(--im-space-2); color: #eef1f6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vp-spacer { flex: 1; }
.vp-menu-wrap { position: relative; display: inline-flex; }
/* The menu is an RTL island in the LTR frame, so its own inline start is the right edge of the speed button. */
.vp-menu { position: absolute; inset-block-end: calc(100% + .4rem); inset-inline-start: 0; z-index: 1; display: grid; gap: 2px; min-inline-size: 7.5rem; max-block-size: calc(56.25cqi - 4.5rem); overflow: auto; padding: .3rem; border: 1px solid var(--im-glass-2); border-radius: var(--im-radius-md); background: rgba(13, 24, 50, .97); box-shadow: var(--im-shadow-lg); }
.vp-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--im-space-3); padding: .4rem .7rem; border: 0; border-radius: var(--im-radius-sm); background: transparent; color: #fff; font: inherit; text-align: start; white-space: nowrap; cursor: pointer; }
.vp-menu button:hover, .vp-menu button:focus-visible { background: var(--im-glass-2); outline: none; }
.vp-menu button[aria-checked="true"] { color: var(--im-gold-500); font-weight: 700; }
.vp-menu button[aria-checked="true"]::after { content: "✓"; }
@media (pointer: coarse) { .vp-volume-range { display: none; } }
@container (max-width: 30rem) {
  .vp-bar { padding: 0 var(--im-space-2) var(--im-space-1); }
  .vp-row { min-block-size: 2.25rem; }
  .vp-btn { min-inline-size: 2.25rem; block-size: 2.25rem; padding: 0 .3rem; }
  .vp-skip-sm, .vp-volume-range, .vp-speed .icon, .vp-btn[data-vp-action="pip"] { display: none; }
  .vp-time { padding-inline: var(--im-space-1); font-size: var(--im-text-xs); }
  .vp-menu { grid-template-columns: repeat(3, auto); max-block-size: none; }
  .vp-menu button { padding: .35rem .55rem; }
}
/* Touch screens: the buttons of the bar are 44px whatever the width of the player. */
@media (pointer: coarse) { .vp-btn { min-inline-size: 2.75rem; block-size: 2.75rem; } .vp-row { min-block-size: 2.75rem; } }

/* ---------- Bold face ----------
   Text set in a weight of 600 or more uses the bold face of the brand (--im-font-bold), so the browser never thickens
   the regular face. Same selectors as above and later in the file, so the bold face wins over their "font: inherit". */
.btn, .field > label, .field-label, .field-error, .validation-message, legend, .eyebrow, .chip, .toolbar .filter label, .data-table th,
.data-table .cell-title, .stack .data-table td::before, .tabs a, .tabs button, .tree-row .tree-name, .stat-value, .progress-value,
.summary-link, .quick-links a, .video-state-btn, .vp-skip > span, .vp-skip-sm > span, .vp-flash, .vp-btn, .vp-menu button[aria-checked="true"] { font-family: var(--im-font-bold); }
.cell-sub { font-family: var(--im-font); }

/* ---------- Utilities ----------
   Spacing on the 4px scale and small alignment helpers for markup that used to carry inline styles. They are
   !important on purpose: like the inline styles they replace, they win over component rules. */
.mt-2 { margin-block-start: var(--im-space-2) !important; } .mt-3 { margin-block-start: var(--im-space-3) !important; }
.mt-4 { margin-block-start: var(--im-space-4) !important; } .mt-6 { margin-block-start: var(--im-space-6) !important; }
.mb-2 { margin-block-end: var(--im-space-2) !important; } .mb-3 { margin-block-end: var(--im-space-3) !important; }
.mb-4 { margin-block-end: var(--im-space-4) !important; } .mb-5 { margin-block-end: var(--im-space-5) !important; }
.mb-6 { margin-block-end: var(--im-space-6) !important; } .mb-8 { margin-block-end: var(--im-space-8) !important; }
.flush { margin: 0 !important; }
.pad-3 { padding: var(--im-space-3) !important; } .pad-inline-2 { padding-inline: var(--im-space-2) !important; }
.cluster-tight { gap: var(--im-space-1) !important; } .cluster-between { justify-content: space-between !important; }
.items-start { align-items: flex-start !important; } .self-end { align-self: end !important; }
.flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; }
.measure-wide { max-inline-size: 60rem !important; }
.sub-block { display: block !important; font-weight: 400 !important; }
/* Layout, size and thumbnail helpers (same purpose and precedence as the inline styles they replace). */
.flex { display: flex !important; } .inline-block { display: inline-block !important; } .text-center { text-align: center !important; }
.items-end { align-items: flex-end !important; } .cluster-center { justify-content: center !important; } .grow-14 { flex: 1 1 14rem !important; }
.gap-3 { gap: var(--im-space-3) !important; } .gap-4 { gap: var(--im-space-4) !important; }
.pad-4 { padding: var(--im-space-4) !important; } .pad-block-2 { padding-block: var(--im-space-2) !important; } .pad-block-16 { padding-block: 4rem !important; }
.my-1 { margin-block: var(--im-space-1) !important; } .bare { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.w-8 { inline-size: 8rem !important; } .w-9 { inline-size: 9rem !important; } .w-10 { inline-size: 10rem !important; }
.min-w-10 { min-inline-size: 10rem !important; } .min-w-12 { min-inline-size: 12rem !important; } .min-w-14 { min-inline-size: 14rem !important; }
.max-w-7 { max-inline-size: 7rem !important; } .max-w-18 { max-inline-size: 18rem !important; } .max-w-20 { max-inline-size: 20rem !important; }
.max-w-24 { max-inline-size: 24rem !important; } .max-w-56 { max-inline-size: 56rem !important; }
.square-10 { inline-size: 2.5rem !important; block-size: 2.5rem !important; }
.no-shadow { box-shadow: none !important; } .clip { overflow: hidden !important; } .round { border-radius: 50% !important; } .fit-cover { object-fit: cover !important; }
.block-label-xs { display: block !important; font-weight: 600 !important; font-size: var(--im-text-xs) !important; }
.block-note-xs { display: block !important; font-weight: 400 !important; color: var(--im-text-secondary) !important; font-size: var(--im-text-xs) !important; }
.thumb { border-radius: var(--im-radius-sm) !important; } .thumb-16 { inline-size: 4rem !important; } .thumb-18 { inline-size: 4.5rem !important; } .thumb-20 { inline-size: 5rem !important; }
.thumb-photo { aspect-ratio: 4 / 3 !important; object-fit: cover !important; background: var(--im-surface-muted); }
.media-fill { inline-size: 100% !important; object-fit: cover !important; border-radius: var(--im-radius-md) !important; }
.ratio-4-3 { aspect-ratio: 4 / 3 !important; } .ratio-16-9 { aspect-ratio: 16 / 9 !important; }