/* =========================================================================
   النشرة البحرية للموانئ الليبية
   ورقة الأنماط الوحيدة: الرموز، الأمزجة الثلاثة، ثم المكوّنات.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. القيم الخام لكل مزاج
   تُعرّف مرة واحدة هنا، وتشير إليها كتل الأمزجة أدناه، فلا تتفرّق النسخ.
   ------------------------------------------------------------------------- */
:root {
  /* ليلي */
  --n-bg: #08111b;        --n-line: rgb(255 255 255 / 10%);  --n-tint: rgb(255 255 255 / 3%);
  --n-ink: #f2f7fb;       --n-mute: #b9cad8;                 --n-cyan: #4fc3e8;
  --n-amber: #f0a63c;     --n-red: #ef6257;
  --n-wash1: rgb(79 195 232 / 10%);                          --n-wash2: rgb(226 74 62 / 7%);
  --n-sea: #081521;       --n-land-a: #0e1926;               --n-land-b: #0a131d;
  --n-coast: rgb(160 195 220 / 45%);
  --n-nb: #1b2e40;        --n-nbl: rgb(255 255 255 / 7%);    --n-grid: rgb(79 195 232 / 5.5%);
  --n-lbl: #dce7f0;       --n-lbl-hot: #f4b9b4;              --n-halo: #08111b;
  --n-wm: rgb(160 195 220 / 30%);
  --n-red-fill: #b03026;
  --n-surface: #0d1825;

  /* عاصف */
  --s-bg: #0a0e12;        --s-line: rgb(255 255 255 / 13%);  --s-tint: rgb(255 255 255 / 4%);
  --s-ink: #f6f9fb;       --s-mute: #bfcbd4;                 --s-cyan: #5fcbea;
  --s-amber: #f6b24c;     --s-red: #f4695a;
  --s-wash1: rgb(95 203 234 / 6%);                           --s-wash2: rgb(241 80 63 / 11%);
  --s-sea: #0a1015;       --s-land-a: #11171c;               --s-land-b: #0c1114;
  --s-coast: rgb(200 215 225 / 50%);
  --s-nb: #232c33;        --s-nbl: rgb(255 255 255 / 6%);    --s-grid: rgb(255 255 255 / 4.5%);
  --s-lbl: #e6ecf0;       --s-lbl-hot: #fbc0b8;              --s-halo: #0a0e12;
  --s-wm: rgb(200 215 225 / 22%);
  --s-red-fill: #b4342a;
  --s-surface: #10161b;

  /* ورقي */
  --p-bg: #f5f3ee;        --p-line: rgb(12 34 50 / 20%);     --p-tint: rgb(12 34 50 / 5%);
  --p-ink: #0c1d28;       --p-mute: #47606f;                 --p-cyan: #0e6a8e;
  --p-amber: #8a5007;     --p-red: #a82a20;
  --p-wash1: rgb(14 106 142 / 8%);                           --p-wash2: rgb(168 42 32 / 7%);
  --p-sea: #c4d2db;       --p-land-a: #e9e5dc;               --p-land-b: #ded9ce;
  --p-coast: rgb(12 45 68 / 55%);
  --p-nb: #d5d0c6;        --p-nbl: rgb(12 34 50 / 10%);      --p-grid: rgb(12 45 68 / 6%);
  --p-lbl: #10222e;       --p-lbl-hot: #8e241b;              --p-halo: #f5f3ee;
  --p-wm: rgb(12 45 68 / 22%);
  --p-red-fill: #a82a20;
  --p-surface: #fffdf8;
}

/* -------------------------------------------------------------------------
   2. ربط المزاج
   الافتراضي ليلي؛ من يفضّل الوضع الفاتح في نظامه يرى الورقي قبل تحميل أي
   نص برمجي، فلا تومض الصفحة بمزاج ثم تنقلب إلى آخر.
   ------------------------------------------------------------------------- */
