/* asset-build: 93 */
/* ============================================================
   Basmah (بصمة) — design system
   Brand (from the official lockup): navy #0b1f40 · gold #c59e59 · ivory
   Navy carries structure; gold is the brand accent; red stays
   strictly semantic (errors, alerts, deadlines).
   Surfaces stay light and low-contrast so long sessions are easy
   on the eyes. Motion is short, purposeful, and reduced-motion safe.
   ============================================================ */

:root {
  /* Brand */
  --blue:        #2b4a7e;
  --blue-deep:   #0b1f40;
  --blue-mid:    #4064a0;
  --blue-soft:   #e9eef7;
  --blue-tint:   #f4f7fc;
  --gold:        #a8813d;
  --gold-deep:   #85632c;
  --gold-mid:    #c59e59;
  --gold-soft:   #f7f0e0;
  --red:         #e82428;
  --red-deep:    #c51b1f;
  --red-soft:    #fdeced;

  /* Solid fills carry white text, so they stay dark in BOTH themes —
     --blue above is a foreground tint and is not safe as a button ground. */
  --blue-solid:  #17305a;
  --blue-solid-h:#223f70;
  --gold-solid:  #a8813d;
  --gold-solid-h:#916f34;
  --red-solid:   #c92226;
  --red-solid-h: #af1b1f;

  /* Surfaces & ink — warm ivory neutrals under navy ink, like the lockup */
  --ground:      #f5f4ef;
  --surface:     #ffffff;
  --surface-2:   #f4f2ec;
  --surface-3:   #ebe8df;
  --ink:         #1b2438;
  --ink-soft:    #525d78;
  --ink-faint:   #8b92a8;
  --line:        #e6e3d9;
  --line-strong: #d1cdbf;

  /* Semantic (separate from the brand accent) */
  --good:      #14805a;
  --good-bg:   #e3f4ec;
  --warn:      #a76a10;
  --warn-bg:   #fbf0dc;
  --bad:       var(--red-deep);
  --bad-bg:    var(--red-soft);

  --radius:    14px;
  --radius-sm: 9px;
  --shadow-1: 0 1px 2px rgba(26,35,64,.05), 0 2px 8px rgba(26,35,64,.04);
  --shadow-2: 0 2px 6px rgba(26,35,64,.07), 0 12px 28px rgba(26,35,64,.08);
  --shadow-3: 0 18px 50px rgba(20,30,70,.28);

  --font: "Segoe UI", system-ui, -apple-system, Tahoma, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, Tahoma, Arial, sans-serif;

  --ease: cubic-bezier(.22,.7,.3,1);
  --sidebar-w: 246px;
}

/* Dark theme — same tokens, restful values.
   Three states: no stamp = follow the OS; data-theme="light"/"dark" = explicit
   choice, which must win in both directions. Every component reads tokens, so
   nothing is stranded in either theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:        #9ab2df;
    --blue-deep:   #081426;
    --blue-mid:    #adc1e7;
    --blue-soft:   #1e2d47;
    --blue-tint:   #17233a;
    --gold:        #d6b47c;
    --gold-deep:   #e3c793;
    --gold-mid:    #cba869;
    --gold-soft:   #35291a;
    --red:         #ff6165;
    --red-deep:    #ff7d81;
    --red-soft:    #3d1f22;

    --blue-solid:  #2c456e;
    --blue-solid-h:#385480;
    --gold-solid:  #9c7940;
    --gold-solid-h:#ad884a;
    --red-solid:   #d02226;
    --red-solid-h: #e12b2f;

    --ground:      #0d1420;
    --surface:     #141d2c;
    --surface-2:   #1b2536;
    --surface-3:   #232f42;
    --ink:         #e9ecf2;
    --ink-soft:    #a8b2c8;
    --ink-faint:   #7d87a0;
    --line:        #273246;
    --line-strong: #38455e;

    --good:      #54cc98;
    --good-bg:   #163a2c;
    --warn:      #e5ad50;
    --warn-bg:   #3d3117;

    --shadow-1: 0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22);
    --shadow-2: 0 2px 6px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.32);
    --shadow-3: 0 18px 50px rgba(0,0,0,.58);
  }
}
:root[data-theme="dark"] {
  --blue:        #9ab2df;
  --blue-deep:   #081426;
  --blue-mid:    #adc1e7;
  --blue-soft:   #1e2d47;
  --blue-tint:   #17233a;
  --gold:        #d6b47c;
  --gold-deep:   #e3c793;
  --gold-mid:    #cba869;
  --gold-soft:   #35291a;
  --red:         #ff6165;
  --red-deep:    #ff7d81;
  --red-soft:    #3d1f22;

  --blue-solid:  #2c456e;
  --blue-solid-h:#385480;
  --gold-solid:  #9c7940;
  --gold-solid-h:#ad884a;
  --red-solid:   #d02226;
  --red-solid-h: #e12b2f;

  --ground:      #0d1420;
  --surface:     #141d2c;
  --surface-2:   #1b2536;
  --surface-3:   #232f42;
  --ink:         #e9ecf2;
  --ink-soft:    #a8b2c8;
  --ink-faint:   #7d87a0;
  --line:        #273246;
  --line-strong: #38455e;

  --good:      #54cc98;
  --good-bg:   #163a2c;
  --warn:      #e5ad50;
  --warn-bg:   #3d3117;

  --shadow-1: 0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.22);
  --shadow-2: 0 2px 6px rgba(0,0,0,.38), 0 12px 28px rgba(0,0,0,.32);
  --shadow-3: 0 18px 50px rgba(0,0,0,.58);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--ground);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--blue); text-decoration: none; transition: color .16s var(--ease); }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ---------- Motion ---------- */
