/* ===========================================================================
   عُمُر — Application stylesheet, built on the National Design System of
   Saudi Arabia (كود المنصات / Platforms Code) by the Digital Government
   Authority (DGA).

   Loaded AFTER /vendor/dga/styles.css (fonts + compiled tokens + component
   classes of platformscode-new-react@0.1.43) and /css/dga-icons.css (the
   Hugeicons glyph set the design system uses).

   Rules of this sheet
   - Every colour, radius, shadow, spacing and type value is a DGA token or a
     documented DGA component value. No foreign colours, gradients, textures,
     blur panels or entrance animations.
   - The DOM, ids, data-* hooks and class names are untouched: this sheet maps
     the project's existing class vocabulary onto DGA component specs
     (DgaButton, DgaTextInput, DgaCard, DgaTag, DgaChip, DgaInlineAlert,
     DgaNotificationToast, DgaModal, DgaMenu, DgaAvatar, DgaSwitch, DgaTabs,
     DgaMetric, DgaFooter, DgaSlideoutMenu, DgaBreadcrumbs, DgaLinearProgressBar).
   - Type is expressed in rem (16px = 1rem) using the exact DGA scale so the
     accessibility text-size stepper keeps working; component geometry uses
     min-heights so enlarged text never clips.
   - Dark mode: the compiled DGA sheet flips its semantic tokens under
     [data-theme="dark"], which is the attribute this app already toggles.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens — app-level aliases onto DGA tokens
   --------------------------------------------------------------------------- */
:root {
    /* DGA type scale (px → rem) */
    --t-2xs: .625rem;  --lh-2xs: .875rem;
    --t-xs:  .75rem;   --lh-xs:  1.125rem;
    --t-sm:  .875rem;  --lh-sm:  1.25rem;
    --t-md:  1rem;     --lh-md:  1.5rem;
    --t-lg:  1.125rem; --lh-lg:  1.75rem;
    --t-xl:  1.25rem;  --lh-xl:  1.875rem;
    --t-dxs: 1.5rem;   --lh-dxs: 2rem;
    --t-dsm: 1.875rem; --lh-dsm: 2.375rem;
    --t-dmd: 2.25rem;  --lh-dmd: 2.75rem;

    /* Surfaces & strokes */
    --omar-card-border: var(--border-neutral-secondary);      /* 1px stroke cards */
    --omar-divider:     var(--border-neutral-secondary);
    --omar-surface-2:   var(--background-neutral-50);          /* recessed / hover */
    --omar-surface-3:   var(--background-neutral-100);         /* chips, bubbles */

    /* Gold (DGA secondary) — awards, points, #1 rank only */
    --omar-gold-bg:     var(--colors-secondary-gold-50);
    --omar-gold-ink:    var(--colors-secondary-gold-800);
    --omar-gold-border: var(--colors-secondary-gold-200);
    --omar-gold:        var(--colors-secondary-gold-600-primary);

    /* Lavender (DGA tertiary) — the third categorical accent */
    --omar-lav-bg:      var(--colors-tertiary-lavendar-50);
    --omar-lav-ink:     var(--colors-tertiary-lavendar-700);
    --omar-lav-border:  var(--colors-tertiary-lavendar-200);

    /* Motion (DGA: 150–250 ms ease-out, colour/opacity/height only) */
    --dur-1: 150ms;
    --dur-2: 220ms;
    --ease:  cubic-bezier(.2, 0, 0, 1);

    /* Geometry */
    --sb-w: 272px;
    --topbar-h: 64px;

    /* Brand deep green — footer, auth header, covers (DGA colors-green-900 / background-sa-flag; pinned so it never flips in dark mode) */
    --omar-brand-deep: var(--colors-green-900);
    /* Button corner radius — DGA radius-md (8px) on every button */
    --omar-btn-radius: var(--radius-md);

    /* Focus ring (DgaButton:focus-visible → 2px solid --border-black) */
    --omar-focus: 2px solid var(--border-black);

    /* Legacy variable names still referenced by inline styles that the
       scripts emit — mapped onto DGA tokens so nothing renders off-system. */
    --g-green:       var(--text-primary);
    --g-green-dark:  var(--text-primary-sa-flag);
    --g-green-tint:  var(--colors-primary-sa-flag-400);
    --g-ink:         var(--text-default);
    --g-gray-tint:   var(--text-secondary-paragraph);
    --g-gray-pastel: var(--border-neutral-secondary);
    --g-danger:      var(--text-error);
    --g-warning:     var(--omar-gold);
    --surface:       var(--background-card);
    --surface-2:     var(--omar-surface-2);
    --surface-3:     var(--omar-surface-3);
    --field-border:  var(--form-field-border-default);
    --page-bg:       var(--background-body);
    --radius:        var(--radius-lg);
    --radius-sm:     var(--radius-sm);
    --card-border:   var(--omar-card-border);
}

/* Dark theme — tokens the compiled DGA sheet leaves light-only are mapped
   here onto the DGA dark neutrals so every surface stays on-system. */
html[data-theme="dark"] {
    color-scheme: dark;
    --omar-surface-2: var(--colors-neutral-700);
    --omar-surface-3: var(--colors-neutral-700);
    --button-background-neutral-default:  var(--colors-neutral-700);
    --button-background-neutral-hovered:  var(--colors-neutral-700);
    --button-background-neutral-pressed:  var(--colors-neutral-600);
    --button-background-neutral-selected: var(--colors-neutral-600);
    --tag-background-neutral-light: var(--colors-neutral-700);
    --tag-background-success-light: var(--colors-neutral-700);
    --tag-background-info-light:    var(--colors-neutral-700);
    --tag-background-warning-light: var(--colors-neutral-700);
    --tag-background-error-light:   var(--colors-neutral-700);
    --tag-border-success-light:     var(--colors-green-700);
    --tag-border-info-light:        var(--colors-blue-700);
    --tag-border-warning-light:     var(--colors-yellow-700);
    --tag-border-error-light:       var(--colors-red-700);
    --tag-text-neutral: var(--colors-neutral-100);
    --tag-text-success: var(--colors-green-500);
    --tag-text-info:    var(--colors-blue-500);
    --tag-text-warning: var(--colors-yellow-500);
    --tag-text-error:   var(--colors-red-500);
    --notification-background-success-light: var(--colors-neutral-800);
    --notification-background-info-light:    var(--colors-neutral-800);
    --notification-background-warning-light: var(--colors-neutral-800);
    --notification-background-error-light:   var(--colors-neutral-800);
    --table-background-header: var(--colors-neutral-700);
    --table-cell-border:       var(--colors-neutral-600);
    --table-text-head:         var(--colors-neutral-200);
    --controls-control-ripple-effect:  var(--colors-neutral-600);
    --controls-control-neutral-checked: var(--colors-neutral-100);
    --controls-control-border:         var(--colors-neutral-400);
    --link-neutral:         var(--colors-neutral-200);
    --link-neutral-hovered: var(--colors-neutral-300);
    --omar-gold-bg:     var(--colors-neutral-800);
    --omar-gold-ink:    var(--colors-secondary-gold-400);
    --omar-gold-border: var(--colors-secondary-gold-700);
    --omar-lav-bg:      var(--colors-neutral-700);
    --omar-lav-ink:     var(--colors-tertiary-lavendar-200);
    --omar-lav-border:  var(--colors-tertiary-lavendar-600);
    --text-warning: var(--colors-yellow-500);
    --text-info:    var(--colors-blue-500);
    --text-success: var(--colors-green-500);
    --text-error:   var(--colors-red-500);
}

/* ---------------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scrollbar-gutter: stable; }
html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: var(--background-body);
}
body {
    font-family: var(--font-family-base);
    font-size: var(--t-md);
    line-height: var(--lh-md);
    color: var(--text-default);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--text-display); }
p { margin: 0 0 var(--spacing-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--link-primary); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: var(--link-primary-hovered); }
img, video { max-width: 100%; }
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}
button { cursor: pointer; }
strong, b { font-weight: 600; }
::selection { background: var(--colors-alpha-alpha-green-20); }

/* Keyboard focus — DGA: visible 2px ring in the control's own colour */
:focus { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
select:focus-visible, label:focus-visible {
    outline: var(--omar-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
input:focus-visible, textarea:focus-visible { outline: none; }

/* Thin neutral scrollbars (slide-out menu spec) */
* { scrollbar-width: thin; scrollbar-color: var(--colors-neutral-400) transparent; }

/* ---------------------------------------------------------------------------
   3. Icons — the element box. Glyph masks come from /css/dga-icons.css
   (each .govsa--* sets --omar-icon). Icons scale with font-size.
   --------------------------------------------------------------------------- */
.govsa-icon, .fa-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -.15em;
    background-color: currentColor;
    -webkit-mask: var(--omar-icon) center / contain no-repeat;
            mask: var(--omar-icon) center / contain no-repeat;
    font-size: 1.25rem;
    line-height: 1;
}
.govsa-icon:not([style*="color"]) { color: inherit; }

/* ---------------------------------------------------------------------------
   4. Application shell — sidebar / drawer (DgaSlideoutMenu), top bar
      (DgaNavHeader), breadcrumbs (DgaBreadcrumbs), footer (DgaFooter, dark green)
   --------------------------------------------------------------------------- */
.app-layout { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sb-w);
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-start: 0;
    z-index: 1030;
    display: none;                          /* only in the tablet band, see §24 */
    flex-direction: column;
    background: var(--background-menu);
    border-inline-end: 1px solid var(--omar-divider);
    overflow-y: auto;
}
.app-content-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1; padding: var(--spacing-8) clamp(16px, 3.4vw, 40px) var(--spacing-12); }
.app-container { max-width: 1200px; margin: 0 auto; }

/* Brand block */
.brand { display: flex; align-items: center; gap: var(--spacing-3); min-width: 0; }
.brand__mark {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: var(--radius-sm);
    background: var(--background-primary);
    color: var(--text-oncolor-primary);
    display: flex; align-items: center; justify-content: center;
}
.brand__mark .govsa-icon { font-size: 1.5rem; }
.brand__name { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; color: var(--text-display); }
.brand__sub  { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); }

.app-sidebar__head, .app-drawer .app-sidebar__head {
    padding: var(--spacing-4);
    background: var(--background-neutral-50);
    border-bottom: 1px solid var(--omar-divider);
}
.app-sidebar__label {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-1);
    font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 600;
    color: var(--text-secondary-paragraph);
}

/* Navigation — DgaMenuItem: 8px padding, 8px gap, selected = primary-50 + primary ink */
.app-nav { list-style: none; margin: 0; padding: var(--spacing-1) var(--spacing-3); flex: 1; }
.app-nav li { margin: 2px 0; }
.app-nav a {
    display: flex; align-items: center; gap: var(--spacing-2);
    min-height: 40px; padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--t-md); line-height: var(--lh-md);
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.app-nav a .govsa-icon { font-size: 1.5rem; color: var(--icon-default); }
.app-nav a:hover { background: var(--button-background-neutral-hovered); color: var(--text-default); }
.app-nav a:active { background: var(--button-background-neutral-pressed); }
.app-nav a.active { background: var(--background-primary-50); color: var(--text-primary); font-weight: 500; }
.app-nav a.active .govsa-icon { color: var(--icon-primary); }

.app-sidebar__foot { padding: var(--spacing-3); border-top: 1px solid var(--omar-divider); }
.app-logout {
    display: flex; align-items: center; gap: var(--spacing-2);
    min-height: 40px; padding: var(--spacing-2);
    border-radius: var(--radius-sm);
    color: var(--text-error); font-weight: 500;
    transition: background-color var(--dur-1) var(--ease);
}
.app-logout .govsa-icon { font-size: 1.5rem; }
.app-logout:hover { background: var(--button-background-danger-secondary-hovered); color: var(--text-error); }

/* Top bar — DgaNavHeader (white, 1px divider, sticky) */
.app-topbar {
    min-height: var(--topbar-h);
    background: var(--background-card);
    border-bottom: 1px solid var(--omar-divider);
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
    padding: var(--spacing-2) clamp(12px, 3vw, 32px);
    position: sticky; top: 0; z-index: 1020;
}
.app-topbar > div { min-width: 0; }