:root,
:root[data-mood='night'] {
  --bg: var(--n-bg); --line: var(--n-line); --tint: var(--n-tint);
  --ink: var(--n-ink); --mute: var(--n-mute);
  --cyan: var(--n-cyan); --amber: var(--n-amber); --red: var(--n-red);
  --wash1: var(--n-wash1); --wash2: var(--n-wash2);
  --sea: var(--n-sea); --land-a: var(--n-land-a); --land-b: var(--n-land-b); --coast: var(--n-coast);
  --nb: var(--n-nb); --nbl: var(--n-nbl); --grid: var(--n-grid);
  --lbl: var(--n-lbl); --lbl-hot: var(--n-lbl-hot); --halo: var(--n-halo); --wm: var(--n-wm);
  --red-fill: var(--n-red-fill); --surface: var(--n-surface);
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-mood]) {
    --bg: var(--p-bg); --line: var(--p-line); --tint: var(--p-tint);
    --ink: var(--p-ink); --mute: var(--p-mute);
    --cyan: var(--p-cyan); --amber: var(--p-amber); --red: var(--p-red);
    --wash1: var(--p-wash1); --wash2: var(--p-wash2);
    --sea: var(--p-sea); --land-a: var(--p-land-a); --land-b: var(--p-land-b); --coast: var(--p-coast);
    --nb: var(--p-nb); --nbl: var(--p-nbl); --grid: var(--p-grid);
    --lbl: var(--p-lbl); --lbl-hot: var(--p-lbl-hot); --halo: var(--p-halo); --wm: var(--p-wm);
    --red-fill: var(--p-red-fill); --surface: var(--p-surface);
    color-scheme: light;
  }
}

:root[data-mood='storm'] {
  --bg: var(--s-bg); --line: var(--s-line); --tint: var(--s-tint);
  --ink: var(--s-ink); --mute: var(--s-mute);
  --cyan: var(--s-cyan); --amber: var(--s-amber); --red: var(--s-red);
  --wash1: var(--s-wash1); --wash2: var(--s-wash2);
  --sea: var(--s-sea); --land-a: var(--s-land-a); --land-b: var(--s-land-b); --coast: var(--s-coast);
  --nb: var(--s-nb); --nbl: var(--s-nbl); --grid: var(--s-grid);
  --lbl: var(--s-lbl); --lbl-hot: var(--s-lbl-hot); --halo: var(--s-halo); --wm: var(--s-wm);
  --red-fill: var(--s-red-fill); --surface: var(--s-surface);
  color-scheme: dark;
}

:root[data-mood='paper'] {
  --bg: var(--p-bg); --line: var(--p-line); --tint: var(--p-tint);
  --ink: var(--p-ink); --mute: var(--p-mute);
  --cyan: var(--p-cyan); --amber: var(--p-amber); --red: var(--p-red);
  --wash1: var(--p-wash1); --wash2: var(--p-wash2);
  --sea: var(--p-sea); --land-a: var(--p-land-a); --land-b: var(--p-land-b); --coast: var(--p-coast);
  --nb: var(--p-nb); --nbl: var(--p-nbl); --grid: var(--p-grid);
  --lbl: var(--p-lbl); --lbl-hot: var(--p-lbl-hot); --halo: var(--p-halo); --wm: var(--p-wm);
  --red-fill: var(--p-red-fill); --surface: var(--p-surface);
  color-scheme: light;
}

/* -------------------------------------------------------------------------
   3. رموز غير لونية
   ------------------------------------------------------------------------- */
