/* The platform's page frame and patterns (design Section 2.2), from the brand kit's tokens
   (08-Brand-Tokens/alexvision-tokens.css, kit v3.1; Master Data MD-B03): colours, type and the
   8 px spacing unit. Sand Gold is never text. Layout uses logical properties, so Arabic mirrors
   right to left (DEC-049). No inline styles anywhere: the content security policy forbids them.
   The 1.0 review (UI-UX-Review.md) set the working screens' compact scale, colour roles and motion. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/montserrat-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/cairo-400.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/cairo-600.woff2") format("woff2"); }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/cairo-700.woff2") format("woff2"); }

:root {
    /* The kit's colours */
    --av-navy: #163A5F;
    --av-teal: #1E8A8A;
    --av-light-teal: #57C6C2;
    --av-gold: #C8A868;
    --av-charcoal: #2D3136;
    --av-slate: #5B6470;
    --av-cool-gray: #D9DEE4;
    --av-mist: #F3F5F7;
    --av-white: #FFFFFF;
    --av-teal-tint: #E4F1F1;
    --av-navy-tint: #225371;

    /* Roles: navy frames and acts, teal marks the active and draws, gold only rules; status tints */
    --av-navy-deep: #10304F;
    --av-navy-soft: #E8EEF4;
    --av-teal-dark: #176F6F;
    --av-line: #E3E7EC;
    --av-danger: #A4262C;
    --av-danger-dark: #7F1D22;
    --av-danger-tint: #FBECEC;
    --av-warning: #7A5600;
    --av-warning-tint: #FFF4D9;
    --av-success: #1B6E3A;
    --av-success-tint: #E6F4EA;
    --av-info-tint: var(--av-teal-tint);

    /* A field's border: Slate, 6.0:1 on white and 5.5:1 on Mist (WCAG 1.4.11 asks 3:1 of a field's only edge) */
    --av-field-border: var(--av-slate);

    --av-font: "Montserrat", Arial, Helvetica, sans-serif;
    --av-font-arabic: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --av-radius: 8px;
    --av-radius-small: 6px;
    --av-radius-pill: 999px;
    --av-space: 8px;

    /* The working screens' compact scale, from the kit's sizes (small 14 px, label 12 px) */
    --av-text: 0.875rem;
    --av-text-small: 0.8125rem;
    --av-text-label: 0.75rem;
    --av-title: 1.375rem;
    --av-section: 1.0625rem;
    --av-subsection: 0.9375rem;

    --av-menu-width: 16rem;
    --av-rail-width: 4.25rem;
    --av-topbar-height: 3.5rem;
    --av-footer-height: 2.75rem;

    --av-shadow-1: 0 1px 2px rgb(22 58 95 / 6%), 0 1px 3px rgb(22 58 95 / 8%);
    --av-shadow-2: 0 4px 12px rgb(22 58 95 / 10%), 0 2px 4px rgb(22 58 95 / 6%);
    --av-shadow-3: 0 16px 40px rgb(22 58 95 / 18%), 0 4px 12px rgb(22 58 95 / 8%);

    --av-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --av-fast: 150ms;
    --av-medium: 220ms;

    interpolate-size: allow-keywords;
    color-scheme: light;
    font-family: var(--av-font);
    line-height: 1.55;
    color: var(--av-charcoal);
    background: var(--av-mist);
}

[dir="rtl"] {
    font-family: var(--av-font-arabic);
    --av-text: 0.9375rem;
    --av-text-small: 0.875rem;
    --av-text-label: 0.8125rem;
}

/* Arabic text inside an English page (the language switch, Arabic fields) in the Arabic type (R2-61). */
:lang(ar) { font-family: var(--av-font-arabic); }

*, *::before, *::after { box-sizing: border-box; }

/* What a page hides stays hidden, whatever layout its class gives it (a queue's tasks past "Show all"). */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: var(--av-text);
}

h1, h2, h3, h4 {
    color: var(--av-navy);
    line-height: 1.3;
    margin-block: 0 calc(var(--av-space) * 1.5);
}

h1 { font-size: var(--av-title); font-weight: 700; }
h2 { font-size: var(--av-section); font-weight: 700; }
h3 { font-size: var(--av-subsection); font-weight: 600; }
h4 { font-size: var(--av-text); font-weight: 600; }

p { margin-block: 0 calc(var(--av-space) * 1.5); }

a { color: var(--av-navy); text-underline-offset: 2px; text-decoration-color: rgb(22 58 95 / 40%); }
a:hover { color: var(--av-teal-dark); text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--av-teal);
    outline-offset: 2px;
}

/* Focus moved to a heading or the main region after a navigation (screen readers) draws no box. */
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; }

img, svg { max-inline-size: 100%; }

code, .av-id {
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.92em;
    direction: ltr;
    unicode-bidi: isolate;
}

.av-ltr { direction: ltr; unicode-bidi: isolate; }

.av-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.av-skip {
    position: absolute;
    inset-inline-start: -10000px;
    inset-block-start: auto;
}

.av-skip:focus {
    position: fixed;
    inset-inline-start: var(--av-space);
    inset-block-start: var(--av-space);
    z-index: 100;
    padding: var(--av-space) calc(var(--av-space) * 2);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    box-shadow: var(--av-shadow-2);
}

.av-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.av-icon-large { width: 1.5rem; height: 1.5rem; }
.av-icon-huge { width: 3rem; height: 3rem; stroke-width: 1.25; }

[dir="rtl"] .av-icon.av-flip { transform: scaleX(-1); }

/* ---- The shell: side menu, top bar, page, footers ---- */

.av-shell {
    display: grid;
    grid-template-columns: var(--av-menu-width) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns var(--av-medium) var(--av-ease);
}

.av-sidebar {
    position: sticky;
    inset-block-start: 0;
    block-size: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--av-navy);
    color: var(--av-white);
    z-index: 30;
}

.av-sidebar a { color: var(--av-white); }
.av-sidebar :focus-visible { outline-color: var(--av-light-teal); outline-offset: -2px; }

.av-sidebar-brand {
    display: flex;
    align-items: center;
    block-size: var(--av-topbar-height);
    padding-inline: calc(var(--av-space) * 2.25);
    border-block-end: 1px solid rgb(255 255 255 / 8%);
    flex: none;
}

.av-sidebar-brand a { display: flex; align-items: center; }
.av-logo-full { display: block; inline-size: 9.5rem; block-size: auto; }
.av-logo-mark { display: none; inline-size: 2rem; block-size: auto; }

/* Positioned, so the hidden labels of its links stay inside its scrolling area and never stretch
   the window below the frame (round 2, R2-43). */
.av-menu {
    position: relative;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--av-space);
    scrollbar-width: thin;
    scrollbar-color: var(--av-navy-tint) transparent;
}

.av-menu ul { list-style: none; margin: 0; padding: 0; }

.av-menu-zone { margin-inline: var(--av-space); }

.av-menu-zone > details > summary,
.av-menu-zone > a {
    display: flex;
    align-items: center;
    gap: calc(var(--av-space) * 1.25);
    min-block-size: 2.375rem;
    padding: calc(var(--av-space) * 0.5) var(--av-space);
    border-radius: var(--av-radius-small);
    font-weight: 600;
    font-size: var(--av-text);
    cursor: pointer;
    list-style: none;
    text-decoration: none;
    color: var(--av-white);
    transition: background-color var(--av-fast) var(--av-ease);
}

.av-menu-zone > details > summary::-webkit-details-marker { display: none; }

.av-menu-zone .av-icon { color: var(--av-light-teal); }
.av-menu-label { flex: 1; min-inline-size: 0; }

.av-menu-chevron {
    display: inline-flex;
    color: var(--av-cool-gray);
    transition: transform var(--av-fast) var(--av-ease);
}

.av-menu-zone > details[open] > summary .av-menu-chevron { transform: rotate(90deg); }
[dir="rtl"] .av-menu-zone > details > summary .av-menu-chevron { transform: scaleX(-1); }
[dir="rtl"] .av-menu-zone > details[open] > summary .av-menu-chevron { transform: rotate(90deg); }

.av-menu-zone > details > summary:hover,
.av-menu-zone > a:hover { background: var(--av-navy-tint); }

.av-menu-zone > details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--av-medium) var(--av-ease), content-visibility var(--av-medium) allow-discrete;
}

.av-menu-zone > details[open]::details-content { block-size: auto; }

.av-menu-pages { padding-block: 2px calc(var(--av-space) * 0.75); }

.av-menu-page a {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    min-block-size: 2rem;
    padding: calc(var(--av-space) * 0.4) var(--av-space);
    padding-inline-start: calc(var(--av-space) * 4.25);
    border-radius: var(--av-radius-small);
    font-size: var(--av-text-small);
    text-decoration: none;
    color: var(--av-cool-gray);
    transition: background-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease);
}

.av-menu-page a:hover { background: var(--av-navy-tint); color: var(--av-white); }

.av-menu-page a[aria-current="page"],
.av-menu-zone > a[aria-current="page"] {
    background: var(--av-navy-tint);
    color: var(--av-white);
    box-shadow: inset 3px 0 0 var(--av-light-teal);
}

[dir="rtl"] .av-menu-page a[aria-current="page"],
[dir="rtl"] .av-menu-zone > a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--av-light-teal); }

.av-menu-group {
    padding: calc(var(--av-space) * 0.75) var(--av-space) calc(var(--av-space) * 0.25);
    padding-inline-start: calc(var(--av-space) * 4.25);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-light-teal);
}

[dir="rtl"] .av-menu-group { letter-spacing: 0; text-transform: none; font-size: var(--av-text-label); }

.av-menu-page.av-menu-planned a { color: #AEB8C4; }
.av-menu-page.av-menu-planned a:hover,
.av-menu-page.av-menu-planned a[aria-current="page"] { color: var(--av-white); }

.av-menu-zone > .av-menu-rail-link { display: none; }

.av-sidebar-footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--av-space);
    block-size: var(--av-footer-height);
    padding: 0 calc(var(--av-space) * 1.5);
    border-block-start: 1px solid rgb(255 255 255 / 8%);
    background: var(--av-navy-deep);
    font-size: var(--av-text-label);
    color: var(--av-cool-gray);
}

.av-sidebar-version { margin: 0; margin-inline-start: auto; white-space: nowrap; }

.av-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 0.5) var(--av-space);
    border: 0;
    border-radius: var(--av-radius-small);
    background: none;
    color: var(--av-cool-gray);
    font: inherit;
    cursor: pointer;
}

.av-rail-toggle:hover { background: var(--av-navy-tint); color: var(--av-white); }
[dir="rtl"] .av-rail-toggle .av-icon { transform: scaleX(-1); }

/* The menu folded to its icons (remembered in the browser) */

body.av-rail .av-shell { grid-template-columns: var(--av-rail-width) minmax(0, 1fr); }
body.av-rail .av-logo-full,
body.av-rail .av-menu-zone > details,
body.av-rail .av-menu-zone > a .av-menu-label,
body.av-rail .av-sidebar-version,
body.av-rail .av-rail-toggle span { display: none; }
body.av-rail .av-logo-mark { display: block; }
body.av-rail .av-sidebar-brand { justify-content: center; padding-inline: 0; }
body.av-rail .av-menu-zone > .av-menu-rail-link {
    display: flex;
    justify-content: center;
    align-items: center;
    min-block-size: 2.5rem;
    border-radius: var(--av-radius-small);
}
body.av-rail .av-menu-rail-link:hover,
body.av-rail .av-menu-rail-link[aria-current="page"] { background: var(--av-navy-tint); }
body.av-rail .av-menu-rail-link .av-icon { color: var(--av-light-teal); width: 1.375rem; height: 1.375rem; }
body.av-rail .av-menu-zone > a { justify-content: center; }
body.av-rail .av-sidebar-footer { justify-content: center; padding-inline: 0; }
body.av-rail .av-rail-toggle .av-icon { transform: scaleX(-1); }
[dir="rtl"] body.av-rail .av-rail-toggle .av-icon { transform: none; }

.av-scrim { display: none; }

.av-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.av-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--av-space);
    block-size: var(--av-topbar-height);
    padding-inline: calc(var(--av-space) * 2.5);
    border-block-end: 1px solid var(--av-line);
    background: rgb(255 255 255 / 92%);
    backdrop-filter: saturate(1.4) blur(8px);
}

.av-topbar-brand { display: none; }
.av-topbar-brand img { display: block; inline-size: 2rem; block-size: auto; }

.av-search {
    position: relative;
    flex: 1 1 18rem;
    max-inline-size: 30rem;
}

.av-search form { display: flex; align-items: center; }

.av-search > form > .av-icon {
    position: absolute;
    inset-inline-start: calc(var(--av-space) * 1.25);
    color: var(--av-slate);
    pointer-events: none;
}

.av-search input[type="search"] {
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding-inline-start: calc(var(--av-space) * 4.5);
    border-color: var(--av-line);
    border-radius: var(--av-radius-pill);
    background: var(--av-mist);
}

.av-search input[type="search"]:focus { background: var(--av-white); border-color: var(--av-teal); }

.av-suggest {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 6px);
    max-block-size: 70vh;
    overflow-y: auto;
    padding: calc(var(--av-space) * 0.75);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-3);
    animation: av-pop-in var(--av-fast) var(--av-ease);
    z-index: 25;
}

.av-suggest h2 {
    margin: calc(var(--av-space) * 0.5) var(--av-space) calc(var(--av-space) * 0.25);
    font-size: var(--av-text-label);
    font-weight: 600;
    color: var(--av-slate);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[dir="rtl"] .av-suggest h2 { text-transform: none; letter-spacing: 0; }

.av-suggest ul { list-style: none; margin: 0 0 var(--av-space); padding: 0; }

.av-suggest a {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 0.75) var(--av-space);
    border-radius: var(--av-radius-small);
    text-decoration: none;
}

.av-suggest a:hover, .av-suggest a:focus-visible { background: var(--av-mist); }
.av-suggest .av-meta { margin-inline-start: auto; }
.av-suggest-all { display: block; padding: var(--av-space); border-block-start: 1px solid var(--av-line); font-weight: 600; }

.av-topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
}

.av-topbar-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--av-space) * 0.75);
    min-block-size: 2.25rem;
    min-inline-size: 2.25rem;
    padding: calc(var(--av-space) * 0.5) calc(var(--av-space) * 0.875);
    border: 1px solid transparent;
    border-radius: var(--av-radius-small);
    background: none;
    color: var(--av-navy);
    font: inherit;
    font-size: var(--av-text-small);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: background-color var(--av-fast) var(--av-ease);
}

.av-topbar-button::-webkit-details-marker { display: none; }
.av-topbar-button:hover { background: var(--av-mist); color: var(--av-navy); }
.av-topbar-button[aria-expanded="true"],
details[open] > .av-topbar-button { background: var(--av-navy-soft); }

.av-topbar-divider {
    inline-size: 1px;
    block-size: 1.5rem;
    margin-inline: calc(var(--av-space) * 0.75);
    background: var(--av-line);
}

.av-menu-toggle { display: none; }

/* The bell's unread badge (its own class since round 3: the G7 count pills restyled it and the pills took its
   absolute place, stacking in the corner of a side list). */
.av-bell-count {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 0;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0 0.3rem;
    border: 2px solid var(--av-white);
    border-radius: var(--av-radius-pill);
    background: var(--av-danger);
    color: var(--av-white);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 0.875rem;
    text-align: center;
    animation: av-pulse 2s var(--av-ease) 1;
}

.av-avatar {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--av-navy);
    color: var(--av-white);
    font-size: var(--av-text-label);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px var(--av-white), 0 0 0 3px var(--av-light-teal);
    flex: none;
}

.av-avatar-large { inline-size: 3rem; block-size: 3rem; font-size: 1rem; }
.av-avatar-small { inline-size: 1.5rem; block-size: 1.5rem; font-size: 0.625rem; box-shadow: none; }

/* My profile (round 2, R2-48): the person, his work details, preferences and account, two a row. */
.av-profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: calc(var(--av-space) * 2); margin-block-end: calc(var(--av-space) * 3); }
.av-profile-head { display: flex; align-items: center; gap: calc(var(--av-space) * 2); margin-block-end: calc(var(--av-space) * 1.5); }
.av-profile-head h2 { margin: 0; font-size: var(--av-section); color: var(--av-navy); }
.av-profile-head p { margin: 2px 0 0; }
.av-profile-head > div { min-inline-size: 0; overflow-wrap: anywhere; }
.av-link-list { margin: var(--av-space) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.av-link-list a { display: inline-flex; align-items: center; gap: 6px; min-block-size: 1.5rem; }

/* The designation under the user's name in his menu (round 2, R2-49). */
.av-user-designation { display: block; color: var(--av-teal-dark); font-size: var(--av-text-small); font-weight: 600; }

/* A photo from Microsoft 365 in the avatar's place (round 2, R2-69). */
.av-avatar-photo { object-fit: cover; background: var(--av-mist); padding: 0; }
.av-avatar-xl { inline-size: 5rem; block-size: 5rem; font-size: 1.5rem; }

/* A person wherever he is named: his avatar before his name (round 2, R2-30). */
.av-person { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; max-inline-size: 100%; }
.av-person-name { min-inline-size: 0; overflow-wrap: anywhere; }
.av-person-link { text-decoration: none; }
.av-person-link:hover .av-person-name { text-decoration: underline; }

/* A view's recipients as chips, and the people found to add (round 2, R2-34). */
.av-recipients { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; }
.av-recipients li { display: inline-flex; align-items: center; gap: 2px; padding-block: 2px; padding-inline: 4px 2px; border: 1px solid var(--av-line); border-radius: var(--av-radius-pill); background: var(--av-white); }
.av-recipients .av-button-icon { min-block-size: 1.75rem; min-inline-size: 1.75rem; }
.av-suggestions { margin: 4px 0 0; padding: 4px; list-style: none; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); }
.av-suggestions button { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; inline-size: 100%; padding: 6px 8px; border: 0; border-radius: var(--av-radius-small); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.av-suggestions button:hover, .av-suggestions button:focus-visible { background: var(--av-mist); }

.av-user-button { padding-inline: 4px calc(var(--av-space) * 0.75); }
.av-user-button .av-user-short { max-inline-size: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Floating panels (top bar menus, column choosers, export) ---- */

.av-pop { position: relative; }
.av-pop > summary { list-style: none; }
.av-pop > summary::-webkit-details-marker { display: none; }

.av-pop-panel,
.av-popover-panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 6px);
    min-inline-size: 15rem;
    max-inline-size: min(24rem, calc(100vw - 2rem));
    padding: calc(var(--av-space) * 0.75);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-3);
    z-index: 25;
    transform-origin: top right;
    animation: av-pop-in var(--av-fast) var(--av-ease);
}