/* Icon-only subtle buttons (DgaButton subtle, lg 40px) */
.app-hamburger, .app-iconbtn, .chat-ico, .sheet__x, .flw-x, .toast__x, .a11y-panel__x,
.app-drawer__close, .post-x__menu, .notif-x, .poll-opt-rm, .poll-opt-add, .tag-pill__x, .upl-rm, .media-preview .rm {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: var(--omar-btn-radius);
    background: transparent; color: var(--icon-default);
    cursor: pointer;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.app-hamburger .govsa-icon, .app-iconbtn .govsa-icon, .chat-ico .govsa-icon, .sheet__x .govsa-icon,
.flw-x .govsa-icon, .app-drawer__close .govsa-icon, .a11y-panel__x .govsa-icon { font-size: 1.5rem; }
.app-hamburger:hover, .app-iconbtn:hover, .chat-ico:hover, .sheet__x:hover, .flw-x:hover, .toast__x:hover,
.a11y-panel__x:hover, .app-drawer__close:hover, .poll-opt-add:hover, .tag-pill__x:hover {
    background: var(--button-background-neutral-hovered); color: var(--icon-default);
}
.app-hamburger:active, .app-iconbtn:active, .chat-ico:active { background: var(--button-background-neutral-pressed); }
.app-hamburger { margin-inline-end: var(--spacing-2); }
.app-iconbtn { position: relative; }
.app-iconbtn.is-active, .chat-btn.is-active { background: var(--background-primary-50); color: var(--icon-primary); }

/* Breadcrumbs — DgaBreadcrumbs: text-sm, neutral links, disabled-grey current */
.breadcrumb-bar {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    font-size: var(--t-sm); line-height: var(--lh-sm);
    color: var(--link-neutral); min-width: 0;
}
.breadcrumb-bar a { color: var(--link-neutral); }
.breadcrumb-bar a:hover { color: var(--link-neutral-hovered); text-decoration: underline; }
.breadcrumb-bar .sep {
    display: inline-block; width: 1rem; height: 1rem; margin: 0 2px;
    color: transparent; overflow: hidden;
    background: var(--text-default-disabled);
    -webkit-mask: var(--icon-arrow-left-01) center / contain no-repeat;
            mask: var(--icon-arrow-left-01) center / contain no-repeat;
}
.breadcrumb-bar .current {
    color: var(--text-default-disabled);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* User chip — avatar + name/role */
.user-chip {
    display: flex; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-md);
    min-width: 0;
}
.user-chip__av {
    width: 32px; height: 32px; border-radius: var(--radius-full); flex: 0 0 auto; overflow: hidden;
    background: var(--background-primary-50); color: var(--text-primary-sa-flag);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t-xs); font-weight: 600;
    border: 2px solid var(--border-white);
}
.user-chip__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-chip__name { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-display); white-space: nowrap; display: flex; align-items: center; }
.user-chip__role { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); }

/* Log-out (top bar) — DgaButton secondary-outline, md */
.btn-logout {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
    min-height: 32px; padding: 0 var(--buttons-md-padding);
    background: transparent; color: var(--text-default);
    border: 0; outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px;
    border-radius: var(--omar-btn-radius);
    font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500;
    cursor: pointer; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.btn-logout .govsa-icon { font-size: 1.25rem; }
.btn-logout:hover { background: var(--button-background-danger-secondary-hovered); color: var(--text-error); outline-color: var(--border-error-light); }
.btn-logout:focus-visible { outline: var(--omar-focus); }

/* Footer — DgaFooter DarkGreen */
.app-footer {
    text-align: center;
    background: var(--omar-brand-deep);
    color: var(--text-oncolor-primary);
    font-size: var(--t-sm); line-height: var(--lh-sm);
    padding: var(--spacing-6) var(--spacing-4);
}
.app-footer a { color: var(--link-oncolor); text-decoration: underline; }
.app-footer a:hover { color: var(--link-oncolor-hovered); }

/* Off-canvas drawer — DgaSlideoutMenu (right variant in RTL) */
.app-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-start: 0;
    width: min(var(--sb-w), 86vw);
    background: var(--background-menu);
    z-index: 1060;
    transform: translateX(100%);
    transition: transform var(--dur-2) var(--ease);
    display: flex; flex-direction: column; overflow-y: auto;
    border-inline-end: 1px solid var(--omar-divider);
    box-shadow: var(--shadow-2xl);
}
.app-drawer.open { transform: translateX(0); }
.app-drawer-overlay {
    position: fixed; inset: 0; z-index: 1050;
    background: var(--colors-alpha-alpha-black-50);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-2) var(--ease);
}
.app-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.app-drawer__close { align-self: flex-end; margin: var(--spacing-2) var(--spacing-2) 0; }

/* ---------------------------------------------------------------------------
   5. Page & section headings — DGA display-xs/sm semibold, text-lg semibold
   --------------------------------------------------------------------------- */
.page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--spacing-4); flex-wrap: wrap; margin-bottom: var(--spacing-6);
}
.page-head h1 {
    font-size: var(--t-dxs); line-height: var(--lh-dxs); font-weight: 600;
    color: var(--text-display); margin: 0 0 var(--spacing-1);
}
.page-head .sub { color: var(--text-primary-paragraph); font-size: var(--t-md); line-height: var(--lh-md); margin: 0; max-width: 70ch; }
.page-head > div:last-child { display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; }

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-3); margin-bottom: var(--spacing-4);
}
.section-head h2, .section-head h3 {
    font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600;
    color: var(--text-display); margin: 0;
}
.section-head > div { display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   6. Surfaces — DgaCard (stroke effect: 1px neutral border, 16px radius, no shadow)
   --------------------------------------------------------------------------- */
.card-omar {
    background: var(--background-card);
    border: 1px solid var(--omar-card-border);
    border-radius: var(--radius-lg);
    color: var(--text-default);
}
.panel { padding: var(--spacing-6); margin-bottom: var(--spacing-5); }

/* Metric tiles (admin dashboard) — DgaMetric */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-4); margin-bottom: var(--spacing-6);
}
.stat-card {
    background: var(--background-card);
    border: 1px solid var(--omar-card-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
}
.stat-card__num { font-size: var(--t-dsm); line-height: var(--lh-dsm); font-weight: 700; color: var(--text-display); }
.stat-card__lbl { color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; margin-top: var(--spacing-1); }
/* DgaFeaturedIcon, light variant, lg (48px) */
.stat-card__icon {
    width: 48px; height: 48px; flex: 0 0 auto; border-radius: var(--radius-sm);
    background: var(--featuredicons-background-brand-light); color: var(--featuredicons-icon-primary);
    display: flex; align-items: center; justify-content: center;
}
.stat-card__icon .govsa-icon { font-size: 1.5rem; }
.stat-card.is-amber .stat-card__icon { background: var(--featuredicons-background-warning-light); color: var(--featuredicons-icon-warning); }
.stat-card.is-tint  .stat-card__icon { background: var(--featuredicons-background-success-light); color: var(--featuredicons-icon-success); }
.stat-card.is-dark  .stat-card__icon { background: var(--featuredicons-background-default-light); color: var(--featuredicons-icon-default); }
html[data-theme="dark"] .stat-card__icon,
html[data-theme="dark"] .stat-card.is-amber .stat-card__icon,
html[data-theme="dark"] .stat-card.is-tint .stat-card__icon,
html[data-theme="dark"] .stat-card.is-dark .stat-card__icon { background: var(--colors-neutral-700); }

/* Aside cards */
.aside-card { padding: var(--spacing-5); }
.aside-card h4 { font-size: var(--t-md); line-height: var(--lh-md); font-weight: 600; margin: 0 0 var(--spacing-3); color: var(--text-display); }
.aside-item { display: block; padding: var(--spacing-3) 0; border-bottom: 1px solid var(--omar-divider); color: inherit; }
.aside-item:last-child { border-bottom: none; padding-bottom: 0; }
.aside-item .t { display: block; font-weight: 500; color: var(--text-default); font-size: var(--t-sm); line-height: var(--lh-sm); }
.aside-item .s { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); margin-top: 2px; }
a.aside-item:hover .t { color: var(--link-primary); }

/* Empty states */
.empty { text-align: center; color: var(--text-secondary-paragraph); padding: var(--spacing-12) var(--spacing-4); font-size: var(--t-md); }
.empty .govsa-icon { font-size: 2.5rem; color: var(--icon-default-400); display: block; margin: 0 auto var(--spacing-3); }

/* Text helpers */
.muted { color: var(--text-secondary-paragraph); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); flex-wrap: wrap; }
.link-omar { color: var(--link-primary); font-weight: 500; }
.link-omar:hover { color: var(--link-primary-hovered); text-decoration: underline; }
.link-omar .govsa-icon { font-size: 1.1em; }

/* ---------------------------------------------------------------------------
   7. Buttons — DgaButton (lg 40px / md 32px, radius 4px, 500 weight)
      .btn-omar → primary-brand · .btn-omar-2 → secondary · .btn-omar-line →
      secondary-outline · .btn-danger → des-primary · .btn-sm → md size
   --------------------------------------------------------------------------- */
.btn-omar, .btn-omar-2, .btn-omar-line, .btn-danger {
    -webkit-appearance: none; appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--buttons-lg-gap);
    min-height: 40px; padding: var(--spacing-1) var(--buttons-lg-padding);
    border: 0; border-radius: var(--omar-btn-radius);
    font-size: var(--t-md); line-height: var(--lh-md); font-weight: 500;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), outline-color var(--dur-1) var(--ease);
}
.btn-omar .govsa-icon, .btn-omar-2 .govsa-icon, .btn-omar-line .govsa-icon, .btn-danger .govsa-icon,
.btn-omar .fa-solid, .btn-omar-2 .fa-solid, .btn-omar-line .fa-solid { font-size: 1.5rem; }

.btn-omar { background: var(--button-background-primary-default); color: var(--text-oncolor-primary); }
.btn-omar:hover { background: var(--button-background-primary-hovered); color: var(--text-oncolor-primary); }
.btn-omar:active { background: var(--button-background-primary-selected); }

.btn-omar-2 { background: var(--button-background-neutral-default); color: var(--text-default); }
.btn-omar-2:hover { background: var(--button-background-neutral-pressed); color: var(--text-default); }
.btn-omar-2:active { background: var(--button-background-neutral-selected); }

.btn-omar-line {
    background: transparent; color: var(--text-default);
    outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px;
}
.btn-omar-line:hover { background: var(--button-background-neutral-default); color: var(--text-default); }
.btn-omar-line:active { background: var(--button-background-neutral-selected); outline-color: var(--border-neutral-primary); }

.btn-danger { background: var(--button-background-danger-primary-default); color: var(--text-oncolor-primary); }
.btn-danger:hover { background: var(--button-background-danger-primary-hovered); color: var(--text-oncolor-primary); }
.btn-danger:active { background: var(--button-background-danger-primary-selected); }

.btn-omar:focus-visible, .btn-omar-2:focus-visible, .btn-omar-line:focus-visible, .btn-danger:focus-visible {
    outline: var(--omar-focus); outline-offset: 2px;
}
.btn-omar[disabled], .btn-omar-2[disabled], .btn-danger[disabled] {
    background: var(--background-disabled); color: var(--text-default-disabled); cursor: not-allowed;
}
.btn-omar-line[disabled] { color: var(--text-default-disabled); cursor: not-allowed; background: transparent; }

.btn-block { width: 100%; }
.btn-sm {
    min-height: 32px; padding: 2px var(--buttons-md-padding);
    font-size: var(--t-sm); line-height: var(--lh-sm);
}
.btn-sm .govsa-icon, .btn-sm .fa-solid { font-size: 1.25rem; }