:root {
  --font-body: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* سلّم مقاسات سائل: يقرأ على الهاتف ويكبر على الشاشة العريضة. */
  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.92rem);
  --step-0: clamp(0.94rem, 0.9rem + 0.22vw, 1.1rem);
  --step-1: clamp(1.05rem, 0.98rem + 0.34vw, 1.3rem);
  --step-2: clamp(1.2rem, 1.08rem + 0.6vw, 1.62rem);
  --step-3: clamp(1.45rem, 1.22rem + 1.1vw, 2.3rem);
  --step-4: clamp(1.8rem, 1.3rem + 2.4vw, 3.4rem);
  --display: clamp(2.6rem, 1.4rem + 5.6vw, 5.2rem);

  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3.5rem);
  --measure: 68ch;
  --radius: 10px;
  --radius-sm: 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -------------------------------------------------------------------------
   4. الأساس والأسطح التي يرسمها المتصفّح
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) transparent;
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(90rem 44rem at 82% -6%, var(--wash1), transparent 60%),
    radial-gradient(70rem 40rem at 8% 104%, var(--wash2), transparent 62%),
    var(--bg);
  /* بلا background-attachment: fixed — يُجبر المتصفّح على إعادة طلاء الخلفية مع كل تمرير. */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  caret-color: var(--cyan);
  text-underline-offset: 0.22em;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--cyan) 32%, transparent);
  color: var(--ink);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 34%, transparent); }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

:where(h1, h2, h3, h4) {
  line-height: 1.28;
  font-weight: 700;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

p { text-wrap: pretty; }

a {
  color: var(--cyan);
  text-decoration-thickness: 1px;
}
a:hover { color: color-mix(in srgb, var(--cyan) 72%, var(--ink)); }

img,
svg { display: block; max-width: 100%; }

:where(button, input, select) { font: inherit; color: inherit; }

/* الأرقام في النشرة قياسات، لا زينة: عرض ثابت حتى تتحاذى الأعمدة. */
.num,
table,
.ltr { font-variant-numeric: tabular-nums; }

/**
 * مجال رقمي داخل نص عربي. بدون العزل تقلب خوارزمية الاتجاه طرفَي المجال،
 * فيقرأ «0.50–3.00» بدل «3.00–0.50».
 */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  white-space: nowrap;
  margin-inline: 0.18em;
}

.nowrap { white-space: nowrap; }

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


.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  transition: top 0.18s var(--ease-out);
}
.skip-link:focus-visible { top: 0.7rem; }

/* -------------------------------------------------------------------------
   5. الهيكل العام
   ------------------------------------------------------------------------- */
.shell {
  width: min(100%, 82rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
  margin-inline-end: auto;
}
.brand:hover { color: inherit; }
.brand-mark { flex: none; color: var(--cyan); }
.brand-name {
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.brand-sub {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--mute);
  letter-spacing: 0;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--mute);
  text-decoration: none;
  font-size: var(--step--1);
  transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.site-nav a:hover {
  background: var(--tint);
  color: var(--ink);
}
.site-nav a[aria-current='page'] {
  color: var(--ink);
  background: color-mix(in srgb, var(--cyan) 15%, transparent);
}

/* مبدّل المزاج: أزرار حقيقية في مجموعة واحدة. */
.mood {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 99px;
}
.mood button {
  padding: 0.32rem 0.72rem;
  border: 0;
  border-radius: 99px;
  background: transparent;
  color: var(--mute);
  font-size: var(--step--1);
  cursor: pointer;
  transition: background 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.mood button:hover { color: var(--ink); }
.mood button[aria-pressed='true'] {
  background: color-mix(in srgb, var(--cyan) 22%, var(--surface));
  color: var(--ink);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--step--1);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--tint); }

@media (max-width: 61.9rem) {
  .nav-toggle { display: inline-flex; }
  .header-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-block: 1rem 1.4rem;
    border-top: 1px solid var(--line);
  }
  .header-nav[data-open='true'] { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 0.7rem 0.6rem; font-size: var(--step-0); }
  .mood { align-self: flex-start; }
}

@media (min-width: 62rem) {
  .header-nav {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.6rem);
  }
}

.site-footer {
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-block: 2.2rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: var(--step--1);
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer p { max-width: 46ch; }

/* -------------------------------------------------------------------------
   6. النشرة
   ------------------------------------------------------------------------- */
.bulletin {
  margin-block: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  overflow: clip;
}

.bulletin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.1rem, 2.6vw, 1.9rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.severity {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
  padding: 0.42rem 0.9rem 0.48rem;
  border-radius: var(--radius-sm);
  background: var(--red-fill);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0;
}
.severity::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
}