[dir="rtl"] .av-pop-panel { transform-origin: top left; }
.av-pop-start > .av-pop-panel { inset-inline-end: auto; inset-inline-start: 0; transform-origin: top left; }

.av-pop-panel h2 {
    font-size: var(--av-text);
    margin: calc(var(--av-space) * 0.5) var(--av-space) var(--av-space);
}

.av-pop-panel ul, .av-popover-panel ul { list-style: none; margin: 0; padding: 0; }

.av-pop-item,
.av-pop-panel li > a,
.av-pop-panel li > button,
.av-pop-panel li > form > button,
.av-popover-panel a,
.av-popover-panel button {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    inline-size: 100%;
    padding: calc(var(--av-space) * 0.75) var(--av-space);
    border: 0;
    border-radius: var(--av-radius-small);
    background: none;
    color: var(--av-navy);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.av-pop-item:hover,
.av-pop-panel li > a:hover,
.av-pop-panel li > button:hover,
.av-pop-panel li > form > button:hover { background: var(--av-mist); color: var(--av-navy); }

.av-pop-item .av-icon,
.av-pop-panel li > a .av-icon,
.av-pop-panel li > button .av-icon,
.av-pop-panel li > form > button .av-icon { color: var(--av-teal-dark); }

.av-pop-wide { min-inline-size: min(23rem, calc(100vw - 2rem)); }
.av-user-panel { min-inline-size: min(19rem, calc(100vw - 2rem)); }
.av-suggest a > .av-icon { color: var(--av-teal-dark); }
.av-pop-narrow { display: none; }
.av-search-link { display: none !important; }
.av-pop-label { margin: calc(var(--av-space) * 0.5) var(--av-space) 4px; font-size: var(--av-text-label); font-weight: 600; }
.av-pop-head { border-block-start: 0; border-block-end: 1px solid var(--av-line); margin: 0 0 4px; padding: 2px var(--av-space) var(--av-space); }
.av-pop-head h2 { margin: 0; }
.av-pop-panel .av-empty { margin: var(--av-space); }
.av-pop-panel > form { margin: 0; }

.av-pop-separator { block-size: 1px; margin: calc(var(--av-space) * 0.5) 0; background: var(--av-line); }
.av-pop-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--av-space); padding: var(--av-space) var(--av-space) 2px; border-block-start: 1px solid var(--av-line); margin-block-start: calc(var(--av-space) * 0.5); }

/* The Saved views menu (staging review of 1.1, B-2): a view applied by a click on it, its edit button beside it. */
.av-view-list li { display: flex; align-items: center; gap: 2px; }
.av-view-list li > .av-view-apply { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.av-view-list li > .av-view-apply[aria-current="true"] { background: var(--av-mist); font-weight: 600; }
.av-view-list li > .av-button-icon { flex: none; inline-size: auto; }
.av-views .av-pop-foot { justify-content: flex-start; }

.av-user-card {
    display: flex;
    align-items: center;
    gap: calc(var(--av-space) * 1.5);
    padding: var(--av-space) var(--av-space) calc(var(--av-space) * 1.25);
}

.av-user-card p { margin: 0; }
.av-user-card strong { display: block; color: var(--av-navy); }
.av-user-head { flex-wrap: wrap; padding: 0 0 calc(var(--av-space) * 2); margin-block-end: calc(var(--av-space) * 2); border-block-end: 1px solid var(--av-line); }
.av-user-head p { flex: 1; min-inline-size: 10rem; }
.av-user-roles { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--av-space) var(--av-space); }

.av-notice-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px calc(var(--av-space) * 1.25);
    padding: calc(var(--av-space) * 0.75) var(--av-space);
    border-radius: var(--av-radius-small);
    text-decoration: none;
    color: var(--av-charcoal);
}

.av-notice-row:hover { background: var(--av-mist); color: var(--av-charcoal); }
.av-notice-row .av-notice-icon { grid-row: span 2; }
.av-notice-row strong { color: var(--av-navy); font-weight: 600; }
.av-notice-row.av-unread strong::after {
    content: "";
    display: inline-block;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline-start: 0.4rem;
    border-radius: 50%;
    background: var(--av-teal);
    vertical-align: middle;
}

.av-notice-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--av-teal-tint);
    color: var(--av-teal-dark);
}

.av-notice-icon.av-tone-danger { background: var(--av-danger-tint); color: var(--av-danger); }
.av-notice-icon.av-tone-warning { background: var(--av-warning-tint); color: var(--av-warning); }
.av-notice-icon.av-tone-success { background: var(--av-success-tint); color: var(--av-success); }
.av-notice-icon.av-tone-navy { background: var(--av-navy-soft); color: var(--av-navy); }

/* ---- The page and its header ---- */

.av-page {
    display: flex;
    align-items: flex-start;
    flex: 1;
}

.av-main {
    flex: 1;
    min-width: 0;
    padding: calc(var(--av-space) * 2.5) calc(var(--av-space) * 3) calc(var(--av-space) * 5);
    animation: av-fade-in var(--av-medium) var(--av-ease);
}

.av-main:focus { outline: none; }

.av-breadcrumb { margin-block-end: calc(var(--av-space) * 1.25); font-size: var(--av-text-small); }
.av-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; color: var(--av-slate); }
.av-breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.av-breadcrumb li + li::before { content: "/"; color: var(--av-cool-gray); margin-inline-end: 4px; }
.av-breadcrumb a { color: var(--av-slate); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.av-breadcrumb a:hover { color: var(--av-navy); text-decoration: underline; }
.av-breadcrumb [aria-current="page"] { color: var(--av-charcoal); font-weight: 600; }

.av-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2);
    margin-block-end: calc(var(--av-space) * 2);
}

.av-page-header h1 { margin: 0; }

/* The Sand Gold bar before each page title, upright like a quotation's bar (round 2, R2-60). */
.av-page-header h1,
.av-record-title,
.av-plain-main h1,
.av-empty-state h1 { display: flex; align-items: center; gap: calc(var(--av-space) * 1.25); }

.av-page-header h1::before,
.av-record-title::before,
.av-plain-main h1::before,
.av-empty-state h1::before {
    content: "";
    flex: none;
    align-self: stretch;
    inline-size: 4px;
    min-block-size: 1.15em;
    border-radius: 2px;
    background: var(--av-gold);
}

.av-empty-state h1 { justify-content: center; }

.av-page-header .av-actions { margin: 0; }

.av-lead {
    max-inline-size: 60rem;
    margin-block: calc(var(--av-space) * -0.75) calc(var(--av-space) * 2.5);
    font-size: var(--av-text);
    color: var(--av-slate);
}

/* ---- Help and AV Co-pilot, as drawers over the page from the start side; forms keep the end side
   (round 2, R2-9 and R2-14) ---- */

.av-help {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    inline-size: min(26rem, 100vw);
    padding: 0;
    border-inline-end: 1px solid var(--av-line);
    background: var(--av-white);
    box-shadow: var(--av-shadow-3);
    animation: av-slide-in-start var(--av-medium) var(--av-ease);
}

[dir="rtl"] .av-help { animation-name: av-slide-in-end; }
.av-copilot-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block-start: calc(var(--av-space) * 5); }
.av-copilot-body p { max-inline-size: 20rem; }

.av-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space);
    block-size: var(--av-topbar-height);
    padding-inline: calc(var(--av-space) * 2.5) var(--av-space);
    border-block-end: 1px solid var(--av-line);
    flex: none;
}

.av-help-head h2 { display: flex; align-items: center; gap: var(--av-space); margin: 0; font-size: var(--av-section); }
.av-help-head h2 .av-icon { color: var(--av-teal); }
.av-help-body { flex: 1; overflow-y: auto; padding: calc(var(--av-space) * 2.5); }
.av-help-body h1 { font-size: var(--av-section); }
.av-help-body h2 { font-size: var(--av-subsection); margin-block-start: calc(var(--av-space) * 2.5); }
.av-help-body h3 { font-size: var(--av-text); margin-block-start: calc(var(--av-space) * 2); }
.av-help-guide { display: flex; align-items: center; gap: var(--av-space); margin-block-start: calc(var(--av-space) * 2); padding: calc(var(--av-space) * 1.5); border-radius: var(--av-radius); background: var(--av-teal-tint); font-weight: 600; text-decoration: none; }
.av-help-backdrop { position: fixed; inset: 0; z-index: 44; border: 0; background: rgb(16 48 79 / 24%); animation: av-fade-in var(--av-medium) var(--av-ease); cursor: pointer; }

/* ---- Footers ---- */

.av-footer {
    position: sticky;
    inset-block-end: 0;
    z-index: 15;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space) calc(var(--av-space) * 2);
    min-block-size: var(--av-footer-height);
    padding: 0 calc(var(--av-space) * 3);
    border-block-start: 1px solid var(--av-line);
    background: rgb(255 255 255 / 94%);
    backdrop-filter: blur(6px);
    color: var(--av-slate);
    font-size: var(--av-text-label);
}

.av-footer p { margin: 0; }

/* ---- The plain frame: the start page, the sign-in failure page and the portals' skeletons ---- */

.av-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--av-space) * 2);
    min-block-size: var(--av-topbar-height);
    padding: var(--av-space) calc(var(--av-space) * 3);
    background: var(--av-navy);
    color: var(--av-white);
}

.av-header a { color: var(--av-white); }
.av-header .av-user-name { color: var(--av-cool-gray); }
.av-header :focus-visible { outline-color: var(--av-light-teal); }

.av-brand { margin: 0; font-weight: 600; display: flex; align-items: center; gap: calc(var(--av-space) * 1.5); }
.av-brand img { inline-size: 9.5rem; block-size: auto; }
.av-company { margin-inline-end: var(--av-space); }
.av-app { padding-inline-start: calc(var(--av-space) * 1.5); border-inline-start: 1px solid var(--av-navy-tint); color: var(--av-cool-gray); font-size: var(--av-text-small); }

.av-account { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 1.5); }
.av-inline { display: inline; margin: 0; }
.av-user-name { font-size: var(--av-text-small); color: var(--av-slate); }

.av-plain-main {
    inline-size: min(60rem, calc(100% - 2rem));
    margin: calc(var(--av-space) * 5) auto auto;
    padding: calc(var(--av-space) * 4);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    animation: av-fade-in var(--av-medium) var(--av-ease);
}

.av-plain-main > section > h1 { margin-block-start: 0; }

.av-header .av-button { background: var(--av-white); color: var(--av-navy); border-color: var(--av-white); }
.av-header .av-button:hover { background: var(--av-teal-tint); color: var(--av-navy); }
.av-header-language { display: inline-flex; align-items: center; gap: calc(var(--av-space) * 0.75); padding: calc(var(--av-space) * 0.5) var(--av-space); border-radius: var(--av-radius-small); font-weight: 600; text-decoration: none; }
.av-header-language:hover { background: var(--av-navy-tint); }
.av-header-language .av-icon { color: var(--av-light-teal); }

/* The start page's welcome card (round 2, R2-58 and R2-59) */
.av-welcome { display: flex; flex-direction: column; align-items: center; gap: calc(var(--av-space) * 1.5); padding-block: calc(var(--av-space) * 3); text-align: center; }
.av-welcome-logo { inline-size: 15rem; block-size: auto; margin-block-end: var(--av-space); }
.av-welcome h1 { justify-content: center; margin: 0; font-size: 1.625rem; }
.av-welcome .av-lead { margin: 0; }
.av-welcome p { margin: 0; }
.av-button-large { min-block-size: 2.75rem; padding-inline: calc(var(--av-space) * 3); font-size: var(--av-text); }

/* ---- Buttons ---- */

.av-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--av-space) * 0.75);
    min-block-size: 2.25rem;
    padding: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.75);
    border: 1px solid var(--av-navy);
    border-radius: var(--av-radius-small);
    background: var(--av-navy);
    color: var(--av-white);
    font: inherit;
    font-size: var(--av-text-small);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--av-shadow-1);
    transition: background-color var(--av-fast) var(--av-ease), border-color var(--av-fast) var(--av-ease), box-shadow var(--av-fast) var(--av-ease), transform var(--av-fast) var(--av-ease);
}

.av-button:hover { background: var(--av-navy-tint); border-color: var(--av-navy-tint); color: var(--av-white); }
.av-button:active { transform: translateY(1px); }
.av-button[disabled], .av-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }
/* A click kept before the page is live (G21; round 3, U9): a small busy mark on the button that took it. */
.av-busy { position: relative; cursor: progress; }
.av-busy::after { content: ""; inline-size: 0.85em; block-size: 0.85em; margin-inline-start: 0.4em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: av-spin 0.8s linear infinite; }
@keyframes av-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .av-busy::after { animation: none; border-inline-end-color: currentColor; opacity: 0.6; } }

.av-button-secondary { background: var(--av-white); color: var(--av-navy); border-color: var(--av-cool-gray); }
.av-button-secondary:hover { background: var(--av-mist); border-color: var(--av-slate); color: var(--av-navy); }

.av-button-ghost { background: none; border-color: transparent; color: var(--av-navy); box-shadow: none; }
.av-button-ghost:hover { background: var(--av-navy-soft); border-color: transparent; color: var(--av-navy); }

.av-button-danger { background: var(--av-danger); border-color: var(--av-danger); color: var(--av-white); }
.av-button-danger:hover { background: var(--av-danger-dark); border-color: var(--av-danger-dark); }

.av-button-danger-quiet { background: var(--av-white); border-color: #E5B8BA; color: var(--av-danger); }
.av-button-danger-quiet:hover { background: var(--av-danger-tint); border-color: var(--av-danger); color: var(--av-danger); }

.av-button-small { min-block-size: 1.875rem; padding: 2px calc(var(--av-space) * 1.25); font-size: var(--av-text-label); }
.av-button-icon { min-inline-size: 2.25rem; padding-inline: 0; }
.av-button-small.av-button-icon { min-inline-size: 1.875rem; }

.av-button-link {
    border: 0;
    padding: 0;
    background: none;
    color: var(--av-navy);
    font: inherit;
    text-decoration: underline;
    text-decoration-color: rgb(22 58 95 / 40%);
    text-underline-offset: 2px;
    cursor: pointer;
}

.av-button-link:hover { color: var(--av-teal-dark); }
.av-button-link[disabled] { cursor: default; color: inherit; text-decoration: none; }

.av-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--av-space);
    margin-block: calc(var(--av-space) * 1.5);
}

/* ---- Forms ---- */

.av-form {
    padding: calc(var(--av-space) * 2.5) calc(var(--av-space) * 3);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
}

.av-form-plain { max-inline-size: none; padding: 0; border: 0; background: none; box-shadow: none; }

.av-form-section + .av-form-section {
    margin-block-start: calc(var(--av-space) * 2.5);
    padding-block-start: calc(var(--av-space) * 2.5);
    border-block-start: 1px solid var(--av-line);
}

.av-form-section > h2,
.av-form-section > h3 {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    margin-block-end: calc(var(--av-space) * 2);
    font-size: var(--av-subsection);
}

.av-form-section > h2 .av-icon,
.av-form-section > h3 .av-icon { color: var(--av-teal); }

.av-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 calc(var(--av-space) * 2.5);
}

.av-form-grid > .av-field-wide,
.av-form-grid > .av-form-wide { grid-column: 1 / -1; }

/* Fields side by side line up (round 2, R2-37): each field shares the rows of its row of fields (label,
   hint, control, the date in words, the error), so a longer hint never pushes one control below the
   other. A group of checkboxes keeps its own layout. */
.av-form-grid > .av-field:not(:has(> fieldset)) {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    align-content: start;
}

.av-form-grid > .av-field:not(:has(> fieldset)) > .av-hint { align-self: start; }

.av-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.av-form-bar {
    position: sticky;
    inset-block-end: 2.5rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--av-space);
    margin: calc(var(--av-space) * 2.5) calc(var(--av-space) * -3) calc(var(--av-space) * -2.5);
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 3);
    border-block-start: 1px solid var(--av-line);
    border-end-start-radius: var(--av-radius);
    border-end-end-radius: var(--av-radius);
    background: rgb(250 251 252 / 96%);
    backdrop-filter: blur(4px);
}