/* Composer / toolbar buttons — DgaButton subtle, md */
.tool-btn {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    min-height: 32px; padding: 2px var(--buttons-md-padding);
    background: transparent; border: 0; border-radius: var(--omar-btn-radius);
    color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500;
    cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tool-btn .govsa-icon { font-size: 1.25rem; }
.tool-btn:hover { background: var(--button-background-neutral-default); color: var(--text-default); }
.tool-btn:active { background: var(--button-background-neutral-selected); }
.composer-tools { display: flex; gap: var(--spacing-1); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   8. Forms — DgaLabel, DgaTextInput (40px, radius 4px, neutral-400 border),
      DgaTextarea, DgaDropdown chevron, DgaSwitch
   --------------------------------------------------------------------------- */
.field { margin-bottom: var(--spacing-5); }
.field label, .poll-length__label {
    display: block;
    font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500;
    color: var(--form-field-text-label);
    margin-bottom: var(--spacing-2);
}
.field label .req { color: var(--form-field-border-error); margin-inline-start: 2px; }

.input, .poll-opt-input, .lb-search, .tag-input, .chat-search input, .chat-composer textarea, .composer-trigger {
    width: 100%;
    min-height: 40px; height: auto;
    display: block;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--form-field-background-default);
    border: 1px solid var(--form-field-border-default);
    border-radius: var(--radius-sm);
    color: var(--form-field-text-filled);
    font-size: var(--t-md); line-height: var(--lh-md);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.input::placeholder, .poll-opt-input::placeholder, .chat-search input::placeholder, .chat-composer textarea::placeholder,
.tag-input__field::placeholder, .lb-search__input::placeholder { color: var(--form-field-text-placeholder); opacity: 1; }
.input:hover, .poll-opt-input:hover, .tag-input:hover, .lb-search:hover, .chat-search input:hover, .chat-composer textarea:hover {
    border-color: var(--form-field-border-hovered);
}
.input:focus, .poll-opt-input:focus, .tag-input:focus-within, .lb-search:focus-within, .chat-search input:focus, .chat-composer textarea:focus {
    outline: none;
    border-color: var(--form-field-border-hovered);
    box-shadow: inset 0 -2px 0 0 var(--form-field-border-pressed);
}
.input[readonly] { border-color: var(--border-neutral-primary); background: var(--form-field-background-default); }
.input[disabled] { border-color: var(--border-disabled); color: var(--text-default-disabled); background: var(--background-disabled); cursor: not-allowed; }
.input[aria-invalid="true"], .input.is-invalid { border-color: var(--form-field-border-error); }
.input::after { content: none; }

textarea.input, .chat-composer textarea {
    min-height: 96px; resize: vertical;
    padding: var(--spacing-3) var(--spacing-4);
}
.chat-composer textarea { min-height: 40px; }

/* Selects — chevron glyph from the DGA icon set */
select.input, .pl-field select {
    -webkit-appearance: none; appearance: none;
    background-image: var(--omar-chevron);
    background-repeat: no-repeat;
    background-position: left var(--spacing-3) center;
    background-size: 1.25rem;
    padding-inline-end: var(--spacing-3);
    padding-inline-start: calc(var(--spacing-3) + 1.5rem);
    cursor: pointer;
}
select.input option { color: var(--text-default); background: var(--background-card); }

/* Poll length pickers (select inside a labelled field) */
.poll-length { padding: var(--spacing-4); }
.poll-length__row { display: flex; gap: var(--spacing-3); }
.pl-field { flex: 1; display: block; min-width: 0; }
.pl-field > span { display: block; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--form-field-text-label); margin-bottom: var(--spacing-1); font-weight: 500; }
.pl-field select {
    width: 100%; min-height: 40px;
    background-color: var(--form-field-background-default);
    border: 1px solid var(--form-field-border-default); border-radius: var(--radius-sm);
    color: var(--form-field-text-filled); font-size: var(--t-md); line-height: var(--lh-md); font-weight: 500;
    padding-block: var(--spacing-2);
}
.pl-field select:hover { border-color: var(--form-field-border-hovered); }
.pl-field select:focus { outline: none; border-color: var(--form-field-border-hovered); box-shadow: inset 0 -2px 0 0 var(--form-field-border-pressed); }

/* Dynamic tag input (skills / requirements) */
.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-1); cursor: text; padding: var(--spacing-1) var(--spacing-2); }
.tag-input__tags { display: contents; }
.tag-input__field {
    flex: 1; min-width: 140px; min-height: 30px; border: 0; background: transparent; outline: none;
    color: var(--form-field-text-filled); font-size: var(--t-md); line-height: var(--lh-md); padding: 0 var(--spacing-1);
}

/* Uploader (DgaFileUpload drop area) */
.uploader {
    border-radius: var(--radius-sm);
    background: var(--background-neutral-100);
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='4' ry='4' stroke='%23D2D6DBFF' stroke-width='2' stroke-dasharray='12%2c6.5' stroke-dashoffset='5' stroke-linecap='square'/%3e%3c/svg%3e");
    padding: var(--spacing-4);
}
html[data-theme="dark"] .uploader { background-color: var(--colors-neutral-700); }
.upl-grid { display: grid; gap: var(--spacing-2); margin-top: var(--spacing-3); grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.upl-thumb {
    position: relative; border: 1px solid var(--omar-card-border); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--background-neutral-100); aspect-ratio: 1 / 1;
}
.upl-thumb img, .upl-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.upl-rm, .media-preview .rm {
    position: absolute; top: var(--spacing-1); inset-inline-end: var(--spacing-1);
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: var(--button-background-oncolor-default); color: var(--icon-default);
    box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .upl-rm, html[data-theme="dark"] .media-preview .rm { background: var(--colors-neutral-800); }
.upl-rm .govsa-icon, .media-preview .rm .govsa-icon { font-size: 1rem; }
.upl-rm:hover, .media-preview .rm:hover { background: var(--button-background-danger-secondary-hovered); color: var(--text-error); }

.media-preview { position: relative; margin-top: var(--spacing-3); border: 1px solid var(--omar-card-border); border-radius: var(--radius-md); overflow: hidden; background: var(--background-neutral-100); }
.media-preview img, .media-preview video { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.avatar-edit { display: flex; align-items: center; gap: var(--spacing-4); margin-bottom: var(--spacing-5); flex-wrap: wrap; }

/* Switch (sheet banner) — DgaSwitch, 48×24 */
.custom-control.custom-switch { position: relative; display: inline-flex; align-items: center; gap: var(--spacing-3); min-height: 24px; padding: 0; flex: 0 0 auto; }
.custom-control-input { position: absolute; opacity: 0; width: 0; height: 0; }
.custom-control-label { position: relative; display: inline-block; padding-inline-start: 56px; min-height: 24px; line-height: 24px; font-size: var(--t-sm); font-weight: 500; color: var(--text-default); cursor: pointer; user-select: none; }
.custom-control-label::before {
    content: ""; position: absolute; top: 0; inset-inline-start: 0;
    width: 48px; height: 24px; border-radius: var(--radius-full);
    background: var(--background-card); outline: 1px solid var(--controls-control-neutral-checked); outline-offset: -1px;
    transition: background-color var(--dur-2) var(--ease), outline-color var(--dur-2) var(--ease);
}
.custom-control-label::after {
    content: ""; position: absolute; top: 4px; inset-inline-start: 4px;
    width: 16px; height: 16px; border-radius: var(--radius-full);
    background: var(--controls-control-neutral-checked);
    transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--controls-control-primary-checked); outline-color: var(--controls-control-primary-checked); }
.custom-control-input:checked ~ .custom-control-label::after { transform: translateX(-24px); background: var(--colors-base-white); }
.custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 4px var(--controls-control-ripple-effect); }
.custom-control-input:hover ~ .custom-control-label::before { box-shadow: 0 0 0 4px var(--controls-control-ripple-effect); }

/* ---------------------------------------------------------------------------
   9. Tags, chips, badges — DgaTag (light + border) · DgaChip (neutral) · count pills
   --------------------------------------------------------------------------- */
.chip, .req-pill, .tag-pill, .task-status, .kind-badge, .reward-chip, .digital-badge, .m-friend, .flw-yt, .lb-pod__crown, .org-hero__kicker, .reco-item__match, .photo-modal__pill {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
    min-height: 24px; padding: 0 var(--spacing-3);
    border-radius: var(--radius-sm);
    font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500;
    white-space: nowrap; vertical-align: middle;
}
/* Skill chips — DgaChip neutral md */
.chip { background: var(--button-background-neutral-default); color: var(--text-default); margin: 0 0 var(--spacing-1) var(--spacing-1); }
.chip:hover { background: var(--button-background-neutral-pressed); }
/* Requirement pills — DgaTag neutral */
.req-pill { background: var(--tag-background-neutral-light); color: var(--tag-text-neutral); border: 1px solid var(--border-neutral-secondary); }
/* Tag-input pills — DgaChip neutral with remove control */
.tag-pill { background: var(--button-background-neutral-default); color: var(--text-default); padding-inline-end: 2px; min-height: 28px; }
.tag-pill__x { width: 22px; height: 22px; color: var(--icon-default); }
.tag-pill__x .govsa-icon { font-size: .875rem; }
.tag-pill__x:hover { background: var(--button-background-danger-secondary-hovered); color: var(--text-error); }
/* Task status — DgaTag info (open) / success (completed) */
.task-status { flex: 0 0 auto; }
.task-status.is-open { background: var(--tag-background-info-light); color: var(--tag-text-info); border: 1px solid var(--tag-border-info-light); }
.task-status.is-done { background: var(--tag-background-success-light); color: var(--tag-text-success); border: 1px solid var(--tag-border-success-light); }
/* Recommendation kinds — DgaTag info / success / tertiary */
.kind-course     { background: var(--tag-background-info-light); color: var(--tag-text-info); border: 1px solid var(--tag-border-info-light); }
.kind-internship { background: var(--tag-background-success-light); color: var(--tag-text-success); border: 1px solid var(--tag-border-success-light); }
.kind-secondment { background: var(--omar-lav-bg); color: var(--omar-lav-ink); border: 1px solid var(--omar-lav-border); }
.reco-item__match { background: var(--background-primary-50); color: var(--text-primary-sa-flag); }
/* Rewards — DGA secondary (gold) for points, brand-light for badges */
.reward-chip { min-height: 32px; padding: 0 var(--spacing-3); font-size: var(--t-sm); line-height: var(--lh-sm); background: var(--omar-gold-bg); color: var(--omar-gold-ink); border: 1px solid var(--omar-gold-border); }
.reward-chip .govsa-icon { font-size: 1.125rem; color: var(--omar-gold); }
.reward-chip--badge { background: var(--background-primary-50); color: var(--text-primary-sa-flag); border-color: var(--border-primary-light); }
.reward-chip--badge .govsa-icon { color: var(--icon-primary); }
.digital-badge { min-height: 32px; padding: 0 var(--spacing-3); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; background: var(--omar-gold-bg); color: var(--omar-gold-ink); border: 1px solid var(--omar-gold-border); }
.digital-badge .govsa-icon { font-size: 1.125rem; color: var(--omar-gold); }
/* Small semantic tags */
.m-friend { min-height: 20px; padding: 0 var(--spacing-2); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: 600; background: var(--tag-background-success-light); color: var(--tag-text-success); border: 1px solid var(--tag-border-success-light); border-radius: var(--radius-full); margin-inline-start: var(--spacing-1); }
.flw-yt { min-height: 20px; padding: 0 var(--spacing-2); font-size: var(--t-2xs); line-height: var(--lh-2xs); font-weight: 600; background: var(--tag-background-neutral-light); color: var(--tag-text-neutral); border: 1px solid var(--border-neutral-secondary); margin-inline-start: var(--spacing-1); }
.org-hero__kicker { background: var(--background-primary-50); color: var(--text-primary-sa-flag); font-weight: 600; margin-bottom: var(--spacing-2); }
.org-hero__kicker .govsa-icon { font-size: 1rem; }

/* Unread / count pills */
.nav-badge, .bell__badge, .chat-btn__badge, .chat-row__badge, .flw-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-full);
    font-size: var(--t-xs); line-height: 1; font-weight: 600;
}
.nav-badge { margin-inline-start: auto; background: var(--background-error); color: var(--text-oncolor-primary); }
.bell { position: relative; }
.bell__badge, .chat-btn__badge {
    position: absolute; top: -2px; inset-inline-end: -2px;
    min-width: 18px; height: 18px; padding: 0 5px; font-size: var(--t-2xs);
    background: var(--background-error); color: var(--text-oncolor-primary);
    border: 2px solid var(--background-card);
}
.chat-row__badge { background: var(--background-primary); color: var(--text-oncolor-primary); flex: 0 0 auto; }
.flw-count { background: var(--button-background-neutral-default); color: var(--text-primary-paragraph); }
.flw-tab.is-active .flw-count { background: var(--background-primary-50); color: var(--text-primary); }

/* ---------------------------------------------------------------------------
   10. Alerts, toasts, confirm — DgaInlineAlert (coloured) · DgaNotificationToast · DgaModal
   --------------------------------------------------------------------------- */
.alert-omar {
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    padding-inline-start: calc(var(--spacing-6) + 8px);
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--border-neutral-primary);
    border-radius: var(--radius-md);
    background: var(--background-card);
    color: var(--text-default);
    font-size: var(--t-md); line-height: var(--lh-md);
}
.alert-omar::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 8px; background: var(--background-neutral-200); }
.alert-omar::before {
    content: ""; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin-top: 0;
    background: currentColor;
    -webkit-mask: var(--omar-icon, var(--icon-information-circle)) center / contain no-repeat;
            mask: var(--omar-icon, var(--icon-information-circle)) center / contain no-repeat;
}
.alert-omar.success { background: var(--notification-background-success-light); border-color: var(--border-success-light); color: var(--text-success); --omar-icon: var(--icon-checkmark-circle-02); }
.alert-omar.success::after { background: var(--background-success); }
.alert-omar.danger  { background: var(--notification-background-error-light); border-color: var(--border-error-light); color: var(--text-error); --omar-icon: var(--icon-alert-circle); }
.alert-omar.danger::after { background: var(--background-error); }
.alert-omar.info    { background: var(--notification-background-info-light); border-color: var(--border-info-light); color: var(--text-info); --omar-icon: var(--icon-information-circle); }
.alert-omar.info::after { background: var(--background-info); }
.alert-omar.warning { background: var(--notification-background-warning-light); border-color: var(--border-warning-light); color: var(--text-warning); --omar-icon: var(--icon-alert-02); }
.alert-omar.warning::after { background: var(--background-warning); }

