/* Home module styles (admin portal and employee portal). Tokens only; logical properties so Arabic mirrors.
   The brand scale (--brand-*) is used for illustrations and chart decoration only; series use --chart-1..5. */

.home { display: grid; gap: var(--space-6); }

/* Greeting */
.home-title { display: grid; gap: var(--space-1); }
.home-hello { display: block; color: var(--link); font-size: var(--text-body-md-size); font-weight: 500; letter-spacing: 0; }
.home-name { display: block; font-size: var(--text-h4-size); line-height: 1.15; font-weight: 500; }

/* Two columns on wide screens; one ordered column below 1200px */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); align-items: start; }
.home-col { display: grid; gap: var(--space-6); min-width: 0; }

.home-section { display: grid; gap: var(--space-3); min-width: 0; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.home-h2 { margin: 0; font-size: var(--text-body-xl-size); line-height: 1.3; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); }
.home-h3 { margin: 0; font-size: var(--text-body-md-size); font-weight: 600; }
:lang(ar) .home-h2 { letter-spacing: 0; }
.home-side-card { padding: var(--card-padding); display: grid; gap: var(--space-3); min-width: 0; }
.home-empty-line { margin: 0; }

/* Illustrations: shape classes take their colors from the context */
.home-art { display: block; width: 100%; height: 100%; }
.home-art .s1 { fill: var(--a1); }
.home-art .s2 { fill: var(--a2); }
.home-art .s3 { fill: var(--a3); }
.home-art .s4 { fill: var(--a4); }
.home-art .l1 { fill: none; stroke: var(--al); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.home-art .l2 { fill: none; stroke: var(--al2); stroke-width: 8; stroke-linecap: round; }
.home-card-art, .home-news-art {
  --a1: var(--brand-200); --a2: var(--brand-300); --a3: var(--brand-400); --a4: var(--card); --al: var(--brand-500); --al2: var(--brand-200);
  background: linear-gradient(135deg, var(--brand-100), var(--brand-50));
}
.dark .home-card-art, .dark .home-news-art {
  --a1: var(--brand-800); --a2: var(--brand-700); --a3: var(--brand-500); --a4: var(--brand-900); --al: var(--brand-400); --al2: var(--brand-700);
  background: linear-gradient(135deg, var(--brand-900), var(--brand-950));
}
[dir="rtl"] .home-art { transform: scaleX(-1); }

/* Hero carousel */
.home-hero { display: grid; gap: var(--space-2); min-width: 0; }
.home-slide {
  --a1: color-mix(in oklab, var(--brand-400) 45%, transparent); --a2: var(--brand-400); --a3: var(--brand-200);
  --a4: color-mix(in oklab, var(--primary-foreground) 90%, transparent); --al: var(--brand-200); --al2: var(--brand-400);
  position: relative; display: flex; align-items: flex-end; min-height: 248px; overflow: hidden;
  border-radius: var(--radius-2xl); color: var(--primary-foreground);
  background: linear-gradient(120deg, var(--brand-950), var(--brand-800) 50%, var(--brand-600));
}
[dir="rtl"] .home-slide { background: linear-gradient(240deg, var(--brand-950), var(--brand-800) 50%, var(--brand-600)); }
.home-slide .home-art { position: absolute; inset-block: 0; inset-inline-end: 0; width: 62%; }
.home-slide-text { position: relative; z-index: 1; display: grid; gap: var(--space-2); max-width: 58%; padding: var(--space-6); }
.home-slide-tag { justify-self: start; padding: 2px 10px; border-radius: var(--radius-full); background: color-mix(in oklab, var(--primary-foreground) 18%, transparent); font-size: var(--text-body-sm-size); font-weight: 600; }
.home-slide-title { margin: 0; font-size: var(--text-body-xl-size); line-height: 1.3; font-weight: 700; }
.home-slide-sub { margin: 0; font-size: var(--control-font-size); }
.home-slide-btn { justify-self: start; --btn-bg: var(--primary-foreground); --btn-fg: var(--primary); font-weight: 600; }
.home-slide-btn:hover { --btn-bg: color-mix(in oklab, var(--primary-foreground) 88%, var(--primary)); }
.home-slide-btn > .icon { order: 1; width: 16px; height: 16px; }
.home-slide :focus-visible { outline-color: var(--primary-foreground); }

/* Carousel controls (hero and news) */
.home-nav { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.home-dots { display: flex; }
.home-dot-btn { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius-full); }
.home-dot-btn span { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--muted-foreground); transition: width var(--duration-fast) var(--ease-standard); }
.home-dot-btn[aria-current="true"] span { width: 20px; background: var(--primary); }
.home-nav .btn[disabled] { opacity: .35; }