.av-form-bar .av-form-bar-note { margin: 0; margin-inline-end: auto; color: var(--av-slate); font-size: var(--av-text-small); }

.av-field { margin-block-end: calc(var(--av-space) * 2); min-inline-size: 0; }

.av-field > label,
.av-field > .av-label,
.av-field > fieldset > legend {
    display: block;
    margin-block-end: 2px;
    padding: 0;
    font-size: var(--av-text-small);
    font-weight: 600;
    color: var(--av-navy);
}

.av-field fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }

.av-required { color: var(--av-danger); margin-inline-start: 0.2rem; }

.av-hint {
    display: block;
    margin-block: 0 calc(var(--av-space) * 0.75);
    font-size: var(--av-text-label);
    line-height: 1.45;
    color: var(--av-slate);
}

/* Every text box, whatever its type (url, tel, time and search as much as text; round 4, item 11): every input
   but a tick, a choice, a file, a hidden value, a range, a colour or a button. */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select, textarea {
    inline-size: 100%;
    min-block-size: 2.25rem;
    padding: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.25);
    border: 1px solid var(--av-field-border);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    color: var(--av-charcoal);
    font: inherit;
    transition: border-color var(--av-fast) var(--av-ease), box-shadow var(--av-fast) var(--av-ease);
}

select {
    appearance: none;
    padding-inline-end: calc(var(--av-space) * 4);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6470' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right 0.6rem center;
}

[dir="rtl"] select { background-position: left 0.6rem center; }

input[type="file"] {
    inline-size: 100%;
    padding: calc(var(--av-space) * 0.75);
    border: 1px dashed var(--av-field-border);
    border-radius: var(--av-radius);
    background: var(--av-mist);
    font: inherit;
    font-size: var(--av-text-small);
    cursor: pointer;
}

input[type="file"]::file-selector-button {
    margin-inline-end: var(--av-space);
    padding: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.25);
    border: 1px solid var(--av-cool-gray);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    color: var(--av-navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

input:hover, select:hover, textarea:hover { border-color: var(--av-charcoal); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--av-teal); box-shadow: 0 0 0 3px rgb(30 138 138 / 18%); }
input[disabled], select[disabled], textarea[disabled] { background: var(--av-mist); color: var(--av-slate); }

textarea { min-block-size: 6rem; resize: vertical; }

/* G9 (round 4, items 1 and 15): a tick list is a column, one tick a row, under its own hint (the hint is never one
   of its items); short items (days, currencies, formats) may take an aligned grid of equal columns
   (av-checks-cols); a choice of two or three short options may sit in one row (av-checks-row). Each box sits on its
   label's first line, however many lines the label takes. */
.av-checks { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: calc(var(--av-space) * 0.5); }
.av-checks-row { flex-direction: row; flex-wrap: wrap; column-gap: calc(var(--av-space) * 2.5); }
.av-checks-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 2); justify-items: start; }

.av-checks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 2);
    padding: calc(var(--av-space) * 1.25);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-small);
    background: #FAFBFC;
}

.av-check { display: inline-flex; align-items: flex-start; gap: calc(var(--av-space) * 0.75); min-block-size: 1.75rem; padding-block: calc((1.75rem - 1lh) / 2); cursor: pointer; }
.av-check-block { margin-block-end: var(--av-space); }
/* A check box that is a form field's whole control (a saved view's company choice): aligned, in body text. */
.av-field > .av-check { display: inline-flex; margin-block-end: 0; font-size: var(--av-text); font-weight: 400; color: inherit; }
.av-indent { padding-inline-start: calc(var(--av-space) * 3); margin-block-start: calc(var(--av-space) * 0.75); }
/* The box on the label's first line: nudged to that line's middle. */
.av-check input { inline-size: 1.125rem; block-size: 1.125rem; margin: calc((1lh - 1.125rem) / 2) 0 0; accent-color: var(--av-navy); flex: none; }

.av-segmented { display: inline-flex; padding: 3px; border-radius: var(--av-radius-small); background: var(--av-mist); gap: 2px; }
.av-segmented .av-check { padding: 2px calc(var(--av-space) * 1.25); border-radius: 4px; }
.av-segmented .av-check:has(input:checked) { background: var(--av-white); box-shadow: var(--av-shadow-1); color: var(--av-navy); font-weight: 600; }

.av-date-words { display: block; margin-block-start: 4px; font-size: var(--av-text-label); color: var(--av-teal-dark); font-weight: 600; }

.av-calendar { inline-size: 18.5rem; max-inline-size: calc(100vw - 2rem); padding: var(--av-space); }
.av-calendar-head { display: flex; align-items: center; gap: 4px; margin-block-end: var(--av-space); }
.av-calendar-head select { min-inline-size: 0; padding-block: 4px; font-size: var(--av-text-small); }
.av-calendar-head .av-calendar-month { flex: 1 1 auto; inline-size: auto; }
.av-calendar-head .av-calendar-year { flex: 0 0 5rem; inline-size: 5rem; }
.av-calendar-days, .av-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.av-calendar-days { margin-block-end: 4px; font-size: var(--av-text-label); font-weight: 600; color: var(--av-slate); }
.av-calendar-day { block-size: 2.25rem; border: 0; border-radius: var(--av-radius-small); background: none; color: var(--av-navy); font: inherit; font-size: var(--av-text-small); font-variant-numeric: tabular-nums; cursor: pointer; }
.av-calendar-day:hover:not(:disabled) { background: var(--av-mist); }
.av-calendar-day:disabled { color: var(--av-line); cursor: default; }
.av-calendar-today { font-weight: 700; color: var(--av-teal-dark); box-shadow: inset 0 0 0 1px var(--av-teal); }
.av-calendar-chosen, .av-calendar-chosen:hover:not(:disabled) { background: var(--av-navy); color: var(--av-white); font-weight: 600; }
.av-calendar-foot { display: flex; justify-content: flex-end; gap: 4px; margin-block-start: 4px; }
.av-calendar-foot:empty { display: none; }

/* A number or an amount with what it is in at the end of the box (one control with the box: G9, below). */
.av-input-affix { position: relative; display: flex; align-items: stretch; min-inline-size: 0; }
.av-input-affix input { flex: 1 1 auto; min-inline-size: 0; text-align: end; font-variant-numeric: tabular-nums; }
.av-input-suffix { display: inline-flex; align-items: center; padding-inline: var(--av-space); border: 0; background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-small); font-weight: 600; white-space: nowrap; }

.av-field-error,
.validation-message {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-block-start: 4px;
    color: var(--av-danger);
    font-size: var(--av-text-small);
    font-weight: 600;
    animation: av-shake 300ms var(--av-ease);
}

.invalid, [aria-invalid="true"] { border-color: var(--av-danger) !important; }

/* ---- Messages, toasts, badges, chips ---- */

.av-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 1.25) calc(var(--av-space) * 1.5);
    border: 1px solid #C6E2E2;
    border-inline-start: 4px solid var(--av-teal);
    border-radius: var(--av-radius-small);
    background: var(--av-teal-tint);
    margin-block-end: calc(var(--av-space) * 2);
}

.av-alert > .av-icon { margin-block-start: 1px; color: var(--av-teal-dark); }
.av-alert-error { border-color: #EBC3C5; border-inline-start-color: var(--av-danger); background: var(--av-danger-tint); }
.av-alert-error > .av-icon { color: var(--av-danger); }
.av-alert-warning { border-color: #EED9A6; border-inline-start-color: var(--av-gold); background: var(--av-warning-tint); }
.av-alert-warning > .av-icon { color: var(--av-warning); }
.av-alert-success { border-color: #BFDDC9; border-inline-start-color: var(--av-success); background: var(--av-success-tint); }
.av-alert-success > .av-icon { color: var(--av-success); }
.av-alert p { margin: 0; }
.av-alert p + p { margin-block-start: 4px; }

.av-toasts {
    position: fixed;
    inset-block-end: 3.25rem;
    inset-inline-end: calc(var(--av-space) * 3);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--av-space);
    inline-size: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.av-toast {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--av-space) * 1.25);
    padding: calc(var(--av-space) * 1.5);
    border: 1px solid var(--av-line);
    border-inline-start: 4px solid var(--av-success);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-3);
    pointer-events: auto;
    animation: av-toast-in var(--av-medium) var(--av-ease), av-toast-out 400ms var(--av-ease) 6s forwards;
}

.av-toast p { margin: 0; flex: 1; }
.av-toast > .av-icon { color: var(--av-success); margin-block-start: 1px; }
.av-toast-error { border-inline-start-color: var(--av-danger); animation: av-toast-in var(--av-medium) var(--av-ease); }
.av-toast-error > .av-icon { color: var(--av-danger); }
.av-toast-close { margin: -4px; }
.av-toast:hover { animation-play-state: paused; }

.av-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px calc(var(--av-space) * 0.875);
    border-radius: var(--av-radius-pill);
    background: var(--av-mist);
    color: var(--av-navy);
    font-size: var(--av-text-label);
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
}

.av-badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.av-badge-plain::before { display: none; }
.av-badge-planned { background: var(--av-teal-tint); color: var(--av-teal-dark); }
.av-badge-good { background: var(--av-success-tint); color: var(--av-success); }
.av-badge-warning { background: var(--av-warning-tint); color: var(--av-warning); }
.av-badge-danger { background: var(--av-danger-tint); color: var(--av-danger); }
.av-badge-navy { background: var(--av-navy-soft); color: var(--av-navy); }

.av-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px calc(var(--av-space) * 0.875);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    color: var(--av-navy);
    font-size: var(--av-text-label);
    font-weight: 600;
    white-space: nowrap;
}

.av-chip-id { font-family: Consolas, "Courier New", monospace; direction: ltr; unicode-bidi: isolate; background: var(--av-navy-soft); border-color: transparent; }
.av-chip-muted { color: var(--av-slate); background: var(--av-mist); border-style: dashed; }

button.av-chip { cursor: pointer; font: inherit; font-size: var(--av-text-label); font-weight: 600; }
button.av-chip:hover { border-color: var(--av-slate); }
.av-chip-remove .av-icon { width: 0.875rem; height: 0.875rem; }

/* ---- Cards, figure tiles, sections, empty states ---- */

.av-section { margin-block-end: calc(var(--av-space) * 3); }

.av-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--av-space);
    margin-block-end: calc(var(--av-space) * 1.25);
}

.av-section-head h2, .av-section-head h3 { display: flex; align-items: center; gap: var(--av-space); margin: 0; }
.av-section-head h2 .av-icon, .av-section-head h3 .av-icon { color: var(--av-teal); }
.av-section-head .av-actions { margin: 0; }

.av-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: calc(var(--av-space) * 1.5);
    margin-block-end: calc(var(--av-space) * 2.5);
}

.av-card {
    position: relative;
    padding: calc(var(--av-space) * 2);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    transition: box-shadow var(--av-fast) var(--av-ease), transform var(--av-fast) var(--av-ease), border-color var(--av-fast) var(--av-ease);
}

.av-card-link:hover, .av-card:has(> .av-card-cover:hover) { border-color: var(--av-cool-gray); box-shadow: var(--av-shadow-2); transform: translateY(-1px); }
.av-card-cover { position: absolute; inset: 0; border-radius: inherit; }
.av-card-cover:focus-visible { outline-offset: -2px; }
.av-card h2, .av-card h3 { margin-block-end: calc(var(--av-space) * 0.75); }
.av-card p:last-child { margin-block-end: 0; }
.av-card-planned { background: #FAFBFC; box-shadow: none; }
.av-card-head { display: flex; align-items: center; gap: var(--av-space); margin-block-end: var(--av-space); }
/* A card head's icon spaced from its title (round 3, point 65 d). */
.av-card-head h3 { display: flex; align-items: center; gap: var(--av-space); margin: 0; }

.av-card-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--av-radius);
    background: var(--av-teal-tint);
    color: var(--av-teal-dark);
    flex: none;
}

.av-card-planned .av-card-icon { background: var(--av-mist); color: var(--av-slate); }

.av-toolbar-field { margin: 0; flex: 0 1 26rem; }
.av-toolbar:has(.av-toolbar-field) { align-items: flex-end; border-block-end: 1px solid var(--av-line); border-radius: var(--av-radius); margin-block-end: calc(var(--av-space) * 2); padding: calc(var(--av-space) * 1.5); }
.av-toolbar:has(.av-toolbar-field) + .av-table-wrap { border-radius: var(--av-radius); }

.av-steps { list-style: none; margin: 0; padding: 0; counter-reset: av-step; }
.av-step { position: relative; padding: var(--av-space) 0 var(--av-space) calc(var(--av-space) * 4); border-block-end: 1px solid var(--av-line); counter-increment: av-step; }
.av-step:last-child { border-block-end: 0; }
.av-step::before { content: counter(av-step); position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--av-space) * 1.1); display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-label); font-weight: 700; }
.av-step-task::before { background: var(--av-teal-tint); color: var(--av-teal-dark); }
.av-step > a, .av-step-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.av-step > a[aria-current="true"] { color: var(--av-teal-dark); }
.av-step .av-badge { margin-inline-start: 6px; }
.av-step .av-meta { display: block; margin-block-start: 2px; font-size: var(--av-text-label); }
.av-flow-card h2 { font-size: var(--av-subsection); }

.av-rules { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.av-rules > legend { display: block; margin-block-end: var(--av-space); padding: 0; font-weight: 700; color: var(--av-navy); font-size: var(--av-subsection); }
.av-form-section.av-rules { padding-block-start: calc(var(--av-space) * 2.5); }
.av-form-section.av-rules:first-of-type { padding-block-start: 0; border-block-start: 0; margin-block-start: 0; }
.av-rule-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: end;
    gap: var(--av-space);
    padding: var(--av-space) calc(var(--av-space) * 1.25) 0;
    margin-block-end: var(--av-space);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius-small);
    background: #FAFBFC;
}
.av-rule-row .av-field { margin-block-end: var(--av-space); }
.av-rule-row > .av-button { margin-block-end: var(--av-space); }

/* Scorecards (round 3, P7.4; items 28, 63): a template's criteria as rows (names, points, move and remove), each
   template in its own frame in the wide drawer; a scorecard's head with its recommendation and total. */
.av-scorecard-edit { margin: 0 0 calc(var(--av-space) * 2); padding: calc(var(--av-space) * 1.5); border: 1px solid var(--av-line); border-radius: var(--av-radius); min-inline-size: 0; }
.av-scorecard-edit > legend { padding: 0 6px; font-weight: 700; color: var(--av-navy); }
.av-scorecard-edit > .av-button { margin-block-start: var(--av-space); }
.av-rule-row.av-criterion-row { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto; }
.av-rule-tools { display: flex; gap: 2px; margin-block-end: var(--av-space); }
.av-rule-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--av-space); }
.av-scorecard-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); margin-block-end: calc(var(--av-space) * 1.5); }
.av-scorecard-total { font-size: var(--av-subsection); color: var(--av-navy); font-variant-numeric: tabular-nums; }
.av-scorecard-criteria { margin-block-start: calc(var(--av-space) * 1.5); }
.av-scorecard-lines li { flex-wrap: wrap; }
/* An interview in its drawer over People > Interviews (Page-Layout-Map row 28; G26): the number, the status and the actions. */
.av-interview-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); margin-block-end: calc(var(--av-space) * 1.5); }
.av-interview-head > .av-actions { margin: 0; margin-inline-start: auto; }

/* The pre-employment documents (round 3, P7.7; item 65): a table that fits its pane: the document with its file and
   reason wrapping in the first column, the status, the row's menu (G13). */
.av-table-wrap.av-checks-wrap { overflow: visible; }
.av-checks-table { table-layout: fixed; inline-size: 100%; }
.av-checks-table td { overflow-wrap: anywhere; vertical-align: top; }
.av-checks-table .av-checks-status { inline-size: 8.5rem; }
.av-checks-table .av-checks-menu { inline-size: 3rem; text-align: end; }
.av-checks-name { display: block; font-weight: 600; }
.av-checks-file, .av-checks-reason { display: block; margin-block-start: 2px; font-size: var(--av-text-label); color: var(--av-slate); }

.av-home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: calc(var(--av-space) * 2); align-items: stretch; margin-block-end: calc(var(--av-space) * 3); }
.av-urgent > .av-meta { margin-block: calc(var(--av-space) * -0.5) var(--av-space); }

/* A set of filters of one kind as one group button (round 2, R2-8 and R2-18). */
.av-segment {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    max-inline-size: 100%;
    margin-block-end: var(--av-space);
    border: 1px solid var(--av-cool-gray);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    overflow: hidden;
}

.av-segment-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 2rem;
    padding: 2px calc(var(--av-space) * 1.25);
    border: 0;
    border-inline-start: 1px solid var(--av-line);
    background: none;
    color: var(--av-navy);
    font: inherit;
    font-size: var(--av-text-small);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--av-fast) var(--av-ease), color var(--av-fast) var(--av-ease);
}