/* Toasts — DgaNotificationToast */
.toast-stack {
    position: fixed; top: var(--spacing-4); inset-inline-end: var(--spacing-4);
    z-index: 2000; display: flex; flex-direction: column; gap: var(--spacing-2);
    width: min(484px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
    pointer-events: auto; position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    padding-inline-start: calc(var(--spacing-6) + 8px);
    background: var(--background-card); color: var(--text-default);
    border-radius: var(--radius-md); box-shadow: var(--shadow-3xl);
    opacity: 0; transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toast.in { opacity: 1; transform: translateY(0); }
.toast::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 8px; background: var(--background-neutral-200); }
.toast__ic {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-full);
    background: var(--background-neutral-50); color: var(--icon-default);
    -webkit-mask: none; mask: none;
    display: grid; place-items: center; position: relative;
}
.toast__ic::before {
    content: ""; width: 1.5rem; height: 1.5rem; background: currentColor;
    -webkit-mask: var(--omar-icon) center / contain no-repeat; mask: var(--omar-icon) center / contain no-repeat;
}
.toast__msg { flex: 1; font-size: var(--t-md); line-height: var(--lh-md); padding-top: var(--spacing-2); color: var(--text-default); }
.toast__x { width: 32px; height: 32px; margin-top: var(--spacing-1); color: var(--icon-default); }
.toast__x .govsa-icon { font-size: 1.25rem; }
.toast--success::after { background: var(--background-success); }
.toast--success .toast__ic { color: var(--background-success); background: var(--background-success-50); --omar-icon: var(--icon-checkmark-circle-02); }
.toast--danger::after  { background: var(--background-error); }
.toast--danger .toast__ic  { color: var(--background-error); background: var(--background-error-50); --omar-icon: var(--icon-alert-circle); }
.toast--warning::after { background: var(--background-warning); }
.toast--warning .toast__ic { color: var(--background-warning); background: var(--background-warning-50); --omar-icon: var(--icon-alert-02); }
.toast--info::after    { background: var(--background-info); }
.toast--info .toast__ic    { color: var(--background-info); background: var(--background-info-50); --omar-icon: var(--icon-information-circle); }

/* Confirm — DgaModal */
.confirm-overlay, .sheet-modal, .flw-overlay {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(0, 0, 0, .47);
    -webkit-backdrop-filter: blur(3.1px); backdrop-filter: blur(3.1px);
    display: flex; align-items: center; justify-content: center;
    padding: var(--spacing-5) var(--spacing-4);
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.confirm-overlay.in, .sheet-modal.in, .flw-overlay.in { opacity: 1; }
.confirm-box {
    width: 100%; max-width: 480px;
    background: var(--background-white); border: 0;
    border-radius: var(--radius-md); box-shadow: var(--shadow-3xl);
    padding: var(--spacing-6);
    display: flex; flex-direction: column; gap: var(--spacing-2);
}
.confirm-box__head {
    display: flex; align-items: center; gap: var(--spacing-2);
    font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; color: var(--text-display);
}
.confirm-box__head .govsa-icon { font-size: 1.5rem; color: var(--icon-primary); }
.confirm-box__body { color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); padding-bottom: var(--spacing-4); }
.confirm-box__foot { display: flex; gap: var(--spacing-2); justify-content: flex-start; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   11. Avatars & logos — DgaAvatar (circle, 2px white border; brand-light initials)
   --------------------------------------------------------------------------- */
.fig {
    width: 48px; height: 48px; border-radius: var(--radius-full); overflow: hidden;
    background: var(--background-primary-50); color: var(--text-primary-sa-flag);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-md); font-weight: 500; flex: 0 0 auto;
    border: 2px solid var(--border-white);
    position: relative;
}
.fig::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--alpha-black-20); pointer-events: none; }
.fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fig--sm { width: 32px; height: 32px; font-size: var(--t-xs); font-weight: 600; }
.fig--lg { width: 80px; height: 80px; font-size: var(--t-dsm); font-weight: 400; border-width: 2px; }

/* Institution logo container — square DgaAvatar / DgaLogoPlaceholder */
.logo-box {
    background: var(--background-card); border: 1px solid var(--omar-card-border);
    border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; padding: var(--spacing-1); color: var(--icon-primary);
}
.logo-box img { width: 100%; height: 100%; object-fit: contain; display: block; }
.logo-box .govsa-icon { font-size: 1.5rem; }
html[data-theme="dark"] .logo-box { background: var(--colors-base-white); }

/* Verified seal (image asset) */
.verified-seal { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; flex: 0 0 auto; margin-inline-start: .25em; vertical-align: middle; }
.verified-seal__img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------------------------------------------------------------------------
   12. Tables — DgaTable: neutral-100 header, 48px head / 64px rows, neutral-300 rules
   --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--table-cell-border); border-radius: var(--radius-md); }
.table-omar { width: 100%; border-collapse: collapse; }
.table-omar thead { background: var(--table-background-header); }
.table-omar thead th {
    height: 48px; padding: var(--spacing-2) var(--spacing-4);
    text-align: start; font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500;
    color: var(--table-text-head); border-bottom: 1px solid var(--table-cell-border);
    white-space: nowrap;
}
.table-omar tbody td {
    height: 64px; padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--t-md); line-height: var(--lh-md); color: var(--text-default);
    border-bottom: 1px solid var(--table-cell-border);
}
.table-omar tbody tr:last-child td { border-bottom: none; }
.table-omar tbody tr { transition: background-color var(--dur-1) var(--ease); }
.table-omar tbody tr:hover { background: var(--table-background-hover-selected); }

/* ---------------------------------------------------------------------------
   13. Authentication pages — centred DgaCard with a brand-green header
   --------------------------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: var(--spacing-6) var(--spacing-4);
    background: var(--background-body);
}
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--background-card);
    border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    overflow: hidden;
}
.auth-card__head {
    background: var(--omar-brand-deep);
    color: var(--text-oncolor-primary); text-align: center;
    padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
}
.auth-card__logo {
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    background: var(--background-primary); color: var(--text-oncolor-primary);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: var(--spacing-4);
}
.auth-card__logo .govsa-icon { font-size: 1.75rem; }
.auth-card__head h1 { font-size: var(--t-dxs); line-height: var(--lh-dxs); font-weight: 600; margin: 0 0 var(--spacing-1); color: var(--text-oncolor-primary); }
.auth-card__head p  { margin: 0; font-size: var(--t-md); line-height: var(--lh-md); color: var(--text-oncolor-secondary); }
.auth-card__body { padding: var(--spacing-6); }
.auth-card__body .btn-block { margin-top: var(--spacing-2); }
.auth-foot {
    text-align: center; margin-top: var(--spacing-5); padding-top: var(--spacing-4);
    border-top: 1px solid var(--omar-divider);
    font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-primary-paragraph);
}
.auth-foot a { color: var(--link-primary); font-weight: 500; }
.auth-foot a:hover { color: var(--link-primary-hovered); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   14. Feed — identity strip, composer, poll editor, segmented tabs, posts, rail
   --------------------------------------------------------------------------- */
.feed-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 340px);
    gap: var(--spacing-6); align-items: start; max-width: 1100px;
}
.feed-main { min-width: 0; }
.feed-rail { position: sticky; top: calc(var(--topbar-h) + var(--spacing-5)); display: flex; flex-direction: column; gap: var(--spacing-4); }
.omar-stream { max-width: 800px; }

/* Identity strip */
.identity-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); padding: var(--spacing-5) var(--spacing-6); margin-bottom: var(--spacing-4); }
.identity-bar__av {
    width: 56px; height: 56px; border-radius: var(--radius-full); flex: 0 0 auto; overflow: hidden;
    background: var(--background-primary-50); color: var(--text-primary-sa-flag);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-lg); font-weight: 500; border: 2px solid var(--border-white);
}
.identity-bar__av img { width: 100%; height: 100%; object-fit: cover; }
.identity-bar__meta { flex: 1 1 220px; min-width: 0; }
.identity-bar__name { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; }
.identity-bar__headline { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); margin-top: 2px; }
.identity-bar__stats { display: flex; gap: var(--spacing-2); flex: 0 0 auto; }
.identity-stat {
    text-align: center; background: var(--background-neutral-50);
    border: 1px solid var(--omar-card-border); border-radius: var(--radius-md);
    padding: var(--spacing-2) var(--spacing-4); min-width: 72px;
}
.identity-stat b { display: block; font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; color: var(--text-primary); }
.identity-stat span { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); }
.identity-bar__link { flex: 0 0 auto; white-space: nowrap; }
.ann-ribbon, .composer-card { margin-bottom: var(--spacing-4); }

/* Composer */
.composer-row { display: flex; gap: var(--spacing-3); align-items: center; }
.composer-trigger {
    flex: 1; text-align: start; cursor: pointer;
    color: var(--form-field-text-placeholder);
}
.composer-trigger:hover { border-color: var(--form-field-border-hovered); background: var(--form-field-background-default); }
#composer-full { margin-top: var(--spacing-4) !important; }
.post-head { display: flex; align-items: flex-start; gap: var(--spacing-3); margin-bottom: var(--spacing-3); }
.post-head .meta { flex: 1; min-width: 0; }
.post-head .name { font-weight: 600; color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; }
.post-head .headline { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); }
.post-head .time { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); display: flex; align-items: center; gap: 4px; }

/* Poll editor */
.poll-editor { margin-top: var(--spacing-3); }
.poll-editor__box { background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-md); overflow: hidden; }
.poll-editor__opt { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); }
.poll-opt-media {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--omar-btn-radius); overflow: hidden;
    background: var(--background-neutral-100); border: 1px solid var(--form-field-border-default); color: var(--icon-default);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
    transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.poll-opt-media .govsa-icon { font-size: 1.25rem; }
.poll-opt-media:hover { border-color: var(--form-field-border-hovered); background: var(--button-background-neutral-pressed); }
.poll-opt-media.is-loading { opacity: .5; cursor: progress; }
.poll-opt-media img { width: 100%; height: 100%; object-fit: cover; }
.poll-opt-input { flex: 1; min-width: 0; }
.poll-opt-trail { flex: 0 0 auto; width: 32px; display: flex; align-items: center; justify-content: center; }
.poll-opt-add, .poll-opt-rm { width: 32px; height: 32px; }
.poll-opt-add { color: var(--icon-primary); }
.poll-opt-add .govsa-icon, .poll-opt-rm .govsa-icon { font-size: 1.25rem; }
.poll-opt-rm:hover { color: var(--text-error); background: var(--button-background-danger-secondary-hovered); }
.poll-editor__sep { height: 1px; background: var(--omar-divider); }
.poll-editor__remove {
    display: block; width: 100%; text-align: center; cursor: pointer;
    background: transparent; border: 0; color: var(--text-error); font-weight: 500;
    font-size: var(--t-sm); line-height: var(--lh-sm); min-height: 40px; padding: var(--spacing-2) var(--spacing-4);
    transition: background-color var(--dur-1) var(--ease);
}
.poll-editor__remove { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.poll-editor__remove:hover { background: var(--button-background-danger-secondary-hovered); }

/* Segmented feed tabs — DgaTabs horizontal (2px primary underline) */
.feed-tabs, .lb-tabs, .flw-tabs {
    display: flex; gap: var(--tab-button-gap);
    border-bottom: 1px solid var(--omar-divider);
}
.feed-tabs {
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    padding: var(--spacing-1) var(--spacing-2) 0; margin-bottom: var(--spacing-4);
    position: sticky; top: calc(var(--topbar-h) + var(--spacing-2)); z-index: 6;
}
.feed-tab, .lb-tab, .flw-tab {
    position: relative; flex: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1);
    min-height: 44px; padding: var(--spacing-2) var(--spacing-3);
    background: transparent; border: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-primary-paragraph); font-size: var(--t-md); line-height: var(--lh-md); font-weight: 500;
    transition: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.feed-tab::after, .lb-tab::after, .flw-tab::after {
    content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px;
    background: transparent; transition: background-color var(--dur-1) var(--ease);
}
.feed-tab:hover, .lb-tab:hover, .flw-tab:hover { color: var(--text-default); background: var(--button-background-neutral-hovered); }
.feed-tab.is-active, .lb-tab.is-active, .flw-tab.is-active { color: var(--text-primary); }
.feed-tab.is-active::after, .lb-tab.is-active::after, .flw-tab.is-active::after { background: var(--border-primary); }