/* Date and time */
.home-date {
  padding: var(--card-padding); display: grid; gap: var(--space-2);
  background: linear-gradient(to bottom, var(--card) 45%, color-mix(in oklab, var(--brand-100) 70%, var(--card)));
}
.dark .home-date { background: linear-gradient(to bottom, var(--card) 45%, color-mix(in oklab, var(--brand-950) 70%, var(--card))); }
.home-day { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--link); font-size: var(--text-body-sm-size); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
:lang(ar) .home-day { text-transform: none; letter-spacing: 0; }
.home-clock { display: flex; align-items: flex-end; gap: var(--space-2); margin: 0; color: var(--link); font-variant-numeric: tabular-nums; }
.home-hm { font-size: var(--text-h1-size); line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.home-sec { display: grid; gap: 2px; padding-block-end: 6px; font-size: var(--text-body-md-size); font-weight: 600; line-height: 1.1; }
.home-fulldate { margin: 0; color: var(--link); font-size: var(--text-body-sm-size); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
:lang(ar) .home-fulldate { text-transform: none; letter-spacing: 0; }
.home-date-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-2); }
.home-weather { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: var(--radius-full); background: var(--card); border: var(--border-width) solid var(--border); font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-weather b { color: var(--foreground); font-weight: 600; }
.home-weather .icon { width: 16px; height: 16px; color: var(--chart-2); }
.home-segs { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-full); background: var(--muted); }
.home-seg { height: 32px; padding-inline: 14px; border: 0; border-radius: var(--radius-full); background: none; color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; cursor: pointer; }
.home-seg:hover { color: var(--foreground); }
.home-seg[aria-checked="true"] { background: var(--primary); color: var(--primary-foreground); }