.issue-meta {
  color: var(--mute);
  font-size: var(--step--1);
  line-height: 1.6;
  max-width: 40ch;
}
.issue-meta b {
  color: var(--ink);
  font-weight: 600;
}

.bulletin-title {
  padding: clamp(1.4rem, 3.4vw, 2.6rem) var(--gutter) clamp(1.2rem, 2.6vw, 2rem);
}

/* سطر البيانات: المنطقة والنطاق الزمني — معلومة، لا ملصق فوق العنوان. */
.datum {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-bottom: 1rem;
  font-size: var(--step--1);
  color: var(--mute);
}
.datum > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.datum b { color: var(--cyan); font-weight: 600; }
.datum svg { color: var(--mute); flex: none; }

.headline {
  font-size: var(--step-4);
  line-height: 1.3;
  max-width: 22ch;
  letter-spacing: -0.02em;
}
.headline em {
  font-style: normal;
  color: var(--red);
}

/* الأرقام هنا هي مادة النشرة نفسها: ارتفاع الموج وسرعة الرياح. */
.focal {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-inline: var(--gutter);
  margin-bottom: clamp(1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  overflow: clip;
}
.focal > * {
  background: linear-gradient(200deg, var(--wash2), transparent 60%), var(--surface);
  padding: clamp(1rem, 2.2vw, 1.45rem) clamp(1.1rem, 2.4vw, 1.7rem);
}
@media (min-width: 48rem) {
  .focal { grid-template-columns: 1.6fr 1fr 1fr; }
}

.focal-area span {
  display: block;
  color: var(--mute);
  font-size: var(--step--1);
  margin-bottom: 0.35rem;
}
.focal-area strong {
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.4;
}

.measure-label {
  display: block;
  color: var(--mute);
  font-size: var(--step--1);
  margin-bottom: 0.2rem;
}
.measure-value {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}
.measure-value small {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
}
.measure-wind .measure-value { color: var(--amber); }
.measure-wave .measure-value { color: var(--red); }

.map-frame {
  border-block: 1px solid var(--line);
  background: var(--sea);
}
.map-frame svg { width: 100%; }

.map-port { transition: opacity 0.16s var(--ease-out); }
.map-frame:has(.map-port.is-active) .map-port:not(.is-active) { opacity: 0.42; }
.map-port.is-active .map-port-aura { opacity: 0.4; }
.map-num { font-family: var(--font-mono); }

/* شريط الموانئ المتأثّرة أسفل الخريطة مباشرة. */
/* أعمدة صريحة: مع auto-fit تنهار المسارات الفارغة إلى خطوط فاصلة زائدة. */
.affected {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 26rem) {
  .affected { grid-template-columns: 1fr; }
}
@media (min-width: 56rem) {
  .affected { grid-template-columns: repeat(4, 1fr); }
}
.affected-port {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.2vw, 1.4rem);
  background: var(--surface);
}
.affected-port.is-active { background: color-mix(in srgb, var(--cyan) 9%, var(--surface)); }
.affected-name {
  font-size: var(--step-1);
  font-weight: 600;
}
.affected-wave {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.affected-wave small {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--mute);
}
.affected-wind {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--mute);
  font-size: var(--step--1);
}

.gauge {
  height: 5px;
  border-radius: 99px;
  background: var(--tint);
  overflow: hidden;
}
.gauge > i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.west-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2rem 2.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.west-strip p {
  flex: 1 1 26rem;
  color: var(--mute);
  max-width: var(--measure);
}
.west-strip b { color: var(--ink); font-weight: 600; }

.pressure {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: var(--mute);
  font-size: var(--step--1);
}
.pressure b {
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
}

.bulletin-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2.5rem;
  padding: clamp(1rem, 2.2vw, 1.5rem) var(--gutter);
  color: var(--mute);
  font-size: var(--step--1);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  padding: 0;
}
.legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* -------------------------------------------------------------------------
   7. الأقسام والجداول
   ------------------------------------------------------------------------- */