/* Rail (who to follow / universities) */
.rail-card { padding: var(--spacing-5); }
.rail-card__head { font-size: var(--t-md); line-height: var(--lh-md); font-weight: 600; color: var(--text-display); margin-bottom: var(--spacing-2); }
.rail-card__body { display: flex; flex-direction: column; }
.rail-loading { padding: var(--spacing-2) 0; font-size: var(--t-sm); }
.rail-person, .rail-trend { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) 0; color: inherit; }
.rail-person + .rail-person, .rail-trend + .rail-trend { border-top: 1px solid var(--omar-divider); }
.rail-person__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-2); color: inherit; }
.rail-person__txt, .rail-trend__txt { min-width: 0; display: flex; flex-direction: column; }
.rail-person__name, .rail-trend__name {
    font-weight: 500; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-default);
    display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-person:hover .rail-person__name, .rail-trend:hover .rail-trend__name { color: var(--link-primary); }
.rail-person__sub, .rail-trend__sub { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-follow, .flw-follow, .post-x__follow, .chat-empty-cta {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 2px var(--buttons-md-padding);
    border: 0; border-radius: var(--omar-btn-radius);
    background: var(--button-background-primary-default); color: var(--text-oncolor-primary);
    font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), outline-color var(--dur-1) var(--ease);
}
.rail-follow:hover, .flw-follow:hover, .post-x__follow:hover, .chat-empty-cta:hover { background: var(--button-background-primary-hovered); color: var(--text-oncolor-primary); }
.rail-follow[disabled], .flw-follow[disabled] { background: var(--background-disabled); color: var(--text-default-disabled); cursor: progress; }
.flw-follow.is-on { background: transparent; color: var(--text-default); outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px; }
.flw-follow.is-on:hover { background: var(--button-background-danger-secondary-hovered); color: var(--text-error); outline-color: var(--border-error-light); }
.rail-trend__rank {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--background-primary-50); color: var(--text-primary); font-size: var(--t-xs); font-weight: 600;
}

/* Post card */
.post-card { margin-bottom: var(--spacing-4); }
.post-x { display: flex; gap: var(--spacing-3); align-items: flex-start; }
.post-x__av { flex: 0 0 auto; display: block; border-radius: var(--radius-full); }
.post-x__main { flex: 1; min-width: 0; }
.post-x__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-1); margin-bottom: var(--spacing-2); }
.post-x__name { font-weight: 600; font-size: var(--t-md); line-height: var(--lh-md); color: var(--text-display); }
.post-x__name:hover { color: var(--link-primary); }
.post-x__handle, .post-x__dot, .post-x__time { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); }
.post-x__end { margin-inline-start: auto; display: inline-flex; align-items: center; }
.post-x__menu { width: 32px; height: 32px; color: var(--icon-default-500); }
.post-x__menu .govsa-icon { font-size: 1.25rem; }
.post-x__menu:hover { color: var(--text-error); background: var(--button-background-danger-secondary-hovered); }
.post-body { white-space: pre-wrap; line-height: var(--lh-md); margin: 0 0 var(--spacing-2); color: var(--text-default); overflow-wrap: anywhere; }
.post-more { color: var(--link-primary); font-weight: 500; cursor: pointer; }
.post-more:hover { text-decoration: underline; }
.post-media {
    margin: var(--spacing-3) 0 var(--spacing-1);
    border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg); overflow: hidden;
    background: var(--background-neutral-100);
}
.post-media img, .post-media video { display: block; width: 100%; max-height: 540px; object-fit: contain; }
.post-media img, .proj-gallery img, .prof-activity img { cursor: zoom-in; }

/* Action bar — subtle md buttons with counts */
.post-x__actions { display: flex; align-items: center; gap: var(--spacing-3); margin-top: var(--spacing-2); }
.px-act {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    min-height: 32px; padding: 2px var(--spacing-2);
    background: transparent; border: 0; border-radius: var(--omar-btn-radius); cursor: pointer;
    color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.px-act .govsa-icon { font-size: 1.25rem; }
.px-act:hover { background: var(--button-background-neutral-hovered); color: var(--text-default); }
.px-act.like-btn.on { color: var(--text-primary); }
.px-share { margin-inline-start: auto; }
.heart-ic { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; transition: fill var(--dur-1) var(--ease), stroke var(--dur-1) var(--ease); }
.like-btn.on .heart-ic { fill: var(--icon-primary); stroke: var(--icon-primary); }

/* Legacy engagement rows (kept for any view still using them) */
.post-engage { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary-paragraph); font-size: var(--t-sm); padding: var(--spacing-2) 0 0; }
.post-actions { display: flex; gap: var(--spacing-2); border-top: 1px solid var(--omar-divider); margin-top: var(--spacing-2); padding-top: var(--spacing-2); }
.post-actions button { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: 32px; padding: 2px var(--spacing-3); background: transparent; border: 0; border-radius: var(--omar-btn-radius); color: var(--text-primary-paragraph); font-weight: 500; cursor: pointer; }
.post-actions button:hover { background: var(--button-background-neutral-hovered); color: var(--text-default); }
.post-actions button.on { color: var(--text-primary); }

/* Comments */
.post-card .comments { margin-top: var(--spacing-4); padding-top: var(--spacing-4); border-top: 1px solid var(--omar-divider); }
.px-cform { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); }
.px-cform .cinput { flex: 1; }
.clist strong { font-weight: 600; color: var(--text-display); }

/* Poll display */
.poll { border: 1px solid var(--omar-card-border); border-radius: var(--radius-md); padding: var(--spacing-4); margin: var(--spacing-1) 0 var(--spacing-3); background: var(--background-card); }
.poll__head { display: flex; align-items: center; gap: var(--spacing-2); font-weight: 600; color: var(--text-display); font-size: var(--t-sm); line-height: var(--lh-sm); margin-bottom: var(--spacing-3); }
.poll__head .govsa-icon { color: var(--icon-primary); font-size: 1.25rem; }
.poll__list { display: flex; flex-direction: column; gap: var(--spacing-2); }
.poll-opt {
    display: flex; align-items: center; gap: var(--spacing-2); width: 100%; text-align: start; cursor: pointer;
    background: transparent; border: 0; outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px;
    border-radius: var(--omar-btn-radius); min-height: 40px; padding: var(--spacing-2) var(--spacing-3);
    color: var(--text-default); font-size: var(--t-md); line-height: var(--lh-md); font-weight: 500;
    transition: background-color var(--dur-1) var(--ease), outline-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.poll-opt:hover { background: var(--button-background-neutral-default); }
.poll-opt.is-mine { background: var(--background-primary-50); color: var(--text-primary); outline-color: var(--border-primary); }
.poll-opt[disabled] { cursor: progress; opacity: .6; }
.poll-opt__txt { flex: 1; min-width: 0; }
.poll-opt__mine { flex: 0 0 auto; color: var(--icon-primary); }
.poll-opt__img, .poll-res__img { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex: 0 0 auto; border: 1px solid var(--omar-card-border); }
.poll-res__row { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-1); font-size: var(--t-sm); line-height: var(--lh-sm); }
.poll-res__txt { flex: 1; min-width: 0; font-weight: 500; color: var(--text-default); }
.poll-res__txt .govsa-icon { color: var(--icon-primary); font-size: 1rem; }
.poll-res__pct { font-weight: 600; color: var(--text-display); flex: 0 0 auto; }
.poll-res__track { height: 8px; border-radius: var(--radius-sm); background: var(--background-neutral-100); overflow: hidden; }
.poll-res__fill { display: block; height: 100%; background: var(--background-primary); border-radius: var(--radius-sm); transition: width var(--dur-2) var(--ease); }
.poll-res.is-mine .poll-res__fill { background: var(--button-background-primary-selected); }
.poll__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); flex-wrap: wrap; color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); margin-top: var(--spacing-3); }
.poll__actions { display: inline-flex; align-items: center; gap: var(--spacing-3); }
.poll-link { background: none; border: 0; cursor: pointer; padding: 0; color: var(--link-primary); font-weight: 500; font-size: var(--t-xs); line-height: var(--lh-xs); }
.poll-link:hover { color: var(--link-primary-hovered); text-decoration: underline; }
.poll-voters { margin-top: var(--spacing-3); border-top: 1px solid var(--omar-divider); padding-top: var(--spacing-3); }
.poll-voters__opt { margin-bottom: var(--spacing-3); }
.poll-voters__opt:last-child { margin-bottom: 0; }
.poll-voters__opt h5 { margin: 0 0 var(--spacing-2); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--text-display); }
.poll-voter {
    display: inline-flex; align-items: center; gap: var(--spacing-1); margin: 0 0 var(--spacing-1) var(--spacing-1);
    background: var(--omar-surface-3); border-radius: var(--radius-full);
    padding: 2px var(--spacing-3) 2px 2px; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-default);
}
.poll-voter .fig { width: 24px; height: 24px; font-size: var(--t-2xs); border-width: 1px; }

/* ---------------------------------------------------------------------------
   15. Profile — dossier header, rewards, sections, organisation views, modals
   --------------------------------------------------------------------------- */
.profile-id { display: flex; align-items: flex-start; gap: var(--spacing-5); padding: var(--spacing-6); margin-bottom: var(--spacing-5); }
.profile-id__av {
    width: 120px; height: 120px; border-radius: var(--radius-full); flex: 0 0 auto; overflow: hidden;
    background: var(--background-primary-50); color: var(--text-primary-sa-flag);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t-dmd); font-weight: 400; border: 4px solid var(--border-white); position: relative;
}
.profile-id__av::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--alpha-black-20); pointer-events: none; }
.profile-id__av img { width: 100%; height: 100%; object-fit: cover; }
.profile-id__av.clickable, .hero__av.clickable { cursor: pointer; }
.profile-id__main { flex: 1; min-width: 0; }
.profile-id__name { font-size: var(--t-dxs); line-height: var(--lh-dxs); font-weight: 600; margin: 0 0 var(--spacing-1); color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; }
.profile-id__headline { color: var(--text-primary-paragraph); font-size: var(--t-md); line-height: var(--lh-md); margin: 0 0 var(--spacing-1); }
.profile-id__meta { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); margin: var(--spacing-1) 0 0; }
.profile-id__counts, .org-hero__counts { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); flex-wrap: wrap; }
.profile-id__count {
    display: inline-flex; align-items: baseline; gap: 4px; cursor: pointer;
    background: transparent; outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px; border: 0;
    border-radius: var(--omar-btn-radius); min-height: 32px; padding: 2px var(--spacing-3);
    color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm);
    transition: background-color var(--dur-1) var(--ease);
}
.profile-id__count b { font-weight: 600; color: var(--text-display); }
.profile-id__count:hover { background: var(--button-background-neutral-default); }
.profile-id__actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--spacing-2); }

/* Rewards */
.rewards-card { margin-bottom: var(--spacing-5); }
.rewards-row { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }
.reward-stat {
    flex: 1; min-width: 140px; text-align: center;
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}
.reward-stat--points { background: var(--omar-gold-bg); border-color: var(--omar-gold-border); }
.reward-stat__num { font-size: var(--t-dsm); line-height: var(--lh-dsm); font-weight: 700; color: var(--text-display); }
.reward-stat--points .reward-stat__num { color: var(--omar-gold-ink); }
.reward-stat__lbl { margin-top: var(--spacing-1); color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--spacing-1); }
.reward-stat__lbl .govsa-icon { font-size: 1.125rem; color: var(--icon-primary); }
.reward-stat--points .reward-stat__lbl .govsa-icon { color: var(--omar-gold); }
.badges-wrap { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: var(--spacing-4); }