/* My dashboard */
.home-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.home-tile { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.home-tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 32px; }
.home-big { display: grid; margin: 0; }
.home-big b { font-size: var(--text-h5-size); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-big span { font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px var(--space-3); font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-legend li { display: inline-flex; align-items: center; gap: 4px; }
.home-legend b { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.home-key { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); flex: none; }
.home-key.k1, .seg.k1 { background: var(--chart-1); }
.home-key.k2, .seg.k2 { background: var(--chart-2); }
.home-key.k3, .seg.k3 { background: var(--chart-3); }
.home-key.k4, .seg.k4 { background: var(--chart-4); }
.home-key.k5 { background: var(--chart-5); }

.home-leave { display: flex; align-items: center; gap: var(--space-3); }
.home-gauge { position: relative; width: 116px; flex: none; }
.home-gauge-svg { width: 100%; height: auto; overflow: visible; }
[dir="rtl"] .home-gauge-svg { transform: scaleX(-1); }
.home-gauge-svg path { fill: none; stroke-width: 12; }
.home-gauge-svg .g-used { stroke: var(--chart-5); }
.home-gauge-svg .g-avail { stroke: var(--chart-1); }
.home-gauge-text { position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; justify-items: center; margin: 0; line-height: 1.1; }
.home-gauge-text b { font-size: var(--text-body-lg-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.home-gauge-text span { font-size: var(--text-body-xs-size); color: var(--muted-foreground); }

.home-tile .tabs { margin-block-start: calc(var(--space-2) * -1); overflow: hidden; }
.home-tile .tab { padding-inline: 8px; }
.home-ot { display: grid; gap: var(--space-3); }
.home-ot-row { display: flex; align-items: flex-end; gap: var(--space-3); }
.home-spark-wrap { flex: 1; min-width: 72px; }
.home-spark { display: block; width: 100%; height: 48px; }
[dir="rtl"] .home-spark { transform: scaleX(-1); }
.home-spark .sp-line { fill: none; stroke: var(--chart-1); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.home-spark .sp-area { fill: color-mix(in oklab, var(--chart-1) 16%, transparent); }
.home-courses { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-body-sm-size); color: var(--link); font-weight: 600; }
.home-period { margin-block-start: auto; }

.home-eye[aria-pressed="true"] { color: var(--link); }
.home-sal-label { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-sal-total { margin: 0; font-size: var(--text-h5-size); line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-sal-total.masked > span[aria-hidden] { letter-spacing: .1em; }
.home-cur { font-size: var(--text-body-md-size); font-weight: 500; color: var(--muted-foreground); }
.home-sal-bar { display: flex; gap: 3px; height: 10px; }
.home-sal-bar .seg { min-width: 6px; border-radius: var(--radius-full); transition: transform var(--duration-fast) var(--ease-standard); }
.home-sal-bar .seg:hover { transform: scaleY(1.5); }
.home-sal-legend { display: grid; grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) { .home-sal-bar .seg, .home-dot-btn span { transition: none; } }

/* News / announcements */
.home-news { display: grid; gap: var(--gap); }
.home-news.per-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-news.per-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-news.per-1 { grid-template-columns: minmax(0, 1fr); }
.home-news.all { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.home-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.home-card-art { height: 132px; }
.home-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.home-card-meta { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-card-title { margin: 0; font-size: var(--text-body-md-size); font-weight: 600; line-height: 1.4; }
.home-card-text { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: var(--control-font-size); font-weight: 600; cursor: pointer; margin-block-start: auto; }
.home-more:hover { text-decoration: underline; }

/* Internal systems, social links, quick actions */
.home-sys-list, .home-qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.home-sys {
  width: 100%; min-height: 52px; display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 12px; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); color: var(--foreground); font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.home-sys:hover { background: var(--accent); color: var(--accent-foreground); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.home-sys > .icon:first-child { color: var(--link); }
.home-sys > .icon:last-child { color: var(--muted-foreground); }
.home-sys-text { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.home-sys-text b { font-weight: 600; font-size: var(--control-font-size); }
.home-sys-text span { font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-qa { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 6px 8px; border-radius: var(--radius-lg); color: var(--foreground); text-decoration: none; font-weight: 500; font-size: var(--control-font-size); }
.home-qa:hover { background: var(--accent); color: var(--accent-foreground); }
.home-qa > .icon:last-child { margin-inline-start: auto; color: var(--muted-foreground); }
.home-qa-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-md); background: var(--accent); color: var(--link); }
.home-qa-ico .icon { width: 18px; height: 18px; }

/* Choose quick actions dialog */
.home-qa-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.home-qa-pick { list-style: none; margin: 0; padding: 0; border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); }
.home-qa-set[data-invalid] .home-qa-pick { border-color: var(--destructive); }
.home-qa-pick li + li { border-block-start: var(--border-width) solid var(--border); }
.home-qa-row { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 6px 12px; cursor: pointer; }
.home-qa-row:hover { background: var(--accent); }
.home-qa-name { flex: 1; font-weight: 500; }

/* Manager: For Your Action */
.home-chips { gap: 6px; }
.home-chip { height: 32px; padding-inline: 10px; font-size: var(--text-body-sm-size); }
.home-chip-n { font-variant-numeric: tabular-nums; font-weight: 600; }
.home-fya-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.home-fya-item { display: grid; gap: 6px; padding: var(--space-3); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.home-fya-top { display: flex; align-items: center; gap: var(--space-2); }
.home-fya-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-full); background: var(--accent); color: var(--link); }
.home-fya-title { flex: 1; margin: 0; font-weight: 600; font-size: var(--control-font-size); }
.home-fya-ref { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-fya-msg { margin: 0; font-weight: 500; font-size: var(--control-font-size); }
.home-fya-sum { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-fya-sum b { color: var(--foreground); font-weight: 600; margin-inline-end: 4px; }
.home-fya-act { justify-self: start; }
.home-fya-act > .icon { order: 1; width: 16px; height: 16px; }
.home-fya .empty { padding: var(--space-6) var(--space-3); }

/* Manager: self-services and team */
.home-ss { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
.home-ss-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); color: var(--foreground); text-decoration: none; }
.home-ss-card:hover { border-color: var(--primary); background: color-mix(in oklab, var(--accent) 50%, var(--card)); }
.home-ss-card > .icon:last-child { color: var(--muted-foreground); }
.home-ss-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-lg); background: var(--accent); color: var(--link); }
.home-ss-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.home-ss-text b { font-weight: 600; }
.home-ss-text span { font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap); }
.home-member { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.home-member-text { flex: 1; min-width: 0; }
.home-member-name { margin: 0; font-weight: 600; font-size: var(--control-font-size); }
.home-member-job { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }

/* Floating bottom bar and its panels */
.home-dock {
  position: sticky; inset-block-end: var(--space-4); z-index: var(--z-dropdown);
  display: flex; justify-content: center; align-items: flex-end; gap: var(--space-2); min-height: 52px;
  pointer-events: none;
}
.home-dock > * { pointer-events: auto; }
.home-dock-center { position: relative; display: flex; justify-content: center; }
.home-pill { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--radius-full); background: var(--card); border: var(--border-width) solid var(--border); box-shadow: var(--elevation-3); }
.home-pill-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding-inline: 16px;
  border: 0; border-radius: var(--radius-full); background: none; color: var(--foreground);
  font: inherit; font-size: var(--control-font-size); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.home-pill-btn .icon { color: var(--link); }
.home-pill-btn:hover { background: var(--accent); color: var(--accent-foreground); }
.home-pill-btn[aria-expanded="true"] { background: var(--primary); color: var(--primary-foreground); }
.home-pill-btn[aria-expanded="true"] .icon { color: inherit; }
.home-pill-sep { width: var(--border-width); height: 20px; background: var(--border); }
.home-pop {
  position: absolute; inset-block-end: calc(100% + var(--space-2)); inset-inline-start: 50%; translate: -50% 0;
  width: min(380px, calc(100vw - 32px)); max-height: min(62vh, 540px);
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--elevation-4);
}
[dir="rtl"] .home-pop { translate: 50% 0; }
.home-pop[hidden] { display: none; }
.home-pop-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); border-block-end: var(--border-width) solid var(--border); }
.home-pop-title { flex: 1; margin: 0; font-size: var(--text-body-md-size); font-weight: 600; }
.home-pop-body { display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); overflow-y: auto; align-content: start; }

.home-note-form { display: grid; gap: var(--space-2); }
.home-note-form > .btn { justify-self: end; }
.home-note-input { min-height: 64px; }
.home-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.home-note {
  display: flex; align-items: flex-start; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--warning) 16%, var(--card)); border: var(--border-width) solid color-mix(in oklab, var(--warning) 45%, var(--border));
}
.home-note > div { flex: 1; min-width: 0; }
.home-note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--control-font-size); }
.home-note-meta { margin: 4px 0 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }

/* SNARK */
.home-snark-face {
  position: relative; display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 34%;
  background: linear-gradient(135deg, var(--chart-2), var(--chart-5) 40%, var(--chart-4) 70%, var(--chart-1));
}
.home-snark-face i { position: absolute; inset-block-start: 36%; width: 12%; height: 26%; border-radius: var(--radius-full); background: var(--primary-foreground); }
.home-snark-face i:first-child { inset-inline-start: 31%; }
.home-snark-face i:last-child { inset-inline-end: 31%; }
.home-snark-face.xs { width: 28px; height: 28px; }
.home-snark-face.lg { width: 88px; height: 88px; box-shadow: var(--elevation-3); }
.home-snark-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); height: 54px; padding-inline: 6px 16px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--foreground);
  box-shadow: var(--elevation-3); font: inherit; font-weight: 600; cursor: pointer;
}
.home-snark-btn:hover { background: var(--accent); color: var(--accent-foreground); }

dialog.home-snark-dlg {
  width: min(420px, calc(100vw - 32px)); height: min(660px, calc(100dvh - 32px)); max-width: none; max-height: none;
  margin: 0; inset-inline-start: auto; inset-inline-end: 16px; inset-block-start: auto; inset-block-end: 16px;
}
.home-snark-dlg .dialog-head { background: var(--primary); color: var(--primary-foreground); border-block-end: 0; }
.home-snark-dlg .dialog-head .btn { --btn-fg: var(--primary-foreground); }
.home-snark-dlg .dialog-head .btn:hover { --btn-bg: color-mix(in oklab, var(--primary-foreground) 16%, transparent); }
.home-snark-dlg .dialog-head :focus-visible { outline-color: var(--primary-foreground); }
.home-snark-dlg .dialog-body { flex: 1; gap: var(--space-4); background: linear-gradient(to bottom, color-mix(in oklab, var(--brand-50) 70%, var(--popover)), var(--popover) 40%); }
.dark .home-snark-dlg .dialog-body { background: var(--popover); }
.home-snark-dlg .dialog-foot { padding: var(--space-3) var(--space-4); }
.home-snark-hello { display: grid; justify-items: center; gap: 4px; text-align: center; padding-block: var(--space-4) 0; }
.home-snark-hi { margin: var(--space-3) 0 0; font-size: var(--text-body-lg-size); font-weight: 700; }
.home-snark-help { margin: 0; color: var(--muted-foreground); }
.home-snark-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.home-snark-chip {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground);
  font: inherit; text-align: start; cursor: pointer;
}
.home-snark-chip:hover { background: var(--accent); color: var(--accent-foreground); }
.home-snark-chip > .icon { color: var(--link); margin-block-start: 3px; }
.home-snark-chip > span { display: grid; }
.home-snark-chip b { font-weight: 600; font-size: var(--control-font-size); }
.home-snark-chip span span { font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: end; }
.home-chat:empty { display: none; }
.home-msg { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 88%; }
.home-msg.me { justify-self: end; }
.home-msg.bot { justify-self: start; }
.home-bubble { padding: 8px 12px; border-radius: var(--radius-xl); background: var(--muted); color: var(--foreground); font-size: var(--control-font-size); }
.home-bubble p { margin: 0; }
.home-msg.bot .home-bubble { border-end-start-radius: var(--radius-xs); }
.home-msg.me .home-bubble { background: var(--primary); color: var(--primary-foreground); border-end-end-radius: var(--radius-xs); }
.home-msg.typing .home-bubble { color: var(--muted-foreground); font-style: italic; }
.home-msg-file { display: flex; align-items: center; gap: 4px; font-size: var(--text-body-sm-size); }
.home-snark-form { display: grid; gap: var(--space-2); width: 100%; }
.home-snark-row { display: flex; align-items: center; gap: var(--space-2); }
.home-snark-row .input { flex: 1; border-radius: var(--radius-full); }
.home-snark-row .btn-primary { border-radius: var(--radius-full); }
.home-file-chip { justify-self: start; max-width: 100%; }