.section {
  margin-block: clamp(2.5rem, 6vw, 5rem);
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
}
.section-head h2 { font-size: var(--step-3); }
.section-head p {
  color: var(--mute);
  font-size: var(--step--1);
  max-width: 44ch;
}

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

table {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  text-align: start;
}
caption {
  padding: 0.9rem 1.1rem;
  color: var(--mute);
  font-size: var(--step--1);
  text-align: start;
  border-bottom: 1px solid var(--line);
}
th,
td {
  padding: 0.8rem 1.1rem;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
thead th {
  color: var(--mute);
  font-size: var(--step--1);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.14s var(--ease-out); }
tbody tr:hover,
tbody tr.is-active { background: var(--tint); }
td.num {
  font-family: var(--font-mono);
  white-space: nowrap;
}
.port-name { font-weight: 600; }

.state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}
.state::before {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.state-0 { color: var(--cyan); }
.state-1 { color: var(--amber); }
.state-2 { color: var(--red); }

/* -------------------------------------------------------------------------
   8. الأرشيف والمقاييس
   ------------------------------------------------------------------------- */
.archive-list {
  list-style: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  overflow: clip;
}
.archive-item {
  display: grid;
  gap: 0.4rem 1.6rem;
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--line);
}
.archive-item:last-child { border-bottom: 0; }
@media (min-width: 48rem) {
  .archive-item {
    grid-template-columns: 13rem 1fr auto;
    align-items: baseline;
  }
}
.archive-date {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.archive-summary { color: var(--mute); max-width: var(--measure); }
.archive-peak {
  color: var(--mute);
  font-size: var(--step--1);
  white-space: nowrap;
}
.archive-peak b {
  font-family: var(--font-mono);
  color: var(--ink);
  font-weight: 600;
}

.prose {
  max-width: var(--measure);
}
.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  font-size: var(--step-2);
  margin-top: 2.6rem;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-inline-start: 1.2rem; color: var(--mute); }
.prose li + li { margin-top: 0.45rem; }
.prose strong { color: var(--ink); }

.note {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tint);
  color: var(--mute);
  font-size: var(--step--1);
}
.note b { color: var(--ink); }

/* -------------------------------------------------------------------------
   9. الحركة
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   10. تعبئة المؤشّرات
   العرض يُختار عبر `data-fill` بخطوات 5% بدل سمة style، لأن سياسة أمن
   المحتوى تمنع الأنماط المضمّنة في الصفحة.
   ------------------------------------------------------------------------- */
.gauge > i { width: 0; }
.gauge[data-fill='0'] > i { width: 0; }
.gauge[data-fill='5'] > i { width: 5%; }
.gauge[data-fill='10'] > i { width: 10%; }
.gauge[data-fill='15'] > i { width: 15%; }
.gauge[data-fill='20'] > i { width: 20%; }
.gauge[data-fill='25'] > i { width: 25%; }
.gauge[data-fill='30'] > i { width: 30%; }
.gauge[data-fill='35'] > i { width: 35%; }
.gauge[data-fill='40'] > i { width: 40%; }
.gauge[data-fill='45'] > i { width: 45%; }
.gauge[data-fill='50'] > i { width: 50%; }
.gauge[data-fill='55'] > i { width: 55%; }
.gauge[data-fill='60'] > i { width: 60%; }
.gauge[data-fill='65'] > i { width: 65%; }
.gauge[data-fill='70'] > i { width: 70%; }
.gauge[data-fill='75'] > i { width: 75%; }
.gauge[data-fill='80'] > i { width: 80%; }
.gauge[data-fill='85'] > i { width: 85%; }
.gauge[data-fill='90'] > i { width: 90%; }
.gauge[data-fill='95'] > i { width: 95%; }
.gauge[data-fill='100'] > i { width: 100%; }

.gauge[data-level='0'] > i { background: var(--cyan); }
.gauge[data-level='1'] > i { background: var(--amber); }
.gauge[data-level='2'] > i { background: var(--red); }