/* Section tools + content blocks */
.sec-tools { display: inline-flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; }
.prof-edu { display: flex; gap: var(--spacing-4); align-items: flex-start; }
.prof-edu__logo { width: 56px; height: 56px; flex: 0 0 auto; }
.prof-edu strong { font-size: var(--t-md); color: var(--text-display); }
.prof-activity, .prof-project {
    border: 1px solid var(--omar-card-border); border-radius: var(--radius-md);
    padding: var(--spacing-4); margin-bottom: var(--spacing-3); background: var(--background-card);
}
.prof-activity:last-child, .prof-project:last-child { margin-bottom: 0; }
.prof-activity__time { font-size: var(--t-xs); line-height: var(--lh-xs); margin-bottom: var(--spacing-2); }
.prof-activity__body { white-space: pre-wrap; line-height: var(--lh-md); color: var(--text-default); }
.prof-activity__stats { display: flex; gap: var(--spacing-4); font-size: var(--t-sm); margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--omar-divider); }
.prof-activity__stats .govsa-icon { color: var(--icon-primary); font-size: 1.125rem; }
.prof-project__title { font-size: var(--t-md); color: var(--text-display); font-weight: 600; }
.prof-project__stars .govsa-icon { color: var(--omar-gold); font-size: 1.125rem; }
.proj-gallery { display: grid; gap: var(--spacing-2); margin: var(--spacing-2) 0 var(--spacing-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.proj-gallery img, .proj-gallery video { width: 100%; max-height: 200px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--omar-card-border); display: block; }

/* Info rows (aside) */
.id-card__stats { border-top: 1px solid var(--omar-divider); }
.id-card__stat {
    display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-3) 0; border-bottom: 1px solid var(--omar-divider);
    font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-primary-paragraph);
}
.id-card__stat:last-child { border-bottom: none; }
.id-card__stat b { color: var(--text-display); font-weight: 600; }

/* Organisation (company / university) views */
.org-hero { display: flex; align-items: flex-start; gap: var(--spacing-5); padding: var(--spacing-6); margin-bottom: var(--spacing-5); }
.org-hero__logo {
    width: 112px; height: 112px; border-radius: var(--radius-lg); flex: 0 0 auto; overflow: hidden;
    background: var(--background-card); border: 1px solid var(--omar-card-border);
    display: flex; align-items: center; justify-content: center;
}
.org-hero__logo--crest { border-radius: var(--radius-full); }
.org-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.org-hero__logo .govsa-icon { font-size: 2.5rem; color: var(--icon-primary); }
html[data-theme="dark"] .org-hero__logo { background: var(--colors-base-white); }
.org-hero__main { flex: 1; min-width: 0; }
.org-hero__name { font-size: var(--t-dxs); line-height: var(--lh-dxs); font-weight: 600; margin: 0; display: flex; align-items: center; flex-wrap: wrap; color: var(--text-display); }
.org-hero__en { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-secondary-paragraph); margin-top: 2px; }
.org-hero__meta { display: flex; flex-wrap: wrap; gap: var(--spacing-4); margin-top: var(--spacing-3); color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); }
.org-hero__meta span { display: inline-flex; align-items: center; gap: var(--spacing-1); }
.org-hero__meta .govsa-icon { color: var(--icon-primary); font-size: 1.125rem; }
.org-hero__web { margin-top: var(--spacing-2); font-size: var(--t-sm); }
.org-hero__actions { flex: 0 0 auto; align-self: flex-start; }
.org-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-3); }
.org-metric { text-align: center; padding: var(--spacing-4) var(--spacing-3); border-radius: var(--radius-lg); border: 1px solid var(--omar-card-border); background: var(--background-card); }
.org-metric__num { font-size: var(--t-dsm); line-height: var(--lh-dsm); font-weight: 700; color: var(--text-display); }
.org-metric__lbl { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-primary-paragraph); margin-top: var(--spacing-1); display: flex; align-items: center; justify-content: center; gap: 4px; font-weight: 500; }
.org-metric__lbl .govsa-icon { color: var(--icon-primary); font-size: 1rem; }
.org-about { white-space: pre-wrap; line-height: var(--lh-md); margin: 0; color: var(--text-default); }
.org-job {
    display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3);
    border-radius: var(--radius-md); border: 1px solid var(--omar-card-border); margin-bottom: var(--spacing-2);
    color: inherit; background: var(--background-card);
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.org-job:last-child { margin-bottom: 0; }
.org-job:hover { background: var(--background-neutral-50); border-color: var(--border-neutral-primary); }
.org-job__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--featuredicons-background-brand-light); color: var(--featuredicons-icon-primary); }
.org-job__icon .govsa-icon { font-size: 1.25rem; }
html[data-theme="dark"] .org-job__icon { background: var(--colors-neutral-700); }
.org-job__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.org-job__title { font-weight: 500; color: var(--text-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-job__sub { font-size: var(--t-xs); line-height: var(--lh-xs); margin-top: 2px; }
.org-ann { padding: var(--spacing-4) 0; border-bottom: 1px solid var(--omar-divider); }
.org-ann:first-child { padding-top: 0; }
.org-ann:last-child { border-bottom: none; padding-bottom: 0; }
.org-ann__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-3); }
.org-ann__title { font-weight: 600; color: var(--text-display); }
.org-ann__time { font-size: var(--t-xs); line-height: var(--lh-xs); flex: 0 0 auto; }
.org-ann__body { margin: var(--spacing-2) 0 0; color: var(--text-primary-paragraph); line-height: var(--lh-md); white-space: pre-wrap; }

/* Profile-photo modal — dark stage with on-colour controls */
.photo-modal {
    position: fixed; inset: 0; z-index: 2200;
    background: var(--colors-alpha-alpha-black-90);
    display: flex; flex-direction: column;
    opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.photo-modal.in { opacity: 1; }
.photo-modal__top { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4) var(--spacing-6); color: var(--text-oncolor-primary); border-bottom: 1px solid var(--alpha-white-10); }
.photo-modal__title { font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-lg); }
.photo-modal__x, .lightbox__x, .lightbox__nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--omar-btn-radius); cursor: pointer;
    background: transparent; color: var(--text-oncolor-primary);
    transition: background-color var(--dur-1) var(--ease);
}
.photo-modal__x .govsa-icon, .lightbox__x .govsa-icon, .lightbox__nav .govsa-icon { font-size: 1.5rem; }
.photo-modal__x:hover, .lightbox__x:hover, .lightbox__nav:hover { background: var(--button-background-transparent-hovered); }
.photo-modal__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--spacing-6); }
.photo-modal__img {
    position: relative; width: min(360px, 78vw); aspect-ratio: 1 / 1; border-radius: var(--radius-full); overflow: hidden;
    background: var(--colors-neutral-800); display: flex; align-items: center; justify-content: center;
    border: 4px solid var(--border-white);
}
.photo-modal__img img { width: 100%; height: 100%; object-fit: cover; }
.photo-modal__ph { color: var(--text-oncolor-primary); font-weight: 500; font-size: var(--t-dmd); }
.photo-modal__pill { position: absolute; bottom: var(--spacing-4); inset-inline-start: var(--spacing-4); background: var(--colors-alpha-alpha-black-60); color: var(--text-oncolor-primary); border-radius: var(--radius-full); }
.photo-modal__pill .govsa-icon { font-size: 1rem; }
.photo-modal__bar { display: flex; justify-content: center; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-2) var(--spacing-6); border-top: 1px solid var(--alpha-white-10); flex-wrap: wrap; }
.photo-modal__bar button {
    background: transparent; border: 0; cursor: pointer; color: var(--text-oncolor-primary);
    display: inline-flex; flex-direction: column; align-items: center; gap: var(--spacing-1);
    font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: 500; padding: var(--spacing-2) var(--spacing-4); border-radius: var(--radius-sm);
    transition: background-color var(--dur-1) var(--ease);
}
.photo-modal__bar button:hover { background: var(--button-background-transparent-hovered); }
.photo-modal__bar .govsa-icon { font-size: 1.5rem; }

/* People modal (followers / following) */
.flw-overlay { z-index: 2350; }
.flw-modal {
    width: 100%; max-width: 560px; max-height: min(82vh, 720px);
    background: var(--background-white); border-radius: var(--radius-md); box-shadow: var(--shadow-3xl);
    display: flex; flex-direction: column; overflow: hidden;
}
.flw-head { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-6) var(--spacing-6) var(--spacing-3); }
.flw-head__t { font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-lg); color: var(--text-display); display: flex; flex-direction: column; gap: 2px; }
.flw-head__s { font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-primary-paragraph); }
.flw-tabs { flex: 0 0 auto; padding: 0 var(--spacing-4); }
.flw-tab { font-size: var(--t-sm); line-height: var(--lh-sm); }
.flw-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--spacing-2) var(--spacing-4); }
.flw-row { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-2); border-bottom: 1px solid var(--omar-divider); border-radius: var(--radius-sm); transition: background-color var(--dur-1) var(--ease); }
.flw-row:last-child { border-bottom: none; }
.flw-row:hover { background: var(--background-neutral-50); }
.flw-row__link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--spacing-3); color: inherit; }
.flw-row__av { flex: 0 0 auto; }
.flw-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flw-row__name { font-weight: 600; color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; font-size: var(--t-md); line-height: var(--lh-md); }
.flw-row:hover .flw-row__name { color: var(--link-primary); }
.flw-row__handle { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-secondary-paragraph); }
.flw-row__bio { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-primary-paragraph); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flw-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-12) var(--spacing-5); color: var(--text-secondary-paragraph); text-align: center; font-size: var(--t-md); }
.flw-state .govsa-icon { font-size: 2.5rem; color: var(--icon-default-400); }

/* Image lightbox */
.lightbox {
    position: fixed; inset: 0; z-index: 2450;
    background: var(--colors-alpha-alpha-black-90);
    display: flex; flex-direction: column; opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.lightbox.in { opacity: 1; }
.lightbox__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4) var(--spacing-6); color: var(--text-oncolor-primary); }
.lightbox__count { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--text-oncolor-secondary); background: var(--alpha-white-10); border-radius: var(--radius-full); padding: 2px var(--spacing-3); }
.lightbox__count b { color: var(--text-oncolor-primary); font-weight: 600; }
.lightbox__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-1) var(--spacing-5) var(--spacing-8); position: relative; }
.lightbox__img { max-width: min(94vw, 1120px); max-height: 100%; object-fit: contain; border-radius: var(--radius-md); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.lightbox__img.in { opacity: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--alpha-white-10); }
.lightbox__nav:hover { background: var(--button-background-transparent-hovered); }
.lightbox__nav--prev { right: var(--spacing-6); }
.lightbox__nav--next { left: var(--spacing-6); }

/* ---------------------------------------------------------------------------
   16. People directory & universities
   --------------------------------------------------------------------------- */
.lk-grid { display: grid; gap: var(--spacing-5); grid-template-columns: 1fr; align-items: start; }
.lk-rail, .lk-aside, .lk-main { min-width: 0; }
.lk-aside { display: none; }
.people-grid { display: grid; gap: var(--spacing-4); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.person-card {
    display: flex; align-items: center; gap: var(--spacing-3); text-align: start;
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}
.person-card__cover { height: 56px; background: var(--omar-brand-deep); }
.person-card__av {
    width: 56px; height: 56px; margin: 0; border-radius: var(--radius-full); flex: 0 0 auto; overflow: hidden;
    background: var(--background-primary-50); color: var(--text-primary-sa-flag);
    display: flex; align-items: center; justify-content: center; font-weight: 500; border: 2px solid var(--border-white);
}
.person-card__av img { width: 100%; height: 100%; object-fit: cover; }
.person-card__body { flex: 1; min-width: 0; }
.person-card__name { display: flex; align-items: center; flex-wrap: wrap; font-weight: 600; color: var(--text-display); }
.person-card__name:hover { color: var(--link-primary); }
.person-card__headline { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); padding: 2px 0 0; }
.person-card__cta { flex: 0 0 auto; white-space: nowrap; }

/* University cards & detail hero */
.hero { overflow: hidden; margin-bottom: var(--spacing-5); }
.hero__cover { height: 120px; background: var(--omar-brand-deep); }
.hero__body { padding: 0 var(--spacing-6) var(--spacing-6); position: relative; }
.hero__av {
    width: 96px; height: 96px; margin-top: -48px; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--background-card); border: 4px solid var(--border-white);
    display: flex; align-items: center; justify-content: center; color: var(--icon-primary);
}
.hero__av img { width: 100%; height: 100%; object-fit: contain; }
.hero__name { font-size: var(--t-dxs); line-height: var(--lh-dxs); font-weight: 600; margin: var(--spacing-3) 0 var(--spacing-1); color: var(--text-display); }
.hero__headline { color: var(--text-primary-paragraph); margin: 0 0 var(--spacing-1); }
.hero__meta { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); margin: 0 0 var(--spacing-4); }
.hero__actions { display: flex; gap: var(--spacing-2); flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   17. Task marketplace
   --------------------------------------------------------------------------- */
.task-card { margin-bottom: var(--spacing-4); }
.task-card__head { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-3); padding-bottom: var(--spacing-3); border-bottom: 1px solid var(--omar-divider); }
.task-card__by { flex: 1; min-width: 0; }
.task-card__by .name { font-weight: 600; color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; }
.task-card__title { font-size: var(--t-lg); line-height: var(--lh-lg); font-weight: 600; color: var(--text-display); margin: 0 0 var(--spacing-2); }
.task-card__desc { color: var(--text-default); line-height: var(--lh-md); margin: 0 0 var(--spacing-3); white-space: pre-wrap; }
.task-card__reqs { display: flex; flex-wrap: wrap; gap: var(--spacing-1); margin-bottom: var(--spacing-3); }
.task-card__foot { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-3); padding-top: var(--spacing-3); border-top: 1px solid var(--omar-divider); }
.task-card__done { display: inline-flex; align-items: center; gap: var(--spacing-1); color: var(--text-success); font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; }
.task-card__done .govsa-icon { color: var(--icon-success); font-size: 1.125rem; }
.task-card__owner { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-3); flex-wrap: wrap; }
.task-mark { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-2); }
.task-mark .input { flex: 1; }