/* Header panels: notifications and profile, under the header at the end edge */
dialog.home-anchored {
  width: min(400px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 96px);
  margin: 0; inset-block-start: 80px; inset-block-end: auto; inset-inline-end: 16px; inset-inline-start: auto;
}
.home-anchored .dialog-head { padding: var(--space-4) var(--space-4) var(--space-3); align-items: center; }
.home-anchored .dialog-body { padding: var(--space-3) var(--space-4) var(--space-4); gap: var(--space-3); }
.home-anchored .dialog-foot:empty { display: none; }
.home-anchored .empty { padding: var(--space-8) var(--space-4); }
.home-notif-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.home-notif-tools .toggle { height: 32px; font-size: var(--text-body-sm-size); }
.home-notifs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.home-notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--radius-lg); border: var(--border-width) solid var(--border); }
.home-notif.unread { background: color-mix(in oklab, var(--accent) 70%, var(--popover)); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.home-notif-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-full); }
.home-notif-ico .icon { width: 16px; height: 16px; }
.tone-success { background: color-mix(in oklab, var(--success) 14%, var(--card)); color: color-mix(in oklab, var(--success) 75%, var(--foreground)); }
.tone-info { background: color-mix(in oklab, var(--info) 14%, var(--card)); color: color-mix(in oklab, var(--info) 80%, var(--foreground)); }
.tone-warning { background: color-mix(in oklab, var(--warning) 35%, var(--card)); color: var(--warning-foreground); }
.tone-neutral { background: var(--muted); color: var(--muted-foreground); }
.dark .tone-warning { color: var(--warning); background: color-mix(in oklab, var(--warning) 16%, var(--card)); }
.home-notif-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.home-notif-title { font-weight: 600; font-size: var(--control-font-size); }
.home-notif-link { color: inherit; text-decoration: none; }
.home-notif-link:hover .home-notif-title { color: var(--link); text-decoration: underline; }
.home-notif-text { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-notif-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-unread { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-weight: 600; }
.home-unread-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--primary); }
.home-notif-actions { display: flex; flex-direction: column; gap: 2px; }