.av-segment-item:first-child { border-inline-start: 0; }
.av-segment-item:hover { background: var(--av-mist); color: var(--av-navy); }
.av-segment-item.av-on, .av-segment-item.av-on:hover { background: var(--av-navy); color: var(--av-white); }
.av-segment-item .av-icon { width: 0.9375rem; height: 0.9375rem; }
.av-segment-count { min-inline-size: 1.25rem; padding: 0 6px; border-radius: var(--av-radius-pill); background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-label); text-align: center; font-variant-numeric: tabular-nums; }
.av-tone-warning .av-segment-count { background: var(--av-warning-tint); color: var(--av-warning); }
.av-tone-danger .av-segment-count { background: var(--av-danger-tint); color: var(--av-danger); }
.av-segment-item.av-on .av-segment-count { background: rgb(255 255 255 / 20%); color: var(--av-white); }
.av-toolbar .av-segment { margin-block-end: 0; }
.av-section-title { display: flex; align-items: center; gap: var(--av-space); margin-block: calc(var(--av-space) * 1) calc(var(--av-space) * 1.5); }
.av-section-title .av-icon, .av-section-head .av-icon { color: var(--av-teal); }
/* The duty cards fill the width, up to four a row (round 2, R2-7). */
.av-queue-cards { grid-template-columns: repeat(auto-fit, minmax(max(18rem, calc((100% - 4.5rem) / 4)), 1fr)); }
.av-queue-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: var(--av-space); }
.av-chip strong { color: var(--av-navy); }
.av-chip-warning { background: var(--av-warning-tint); border-color: #EED9A6; }
.av-chip-warning, .av-chip-warning strong { color: var(--av-warning); }
.av-chip-danger { background: var(--av-danger-tint); border-color: #EBC3C5; }
.av-chip-danger, .av-chip-danger strong { color: var(--av-danger); }
.av-card > .av-list { border: 0; border-radius: 0; box-shadow: none; margin: 0 calc(var(--av-space) * -2); background: none; }
.av-card > .av-list > li { padding-inline: calc(var(--av-space) * 2); }
.av-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.5); }
.av-task .av-row-title { margin-block-end: 2px; }
.av-task .av-row-title a { color: var(--av-navy); }
.av-task .av-meta-line { margin: 0; font-size: var(--av-text-label); }
.av-queue .av-task { grid-template-columns: auto minmax(0, 1fr); }
.av-queue .av-task .av-row-side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; text-align: start; }
.av-list-more { display: flex; justify-content: center; padding-block-start: var(--av-space); border-block-start: 1px solid var(--av-line); }
.av-chart-card .av-donut-wrap { justify-content: center; }

.av-toolbar-alone { border-block-end: 1px solid var(--av-line); border-radius: var(--av-radius); margin-block-end: calc(var(--av-space) * 2); }
.av-type-chips { gap: 6px; }
a.av-chip { text-decoration: none; transition: border-color var(--av-fast) var(--av-ease), background-color var(--av-fast) var(--av-ease); }
a.av-chip:hover { border-color: var(--av-slate); color: var(--av-navy); }
.av-chip-on, a.av-chip-on:hover { background: var(--av-navy); border-color: var(--av-navy); color: var(--av-white); }
.av-chip .av-icon { width: 0.875rem; height: 0.875rem; }
.av-kb-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.5); }
.av-kb-row .av-row-title a { color: var(--av-navy); }
.av-kb-summary { color: var(--av-charcoal); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.av-kb-row .av-meta-line { margin: 0; font-size: var(--av-text-label); }

.av-record-side { display: flex; flex-direction: column; gap: calc(var(--av-space) * 2); min-inline-size: 0; }
.av-record-side .av-panel h2 { font-size: var(--av-subsection); }
.av-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.av-files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--av-space); padding: var(--av-space) calc(var(--av-space) * 1.25); border: 1px solid var(--av-line); border-radius: var(--av-radius-small); background: #FAFBFC; }
.av-files a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.av-files a:hover { text-decoration: underline; }
.av-files .av-icon { color: var(--av-teal-dark); }
.av-publication { padding-block-start: var(--av-space); border-block-start: 1px solid var(--av-line); }
.av-publication p { margin: 0; }
.av-publication .av-actions { margin: 4px 0 0; }
.av-record-panel [role="tabpanel"] { padding-block-start: 4px; }
.av-record-panel .av-form-plain { margin-block-start: calc(var(--av-space) * 1.5); }
.av-record-panel .av-history { margin-block-end: var(--av-space); }
.av-record-main .av-prose { padding-block-start: var(--av-space); }

.av-zone-header h1 { display: flex; align-items: center; gap: calc(var(--av-space) * 1.25); }
.av-zone-header h1::before { display: none; }
.av-zone-icon { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--av-radius); background: var(--av-navy); color: var(--av-light-teal); }
.av-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: calc(var(--av-space) * 1.5); }
.av-chart-title, .av-chart-card > h3 { display: flex; align-items: center; gap: var(--av-space); margin: 0 0 calc(var(--av-space) * 1.5); font-size: var(--av-subsection); }
.av-chart-title .av-icon, .av-chart-card > h3 .av-icon { color: var(--av-teal); }
.av-chart-card .av-figure { margin: 0; }
.av-card-cover-link { text-decoration: none; }
.av-card-cover-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.av-card-link:hover .av-card-cover-link { text-decoration: underline; }
.av-planned-heading { display: flex; align-items: center; gap: var(--av-space); margin-block: calc(var(--av-space) * 2) var(--av-space); color: var(--av-slate); font-size: var(--av-text); }
.av-planned-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 2px calc(var(--av-space) * 2); }
.av-planned-list li { display: flex; flex-direction: column; padding: var(--av-space) calc(var(--av-space) * 1.25); border-radius: var(--av-radius-small); border-inline-start: 3px solid var(--av-cool-gray); background: rgb(255 255 255 / 60%); }
.av-planned-list a { font-weight: 600; text-decoration: none; }
.av-planned-list a:hover { text-decoration: underline; }
.av-planned-list .av-meta { font-size: var(--av-text-label); }

.av-notice-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.5); }
.av-notice-item.av-unread { background: #F7FBFB; box-shadow: inset 3px 0 0 var(--av-teal); }
[dir="rtl"] .av-notice-item.av-unread { box-shadow: inset -3px 0 0 var(--av-teal); }
.av-notice-item .av-row-title { color: var(--av-navy); }
.av-notice-item .av-row-side { flex-direction: row; margin: 0; }
.av-search-hit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--av-space) calc(var(--av-space) * 1.5); }
.av-search-hit a { font-weight: 600; }

.av-team-cards { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

/* Outside links: two cards a row on a wide screen, one on a narrow one, each label above its value
   (round 2, R2-45). */
.av-link-cards { grid-template-columns: repeat(auto-fit, minmax(max(22rem, calc((100% - 0.75rem) / 2)), 1fr)); }
.av-link-cards dl.av-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.av-link-cards dl.av-details dd { margin-block-end: var(--av-space); }
.av-team-manager { display: flex; align-items: center; gap: calc(var(--av-space) * 1.25); margin-block: var(--av-space) calc(var(--av-space) * 2); }
.av-team-manager p { margin: 0; display: flex; flex-direction: column; }
.av-team-manager strong { color: var(--av-navy); }
.av-avatar-empty { background: var(--av-mist); color: var(--av-slate); box-shadow: 0 0 0 2px var(--av-white), 0 0 0 3px var(--av-cool-gray); }
.av-team-history { margin-block-start: calc(var(--av-space) * 2); padding-block-start: calc(var(--av-space) * 1.5); border-block-start: 1px solid var(--av-line); }
.av-team-history > summary { display: flex; align-items: center; gap: var(--av-space); cursor: pointer; font-weight: 600; color: var(--av-navy); font-size: var(--av-text-small); margin-block-end: var(--av-space); }

.av-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: calc(var(--av-space) * 1.5);
    margin-block-end: calc(var(--av-space) * 2.5);
}

/* The number at the top of every tile in a row, however its label wraps (round 3, point 65 g). */
.av-tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: start;
    gap: 2px calc(var(--av-space) * 1.5);
    padding: calc(var(--av-space) * 1.75) calc(var(--av-space) * 2);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    color: var(--av-charcoal);
    text-decoration: none;
    transition: box-shadow var(--av-fast) var(--av-ease), transform var(--av-fast) var(--av-ease);
}

a.av-tile:hover { box-shadow: var(--av-shadow-2); transform: translateY(-1px); color: var(--av-charcoal); }

.av-tile-icon {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    background: var(--av-teal-tint);
    color: var(--av-teal-dark);
}

.av-tile-icon .av-icon { width: 1.375rem; height: 1.375rem; }
.av-tone-navy .av-tile-icon { background: var(--av-navy-soft); color: var(--av-navy); }
.av-tone-warning .av-tile-icon { background: var(--av-warning-tint); color: var(--av-warning); }
.av-tone-danger .av-tile-icon { background: var(--av-danger-tint); color: var(--av-danger); }
.av-tone-success .av-tile-icon { background: var(--av-success-tint); color: var(--av-success); }

.av-stat {
    display: block;
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--av-navy);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.av-stat-label { font-size: var(--av-text-small); color: var(--av-slate); }

.av-empty {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 2);
    border: 1px dashed var(--av-cool-gray);
    border-radius: var(--av-radius);
    background: rgb(255 255 255 / 60%);
    color: var(--av-slate);
}

.av-empty .av-icon { color: var(--av-teal); }

.av-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--av-space);
    max-inline-size: 36rem;
    margin: calc(var(--av-space) * 4) auto;
    padding: calc(var(--av-space) * 5) calc(var(--av-space) * 3);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    text-align: center;
}

.av-empty-state h1::before { margin-inline: auto; }
.av-empty-state p { margin: 0; color: var(--av-slate); max-inline-size: 30rem; }
.av-empty-state .av-actions { justify-content: center; margin-block: calc(var(--av-space) * 1.5) 0; }

.av-empty-state-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
    margin-block-end: var(--av-space);
    border-radius: 50%;
    background: var(--av-teal-tint);
    color: var(--av-teal-dark);
}

.av-empty-state-icon.av-tone-danger { background: var(--av-danger-tint); color: var(--av-danger); }
.av-empty-state-icon.av-tone-navy { background: var(--av-navy-soft); color: var(--av-navy); }

.av-planned-page { text-align: center; }

/* ---- Lists, toolbars, tables ---- */

.av-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--av-space);
    padding: var(--av-space);
    border: 1px solid var(--av-line);
    border-block-end: 0;
    border-start-start-radius: var(--av-radius);
    border-start-end-radius: var(--av-radius);
    background: var(--av-white);
}

.av-toolbar-search { position: relative; flex: 1 1 14rem; max-inline-size: 22rem; }
.av-toolbar-search .av-icon { position: absolute; inset-inline-start: var(--av-space); inset-block-start: 50%; translate: 0 -50%; color: var(--av-slate); pointer-events: none; }
.av-toolbar-search input { padding-inline-start: calc(var(--av-space) * 4); }
.av-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); margin-inline-start: auto; }
.av-toolbar .av-meta { white-space: nowrap; }

.av-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--av-space) * 0.75);
    padding: var(--av-space);
    border: 1px solid var(--av-line);
    border-block: 0;
    background: #FAFBFC;
}

.av-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--av-space) calc(var(--av-space) * 1.5);
    align-items: end;
    padding: calc(var(--av-space) * 1.5);
    border: 1px solid var(--av-line);
    border-block-end: 0;
    background: #FAFBFC;
    animation: av-drop-in var(--av-fast) var(--av-ease);
}

.av-filter-panel .av-field { margin: 0; }
.av-filter-panel .av-actions { margin: 0; grid-column: 1 / -1; justify-content: flex-end; }

.av-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--av-space) calc(var(--av-space) * 1.5);
    padding: calc(var(--av-space) * 1.5);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    margin-block-end: calc(var(--av-space) * 2);
}

.av-filters .av-field { margin: 0; flex: 1 1 12rem; max-inline-size: 24rem; }

.av-table-wrap {
    position: relative;
    overflow: auto;
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    margin-block: 0 calc(var(--av-space) * 2);
}

.av-toolbar + .av-table-wrap,
.av-chips + .av-table-wrap,
.av-filter-panel + .av-table-wrap { border-start-start-radius: 0; border-start-end-radius: 0; }

.av-table-wrap.av-table-scroll { max-block-size: calc(100vh - 17rem); min-block-size: 12rem; }

.av-table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--av-text-small);
}

.av-table caption {
    text-align: start;
    font-weight: 600;
    color: var(--av-navy);
    padding: var(--av-space) calc(var(--av-space) * 1.5);
}

.av-table th,
.av-table td {
    padding: calc(var(--av-space) * 0.875) calc(var(--av-space) * 1.5);
    border-block-end: 1px solid var(--av-line);
    text-align: start;
    vertical-align: middle;
}

.av-table thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: #F7F9FA;
    color: var(--av-slate);
    font-size: var(--av-text-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.av-table thead th:has(button) { padding-block: calc(var(--av-space) * 0.5); }

.av-table th button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 0;
    padding: 4px 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.av-table th button:hover { color: var(--av-navy); }
.av-table th[aria-sort] { color: var(--av-navy); }
.av-sort-icon { display: inline-flex; opacity: 0.4; transition: transform var(--av-fast) var(--av-ease), opacity var(--av-fast) var(--av-ease); }
.av-sort-icon .av-icon { width: 0.875rem; height: 0.875rem; }
.av-table th button:hover .av-sort-icon { opacity: 0.8; }
.av-table th[aria-sort] .av-sort-icon { opacity: 1; color: var(--av-teal); }
.av-table th[aria-sort="descending"] .av-sort-icon { transform: rotate(180deg); }
.av-empty-row { display: flex; align-items: center; justify-content: center; gap: var(--av-space); margin: 0; padding: calc(var(--av-space) * 4) calc(var(--av-space) * 2); color: var(--av-slate); }
.av-empty-row .av-icon { color: var(--av-teal); }
.av-views-panel { padding: calc(var(--av-space) * 1.5); }
.av-views-panel h2 { margin: 0 0 var(--av-space); }
.av-report .av-chart-card { margin-block-end: calc(var(--av-space) * 2); }

.av-table tbody tr { transition: background-color var(--av-fast) var(--av-ease); }
.av-table tbody tr:hover { background: #F7FAFB; }
.av-table tbody tr:last-child > * { border-block-end: 0; }
.av-table tfoot td { position: sticky; inset-block-end: 0; z-index: 1; background: #F7F9FA; border-block-start: 1px solid var(--av-line); border-block-end: 0; font-weight: 600; }
.av-table td a { font-weight: 600; }
.av-table .av-nowrap, .av-table .av-date { white-space: nowrap; }
/* A list's long text keeps a readable width; its totals row and its row menu do not (they widened every list with totals
   and scrolled it sideways). A hand-written table marks its long text (a description, a note, a reason) av-long. */
.av-report .av-table tbody td:not(.av-nowrap):not(.av-num):not(.av-row-actions) { min-inline-size: 13rem; }
.av-table td.av-long { min-inline-size: 13rem; }
/* An address (a post's link, a template's example link) breaks anywhere rather than widen its table to its whole length. */
.av-table td.av-url { min-inline-size: 13rem; overflow-wrap: anywhere; }
/* A choice in a table cell keeps the width of its longest option: at 100 % of an auto-sized cell it gave its column no
   width of its own and was cut short (the role matrix's Scope). */
.av-table td select { inline-size: auto; }
.av-table .av-date { color: var(--av-slate); font-variant-numeric: tabular-nums; }
/* A table's actions: a cell of the row, so its line and height stay with the row's (round 2, item 1). */
.av-table td.av-actions { display: table-cell; margin: 0; text-align: end; white-space: nowrap; }
.av-table td.av-actions > * + * { margin-inline-start: 4px; }
.av-table .av-actions:not(td) { margin: 0; gap: 4px; flex-wrap: nowrap; }
.av-num { text-align: end !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A row that opens its record: the whole row is the link in its first cell. */
.av-table tr.av-row-open { position: relative; cursor: pointer; }
.av-table tr.av-row-open td:first-child a::after { content: ""; position: absolute; inset: 0; }
.av-table button.av-link-cell { padding: 0; border: 0; background: none; color: var(--av-navy); font: inherit; font-weight: 600; text-align: start; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.av-row-actions { text-align: end !important; white-space: nowrap; }

.av-group-row th {
    background: var(--av-navy-soft) !important;
    color: var(--av-navy);
    font-size: var(--av-text-small);
    text-align: start;
}

.av-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--av-space);
    margin-block-end: calc(var(--av-space) * 2);
    color: var(--av-slate);
    font-size: var(--av-text-small);
}

.av-pager .av-pager-size { display: inline-flex; align-items: center; gap: var(--av-space); margin-inline-start: auto; }
.av-pager select { inline-size: auto; min-block-size: 1.875rem; padding-block: 2px; }

/* Every control of a list's toolbar one height on one line (round 2, R2-19). */
.av-toolbar > *, .av-toolbar-end > * { margin-block: 0; }
.av-columns > summary { cursor: pointer; }
.av-columns .av-checks { margin-block-start: var(--av-space); }

.av-pop-panel .av-checks { flex-direction: column; gap: 2px; }
.av-pop-panel .av-check { padding: 4px var(--av-space); border-radius: var(--av-radius-small); inline-size: 100%; }
.av-pop-panel .av-check:hover { background: var(--av-mist); }

.av-list {
    list-style: none;
    margin: 0 0 calc(var(--av-space) * 2);
    padding: 0;
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
}

.av-list > li {
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2);
    border-block-end: 1px solid var(--av-line);
    transition: background-color var(--av-fast) var(--av-ease);
}

.av-list > li:last-child { border-block-end: 0; }
.av-list > li:hover { background: #FAFBFC; }
.av-list > li > p { margin-block-end: 4px; }
.av-list > li > p:last-child { margin-block-end: 0; }
.av-list-plain { border: 0; box-shadow: none; background: none; }
.av-list-plain > li { padding-inline: 0; }

.av-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: calc(var(--av-space) * 0.5) calc(var(--av-space) * 1.5);
}

.av-row-main { min-inline-size: 0; }
.av-row-main p { margin: 0; }
.av-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 0.75); font-weight: 600; }
.av-row-title a { text-decoration: none; }
.av-row-title a:hover { text-decoration: underline; }
.av-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: end; }