.reco-item { padding: var(--spacing-3) 0; border-bottom: 1px solid var(--omar-divider); }
.reco-item:last-child { border-bottom: none; padding-bottom: 0; }
.reco-item__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); margin-bottom: var(--spacing-2); flex-wrap: wrap; }
.reco-item__title { font-weight: 600; color: var(--text-display); font-size: var(--t-sm); line-height: var(--lh-sm); }
.reco-item__provider { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); margin: 2px 0 var(--spacing-2); }
.reco-item__skills { display: flex; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   18. Leaderboard — podium cards, ranks (gold #1 via DGA secondary), list rows
   --------------------------------------------------------------------------- */
.lb-tabs-wrap { display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; padding: var(--spacing-2) var(--spacing-4) 0; margin-bottom: var(--spacing-5); }
.lb-tabs { flex: 1 1 240px; border-bottom: 0; }
.lb-tabs-wrap .lb-tab { border-bottom: 1px solid var(--omar-divider); }
.lb-tabs-wrap .lb-tab.is-active { border-bottom-color: transparent; }
.lb-search { flex: 0 1 320px; display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-2); padding-block: 0; }
.lb-search .govsa-icon { color: var(--icon-default-500); font-size: 1.25rem; }
.lb-search__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; box-sizing: border-box; color: var(--form-field-text-filled); font-size: var(--t-md); line-height: var(--lh-md); min-height: 38px; -webkit-appearance: none; appearance: none; }

.lb-podium { display: flex; align-items: stretch; justify-content: center; gap: var(--spacing-4); flex-wrap: wrap; margin-bottom: var(--spacing-5); }
.lb-pod {
    flex: 0 1 240px; position: relative; text-align: center;
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    padding: var(--spacing-8) var(--spacing-4) var(--spacing-5);
}
.lb-pod--1 { border-color: var(--omar-gold-border); background: var(--omar-gold-bg); }
.lb-pod__crown {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--omar-gold); color: var(--colors-secondary-gold-950);
    border-radius: var(--radius-full); font-weight: 600;
}
.lb-pod__rank, .lb-row__rank {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--t-sm); font-weight: 600; line-height: 1;
    background: var(--button-background-neutral-default); color: var(--text-primary-paragraph);
}
.lb-pod__rank { margin: 0 auto var(--spacing-3); }
.lb-pod--1 .lb-pod__rank, .lb-row__rank.rank-1 { background: var(--omar-gold); color: var(--colors-secondary-gold-950); }
.lb-pod--2 .lb-pod__rank, .lb-row__rank.rank-2 { background: var(--colors-neutral-700); color: var(--text-oncolor-primary); }
.lb-pod--3 .lb-pod__rank, .lb-row__rank.rank-3 { background: var(--background-primary); color: var(--text-oncolor-primary); }
.lb-pod__av { display: flex; align-items: center; justify-content: center; margin: 0 0 var(--spacing-3); }
.lb-pod__av .fig, .lb-pod__av .logo-box { margin: 0; }
.lb-pod__name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; font-weight: 600; color: var(--text-display); }
a.lb-pod__name:hover { color: var(--link-primary); }
.lb-pod__uni { color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); margin-top: 2px; }
.lb-pod__pts { margin-top: var(--spacing-3); font-weight: 600; color: var(--text-display); display: inline-flex; align-items: center; gap: var(--spacing-1); }
.lb-pod__pts .govsa-icon { color: var(--omar-gold); font-size: 1.125rem; }
.lb-pod__badges { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); margin-top: var(--spacing-1); }

.lb-list { padding: var(--spacing-2) var(--spacing-4); }
.lb-row { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-2); border-bottom: 1px solid var(--omar-divider); border-radius: var(--radius-sm); transition: background-color var(--dur-1) var(--ease); }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--background-neutral-50); }
.lb-row__rank { flex: 0 0 auto; }
.lb-row__meta { flex: 1; min-width: 0; }
.lb-row__name { font-weight: 600; color: var(--text-display); display: flex; align-items: center; flex-wrap: wrap; }
a.lb-row__name:hover { color: var(--link-primary); }
.lb-row__pts { flex: 0 0 auto; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-secondary-paragraph); display: inline-flex; align-items: center; gap: 4px; }
.lb-row__pts b { color: var(--text-display); font-weight: 600; }
.lb-row__pts .govsa-icon { color: var(--omar-gold); font-size: 1rem; }
.lb-uni__logo { width: 40px; height: 40px; border-radius: var(--radius-md); flex: 0 0 auto; }
.lb-logo.fig--lg { width: 80px; height: 80px; padding: var(--spacing-2); }
.lb-logo.fig--sm { width: 32px; height: 32px; padding: 2px; }

/* ---------------------------------------------------------------------------
   19. Notifications
   --------------------------------------------------------------------------- */
.notif-item { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-2); border-bottom: 1px solid var(--omar-divider); border-radius: var(--radius-sm); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--background-primary-50); box-shadow: inset -3px 0 0 var(--border-primary); }
.notif-item__link { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: var(--spacing-3); color: inherit; }
.notif-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notif-item .t { color: var(--text-default); font-size: var(--t-md); line-height: var(--lh-md); }
.notif-item .t .govsa-icon { font-size: 1.125rem; }
.notif-item .s { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); margin-top: 2px; }
.notif-x { width: 32px; height: 32px; color: var(--icon-default-500); flex: 0 0 auto; }
.notif-x .govsa-icon { font-size: 1.125rem; }
.notif-x:hover { color: var(--text-error); background: var(--button-background-danger-secondary-hovered); }

/* ---------------------------------------------------------------------------
   20. Sheet modal (add / edit), mention menu, image picker
   --------------------------------------------------------------------------- */
.sheet-modal { z-index: 2300; align-items: flex-start; overflow-y: auto; padding-top: var(--spacing-8); }
.sheet {
    background: var(--background-white); width: 100%; max-width: 640px;
    border-radius: var(--radius-md); box-shadow: var(--shadow-3xl);
    display: flex; flex-direction: column; max-height: calc(100vh - 64px);
}
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-6) var(--spacing-6) var(--spacing-3); }
.sheet__title { font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-lg); color: var(--text-display); }
.sheet__body { padding: var(--spacing-2) var(--spacing-6) var(--spacing-4); overflow-y: auto; }
.sheet__note { color: var(--text-primary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); margin: 0 0 var(--spacing-4); }
.sheet__note b { color: var(--text-error); }
.sheet__banner {
    background: var(--background-neutral-50); border: 1px solid var(--omar-card-border); border-radius: var(--radius-md);
    padding: var(--spacing-4); display: flex; gap: var(--spacing-4); align-items: flex-start; margin-bottom: var(--spacing-4);
}
.sheet__banner .txt { flex: 1; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-primary-paragraph); }
.sheet__banner .txt b { color: var(--text-display); }
.sheet__banner .txt .lk { color: var(--link-primary); font-weight: 500; }
.sheet__foot { display: flex; gap: var(--spacing-2); justify-content: flex-start; padding: var(--spacing-3) var(--spacing-6) var(--spacing-6); flex-wrap: wrap; }

/* Mention autocomplete — DgaMenu */
.mention { color: var(--link-primary); font-weight: 500; }
.mention:hover { color: var(--link-primary-hovered); text-decoration: underline; }
.mention-menu {
    position: absolute; z-index: 1400; min-width: 240px;
    background: var(--background-menu); border: 1px solid var(--omar-card-border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-2xl); max-height: 280px; overflow-y: auto; padding: var(--spacing-1);
}
.mention-opt { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.mention-opt:hover { background: var(--button-background-neutral-hovered); }
.mention-opt.active { background: var(--background-primary-50); }
.mention-opt.active .nm { color: var(--text-primary); }
.mention-opt .fig { width: 32px; height: 32px; font-size: var(--t-xs); font-weight: 600; }
.mention-opt .nm { font-weight: 500; color: var(--text-default); font-size: var(--t-sm); line-height: var(--lh-sm); display: flex; align-items: center; flex-wrap: wrap; }
.mention-opt .hd { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); }

/* Admin image picker — selectable DgaCard */
.img-pick { display: grid; gap: var(--spacing-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.img-pick__opt {
    position: relative; cursor: pointer;
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-radius: var(--radius-lg);
    padding: var(--spacing-4); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2);
    font-family: inherit; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.img-pick__opt:hover { background: var(--background-neutral-50); }
.img-pick__opt .logo-box { width: 96px; height: 96px; }
.img-pick__lbl { font-size: var(--t-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--text-default); text-align: center; }
.img-pick__tick {
    position: absolute; top: var(--spacing-3); inset-inline-end: var(--spacing-3);
    width: 24px; height: 24px; border-radius: var(--radius-full);
    display: none; align-items: center; justify-content: center;
    background: var(--background-primary); color: var(--text-oncolor-primary);
}
.img-pick__tick .govsa-icon { font-size: .875rem; --omar-icon: var(--icon-tick-02); }
.img-pick__opt.is-sel { border-color: var(--border-primary); background: var(--background-primary-50); }
.img-pick__opt.is-sel .img-pick__tick { display: inline-flex; }

/* ---------------------------------------------------------------------------
   21. Direct messaging dock
   --------------------------------------------------------------------------- */
.chat-btn { position: relative; }
.chat-dock {
    position: fixed; bottom: 0; inset-inline-start: var(--spacing-6); z-index: 2300;
    width: 384px; max-width: calc(100vw - 32px); height: min(72vh, 640px);
    transform: translateY(110%); opacity: 0; pointer-events: none;
    transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.chat-dock.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.chat-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--background-card); border: 1px solid var(--omar-card-border); border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-3xl); overflow: hidden;
}
.chat-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--omar-divider);
    background: var(--background-neutral-50);
}
.chat-head__l, .chat-head__r { display: flex; align-items: center; gap: var(--spacing-1); min-width: 0; }
.chat-head__title { font-weight: 600; font-size: var(--t-md); line-height: var(--lh-md); color: var(--text-display); display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.chat-ico { width: 36px; height: 36px; }
.chat-ico .govsa-icon { font-size: 1.25rem; }
.chat-thread__who { display: flex; align-items: center; gap: var(--spacing-2); min-width: 0; }
.chat-thread__id { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.chat-thread__name { font-weight: 600; font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-display); display: inline-flex; align-items: center; }
.chat-thread__name:hover { color: var(--link-primary); }
.chat-thread__sub { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-search { flex: 0 0 auto; position: relative; padding: var(--spacing-3) var(--spacing-3) var(--spacing-2); }
.chat-search .govsa-icon { position: absolute; inset-inline-start: calc(var(--spacing-3) + 10px); top: 50%; transform: translateY(-30%); color: var(--icon-default-500); font-size: 1.25rem; pointer-events: none; }
.chat-search input { padding-inline-start: 40px; }
.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--spacing-1) var(--spacing-2) var(--spacing-3); }
.chat-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-12) var(--spacing-5); text-align: center; color: var(--text-secondary-paragraph); font-size: var(--t-sm); line-height: var(--lh-sm); }
.chat-state .govsa-icon { font-size: 2.25rem; color: var(--icon-default-400); }
.chat-empty-cta { margin-top: var(--spacing-1); }
.chat-row, .chat-pick-row {
    width: 100%; display: flex; align-items: center; gap: var(--spacing-3); cursor: pointer;
    background: transparent; border: 0; border-radius: var(--omar-btn-radius); padding: var(--spacing-2) var(--spacing-3);
    text-align: start; color: inherit; transition: background-color var(--dur-1) var(--ease);
}
.chat-row:hover, .chat-pick-row:hover { background: var(--button-background-neutral-hovered); }
.chat-row__av { position: relative; flex: 0 0 auto; display: inline-flex; }
.chat-row__dot { position: absolute; top: 0; inset-inline-end: 0; width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--background-primary); border: 2px solid var(--background-card); }
.chat-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row__top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.chat-row__name { font-weight: 500; color: var(--text-default); font-size: var(--t-sm); line-height: var(--lh-sm); display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-row__time { flex: 0 0 auto; font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); }
.chat-row__prev { font-size: var(--t-sm); line-height: var(--lh-sm); color: var(--text-secondary-paragraph); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row.is-unread .chat-row__name { font-weight: 600; }
.chat-row.is-unread .chat-row__prev { color: var(--text-default); font-weight: 500; }
.chat-pick-row .fig { width: 40px; height: 40px; font-size: var(--t-sm); font-weight: 600; }
.chat-pick-row__body { display: flex; flex-direction: column; min-width: 0; }
.chat-pick-row__name { font-weight: 500; color: var(--text-default); display: inline-flex; align-items: center; font-size: var(--t-sm); line-height: var(--lh-sm); }
.chat-pick-row__sub { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--text-secondary-paragraph); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-4) var(--spacing-3); background: var(--background-body); }
.chat-bubble {
    max-width: 78%; padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-lg);
    font-size: var(--t-sm); line-height: var(--lh-sm); position: relative;
}
.chat-bubble__txt { white-space: pre-wrap; word-break: break-word; }
.chat-bubble__time { display: block; margin-top: 2px; font-size: var(--t-2xs); line-height: var(--lh-2xs); opacity: .75; text-align: end; }
.chat-bubble.mine { margin-inline-start: auto; background: var(--background-primary); color: var(--text-oncolor-primary); border-end-end-radius: var(--radius-xs); }
.chat-bubble.theirs { margin-inline-end: auto; background: var(--omar-surface-3); color: var(--text-default); border-end-start-radius: var(--radius-xs); }
.chat-composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-top: 1px solid var(--omar-divider); background: var(--background-card); }
.chat-composer textarea { flex: 1; resize: none; max-height: 120px; padding: var(--spacing-2) var(--spacing-3); }
.chat-send {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--omar-btn-radius); cursor: pointer;
    background: var(--button-background-primary-default); color: var(--text-oncolor-primary); border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--dur-1) var(--ease);
}
.chat-send .govsa-icon { font-size: 1.5rem; }
.chat-send:hover { background: var(--button-background-primary-hovered); }
.chat-send:active { background: var(--button-background-primary-selected); }