.home-profile-dlg .dialog-head .avatar { margin-block-start: 2px; }
.home-profile-email { margin: 0; font-size: var(--text-body-sm-size); color: var(--muted-foreground); }
.home-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.home-menu-item {
  width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px;
  border: 0; border-radius: var(--radius-lg); background: none; color: var(--foreground);
  font: inherit; font-size: var(--control-font-size); font-weight: 500; text-align: start; text-decoration: none; cursor: pointer;
}
.home-menu-item .icon { color: var(--link); }
.home-menu-item:hover { background: var(--accent); color: var(--accent-foreground); }
.home-menu-item.danger, .home-menu-item.danger .icon { color: color-mix(in oklab, var(--destructive) 85%, var(--foreground)); }
.dark .home-menu-item.danger, .dark .home-menu-item.danger .icon { color: color-mix(in oklab, var(--destructive) 70%, var(--foreground)); }
.home-menu-sep { height: var(--border-width); margin-block: 4px; background: var(--border); }

/* View news */
.home-news-art { height: 200px; flex: none; overflow: hidden; border-radius: var(--radius-lg); }
.home-article { display: grid; gap: var(--space-3); line-height: 1.65; }
.home-article h3 { margin: var(--space-2) 0 0; font-size: var(--text-body-lg-size); font-weight: 600; }
.home-article p, .home-article ul { margin: 0; }
.home-article ul { display: grid; gap: 4px; padding-inline-start: 22px; }

/* Below 1200px: one column; the side cards slot in after the hero */
@media (max-width: 1200px) {
  .home-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); }
  .home-col { display: contents; }
  .o-hero { order: 1; } .o-date { order: 2; } .o-fya { order: 3; } .o-ss { order: 4; } .o-dash { order: 5; }
  .o-quick { order: 6; } .o-team { order: 7; } .o-systems { order: 8; } .o-news { order: 9; }
}
@media (max-width: 1024px) {
  dialog.home-anchored { inset-block-start: 76px; }
}
@media (max-width: 720px) {
  .home { gap: var(--space-5); }
  .home-name { font-size: var(--text-h5-size); }
  .home-slide { min-height: 280px; }
  .home-slide .home-art { width: 100%; opacity: .35; }
  .home-slide-text { max-width: none; padding: var(--space-5); }
  .home-slide-title { font-size: var(--text-body-lg-size); }
  .home-hm { font-size: var(--text-h3-size); }
  .home-nav .btn { width: 44px; height: 44px; }
  .home-dot-btn { width: 30px; height: 44px; }
  .home-seg, .home-chip, .home-notif-tools .toggle { height: 44px; }
  .home-more { min-height: 44px; }
  .home-pill-btn { padding-inline: 12px; }
  .home-pill.multi .home-pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .home-snark-btn { padding: 6px; }
  .home-snark-btn-label { display: none; }
  dialog.home-snark-dlg { inset-inline-end: 8px; inset-block-end: 8px; width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  dialog.home-anchored { inset-inline-end: 8px; width: calc(100vw - 16px); }
  .home-sal-legend { grid-template-columns: 1fr; }
}

/* Uploaded images from the admin portal (banners, announcements). */
.home-media-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-slide .home-media-img { position: absolute; inset-block: 0; inset-inline-end: 0; width: 62%; height: 100%;
  -webkit-mask-image: linear-gradient(to left, black 70%, transparent); mask-image: linear-gradient(to left, black 70%, transparent); }
[dir="rtl"] .home-slide .home-media-img { -webkit-mask-image: linear-gradient(to right, black 70%, transparent); mask-image: linear-gradient(to right, black 70%, transparent); }
@media (max-width: 720px) { .home-slide .home-media-img { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; } }