.av-meta { font-size: var(--av-text-small); color: var(--av-slate); }
.av-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px calc(var(--av-space) * 1.25); }
.av-meta-line > span { display: inline-flex; align-items: center; gap: 4px; }
.av-meta-line .av-icon { width: 0.9375rem; height: 0.9375rem; color: var(--av-slate); }

dl.av-details {
    display: grid;
    grid-template-columns: minmax(7rem, max-content) 1fr;
    gap: calc(var(--av-space) * 1) calc(var(--av-space) * 2);
    margin: 0 0 calc(var(--av-space) * 2);
    font-size: var(--av-text-small);
}

dl.av-details dt { color: var(--av-slate); font-weight: 600; }
dl.av-details dd { margin: 0; color: var(--av-charcoal); min-inline-size: 0; overflow-wrap: anywhere; }

/* ---- Tabs ---- */

.av-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-block-end: 1px solid var(--av-line);
    margin-block-end: calc(var(--av-space) * 2);
}

.av-tabs button,
.av-tabs a {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--av-space) * 0.75);
    padding: calc(var(--av-space) * 1) calc(var(--av-space) * 1.5);
    border: 0;
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
    background: none;
    color: var(--av-slate);
    font: inherit;
    font-size: var(--av-text-small);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--av-fast) var(--av-ease), border-color var(--av-fast) var(--av-ease);
}

.av-tabs button:hover, .av-tabs a:hover { color: var(--av-navy); }
.av-tabs [aria-selected="true"],
.av-tabs [aria-current="page"] { color: var(--av-navy); border-block-end-color: var(--av-teal); }
.av-tab-count { min-inline-size: 1.375rem; padding: 0 6px; border-radius: var(--av-radius-pill); background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-label); text-align: center; }
.av-tabs [aria-current="page"] .av-tab-count, .av-tabs [aria-selected="true"] .av-tab-count { background: var(--av-teal-tint); color: var(--av-teal-dark); }
/* A count that waits for the user (delegations to accept): the warning tint, on any tab. */
.av-tab-count.av-tab-count-alert, .av-tabs [aria-current="page"] .av-tab-count-alert { background: var(--av-warning-tint); color: var(--av-warning); font-weight: 600; }

/* ---- Record page ---- */

.av-record-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2);
    padding: calc(var(--av-space) * 2.5) calc(var(--av-space) * 3);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    margin-block-end: calc(var(--av-space) * 2);
}

.av-record-header .av-user-head { flex-wrap: nowrap; padding: 0; margin: 0; border: 0; }
.av-record-header .av-user-head > div { min-inline-size: 0; }
.av-record-header h1 { margin-block-end: var(--av-space); }
.av-record-header .av-actions { margin: 0; align-self: start; justify-content: flex-end; }
.av-record-chips { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 0.75); margin-block-end: var(--av-space); }

.av-facts {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--av-space) calc(var(--av-space) * 2);
    margin: 0;
    padding-block-start: calc(var(--av-space) * 1.5);
    border-block-start: 1px solid var(--av-line);
}

.av-facts-plain { padding-block-start: 0; border: 0; margin-block-end: calc(var(--av-space) * 2); }
.av-cell-stack > * { display: block; }
.av-cell-stack a { white-space: nowrap; }
.av-facts div { min-inline-size: 0; }
.av-facts dt { font-size: var(--av-text-label); color: var(--av-slate); font-weight: 600; }
.av-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--av-navy); overflow-wrap: anywhere; }

.av-next {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--av-space);
    margin: 0;
    padding: var(--av-space) calc(var(--av-space) * 1.5);
    border-radius: var(--av-radius-small);
    background: var(--av-teal-tint);
    color: var(--av-navy);
    font-size: var(--av-text-small);
}

.av-next .av-icon { color: var(--av-teal-dark); }

.av-record-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: calc(var(--av-space) * 2.5);
    align-items: start;
}

.av-record-main {
    padding: calc(var(--av-space) * 2.5) calc(var(--av-space) * 3);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
    min-inline-size: 0;
}

.av-panel {
    padding: calc(var(--av-space) * 2);
    border: 1px solid var(--av-line);
    border-radius: var(--av-radius);
    background: var(--av-white);
    box-shadow: var(--av-shadow-1);
}

.av-panel-sticky { position: sticky; inset-block-start: calc(var(--av-topbar-height) + var(--av-space) * 2); }
.av-panel h2 { font-size: var(--av-subsection); }
.av-panel .av-tabs { margin-inline: calc(var(--av-space) * -2); padding-inline: var(--av-space); margin-block-start: calc(var(--av-space) * -1); }

.av-history { list-style: none; margin: 0; padding: 0; font-size: var(--av-text-small); }

.av-timeline { list-style: none; margin: 0; padding: 0; font-size: var(--av-text-small); }
.av-timeline li { position: relative; padding-block: 0 calc(var(--av-space) * 1.5); padding-inline-start: calc(var(--av-space) * 2.5); }
.av-timeline li::before { content: ""; position: absolute; inset-inline-start: 4px; inset-block-start: 6px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--av-teal); box-shadow: 0 0 0 3px var(--av-teal-tint); }
.av-timeline li::after { content: ""; position: absolute; inset-inline-start: 7px; inset-block: 18px 0; inline-size: 2px; background: var(--av-line); }
.av-timeline li:last-child::after { display: none; }
.av-timeline .av-meta { display: block; font-size: var(--av-text-label); }

.av-comment { padding: calc(var(--av-space) * 1.25); border-radius: var(--av-radius-small); background: var(--av-mist); margin-block-end: var(--av-space); }
.av-comment .av-meta { display: block; margin-block-end: 4px; font-size: var(--av-text-label); }
.av-comment p { margin: 0; }

/* ---- Markdown content (help, Knowledge Base) ---- */

.av-prose { max-inline-size: 48rem; line-height: 1.65; }
.av-plain-text { white-space: pre-wrap; }
.av-prose h1 { font-size: 1.25rem; }
.av-prose h2 { font-size: var(--av-section); margin-block-start: calc(var(--av-space) * 3); }
.av-prose h3 { font-size: var(--av-subsection); margin-block-start: calc(var(--av-space) * 2); }
.av-prose ul, .av-prose ol { padding-inline-start: calc(var(--av-space) * 3); margin-block: 0 calc(var(--av-space) * 2); }
.av-prose li { margin-block-end: calc(var(--av-space) / 2); }
.av-prose table { border-collapse: collapse; margin-block-end: calc(var(--av-space) * 2); }
.av-prose th, .av-prose td { border: 1px solid var(--av-line); padding: calc(var(--av-space) / 2) var(--av-space); text-align: start; }
.av-prose code { padding: 1px 4px; border-radius: 4px; background: var(--av-mist); }
.av-prose blockquote { margin: 0 0 calc(var(--av-space) * 2); padding: var(--av-space) calc(var(--av-space) * 2); border-inline-start: 4px solid var(--av-light-teal); background: var(--av-teal-tint); }

/* ---- Charts and the workflow flowchart (server-drawn SVG) ---- */

.av-chart-card { display: flex; flex-direction: column; }
.av-chart-card h3 { display: flex; align-items: center; gap: var(--av-space); }
.av-chart-card h3 .av-icon { color: var(--av-teal); }

.av-chart { inline-size: 100%; max-inline-size: 40rem; block-size: auto; }
.av-chart-bar { fill: var(--av-teal); transition: fill var(--av-fast) var(--av-ease); }
.av-chart-bar:hover { fill: var(--av-navy); }
.av-chart-track { fill: var(--av-mist); }
.av-chart-axis { stroke: var(--av-line); stroke-width: 1; }
.av-chart-label { fill: var(--av-charcoal); font-size: 12px; }
.av-chart-value { fill: var(--av-navy); font-size: 12px; font-weight: 600; }

.av-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--av-space) * 2.5); }
.av-donut { inline-size: 9rem; block-size: 9rem; flex: none; }
.av-donut-total { fill: var(--av-navy); font-weight: 700; }
.av-donut-caption { fill: var(--av-slate); }
.av-donut circle { transition: stroke-width var(--av-fast) var(--av-ease); }
.av-slice-0 { stroke: var(--av-teal); }
.av-slice-1 { stroke: var(--av-navy); }
.av-slice-2 { stroke: var(--av-light-teal); }
.av-slice-3 { stroke: var(--av-gold); }
.av-slice-4 { stroke: var(--av-slate); }
.av-slice-5 { stroke: #8FA9C2; }
.av-slice-6 { stroke: #2F6E9E; }
.av-slice-7 { stroke: var(--av-danger); }
.av-slice-empty { stroke: var(--av-mist); }
/* A legend as wide as its labels need, up to 18 rem, so each count sits beside its label, never at the far side of a
   wide card (round 3, point 65 c). */
.av-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--av-text-small); min-inline-size: 10rem; flex: 0 1 18rem; max-inline-size: 18rem; }
.av-legend li { display: flex; align-items: center; gap: var(--av-space); }
.av-legend a { display: flex; align-items: center; gap: var(--av-space); flex: 1; text-decoration: none; }
.av-legend a:hover { text-decoration: underline; }
.av-legend strong { margin-inline-start: auto; font-variant-numeric: tabular-nums; color: var(--av-navy); }
.av-swatch { inline-size: 10px; block-size: 10px; border-radius: 3px; flex: none; }
.av-swatch-0 { background: var(--av-teal); }
.av-swatch-1 { background: var(--av-navy); }
.av-swatch-2 { background: var(--av-light-teal); }
.av-swatch-3 { background: var(--av-gold); }
.av-swatch-4 { background: var(--av-slate); }
.av-swatch-5 { background: #8FA9C2; }
.av-swatch-6 { background: #2F6E9E; }
.av-swatch-7 { background: var(--av-danger); }

.av-figure { margin: 0 0 calc(var(--av-space) * 2); }
.av-figure figcaption { margin-block-end: var(--av-space); }

.av-chart-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--av-space) / 2) calc(var(--av-space) * 2);
    margin: var(--av-space) 0 0;
    padding: 0;
    font-size: var(--av-text-small);
}

.av-flow { inline-size: 100%; block-size: auto; max-block-size: 70vh; }
.av-flow-node { fill: var(--av-white); stroke: var(--av-navy); stroke-width: 1.5; }
.av-flow-node-end { fill: var(--av-teal-tint); stroke: var(--av-teal); }
.av-flow-node-decision { fill: var(--av-mist); stroke: var(--av-navy); }
.av-flow-node-system { fill: var(--av-mist); stroke: var(--av-slate); stroke-dasharray: 4 3; }
.av-flow-text { fill: var(--av-charcoal); font-size: 13px; }
.av-flow-edge { fill: none; stroke: var(--av-slate); stroke-width: 1.4; }
.av-flow-arrow { fill: var(--av-slate); }
.av-flow-edge-label { fill: var(--av-navy); font-size: 11px; }
.av-flow-num { fill: var(--av-navy); stroke: var(--av-white); stroke-width: 1.5; }
.av-flow-num-text { fill: var(--av-white); font-size: 11px; font-weight: 700; }
.av-flow-mark { fill: var(--av-cool-gray); font-size: 10px; }

/* Settings > Roles and permissions: the matrix by zone and section (version 1.2, DEC-247). */
/* G25: the draft bar, fixed under the page head while the matrix scrolls. */
.av-perm-draft { position: sticky; inset-block-start: calc(var(--av-topbar-height) + var(--av-space)); z-index: 5; align-items: center; flex-wrap: wrap; gap: calc(var(--av-space) * 0.75); margin-block: var(--av-space); padding: calc(var(--av-space) * 0.75) var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); box-shadow: var(--av-shadow-1); }
.av-perm-draft select { max-inline-size: 18rem; }
.av-perm-zone { margin-block: var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); }
.av-perm-zone > summary { display: flex; align-items: center; gap: calc(var(--av-space) * 0.75); padding: calc(var(--av-space) * 0.75) var(--av-space); cursor: pointer; font-weight: 600; }
.av-perm-zone-name { display: inline-flex; align-items: center; gap: 6px; }
.av-perm-bulk { display: flex; gap: calc(var(--av-space) * 0.5); padding: 0 var(--av-space) calc(var(--av-space) * 0.5); }
.av-perm-section { display: flex; align-items: center; gap: calc(var(--av-space) * 0.5); margin: calc(var(--av-space) * 0.75) var(--av-space) calc(var(--av-space) * 0.25); font-size: var(--av-text-body); }
.av-perm-table { margin: 0 0 calc(var(--av-space) * 0.5); }
/* A section's matrix scrolls sideways inside its zone rather than widen the page (its Scope choices keep their width). */
.av-perm-scroll { overflow-x: auto; }
.av-perm-table td:nth-child(5) { max-inline-size: 28rem; }
.av-perm-changed { background: var(--av-warning-tint); }
.av-badge-changed { background: var(--av-warning-tint); color: var(--av-warning); }
.av-perm-changes { margin: 0 0 var(--av-space); padding-inline-start: 1.25rem; }
.av-perm-changes li { margin-block: 2px; }
.av-flow-node-done { fill: var(--av-success-tint); stroke: var(--av-success); }
.av-flow-node-current { fill: var(--av-warning-tint); stroke: var(--av-gold); stroke-width: 2.5; }
.av-flow-node-next { fill: var(--av-mist); stroke: var(--av-cool-gray); }
.av-flow-node-returned, .av-flow-node-closed { fill: var(--av-danger-tint); stroke: var(--av-danger); }
.av-flow-scroll { overflow: auto; max-inline-size: 100%; }
.av-flow-scroll .av-flow { min-inline-size: 32rem; }
.av-flow-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: var(--av-space) 0; padding: 0; font-size: var(--av-text-small); }
.av-flow-legend li { display: inline-flex; align-items: center; gap: 6px; }
.av-flow-swatch { inline-size: 14px; block-size: 14px; border-radius: 4px; border: 1.5px solid; }
.av-flow-swatch-done { background: var(--av-success-tint); border-color: var(--av-success); }
.av-flow-swatch-current { background: var(--av-warning-tint); border-color: var(--av-gold); border-width: 2.5px; }
.av-flow-swatch-next { background: var(--av-mist); border-color: var(--av-cool-gray); }
.av-flow-swatch-closed { background: var(--av-danger-tint); border-color: var(--av-danger); }
.av-help-figure { margin: var(--av-space) 0; }
.av-prose img { display: block; max-inline-size: 100%; block-size: auto; margin-block: var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius); cursor: zoom-in; }
.av-figure-viewer { max-inline-size: 96vw; max-block-size: 96vh; padding: 0; border: 0; border-radius: var(--av-radius); background: var(--av-white); cursor: zoom-out; }
.av-figure-viewer::backdrop { background: rgb(16 48 79 / 70%); }
.av-figure-viewer img { display: block; max-inline-size: 94vw; max-block-size: 94vh; }
.av-callout { position: fixed; z-index: 1000; display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 2px solid var(--av-white); background: var(--av-gold); color: var(--av-navy-deep); font: 700 13px/1 var(--av-font); box-shadow: 0 2px 6px rgb(16 48 79 / 35%); pointer-events: none; }
.av-kb-folder { display: flex; align-items: center; gap: 6px; margin: calc(var(--av-space) * 2) 0 var(--av-space); font-size: var(--av-subsection); color: var(--av-navy); }
.av-kb-folder:first-child { margin-block-start: 0; }
.av-reading-actions { margin-block: 0 var(--av-space); }
.av-stepline-step { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-block-end: 6px; padding-inline: calc(var(--av-space) * 4 + 8px) var(--av-space); border: 0; border-inline-start: 3px solid var(--av-cool-gray); border-radius: var(--av-radius-small); background: var(--av-mist); }
.av-stepline-step::before { inset-inline-start: 6px; }
.av-stepline-step .av-badge { margin-inline-start: 0; }
.av-stepline-step .av-meta { flex-basis: 100%; margin-block-start: 0; }
.av-stepline-form { flex-basis: 100%; font-size: var(--av-text-small); }
.av-stepline-comment { flex-basis: 100%; font-size: var(--av-text-small); font-style: italic; }
.av-stepline-done { background: var(--av-success-tint); border-inline-start-color: var(--av-success); }
.av-stepline-done::before { background: var(--av-success); color: var(--av-white); }
.av-stepline-current { background: var(--av-warning-tint); border-inline-start-color: var(--av-gold); }
.av-stepline-current::before { background: var(--av-gold); color: var(--av-navy-deep); }
.av-stepline-returned, .av-stepline-closed { background: var(--av-danger-tint); border-inline-start-color: var(--av-danger); }
.av-stepline-returned::before, .av-stepline-closed::before { background: var(--av-danger); color: var(--av-white); }

/* ---- Dialogs and drawers (native <dialog>) ---- */

/* G12 (round 3, the layout map, Section 8): a dialog 32 rem, a drawer 40 rem, a wide drawer 64 rem; a drawer is the
   window's full width below 640 px, and a viewer nearly the whole window. */