/* ---------------------------------------------------------------------------
   22. Accessibility toolbar (النفاذ الرقمي) — DgaFloatingButton + DgaMenu + DgaSwitch
   --------------------------------------------------------------------------- */
.a11y-fab {
    position: fixed; bottom: var(--spacing-5); left: var(--spacing-5); z-index: 3500;
    width: 56px; height: 56px; border-radius: var(--radius-full);
    background: var(--button-background-primary-default); color: var(--text-oncolor-primary); border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg);
    transition: background-color var(--dur-1) var(--ease);
}
.a11y-fab .govsa-icon { font-size: 1.75rem; --omar-icon: var(--icon-accessibility); }
.a11y-fab:hover { background: var(--button-background-primary-hovered); }
.a11y-fab:focus-visible { outline: var(--omar-focus); outline-offset: 3px; }
.a11y-panel {
    position: fixed; bottom: calc(var(--spacing-5) + 64px); left: var(--spacing-5); z-index: 3500;
    width: min(340px, calc(100vw - 32px));
    background: var(--background-menu); border: 1px solid var(--omar-card-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-2xl);
    padding: var(--spacing-2); display: none; max-height: min(80vh, 600px); overflow-y: auto;
}
.a11y-panel.in { display: block; }
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-1); margin-bottom: var(--spacing-1); border-bottom: 1px solid var(--omar-divider); }
.a11y-panel__title { display: flex; align-items: center; gap: var(--spacing-2); font-weight: 600; font-size: var(--t-md); line-height: var(--lh-md); color: var(--text-display); }
.a11y-panel__title .govsa-icon { color: var(--icon-primary); font-size: 1.5rem; --omar-icon: var(--icon-accessibility); }
.a11y-panel__x { width: 36px; height: 36px; }
.a11y-row {
    display: flex; align-items: center; gap: var(--spacing-3); width: 100%; text-align: start;
    background: transparent; border: 0; cursor: pointer;
    padding: var(--spacing-2); border-radius: var(--omar-btn-radius); color: var(--text-default);
    font-size: var(--t-sm); line-height: var(--lh-sm); min-height: 44px;
    transition: background-color var(--dur-1) var(--ease);
}
.a11y-row:hover { background: var(--button-background-neutral-hovered); }
.a11y-row:focus-visible { outline: var(--omar-focus); outline-offset: -2px; }
.a11y-row--stepper, .a11y-row--stepper:hover { cursor: default; background: transparent; }
.a11y-row__ic {
    width: 32px; height: 32px; border-radius: var(--radius-sm); flex: 0 0 auto;
    background: var(--featuredicons-background-brand-light); color: var(--featuredicons-icon-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme="dark"] .a11y-row__ic { background: var(--colors-neutral-700); }
.a11y-row__ic .govsa-icon { font-size: 1.125rem; }
.a11y-row__lbl { flex: 1; font-weight: 500; }
/* Switch (DgaSwitch 48×24) */
.a11y-switch { width: 48px; height: 24px; border-radius: var(--radius-full); flex: 0 0 auto; position: relative; background: var(--background-card); outline: 1px solid var(--controls-control-neutral-checked); outline-offset: -1px; transition: background-color var(--dur-2) var(--ease), outline-color var(--dur-2) var(--ease); }
.a11y-switch__dot { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--controls-control-neutral-checked); transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.a11y-row[aria-checked="true"] .a11y-switch { background: var(--controls-control-primary-checked); outline-color: var(--controls-control-primary-checked); }
.a11y-row[aria-checked="true"] .a11y-switch__dot { transform: translateX(-24px); background: var(--colors-base-white); }
.a11y-row:hover .a11y-switch { box-shadow: 0 0 0 4px var(--controls-control-ripple-effect); }
/* Text-size stepper */
.a11y-step { display: inline-flex; align-items: center; gap: var(--spacing-1); flex: 0 0 auto; }
.a11y-step__btn {
    width: 32px; height: 32px; border-radius: var(--omar-btn-radius); cursor: pointer;
    border: 0; outline: 1px solid var(--border-neutral-secondary); outline-offset: -1px;
    background: transparent; color: var(--text-default); font-size: var(--t-lg); font-weight: 500; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background-color var(--dur-1) var(--ease);
}
.a11y-step__btn:hover { background: var(--button-background-neutral-default); }
.a11y-step__btn:disabled { color: var(--text-default-disabled); cursor: not-allowed; background: transparent; }
.a11y-step__val { min-width: 48px; text-align: center; font-weight: 600; font-size: var(--t-sm); color: var(--text-display); }
.a11y-reset { margin: var(--spacing-2) var(--spacing-1) var(--spacing-1); }
.a11y-note { color: var(--text-secondary-paragraph); font-size: var(--t-xs); line-height: var(--lh-xs); text-align: center; margin: var(--spacing-2) var(--spacing-2) var(--spacing-1); }
/* Reading guide */
.a11y-guide {
    position: fixed; left: 0; right: 0; top: 0; height: 42px;
    pointer-events: none; z-index: 1900; display: none;
    background: var(--colors-alpha-alpha-green-10);
    border-top: 2px solid var(--border-primary); border-bottom: 2px solid var(--border-primary);
}
/* Effects toggled on <html> */
html.a11y-contrast {
    --text-primary-paragraph: var(--text-default);
    --text-secondary-paragraph: var(--colors-neutral-700);
    --omar-card-border: var(--colors-neutral-500);
    --omar-divider: var(--colors-neutral-500);
    --form-field-border-default: var(--colors-neutral-700);
    --form-field-text-placeholder: var(--colors-neutral-700);
}
html.a11y-contrast[data-theme="dark"] {
    --text-secondary-paragraph: var(--colors-neutral-100);
    --omar-card-border: var(--colors-neutral-400);
    --omar-divider: var(--colors-neutral-400);
    --form-field-border-default: var(--colors-neutral-200);
    --form-field-text-placeholder: var(--colors-neutral-200);
}
html.a11y-links .app-main a:not(.btn-omar):not(.btn-omar-2):not(.btn-omar-line):not(.rail-follow),
html.a11y-links .breadcrumb-bar a,
html.a11y-links .auth-card a,
html.a11y-links .mention,
html.a11y-links .link-omar { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600; }
html.a11y-spacing .app-main, html.a11y-spacing .auth-card__body { line-height: 2; letter-spacing: .01em; word-spacing: .04em; }
html.a11y-spacing .post-body, html.a11y-spacing .task-card__desc, html.a11y-spacing .org-about { line-height: 2.1; }

/* ---------------------------------------------------------------------------
   23. Motion — DGA: short colour/opacity transitions only; fully removable
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
    transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
   24. Responsive
      - Mobile   (< 768px)             → hamburger drawer
      - Tablet   (768px – 1439.98px)   → fixed sidebar (mandated band)
      - Desktop  (≥ 1440px)            → hamburger drawer
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1439.98px) {
    .app-sidebar { display: flex; }
    .app-content-wrap { margin-inline-start: var(--sb-w); }
    .app-hamburger { display: none; }
    .app-drawer, .app-drawer-overlay { display: none; }
}
@media (min-width: 992px) {
    .lk-grid { grid-template-columns: 300px minmax(0, 1fr); }
    .lk-rail, .lk-aside { position: sticky; top: calc(var(--topbar-h) + var(--spacing-5)); }
    .lk-grid--profile { grid-template-columns: minmax(0, 1fr) 300px; }
    .lk-grid--profile .lk-aside { display: block; }
    .page-head h1 { font-size: var(--t-dsm); line-height: var(--lh-dsm); }
}
@media (min-width: 1400px) {
    .lk-grid { grid-template-columns: 300px minmax(0, 1fr) 320px; }
    .lk-aside { display: block; }
    .lk-grid--profile { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1199.98px) {
    .feed-shell { grid-template-columns: 1fr; max-width: 760px; }
    .feed-rail { display: none; }
}
@media (max-width: 767.98px) {
    html, body { overflow-x: hidden; }
    .app-main { padding: var(--spacing-5) var(--spacing-4) var(--spacing-8); }
    .panel { padding: var(--spacing-4); }
    .identity-bar { flex-wrap: wrap; }
    .identity-bar__link { width: 100%; }
    .profile-id { flex-wrap: wrap; }
    .profile-id__actions { flex-direction: row; width: 100%; flex-wrap: wrap; }
    .dash-grid { grid-template-columns: 1fr !important; }
    .org-hero { flex-direction: column; text-align: center; align-items: center; }
    .org-hero__name { justify-content: center; }
    .org-hero__meta, .org-hero__counts { justify-content: center; }
    .org-hero__actions { align-self: center; }
    .alert-omar, .toast { padding: var(--spacing-4); padding-inline-start: calc(var(--spacing-4) + 8px); }
    .confirm-box, .sheet { padding-inline: 0; }
    .confirm-box { padding: var(--spacing-5); }
}
@media (max-width: 575.98px) {
    .page-head h1 { font-size: var(--t-xl); line-height: var(--lh-xl); }
    .auth-card__body { padding: var(--spacing-5) var(--spacing-4); }
    .auth-card__head { padding: var(--spacing-6) var(--spacing-4) var(--spacing-5); }
    .user-chip__name, .user-chip__role { display: none; }
    .user-chip { padding: 0; }
    .btn-logout span { display: none; }
    .btn-logout { padding: 0 var(--spacing-2); }
    .breadcrumb-bar { max-width: 42vw; }
    .toast-stack { inset-inline: var(--spacing-4); width: auto; }
    .chat-dock { inset-inline: 0; bottom: 0; width: 100%; max-width: 100%; height: 100dvh; }
    .chat-card { border-radius: 0; border-inline: none; }
    .feed-tabs { top: calc(var(--topbar-h) + 4px); }
    .lightbox__nav { width: 40px; height: 40px; }
    .lightbox__nav--prev { right: var(--spacing-2); }
    .lightbox__nav--next { left: var(--spacing-2); }
    .flw-row__bio { -webkit-line-clamp: 3; }
    .stat-card__num { font-size: var(--t-dxs); line-height: var(--lh-dxs); }
}