@keyframes rise      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn   { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes growBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawer    { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.content > * { animation: rise .42s var(--ease) both; }
.content > *:nth-child(2) { animation-delay: .05s; }
.content > *:nth-child(3) { animation-delay: .1s; }
.content > *:nth-child(4) { animation-delay: .15s; }
.content > *:nth-child(n+5) { animation-delay: .2s; }
.grid > *, .cols > * { animation: rise .45s var(--ease) both; }
.grid > *:nth-child(2) { animation-delay: .04s; }
.grid > *:nth-child(3) { animation-delay: .08s; }
.grid > *:nth-child(4) { animation-delay: .12s; }
.grid > *:nth-child(5) { animation-delay: .16s; }
.grid > *:nth-child(6) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; max-width: 100%; }
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.content { flex: 1; padding: 26px 32px 44px; max-width: 1380px; width: 100%; min-width: 0; }

/* ---------- Sidebar (light, so the brand logo reads correctly) ---------- */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.brand::after {   /* brand signature stripe */
  content: ""; position: absolute; inset-inline: 20px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold) 0 34%, var(--blue-deep) 34% 100%);
  border-radius: 2px;
}
.brand-logo { display: block; width: 100%; max-width: 168px; height: auto; }
.brand-sub {
  display: block; margin-top: 9px;
  font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
/* The logo is red + navy artwork, so on dark surfaces it sits on its own
   white plate rather than being recoloured or losing the navy wordmark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo,
  :root:not([data-theme="light"]) .login-brand img {
    background: #fff; border-radius: 8px; padding: 9px 11px;
  }
}
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .login-brand img {
  background: #fff; border-radius: 8px; padding: 9px 11px;
}

.sidebar nav { flex: 1; padding: 12px 12px 8px; overflow-y: auto; }
.sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink-soft); padding: 9px 12px; margin: 2px 0;
  border-radius: 10px; font-size: 13.8px; font-weight: 600;
  position: relative;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--blue); }
.sidebar nav a:hover .nav-ic { transform: scale(1.12); }
.sidebar nav a.active { background: var(--blue-soft); color: var(--blue); }
.sidebar nav a.active::before {
  content: ""; position: absolute; inset-inline-start: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--gold);
}
html[dir="rtl"] .sidebar nav a.active::before { border-radius: 3px 0 0 3px; }
.nav-ic {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-faint); transition: transform .18s var(--ease), color .18s var(--ease);
}
.sidebar nav a:hover .nav-ic { color: var(--blue); }
.sidebar nav a.active .nav-ic { color: var(--blue); }

/* Reveal-on-scroll: only ever applied by JS after an observer is watching,
   and always cleared by a failsafe. Never the sole path to visibility. */
.reveal-pending { opacity: 0; }

.sidebar-foot { padding: 13px 20px; border-top: 1px solid var(--line); }
.conf-badge {
  font-size: 11px; color: var(--ink-faint); font-weight: 600; letter-spacing: .04em;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 11px 32px;
  position: sticky; top: 0; z-index: 30;
}
.searchbox { flex: 1; max-width: 440px; position: relative; display: flex; align-items: center; }
.searchbox-ic {
  position: absolute; inset-inline-start: 13px; display: inline-flex;
  color: var(--ink-faint); pointer-events: none;
}
.searchbox input {
  width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); padding: 9px 15px; padding-inline-start: 38px;
  font-size: 13.8px; font-family: var(--font); color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.searchbox input::placeholder { color: var(--ink-faint); }
.searchbox input:focus {
  outline: none; border-color: var(--blue); background: var(--surface);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.top-actions { display: flex; align-items: center; gap: 7px; margin-inline-start: auto; }
.top-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; color: var(--ink-soft); position: relative;
  padding: 7px 11px; border-radius: 9px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.top-link:hover { background: var(--surface-2); color: var(--blue); }
.top-link.icon-only { padding: 8px; }
.top-link.cta { color: var(--blue); background: var(--blue-soft); }
.top-link.cta:hover { background: var(--blue-solid); color: #fff; }
.bell-count {
  position: absolute; top: 2px; inset-inline-end: 3px;
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; padding: 0 4px; line-height: 14px;
  box-shadow: 0 0 0 2px var(--surface);
}
.ic { display: block; flex-shrink: 0; }
.userchip {
  display: flex; align-items: center; gap: 10px;
  padding-inline-start: 14px; border-inline-start: 1px solid var(--line);
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(145deg, var(--blue-solid-h), var(--blue-solid));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; flex-shrink: 0; letter-spacing: .02em;
}
.userchip-txt { display: flex; flex-direction: column; line-height: 1.25; }
.userchip-txt strong { font-size: 13px; }
.userchip-txt span { font-size: 11px; color: var(--ink-faint); }
.logout {
  font-size: 15px; color: var(--ink-faint); padding: 5px 7px; border-radius: 7px;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.logout:hover { color: var(--red); background: var(--red-soft); }

/* ---------- Page furniture ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 22px; flex-wrap: wrap;
}
.page-head h1 {
  font-family: var(--font-display); font-size: 26px; margin: 0;
  color: var(--ink); font-weight: 700; letter-spacing: -.02em;
  text-wrap: balance;
}
.page-head .muted { margin: 5px 0 0; }
.page-head-actions { display: flex; gap: 10px; }
.muted { color: var(--ink-soft); font-size: 14px; }
.small { font-size: 12.4px; color: var(--ink-faint); }

.flash {
  margin: 14px 32px 0; padding: 11px 17px; border-radius: 10px;
  font-size: 13.8px; font-weight: 600; animation: slideIn .3s var(--ease) both;
  display: flex; align-items: center; gap: 9px;
}
.flash-success { background: var(--good-bg); color: var(--good); }
.flash-error   { background: var(--bad-bg); color: var(--bad); }

.page-foot {
  padding: 16px 32px; border-top: 1px solid var(--line);
  font-size: 11.8px; color: var(--ink-faint);
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.card.pad { padding: 22px 26px; }
.card h2, .card h3 { margin-top: 0; }
.card h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; font-size: 17px; }
.card-title {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
  padding: 16px 22px 2px;
}
.grid { display: grid; gap: 16px; }
/* Grid and flex children default to min-width:auto, which lets long content
   widen a track and push the whole page sideways. Opt every child out. */
.grid > *, .cols > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1150px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
}
@media (max-width: 660px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---------- KPI ---------- */
.kpi {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  padding: 17px 20px 15px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.kpi:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.kpi::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: var(--blue); transform-origin: left;
  animation: growBar .7s var(--ease) both .15s;
}
html[dir="rtl"] .kpi::after { transform-origin: right; }
.kpi.good::after { background: var(--good); }
.kpi.warn::after { background: var(--red); }
.kpi-label { font-size: 12.3px; color: var(--ink-soft); font-weight: 650; }
.kpi-value {
  font-size: 27px; font-weight: 700; color: var(--ink);
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
  letter-spacing: -.025em; line-height: 1.15;
}
.kpi-sub { font-size: 11.8px; color: var(--ink-faint); }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.8px; background: var(--surface); }
table.data th {
  text-align: start; font-size: 10.6px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); font-weight: 700; padding: 13px 17px 9px;
  border-bottom: 1px solid var(--line-strong); white-space: nowrap;
  background: var(--surface);
  position: sticky; top: 0;
}
table.data td { padding: 12px 17px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr, table.data tr { transition: background .14s var(--ease); }
table.data tr:hover td { background: var(--blue-tint); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; font-size: 11.2px; font-weight: 700;
  border-radius: 999px; padding: 3px 11px; white-space: nowrap;
  letter-spacing: .01em;
}
.b-good    { background: var(--good-bg); color: var(--good); }
.b-warn    { background: var(--warn-bg); color: var(--warn); }
.b-bad     { background: var(--bad-bg); color: var(--bad); }
.b-neutral { background: var(--surface-2); color: var(--ink-soft); }
.b-blue    { background: var(--blue-soft); color: var(--blue); }
.b-class-high { background: var(--red-soft); color: var(--red-deep); }
.b-class-low  { background: var(--surface-2); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--blue-solid); color: #fff; border: 1px solid transparent; cursor: pointer;
  border-radius: 9px; padding: 9px 17px; font-size: 13.4px; font-weight: 650;
  font-family: var(--font); line-height: 1.3;
  transition: background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { background: var(--blue-solid-h); color: #fff; box-shadow: 0 4px 12px rgba(39,59,143,.24); }
.btn:active { transform: translateY(1px); box-shadow: none; }
/* Blue carries every ordinary action. `.primary` spends the brand red and is
   reserved for the single most important action on a screen (e.g. Sign In). */
.btn.gold { background: var(--blue-solid); }
.btn.gold:hover { background: var(--blue-solid-h); }
.btn.primary { background: var(--blue-solid); }
.btn.primary:hover { background: var(--blue-solid-h); box-shadow: 0 4px 12px rgba(11,31,64,.28); }
.btn.ghost { background: transparent; color: var(--blue); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--blue-soft); border-color: var(--blue); box-shadow: none; color: var(--blue); }
.btn.danger { background: var(--red-solid); }
.btn.danger:hover { background: var(--red-solid-h); }
.btn.sm { padding: 5px 12px; font-size: 12.3px; border-radius: 8px; }

/* ---------- Forms ---------- */
form.stack { display: flex; flex-direction: column; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.2px; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 10px 13px;
  font-size: 13.8px; font-family: var(--font); background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
/* Two columns when there is room for two. The width that matters is the
   card's, not the window's — these rows also sit in narrow sidebar cards,
   where a fixed 1fr 1fr pushed the second field out past the edge. */
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 15px; }
.form-row > .field { min-width: 0; }
@media (max-width: 660px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Login ----------
   A deliberately single-look screen: a white card on the brand blue, in both
   themes. It therefore uses literal brand values rather than theme tokens,
   which would otherwise flip the red against a permanently white card. */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #16224f 0%, #22357f 48%, #2b41a0 100%);
}
.login-wrap::before,
.login-wrap::after {          /* soft brand glows — depth without noise */
  content: ""; position: absolute; border-radius: 50%; filter: blur(100px);
}
.login-wrap::before {
  width: 460px; height: 460px; background: #3f57c9; opacity: .45;
  top: -150px; inset-inline-start: -130px;
}
.login-wrap::after {
  width: 380px; height: 380px; background: #e82428; opacity: .16;
  bottom: -170px; inset-inline-end: -120px;
}
.login-card {
  width: 100%; max-width: 408px; background: #fff;
  border-radius: 18px; padding: 0 36px 28px;
  box-shadow: 0 24px 64px rgba(8,14,40,.42); position: relative; z-index: 1;
  overflow: hidden;
  animation: rise .55s var(--ease) both;
}
.login-card::before {          /* brand stripe echoing the logo's two colours */
  content: ""; display: block; height: 4px; margin: 0 -36px 32px;
  background: linear-gradient(90deg, #e82428 0 34%, #273b8f 34% 100%);
}
.login-brand { text-align: center; margin-bottom: 26px; }
.login-brand img { width: 186px; height: auto; margin: 0 auto 14px; display: block; }
.login-brand p {
  margin: 0; color: #55608a; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; font-weight: 700;
}
.login-card .field label { color: #55608a; }
.login-card .field input {
  background: #f7f9fd; border-color: #dde3f1; color: #1a2340;
}
.login-card .field input:focus {
  border-color: #273b8f; box-shadow: 0 0 0 3px #e6eafb;
}
.login-card .btn { width: 100%; padding: 12px; font-size: 14.2px; margin-top: 4px;
  background: #273b8f; color: #fff; }
.login-card .btn:hover { background: #33459e; color: #fff; }
.login-card .btn.primary { background: #e82428; color: #fff; }
.login-card .btn.primary:hover { background: #c51b1f; box-shadow: 0 6px 16px rgba(232,36,40,.3); }
/* Microsoft sign-in — Microsoft's brand guidance asks for a neutral button
   with the unmodified four-square logo, so it does not take the brand red. */
.login-card .btn.ms-btn {
  background: #ffffff; color: #1a2340;
  border: 1px solid #cdd5ea; font-weight: 650;
  gap: 10px; margin-top: 0;
}
.login-card .btn.ms-btn:hover {
  background: #f7f9fd; border-color: #273b8f; color: #1a2340;
  box-shadow: 0 4px 12px rgba(39,59,143,.12);
}
.mfa-note {
  text-align: center; margin: 10px 0 0; font-size: 11.4px; color: #55608a;
}
.or-rule {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 16px; color: #8b95b5; font-size: 11px;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
}
.or-rule::before, .or-rule::after {
  content: ""; flex: 1; height: 1px; background: #e2e7f4;
}
.login-conf { text-align: center; margin-top: 20px; font-size: 11.4px; color: #8b95b5; }
.login-lang { text-align: center; margin-top: 9px; font-size: 12.8px; }
.login-lang a { color: #55608a; font-weight: 600; }
.login-lang a:hover { color: #e82428; }
.login-card .flash { margin: 0 0 15px; }
.login-card .flash-error { background: #fdeced; color: #c51b1f; }

/* ---------- Lists ---------- */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; gap: 13px; align-items: center;
  padding: 13px 22px; border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease);
}
.list-item:hover { background: var(--blue-tint); }
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.list-item strong { font-size: 13.8px; }
.list-item .small { display: block; }

/* ---------- Insight / callout ---------- */
.insight {
  border-inline-start: 3px solid var(--blue);
  background: var(--blue-tint); padding: 11px 15px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.4px; margin-bottom: 10px; color: var(--ink);
}
html[dir="rtl"] .insight { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.insight:last-child { margin-bottom: 0; }
.insight.alert { border-inline-start-color: var(--red); background: var(--red-soft); }

/* ---------- Progress bars ---------- */
.bar { background: var(--surface-3); border-radius: 999px; height: 8px; overflow: hidden; }
.bar > span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-solid), var(--blue-solid-h));
  transform-origin: left; animation: growBar .85s var(--ease) both .2s;
}
html[dir="rtl"] .bar > span { transform-origin: right; }
.bar.green > span { background: linear-gradient(90deg, var(--good), #37b183); }
.bar.red > span   { background: linear-gradient(90deg, var(--red-deep), var(--red)); }
.bar.navy > span  { background: var(--blue); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a {
  padding: 9px 17px; font-size: 13.4px; font-weight: 650; color: var(--ink-soft);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 8px 8px 0 0;
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.tabs a:hover { color: var(--blue); background: var(--surface-2); }
.tabs a.active { color: var(--blue); border-bottom-color: var(--gold); }

/* ---------- Chat ---------- */
.chat-layout { display: grid; grid-template-columns: 288px 1fr; gap: 18px; align-items: start; }
.chat-layout > * { min-width: 0; }
@media (max-width: 940px) { .chat-layout { grid-template-columns: 1fr; } }
.channel-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--ink);
  border-inline-start: 3px solid transparent;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.channel-link:hover { background: var(--blue-tint); color: var(--ink); }
.channel-link.active { background: var(--blue-soft); border-inline-start-color: var(--gold); }
.chat-box { display: flex; flex-direction: column; height: 66vh; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 13px; scroll-behavior: smooth; }
.msg { max-width: 72%; animation: rise .3s var(--ease) both; }
.msg .msg-meta { font-size: 11.2px; color: var(--ink-faint); margin-bottom: 3px; font-weight: 600; }
.msg .msg-body {
  background: var(--surface-2); border-radius: 4px 13px 13px 13px; padding: 9px 14px;
  font-size: 13.8px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.5;
}
html[dir="rtl"] .msg .msg-body { border-radius: 13px 4px 13px 13px; }
.msg.mine { align-self: flex-end; }
.msg.mine .msg-meta { text-align: end; }
.msg.mine .msg-body { background: var(--blue-solid); color: #fff; border-radius: 13px 4px 13px 13px; }
html[dir="rtl"] .msg.mine .msg-body { border-radius: 4px 13px 13px 13px; }
.msg.pinned .msg-body { border: 1px solid var(--gold-mid); background: var(--gold-soft); }
.chat-compose { display: flex; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line); align-items: center; }
.chat-compose input[type=text] {
  flex: 1; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 14px;
  font-size: 13.8px; font-family: var(--font); background: var(--surface-2); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.chat-compose input[type=text]:focus {
  outline: none; border-color: var(--blue); background: var(--surface);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.chat-pin-banner {
  padding: 10px 22px; background: var(--gold-soft); border-bottom: 1px solid var(--line);
  font-size: 12.8px; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.ack-row { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Attachments inside a message bubble */
.msg-img {
  display: block; max-width: 260px; max-height: 240px; width: auto; height: auto;
  border-radius: 9px; border: 1px solid var(--line); margin-bottom: 6px;
}
.msg-file {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 11px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px;
}
.msg.mine .msg-file { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.msg.mine .msg-file .small { color: rgba(255,255,255,.75); }
.msg.mine .msg-file .btn.ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.msg.mine .msg-file .btn.ghost:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Compose-row controls */
.attach-btn, .pin-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  border: 1px solid var(--line-strong); background: var(--surface-2); font-size: 15px;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.attach-btn:hover, .pin-toggle:hover { background: var(--blue-soft); border-color: var(--blue); }
.attach-btn input[type=file] { display: none; }
.pin-toggle input { display: none; }
.pin-toggle:has(input:checked) { background: var(--gold-soft); border-color: var(--gold-mid); }
.attach-btn.has-file { background: var(--blue-soft); border-color: var(--blue); }
.chat-head {
  padding: 13px 22px; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

/* ---------- Copilot ---------- */
.copilot-hero {
  background: linear-gradient(140deg, var(--blue-deep) 0%, var(--blue) 70%, #34489c 100%);
  color: #eef1fb; border-radius: var(--radius); padding: 28px 32px; margin-bottom: 18px;
  position: relative; overflow: hidden;
}
.copilot-hero::after {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: var(--gold); opacity: .18; filter: blur(70px);
  top: -110px; inset-inline-end: -70px;
}
.copilot-hero h1 {
  font-family: var(--font-display); margin: 0 0 7px; font-size: 24px; color: #fff;
  font-weight: 700; letter-spacing: -.02em; position: relative;
}
.copilot-hero p { margin: 0; color: #c2ccec; font-size: 13.8px; position: relative; }
.prompt-chip {
  display: inline-block; background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.22);
  color: #eef1fb; border-radius: 999px; padding: 6px 15px; font-size: 12.3px;
  margin: 8px 7px 0 0; position: relative; font-weight: 600;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
html[dir="rtl"] .prompt-chip { margin: 8px 0 0 7px; }
.prompt-chip:hover {
  background: #fff; color: var(--blue); border-color: #fff;
  transform: translateY(-1px);
}
.copilot-answer {
  white-space: pre-wrap; font-size: 14px; line-height: 1.75;
  font-variant-numeric: tabular-nums;
}
.copilot-q { font-weight: 700; color: var(--blue); font-size: 15px; margin: 0; }

/* ---------- Timeline (legacy) ---------- */
.timeline { position: relative; padding-inline-start: 28px; }
.timeline::before {
  content: ""; position: absolute; inset-inline-start: 8px; top: 6px; bottom: 6px;
  width: 2px; background: linear-gradient(var(--blue), var(--gold));
  border-radius: 2px;
}
.tl-item { position: relative; margin-bottom: 24px; animation: rise .45s var(--ease) both; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: -26px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--blue);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tl-item:hover::before { border-color: var(--gold); transform: scale(1.2); }
.tl-year {
  font-family: var(--font-display); font-weight: 700; color: var(--gold);
  font-size: 16px; letter-spacing: -.01em;
}

/* ---------- Mobile ---------- */
.tabbar { display: none; }
.navburger { display: none; }

@media (max-width: 880px) {
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    z-index: 60; height: 100vh; width: 262px;
    transform: translateX(-104%);
    transition: transform .26s var(--ease);
    box-shadow: 6px 0 32px rgba(20,30,70,.22);
  }
  html[dir="rtl"] .sidebar { transform: translateX(104%); }
  #navtoggle:checked ~ .sidebar { transform: translateX(0); }
  #navtoggle:checked ~ .main::before {
    content: ""; position: fixed; inset: 0; z-index: 55;
    background: rgba(20,30,70,.4); animation: fade .22s var(--ease) both;
  }

  .navburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--blue); font-size: 16px; flex-shrink: 0;
    transition: background .16s var(--ease);
  }
  .navburger:hover { background: var(--blue-soft); }

  /* The topbar is the one row that can force horizontal overflow, so every
     child must be allowed to shrink and the optional ones step aside. */
  .topbar { padding: 9px 12px; gap: 8px; }
  /* The actions keep their natural width; the search box is the flexible one
     that gives up space, so nothing is squeezed past the viewport edge. */
  .searchbox { min-width: 0; flex: 1 1 0; }
  .top-actions { gap: 2px; flex: 0 0 auto; }
  .userchip-txt { display: none; }
  .userchip { padding-inline-start: 7px; }
  .top-link { font-size: 12.3px; padding: 7px; }
  .top-link.cta { display: none; }      /* Copilot lives in the bottom tab bar */
  .content { padding: 18px 16px 96px; }
  .flash { margin: 12px 16px 0; }
  .page-head h1 { font-size: 21px; }
  .page-foot { padding: 16px 16px 96px; }
  .card.pad { padding: 18px 18px; }

  .tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 16px rgba(20,30,70,.08);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 8px; font-size: 10.2px; font-weight: 650;
    color: var(--ink-faint); position: relative;
    transition: color .18s var(--ease);
  }
  .tabbar a.active { color: var(--blue); }
  .tabbar a.active::before {
    content: ""; position: absolute; top: 0; inset-inline: 22%;
    height: 2.5px; border-radius: 0 0 3px 3px; background: var(--gold);
  }
  .tab-ic { font-size: 17px; line-height: 1; transition: transform .18s var(--ease); }
  .tabbar a.active .tab-ic { transform: translateY(-1px) scale(1.08); }

  table.data { font-size: 13px; }
  table.data th, table.data td { padding: 10px 12px; }
  table.data th { position: static; }
  .chat-box { height: 62vh; }
  .msg { max-width: 88%; }
  .kpi-value { font-size: 23px; }

  /* Rows with a trailing action wrap instead of pushing the page sideways */
  .list-item { flex-wrap: wrap; padding: 13px 16px; }
  .list-item .grow { flex: 1 1 100%; }
  .list-item > form, .list-item > .btn, .list-item > .badge { flex: 0 0 auto; }
  .page-head { margin-bottom: 18px; }
  .card-title { padding: 15px 16px 2px; }
  .insight { font-size: 13px; }
}

@media (max-width: 540px) {
  .searchbox { max-width: none; }
  .page-head-actions { width: 100%; }
  .tabs a { padding: 8px 12px; font-size: 12.5px; }
  .login-card { padding: 30px 24px 24px; }
}

/* ---------- Valuation chart ---------- */
.chartwrap {
  color: var(--blue); margin: 6px 0 10px;
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px;
}
.chartwrap svg { display: block; width: 100%; height: 190px; }

/* ---------- Legacy media ---------- */
.legacy-media { margin-top: 9px; }
.legacy-media img, .legacy-media video {
  display: block; max-width: 340px; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
}
.legacy-media audio { width: 100%; max-width: 340px; margin-top: 4px; }

.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px;
}
.gallery figure { margin: 0; }
.gallery img, .gallery video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gallery figure:hover img { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.gallery figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 5px; }

/* ---------- Impact report ---------- */
.report-actions {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 16px;
}
.report {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 28px 30px 22px;
}
.report-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 3px solid var(--blue-solid); padding-bottom: 14px;
}
.report-head h2 { font-family: var(--font-display); font-size: 23px; letter-spacing: -.02em; }
.report-logo { width: 140px; height: auto; flex-shrink: 0; }
.report h3 {
  font-family: var(--font-display); font-size: 17px; margin: 26px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.report-foot {
  margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-faint);
}
.region-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; flex-wrap: wrap; }
.region-name { width: 150px; font-size: 13.5px; font-weight: 650; }
.region-val { width: 240px; text-align: end; }
@media (max-width: 700px) {
  .region-name, .region-val { width: 100%; text-align: start; }
}

@media print {
  .sidebar, .topbar, .tabbar, .tabs, .page-head, .page-foot,
  .report-actions, .flash { display: none !important; }
  body, .shell, .main, .content { background: #fff !important; display: block !important; padding: 0 !important; }
  .report { border: none; box-shadow: none; padding: 0; }
  .report-logo { width: 120px; }
  .kpi, .card { break-inside: avoid; box-shadow: none; }
  .kpi::after { animation: none; }
  .bar > span { animation: none; }
  a[href]::after { content: ""; }
}


/* ---------- Spaces ---------- */
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.space-card {
  display: flex; flex-direction: column; gap: 7px; padding: 18px 20px;
  color: var(--ink); position: relative;
}
.space-card:hover { color: var(--ink); }
.space-badges { display: flex; gap: 6px; align-items: center; }
.space-type {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; border-radius: 5px; padding: 2px 8px;
  background: var(--blue-soft); color: var(--blue);
}
.space-type.space-charity { background: var(--red-soft); color: var(--red-deep); }
.space-type.space-committee { background: var(--warn-bg); color: var(--warn); }
.space-type.space-business { background: var(--good-bg); color: var(--good); }
.space-name { font-size: 16px; font-family: var(--font-display); letter-spacing: -.01em; }
.space-desc { min-height: 1.2em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.space-meta { margin-top: auto; }

/* Posts (feed) */
.post { overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 11px; padding: 15px 20px 0; }
.post-body { padding: 11px 20px 0; font-size: 14.2px; line-height: 1.65; }
.post-media { padding: 12px 20px 0; }
.post-media img, .post-media video {
  max-width: 100%; max-height: 420px; border-radius: 10px; border: 1px solid var(--line);
}
.post-foot { display: flex; align-items: center; gap: 14px; padding: 11px 20px 13px; }
.react-btn {
  background: none; border: none; cursor: pointer; font-family: var(--font);
  font-size: 12.8px; font-weight: 650; color: var(--ink-faint);
  padding: 4px 8px; border-radius: 7px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.react-btn:hover { background: var(--surface-2); color: var(--ink); }
.react-btn.on { color: var(--red); }
.post-comments { border-top: 1px solid var(--line); padding: 10px 20px 4px; }
.post-comment { display: flex; gap: 9px; font-size: 13px; margin-bottom: 9px; }
.comment-form { display: flex; gap: 8px; padding: 8px 20px 14px; }
.comment-form input[type=text] {
  flex: 1; min-width: 0; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-family: var(--font);
  background: var(--surface-2); color: var(--ink);
}
.comment-form input[type=text]:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.composer-text {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 13px;
  font-family: var(--font); font-size: 14px; background: var(--surface); color: var(--ink); resize: vertical;
}
.composer-text:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.composer-row { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.composer-select {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 10px;
  font-size: 13px; background: var(--surface); color: var(--ink); font-family: var(--font);
}

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-nav { display: flex; align-items: center; gap: 9px; }
.cal-month { font-family: var(--font-display); font-size: 18px; min-width: 150px; text-align: center; }
.cal-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.cal-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 5px; }
.dot.k-meeting { background: var(--blue); }
.dot.k-event { background: var(--good); }
.dot.k-deadline { background: var(--red); }
.dot.k-reminder { background: var(--warn); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; padding: 4px 0 8px;
}
.cal-cell {
  min-height: 92px; border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 6px; display: flex; flex-direction: column; gap: 3px;
  background: var(--surface);
}
.cal-cell.empty { border: none; background: transparent; }
.cal-cell.today { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.cal-day { font-size: 11.5px; font-weight: 700; color: var(--ink-faint); }
.cal-cell.today .cal-day { color: var(--blue); }
.cal-item {
  display: block; font-size: 10.8px; font-weight: 650; line-height: 1.3;
  border-radius: 5px; padding: 2px 6px; color: #fff;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.cal-item:hover { color: #fff; opacity: .88; }
.cal-item.k-meeting { background: var(--blue-solid); }
.cal-item.k-event { background: var(--good); }
.cal-item.k-deadline { background: var(--red-solid); }
.cal-item.k-reminder, .cal-item.k-personal, .cal-item.k-holiday { background: var(--warn); }
.cal-time { opacity: .8; margin-inline-end: 4px; }
.cal-more { padding-inline-start: 4px; }
.cal-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;
  background: var(--blue-soft); color: var(--blue); line-height: 1.15;
}
.cal-chip strong { font-size: 16px; font-family: var(--font-display); }
.cal-chip span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.cal-chip.k-deadline { background: var(--red-soft); color: var(--red-deep); }
.cal-chip.k-event { background: var(--good-bg); color: var(--good); }
.cal-chip.k-reminder { background: var(--warn-bg); color: var(--warn); }
@media (max-width: 700px) {
  .cal-cell { min-height: 56px; }
  .cal-item { font-size: 9.5px; padding: 1px 4px; }
}

/* ---------- Tasks ---------- */
.task-add {
  display: flex; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.task-add input[type=text] {
  flex: 1 1 200px; min-width: 0; border: 1px solid var(--line-strong); border-radius: 9px;
  padding: 8px 12px; font-size: 13.5px; font-family: var(--font); background: var(--surface-2); color: var(--ink);
}
.task-add input[type=text]:focus { outline: none; border-color: var(--blue); background: var(--surface); }
.task-add input[type=date], .task-add select {
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 7px 9px;
  font-size: 12.5px; font-family: var(--font); background: var(--surface); color: var(--ink);
}
.task-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); color: #fff;
  font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.task-check:hover { border-color: var(--good); }
.task-check.on { background: var(--good); border-color: var(--good); }
.task-done .task-title { text-decoration: line-through; color: var(--ink-faint); }

/* Newsletter ratings — 1..5 stars (family request) */
.rate-stars { display: inline-flex; align-items: center; gap: 2px; }
.rate-card .star-btn.lg { font-size: 26px; padding: 0 2px; }
.star-btn {
  background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1;
  color: var(--line-strong); padding: 0 1px; transition: color .14s var(--ease), transform .14s var(--ease);
}
.star-btn:hover { color: var(--gold-mid); transform: scale(1.15); }
.star-btn.on { color: var(--gold); }
.star-avg { margin-inline-start: 6px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Hijri companion date under the month label */
.cal-month-wrap { display: inline-flex; flex-direction: column; line-height: 1.25; }
.cal-hijri { color: var(--ink-soft); }

/* Event calendar (Events → Calendar tab) — colour by event type, so the
   month reads at a glance. Dots in the legend use the same scale. */
.dot.e-family    { background: var(--blue-solid); }
.dot.e-charity   { background: var(--gold-solid); }
.dot.e-volunteer { background: var(--good); }
.dot.e-ceremony  { background: var(--blue-mid); }
.dot.e-meeting   { background: var(--ink-soft); }
.dot.e-competition { background: var(--warn); }

.cal-item.e-family    { background: var(--blue-solid); }
.cal-item.e-charity   { background: var(--gold-solid); }
.cal-item.e-volunteer { background: var(--good); }
.cal-item.e-ceremony  { background: var(--blue-mid); }
.cal-item.e-meeting   { background: var(--ink-soft); }
.cal-item.e-competition { background: var(--warn); }
.cal-mine { margin-inline-end: 3px; font-weight: 700; }

.cal-chip.e-family    { background: var(--blue-soft); color: var(--blue); }
.cal-chip.e-charity   { background: var(--gold-soft); color: var(--gold-deep); }
.cal-chip.e-volunteer { background: var(--good-bg); color: var(--good); }
.cal-chip.e-ceremony  { background: var(--blue-soft); color: var(--blue-mid); }
.cal-chip.e-meeting   { background: var(--surface-3); color: var(--ink-soft); }
.cal-chip.e-competition { background: var(--warn-bg); color: var(--warn); }

/* ============================================================
   Family tree — two readable views of one lineage.
   Outline: indented, collapsible, never scrolls sideways.
   Chart:   the classic top-down poster view, in its own scroller.
   Generation accents: G1 gold · G2 navy · G3 green · G4 soft navy.
   ============================================================ */
.tree-wrap { margin-top: 16px; }

/* Family decisions (26 Aug 2026): generations wear blues from dark (G2) to
   light (G4+); the founder is darkest. Men are labelled blue, women pink. */
:root {
  --tg1: #0b1f40; --tg2: #17305a; --tg3: #33598f; --tg4: #6d93c4; --tg5: #a9c3e2;
  --male: #2b4a7e; --male-soft: #e9eef7;
  --female: #c2618f; --female-soft: #fbe9f1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tg1: #cfa96e; --tg2: #4a6fa5; --tg3: #6b8fc4; --tg4: #93b2dc; --tg5: #b9cfe9;
    --male: #9ab2df; --male-soft: #1e2d47;
    --female: #e59ec0; --female-soft: #3a2230;
  }
}
:root[data-theme="dark"] {
  --tg1: #cfa96e; --tg2: #4a6fa5; --tg3: #6b8fc4; --tg4: #93b2dc; --tg5: #b9cfe9;
  --male: #9ab2df; --male-soft: #1e2d47;
  --female: #e59ec0; --female-soft: #3a2230;
}

/* --- Toolbar --- */
.tree-bar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-1); margin-bottom: 16px;
  position: sticky; top: 8px; z-index: 4;
}
.tree-bar-row {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  justify-content: space-between;
}
.tree-bar-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tree-search { position: relative; display: flex; align-items: center; min-width: 0; }
.tree-search-ic {
  position: absolute; inset-inline-start: 11px; display: inline-flex;
  color: var(--ink-faint); pointer-events: none;
}
.tree-search input {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; padding-inline-start: 34px; width: 216px; max-width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.tree-search input:focus {
  outline: none; border-color: var(--blue); background: var(--surface);
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.tree-btns { display: flex; gap: 6px; }

/* Segmented view switch (pure CSS) */
.tree-switch {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
}
.tree-switch label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; font-weight: 650; color: var(--ink-soft);
  padding: 6px 14px; border-radius: 999px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tree-switch label:hover { color: var(--ink); }
/* The pane swap is CSS (radio ~ sibling pane), but the pill highlight is a
   class: Chrome does not re-invalidate a *descendant* subject when a hidden
   radio flips, so the server renders it and app.js keeps it in step. */
.tree-switch label.on {
  background: var(--surface); color: var(--blue);
  box-shadow: var(--shadow-1);
}
.tree-switch label.kb-focus { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Kept focusable for keyboard use, out of sight for everyone else. */
.vis-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden;
}
.tcollapse:focus-visible ~ .tnode .tcaret { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Generation legend */
.tree-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.tleg { display: inline-flex; align-items: center; gap: 7px; }
.tleg i { width: 10px; height: 10px; border-radius: 3px; background: var(--line-strong); }
.tleg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tleg.g1 i { background: var(--tg1); }
.tleg.g2 i { background: var(--tg2); }
.tleg.g3 i { background: var(--tg3); }
.tleg.g4 i { background: var(--tg4); }
.tleg-sep { width: 1px; height: 14px; background: var(--line-strong); }
.tleg.tleg-m i { background: var(--male); }
.tleg.tleg-f i { background: var(--female); }

/* --- View switching --- */
.tree-chart { display: none; }
#tv-chart:checked ~ .tree-outline { display: none; }
#tv-chart:checked ~ .tree-chart { display: block; }
#tv-outline:checked ~ .tree-bar [data-chart-only] { display: none; }

/* Zoom group (chart view) */
.tree-zoom {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.zoom-btn, .zoom-val {
  border: none; cursor: pointer; font: inherit; color: var(--ink-soft);
  background: none; border-radius: 999px; line-height: 1;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.zoom-btn { width: 26px; height: 26px; font-size: 16px; font-weight: 700; }
.zoom-btn:hover { background: var(--surface); color: var(--blue); }
.zoom-val {
  min-width: 46px; height: 26px; font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.zoom-val:hover { background: var(--surface); color: var(--blue); }
.tree-zoom .btn { border: none; }

/* Full-screen: the whole tree block takes the display */
#tree-fs .fs-off { display: none; }
#tree-fs .fs-on { display: inline-flex; align-items: center; gap: 6px; }
.tree-wrap:fullscreen, .tree-wrap.fs-fallback {
  background: var(--ground); padding: 18px 24px; overflow-y: auto;
}
.tree-wrap.fs-fallback { position: fixed; inset: 0; z-index: 80; margin: 0; }
body.fs-lock { overflow: hidden; }
.tree-wrap:fullscreen #tree-fs .fs-on, .tree-wrap.fs-fallback #tree-fs .fs-on { display: none; }
.tree-wrap:fullscreen #tree-fs .fs-off, .tree-wrap.fs-fallback #tree-fs .fs-off {
  display: inline-flex; align-items: center; gap: 6px;
}
.tree-wrap:fullscreen .tree-outline .tlines, .tree-wrap.fs-fallback .tree-outline .tlines {
  max-width: 1080px; margin-inline: auto;
}
.tree-wrap:fullscreen .tree-chart-scroll, .tree-wrap.fs-fallback .tree-chart-scroll {
  max-height: calc(100vh - 200px);
}

/* --- Outline view --- */
.tree-outline .tlines, .tree-outline .tlines ul { list-style: none; margin: 0; padding: 0; }
.tree-outline .tlines { max-width: 880px; }   /* rows stay a readable measure */
.tree-outline .tkids > ul {
  margin-inline-start: 21px; padding-inline-start: 20px;
  border-inline-start: 1.5px solid var(--line-strong);
}
.tnode-wrap { position: relative; }

/* Person row */
.tnode {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: 12px; padding: 11px 14px; margin: 7px 0;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease), background .18s var(--ease);
}
.tnode:hover {
  border-color: var(--blue); box-shadow: var(--shadow-2);
  transform: translateX(2px);
}
html[dir="rtl"] .tnode:hover { transform: translateX(-2px); }
.tkids > ul > .tnode-wrap > .tnode::before {   /* elbow into the guide rail */
  content: ""; position: absolute; inset-inline-start: -20px; top: 50%;
  width: 20px; height: 1.5px; background: var(--line-strong);
}
.tnode.g1 { border-inline-start-color: var(--tg1); }
.tnode.g2 { border-inline-start-color: var(--tg2); }
.tnode.g3 { border-inline-start-color: var(--tg3); }
.tnode.g4 { border-inline-start-color: var(--tg4); }
.tnode.g5, .tnode.g6, .tnode.g7 { border-inline-start-color: var(--tg5); }

/* Gender labels: men blue, women light pink (family decision) */
.tnode.male .tname, .tcard.male .tname { color: var(--male); }
.tnode.female .tname, .tcard.female .tname { color: var(--female); }
.tnode.male .tavatar, .tcard.male .tavatar { background: var(--male-soft); color: var(--male); }
.tnode.female .tavatar, .tcard.female .tavatar,
.tavatar.female { background: var(--female-soft); color: var(--female); }

/* The family asked that the tree not mark who has passed away, so there is no
   deceased styling here any more — the record keeps the fact, the page does
   not show it. */
.tname-partner { display: block; }

/* The founder and his wife: one dark, large card at the head of the tree.
   It is the head of the tree, so it carries the darkest card. */
.tnode.tfounder {
  background: linear-gradient(135deg, var(--tg1) 0%, #16305a 100%);
  border-color: var(--tg1); border-inline-start-color: var(--gold-mid);
  padding: 18px 20px; gap: 14px;
}
.tnode.tfounder .tname { color: #fff; font-size: 17px; }
.tnode.tfounder .tname:hover { color: var(--gold-mid); }
.tnode.tfounder .tname-partner { color: #d9dfeb; font-size: 14px; font-weight: 600; }
.tnode.tfounder .trole { color: var(--gold-mid); }
.tnode.tfounder .tavatar { width: 52px; height: 52px; font-size: 16px;
  background: rgba(255,255,255,.16); color: #f3efe6; }
.tnode.tfounder .tavatar.female { margin-inline-start: -10px;
  box-shadow: 0 0 0 2px #16305a; background: #443349; color: #eccfdf; }
.tnode.tfounder .tchip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #d9dfeb; }
.tnode.tfounder .tchip-gen { color: var(--gold-mid); background: rgba(255,255,255,.08); }
.tnode.tfounder .tcaret { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); color: #fff; }
.tnode.tfounder .tcaret:hover { background: rgba(255,255,255,.22); color: #fff; }
.tnode.tfounder .tcount { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #d9dfeb; }

.tcard.tfounder {
  background: linear-gradient(160deg, var(--tg1) 0%, #16305a 100%);
  border-color: var(--tg1); border-top-color: var(--gold-mid); opacity: 1;
  min-width: 220px; padding: 18px 22px 16px;
}
.tcard.tfounder .tname { color: #fff; font-size: 15.5px; }
.tcard.tfounder .tname-partner { color: #d9dfeb; font-size: 12.5px; font-weight: 600; }
.tcard.tfounder .trole { color: var(--gold-mid); }
.tcard.tfounder .tcard-meta { color: #aab6cd; }
.tcard.tfounder .tavatar { width: 50px; height: 50px; font-size: 15px;
  background: rgba(255,255,255,.16); color: #f3efe6; }
.tcard.tfounder .tavatar.female { margin-inline-start: -10px;
  box-shadow: 0 0 0 2px #16305a; background: #443349; color: #eccfdf; }
.tcard-avatars { display: inline-flex; margin-bottom: 3px; }

.tcaret {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .24s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.tcaret:hover { background: var(--blue-soft); color: var(--blue); }
.tcaret.tleaf {
  cursor: default; background: none; border: none;
}
.tcaret.tleaf::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong);
}
/* Explicit +/- (family request): minus while open, plus while collapsed */
.tpm::before { content: "\2212"; font-size: 15px; font-weight: 700; line-height: 1; }
.tcollapse:checked ~ .tnode .tpm::before { content: "+"; }

.tavatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: var(--blue-soft); color: var(--blue); text-decoration: none;
}
.tinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tname {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35;
  text-decoration: none;
}
.tname:hover { color: var(--blue); }
.trole { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.tchip {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.tchip-gen { color: var(--blue); background: var(--blue-soft); border-color: transparent; }
.tcount {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}

/* Collapse animation — grid rows interpolate, so heights need no measuring */
.tkids { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease); }
.tkids > ul { overflow: hidden; min-height: 0; }
.tcollapse:checked ~ .tkids { grid-template-rows: 0fr; }

/* Search filtering (progressive enhancement) */
.tout { display: none !important; }
.tree-empty { display: none; margin: 6px 0 0; }
.tree-wrap.is-empty .tree-empty { display: block; }
.thit > .tnode, .thit > .tcard {
  border-color: var(--gold-mid);
  box-shadow: 0 0 0 3px var(--gold-soft);
}
.is-filtering .tnode-wrap:not(.thit) > .tnode { opacity: .62; }

/* --- Chart view --- */
.tree-chart-scroll {
  overflow: auto; padding: 6px 4px 14px;
  scrollbar-width: thin; cursor: grab;
}
.tree-chart-scroll.dragging { cursor: grabbing; user-select: none; }
.tchart, .tchart ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; justify-content: center; min-width: max-content;
}
.tchart ul { padding-top: 26px; position: relative; }
.tchart li { position: relative; padding: 26px 12px 0; text-align: center; }
.tchart > li { padding-top: 0; }
.tchart li::before, .tchart li::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 26px;
  border-top: 1.5px solid var(--line-strong);
}
.tchart li::before { inset-inline-start: 0; border-inline-end: 1.5px solid var(--line-strong); }
.tchart li::after { inset-inline-end: 0; }
.tchart li:only-child::before, .tchart li:only-child::after { display: none; }
.tchart li:first-child::before { border: none; }
.tchart li:last-child::after { border: none; }
.tchart > li::before, .tchart > li::after { display: none; }
.tchart ul::before {
  content: ""; position: absolute; top: 0; inset-inline-start: 50%; width: 1.5px; height: 26px;
  background: var(--line-strong);
}
.tcard {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  border-top: 3px solid var(--line-strong);
  padding: 12px 14px 14px; min-width: 148px; max-width: 194px; color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}

/* Chart collapse: +/- chip hanging off the card's bottom edge */
.ccollapse:checked ~ ul { display: none; }
.cpm {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px; margin: -13px auto 0;
  position: relative; z-index: 2; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: 999px; color: var(--ink-soft);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-1);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.cpm:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.ccollapse:checked ~ .cpm .pm-open { display: none; }
.ccollapse:not(:checked) ~ .cpm .pm-closed { display: none; }
.ccollapse:focus-visible ~ .cpm { outline: 2px solid var(--blue); outline-offset: 2px; }
.tcard:hover { border-color: var(--blue); box-shadow: var(--shadow-2); transform: translateY(-3px); color: var(--ink); }
.tcard.g1 { border-top-color: var(--tg1); }
.tcard.g2 { border-top-color: var(--tg2); }
.tcard.g3 { border-top-color: var(--tg3); }
.tcard.g4 { border-top-color: var(--tg4); }
.tcard.g5, .tcard.g6, .tcard.g7 { border-top-color: var(--tg5); }
.tcard .tavatar { width: 42px; height: 42px; font-size: 14px; margin-bottom: 3px; }
.tcard .tname { font-size: 14px; line-height: 1.4; }
.tcard .trole { font-size: 11.5px; }
.tcard-meta { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .tree-bar { position: static; }
  .tree-bar-tools { width: 100%; }
  .tree-search input { width: 100%; }
  .tree-search { flex: 1 1 160px; }
  .tnode { flex-wrap: wrap; gap: 9px; padding: 10px 12px; }
  .tcount { order: 3; }
  .tree-outline .tkids > ul { margin-inline-start: 12px; padding-inline-start: 14px; }
  .tkids > ul > .tnode-wrap > .tnode::before { inset-inline-start: -14px; width: 14px; }
}

/* ---------- Newsletter ---------- */
.newsletter-row { display: flex; gap: 14px; color: var(--ink); }
.newsletter-row:hover { color: var(--ink); }
.newsletter-body { font-size: 14.6px; line-height: 1.75; }
.newsletter-body .lede { font-size: 16px; color: var(--ink-soft); }

/* ---------- AI summary & minutes ---------- */
.ai-summary {
  border: 1px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--blue-tint); padding: 12px 16px;
}
.ai-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; color: var(--blue); }
.minutes-editor summary { cursor: pointer; color: var(--blue); font-weight: 650; }

/* Inline checkbox label */
.check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.4px; color: var(--ink-soft); font-weight: 600; cursor: pointer;
}
.check input { width: 15px; height: 15px; accent-color: var(--blue-solid); cursor: pointer; }

/* ---------- Utilities ---------- */
.right { text-align: end; }
.center { text-align: center; }
.mt { margin-top: 16px; }
.mb0 { margin-bottom: 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.stat-strong { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ============================================================
   Basmah landing — golden-ratio split (1.618 : 1), single screen.
   The whole charter has to be readable without scrolling, so the
   hero is a grid whose type scales with viewport height (vh) and
   whose rows breathe only as far as the screen allows.
   Details stay visually left and login right in BOTH languages,
   so the grid is pinned LTR; each panel restores its own direction.
   ============================================================ */
.landing-body { background: #0b1f40; }
.landing {
  display: grid; grid-template-columns: 1.618fr 1fr;
  min-height: 100vh; height: 100dvh; direction: ltr; overflow: hidden;
}

/* --- Details column (navy, gold-accented) --- */
.landing-hero {
  background:
    radial-gradient(900px 620px at 14% -8%, #1f4067 0%, transparent 58%),
    radial-gradient(760px 520px at 108% 112%, rgba(197,158,89,.32) 0%, transparent 55%),
    linear-gradient(158deg, #08172e 0%, #0b1f40 52%, #163057 100%);
  color: #e9eaf0; min-height: 0;
  padding: clamp(16px, 3.2vh, 40px) clamp(24px, 4vw, 68px);
  display: grid; align-content: center;
}
.landing-hero-inner {
  width: 100%; max-width: min(1080px, 100%); margin-inline: auto; min-height: 0;
  display: grid; gap: clamp(9px, 1.9vh, 28px);
}
html[dir="rtl"] .landing-hero-inner { direction: rtl; text-align: right; }
html[dir="ltr"] .landing-hero-inner { direction: ltr; text-align: left; }

/* Brand row — the horizontal lockup keeps the vertical budget free */
.landing-brand {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 24px);
  flex-wrap: wrap; margin: 0;
}
.landing-lockup {
  height: clamp(58px, 11.5vh, 132px); width: auto; max-width: 100%;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.4));
}
.landing-family {
  font-size: clamp(10px, 1.35vh, 12.5px); letter-spacing: .24em;
  text-transform: uppercase; color: #cba869; font-weight: 700; margin: 0;
  padding-inline-start: clamp(12px, 2vw, 22px);
  border-inline-start: 1px solid rgba(197,158,89,.42);
}
.landing-tagline {
  font-size: clamp(13px, 1.95vh, 21px); line-height: 1.55; color: #ccd3e2;
  margin: 0; max-width: 46em; text-wrap: balance;
}

/* Charter sections */
.lsec { margin: 0; min-width: 0; }
.lsec-h {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.95vh, 19.5px); font-weight: 750; color: #fff;
  margin: 0 0 clamp(4px, .8vh, 9px); padding-bottom: clamp(3px, .6vh, 7px);
  position: relative;
}
.lsec-h::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 46px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #cba869, rgba(197,158,89,0));
}
.lsec-body {
  margin: 0; font-size: clamp(11.5px, 1.62vh, 15.4px);
  line-height: 1.66; color: #c1c8d8;
}
.lsec-body.lead { color: #ced4e2; max-width: 74ch; }

.lsec-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px); }
.lsec-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
  border-inline-start: 3px solid #cba869;
  border-radius: 12px; padding: clamp(10px, 1.5vh, 18px) clamp(13px, 1.4vw, 20px);
}
.lsec-card .lsec-h { font-size: clamp(12px, 1.6vh, 15.5px); }
.lsec-card .lsec-h::after { width: 30px; }

.landing-objectives {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(5px, .9vh, 11px) clamp(12px, 1.6vw, 24px);
}
.landing-objectives li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: clamp(10.5px, 1.5vh, 14px); line-height: 1.55; color: #c1c8d8;
}
.lo-n {
  flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(197,158,89,.16); border: 1px solid rgba(197,158,89,.5);
  color: #ddc08c; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* Footer strip — feature chips and the confidentiality note share a line */
.landing-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 18px; flex-wrap: wrap; margin: 0;
  padding-top: clamp(7px, 1.2vh, 14px); border-top: 1px solid rgba(255,255,255,.09);
}
.landing-features {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: clamp(5px, .7vw, 9px);
}
.landing-features li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: clamp(4px, .7vh, 7px) clamp(9px, .9vw, 13px); border-radius: 999px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(197,158,89,.36);
  font-size: clamp(10.5px, 1.35vh, 13px); font-weight: 600; color: #e5e7ee;
  white-space: nowrap;
}
.lf-ic { display: inline-flex; color: #cba869; }
.landing-conf { font-size: clamp(10px, 1.25vh, 12px); color: #8e97ab; margin: 0; }

/* --- Login column (kept literal-light: it is white in both themes) --- */
.landing-login {
  background: #fbfaf6; display: grid; align-content: center; justify-items: center;
  padding: clamp(20px, 3vh, 48px) clamp(20px, 4vw, 56px);
  border-inline-start: 1px solid #e6e3d9; min-height: 0; overflow-y: auto;
}
.landing-login-inner { width: 100%; max-width: 392px; }
.landing-login-mark {
  width: clamp(38px, 6vh, 54px); height: clamp(38px, 6vh, 54px);
  object-fit: contain; display: block; margin-bottom: clamp(7px, 1.4vh, 16px);
}
.landing-login h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vh, 26px); font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 4px; color: #0b1f40;
}
.landing-login .muted { color: #525d78; font-size: 14px; margin-bottom: clamp(10px, 2vh, 22px); }
.landing-login .field { margin-bottom: clamp(6px, 1.1vh, 12px); }
.landing-login .field label { color: #525d78; }
.landing-login .field input { background: #fff; border: 1px solid #ddd9cc; color: #1b2438; }
.landing-login .field input:focus { border-color: #17305a; box-shadow: 0 0 0 3px #e7ebf3; }
.landing-login .btn { width: 100%; }
.landing-login .btn.primary { background: #17305a; }
.landing-login .btn.primary:hover { background: #223f70; box-shadow: 0 4px 12px rgba(11,31,64,.28); }
.landing-login .btn.ms-btn { background: #fff; color: #1b2438; border: 1px solid #ddd9cc; gap: 10px; }
.landing-login .btn.ms-btn:hover { background: #f6f4ee; border-color: #c59e59; color: #0b1f40; }
.landing-login .or-rule { margin: clamp(8px, 1.5vh, 16px) 0; color: #8b92a8; }
.landing-login .or-rule::before, .landing-login .or-rule::after { background: #e6e3d9; }
.landing-login .flash { margin: 0 0 14px; }
.landing-login .flash-error { background: #fdeced; color: #c51b1f; }
.landing-login .login-lang { text-align: center; margin-top: clamp(8px, 1.6vh, 16px); font-size: 13px; }
.landing-login .login-lang a { color: #525d78; font-weight: 600; }
.landing-login .login-lang a:hover { color: #a8813d; }

/* Narrow desktops: objectives fall to two columns before anything shrinks further */
@media (max-width: 1250px) {
  .landing-objectives { grid-template-columns: repeat(2, 1fr); }
}
/* Short windows (netbooks, split screens): trim the line that repeats what
   the About paragraph already says, and tighten the rhythm, so the charter
   still lands on one screen. */
@media (max-height: 680px) {
  .landing-hero { padding-block: clamp(12px, 2.4vh, 22px); }
  .landing-hero-inner { gap: clamp(7px, 1.4vh, 12px); }
  .landing-tagline { display: none; }
  .landing-lockup { height: clamp(48px, 9.5vh, 72px); }
  .lsec-body { font-size: clamp(10.8px, 1.55vh, 12.6px); line-height: 1.55; }
  .landing-objectives li { font-size: clamp(10px, 1.45vh, 12px); line-height: 1.45; }
  .lsec-card { padding: 9px 12px; }
}
/* Last resort — a window too short for any layout scrolls rather than clips. */
@media (max-height: 520px) {
  .landing-hero { align-content: start; overflow-y: auto; }
}
/* Phones and tablets: natural document flow, login first */
@media (max-width: 900px) {
  .landing { grid-template-columns: 1fr; height: auto; min-height: 100vh; overflow: visible; }
  .landing-hero { align-content: start; padding: 34px 24px 40px; overflow: visible; }
  .landing-login { order: -1; border-inline-start: none; border-bottom: 1px solid #e6e3d9;
    padding-block: 34px; overflow: visible; }
  .landing-brand { justify-content: center; text-align: center; }
  .lsec-pair, .landing-objectives { grid-template-columns: 1fr; }
  .landing-foot { justify-content: center; }
}

/* ============================================================
   Signing in with a code — the SMS screens
   ============================================================
   Six boxes rather than one field, because a six-digit code read off a lock
   screen is entered a digit at a time and the eye needs to see how many are
   left. They are always left-to-right: a number reads the same way in both
   languages, and the first box has to be the first digit. */
/* Said on the password screen, before the second step arrives. */
.login-note {
  display: flex; align-items: flex-start; gap: 7px;
  margin: clamp(8px, 1.6vh, 14px) 0 0; font-size: 12.6px; line-height: 1.55;
  color: #6b7288;
}
.login-note svg { flex: none; margin-top: 2px; color: #a8813d; }

/* Which of the two steps this is. */
.otp-step {
  margin: 0 0 4px; font-size: 11.6px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #a8813d;
}
html[dir="rtl"] .otp-step { letter-spacing: normal; text-transform: none; }

.otp-dest { line-height: 1.7; }
/* The masked number must not be broken across a line: half of it on one
   line and half on the next reads as two different numbers. */
.otp-dest b { color: #1b2438; font-variant-numeric: tabular-nums; white-space: nowrap; }

.otp-boxes {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: clamp(8px, 1.6vh, 14px);
}
.otp-box {
  width: 100%; aspect-ratio: 5 / 6; min-height: 46px; padding: 0;
  text-align: center; font-size: clamp(19px, 3.4vh, 25px); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: #17305a; background: #fff;
  border: 1px solid #ddd9cc; border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.otp-box:hover { border-color: #c9c3b1; }
.otp-box:focus {
  outline: none; background: #fff;
  border-color: #17305a; box-shadow: 0 0 0 3px #e7ebf3;
}
/* A filled box is done with; the empty ones are where the eye should go. */
.otp-box:not(:placeholder-shown) { border-color: #17305a; }

/* The two actions under the boxes: another code, or another number. Plain
   text rather than buttons — they are each a form, but neither is the thing
   the member came here to press. */
.otp-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: clamp(6px, 1.2vh, 12px);
}
.otp-meta form { margin: 0; }
.linklike {
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: #17305a;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
.linklike:hover:not(:disabled) { color: #a8813d; text-decoration: underline; }
.linklike:disabled { color: #9aa1b4; cursor: default; }
.linklike:focus-visible { outline: 2px solid #c59e59; outline-offset: 3px; border-radius: 4px; }

.otp-alt {
  text-align: center; margin: clamp(10px, 1.8vh, 18px) 0 0;
  padding-top: clamp(8px, 1.4vh, 14px); border-top: 1px solid #efece3;
  font-size: 13px;
}
.otp-alt a { color: #525d78; font-weight: 600; }
.otp-alt a:hover { color: #a8813d; }

/* Shown only while the Twilio credentials in config.php are placeholders, so
   the flow can be walked through on a machine that cannot send anything.
   Block, not flex like every other flash: this one is a sentence with the
   code under it, and as a flex row the two sat side by side and the sentence
   wrapped into a column two words wide. */
.otp-dev {
  display: block; line-height: 1.6;
  background: #fdf6e3; color: #6b5420; border: 1px dashed #d9c48a;
}
.otp-dev code {
  display: block; width: fit-content; margin-top: 7px;
  font-size: 19px; font-weight: 800; letter-spacing: .18em;
  color: #3d2f0c; background: rgba(255,255,255,.75);
  padding: 4px 12px; border-radius: 8px;
}

@media (max-width: 420px) {
  .otp-boxes { gap: 6px; }
  .otp-box { min-height: 42px; font-size: 19px; }
}

/* ============================================================
   Uploading — the progress bar
   ============================================================
   It appears under the file input once something is chosen and stays until
   the form is saved, because the thing it is reporting on finishes before the
   form does: the bytes are already on the server while the member is still
   typing the title. "Ready to save" is the state that says so.

   Always left-to-right. A bar that fills from the right in Arabic is arguably
   correct and reads as broken to everyone, this family included — they have
   watched the same blue bar fill rightwards their whole lives. */
.up-prog {
  margin-top: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.up-prog-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.up-prog-name {
  font-size: 12.8px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.up-prog-cancel { font-size: 12.2px; flex: none; }

.up-prog-track {
  direction: ltr;
  height: 7px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 11%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .up-prog-track { background: rgba(120, 130, 150, .22); }
}
.up-prog-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transition: width .18s linear;
}
/* The last few per cent of a big file can sit still while the server writes,
   so the bar breathes rather than looking hung. */
.up-prog:not(.is-done):not(.is-error) .up-prog-fill { animation: upPulse 1.6s ease-in-out infinite; }
@keyframes upPulse { 50% { opacity: .72; } }
@media (prefers-reduced-motion: reduce) {
  .up-prog-fill { transition: none; animation: none; }
}

.up-prog-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 7px; font-size: 11.8px; color: var(--ink-faint);
}
/* The state word never wraps — "Ready to save" broken over two lines in a
   narrow column reads as a fault rather than a result. The file name gives
   way instead, since it is already above. */
.up-prog-pct  { font-weight: 700; color: var(--ink-soft); flex: none; white-space: nowrap; }
.up-prog-size { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.up-prog.is-done  { border-color: var(--good); background: var(--good-bg); }
.up-prog.is-done .up-prog-fill { width: 100% !important; background: var(--good); }
.up-prog.is-done .up-prog-pct  { color: var(--good); }

.up-prog.is-error { border-color: var(--bad); background: var(--bad-bg); }
.up-prog.is-error .up-prog-fill { background: var(--bad); }
.up-prog.is-error .up-prog-pct  { color: var(--bad); font-weight: 600; }

/* Save is held while bytes are still moving; say so rather than look dead. */
button[data-wait] { opacity: .6; cursor: progress; }

/* ---------- Choosing several people at once ----------
   The competition entry list: a parent registers four children in one go, so
   it is a standing list rather than a dropdown. Padding moves off the box and
   onto the rows, or the first and last names sit against the border. */
.field select[multiple] {
  padding: 5px; line-height: 1.5;
  background-image: none;          /* no dropdown arrow on a list */
  overflow-y: auto;
}
.field select[multiple] option {
  padding: 6px 9px; border-radius: 6px;
}
.field select[multiple] option:checked {
  background: var(--blue-soft); color: var(--ink);
  font-weight: 600;
}
@media (max-width: 560px) {
  .field select[multiple] { font-size: 15px; }   /* thumbs, not a mouse */
}

/* ---------- The emblem in the sidebar ----------
   Small, and above the word, the way the approved logo stacks them. Two
   artworks rather than one filtered, for the same reason the wordmark has
   two: the gold has to stay gold on a dark ground instead of being flattened
   to white along with the navy. */
/* .brand-row is a flex row from an older brand layout; the emblem goes
   above the word the way the approved logo stacks them, so the row becomes
   a column here. */
.brand-row { flex-direction: column; gap: 0; }
.brand-mark {
  display: block; width: auto; height: 44px;
  margin: 2px auto 9px;
}
.brand-mark.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark.on-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark.on-dark { display: block; }
}
:root[data-theme="dark"] .brand-mark.on-light { display: none; }
:root[data-theme="dark"] .brand-mark.on-dark { display: block; }
:root[data-theme="light"] .brand-mark.on-light { display: block; }
:root[data-theme="light"] .brand-mark.on-dark { display: none; }

/* The sign-in panel holds the emblem now, which is upright rather than wide,
   so it may have the full height of its slot. */
.landing-login-mark { width: auto; }

/* ---------- A freshly minted password ----------
   Shown once, immediately after an administrator resets an account, so that
   it can be read down a telephone. Set large and spaced because that is what
   it is for — somebody is reading it aloud, character by character, to a
   family member who is writing it down. */
.minted {
  border-color: var(--gold); background: var(--gold-soft);
  margin-bottom: 18px;
}
:root[data-theme="dark"] .minted,
html:not([data-theme="light"]) .minted {
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-theme="dark"] .minted { background: #2a2216; }
}
.minted h3 { color: var(--gold-deep); }
:root[data-theme="dark"] .minted h3 { color: var(--gold); }
.minted-pw {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(22px, 4vw, 34px); font-weight: 700;
  letter-spacing: .10em; color: var(--ink);
  margin: 14px 0 10px; user-select: all;      /* one click selects the lot */
  word-break: break-all;
}

/* ---------- A certificate, on a profile ----------
   These entries are a photograph of a piece of paper rather than a line of
   text, so the picture leads and whatever was written about it sits beside.
   Capped rather than full-bleed: a profile is a list of things somebody has
   done, and one framed certificate should not fill the screen. */
.cert-shot {
  display: block; flex: none; width: 132px; margin-inline-end: 14px;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.cert-shot:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cert-shot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.cert-shot img { display: block; width: 100%; height: auto; }

/* the smaller one, in the editor's list of entries */
.cert-thumb {
  display: block; width: 64px; height: auto; margin-top: 6px;
  border-radius: 7px; border: 1px solid var(--line);
}

/* A certificate sent as a PDF (30 Sep 2026): a document tile rather than a
   picture, opening in the browser's own viewer. */
.cert-pdf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 3 / 4; text-decoration: none; color: var(--ink-soft);
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
}
.cert-pdf-mark {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--red-solid);
}
.cert-pdf-open { font-size: 12px; font-weight: 650; }
a.cert-thumb.cert-pdf { width: 48px; aspect-ratio: 3 / 4; }
a.cert-thumb.cert-pdf .cert-pdf-mark { font-size: 10px; padding: 2px 6px; }

@media (max-width: 560px) {
  .cert-shot { width: 92px; margin-inline-end: 10px; }
}

/* Brand plate — the lockup is navy ink, so it keeps an ivory ground
   in both themes rather than vanishing into a dark surface. */
.brand-card { background: #fbfaf6; border-color: #e6e3d9; }
.brand-card .small, .brand-card p { color: #525d78; }
.brand-lockup-card {
  display: block; width: 100%; max-width: 176px; height: auto;
  margin: 2px auto 12px;
}

/* ---------- Script-aware tracking ----------
   Arabic joins its letters, so tracking must be off wherever Arabic renders;
   the two bilingual slots that flip language keep their own values. */
html[dir="rtl"] * { letter-spacing: normal; }
html[dir="rtl"] .brand-word small { letter-spacing: .12em; }   /* Latin here */
html[dir="ltr"] .brand-word small { letter-spacing: normal; }  /* Arabic here */

/* ---------- Brand: the Arabic wordmark is the logo ----------
   The fingerprint keeps its own life as the app icon and the social card. */
.brand-wordmark {
  display: block; width: 100%; max-width: 176px; height: auto; margin: 2px auto 4px;
}
/* Two real artworks rather than a filter, so the gold in "إرث و أثر" survives
   on a dark ground instead of being flattened to white. */
.brand-wordmark.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-wordmark.on-light { display: none; }
  :root:not([data-theme="light"]) .brand-wordmark.on-dark { display: block; }
}
:root[data-theme="dark"] .brand-wordmark.on-light { display: none; }
:root[data-theme="dark"] .brand-wordmark.on-dark { display: block; }
:root[data-theme="light"] .brand-wordmark.on-light { display: block; }
:root[data-theme="light"] .brand-wordmark.on-dark { display: none; }

/* ---------- Basmah sidebar brand ---------- */
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-mark-img {
  width: 48px; height: 48px; flex-shrink: 0; object-fit: contain;
  background: #fff; border-radius: 13px; padding: 4px;
  border: 1px solid var(--line);
}
.brand-word { display: flex; flex-direction: column; line-height: 1.1; }
.brand-word strong { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.brand-word small { font-size: 12px; color: var(--gold); font-weight: 700; letter-spacing: .12em; }

/* ============================================================
   2026 refresh layer
   The bones of the design system stay; this sharpens the surfaces,
   the motion and the feedback so the platform reads as current:
   softer geometry, layered shadows, a glass top bar, toasts instead
   of banner bars, and a progress hairline for instant navigation.
   ============================================================ */
:root {
  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  /* Layered, low-opacity shadows read as depth rather than as a drop shadow */
  --shadow-1: 0 1px 2px rgba(11,31,64,.04), 0 2px 6px rgba(11,31,64,.04);
  --shadow-2: 0 2px 4px rgba(11,31,64,.05), 0 10px 24px -6px rgba(11,31,64,.10);
  --shadow-3: 0 24px 60px -12px rgba(11,31,64,.30);
  --ring: 0 0 0 3px var(--blue-soft);
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --ring: 0 0 0 3px rgba(154,178,223,.22);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
    --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 10px 24px -6px rgba(0,0,0,.45);
    --shadow-3: 0 24px 60px -12px rgba(0,0,0,.65);
  }
}

/* ---------- Navigation progress hairline ---------- */
.nav-progress {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold-mid), var(--blue));
  z-index: 200; opacity: 0; pointer-events: none;
}
.nav-progress.run { opacity: 1; width: 72%; transition: width 1.6s cubic-bezier(.1,.8,.2,1), opacity .2s; }
.nav-progress.done { width: 100%; opacity: 0; transition: width .18s ease-out, opacity .28s .1s; }

/* ---------- Toasts ---------- */
.toast-host {
  position: fixed; z-index: 190; inset-block-end: 22px; inset-inline-end: 22px;
  display: flex; flex-direction: column; gap: 9px; pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--good);
  border-radius: var(--radius-sm); padding: 12px 16px;
  font-size: 13.6px; font-weight: 600; line-height: 1.5;
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.toast.in { opacity: 1; transform: none; }
.toast-error { border-inline-start-color: var(--bad); }
@media (max-width: 720px) {
  .toast-host { inset-block-end: calc(var(--tabbar-h, 64px) + 14px); inset-inline: 14px; max-width: none; }
}

/* ---------- Shell & top bar ---------- */
.content { padding: 24px 34px 56px; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(4px)) { .topbar { background: var(--surface); } }

.sidebar nav a {
  border-radius: 11px; margin-inline: 8px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.sidebar nav a:hover { transform: translateX(2px); }
html[dir="rtl"] .sidebar nav a:hover { transform: translateX(-2px); }
.sidebar nav a.active {
  background: linear-gradient(90deg, var(--blue-soft), color-mix(in srgb, var(--blue-soft) 30%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ---------- Cards ---------- */
.card { border-radius: var(--radius); }
.card:hover { transform: translateY(-1px); }
.card.pad { padding: 24px 28px; }
.card-title {
  font-size: 11.5px; letter-spacing: .1em; padding: 18px 24px 4px;
  display: flex; align-items: center; gap: 8px;
}
.grid { gap: 18px; }

/* KPI tiles: a quiet gradient wash and a hairline that grows on hover */
.kpi { position: relative; overflow: hidden; border-radius: var(--radius); }
.kpi::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--blue-soft) 55%, transparent), transparent 60%);
  opacity: .55; pointer-events: none;
}
.kpi > * { position: relative; }
.kpi-value { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 11px; padding: 10px 18px; font-weight: 600;
  transition: background .18s var(--ease), transform .1s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.sm { border-radius: 9px; padding: 6px 13px; }
.btn.ghost { background: var(--surface); }
.btn.ghost:hover { background: var(--blue-soft); }

/* ---------- Inputs ---------- */
.field input, .field select, .field textarea, .searchbox input, .tree-search input {
  border-radius: 11px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: var(--ring);
}
.field label { letter-spacing: 0; }

/* ---------- Tables ---------- */
.data th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  backdrop-filter: blur(6px);
}
.data tbody tr, .data tr { transition: background .14s var(--ease); }
.data tr:hover td { background: color-mix(in srgb, var(--blue-soft) 40%, transparent); }
.data td, .data th { padding-block: 12px; }
.tablewrap { border-radius: var(--radius-sm); }

/* ---------- Badges & chips ---------- */
.badge { border-radius: 999px; padding: 3px 10px; letter-spacing: .02em; }
.pill-row { gap: 9px; }

/* ---------- Lists ---------- */
.list-item { transition: background .14s var(--ease), padding-inline-start .18s var(--ease); }
.list-item:hover { background: color-mix(in srgb, var(--blue-soft) 34%, transparent); }

/* ---------- Rating stars ---------- */
.star-btn.preview { color: var(--gold-mid); transform: scale(1.12); }
.rate-card { position: relative; overflow: hidden; }
.rate-card::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid), transparent);
}

/* ---------- Empty states ---------- */
.list-item .muted:only-child, .card.pad > p.muted:only-child { padding-block: 6px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: fade .18s ease-out reverse; }
  ::view-transition-new(root) { animation: rise .26s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-progress { display: none; }
}

/* Fine-tune the mobile tab bar height used by the toast offset */
.tabbar { --tabbar-h: 64px; }

@media (max-width: 900px) {
  .content { padding: 18px 18px 46px; }
  .card.pad { padding: 18px 18px; }
}

/* ---------- KPI, refined ----------
   The heavy 3px underline read as a 2015 dashboard. The number carries the
   card now; the accent is a small dot beside the label, and the whole tile
   lifts on hover. */
.kpi { padding: 20px 22px 18px; gap: 5px; }
.kpi::after {
  content: ""; position: absolute; inset-inline-start: 22px; inset-block-start: 20px;
  inset-inline-end: auto; bottom: auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue); transform: none; animation: fade .5s var(--ease) both .1s;
}
html[dir="rtl"] .kpi::after { inset-inline-start: 22px; }
.kpi-label { padding-inline-start: 15px; font-size: 12.5px; letter-spacing: 0; }
.kpi-value { font-size: 31px; margin-top: 2px; }
.kpi.good::after { background: var(--good); }
.kpi.warn::after { background: var(--gold); }

/* Tables: lighter header, roomier rows */
table.data th {
  font-size: 11px; letter-spacing: .06em; text-transform: none;
  color: var(--ink-soft); padding: 14px 18px 11px;
  border-bottom: 1px solid var(--line);
}
table.data td { padding: 14px 18px; }

/* Section headings inside cards get a little more air */
.card h3 { font-size: 16.5px; letter-spacing: -.005em; }

/* "New" marks freshness, not a problem — it wears the brand gold. */
.badge.b-new { background: var(--gold-soft); color: var(--gold-deep); }

/* Rows that open something get a quiet chevron on hover */
.newsletter-row { position: relative; }
.newsletter-row::after {
  content: "›"; position: absolute; inset-inline-end: 20px; top: 50%;
  transform: translateY(-50%) translateX(-4px);
  font-size: 22px; color: var(--ink-faint); opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
html[dir="rtl"] .newsletter-row::after { content: "‹"; transform: translateY(-50%) translateX(4px); }
.newsletter-row:hover::after { opacity: 1; transform: translateY(-50%); }

/* KPI rows carry 4, 5 or 6 tiles depending on the reader's permissions, so
   the row fits itself to the count instead of leaving a hole in the grid. */
.grid.g4, .grid.g3 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
@media (max-width: 1150px) {
  .grid.g4, .grid.g3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}
@media (max-width: 660px) { .grid.g4, .grid.g3 { grid-template-columns: 1fr; } }

/* ============================================================
   Member photographs
   A face replaces the initials wherever one exists; every avatar
   keeps the same size and shape so nothing shifts when a photo
   is added or removed.
   ============================================================ */
img.avatar.has-photo { object-fit: cover; padding: 0; background: var(--surface-3); }
.avatar.inline-avatar { vertical-align: middle; margin-inline-end: 7px; }

/* Tree avatars hold an <img> that fills the circle */
.tavatar.has-photo { padding: 0; overflow: hidden; background: var(--surface-3); }
.tavatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Profile portrait */
.member-hero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.member-portrait { flex: 0 0 auto; }
.member-portrait .avatar.portrait {
  width: 128px; height: 128px; border-radius: 22px; font-size: 40px;
  box-shadow: var(--shadow-1); border: 1px solid var(--line);
}
.member-portrait img.avatar.portrait { object-fit: cover; }
.member-hero-txt { min-width: 0; flex: 1 1 240px; }
.member-hero-txt h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.photo-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.photo-pick { cursor: pointer; }
.photo-pick.has-file { border-color: var(--good); color: var(--good); }
.inline-form { display: inline; }
@media (max-width: 620px) {
  .member-hero { gap: 16px; }
  .member-portrait .avatar.portrait { width: 96px; height: 96px; font-size: 30px; }
}

/* The name in the top bar is the way into My Account */
.userchip-link {
  display: flex; align-items: center; gap: 10px; color: inherit;
  border-radius: 999px; padding: 3px; margin: -3px;
  transition: background .16s var(--ease);
}
.userchip-link:hover { background: var(--surface-2); color: inherit; }
.userchip-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* Phone numbers, emails and other Latin identifiers read left-to-right even
   on an Arabic page — otherwise a leading + lands at the wrong end. */
input[dir="ltr"] { text-align: start; }
html[dir="rtl"] input[dir="ltr"] { text-align: right; }

/* ============================================================
   Requests & Services — one door, one workflow behind it
   ============================================================ */
.svc-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 16px; margin-bottom: 6px;
}
.svc-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 22px 18px; color: var(--ink);
  box-shadow: var(--shadow-1); position: relative; overflow: hidden;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.svc-card::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-mid), transparent);
  opacity: 0; transition: opacity .2s var(--ease);
}
.svc-card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-2);
  border-color: var(--blue); color: var(--ink);
}
.svc-card:hover::before { opacity: 1; }
.svc-card strong { font-family: var(--font-display); font-size: 16.5px; letter-spacing: -.01em; }
.svc-card .small { color: var(--ink-soft); line-height: 1.55; }
.svc-ic {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}

.svc-go {
  margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 650; color: var(--blue);
  display: inline-flex; align-items: center; gap: 5px;
}
.svc-card:hover .svc-go span { transform: translateX(3px); }
html[dir="rtl"] .svc-card:hover .svc-go span { transform: translateX(-3px); }
.svc-go span { display: inline-block; transition: transform .18s var(--ease); }

/* A request's service, shown as a small tag in the lists */
.svc-chip {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 999px;
  padding: 4px 11px; white-space: nowrap;
  background: var(--blue-soft); color: var(--blue);
}
.svc-chip.svc-support       { background: var(--gold-soft); color: var(--gold-deep); }
.svc-chip.svc-program       { background: var(--good-bg);  color: var(--good); }
.svc-chip.svc-participation { background: var(--warn-bg);  color: var(--warn); }
/* The categories. Emergency and medical are the two that should catch the
   eye in a long queue; the rest are quiet on purpose. */
.svc-chip.svc-emergency     { background: var(--bad-bg);   color: var(--bad); }
.svc-chip.svc-medical       { background: var(--warn-bg);  color: var(--warn); }
.svc-chip.svc-finance       { background: var(--gold-soft); color: var(--gold-deep); }
.svc-chip.svc-education     { background: var(--good-bg);  color: var(--good); }

/* Where a request has reached */
.svc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svc-steps li {
  position: relative; padding-inline-start: 26px;
  font-size: 13.5px; color: var(--ink-faint);
}
.svc-steps li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--surface);
}
.svc-steps li::after {
  content: ""; position: absolute; inset-inline-start: 5px; top: 18px; bottom: -12px;
  width: 2px; background: var(--line);
}
.svc-steps li:last-child::after { display: none; }
.svc-steps li.done { color: var(--ink); font-weight: 600; }
.svc-steps li.done::before { border-color: var(--good); background: var(--good); }

/* An internal note is for the office, and must never look like a reply */
.note-internal { background: var(--warn-bg); }

/* Six tabs on a phone: keep the labels legible by letting them shrink and
   trimming the padding rather than letting the row overflow. */
@media (max-width: 880px) {
  .tabbar a { padding-inline: 2px; font-size: 9.6px; min-width: 0; }
  .tabbar a span:last-child {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (max-width: 420px) {
  .tabbar a { font-size: 9px; gap: 2px; }
}

/* ---------- News ticker ----------
   The headlines run along the bottom of every page and each one opens its
   issue. Two identical runs sit side by side inside the track; the animation
   moves the track by exactly one run's width and restarts, so the second run
   lands where the first began and the loop never shows a seam.

   Speed, not duration, is what should stay constant: three headlines and
   thirty should crawl past at the same pace, so app.js measures the run and
   sets --newsbar-time from it. */
.newsbar {
  /* The ticker belongs to the page, not to the navigation: it starts where
     the sidebar ends, so the sidebar's own foot stays visible beneath it. */
  position: fixed; inset-inline: var(--sidebar-w) 0; bottom: 0; z-index: 45;
  display: flex; align-items: stretch; height: 38px;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(20, 30, 70, .07);
  padding-bottom: env(safe-area-inset-bottom);
  animation: newsbar-in .4s var(--ease) both;
}
@keyframes newsbar-in { from { transform: translateY(100%); } to { transform: none; } }

/* Room to read the last line of any page without the ticker sitting on it. */
body.has-newsbar .page-foot { padding-bottom: 54px; }

.newsbar-tag {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 0 15px; font-size: 11px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--blue-deep);
  border-inline-end: 2px solid var(--gold);
}
.newsbar-tag:hover { color: #fff; background: var(--blue); }
.newsbar-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold-mid);
  box-shadow: 0 0 0 0 rgba(197, 158, 89, .55); animation: newsbar-pulse 2.4s infinite;
}
@keyframes newsbar-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(197, 158, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(197, 158, 89, 0); }
}

.newsbar-viewport { flex: 1; overflow: hidden; position: relative; }
/* A soft edge on both sides so headlines fade in and out rather than clip. */
.newsbar-viewport::before,
.newsbar-viewport::after {
  content: ""; position: absolute; inset-block: 0; width: 34px; z-index: 2; pointer-events: none;
}
.newsbar-viewport::before { inset-inline-start: 0; background: linear-gradient(to right, var(--surface), transparent); }
.newsbar-viewport::after  { inset-inline-end: 0;   background: linear-gradient(to left,  var(--surface), transparent); }
html[dir="rtl"] .newsbar-viewport::before { background: linear-gradient(to left,  var(--surface), transparent); }
html[dir="rtl"] .newsbar-viewport::after  { background: linear-gradient(to right, var(--surface), transparent); }

.newsbar-track {
  display: flex; width: max-content; height: 100%;
  animation: newsbar-roll var(--newsbar-time, 40s) linear infinite;
}
.newsbar-run { display: flex; align-items: center; }
/* Travelling one run's width puts the copy exactly where the original was. */
@keyframes newsbar-roll { to { transform: translateX(-50%); } }
html[dir="rtl"] .newsbar-track { animation-name: newsbar-roll-rtl; }
@keyframes newsbar-roll-rtl { to { transform: translateX(50%); } }

/* Reading one headline should not be a race. */
.newsbar:hover .newsbar-track,
.newsbar:focus-within .newsbar-track { animation-play-state: paused; }

.newsbar-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 0 20px; height: 100%; font-size: 12.8px; color: var(--ink-soft);
  border-inline-end: 1px solid var(--line);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.newsbar-item:hover { color: var(--blue); background: var(--surface-2); }
.newsbar-no {
  font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft);
  padding: 2px 7px; border-radius: 999px;
}
.newsbar-title { font-weight: 600; }

.newsbar-close {
  flex-shrink: 0; width: 36px; border: 0; border-inline-start: 1px solid var(--line);
  background: var(--surface); color: var(--ink-faint);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.newsbar-close:hover { color: var(--blue); background: var(--surface-2); }

/* Above the mobile tab bar, never behind it. */
@media (max-width: 880px) {
  /* The sidebar slides away on small screens, so the ticker takes the width. */
  .newsbar {
    inset-inline: 0;
    bottom: calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom)); padding-bottom: 0;
  }
  body.has-newsbar .page-foot { padding-bottom: 138px; }
  .newsbar-item { font-size: 12.2px; padding: 0 15px; }
  .newsbar-tag { padding: 0 11px; font-size: 10px; }
}

/* Asked for less motion: a strip you scroll yourself, going nowhere on its own. */
@media (prefers-reduced-motion: reduce) {
  .newsbar-track { animation: none; width: auto; }
  .newsbar-track .newsbar-run + .newsbar-run { display: none; }
  .newsbar-viewport { overflow-x: auto; }
}

/* ---------- Family Content: the family's own account ----------
   The archive used to hold one-line captions; it now holds paragraphs of the
   family's history, so the body gets a reading measure and normal prose
   colour instead of the muted caption styling. */
.tl-body {
  margin: 6px 0 0; max-width: 68ch;
  color: var(--ink-soft); font-size: 14.2px; line-height: 1.75;
}
.tl-item > strong { font-size: 15.4px; }


/* ================= Newsletter: articles ================= */

/* ---------- Reading an issue ----------
   The article is the page, not a card on it: one column, a measure that stays
   comfortable at any window width, and pictures allowed to break wider than
   the text so a photograph reads as a photograph. */
.article { max-width: 760px; margin: 0 auto; }
.article-topline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 18px;
}
.article-head { margin-bottom: 26px; }
.article-kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: 12.2px; color: var(--ink-faint); margin-bottom: 12px;
}
.article-issue {
  font-size: 10.4px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft); padding: 3px 9px; border-radius: 999px;
}
.article-issue.draft { color: var(--warn); background: var(--warn-bg); }
.article-head h1 {
  font-family: var(--font-display); font-size: clamp(27px, 3.4vw, 40px);
  line-height: 1.18; letter-spacing: -.015em; margin: 0;
}
.article-lede {
  margin: 14px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--ink-soft);
  max-width: 62ch;
}
.article-by {
  display: flex; align-items: center; gap: 11px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.article-by strong { display: block; font-size: 13.6px; }
.article-by .small { display: block; }

.article-cover, .article-figure { margin: 0 0 30px; }
.article-cover img, .article-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.article-figure { margin: 30px 0; }
.article-figure figcaption {
  margin-top: 9px; font-size: 12.8px; line-height: 1.55;
  color: var(--ink-faint); text-align: center;
}

.article-body { font-size: 16.6px; line-height: 1.78; color: var(--ink); }
.article-body > p { margin: 0 0 20px; }
.article-body > h2 {
  font-family: var(--font-display); font-size: 22px; line-height: 1.3;
  margin: 36px 0 12px; letter-spacing: -.01em;
}
.article-body > blockquote {
  margin: 30px 0; padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--gold);
  font-family: var(--font-display); font-size: 20px; line-height: 1.5;
  color: var(--ink-soft);
}
html[dir="rtl"] .article-body > blockquote { padding: 4px 20px 4px 0; }

/* Sidebar cards sit under the article, at the article's own width. */
.article-aside {
  max-width: 760px; margin: 30px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
}

/* ---------- The issue list ---------- */
.issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.issue {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  color: inherit; transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.issue:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: 0 4px 22px rgba(26, 35, 64, .1); color: inherit;
}
/* The newest issue runs the full width, picture beside the words. */
.issue-lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.issue-lead .issue-art { flex: 0 0 42%; max-width: 42%; }
.issue-lead .issue-title { font-size: 24px; }
.issue-lead .issue-lede { -webkit-line-clamp: 4; }

.issue-art { display: block; background: var(--surface-2); }
.issue-art img { display: block; width: 100%; height: 100%; min-height: 172px; max-height: 300px; object-fit: cover; }
.issue-txt { display: flex; flex-direction: column; gap: 7px; padding: 17px 19px 19px; flex: 1; }
.issue-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
  font-size: 11.6px; color: var(--ink-faint);
}
.issue-no {
  font-size: 10.4px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft); padding: 3px 8px; border-radius: 999px;
}
.issue-title {
  font-family: var(--font-display); font-size: 17.5px; line-height: 1.32;
  font-weight: 700; color: var(--ink); letter-spacing: -.01em;
}
.issue:hover .issue-title { color: var(--blue); }
.issue-lede {
  font-size: 13.6px; line-height: 1.62; color: var(--ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.issue-foot { margin-top: auto; padding-top: 6px; font-size: 11.8px; color: var(--ink-faint); }

@media (max-width: 760px) {
  .issue-lead { flex-direction: column; }
  .issue-lead .issue-art { flex: none; max-width: 100%; }
  .issue-lead .issue-title { font-size: 19px; }
}

/* ---------- Writing an issue ----------
   Four numbered steps, and the article built one block at a time. Each block
   is its own form, so saving one never discards another and nothing here
   depends on JavaScript. */
.compose { display: grid; gap: 18px; max-width: 900px; }
.compose-step {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px; font-size: 16px;
}
.compose-step > span:first-child {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-deep); color: #fff; font-size: 12.5px; font-weight: 700;
}
.compose-step .small { font-weight: 400; }
.compose-cover {
  display: block; width: 100%; max-height: 260px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
}

.blocks { display: grid; gap: 14px; }
.block {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px 15px; background: var(--surface-2);
}
.block-bar {
  display: flex; align-items: center; gap: 5px; margin-bottom: 11px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.block-bar .grow { flex: 1; }
.block-kind {
  font-size: 10.6px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint);
}
.block-btn {
  width: 27px; height: 27px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font-size: 14px; line-height: 1;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.block-btn:hover:not(:disabled) { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.block-btn.danger:hover:not(:disabled) { background: var(--bad); border-color: var(--bad); color: #fff; }
.block-btn:disabled { opacity: .3; cursor: default; }
.block-img {
  display: block; width: 100%; max-height: 220px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 11px;
}
.block-quote { border-inline-start: 3px solid var(--gold); }
.block-new { background: var(--surface); border-style: dashed; }

/* A file input that looks like every other button on the page. */
.file-btn { cursor: pointer; display: inline-flex; align-items: center; }


/* ---------- The founders, in the registry ----------
   The same standing they have in the tree: their own card in the family's
   navy and gold, above the table, rather than two rows lost among a hundred
   and thirty. They belong to no branch, so the card steps aside whenever a
   branch is filtered. */
.founders {
  position: relative;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px;
  padding: 20px 24px; margin-bottom: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--tg1) 0%, #16305a 100%);
  border: 1px solid var(--tg1);
  border-inline-start: 3px solid var(--gold-mid);
  box-shadow: var(--shadow-1);
}
/* The card carries the tree's generation-1 gradient, which starts gold in dark
   mode and navy in light. Small labels therefore get their own dark backing
   rather than a token colour, or they vanish against the gold end. */
.founders-eyebrow {
  position: absolute; inset-block-start: 12px; inset-inline-end: 20px;
  font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: #f0dfb8; background: rgba(9, 24, 48, .62);
  padding: 3px 10px; border-radius: 999px;
}
.founders-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; flex: 1; }
.founder {
  display: flex; align-items: center; gap: 13px; color: inherit;
  border-radius: var(--radius-sm); transition: transform .18s var(--ease);
}
.founder:hover { color: inherit; transform: translateY(-1px); }
.founder-face {
  background: rgba(255, 255, 255, .16); color: #f3efe6;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}
.founder-partner .founder-face { background: #443349; color: #eccfdf; }
.founder-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.founder-name {
  font-family: var(--font-display); font-size: 17px; line-height: 1.25;
  font-weight: 700; color: #fff; letter-spacing: -.01em;
}
.founder-partner .founder-name { font-size: 15px; color: #d9dfeb; }
.founder:hover .founder-name { color: var(--gold-mid); }
.founder-role { font-size: 12.4px; font-weight: 650; color: #efdcb4; }
.founders-chip {
  font-size: 11px; font-weight: 650; padding: 4px 11px; border-radius: 999px;
  color: #f0dfb8; background: rgba(9, 24, 48, .55);
  border: 1px solid rgba(255, 255, 255, .22);
}

@media (max-width: 620px) {
  .founders { padding: 42px 18px 18px; gap: 14px; }
  .founders-eyebrow { inset-inline-start: 18px; inset-inline-end: auto; }
  .founders-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}


/* ================= Competitions =================
   A competition is a folder of seasons. It is not volunteering, so nothing
   here counts hours; what a season holds is who entered, who placed, and the
   photographs. */
.section-h {
  font-family: var(--font-display); font-size: 17px; letter-spacing: -.01em;
  margin: 0 0 12px;
}

.comp-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.comp-folder {
  display: flex; align-items: center; gap: 15px; padding: 18px 20px; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  border-inline-start: 3px solid var(--gold);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.comp-folder:hover {
  color: inherit; transform: translateY(-2px);
  border-color: var(--line-strong); border-inline-start-color: var(--gold);
  box-shadow: 0 4px 22px rgba(26, 35, 64, .1);
}
.comp-ic {
  font-size: 26px; line-height: 1; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold-soft);
}
.comp-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.comp-name {
  font-family: var(--font-display); font-size: 16.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.comp-folder:hover .comp-name { color: var(--blue); }
.comp-meta { font-size: 12.2px; color: var(--ink-faint); }
.comp-open { font-size: 12.2px; font-weight: 650; color: var(--good); }

/* The competition's own words, as the family wrote them. */
.comp-brief {
  font-size: 15.4px; line-height: 1.85; color: var(--ink);
  max-width: 74ch; border-inline-start: 3px solid var(--gold);
}

/* ---------- The seasons, newest first ---------- */
.seasons { display: grid; gap: 10px; }
.season {
  display: flex; align-items: center; gap: 16px; padding: 14px 18px; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.season:hover { color: inherit; transform: translateX(2px); border-color: var(--line-strong); }
html[dir="rtl"] .season:hover { transform: translateX(-2px); }
/* The season still running leads the list, in the family's navy and gold. */
.season-open {
  background: linear-gradient(135deg, var(--tg1) 0%, #16305a 100%);
  border-color: var(--tg1); border-inline-start: 3px solid var(--gold-mid);
}
.season-open .season-title { color: #fff; font-size: 16.5px; }
.season-open .season-meta { color: #cfd7e6; }
.season-open .season-no { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255,255,255,.25); }

.season-no {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--gold-deep); background: var(--gold-soft); border: 1px solid transparent;
}
.season-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.season-title { font-size: 15px; font-weight: 650; color: var(--ink); }
.season:hover .season-title { color: var(--blue); }
.season-open:hover .season-title { color: var(--gold-mid); }
.season-meta { font-size: 12px; color: var(--ink-faint); }
.season-state {
  flex-shrink: 0; font-size: 10.6px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px;
}
.season-state.is-open { color: #0d3b2a; background: #9fe3c4; }
.season-state.is-closed { color: var(--ink-faint); background: var(--surface-3); }

/* ---------- The leaderboard ---------- */
.lb-place {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 27px; height: 27px; padding: 0 7px; border-radius: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px;
  color: var(--ink-soft); background: var(--surface-3);
}
.lb-1 { color: #4a3405; background: linear-gradient(135deg, #f2d489, #d9ab46); }
.lb-2 { color: #33383f; background: linear-gradient(135deg, #e2e6ea, #c2c8cf); }
.lb-3 { color: #4a2f16; background: linear-gradient(135deg, #e6c19a, #cfa274); }
.lb-add { border-top: 1px solid var(--line); }

/* ---------- The photographs ---------- */
.comp-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px; padding: 16px 20px;
}
.comp-gallery figure { position: relative; margin: 0; }
.comp-gallery img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2);
}
.comp-gallery figcaption {
  margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-faint);
}
.comp-photo-del { position: absolute; inset-block-start: 7px; inset-inline-end: 7px; }
.comp-photo-del button {
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; line-height: 1;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(9, 24, 48, .68);
  color: #fff; font-size: 15px;
}
.comp-photo-del button:hover { background: var(--bad); border-color: var(--bad); }

@media (max-width: 620px) {
  .season { gap: 12px; padding: 12px 14px; }
  .season-no { width: 36px; height: 36px; font-size: 15px; }
}

/* A section the office can open to edit, closed for everyone reading. */
.edit-summary {
  cursor: pointer; font-weight: 650; font-size: 13.6px; color: var(--ink-soft);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.edit-summary::-webkit-details-marker { display: none; }
.edit-summary::before {
  content: "›"; display: inline-block; font-size: 17px; line-height: 1;
  color: var(--gold-deep); transition: transform .18s var(--ease);
}
html[dir="rtl"] .edit-summary::before { content: "‹"; }
details[open] > .edit-summary::before { transform: rotate(90deg); }
html[dir="rtl"] details[open] > .edit-summary::before { transform: rotate(-90deg); }
.edit-summary:hover { color: var(--blue); }

/* ---------- The leaderboard, grouped the way it is announced ----------
   Branch, then place, then everyone who shares that place — a place with
   sixteen names in it is normal here, so the names wrap rather than each
   taking a table row of their own. */
.lb-branches { display: grid; gap: 22px; padding: 4px 20px 18px; }
.lb-branch-h {
  font-family: var(--font-display); font-size: 15.5px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.lb-row { display: flex; align-items: flex-start; gap: 13px; padding: 7px 0; }
.lb-names { display: flex; flex-wrap: wrap; gap: 6px 9px; padding-top: 2px; }
.lb-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.8px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px;
}
.lb-name a { color: var(--ink); font-weight: 650; }
.lb-name a:hover { color: var(--blue); }
.lb-score { font-weight: 700; color: var(--gold-deep); font-size: 12.5px; }
.lb-del {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  color: var(--ink-faint); font-size: 14px; line-height: 1;
}
.lb-del:hover { color: var(--bad); }
/* Places 1–3 show their medal; the rest show the number. */
.lb-place { font-size: 15px; }

/* ---------- Picking people ----------
   A list of faces with checkboxes, not a multi-select: choosing two people
   should not need a held modifier key, and nobody should be hidden below a
   scroll they cannot see. */
.picker { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; background: var(--surface-2); }
.picker-filter {
  width: 100%; margin-bottom: 8px; padding: 8px 12px; font-family: var(--font);
  font-size: 13.4px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.picker-filter:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.picker-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.picker-person {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 9px; border-radius: var(--radius-sm);
  transition: background .14s var(--ease);
}
.picker-person:hover { background: var(--surface); }
.picker-person input { width: 16px; height: 16px; accent-color: var(--blue-solid); cursor: pointer; flex-shrink: 0; }
.picker-person:has(input:checked) { background: var(--blue-soft); }
.picker-txt { display: flex; flex-direction: column; min-width: 0; }
.picker-name { font-size: 13.6px; font-weight: 650; color: var(--ink); }
.picker-role { font-size: 11.4px; color: var(--ink-faint); }
.picker-person[hidden] { display: none; }

/* The role dropdown sitting inline in the members list. */
.role-select {
  border: 1px solid var(--line-strong); border-radius: 7px; padding: 4px 8px;
  font-family: var(--font); font-size: 12.4px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}


/* ================= Coloured navigation icons =================
   Each area of the platform gets its own hue, on the icon only — the labels
   stay in one ink colour so the sidebar reads as a list, not a rainbow. The
   colours are chosen mid-tone so the same value carries on the light ivory
   sidebar and on the dark navy one; only a few need a lift in dark mode.

   The tint is what makes them feel live: the glyph is muted until you hover
   or land on it, then it takes its colour and its chip fills in behind. */
:root {
  --ic-dashboard:  #5b74d8;
  --ic-members:    #2f9e8f;
  --ic-tree:       #3f9a5c;
  --ic-news:       #c08a2e;
  --ic-newsletter: #c08a2e;
  --ic-events:     #d9663f;
  --ic-services:   #8a68d0;
  --ic-legacy:     #a8763c;
  --ic-succession: #3a8fc4;
  --ic-spaces:     #7a63cc;
  --ic-calendar:   #c45a7d;
  --ic-tasks:      #c08a2e;
  --ic-documents:  #6b7a95;
  --ic-governance: #3d63ad;
  --ic-committees: #2f8496;
  --ic-wealth:     #2f8f68;
  --ic-shares:     #2f8496;
  --ic-projects:   #cf7a35;
  --ic-charity:    #c8455e;
  --ic-volunteer:  #3f9a5c;
  --ic-chat:       #3a8fc4;
  --ic-copilot:    #a8813d;
  --ic-admin:      #6b7a95;
  --ic-home:       #5b74d8;
  --ic-family:     #3f9a5c;
  --ic-impact:     #c8455e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-dashboard:  #8e9ff0;
    --ic-members:    #4fc3b1;
    --ic-tree:       #62c586;
    --ic-news:       #e0b45c;
    --ic-newsletter: #e0b45c;
    --ic-events:     #f0906a;
    --ic-services:   #b195ea;
    --ic-legacy:     #d0a065;
    --ic-succession: #6bb9e8;
    --ic-spaces:     #a08fe8;
    --ic-calendar:   #e88aa9;
    --ic-tasks:      #e0b45c;
    --ic-documents:  #9aa8c2;
    --ic-governance: #7396dd;
    --ic-committees: #55b0c2;
    --ic-wealth:     #57bd92;
    --ic-shares:     #55b0c2;
    --ic-projects:   #eea363;
    --ic-charity:    #ee7189;
    --ic-volunteer:  #62c586;
    --ic-chat:       #6bb9e8;
    --ic-copilot:    #d6b47c;
    --ic-admin:      #9aa8c2;
    --ic-home:       #8e9ff0;
    --ic-family:     #62c586;
    --ic-impact:     #ee7189;
  }
}
:root[data-theme="dark"] {
  --ic-dashboard:  #8e9ff0;
  --ic-members:    #4fc3b1;
  --ic-tree:       #62c586;
  --ic-news:       #e0b45c;
  --ic-newsletter: #e0b45c;
  --ic-events:     #f0906a;
  --ic-services:   #b195ea;
  --ic-legacy:     #d0a065;
  --ic-succession: #6bb9e8;
  --ic-spaces:     #a08fe8;
  --ic-calendar:   #e88aa9;
  --ic-tasks:      #e0b45c;
  --ic-documents:  #9aa8c2;
  --ic-governance: #7396dd;
  --ic-committees: #55b0c2;
  --ic-wealth:     #57bd92;
  --ic-shares:     #55b0c2;
  --ic-projects:   #eea363;
  --ic-charity:    #ee7189;
  --ic-volunteer:  #62c586;
  --ic-chat:       #6bb9e8;
  --ic-copilot:    #d6b47c;
  --ic-admin:      #9aa8c2;
  --ic-home:       #8e9ff0;
  --ic-family:     #62c586;
  --ic-impact:     #ee7189;
}

/* Each icon reads its own colour from its name. */
[data-ic="dashboard"] { --ic: var(--ic-dashboard); }
[data-ic="members"] { --ic: var(--ic-members); }
[data-ic="tree"] { --ic: var(--ic-tree); }
[data-ic="news"] { --ic: var(--ic-news); }
[data-ic="newsletter"] { --ic: var(--ic-newsletter); }
[data-ic="events"] { --ic: var(--ic-events); }
[data-ic="services"] { --ic: var(--ic-services); }
[data-ic="legacy"] { --ic: var(--ic-legacy); }
[data-ic="succession"] { --ic: var(--ic-succession); }
[data-ic="spaces"] { --ic: var(--ic-spaces); }
[data-ic="calendar"] { --ic: var(--ic-calendar); }
[data-ic="tasks"] { --ic: var(--ic-tasks); }
[data-ic="documents"] { --ic: var(--ic-documents); }
[data-ic="governance"] { --ic: var(--ic-governance); }
[data-ic="committees"] { --ic: var(--ic-committees); }
[data-ic="wealth"] { --ic: var(--ic-wealth); }
[data-ic="shares"] { --ic: var(--ic-shares); }
[data-ic="projects"] { --ic: var(--ic-projects); }
[data-ic="charity"] { --ic: var(--ic-charity); }
[data-ic="volunteer"] { --ic: var(--ic-volunteer); }
[data-ic="chat"] { --ic: var(--ic-chat); }
[data-ic="copilot"] { --ic: var(--ic-copilot); }
[data-ic="admin"] { --ic: var(--ic-admin); }
[data-ic="home"] { --ic: var(--ic-home); }
[data-ic="family"] { --ic: var(--ic-family); }
[data-ic="impact"] { --ic: var(--ic-impact); }

/* ---------- The sidebar ---------- */
/* The glyph takes its own colour wherever it appears. */
.ic { color: var(--ic, currentColor); }

.sidebar nav a .nav-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  background: transparent;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
/* Resting: coloured, but a shade back so the list stays calm. */
.sidebar nav a .nav-ic .ic { opacity: .88; transition: opacity .18s var(--ease); }
.sidebar nav a:hover .nav-ic {
  background: color-mix(in srgb, var(--ic, var(--blue)) 14%, transparent);
  transform: translateY(-1px);
}
.sidebar nav a:hover .nav-ic .ic { opacity: 1; }
.sidebar nav a.active .nav-ic {
  background: color-mix(in srgb, var(--ic, var(--blue)) 18%, transparent);
}
.sidebar nav a.active .nav-ic .ic { opacity: 1; }
/* An icon with no colour of its own falls back to the ink, never to nothing. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .sidebar nav a:hover .nav-ic,
  .sidebar nav a.active .nav-ic { background: var(--surface-3); }
}

/* ---------- The mobile tab bar ---------- */
.tabbar a .tab-ic {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ic, var(--ink-faint)); opacity: .7;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.tabbar a.active .tab-ic { opacity: 1; transform: translateY(-1px); }
.tabbar a:active .tab-ic { transform: scale(.92); }

/* ---------- Who has entered, and in which surah ----------
   Three branches side by side with their entrants beneath, so the office can
   see at a glance where the family is competing. Columns on a wide screen,
   stacked on a narrow one — a three-column table of names is unreadable on a
   phone. */
.entry-table {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0; border-top: 1px solid var(--line);
}
.entry-col { border-inline-start: 1px solid var(--line); }
.entry-col:first-child { border-inline-start: 0; }
.entry-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.entry-no {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  color: var(--gold-deep); background: var(--gold-soft);
}
.entry-name { flex: 1; font-size: 13.6px; font-weight: 650; color: var(--ink); line-height: 1.35; }
.entry-count {
  font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: var(--ink-soft); background: var(--surface-3);
}
.entry-list { list-style: none; margin: 0; padding: 6px 0; min-height: 90px; }
.entry-person {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; font-size: 13.4px;
  border-bottom: 1px solid var(--line);
}
.entry-person:last-child { border-bottom: 0; }
.entry-person .grow { flex: 1; min-width: 0; }
.entry-person .small { display: block; }
.entry-empty { padding: 14px 16px; font-size: 12.6px; color: var(--ink-faint); }
.entry-form { border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  .entry-col { border-inline-start: 0; border-top: 1px solid var(--line); }
  .entry-col:first-child { border-top: 0; }
}


/* ---------- Family Services ----------
   Each of the four has its own glyph and its own colour, so the four cards
   read apart at a glance instead of as one grid of grey squares. */
:root {
  --ic-svc-service:     #3a8fc4;
  --ic-svc-support:     #c8455e;
  --ic-svc-program:     #2f9e8f;
  --ic-svc-participate: #cf7a35;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-svc-service:     #6bb9e8;
    --ic-svc-support:     #ee7189;
    --ic-svc-program:     #4fc3b1;
    --ic-svc-participate: #eea363;
  }
}
:root[data-theme="dark"] {
  --ic-svc-service:     #6bb9e8;
  --ic-svc-support:     #ee7189;
  --ic-svc-program:     #4fc3b1;
  --ic-svc-participate: #eea363;
}
[data-ic="svc-service"]     { --ic: var(--ic-svc-service); }
[data-ic="svc-support"]     { --ic: var(--ic-svc-support); }
[data-ic="svc-program"]     { --ic: var(--ic-svc-program); }
[data-ic="svc-participate"] { --ic: var(--ic-svc-participate); }

/* The chip behind the glyph borrows the same colour. */
.svc-ic {
  color: var(--ic, var(--blue));
  background: color-mix(in srgb, var(--ic, var(--blue)) 13%, transparent);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.svc-card:hover .svc-ic {
  background: color-mix(in srgb, var(--ic, var(--blue)) 20%, transparent);
  transform: translateY(-2px) scale(1.04);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .svc-ic { background: var(--surface-3); }
}

/* ================= Personal announcements =================
   Something one of the family wants everyone to know, read once by the office
   before the family sees it. */
:root { --ic-announce: #d9663f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-announce: #f0906a; } }
:root[data-theme="dark"] { --ic-announce: #f0906a; }
[data-ic="announce"] { --ic: var(--ic-announce); }

.anns { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 18px; }
.ann-card {
  display: flex; flex-direction: column; overflow: hidden; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.ann-card:hover {
  color: inherit; transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: 0 4px 22px rgba(26, 35, 64, .1);
}
.ann-thumb { display: block; background: var(--surface-2); }
.ann-thumb img { display: block; width: 100%; height: 168px; object-fit: cover; }
.ann-txt { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.ann-meta { display: flex; align-items: center; gap: 8px; font-size: 11.6px; color: var(--ink-faint); }
.ann-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.32; color: var(--ink); }
.ann-card:hover .ann-title { color: var(--blue); }
.ann-lede { font-size: 13.4px; line-height: 1.6; color: var(--ink-soft); }
.ann-foot { margin-top: auto; padding-top: 6px; font-size: 11.8px; color: var(--ink-faint); }

.ann-read { max-width: 720px; }
.ann-image {
  display: block; width: 100%; height: auto; margin: 16px 0;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.ann-body { font-size: 15.6px; line-height: 1.8; color: var(--ink); }

/* The family's own rules for taking part. */
.rules-card { max-width: 640px; }
.rules { margin: 0; padding-inline-start: 20px; }
.rules li { font-size: 14px; line-height: 1.8; color: var(--ink-soft); margin-bottom: 9px; }
.rules li::marker { color: var(--gold-deep); font-weight: 700; }

/* ---------- The greeting ----------
   The way a shop shows an offer: over the page, once, with one way out. It is
   rendered by the server and dismissed by a form post, so it works with
   JavaScript off; the script only adds Escape and a click on the backdrop. */
.ann-pop {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(9, 18, 34, .62); backdrop-filter: blur(3px);
  animation: fade .22s var(--ease) both;
}
.ann-pop-card {
  width: min(480px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: 0 18px 60px rgba(9, 18, 34, .45);
  animation: pop-in .28s var(--ease) both;
}
@keyframes pop-in { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.ann-pop-img { display: block; width: 100%; height: 210px; object-fit: cover; border-radius: 18px 18px 0 0; }
.ann-pop-body { padding: 22px 24px 24px; }
.ann-pop-kicker {
  font-size: 10.4px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gold-deep); background: var(--gold-soft); padding: 3px 10px; border-radius: 999px;
}
.ann-pop-body h2 {
  font-family: var(--font-display); font-size: 21px; line-height: 1.3;
  margin: 12px 0 0; letter-spacing: -.01em;
}
.ann-pop-body p { font-size: 14.4px; line-height: 1.72; color: var(--ink-soft); margin: 10px 0 0; }
.ann-pop-by { font-size: 12.2px !important; color: var(--ink-faint) !important; }
.ann-pop-actions { display: flex; gap: 10px; margin-top: 18px; }
.ann-pop-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 620px) {
  .ann-pop { padding: 14px; align-items: flex-end; }
  .ann-pop-card { border-radius: 18px; }
  .ann-pop-img { height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .ann-pop, .ann-pop-card { animation: none; }
}

/* ---------- A tile that will not be ignored ----------
   The announcements tile keeps a slow pulse while something is unread and
   settles the moment everything has been opened — the signal a shop uses for
   an offer nobody has looked at. Slow and soft on purpose: this sits on the
   dashboard all day. */
a.kpi { color: inherit; }
a.kpi:hover { color: inherit; border-color: var(--line-strong); }
.kpi.pulse { position: relative; }
.kpi.pulse::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1.5px solid var(--warn); pointer-events: none;
  animation: kpi-pulse 2.4s var(--ease) infinite;
}
@keyframes kpi-pulse {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.035); }
  100% { opacity: 0;   transform: scale(1.035); }
}
.kpi.pulse .kpi-value { color: var(--warn); }
@media (prefers-reduced-motion: reduce) {
  .kpi.pulse::after { animation: none; opacity: .85; }
}

/* ---------- Policy & Guidelines ---------- */
:root { --ic-policy: #6b7a95; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-policy: #9aa8c2; } }
:root[data-theme="dark"] { --ic-policy: #9aa8c2; }
[data-ic="policy"] { --ic: var(--ic-policy); }

.policies { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.policy-card {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  border-inline-start: 3px solid var(--gold);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.policy-card:hover {
  color: inherit; transform: translateY(-2px); border-color: var(--line-strong);
  border-inline-start-color: var(--gold); box-shadow: 0 4px 22px rgba(26, 35, 64, .1);
}
.policy-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ic, var(--blue));
  background: color-mix(in srgb, var(--ic, var(--blue)) 13%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .policy-ic { background: var(--surface-3); } }
.policy-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.policy-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.35;
}
.policy-card:hover .policy-title { color: var(--blue); }
.policy-intro { font-size: 13.2px; line-height: 1.6; color: var(--ink-soft); }
.policy-meta { font-size: 11.8px; color: var(--ink-faint); }

/* ---------- One request form, one answer ----------
   With a single service the card should not stretch the width of the page
   like a row of four; it keeps a sensible reading measure. */
.svc-cards.one { grid-template-columns: minmax(0, 420px); }

/* The office's answer, in their own words, above the message thread. */
.decision { border-inline-start: 3px solid var(--good); }
.decision.no { border-inline-start-color: var(--bad); }
.decision h3 { font-size: 14px; color: var(--ink-soft); font-weight: 700; }

/* ---------- My children ----------
   A row per child on the profile: their face, who they are, and the two or
   three things their parent may do about it. */
.kids { display: grid; gap: 10px; margin-top: 14px; }
.kid {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2);
}
.kid-txt { display: flex; flex-direction: column; gap: 2px; min-width: 140px; flex: 1 1 auto; }
.kid-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.btn.sm.danger { color: var(--bad); }
.btn.sm.danger:hover { border-color: var(--bad); color: var(--bad); }


/* ============================================================
   Polish pass (6 Sep 2026) — controls, folds, empty states, rhythm
   ============================================================
   The bones stay. This is the pass that makes a dropdown look like a
   dropdown, a file input look like it belongs here, a card lift only when
   it leads somewhere, and every page breathe at the same rate. */

/* Native widgets (date pickers, scrollbars, the select list itself) follow
   the theme instead of always painting white. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Rhythm ----------
   One scale, used everywhere: 18 between siblings in a grid, 20 between
   sections, 26 under a page title. */
.page-head { margin-bottom: 26px; }
.page-head .muted { margin-top: 6px; }
.mt   { margin-top: 20px; }
.grid { gap: 18px; }
.cols { gap: 20px; }
.tabs { margin-bottom: 22px; }
form.stack { gap: 16px; }
.pad { padding: 22px 26px; }
.card > .pad + .pad { border-top: 1px solid var(--line); }
.list-item { padding: 14px 22px; }
.list-item .small { margin-top: 2px; line-height: 1.5; }
@media (max-width: 720px) {
  .pad { padding: 18px 18px; }
  .page-head { margin-bottom: 20px; }
}

/* ---------- Controls ---------- */
.field label { font-size: 12.4px; }
.field input, .field select, .field textarea {
  min-height: 42px; border-radius: 10px; padding: 10px 14px; font-size: 14px;
}
.field textarea { min-height: 112px; }

/* A select that looks like one: no native arrow, one chevron of ours, on the
   end side in either direction. */
.field select:not([multiple]), .task-add select, .composer-select, .picker select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6480' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-inline-end: 40px; cursor: pointer;
}
html[dir="rtl"] .field select:not([multiple]), html[dir="rtl"] .task-add select,
html[dir="rtl"] .composer-select, html[dir="rtl"] .picker select { background-position: left 13px center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field select:not([multiple]),
  :root:not([data-theme="light"]) .task-add select,
  :root:not([data-theme="light"]) .composer-select,
  :root:not([data-theme="light"]) .picker select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
}
:root[data-theme="dark"] .field select:not([multiple]),
:root[data-theme="dark"] .task-add select,
:root[data-theme="dark"] .composer-select,
:root[data-theme="dark"] .picker select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aab3c8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.field select option { color: var(--ink); background: var(--surface); }

/* Dates and times are left-to-right whatever the page is. */
.field input[type="date"], .field input[type="datetime-local"], .field input[type="time"],
.field input[type="month"] { direction: ltr; }

.check { gap: 9px; }
.check input { width: 17px; height: 17px; border-radius: 4px; flex: 0 0 auto; }

/* The file input. app.js wraps a bare one in .file-pick; the ::file-selector
   rule underneath is what you get with JavaScript off. */
.file-pick {
  position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 42px; padding: 6px; padding-inline-start: 14px;
  border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--surface);
  cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease);
}
.file-pick:hover { border-color: var(--blue); background: var(--blue-tint); }
.file-pick.has-file { border-style: solid; border-color: var(--good); }
.file-pick-name {
  flex: 1 1 120px; min-width: 0; font-size: 13.2px; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-pick.has-file .file-pick-name { color: var(--ink); font-weight: 600; }
.file-pick-btn {
  display: inline-flex; align-items: center; padding: 6px 13px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface);
  font-size: 12.6px; font-weight: 650; color: var(--blue); margin-inline-start: auto;
}
.file-pick:hover .file-pick-btn { border-color: var(--blue); }
.file-pick input[type="file"] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.field > input[type="file"] { padding: 6px; padding-inline-start: 12px; cursor: pointer; }
.field > input[type="file"]::file-selector-button {
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 13px;
  background: var(--surface); color: var(--blue); font: inherit; font-size: 12.6px; font-weight: 650;
  margin-inline-end: 10px; cursor: pointer;
}

/* The row of buttons that closes a form. */
form.stack > div:last-child:has(> .btn) { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 2px; }

/* ---------- Cards: only what leads somewhere lifts ---------- */
.card:hover { transform: none; box-shadow: var(--shadow-1); border-color: var(--line); }
a.card:hover, .card.clickable:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong);
}
.kpi:hover { transform: none; box-shadow: var(--shadow-1); }
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ---------- Folds ----------
   A closed section is one line, not an empty card; opened, its content sits
   under a rule at the same padding as everything else. */
details.card.pad { padding: 0; }
details.card.pad > .edit-summary {
  padding: 15px 22px; margin: 0; font-size: 14px; color: var(--ink);
  border-radius: var(--radius); transition: background .16s var(--ease), color .16s var(--ease);
}
details.card.pad > .edit-summary:hover { color: var(--blue); background: var(--surface-2); }
details.card.pad[open] > .edit-summary {
  border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0;
}
details.card.pad > :not(summary) { margin: 18px 22px 22px; }

/* ---------- A description that fills its card ---------- */
.comp-brief { max-width: none; padding-inline-end: clamp(26px, 14%, 160px); line-height: 1.9; }

/* ---------- Empty states ---------- */
.empty-state {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px; padding: 46px 24px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft);
}
.empty-state .ic { color: var(--ink-faint); margin-bottom: 4px; }
.empty-state strong { font-family: var(--font-display); font-size: 16.5px; color: var(--ink); }
.empty-state .small { max-width: 44ch; line-height: 1.6; }
.empty-state .btn { margin-top: 8px; }

/* ============================================================
   بصمة — the elders' letters
   ============================================================
   A letter is long, personal and meant to be read start to finish, so it gets
   a reading measure and a quiet page rather than a card in a grid. */
:root { --ic-basmah: #b08d3f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-basmah: #d8b45f; } }
:root[data-theme="dark"] { --ic-basmah: #d8b45f; }
[data-ic="basmah"] { --ic: var(--ic-basmah); }

.letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.letter-card {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
  border-inline-start: 3px solid var(--gold);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.letter-card:hover {
  color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-2);
  border-color: var(--line-strong); border-inline-start-color: var(--gold);
}
.letter-card .avatar, .letter-card .has-photo { flex: 0 0 auto; }
.letter-card-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.letter-card-name { font-size: 12.6px; font-weight: 700; color: var(--ink-soft); letter-spacing: .01em; }
.letter-card-title {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  color: var(--ink); line-height: 1.4; letter-spacing: -.01em;
}
.letter-card:hover .letter-card-title { color: var(--blue); }
.letter-card-lede { font-size: 13.4px; line-height: 1.65; color: var(--ink-soft); }
.letter-card-go {
  margin-top: 4px; font-size: 12.6px; font-weight: 650; color: var(--blue);
  display: inline-flex; align-items: center; gap: 5px;
}
.letter-card:hover .letter-card-go span { transform: translateX(3px); }
html[dir="rtl"] .letter-card:hover .letter-card-go span { transform: translateX(-3px); }
.letter-card-go span { display: inline-block; transition: transform .18s var(--ease); }

/* The letter itself */
.letter {
  max-width: 720px; margin: 0 auto; padding: 40px 44px 44px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.letter-head { margin-bottom: 30px; }
.letter-head h1 {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.3; margin: 0 0 20px;
  text-wrap: balance;
}
.letter-by { display: flex; align-items: center; gap: 13px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.letter-by strong { display: block; font-size: 14.4px; color: var(--ink); }
.letter-by .small { display: block; color: var(--ink-faint); }
.letter-body { font-size: 16.5px; line-height: 2.05; color: var(--ink); }
.letter-body p { margin: 0 0 1.15em; }
.letter-body p:last-child { margin-bottom: 0; }
/* A paragraph of a few words standing on its own is a heading in her letter —
   "ما تعلمته من الرحلة" — so it is given a little air rather than a style it
   was never written with. */
.letter-body p:not(:first-child) { margin-top: 0; }
.letter-foot { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.letter-remove { max-width: 720px; margin: 16px auto 0; }

@media (max-width: 720px) {
  .letter { padding: 26px 22px 30px; }
  .letter-head h1 { font-size: 24px; }
  .letter-body { font-size: 15.6px; line-height: 1.95; }
}

/* The pointer to it from the registry profile */
.letter-link {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px; color: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  border-inline-start: 3px solid var(--gold); background: var(--surface-2);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.letter-link:hover { color: inherit; border-color: var(--line-strong); background: var(--blue-tint); }
.letter-link-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ic-basmah);
  background: color-mix(in srgb, var(--ic-basmah) 14%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) { .letter-link-ic { background: var(--surface-3); } }
.letter-link strong { display: block; font-size: 14.2px; color: var(--ink); line-height: 1.4; }
.letter-link .small { display: block; color: var(--ink-faint); }
.letter-link-go { margin-inline-start: auto; font-size: 20px; color: var(--ink-faint); }


/* ============================================================
   Onboarding, accounts, the library
   ============================================================ */
.onboard-body { background: var(--bg); }
.onboard { max-width: 760px; margin: 0 auto; padding: 44px 20px 60px; }
.onboard-brand { text-align: center; margin-bottom: 26px; }
.onboard-brand img { height: 56px; margin-bottom: 14px; }
.onboard-brand h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 8px; color: var(--ink); }
.onboard-brand .muted { max-width: 52ch; margin: 0 auto; line-height: 1.6; }
.onboard form h3 { margin: 6px 0 -4px; font-size: 15px; color: var(--ink-soft); }

.row-off td { opacity: .55; }
.badge.b-gold { background: var(--gold-soft); color: var(--gold-deep); }

:root { --ic-library: #7a6bd6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-library: #a99cf0; } }
:root[data-theme="dark"] { --ic-library: #a99cf0; }
[data-ic="library"] { --ic: var(--ic-library); }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.book {
  display: flex; flex-direction: column; color: inherit; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.book:hover { color: inherit; transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.book-cover, .book-cover-lg {
  aspect-ratio: 3 / 4; background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.book-cover img, .book-cover-lg img { width: 100%; height: 100%; object-fit: cover; }
.book-cover-blank { color: var(--ink-faint); }
.book-txt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.book-title { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); line-height: 1.35; }
.book:hover .book-title { color: var(--blue); }
.book-author { font-size: 13px; color: var(--ink-soft); }
.book-meta { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.book-page { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 28px; align-items: start; }
.book-cover-lg { border-radius: var(--radius); border: 1px solid var(--line); }
.book-body { font-size: 15.6px; line-height: 1.85; color: var(--ink); }
@media (max-width: 720px) { .book-page { grid-template-columns: 1fr; } .book-cover-lg { max-width: 220px; } }
/* A profile reads in one column at a comfortable measure; nothing lives in a sidebar. */
.profile-view { max-width: 940px; }

/* The language toggle on the standalone first-sign-in page. A segmented pair,
   not two plain links: it has to read as a control from across the room. */
.onboard-lang {
  display: flex; justify-content: center; gap: 4px; margin-bottom: 22px;
  padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); width: fit-content; margin-inline: auto;
}
.onboard-lang a {
  padding: 6px 18px; border-radius: 999px; font-size: 13.2px; font-weight: 650;
  color: var(--ink-soft); transition: background .16s var(--ease), color .16s var(--ease);
}
.onboard-lang a:hover { color: var(--blue); background: var(--surface-2); }
.onboard-lang a.on { background: var(--blue-solid); color: #fff; }
.onboard-lang a.on:hover { background: var(--blue-solid); color: #fff; }

/* ============================================================
   The dashboard board — what the family has published lately
   ============================================================
   Three things: one feature and two beside it. The words are set over the
   picture behind a scrim rather than in a panel underneath, which is what
   makes it read as a board rather than a list with thumbnails. A card with
   no picture yet gets its section's colour and icon, so the shape holds
   before the family has added any. */
.board-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.board-head h2 {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--ink); margin: 0; letter-spacing: -.01em;
}

.board {
  display: grid; gap: 16px;
  grid-template-columns: 1.62fr 1fr;      /* the feature, and the pair */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  min-height: 420px;
}
.bcard-lead { grid-row: span 2; }
@media (max-width: 900px) {
  .board { grid-template-columns: 1fr; grid-template-rows: none; min-height: 0; }
  .bcard-lead { grid-row: auto; }
  .bcard { min-height: 220px; }
}

.bcard {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; isolation: isolate; min-height: 200px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  color: #fff; box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.bcard:hover { color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-2); }
.bcard:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* the picture, and the scrim that makes any picture safe to write on */
.bcard-art { position: absolute; inset: 0; z-index: -2; background: var(--surface-2); }
.bcard-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.bcard:hover .bcard-art img { transform: scale(1.04); }
.bcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(8, 18, 38, .93) 0%, rgba(8, 18, 38, .78) 26%,
    rgba(8, 18, 38, .30) 58%, rgba(8, 18, 38, .10) 100%);
}
.bcard-blank {
  /* Sat centred, which put it behind the title on a short card. It is a
     texture, not a subject: lifted clear of the words and dimmed. */
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-block-end: 108px; opacity: .45;
  color: var(--ic, var(--blue));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--ic, var(--blue)) 26%, #0d1b33),
    color-mix(in srgb, var(--ic, var(--blue)) 9%, #0d1b33));
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .bcard-blank { background: #16243d; }
}

/* the chips, floated over the top corners */
.bcard-top {
  position: absolute; inset-block-start: 12px; inset-inline: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bcard-kind {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; font-size: 11.2px; font-weight: 700;
  background: rgba(255, 255, 255, .14); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px);
}
.bcard-kind .ic { color: #fff; }
.bcard-new {
  padding: 5px 11px; border-radius: 999px; font-size: 10.8px; font-weight: 800;
  background: var(--gold); color: #2a1e02; letter-spacing: .02em;
}

/* the words */
.bcard-txt { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; min-width: 0; }
.bcard-lead .bcard-txt { padding: 28px 30px; gap: 10px; }
.bcard-title {
  font-family: var(--font-display); font-weight: 700; font-size: 16.5px;
  color: #fff; line-height: 1.4; letter-spacing: -.01em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.bcard-lead .bcard-title { font-size: 25px; line-height: 1.3; }
.bcard-lede {
  font-size: 14.4px; line-height: 1.68; color: rgba(255, 255, 255, .86);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bcard-foot { font-size: 11.8px; color: rgba(255, 255, 255, .66); }

/* ============================================================
   The Making of Basmah — Family Content, second tab (build 70)
   A dated chronicle in chapters, after the "making of" pages of
   landmark buildings: a navy title band, a sticky chapter rail,
   milestones on a gold spine, the logo's versions side by side,
   and a navy band for today. The two navy bands bookend the story
   and keep their colour in both themes, as the brand panels do.
   ============================================================ */
.jr {
  --jr-navy: #0b1f40;
  --jr-navy-2: #17305a;
  --jr-ivory: #f4f1e8;
  --jr-when: 156px;
  --jr-spine: 30px;
  margin-top: 4px;
}
.legacy-tabs { margin-bottom: 18px; }

/* ---------- title band ---------- */
.jr-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(197, 158, 89, .22), transparent 55%),
    linear-gradient(160deg, var(--jr-navy-2), var(--jr-navy) 62%);
  color: var(--jr-ivory);
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 64px);
  box-shadow: var(--shadow-2);
}
.jr-hero-in { position: relative; z-index: 1; max-width: 760px; }
.jr-hero-mark {
  position: absolute; z-index: 0; inset-inline-end: clamp(-60px, -2vw, 10px); bottom: -34px;
  width: clamp(170px, 26vw, 330px); height: auto; opacity: .13; pointer-events: none;
}
.jr-eyebrow {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--gold-mid);
  text-transform: uppercase; letter-spacing: .14em;
}
.jr-title {
  margin: 0; font-family: var(--font-display); font-weight: 750; line-height: 1.08;
  font-size: clamp(32px, 4.8vw, 58px); letter-spacing: -.02em; color: #fff;
}
.jr-lede {
  margin: 16px 0 0; max-width: 60ch; font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.7;
  color: rgba(244, 241, 232, .84);
}
.jr-span { display: flex; align-items: flex-end; gap: 18px; margin-top: clamp(22px, 3.4vw, 38px); flex-wrap: wrap; }
.jr-span-end { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jr-span-k { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(244, 241, 232, .6); }
.jr-span-end time { font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; color: #fff; }
.jr-span-h { font-size: 13px; color: var(--gold-mid); }
.jr-span-rule {
  flex: 1 1 60px; min-width: 40px; max-width: 220px; height: 2px; margin-bottom: 14px;
  background: linear-gradient(90deg, var(--gold-mid), rgba(197, 158, 89, .25));
  border-radius: 2px;
}
html[dir="rtl"] .jr-span-rule { background: linear-gradient(-90deg, var(--gold-mid), rgba(197, 158, 89, .25)); }

/* ---------- chapter rail ---------- */
.jr-rail {
  position: sticky; top: var(--jr-top, 0px); z-index: 20;
  margin: 20px 0 0; padding: 8px 0;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.jr-rail::-webkit-scrollbar { display: none; }
.jr-rail ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 2px; width: max-content; }
.jr-rail a {
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; font-size: 13.4px; font-weight: 650;
  color: var(--ink-soft); text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.jr-rail a:hover { background: var(--surface-2); color: var(--ink); }
.jr-rail a.is-active { background: var(--jr-navy); color: var(--jr-ivory); }
.jr-rail-no { font-size: 11.5px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.jr-rail a.is-active .jr-rail-no { color: var(--gold-mid); }

/* ---------- chapters ---------- */
.jr-ch { margin-top: clamp(40px, 6vw, 72px); scroll-margin-top: var(--jr-stick, 120px); }
.jr-ch-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px clamp(14px, 2.4vw, 26px);
  align-items: start; margin-bottom: 26px; max-width: 980px;
}
.jr-ch-no {
  font-family: var(--font-display); font-size: clamp(44px, 6vw, 76px); font-weight: 800; line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold-mid); font-variant-numeric: tabular-nums;
}
@supports not (-webkit-text-stroke: 1px black) { .jr-ch-no { color: var(--gold-mid); } }
.jr-ch-span { margin: 2px 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; }
.jr-ch-text h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 2.7vw, 34px); line-height: 1.15; letter-spacing: -.01em; }
.jr-ch-intro { margin: 10px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.jr-admin { align-self: center; }

/* ---------- the spine ---------- */
.jr-line { list-style: none; margin: 0; padding: 0; position: relative; }
.jr-line::before {
  content: ""; position: absolute; top: 8px; bottom: 8px;
  inset-inline-start: calc(var(--jr-when) + 18px + var(--jr-spine) / 2 - 1px); width: 2px;
  background: linear-gradient(to bottom, var(--gold-mid), color-mix(in srgb, var(--gold-mid) 25%, transparent));
  border-radius: 2px;
}
.jr-m {
  display: grid; grid-template-columns: var(--jr-when) var(--jr-spine) minmax(0, 1fr);
  grid-template-areas: "when dot card"; column-gap: 18px; margin: 0 0 22px;
  scroll-margin-top: var(--jr-stick, 120px);
}
.jr-m:last-child { margin-bottom: 0; }
.jr-when { grid-area: when; text-align: end; padding-top: 16px; }
.jr-when time { display: block; }
.jr-day {
  display: block; font-family: var(--font-display); font-size: 40px; font-weight: 780; line-height: 1;
  color: var(--blue-deep); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.jr-my { display: block; margin-top: 5px; font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.jr-hijri { display: block; margin-top: 3px; font-size: 12.4px; font-weight: 600; color: var(--gold-deep); }
.jr-dot {
  grid-area: dot; justify-self: center; margin-top: 24px; position: relative; z-index: 1;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--gold-mid);
  box-shadow: 0 0 0 5px var(--ground);
}
.jr-m--meeting .jr-dot { width: 20px; height: 20px; margin-top: 21px; background: var(--jr-navy); border-color: var(--gold-mid); }
.jr-m--brand .jr-dot { background: var(--gold-mid); }
.jr-m--family .jr-dot { border-color: var(--blue-mid); }
/* A second moment on the same day keeps its date for screen readers only,
   and a smaller dot, so the day reads as one group. */
.jr-m--same-day .jr-when > * {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.jr-m--same-day .jr-dot { width: 10px; height: 10px; margin-top: 26px; border-width: 2px; }

.jr-card {
  grid-area: card; min-width: 0; max-width: 860px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(18px, 2.2vw, 26px) clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow-1);
}
.jr-kind {
  display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  background: var(--surface-2); color: var(--ink-soft);
}
.jr-m--meeting .jr-kind { background: var(--jr-navy); color: var(--jr-ivory); }
.jr-m--brand .jr-kind   { background: var(--gold-soft); color: var(--gold-deep); }
.jr-m--family .jr-kind  { background: var(--blue-soft); color: var(--blue); }
.jr-card h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(18px, 1.7vw, 21.5px); line-height: 1.3; }

/* A meeting reads as its minutes: an ivory sheet under a gold rule. */
.jr-m--meeting .jr-card {
  background: color-mix(in srgb, var(--gold-soft) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--gold-mid) 35%, var(--line));
  border-top: 3px solid var(--gold-mid);
}
.jr-m--meeting .jr-card h3 { font-size: clamp(20px, 2vw, 24px); }

.jr-body { font-size: 15.2px; line-height: 1.78; color: var(--ink); }
.jr-body p { margin: 0 0 12px; max-width: 72ch; }
.jr-body > :last-child { margin-bottom: 0; }
.jr-points { margin: 4px 0 14px; padding: 0; list-style: none; max-width: 76ch; }
.jr-points li { position: relative; padding-inline-start: 20px; margin: 0 0 7px; }
.jr-points li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: .72em;
  width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg); background: var(--gold-mid);
}
.jr-quote {
  margin: 6px 0 14px; padding: 4px 0; padding-inline-start: 18px;
  border-inline-start: 3px solid var(--gold-mid);
  font-family: var(--font-display); font-size: clamp(16.5px, 1.6vw, 19px); line-height: 1.6; font-style: italic;
  color: var(--blue-deep);
}
html[dir="rtl"] .jr-quote { font-style: normal; }

.jr-fig { margin: 16px 0 0; }
.jr-fig img {
  display: block; width: 100%; max-height: 520px; object-fit: cover;
  border-radius: calc(var(--radius) - 4px); border: 1px solid var(--line); background: var(--surface-2);
}
.jr-fig figcaption { margin-top: 7px; font-size: 12.6px; color: var(--ink-faint); }
/* A logo is an object on paper: shown whole, on white, in either theme. */
.jr-fig--mark img { object-fit: contain; background: #fff; max-height: 300px; padding: 10px; }

@media (min-width: 1180px) {
  /* Label, title, text and the admin row down one side, the logo down the
     other. The text row takes the slack, so a tall logo never pushes the
     title away from its label. */
  .jr-m--brand.has-img .jr-card {
    display: grid; grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: auto auto 1fr auto; column-gap: 26px; align-items: start;
  }
  .jr-m--brand.has-img .jr-card > * { grid-column: 1; }
  .jr-m--brand.has-img .jr-card > .jr-kind { justify-self: start; }
  .jr-m--brand.has-img .jr-card > .jr-fig { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
}

.jr-admin-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); }
.jr-admin-row form { margin: 0; }

/* ---------- the logo through time ---------- */
.jr-marks {
  margin-top: clamp(44px, 6vw, 76px); padding: clamp(22px, 3.4vw, 40px);
  border-radius: calc(var(--radius) + 4px); background: var(--surface-2); border: 1px solid var(--line);
}
.jr-marks h2 { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); }
.jr-marks-sub { margin: 6px 0 22px; color: var(--ink-soft); }
.jr-marks-row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
}
.jr-mark { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; position: relative; }
.jr-mark-img {
  display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.jr-mark-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.jr-mark:hover .jr-mark-img { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.jr-mark-no {
  position: absolute; top: 8px; inset-inline-start: 8px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--jr-navy); color: var(--jr-ivory); font-size: 12px; font-weight: 800;
}
.jr-mark-t { font-weight: 700; font-size: 14px; line-height: 1.35; }
.jr-mark-d { font-size: 12.5px; color: var(--ink-faint); }

/* ---------- today ---------- */
.jr-today {
  margin-top: clamp(44px, 6vw, 76px); scroll-margin-top: var(--jr-stick, 120px);
  border-radius: calc(var(--radius) + 4px); overflow: hidden; color: var(--jr-ivory);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(197, 158, 89, .2), transparent 60%),
    linear-gradient(200deg, var(--jr-navy-2), var(--jr-navy) 65%);
  box-shadow: var(--shadow-2);
}
.jr-today-in { padding: clamp(26px, 4.4vw, 54px) clamp(22px, 5vw, 64px); }
.jr-today h2 { margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); color: #fff; }
.jr-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: clamp(20px, 3vw, 34px); }
.jr-num { padding-top: 14px; border-top: 1px solid rgba(244, 241, 232, .22); }
.jr .jr-num-v {
  display: block; margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 780; line-height: 1; color: var(--gold-mid); letter-spacing: -.02em;
}
.jr-num-l { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: rgba(244, 241, 232, .8); }

/* ---------- editing ---------- */
.jr-manage { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: var(--jr-stick, 120px); }
.jr-manage h2 { margin: 0 0 4px; }
.jr-form { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.jr-form > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.jr-form > summary::-webkit-details-marker { display: none; }
.jr-form > summary::before { content: "+"; font-weight: 800; color: var(--gold); width: 12px; }
.jr-form[open] > summary::before { content: "−"; }
.jr-form > form { padding: 0 16px 16px; }
.jr-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.jr-form > .jr-form-danger {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 16px; padding: 14px 0 16px; border-top: 1px dashed var(--line);
}
.jr-missing { max-width: 560px; margin: 30px auto; }

/* ---------- dark theme ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jr-day,
  :root:not([data-theme="light"]) .jr-quote { color: var(--ink); }
  :root:not([data-theme="light"]) .jr-m--meeting .jr-card { background: color-mix(in srgb, var(--gold-soft) 60%, var(--surface)); }
  :root:not([data-theme="light"]) .jr-rail a.is-active { background: var(--gold-solid); color: #fff; }
  :root:not([data-theme="light"]) .jr-rail a.is-active .jr-rail-no { color: #fff; }
}
:root[data-theme="dark"] .jr-day,
:root[data-theme="dark"] .jr-quote { color: var(--ink); }
:root[data-theme="dark"] .jr-m--meeting .jr-card { background: color-mix(in srgb, var(--gold-soft) 60%, var(--surface)); }
:root[data-theme="dark"] .jr-rail a.is-active { background: var(--gold-solid); color: #fff; }
:root[data-theme="dark"] .jr-rail a.is-active .jr-rail-no { color: #fff; }

/* ---------- narrow screens ---------- */
@media (max-width: 1000px) {
  .jr { --jr-when: 118px; }
  .jr-day { font-size: 34px; }
  .jr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .jr { --jr-spine: 22px; }
  .jr-line::before { inset-inline-start: calc(var(--jr-spine) / 2 - 1px); }
  .jr-m {
    grid-template-columns: var(--jr-spine) minmax(0, 1fr);
    grid-template-areas: "dot when" ". card"; column-gap: 12px; margin-bottom: 26px;
  }
  .jr-when { text-align: start; padding-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 8px; }
  .jr-when time { display: flex; align-items: baseline; gap: 6px; }
  .jr-day { font-size: 24px; display: inline; }
  .jr-my { display: inline; margin: 0; font-size: 13.5px; }
  .jr-hijri { display: inline; margin: 0; }
  .jr-dot, .jr-m--meeting .jr-dot { margin-top: 6px; }
  .jr-m--same-day { grid-template-areas: "dot card"; }
  .jr-m--same-day .jr-when { position: absolute; }
  .jr-m--same-day .jr-dot { margin-top: 20px; }
  .jr-ch-head { grid-template-columns: auto 1fr; }
  .jr-admin { grid-column: 1 / -1; justify-self: start; }
  .jr-hero-mark { opacity: .09; }
  .jr-span-rule { display: none; }
  .jr-span { gap: 14px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .jr-rail a, .jr-mark-img { transition: none; }
}
@media print {
  .jr-rail, .jr-manage, .jr-admin, .jr-admin-row, .legacy-tabs { display: none !important; }
  .jr-hero, .jr-today { box-shadow: none; }
  .jr-m { break-inside: avoid; }
}

/* ============================================================
   Feedback (build 71)
   A note to the family office: write on one side, and — for the
   office — the inbox on the other, unread first. Plain text only.
   ============================================================ */
:root { --ic-feedback: #2f8496; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-feedback: #5cc0d2; } }
:root[data-theme="dark"] { --ic-feedback: #5cc0d2; }
[data-ic="feedback"] { --ic: var(--ic-feedback); }

.fb-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: start; }
.fb-layout.fb-solo { grid-template-columns: minmax(0, 720px); }
.fb-h { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; }
.fb-h-sub { margin-top: 28px; font-size: 15.5px; color: var(--ink-soft); }
.fb-write textarea { min-height: 150px; font-size: 15px; line-height: 1.65; }
.fb-inbox-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.fb-inbox-head .fb-h { margin: 0; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fb-inbox .fb-list { margin-top: 14px; }
.fb-item {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.fb-item.is-unread { border-inline-start: 3px solid var(--gold-mid); background: color-mix(in srgb, var(--gold-soft) 40%, var(--surface)); }
.fb-from { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fb-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fb-body { margin: 0; font-size: 14.8px; line-height: 1.7; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.fb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; font-size: 12.6px; color: var(--ink-faint); }
.fb-meta > span:first-child { margin-inline-end: auto; }
.fb-meta form { margin: 0; }
@media (max-width: 1000px) {
  .fb-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Family Registry by second generation (build 73)
   The ten children of the founders as a row of photographs, one
   family open below as a folding tree: generation 3 always shown,
   4 and 5 folded under their parent. Generation blues and the
   blue/pink of men and women are the tree's own tokens.
   ============================================================ */
.gen2 { margin: 20px 0 18px; }
.gen2-h {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 750; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .1em;
}
html[dir="rtl"] .gen2-h { font-size: 14px; }
.gen2-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.gen2-fam {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.gen2-fam:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.gen2-fam:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; }
.gen2-face {
  flex: 0 0 auto; border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--male); background: var(--male-soft); color: var(--male);
}
.gen2-fam.is-female .gen2-face { box-shadow: 0 0 0 2px var(--female); background: var(--female-soft); color: var(--female); }
.gen2-txt { display: flex; flex-direction: column; min-width: 0; }
.gen2-name { font-weight: 700; font-size: 14px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gen2-n { font-size: 12px; color: var(--ink-faint); }
.gen2-fam.is-on {
  background: var(--blue-solid); border-color: var(--blue-solid); color: #fff; box-shadow: var(--shadow-2);
}
.gen2-fam.is-on .gen2-n { color: rgba(255, 255, 255, .75); }
.gen2-fam.is-on .gen2-face { border-color: var(--blue-solid); box-shadow: 0 0 0 2px var(--gold-mid); }

/* the open family */
.reg-family { padding: 0; overflow: hidden; }
.reg-family-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.reg-head-face .avatar { box-shadow: 0 0 0 3px var(--tg2); }
.reg-head-txt { flex: 1 1 240px; min-width: 0; }
.reg-head-txt h2 { margin: 0 0 3px; font-family: var(--font-display); font-size: 20px; }
.reg-head-name { font-weight: 650; }
.reg-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.reg-empty { padding: 18px 20px; margin: 0; }

.reg-list { padding: 4px 12px 14px; }
.reg-row {
  display: grid; grid-template-columns: 22px minmax(0, 1.4fr) 92px minmax(0, 1fr) 52px;
  align-items: center; column-gap: 10px; padding: 9px 8px;
  border-bottom: 1px solid var(--line); list-style: none;
}
.reg-headrow {
  font-size: 11.5px; font-weight: 750; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em; border-bottom-color: var(--line-strong);
}
html[dir="rtl"] .reg-headrow { font-size: 12.5px; }
summary.reg-row { cursor: pointer; border-radius: 8px; }
summary.reg-row::-webkit-details-marker { display: none; }
summary.reg-row::marker { content: ""; }
summary.reg-row:hover { background: var(--surface-2); }
summary.reg-row:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: -2px; }

/* the fold: a chevron pointing along the reading direction, down when open */
.reg-fold, .reg-fold-sp { display: grid; place-items: center; width: 22px; height: 22px; }
.reg-fold::before {
  content: ""; width: 7px; height: 7px;
  border-inline-end: 2px solid var(--ink-soft); border-block-end: 2px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform .15s ease;
}
html[dir="rtl"] .reg-fold::before { transform: rotate(45deg); }
.reg-node[open] > summary .reg-fold::before { transform: rotate(45deg) translate(-2px, -2px); }
/* In Arabic the borders drawing the chevron are the left and bottom ones, so
   "down" is the opposite turn. */
html[dir="rtl"] .reg-node[open] > summary .reg-fold::before { transform: rotate(-45deg) translate(2px, -2px); }

.reg-count {
  justify-self: end; font-size: 11.5px; font-weight: 750; padding: 2px 9px; border-radius: 999px;
  background: var(--gold-soft); color: var(--gold-deep); font-variant-numeric: tabular-nums;
}
.reg-node[open] > summary .reg-count { background: var(--surface-2); color: var(--ink-faint); }

.reg-kids {
  margin-inline-start: 18px; padding-inline-start: 12px;
  border-inline-start: 2px solid color-mix(in srgb, var(--tg4) 45%, transparent);
}
.reg-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.reg-name .avatar { flex: 0 0 auto; }
.reg-name-txt { display: flex; flex-direction: column; min-width: 0; }
.reg-name-txt a { font-weight: 650; overflow-wrap: anywhere; }
.reg-pos-sm { display: none; font-size: 12px; color: var(--ink-faint); }
.reg-pos { font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.reg-gen { font-variant-numeric: tabular-nums; }
.reg-row:not(.reg-headrow) .reg-gen {
  justify-self: start; min-width: 26px; text-align: center; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 750; color: #fff; background: var(--tg3);
}
.reg-g4 .reg-gen { background: var(--tg4) !important; }
.reg-g5 .reg-gen { background: var(--tg5) !important; color: var(--blue-deep) !important; }

@media (max-width: 720px) {
  .reg-list { padding: 2px 6px 10px; }
  .reg-row { grid-template-columns: 20px minmax(0, 1fr) auto auto; column-gap: 8px; padding: 8px 4px; }
  .reg-pos, .reg-headrow .reg-pos { display: none; }
  .reg-pos-sm { display: block; }
  .reg-kids { margin-inline-start: 10px; padding-inline-start: 8px; }
  .gen2-row { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; }
  .gen2-fam { flex: 0 0 auto; width: 190px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .gen2-fam, .reg-fold::before { transition: none; }
}

/* ============================================================
   The audit log in words (build 75)
   Filters on top, then the day's entries: time, face, who, a
   category chip, and the sentence. Refusals and failures carry a
   red edge. The raw record folds away under each entry.
   ============================================================ */
.al-filters {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(200px, 1.4fr) auto;
  gap: 10px 14px; align-items: end;
}
.al-filters .field { margin: 0; }
.al-checks { grid-column: 1 / 4; display: flex; gap: 8px 22px; flex-wrap: wrap; }
.al-go { display: flex; gap: 8px; justify-content: flex-end; }
.al-card { padding: 0; overflow: hidden; }
.al-day {
  margin: 0; padding: 12px 20px 8px; font-size: 12.5px; font-weight: 750; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
html[dir="rtl"] .al-day { font-size: 13.5px; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-row {
  display: grid; grid-template-columns: 46px 34px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 20px; border-bottom: 1px solid var(--line);
  border-inline-start: 3px solid transparent;
}
.al-row.is-problem { border-inline-start-color: var(--bad); background: color-mix(in srgb, var(--bad-bg) 45%, transparent); }
.al-time { padding-top: 7px; font-size: 12.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.al-face { display: flex; }
.al-nobody { background: var(--surface-2); color: var(--ink-faint); display: grid; place-items: center; font-weight: 700; }
.al-main { min-width: 0; }
.al-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.al-actor { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; }
a.al-actor:hover { text-decoration: underline; }
.al-cat {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
}
.al-cat-signin   { background: var(--blue-soft); color: var(--blue); }
.al-cat-accounts { background: var(--gold-soft); color: var(--gold-deep); }
.al-cat-registry { background: var(--good-bg); color: var(--good); }
.al-cat-security { background: var(--bad-bg); color: var(--bad); }
.al-text { margin-top: 3px; font-size: 14.2px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.al-text a { font-weight: 650; }
.al-tech { margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.al-tech > summary { cursor: pointer; display: inline-block; list-style: none; }
.al-tech > summary::-webkit-details-marker { display: none; }
.al-tech > summary:hover { color: var(--ink-soft); text-decoration: underline; }
.al-tech[open] > summary { margin-bottom: 4px; }
.al-tech code { font-size: 11.5px; }
.al-raw { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.al-pager { padding: 12px 20px; justify-content: space-between; }

@media (max-width: 760px) {
  .al-filters { grid-template-columns: 1fr 1fr; }
  .al-q, .al-checks { grid-column: 1 / -1; }
  .al-go { grid-column: 1 / -1; justify-content: flex-start; }
  .al-row { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 14px; }
  .al-time { grid-column: 2; grid-row: 2; padding-top: 0; }
  .al-face { grid-row: 1 / span 2; }
}

/* ============================================================
   Events as picture cards (build 76)
   An event is a name, a description, a date and a picture; the
   events page shows each as a card — the picture, the date on it,
   the name below. Past events sit quieter. Competitions keep
   their own folders and never appear as cards.
   ============================================================ */
.ev-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.ev-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.ev-card:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 2px; }
.ev-pic {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(150deg, var(--blue-solid), var(--blue-deep));
}
.ev-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ev-card:hover .ev-pic img { transform: scale(1.04); }
/* No picture: the first letter of the name on the brand navy, so the grid
   still reads as a set of cards. */
.ev-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 56px; font-weight: 800; color: rgba(255, 255, 255, .18);
  background: radial-gradient(90% 90% at 100% 0%, rgba(197, 158, 89, .3), transparent 60%);
}
.ev-date {
  position: absolute; top: 10px; inset-inline-start: 10px;
  display: flex; flex-direction: column; align-items: center; min-width: 46px; padding: 5px 8px 6px;
  border-radius: 10px; background: rgba(255, 255, 255, .94); color: var(--blue-deep);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); line-height: 1.05;
}
.ev-date b { font-size: 19px; font-weight: 800; }
.ev-date span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ev-mine {
  position: absolute; bottom: 10px; inset-inline-end: 10px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: var(--good); color: #fff;
}
.ev-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; }
.ev-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ev-when { font-size: 12.5px; color: var(--ink-faint); }
.ev-hijri { color: var(--gold-deep); }
.ev-card.is-past { box-shadow: none; }
.ev-card.is-past .ev-pic img { filter: saturate(.55); }
.ev-card.is-past .ev-name { color: var(--ink-soft); }

/* the picture at the top of an event's own page */
.ev-hero {
  margin: 0 0 18px; border-radius: calc(var(--radius) + 2px); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); max-height: 420px;
}
.ev-hero img { display: block; width: 100%; max-height: 420px; object-fit: cover; }

@media (max-width: 560px) {
  .ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ev-name { font-size: 14px; }
  .ev-body { padding: 10px 11px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ev-card, .ev-pic img { transition: none; }
}

/* ============================================================
   The founder beside the dashboard greeting (build 78)
   In the header's far slot — the left in Arabic, the right in
   English — with the greeting's own gap between them; it stays
   beside the greeting on a phone too, only smaller.
   ============================================================ */
.page-head:has(> .page-head-actions > .dash-founder) { align-items: center; flex-wrap: nowrap; }
.dash-founder {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; text-decoration: none; color: inherit; flex: 0 0 auto;
}
.dash-founder-pic {
  display: block; width: 120px; height: 120px; border-radius: 16px; overflow: hidden; margin-bottom: 4px;
  border: 3px solid var(--gold-mid); box-shadow: var(--shadow-2); background: var(--surface-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dash-founder:hover .dash-founder-pic { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.dash-founder-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dash-founder-name { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; line-height: 1.35; color: var(--ink); white-space: nowrap; }
.dash-founder-role { font-weight: 700; color: var(--gold-deep); }
@media (max-width: 560px) {
  .dash-founder-pic { width: 76px; height: 76px; border-radius: 12px; border-width: 2px; }
  /* A phone has no room for the whole line beside the greeting: the
     label stays with the name, and the name wraps under it. */
  .dash-founder { max-width: 140px; }
  .dash-founder-name { font-size: 10.5px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .dash-founder-pic { transition: none; } }

/* ============================================================
   Files under profile entries, and event galleries (build 79)
   ============================================================ */
.pf-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-tile-wrap { position: relative; display: inline-flex; }
.pf-tile {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  width: 64px; height: 64px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2);
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.pf-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pf-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-tile.pf-pdf { flex-direction: column; gap: 3px; width: 92px; padding: 4px; }
.pf-tile .cert-pdf-mark { font-size: 10px; padding: 2px 6px; }
.pf-name { font-size: 10.5px; line-height: 1.2; color: var(--ink-soft); text-align: center; overflow-wrap: anywhere; }
.pf-del { position: absolute; top: -6px; inset-inline-end: -6px; margin: 0; }
.pf-x {
  width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); font-size: 10px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; padding: 0; box-shadow: var(--shadow-1);
}
.pf-x:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.pf-attach { margin-top: 8px; font-size: 12.5px; }
.pf-attach > summary { cursor: pointer; color: var(--blue); font-weight: 650; list-style: none; display: inline-block; }
.pf-attach > summary::-webkit-details-marker { display: none; }
.pf-attach > summary::before { content: "+ "; }
.pf-attach-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.pf-attach-form input[type="file"] { max-width: 100%; }

.ev-count {
  position: absolute; bottom: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(11, 31, 64, .78); color: #fff; backdrop-filter: blur(4px);
}
.ev-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: -6px 0 18px;
}
.ev-shot { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
           border: 1px solid var(--line); background: var(--surface-2); }
.ev-shot a, .ev-shot img { display: block; width: 100%; height: 100%; }
.ev-shot img { object-fit: cover; transition: transform .25s ease; }
.ev-shot:hover img { transform: scale(1.04); }
.ev-shot-del { position: absolute; top: 6px; inset-inline-end: 6px; margin: 0; }
@media (max-width: 560px) {
  .ev-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-tile, .ev-shot img { transition: none; }
}

/* ============================================================
   PDF first-page previews (build 80)
   Anything with data-pdf gets the first page of its PDF drawn in
   by app.js. Until then — or if it cannot be drawn — it shows the
   red PDF badge it was rendered with. The page covers the tile
   from the top; the badge moves to a corner, a file name onto a
   dark strip so it stays readable over the page.
   ============================================================ */
[data-pdf] { position: relative; overflow: hidden; }
[data-pdf] > .pdf-page {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; background: #fff;
}
[data-pdf].has-pdf-page > .cert-pdf-mark {
  position: absolute; top: 6px; inset-inline-end: 6px; z-index: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
[data-pdf].has-pdf-page > .cert-pdf-open { display: none; }
[data-pdf].has-pdf-page > .pf-name,
[data-pdf].has-pdf-page > .pdf-tile-name {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; margin: 0; padding: 16px 6px 5px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; text-align: start;
}
/* A PDF under a profile entry is a page: portrait, not square. */
.pf-tile.pf-pdf { width: 66px; height: 88px; padding: 0; }
.pf-tile.pf-pdf:not(.has-pdf-page) { padding: 4px; }
/* No cover, but a PDF: the first page is the cover. */
.book-cover-blank[data-pdf] { align-self: stretch; width: 100%; display: flex; align-items: center; justify-content: center; }

/* a PDF in the archive, a space post, a chat message */
.pdf-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 150px; aspect-ratio: 3 / 4; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px; text-decoration: none;
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  transition: transform .15s ease, box-shadow .15s ease;
}
a.pdf-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.pdf-tile-sm { width: 110px; margin-bottom: 6px; }
.pdf-tile-name { font-size: 11px; line-height: 1.3; color: var(--ink-soft); padding: 0 8px; text-align: center; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .pdf-tile { transition: none; } }

/* ============================================================
   Milk kinship — الرضاعة (build 81)
   The questions (first sign-in, profile editor) and the
   Milk Kinship Tree page.
   ============================================================ */
:root { --ic-milk: #c2618f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ic-milk: #e59ec0; } }
:root[data-theme="dark"] { --ic-milk: #e59ec0; }
[data-ic="milk"] { --ic: var(--ic-milk); }

.milk-q {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px 16px; margin: 6px 0 0;
  background: color-mix(in srgb, var(--female-soft, #fbe9f1) 35%, var(--surface));
}
.milk-q legend { padding: 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.milk-ask { margin: 0 0 8px; font-weight: 650; }
.milk-yn { display: flex; gap: 22px; margin-bottom: 6px; }
.milk-yes { display: grid; gap: 12px; margin-top: 10px; }
.milk-yes[hidden], .milk-q [hidden] { display: none !important; }
.milk-sibs { display: grid; gap: 6px; margin-bottom: 6px; }

.milk-search { display: flex; gap: 8px; max-width: 520px; }
.milk-search input[type="search"] {
  flex: 1; min-width: 0; min-height: 42px; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; font-family: var(--font); background: var(--surface); color: var(--ink);
}
.milk-search input[type="search"]:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
/* Milk Kinship Tree (build 82): the illustration, then one row per person —
   the person, the mother, who they were breastfed with, her relation. */
.milk-hero {
  display: flex; align-items: center; gap: 22px; padding: 18px 22px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--female-soft, #fbe9f1) 70%, var(--surface)), var(--surface) 70%);
}
.milk-hero-art {
  flex: 0 0 auto; width: 168px; height: 168px; border-radius: 22px; object-fit: cover;
  background: #fbf7f4; box-shadow: var(--shadow-2);
}
.milk-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.milk-hero-text h1 { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.2; }
.milk-hero-text p { margin: 0 0 4px; }
.milk-empty-art { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; opacity: .9; }

.milk-table { padding: 0; overflow: hidden; }
.milk-tr {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line);
}
.milk-tr:last-child { border-bottom: 0; }
.milk-th {
  padding-block: 10px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  background: color-mix(in srgb, var(--female-soft, #fbe9f1) 45%, var(--surface));
}
.milk-tr:not(.milk-th):hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.milk-td { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.milk-person { display: inline-flex; align-items: center; gap: 9px; font-weight: 650; color: var(--ink); text-decoration: none; }
.milk-person:hover span { text-decoration: underline; }
.milk-mother-link { font-weight: 600; }
.milk-typed { display: inline-flex; flex-direction: column; gap: 1px; font-weight: 600; }
.milk-lbl { display: none; }
@media (max-width: 760px) {
  .milk-hero { flex-direction: column; text-align: center; }
  .milk-hero-text { align-items: center; }
  .milk-hero-art { width: 140px; height: 140px; }
  .milk-th { display: none; }
  .milk-tr { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; }
  .milk-td:not(.milk-td-person) { display: flex; gap: 8px; align-items: baseline; padding-inline-start: 45px; }
  .milk-lbl { display: inline; flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); }
  .milk-lbl::after { content: ':'; }
}
.milk-card td { vertical-align: top; }

/* ============================================================
   Feedback replies (build 82)
   The office's answers sit under each piece of feedback, in
   the inbox and in the writer's own list.
   ============================================================ */
.fb-replies { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.fb-reply {
  padding: 10px 12px; border-radius: var(--radius-sm); border-inline-start: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--surface));
}
.fb-reply-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 13px; color: var(--blue); }
.fb-reply-head strong { color: var(--ink); }
.fb-reply-head form { margin: 0; margin-inline-start: auto; }
.fb-reply .fb-body { font-size: 14px; }
[dir="rtl"] .fb-reply-head svg, [dir="rtl"] .fb-reply-box summary svg { transform: scaleX(-1); }
.fb-reply-box { margin-top: 10px; }
.fb-reply-box summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fb-reply-box summary::-webkit-details-marker { display: none; }
.fb-reply-form { display: grid; gap: 8px; margin-top: 8px; }
.fb-reply-form textarea {
  width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; line-height: 1.6; font-family: var(--font); background: var(--surface); color: var(--ink);
}
.fb-reply-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.fb-reply-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   Family Content: Letters tab, archive editing (build 83)
   ============================================================ */
.letters-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.letters-intro p { margin: 0; }
.letters-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 720px; margin-inline: auto; margin-bottom: 14px; }
.letter-card-gen { font-weight: 600; color: var(--ink-faint); }
.letter-card-name .badge { margin-inline-start: 6px; }
.letter-form { max-width: 820px; margin-inline: auto; }
.letter-form textarea { min-height: 360px; font-size: 15.5px; line-height: 1.9; }
.legacy-item-actions { display: flex; gap: 6px; margin-top: 8px; }
.legacy-item-actions form { margin: 0; }
.tl-item.is-editing { outline: 2px solid var(--gold-mid); outline-offset: 6px; border-radius: 6px; }
.legacy-editing { border-color: var(--gold-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-mid) 25%, transparent); }

/* ============================================================
   The note behind a figure (build 84)
   "224*" on the Family Members tile: hover or tap the number for
   the office's note about it. The tile itself still links to the
   registry through a link laid over it.
   ============================================================ */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kpi.kpi-noted { overflow: visible; }
.kpi.kpi-noted::before { border-radius: inherit; }
.kpi.kpi-noted::after { border-radius: 0 0 var(--radius) var(--radius); }
.kpi.kpi-noted:hover, .kpi.kpi-noted:focus-within, .kpi.kpi-noted:has(.open) { z-index: 20; }
/* The tiles' entrance animation leaves each block of the page on a layer of
   its own, painted in order — so the board below was drawn over the note.
   The row that holds the noted tile sits above what follows it. */
.grid:has(> .kpi-noted) { position: relative; z-index: 40; }
.kpi-noted > .kpi-cover { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.kpi-noted > .kpi-note-wrap { position: relative; z-index: 2; align-self: flex-start; }
.kpi-note-trigger {
  display: inline-flex; align-items: flex-start; gap: 1px; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; cursor: help; font: inherit; border-radius: 6px;
}
.kpi-note-trigger:focus-visible { outline: none; box-shadow: var(--ring); }
.kpi-star {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1;
  color: var(--gold-deep, #a8873b); margin-top: 2px; transition: transform .15s var(--ease);
}
.kpi-note-trigger:hover .kpi-star, .kpi-note-wrap.open .kpi-star { transform: scale(1.18); }
.kpi-noted.note-empty .kpi-star { opacity: .35; }

.kpi-note-pop {
  display: none; position: absolute; top: 100%; inset-inline-start: -8px; z-index: 30;
  padding-top: 8px; width: min(330px, calc(100vw - 48px));
}
.kpi-note-wrap:hover .kpi-note-pop, .kpi-note-wrap.open .kpi-note-pop { display: block; }
.kpi-note-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--gold-mid) 55%, var(--line-strong));
  border-radius: var(--radius-sm, 10px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ground) 70%, transparent), var(--shadow-3, 0 12px 32px rgba(0,0,0,.18));
  animation: kpiNoteIn .16s var(--ease) both;
}
.kpi-note-h { font-size: 12.5px; color: var(--gold-deep, #a8873b); }
.kpi-note-text { font-size: 13.8px; line-height: 1.7; white-space: normal; overflow-wrap: anywhere; }
@keyframes kpiNoteIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kpi-note-card { animation: none; } }

.kpi-note-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3, 0 20px 50px rgba(0,0,0,.3));
}
.kpi-note-dialog::backdrop { background: rgba(10, 16, 30, .45); }
.kpi-note-dialog textarea { width: 100%; min-height: 140px; }
.kpi-note-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kpi-note-actions .danger { margin-inline-start: auto; }

/* ============================================================
   6 Oct 2026 (build 86): PDFs in picture slots, the board's PDF
   art, audiobooks, media in letters, the application guidelines
   ============================================================ */
/* A PDF in a picture slot: its first page, from the top. */
img[data-pdf-img] { object-position: top center; background: #fff; }

/* The dashboard board: a library PDF's first page over the placeholder. */
.bcard-art > .bcard-pdf { position: absolute; inset: 0; display: block; }
.bcard-art > .bcard-pdf > .pdf-page { transition: transform .4s var(--ease); }
.bcard:hover .bcard-art > .bcard-pdf > .pdf-page { transform: scale(1.04); }

/* Audiobooks */
.book-listen { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
.book-listen audio { width: 100%; max-width: 520px; }
.book-audio-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; color: var(--blue); margin-inline-end: 6px; }

/* Letters: what a letter carries */
.letter-card-media { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; font-weight: 650; color: var(--ink-soft); }
.letter-card-media > span { display: inline-flex; align-items: center; gap: 4px; }
.letter-play { display: grid; gap: 14px; margin: 0 0 26px; }
.letter-video { width: 100%; max-height: 70vh; border-radius: var(--radius-sm); background: #000; }
.letter-voice {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.letter-voice-ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--blue-solid, #17305a); }
.letter-voice audio { flex: 1; min-width: 0; }
.letter-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 26px; }
.letter-pics a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.letter-pics img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.letter-pics a:hover img { transform: scale(1.04); }
.letter-pdfs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.letter-att-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.letter-att-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
.letter-att-list a { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.letter-att-kind { display: inline-grid; place-items: center; min-width: 26px; font-size: 11px; font-weight: 700; color: var(--ink-soft); }

/* The application guidelines */
.guidelines-gate { max-width: 760px; }
.guidelines-doc { line-height: 1.85; font-size: 15px; }
.guidelines-gate .guidelines-doc { max-height: 56vh; overflow-y: auto; }
.guidelines-doc h2 { font-family: var(--font-display); font-size: 17px; margin: 22px 0 8px; }
.guidelines-doc h2:first-child { margin-top: 0; }
.guidelines-doc p { margin: 0 0 10px; }
.guidelines-doc ul { margin: 0 0 10px; padding-inline-start: 22px; }
.guidelines-doc li { margin-bottom: 6px; }
.guidelines-accept { margin-top: 16px; }

/* ============================================================
   Social links on a profile (build 87)
   ============================================================ */
.social-links { display: flex; flex-wrap: wrap; gap: 8px; }
.social-link {
  display: inline-flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.social-link:hover { border-color: var(--blue); transform: translateY(-1px); color: var(--ink); }
.social-link strong { font-size: 13px; }
.social-link span { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.sl-rows { display: grid; gap: 6px; }
/* Fields that belong to one kind of profile entry only: hidden means hidden,
   whatever display a .field or .form-row otherwise has. */
#item-form [hidden] { display: none !important; }

/* ============================================================
   Mourning line (build 93)
   Someone who has passed away: one slim black line across the
   top-right corner, inside their picture — photograph or initials.
   The frame stays exactly as it is (management, 7 Oct 2026); the
   picture clips the line, so it follows a circle or a rounded
   square alike.
   ============================================================ */
.mourn { position: relative; overflow: hidden; }
span.avatar.has-photo.mourn { padding: 0; background: var(--surface-3); }
.mourn > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mourn::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  /* centred near the corner, at (80%, 20%), turned 45°, long enough to run
     from the top edge to the right edge */
  left: 30%; top: 20%; width: 100%; height: max(2px, 3.5%);
  transform: translateY(-50%) rotate(45deg);
  background: #0b0b0b; box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
/* A rounded square's corner sits further out than a circle's rim. */
.avatar.portrait.mourn::after, .dash-founder-pic.mourn::after { left: 36%; top: 14%; }