.av-dialog {
    inline-size: min(32rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 4rem);
    padding: 0;
    border: 0;
    border-radius: calc(var(--av-radius) * 1.5);
    background: var(--av-white);
    color: var(--av-charcoal);
    box-shadow: var(--av-shadow-3);
}

.av-dialog[open] { display: flex; flex-direction: column; animation: av-dialog-in var(--av-medium) var(--av-ease); }
.av-dialog::backdrop { background: rgb(16 48 79 / 45%); backdrop-filter: blur(2px); animation: av-fade-in var(--av-medium) var(--av-ease); }

.av-dialog-head {
    display: flex;
    align-items: center;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 2) calc(var(--av-space) * 2.5);
    border-block-end: 1px solid var(--av-line);
    flex: none;
}

.av-dialog-head h2 { flex: 1; margin: 0; display: flex; align-items: center; gap: var(--av-space); }
.av-dialog-head .av-button-icon[aria-pressed="true"] { background: var(--av-navy-soft); }

/* A form's own help or AV Co-pilot, beside the open form from the start side (round 2, R2-9, R2-11,
   R2-14): part of the drawer, so it stays usable while the drawer holds the focus. */
.av-dialog-aside { box-shadow: var(--av-shadow-3); }
.av-dialog-head h2 .av-icon { color: var(--av-teal); }
.av-dialog-danger .av-dialog-head h2 .av-icon { color: var(--av-danger); }
.av-dialog-body { flex: 1; overflow-y: auto; padding: calc(var(--av-space) * 2.5); }
.av-dialog-body > p:last-child { margin: 0; }

.av-dialog-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--av-space);
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2.5);
    border-block-start: 1px solid var(--av-line);
    background: #FAFBFC;
    border-end-start-radius: inherit;
    border-end-end-radius: inherit;
    flex: none;
}

.av-drawer {
    inline-size: min(40rem, 100vw);
    max-inline-size: 100vw;
    block-size: 100vh;
    max-block-size: 100vh;
    margin: 0;
    margin-inline-start: auto;
    inset-inline-start: auto;
    border-radius: 0;
}

.av-drawer[open] { animation: av-slide-in-end var(--av-medium) var(--av-ease); }
[dir="rtl"] .av-drawer[open] { animation-name: av-slide-in-start; }
.av-drawer .av-dialog-foot { border-radius: 0; }
.av-drawer-wide { inline-size: min(64rem, 100vw); }

/* A document's preview: nearly the whole window, the document filling the body (a CV; staging review of 1.1). */
.av-dialog-viewer { inline-size: min(72rem, calc(100vw - 2rem)); block-size: calc(100vh - 4rem); }
.av-dialog-viewer .av-dialog-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.av-dialog-viewer .av-dialog-body > .av-alert { margin: calc(var(--av-space) * 2); }
.av-files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); }
.av-files li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space) calc(var(--av-space) * 1.5); padding: var(--av-space) calc(var(--av-space) * 1.5); border-block-end: 1px solid var(--av-line); }
.av-files li:last-child { border-block-end: 0; }
.av-file-name { flex: 1 1 14rem; min-inline-size: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.av-file-name strong { color: var(--av-navy); font-weight: 600; }
.av-file-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.av-preview-image { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; margin: auto; }
.av-preview-frame { flex: 1; inline-size: 100%; min-block-size: 0; border: 0; background: var(--av-mist); }
/* An email template's preview in the Templates drawer (round 3, item 58): the email in a sandboxed frame of its own. */
.av-email-preview { display: block; inline-size: 100%; block-size: 34rem; margin-block-start: var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: #F3F5F7; }
.av-dialog-body .av-form-bar { inset-block-end: calc(var(--av-space) * -2.5); margin: calc(var(--av-space) * 2.5) calc(var(--av-space) * -2.5) calc(var(--av-space) * -2.5); border-radius: 0; }
.av-dialog .av-form-grid { gap: 0 calc(var(--av-space) * 2); }

/* ---- Reconnection dialog and errors ---- */

#blazor-error-ui {
    display: none;
    position: fixed;
    inset-block-end: 3rem;
    inset-inline: 50% auto;
    translate: -50% 0;
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2.5);
    border: 1px solid #EED9A6;
    border-radius: var(--av-radius);
    background: var(--av-warning-tint);
    color: var(--av-charcoal);
    box-shadow: var(--av-shadow-3);
    z-index: 70;
}

[dir="rtl"] #blazor-error-ui { translate: 50% 0; }

.av-reconnect {
    inline-size: min(24rem, calc(100vw - 2rem));
    padding: calc(var(--av-space) * 3);
    border: 0;
    border-radius: calc(var(--av-radius) * 1.5);
    background: var(--av-white);
    box-shadow: var(--av-shadow-3);
    text-align: center;
}

.av-reconnect[open] { animation: av-dialog-in var(--av-medium) var(--av-ease); }
.av-reconnect::backdrop { background: rgb(16 48 79 / 45%); backdrop-filter: blur(2px); }
.av-reconnect p { margin-block: var(--av-space); }

.av-reconnect-spinner {
    display: block;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    margin: 0 auto calc(var(--av-space) * 1.5);
    border: 3px solid var(--av-teal-tint);
    border-block-start-color: var(--av-teal);
    border-radius: 50%;
    animation: av-spin 900ms linear infinite;
}

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible {
    display: block;
}

#components-reconnect-modal button.components-reconnect-failed-visible,
#components-reconnect-modal button.components-pause-visible { margin-inline: auto; }

/* ---- Motion ---- */

@keyframes av-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes av-drop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes av-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes av-slide-in-end { from { transform: translateX(100%); } to { transform: none; } }
@keyframes av-slide-in-start { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes av-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes av-toast-out { to { opacity: 0; transform: translateY(8px); pointer-events: none; } }
@keyframes av-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes av-pulse { 0% { box-shadow: 0 0 0 0 rgb(164 38 44 / 45%); } 100% { box-shadow: 0 0 0 8px rgb(164 38 44 / 0%); } }
@keyframes av-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }

    .av-toast { animation: none; }
}

/* ---- Narrow screens: the menu becomes a drawer (DEC-066) ---- */

@media (max-width: 64rem) {
    .av-shell, body.av-rail .av-shell { grid-template-columns: minmax(0, 1fr); }

    .av-sidebar,
    body.av-rail .av-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: min(18rem, 86vw);
        block-size: 100vh;
        z-index: 50;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform var(--av-medium) var(--av-ease), visibility 0s linear var(--av-medium);
        box-shadow: var(--av-shadow-3);
    }

    [dir="rtl"] .av-sidebar { transform: translateX(100%); }

    .av-shell.av-menu-open .av-sidebar {
        visibility: visible;
        transform: none;
        transition: transform var(--av-medium) var(--av-ease), visibility 0s;
    }

    body.av-rail .av-logo-full,
    body.av-rail .av-menu-zone > details,
    body.av-rail .av-menu-zone > a .av-menu-label,
    body.av-rail .av-sidebar-version { display: revert; }
    body.av-rail .av-logo-full { display: block; }
    body.av-rail .av-logo-mark,
    body.av-rail .av-menu-zone > .av-menu-rail-link { display: none; }
    body.av-rail .av-sidebar-brand { justify-content: flex-start; padding-inline: calc(var(--av-space) * 2.25); }
    body.av-rail .av-menu-zone > a { justify-content: flex-start; }
    .av-rail-toggle { display: none; }

    .av-shell.av-menu-open .av-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        border: 0;
        background: rgb(16 48 79 / 45%);
        animation: av-fade-in var(--av-medium) var(--av-ease);
    }

    .av-menu-toggle { display: inline-flex; }
    .av-topbar-brand { display: block; }
    .av-topbar { padding-inline: var(--av-space); gap: 4px; }
    .av-topbar-label, .av-user-short { display: none; }
    .av-main { padding: calc(var(--av-space) * 2) calc(var(--av-space) * 2) calc(var(--av-space) * 5); }
    .av-record-layout, .av-home-grid { grid-template-columns: minmax(0, 1fr); }
    .av-panel-sticky { position: static; }
}

@media (max-width: 40rem) {
    .av-search { display: none; }
    .av-search-link { display: inline-flex !important; }
    .av-pop-narrow { display: list-item; list-style: none; }
    .av-topbar-wide { display: none !important; }
    .av-topbar-divider { display: none; }
    .av-form { padding: calc(var(--av-space) * 2); }
    .av-form-bar { margin-inline: calc(var(--av-space) * -2); padding-inline: calc(var(--av-space) * 2); }
    .av-form-grid, .av-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
    .av-rule-row { grid-template-columns: minmax(0, 1fr); }
    .av-record-header { grid-template-columns: minmax(0, 1fr); padding: calc(var(--av-space) * 2); }
    .av-record-header .av-actions { justify-content: flex-start; }
    .av-record-main { padding: calc(var(--av-space) * 2); }
    .av-footer { padding-inline: calc(var(--av-space) * 2); }
    .av-plain-main { padding: calc(var(--av-space) * 2.5); margin-block-start: calc(var(--av-space) * 2); }
    .av-header { padding-inline: calc(var(--av-space) * 2); }
    .av-footer-links { display: none; }
    .av-toasts { inset-inline: var(--av-space); inline-size: auto; }
    .av-page-header { align-items: flex-start; }
    .av-row, .av-task, .av-kb-row, .av-notice-item, .av-search-hit { grid-template-columns: auto minmax(0, 1fr); }
    .av-notice-item .av-row-side, .av-search-hit > :last-child { grid-column: 2; }
    .av-kb-row .av-row-side { grid-column: 2; align-items: flex-start; }
    .av-task .av-row-side { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; text-align: start; }
    .av-row-side { grid-column: 2; align-items: flex-start; text-align: start; flex-direction: row; flex-wrap: wrap; }
    .av-toolbar-end { margin-inline-start: 0; }
    .av-pager .av-pager-size { margin-inline-start: 0; }

    /* Tables become stacked cards: each cell takes its column's name */
    .av-table-wrap.av-table-cards { border: 0; background: none; box-shadow: none; overflow: visible; max-block-size: none; min-block-size: 0; }
    .av-table-cards .av-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .av-table-cards .av-table,
    .av-table-cards .av-table tbody,
    .av-table-cards .av-table tfoot,
    .av-table-cards .av-table tr,
    .av-table-cards .av-table td { display: block; inline-size: 100%; }
    .av-table-cards .av-table tbody tr {
        margin-block-end: var(--av-space);
        padding: var(--av-space) 0;
        border: 1px solid var(--av-line);
        border-radius: var(--av-radius);
        background: var(--av-white);
        box-shadow: var(--av-shadow-1);
    }
    .av-table-cards .av-table td {
        display: grid;
        grid-template-columns: 8.5rem minmax(0, 1fr);
        gap: var(--av-space);
        padding: 4px calc(var(--av-space) * 1.5);
        border: 0;
        text-align: start !important;
        overflow-wrap: anywhere;
        white-space: normal;
    }
    .av-table-cards .av-table td::before { content: attr(data-label); color: var(--av-slate); font-size: var(--av-text-label); font-weight: 600; }
    .av-table-cards .av-table td:not([data-label])::before { content: none; }
    .av-table-cards .av-table td:not([data-label]) { display: block; }
    .av-table-cards .av-table tfoot tr { padding: var(--av-space) 0; border-radius: var(--av-radius); background: var(--av-white); border: 1px solid var(--av-line); }
    .av-table-cards .av-group-row th { display: block; border-radius: var(--av-radius-small); margin-block-end: var(--av-space); }
    .av-table-cards .av-row-actions { text-align: start !important; }
}

/* ==== UI guide, Draft 1 (docs/ui/AV-UI-Guide.md; staging review of 1.2, round 3, P1) ==== */

/* G9: every one-line control is 36 px, whatever its type (round 4, item 11). */
input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), select { block-size: 2.25rem; }

/* G9 (round 4, item 2): a box with its suffix, its stepper or its calendar button is one control. The border, the
   corners, the background and the hover, focus and error colours are the whole control's, drawn on its wrapper; the
   parts inside draw no border or corners of their own, so the box and its button never read as two boxes. */
.av-num-box, .av-date-input {
    block-size: 2.25rem;
    border: 1px solid var(--av-field-border);
    border-radius: var(--av-radius-small);
    background: var(--av-white);
    overflow: hidden;
    transition: border-color var(--av-fast) var(--av-ease), box-shadow var(--av-fast) var(--av-ease);
}
.av-num-box:hover, .av-date-input:hover { border-color: var(--av-charcoal); }
.av-num-box:focus-within, .av-date-input:focus-within { border-color: var(--av-teal); box-shadow: 0 0 0 3px rgb(30 138 138 / 18%); }
.av-num-box:has([aria-invalid="true"]), .av-date-input:has([aria-invalid="true"]) { border-color: var(--av-danger); }
.av-num-box:has(input:disabled) { background: var(--av-mist); }
.av-num-box > input, .av-date-input > input { block-size: auto; min-block-size: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.av-num-box > input:focus, .av-date-input > input:focus { box-shadow: none; }

/* G9: a number box sized to its value: an amount 10 rem, a count 6 rem with its stepper; digits to the end. Its own class:
   av-num is a table's number cell, which a display of its own takes out of its row. */
.av-num-box { display: inline-flex; max-inline-size: 100%; }
.av-num-amount { inline-size: 10rem; }
.av-num-count { inline-size: 6rem; }
.av-num-wide { inline-size: 100%; }
.av-num-box input { text-align: end; font-variant-numeric: tabular-nums; }
.av-stepper { display: grid; grid-template-rows: 1fr 1fr; flex: none; border: 0; }
.av-stepper button { display: grid; place-items: center; inline-size: 1.5rem; padding: 0; border: 0; background: var(--av-mist); color: var(--av-navy); cursor: pointer; }
.av-stepper button + button { border-block-start: 1px solid var(--av-line); }
.av-stepper button:hover:not(:disabled) { background: var(--av-navy-soft); }
.av-stepper button:disabled { color: var(--av-cool-gray); cursor: default; }
.av-stepper .av-icon { width: 0.75rem; height: 0.75rem; }

/* G9: a range in one row. */
.av-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--av-space); }
.av-range-to { font-size: var(--av-text-small); color: var(--av-slate); }

/* G9, items 5 and 6: the date box and its calendar button side by side, one control (its border above); the calendar
   in the top layer, so the wrapper's corners never clip it. */
.av-date-input { display: inline-flex; align-items: stretch; inline-size: 12rem; max-inline-size: 100%; }
.av-date-input .av-date-typed { flex: 1 1 auto; min-inline-size: 0; padding-inline-end: calc(var(--av-space) * 1.25); font-variant-numeric: tabular-nums; }
.av-date-input .av-date-open { display: grid; place-items: center; flex: none; inline-size: 2.375rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--av-navy); cursor: pointer; }
.av-date-input .av-date-open:hover { background: var(--av-navy-soft); }
.av-date-input .av-date-open:focus-visible { outline: 2px solid var(--av-teal); outline-offset: -4px; border-radius: 4px; }
.av-calendar[popover] { position: fixed; inset: auto; margin: 0; inline-size: 18.5rem; max-inline-size: calc(100vw - 1rem); padding: var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); box-shadow: 0 16px 40px rgb(22 58 95 / 18%); color: var(--av-charcoal); }

/* G9: the line list: one row per item, its number, the box, the row's buttons; Add a line aligned with the lines. */
.av-lines { display: grid; gap: 6px; }
.av-line { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.av-line-number { text-align: center; font-size: var(--av-text-label); color: var(--av-slate); font-variant-numeric: tabular-nums; }
.av-line-ops { display: flex; gap: 2px; }
.av-line-add { grid-template-columns: 1.5rem auto; justify-content: start; }

/* G9, two languages: a question's choices, each row the choice in English and Arabic and its tick (round 3, item 26). */
.av-choice { grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) auto; }
.av-choice-ticked { grid-template-columns: 1.5rem minmax(0, 1fr) minmax(0, 1fr) 3.5rem auto; }
.av-choice-head { display: grid; gap: 6px; font-size: var(--av-text-label); color: var(--av-slate); }
.av-choice-tick { justify-content: center; }
@media (max-width: 640px) {
    .av-choice, .av-choice-ticked { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
    .av-choice > input[dir="rtl"] { grid-column: 2; }
    .av-choice-head { display: none; }
}

/* A screening question as the candidate sees it (round 3, items 25 to 27, 36): its words, its chips, its answers with the ideal ones marked. */
.av-question { display: grid; gap: calc(var(--av-space) * 0.75); padding: var(--av-space) calc(var(--av-space) * 1.25); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); }
.av-question-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--av-space); }
.av-question-text { flex: 1 1 16rem; margin: 0; font-weight: 600; color: var(--av-charcoal); overflow-wrap: anywhere; }
.av-question-other { margin: 0; font-size: var(--av-text-small); color: var(--av-slate); overflow-wrap: anywhere; }
.av-question-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av-question-answers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.av-question-answers li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border: 1px solid var(--av-line); border-radius: var(--av-radius-pill); font-size: var(--av-text-small); }
.av-question-answers li.av-question-ideal { border-color: var(--av-success); background: var(--av-success-tint); color: var(--av-success); font-weight: 600; }
.av-question-ideal-line { margin: 0; font-size: var(--av-text-small); color: var(--av-slate); }
.av-question-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-inline-start: auto; }
.av-questions { display: grid; gap: var(--av-space); margin: 0; padding: 0; list-style: none; }
.av-card-head-wrap { flex-wrap: wrap; }
.av-card-head-wrap h3 { flex: 1 0 auto; }
.av-card-head-wrap .av-card-actions { flex-wrap: wrap; }
.av-question-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--av-space); align-items: start; }
.av-question-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--av-space); margin-block-end: var(--av-space); }
.av-icon-button { display: inline-grid; place-items: center; inline-size: 1.875rem; block-size: 1.875rem; padding: 0; border: 1px solid var(--av-line); border-radius: var(--av-radius-small); background: var(--av-white); color: var(--av-slate); cursor: pointer; text-decoration: none; }
.av-icon-button:hover:not(:disabled) { color: var(--av-navy); border-color: var(--av-navy); }
.av-icon-button:disabled { color: var(--av-cool-gray); cursor: default; }
.av-icon-button-danger:hover:not(:disabled) { color: var(--av-danger); border-color: var(--av-danger); }
.av-icon-button .av-icon { width: 1rem; height: 1rem; }

/* G19: the file picker: a drop area with its button, never the bare "Choose File"; the files chosen, each removable. */
.av-drop { position: relative; border: 1.5px dashed var(--av-slate); border-radius: var(--av-radius); background: var(--av-mist); }
.av-drop-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); padding: calc(var(--av-space) * 1.5); cursor: pointer; }
.av-drop-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.av-drop:focus-within { outline: 2px solid var(--av-teal); outline-offset: 2px; }
.av-drop:has(.av-drop-input:disabled) { opacity: 0.6; }
/* A step's governance marks in words, with a shield; the codes in the title (round 4, F10). */
.av-governance { display: flex; align-items: flex-start; gap: 6px; margin-block: 0 var(--av-space); }
.av-governance .av-icon { flex: none; margin-block-start: 2px; color: var(--av-teal); }

/* G22 (round 4, item 16): a file being read: the drop area busy, "Reading <name>…" with a turning mark under its button. */
.av-drop-status { display: flex; align-items: center; gap: var(--av-space); margin: 0; padding-inline: calc(var(--av-space) * 1.5); color: var(--av-teal-dark); font-size: var(--av-text-small); font-weight: 600; overflow-wrap: anywhere; }
.av-drop-status:not(:empty) { padding-block-end: calc(var(--av-space) * 1.25); }
.av-drop-reading { border-color: var(--av-teal); cursor: progress; }

/* G22 (round 4, item 16; IMP-111): an action still running. The cover takes the clicks at once and shows "Working…"
   only after 0.6 s, over the open drawer's or dialog's body and footer (its head stays above), or over the page when
   no drawer or dialog is open. Idle, it is an empty status region that takes no room. */
.av-spinner { flex: none; display: inline-block; inline-size: 1.25rem; block-size: 1.25rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: av-spin 0.8s linear infinite; }
.av-drop-status .av-spinner { inline-size: 1rem; block-size: 1rem; }
.av-busy-cover { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.av-busy-cover.av-busy-on {
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--av-space);
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
    background: rgb(255 255 255 / 72%);
    color: var(--av-navy);
    font-weight: 600;
    cursor: progress;
    animation: av-busy-in var(--av-medium) var(--av-ease) 600ms both;
}
.av-busy-page.av-busy-on { position: fixed; z-index: 90; }
body:has(dialog[open]) .av-busy-page { display: none; }
.av-dialog-head { position: relative; z-index: 4; background: var(--av-white); border-start-start-radius: inherit; border-start-end-radius: inherit; }
/* The button that started the action keeps its busy mark beneath the cover (marked by av-frame.js on the live page). */
dialog:has(> .av-busy-on) [data-av-pressed]::after,
.av-shell:has(> .av-busy-page.av-busy-on) [data-av-pressed]::after { content: ""; inline-size: 0.85em; block-size: 0.85em; margin-inline-start: 0.4em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: av-spin 0.8s linear infinite; }
@keyframes av-busy-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .av-spinner { animation: none; border-inline-end-color: currentColor; opacity: 0.6; }
    .av-busy-cover.av-busy-on { animation-duration: 1ms; }
}
.av-picked { list-style: none; margin: var(--av-space) 0 0; padding: 0; display: grid; gap: 6px; }
.av-picked-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); padding: 6px var(--av-space); border: 1px solid var(--av-line); border-radius: var(--av-radius-small); background: var(--av-white); }
.av-picked-name { display: grid; flex: 1 1 10rem; min-inline-size: 0; overflow-wrap: anywhere; }
.av-picked-title { flex: 1 1 12rem; }

/* G6: label and value pairs, each pair one cell, label above value; two columns, four in a head card's facts. */
.av-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--av-space) * 1.25) calc(var(--av-space) * 2.5); margin: 0; }
.av-pairs-4 { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.av-pairs-1 { grid-template-columns: minmax(0, 1fr); }
.av-pair { min-inline-size: 0; }
.av-pair-wide { grid-column: 1 / -1; }
.av-pair dt { font-size: var(--av-text-label); color: var(--av-slate); font-weight: 600; }
.av-pair dd { margin: 2px 0 0; color: var(--av-charcoal); overflow-wrap: anywhere; }
.av-pair dd ul { margin: 0; padding-inline-start: 1.1rem; }
.av-not-given { color: var(--av-slate); font-style: normal; font-weight: 400; }
/* The pages that still wrap each pair in its own div take the same grid (items 1, 32, 48), until each moves to AvDetails. */
dl.av-details:has(> div) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--av-space) * 1.25) calc(var(--av-space) * 2.5); }
dl.av-details:has(> div) > div { min-inline-size: 0; }
dl.av-details:has(> div) > div > dd { margin-block-start: 2px; }
.av-details-card .av-card-head { justify-content: space-between; }
.av-card-actions { display: flex; gap: 6px; margin-inline-start: auto; }

/* G16: tiles: four a row, five on wide screens; an amount shrinks to fit and never wraps. */
.av-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 100rem) { .av-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.av-tile { container-type: inline-size; }
.av-tile .av-stat { display: flex; align-items: baseline; gap: 3px; min-inline-size: 0; white-space: nowrap; overflow: hidden; font-size: clamp(0.875rem, 10cqi, 1.625rem); }
.av-stat-value { overflow: hidden; text-overflow: ellipsis; }
.av-stat-unit { flex: none; font-size: var(--av-text-label); font-weight: 600; color: var(--av-slate); }
/* A narrow tile (four in a record's main column) puts its icon above, so the number has the tile's width. */
@container (max-width: 13rem) {
    .av-tile > .av-tile-icon { grid-row: auto; grid-column: 1 / -1; inline-size: 2rem; block-size: 2rem; }
    .av-tile > .av-tile-icon .av-icon { width: 1.125rem; height: 1.125rem; }
    .av-tile > .av-stat, .av-tile > .av-stat-label { grid-column: 1 / -1; }
}

/* G7: counts are pills of one line's height, by the label's first line. */
.av-count { position: static; flex: none; align-self: flex-start; min-inline-size: 1.375rem; padding: 0 6px; border-radius: var(--av-radius-pill); background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-label); font-weight: 600; line-height: 1.125rem; text-align: center; white-space: nowrap; }

/* G7: the side sub-navigation; below 1024 px a "Sections" choice. */
.av-subnav { position: sticky; inset-block-start: calc(var(--av-topbar-height) + var(--av-space) * 2); align-self: start; padding: 6px; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); box-shadow: var(--av-shadow-1); }
.av-subnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.av-subnav-group { padding: 8px 8px 2px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--av-slate); }
.av-subnav a { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 6px 8px; border-radius: var(--av-radius-small); color: var(--av-charcoal); font-size: var(--av-text-small); text-decoration: none; }
.av-subnav a:hover { background: var(--av-mist); }
.av-subnav a[aria-current="page"] { background: var(--av-teal-tint); color: var(--av-navy); font-weight: 600; box-shadow: inset 3px 0 0 var(--av-teal); }
[dir="rtl"] .av-subnav a[aria-current="page"] { box-shadow: inset -3px 0 0 var(--av-teal); }
.av-subnav-choice { display: none; }
@media (max-width: 64rem) {
    .av-subnav { position: static; padding: var(--av-space); }
    .av-subnav ul { display: none; }
    .av-subnav-choice { display: grid; gap: 4px; font-size: var(--av-text-small); font-weight: 600; color: var(--av-navy); }
}

/* G7: the zone selector. */
.av-zones { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: calc(var(--av-space) * 2); }
.av-zone-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--av-line); border-radius: var(--av-radius-pill); background: var(--av-white); color: var(--av-charcoal); font-size: var(--av-text-small); text-decoration: none; }
.av-zone-pill:hover { border-color: var(--av-navy); }
button.av-zone-pill { font: inherit; font-size: var(--av-text-small); cursor: pointer; }
.av-zone-pill[aria-current="true"], .av-zone-pill[aria-pressed="true"] { background: var(--av-navy); border-color: var(--av-navy); color: var(--av-white); }
.av-zone-pill[aria-current="true"] .av-count, .av-zone-pill[aria-pressed="true"] .av-count { background: rgb(255 255 255 / 18%); color: var(--av-white); }

/* G8: the panes, as tall as the tallest. */
.av-panes { display: grid; gap: calc(var(--av-space) * 1.5); align-items: stretch; margin-block-end: calc(var(--av-space) * 2); }
.av-panes-listanddetails { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.av-panes-subnavanddetails { grid-template-columns: 13rem minmax(0, 1fr); }
.av-panes-three { grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1.15fr); }
.av-pane { min-inline-size: 0; }
.av-pane-nav .av-subnav { block-size: 100%; }
.av-pane-list, .av-pane-details { display: flex; flex-direction: column; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); box-shadow: var(--av-shadow-1); padding: calc(var(--av-space) * 1.5); }
.av-pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--av-space); margin-block-end: var(--av-space); }
.av-pane-title { font-weight: 600; color: var(--av-navy); }
.av-pane-move { display: flex; gap: 4px; margin-inline-start: auto; }
.av-pane-close { display: none; }
@media (max-width: 79.99rem) { .av-panes-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .av-panes-three > .av-pane-nav { grid-column: 1 / -1; } }
@media (max-width: 64rem) { .av-panes-listanddetails, .av-panes-subnavanddetails { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
    .av-panes-three, .av-panes-listanddetails { grid-template-columns: minmax(0, 1fr); }
    .av-panes .av-pane-details { display: none; }
    .av-panes .av-pane-details.av-pane-open { display: flex; position: fixed; inset: 0; z-index: 70; overflow: auto; border-radius: 0; }
    .av-pane-close { display: inline-flex; }
}

/* G5, G10: the record page: head card, tab row with the column's button, two columns; the column folds below
   1280 px, on a full-width tab, or by the user's choice, and opens as a drawer. */
.av-rec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2); padding: calc(var(--av-space) * 2.5) calc(var(--av-space) * 3); border: 1px solid var(--av-line); border-radius: var(--av-radius); background: var(--av-white); box-shadow: var(--av-shadow-1); margin-block-end: calc(var(--av-space) * 2); }
.av-rec-head-main { display: flex; gap: calc(var(--av-space) * 1.5); align-items: center; min-inline-size: 0; }
.av-rec-head-title { min-inline-size: 0; }
.av-rec-head-title h1 { margin-block-end: var(--av-space); }
.av-rec-picture { flex: none; }
.av-rec-actions { margin: 0; align-self: start; justify-content: flex-end; flex-wrap: wrap; }
.av-rec-tools { display: inline-flex; gap: 4px; padding-inline-start: 6px; border-inline-start: 1px solid var(--av-line); }
.av-rec-facts { grid-column: 1 / -1; padding-block-start: calc(var(--av-space) * 1.5); border-block-start: 1px solid var(--av-line); }
.av-rec-facts .av-pair dd { font-weight: 600; color: var(--av-navy); }
.av-more { position: relative; }
.av-more > summary { list-style: none; }
.av-more > summary::-webkit-details-marker { display: none; }
.av-more-panel { display: grid; gap: 4px; padding: var(--av-space); min-inline-size: 12rem; }
.av-more-panel .av-button { justify-content: flex-start; }
.av-rec-bar { display: flex; align-items: flex-end; gap: var(--av-space); border-block-end: 1px solid var(--av-line); margin-block-end: calc(var(--av-space) * 2); }
.av-rec-bar .av-rec-tabs { flex: 1 1 auto; border: 0; margin: 0; }
.av-rec-bar:not(:has(.av-rec-tabs)) { border: 0; justify-content: flex-end; margin-block-end: var(--av-space); }
.av-rec-side-buttons { display: inline-flex; margin-inline-start: auto; margin-block-end: 6px; }
.av-rec { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: calc(var(--av-space) * 2.5); align-items: start; }
.av-rec-single { grid-template-columns: minmax(0, 1fr); }
.av-rec-main { display: grid; gap: calc(var(--av-space) * 2); min-inline-size: 0; align-content: start; }
.av-rec-main > .av-card, .av-rec-main > section { margin: 0; }
/* A grid item takes its content's width unless told otherwise: a wide table scrolls inside its own box, never the page (G15, G24). */
.av-rec-main > *, .av-rec-side > *, .av-pane > * { min-inline-size: 0; }
.av-rec-side { display: flex; flex-direction: column; gap: calc(var(--av-space) * 1.5); min-inline-size: 0; }
.av-rec-side-head { display: none; }
.av-rec-scrim { display: none; }
.av-side-title { display: flex; align-items: center; gap: var(--av-space); margin: 0; font-size: var(--av-subsection); color: var(--av-navy); }
.av-side-title .av-icon { color: var(--av-teal); }
.av-side-card { padding: calc(var(--av-space) * 1.75); }
.av-side-card .av-card-head { margin-block-end: var(--av-space); }
.av-next-step { background: var(--av-teal-tint); border-color: transparent; font-size: var(--av-text-small); }
.av-next-step p { margin: 4px 0 0; }
.av-next-step-name { font-weight: 700; color: var(--av-navy); }
.av-next-step-late { background: var(--av-danger-tint); }
.av-next-step-overdue { color: var(--av-danger); font-weight: 600; }
.av-rec-open { display: none; }
/* Folded: below 1280 px, on a full-width tab, or by the user's choice (the body's class, from its cookie). */
@media (max-width: 79.99rem) { .av-rec { grid-template-columns: minmax(0, 1fr); } .av-rec > .av-rec-side { display: none; } .av-rec-open { display: inline-flex; } .av-rec-fold, .av-rec-unfold { display: none; } }
.av-rec-page[data-full="true"] .av-rec, .av-side-folded .av-rec { grid-template-columns: minmax(0, 1fr); }
.av-rec-page[data-full="true"] .av-rec > .av-rec-side, .av-side-folded .av-rec > .av-rec-side { display: none; }
.av-rec-page[data-full="true"] .av-rec-open, .av-side-folded .av-rec-open { display: inline-flex; }
.av-rec-page[data-full="true"] .av-rec-fold, .av-side-folded .av-rec-fold { display: none; }
.av-rec-page[data-full="true"] .av-rec-unfold { display: none; }
body:not(.av-side-folded) .av-rec-unfold { display: none; }
/* The folded column opens as a drawer from the end side. */
.av-rec > .av-rec-side[data-open="true"] { display: flex; position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 80; inline-size: min(26rem, 100vw); overflow-y: auto; padding: calc(var(--av-space) * 2); background: var(--av-mist); box-shadow: 0 16px 40px rgb(22 58 95 / 18%); }
/* Its head is a drawer's head, one row (round 4, item 3): the title (its icon, then its words, cut short rather than
   wrapped), Keep it beside the page as an icon, Close; fixed at the drawer's top while its parts scroll. */
.av-rec-side[data-open="true"] .av-rec-side-head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--av-space);
    margin: calc(var(--av-space) * -2) calc(var(--av-space) * -2) 0;
    padding: calc(var(--av-space) * 1.5) calc(var(--av-space) * 2);
    border-block-end: 1px solid var(--av-line);
    background: var(--av-white);
    color: var(--av-navy);
}
.av-rec-side-title { display: flex; flex: 1; align-items: center; gap: var(--av-space); min-inline-size: 0; margin: 0; font-size: var(--av-subsection); white-space: nowrap; }
.av-rec-side-title > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.av-rec-side-title .av-icon { flex: none; color: var(--av-teal); }
.av-rec-side-head .av-button-icon { flex: none; }
.av-rec-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 79; background: rgb(16 48 79 / 45%); }

/* G17, item 12: a step done again shows once with its earlier passes; its number in a circle. */
.av-stepline-updates { margin-block-start: 4px; font-size: var(--av-text-label); }
.av-stepline-updates summary { cursor: pointer; color: var(--av-teal-dark); }
.av-stepline-updates ul { margin: 4px 0 0; padding-inline-start: 1rem; }

/* G26: a child record in a drawer: its details, then the right-hand column's parts stacked, in their order. */
.av-child-side { display: grid; gap: calc(var(--av-space) * 1.5); margin-block-start: calc(var(--av-space) * 2); }
.av-child-side > * { min-inline-size: 0; }

/* Settings > Workflows (round 3, P3.2): the chosen workflow's steps under its flowchart, in the details pane. */
.av-workflow-steps { margin-block-start: calc(var(--av-space) * 2); }
.av-workflow-steps h3 { margin: 0 0 var(--av-space); font-size: var(--av-subsection); color: var(--av-navy); }

/* Why a record's number waits (round 3, P5.6). */
.av-number-hint { margin: 4px 0 0; font-size: var(--av-text-label); color: var(--av-slate); }

/* A row of links (Settings > Templates: the current template and its placeholders). */
.av-link-row { display: flex; flex-wrap: wrap; gap: var(--av-space) calc(var(--av-space) * 2); margin: 0 0 var(--av-space); }

/* G27: a drawing's zoom. */
.av-zoom { display: grid; gap: 4px; }
.av-zoom-bar { display: flex; gap: 2px; justify-content: flex-end; }
.av-zoom-scroll { overflow: auto; max-block-size: 70vh; }
.av-zoom-scroll svg { inline-size: 100%; block-size: auto; }

/* P1.5, item 59: the menu's hover never looks like the current page. */
.av-menu-page a:hover:not([aria-current="page"]), .av-menu-zone > a:hover:not([aria-current="page"]) { background: rgb(255 255 255 / 6%); color: var(--av-white); box-shadow: none; }

@media (max-width: 64rem) { .av-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .av-pairs { grid-template-columns: minmax(0, 1fr); } .av-pairs-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .av-rec-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .av-tiles { grid-template-columns: minmax(0, 1fr); } .av-pairs-4 { grid-template-columns: minmax(0, 1fr); } .av-num-amount { inline-size: 100%; } }

@media print {
    .av-sidebar, .av-topbar, .av-help, .av-actions, .av-filters, .av-toolbar, .av-chips, .av-skip, .av-footer, .av-toasts, .av-breadcrumb { display: none !important; }
    .av-shell { display: block; }
    .av-main { max-inline-size: none; padding: 0; }
    :root { background: var(--av-white); }
}
.av-block { display: block; }

/* Version 1.2, the expenses pages: the row a notice points at, a line taken out of a claim, a line with its reason. */
.av-row-current > td { background: var(--av-navy-soft); }
.av-row-muted > td { color: var(--av-slate); text-decoration: line-through; }
.av-row-muted > td .av-meta { text-decoration: none; }
.av-check-row { display: flex; flex-wrap: wrap; gap: var(--av-space); align-items: center; }
.av-check-row input[type="text"] { flex: 1 1 14rem; }
.av-form-inline { margin-block-end: var(--av-space); max-inline-size: 28rem; }
/* Version 1.2 (T1): a free text kept with its line breaks (duties, qualifications, notes). */
.av-prewrap { white-space: pre-wrap; }

/* Version 1.2 (T1): the vacancy's pipeline by step and the candidate panel beside it (design 1.2 Section 5.2). */
.av-pipeline-step { margin-block: calc(var(--av-space) * 2) var(--av-space); font-size: var(--av-subsection); }
.av-pipeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.av-pipeline-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); padding: var(--av-space) calc(var(--av-space) * 1.25); border: 1px solid var(--av-line); border-radius: var(--av-radius-small); background: #FAFBFC; }
.av-pipeline-row > a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-inline-size: 0; }
.av-pipeline-row > a:hover { text-decoration: underline; }
.av-pipeline-row-current { border-color: var(--av-teal-dark); box-shadow: inset 3px 0 0 var(--av-teal-dark); }
.av-candidate-panel { border: 1px solid var(--av-line); border-radius: var(--av-radius); padding: calc(var(--av-space) * 1.5); background: #fff; }
.av-candidate-panel .av-tabs { margin-block: var(--av-space); }
.av-candidate-panel .av-tabs a { padding-inline: 8px; }
.av-candidate-nav { display: flex; justify-content: space-between; gap: var(--av-space); margin-block-end: var(--av-space); }

/* Round 3, P6 (items 30 to 34, 41 to 46, 48; G7, G8, G9): the vacancy's record page. A tab's content in one stack of
   cards; the three panes of the pipeline with the candidate's pane at least half the width; the candidate's tabs in
   one row; the email and other values wrapping between words; lists shown as lists; a step's owner under it. */
.av-rec-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--av-space) * 1.5); min-inline-size: 0; }
.av-rec-section > * { min-inline-size: 0; }
.av-rec-section > .av-tiles { margin: 0; }
.av-detail-list { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: 2px; }
.av-step-note { font-size: var(--av-text-small); color: var(--av-charcoal); margin-block-start: 2px; }
.av-pipeline-panes > .av-panes-three { grid-template-columns: 13rem minmax(14rem, 1fr) minmax(0, 2fr); }
@media (max-width: 79.99rem) { .av-pipeline-panes > .av-panes-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
@media (max-width: 40rem) { .av-pipeline-panes > .av-panes-three { grid-template-columns: minmax(0, 1fr); } }
.av-pipeline-search { display: flex; gap: 6px; margin-block-end: var(--av-space); }
.av-pipeline-search input { flex: 1 1 8rem; min-inline-size: 0; }
.av-pane-list .av-pipeline-list { flex: 1; align-content: start; }
.av-pane-list .av-pipeline-row > a { flex: 1 1 10rem; overflow-wrap: break-word; }
.av-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--av-space); margin-block-start: auto; padding-block-start: var(--av-space); border-block-start: 1px solid var(--av-line); }
.av-candidate-pane { min-inline-size: 0; }
.av-candidate-pane .av-pair dd, .av-candidate-pane .av-record-title { overflow-wrap: break-word; word-break: normal; }
.av-tabs-one-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.av-tabs-one-row a, .av-tabs-one-row button { white-space: nowrap; flex: 0 0 auto; }
.av-candidate-pane .av-tabs-one-row a { padding-inline: 8px; }
.av-row-menu > summary { cursor: pointer; }
.av-path { display: inline-block; max-inline-size: 100%; overflow-wrap: anywhere; word-break: break-all; }

/* Round 3, the layout map, group b (rows 14 to 16, 49 to 51, 53 and 56; G13, G26, G27): a delegation's head in its wide
   drawer is group d's .av-child-head; a row's "⋯" menu's destructive item in red (the menu itself opens over its
   table: the layout map's review, f1, at the end); the Workflow viewer's lead and legend above a zoom box that fills it. */
.av-pop-item.av-pop-item-danger, .av-pop-item.av-pop-item-danger .av-icon { color: var(--av-danger); }
.av-pop-item.av-pop-item-danger:hover { background: var(--av-danger-tint); color: var(--av-danger); }
.av-flow-viewer { flex: 1; min-block-size: 0; display: flex; flex-direction: column; padding: var(--av-space) calc(var(--av-space) * 2.5) calc(var(--av-space) * 2); }
.av-flow-viewer > .av-zoom { flex: 1; min-block-size: 0; grid-template-rows: auto minmax(0, 1fr); }
.av-flow-viewer .av-zoom-scroll { max-block-size: none; }
.av-flow-viewer .av-zoom-scroll svg { display: block; max-block-size: 100%; margin-inline: auto; }

/* Round 3, the layout map, group a (rows 1, 3, 4, 5, 9, 11, 12, 13). */
/* G4: a notice's and a search hit's whole row is its link; a notice's Mark as read stays a button above the link. */
.av-notice-item, .av-search-hit { position: relative; }
.av-notice-link { color: inherit; text-decoration: none; }
.av-notice-link::after, .av-search-link-row::after { content: ""; position: absolute; inset: 0; }
.av-notice-item:hover, .av-search-hit:hover { background: var(--av-mist); }
.av-notice-item:hover .av-notice-link, .av-notice-link:focus-visible, .av-search-hit:hover .av-search-link-row { text-decoration: underline; }
.av-notice-item .av-row-side { position: relative; z-index: 1; }
/* Row 3: a details card's notes under its pairs (where the values come from, when they were read). */
.av-details-card > dl + .av-meta { margin-block-start: calc(var(--av-space) * 1.5); }
.av-details-card > .av-meta + .av-meta { margin-block-start: 4px; }
/* Row 9: the identity tests' groups, each in its card. */
.av-diag-groups { display: grid; gap: calc(var(--av-space) * 1.5); margin-block-end: calc(var(--av-space) * 2); }
.av-diag-groups .av-card-head h2 { display: flex; align-items: center; gap: var(--av-space); margin: 0; font-size: var(--av-subsection); }

/* Round 3, the layout map, group d (Finance and Management; the overlay widths) */
/* A drawer whose own help or AV Co-pilot is open beside it gives up the room they take (26 rem from the start
   side), down to the next narrower kind, so both read side by side on a computer (G12; R2-11, R2-14). */
.av-drawer:has(> .av-help) { inline-size: min(40rem, 100vw, max(32rem, calc(100vw - 26rem))); }
.av-drawer-wide:has(> .av-help) { inline-size: min(64rem, 100vw, max(40rem, calc(100vw - 26rem))); }
/* G26: a child record's head in its drawer: the number chip, the status badge, then its actions at the end. */
.av-child-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); margin-block-end: calc(var(--av-space) * 1.5); }
.av-child-head > .av-actions { margin: 0; margin-inline-start: auto; }
/* G4: in a row that opens its record, the other cells' own links and buttons (a receipt to download) stay above the row's link. */
.av-table tr.av-row-open td:not(:first-child) :is(a, button) { position: relative; z-index: 1; }
/* Row 48: a team card's head holds its name and, at its end, Assign and its row menu; on a narrow card they wrap under the name. */
.av-team-cards .av-card-head { flex-wrap: wrap; }
.av-team-cards .av-card-head h2 { flex: 1 1 auto; margin: 0; }

/* Round 3, the layout map, group c (People: rows 19, 22, 24, 30, 31, 32, 58). A list row's "⋯" menu (.av-pop, positioned)
   already lies above the row's own link, which comes before it (G4, G13), so choosing it never opens the row's record. */
/* A dialog opened from a drawer (a child record's action in its G26 drawer) keeps its own rounded foot. */
.av-drawer .av-dialog:not(.av-drawer) .av-dialog-foot { border-end-start-radius: inherit; border-end-end-radius: inherit; }

/* Round 3, the layout map's review, f1 */
/* G13, G15: a row's "⋯" menu opens over everything, its panel fixed to the window and placed against its button by
   av-frame.js (under it, or above it when there is no room below, on the reading side). No table's scroll box clips
   it, loses its sideways scroll or grows a scroll bar for it, and no later row or sticky header covers it; the
   table keeps its own box, so a closed menu passes under the sticky header as the list scrolls. */
.av-row-menu > .av-pop-panel { position: fixed; inset: auto; }
/* Until av-frame.js has placed it against its button (a moment after the menu opens), the panel is not shown. */
.av-row-menu[open] > .av-pop-panel:not([data-av-placed]) { visibility: hidden; }
/* G12, R2-11: the Workflow viewer gives up the room of its own help (26 rem from the start side) on a computer, so the
   two read side by side, as the drawers do; below 64 rem the help lies over the viewer. */
@media (min-width: 64rem) {
    .av-dialog-viewer:has(> .av-help) { inline-size: min(72rem, calc(100vw - 28rem)); margin-inline: 27rem auto; }
}

/* round 4, P3 (hiring: the application, the pipeline and the requests) */
/* G8 (item 7): the details pane's head: the picture, the name with its chips, then "Open the full …" at its end on the
   title's row; on a narrow pane the link wraps under them. */
.av-panel-head { align-items: flex-start; }
.av-panel-head > .av-panel-head-text { flex: 1 1 12rem; min-inline-size: 0; }
.av-panel-head > .av-panel-open-full { margin-inline-start: auto; flex: 0 0 auto; }
/* F1: a tab row scrolls sideways only, never up and down (the tabs' -1 px margin no longer makes a small bar). */
.av-tabs-one-row { overflow-y: hidden; }
/* Point 65e: the pipeline's search box takes its row; its button is an icon beside it. */
.av-pipeline-search { align-items: center; }
.av-pipeline-search input { flex: 1 1 auto; }
.av-pipeline-search-button { flex: 0 0 auto; block-size: 2.25rem; inline-size: 2.25rem; }
/* F2 (item 8): one bar above the application's head: Back to the pipeline at its start, Previous and Next at its end. */
.av-application-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--av-space); margin-block-end: var(--av-space); }
.av-application-steps { display: inline-flex; gap: 6px; margin-inline-start: auto; }
/* F3 (item 9): the Application tab's sections each in a card of their own on the page, set apart in the pane. */
.av-application-cards { display: grid; gap: calc(var(--av-space) * 1.5); }
.av-panel-sections { display: grid; gap: calc(var(--av-space) * 1.5); }
.av-application-cards .av-panel-sections { gap: calc(var(--av-space) * 1.5); }
.av-application-section > h3:first-child { margin-block-start: 0; }
.av-panel-section + .av-panel-section { padding-block-start: calc(var(--av-space) * 1.5); border-block-start: 1px solid var(--av-line); }
.av-panel-section > h3:first-child { margin-block-start: 0; }
/* Item 15: Settings > Recruitment's document types as a line list: the names in English and Arabic, the default tick
   on the boxes' line, Remove. */
.av-rule-row.av-document-type-row { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) auto; }
.av-document-type-default { align-self: end; padding-block-end: 8px; }
/* Item 13: a received document's file with its Preview beside it. */
.av-checks-file .av-checks-preview { vertical-align: middle; margin-inline-start: 4px; inline-size: 1.5rem; block-size: 1.5rem; }
/* Items 21, 22: a message row: its date first, then its subject and the start of its words on one line (cut with an
   ellipsis), its read mark at the end; the whole row opens the message in its drawer. */
.av-message-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.av-message-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--av-space); inline-size: 100%; padding: 8px 10px; border: 1px solid var(--av-line); border-radius: var(--av-radius-small); background: var(--av-white); color: inherit; font: inherit; text-align: start; cursor: pointer; }
.av-message-row:hover { border-color: var(--av-navy); background: var(--av-mist); }
.av-message-row:focus-visible { outline: 2px solid var(--av-navy); outline-offset: 2px; }
.av-message-date { color: var(--av-slate); font-size: var(--av-text-label); white-space: nowrap; }
.av-message-words { min-inline-size: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--av-slate); }
.av-message-words > strong { color: var(--av-charcoal); }
@media (max-width: 40rem) {
    .av-message-row { grid-template-columns: minmax(0, 1fr) auto; }
    .av-message-words { grid-column: 1 / -1; grid-row: 2; }
}
/* Items 18, 19 (F9; G14): Questions from the library: the search box on its own row as the list toolbar's, then the
   choices without hints, three a row, their labels and boxes lined up; a question's tick, number and category at the
   start of its card's head. */
.av-question-filters { grid-template-columns: minmax(0, 1fr); }
.av-question-filters .av-question-search { max-inline-size: none; }
.av-question-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--av-space); }
.av-question-choices .av-field { margin: 0; }
@media (max-width: 40rem) {
    .av-question-choices { grid-template-columns: minmax(0, 1fr); }
}
.av-question-pick { display: block; }
.av-question-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.av-question-pick-head .av-question-tick { margin: 0; }

/* Round 4, P4: who made a change, under its date in a history table (build report Section 8, point 64). */
.av-changed-by { display: block; white-space: normal; }

/* The "Act As" selector (version 1.2.1, DEC-288; UI guide G1): the selected role's name in the top bar between the
   search and the notices, a red dot when work waits in another role, and its panel of one row per role. */
.av-actas-button { inline-size: auto; padding-inline: calc(var(--av-space) * 1.25); gap: 6px; border: 1px solid var(--av-line); font-size: var(--av-text-small); font-weight: 600; color: var(--av-navy); }
.av-actas-button .av-actas-name { max-inline-size: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-actas-button .av-actas-code { display: none; }
.av-actas-button .av-icon:last-of-type { inline-size: 0.875rem; block-size: 0.875rem; }
.av-actas-dot { position: absolute; inset-block-start: 3px; inset-inline-end: 3px; inline-size: 0.625rem; block-size: 0.625rem; border: 2px solid var(--av-white); border-radius: 50%; background: var(--av-danger); }
.av-actas-panel { min-inline-size: min(27rem, calc(100vw - 2rem)); }
.av-actas-panel li > a.av-actas-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 4px calc(var(--av-space) * 1.25); padding: calc(var(--av-space) * 1.25) var(--av-space); white-space: normal; }
.av-actas-panel li > a.av-actas-selected { background: var(--av-navy-soft); }
.av-actas-tick .av-icon { color: var(--av-teal-dark); }
.av-actas-role { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--av-space); min-inline-size: 0; }
.av-actas-role strong { color: var(--av-navy); font-weight: 600; }
.av-actas-role .av-meta { flex-basis: 100%; }
.av-actas-counts { display: inline-flex; gap: 6px; }
.av-actas-count { display: inline-flex; align-items: center; gap: 4px; min-inline-size: 2.5rem; justify-content: center; padding: 1px 8px; border-radius: var(--av-radius-pill); background: var(--av-mist); color: var(--av-slate); font-size: var(--av-text-label); font-weight: 600; line-height: 1.25rem; }
.av-actas-count .av-icon, .av-actas-panel li > a .av-actas-count .av-icon { inline-size: 0.875rem; block-size: 0.875rem; color: inherit; }
.av-actas-waiting { background: var(--av-danger-tint); color: var(--av-danger); }
.av-actas-note { display: block; margin-block-end: 0; }

@media (max-width: 64rem) {
    .av-actas-button .av-actas-name { display: none; }
    .av-actas-button .av-actas-code { display: inline; }
}

@media (max-width: 40rem) {
    .av-actas-button { padding-inline: var(--av-space); }
    .av-actas-counts { grid-column: 2 / -1; }
    .av-actas > .av-pop-panel { position: fixed; inset-block-start: calc(var(--av-topbar-height) + 4px); inset-inline: var(--av-space); min-inline-size: 0; inline-size: auto; }
}