/* ============================================================================
   Activity directory
   ----------------------------------------------------------------------------
   Class names deliberately match the existing activities page (page-body,
   filter-panel, activity-card, code-badge, pag-btn, ...) so that the two look
   the same and so this markup can be dropped straight into the host site.

   Everything visual is driven by the custom properties in :root below - change
   those to re-theme without touching the rules.

   Layout uses logical properties (margin-inline, inset-inline, padding-block)
   so the Arabic right-to-left view is handled by the same rules.
   ========================================================================= */

:root {
  /* Brand.
     Taken from the Dubai Design System's primary ramp, which is a Material
     Design 3 palette seeded from its blue primary - the same tones the live
     site paints with. Tone numbers are the MD3 ones, so this maps directly onto
     the design system if it is ever swapped in wholesale. */
  --brand:        #49586e;  /* buttons, icons, active states - between the
                               design system's primary 35 and 40 */
  --brand-dark:   #39485e;  /* primary 30  - hover and pressed */
  --brand-tint:   #ebf1ff;  /* primary 95  - badge and icon backgrounds */
  --brand-tint-2: #d4e3ff;  /* primary 90  - borders on tinted surfaces */
  --accent:       #2d3c52;  /* primary 25  - search-match text */

  /* Neutrals */
  --ink:        #1b1b1f;    /* MD3 on-surface */
  --ink-soft:   #44536a;    /* primary 35 - secondary text, still on-palette */
  --ink-muted:  #697890;    /* primary 50 */
  --line:       #dde3eb;
  --line-soft:  #eef1f7;
  --surface:    #ffffff;
  --canvas:     #f8f9ff;    /* primary 98 - the page behind the cards */

  /* Status */
  --ok:    #1c7a4d;
  --ok-bg: #e6f4ec;
  --warn:  #8a5a06;
  --warn-bg: #fdf3e0;
  --danger: #b3261e;
  --danger-bg: #fdeceb;

  /* Shape and depth */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgba(22, 33, 43, .06), 0 1px 3px rgba(22, 33, 43, .04);
  --shadow-2: 0 4px 12px rgba(22, 33, 43, .08), 0 2px 4px rgba(22, 33, 43, .04);
  --shadow-3: 0 18px 48px rgba(22, 33, 43, .18);

  /* Type */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Segoe UI", "Noto Naskh Arabic", "Dubai", system-ui, Tahoma, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --page-max: 1240px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}
body.lang-ar { font-family: var(--font-ar); }
body.is-embedded { background: transparent; }

/* Framed in someone else's page: drop our own chrome whichever route is being
   shown. /embed leaves the header out of the markup entirely; this covers a
   host page that frames "/" instead. */
html.is-framed .site-header { display: none; }
html.is-framed body { background: transparent; }

/* The host page carries its own heading, so ours is a duplicate. Hidden from
   view but left in the document: it is the only <h1> here, and removing it
   outright would leave the framed page with no heading for a screen reader to
   announce or navigate to. */
html.is-framed .page-title-inner,
body.is-embedded .page-title-inner {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; color: var(--ink); }
p { margin: 0; }

a { color: var(--brand); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Icon font -------------------------------------------------------------
   One variable font covers every icon. `.mi-fill` switches to the filled cut,
   used for the coloured category glyph on each card. */
.mi {
  font-family: "Material Symbols Outlined", "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  user-select: none;
  flex: none;
}
.mi-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

/* ============================================================================
   Site header
   ========================================================================= */
.site-header {
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
}
.site-brand-mark {
  color: var(--brand); font-size: 26px;
  font-variation-settings: "FILL" 1, "wght" 500, "opsz" 24;
}
.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.site-nav-link:hover { background: var(--brand-tint); color: var(--brand-dark); }
.site-user {
  display: inline-flex; align-items: center; gap: 8px;
  padding-inline-start: 12px; margin-inline-start: 6px;
  border-inline-start: 1px solid var(--line);
}
.site-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.site-user-name { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
@media (max-width: 560px) { .site-user-name { display: none; } }

/* ============================================================================
   Flash messages
   ========================================================================= */
.flash-stack {
  max-width: var(--page-max); margin: 16px auto 0; padding-inline: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-1); font-size: 14px;
}
.flash p { margin: 0; flex: 1; }
.flash .mi { font-size: 20px; margin-block-start: 1px; }
.flash-success { background: var(--ok-bg); border-color: #bfe0cd; color: var(--ok); }
.flash-error   { background: var(--danger-bg); border-color: #f2c4c1; color: var(--danger); }
.flash-info    { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-dark); }
.flash-close {
  border: 0; background: none; cursor: pointer; color: inherit; opacity: .65;
  padding: 0; line-height: 1; display: grid; place-items: center;
}
.flash-close:hover { opacity: 1; }

/* ============================================================================
   Page shell
   ========================================================================= */
.page-body {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 28px 24px 56px;
}
body.is-embedded .page-body,
html.is-framed .page-body { padding-block-start: 8px; }

.page-title-inner {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block-end: 22px;
  padding-block-end: 16px;
  border-block-end: 2px solid var(--brand-tint-2);
}

/* ============================================================================
   Filter panel
   ========================================================================= */
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 22px;
  margin-block-end: 20px;
}
.filter-panel h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
  margin-block-end: 16px;
}
.filter-panel h2 .mi { color: var(--brand); font-size: 20px; }

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

/* Inputs ------------------------------------------------------------------ */
.search-wrapper { position: relative; }
.search-wrapper .lead-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%; transform: translateY(-50%);
  color: var(--ink-muted); font-size: 20px; pointer-events: none;
}
.search-wrapper input {
  width: 100%;
  padding-block: 10px;
  padding-inline: 40px 38px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-wrapper input::placeholder { color: var(--ink-muted); }
.search-wrapper input:hover { border-color: var(--brand-tint-2); }
.search-wrapper input:focus,
.custom-select:focus,
.page-size-selector select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(73, 88, 110, .20);
}
.clear-btn {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--line-soft); color: var(--ink-soft);
  cursor: pointer; padding: 0;
  transition: background-color .15s ease, color .15s ease;
}
.clear-btn .mi { font-size: 16px; }
.clear-btn:hover { background: var(--brand-tint-2); color: var(--brand-dark); }
.clear-btn[hidden] { display: none; }

.custom-select,
.page-size-selector select {
  width: 100%;
  appearance: none;
  padding-block: 10px;
  padding-inline: 12px 36px;
  font: inherit; color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d7e8c'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: right 10px center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
[dir="rtl"] .custom-select,
[dir="rtl"] .page-size-selector select { background-position: left 10px center; }
.custom-select:hover { border-color: var(--brand-tint-2); }

/* Autocomplete ------------------------------------------------------------ */
.autocomplete-list {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden auto;
  max-height: 320px;
}
.autocomplete-list[hidden] { display: none; }
.autocomplete-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0; background: none;
  font: inherit; color: var(--ink);
  text-align: start;
  cursor: pointer;
  border-block-end: 1px solid var(--line-soft);
}
.autocomplete-item:last-child { border-block-end: 0; }
.autocomplete-item:hover,
.autocomplete-item.is-active { background: var(--brand-tint); }
.autocomplete-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.autocomplete-item .item-code {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: var(--line-soft);
  padding: 2px 7px;
  border-radius: 20px;
  max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.match-highlight {
  background: var(--brand-tint-2);
  color: var(--accent);
  font-weight: 700;
  border-radius: 2px;
}
.autocomplete-empty { padding: 12px 14px; color: var(--ink-muted); font-size: 14px; }

/* Active filter chips ----------------------------------------------------- */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* Sits between the panel heading and the inputs; only takes space when filled. */
.active-filters:not(:empty) { margin-block-end: 16px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--brand-tint);
  color: var(--brand-dark);
  border: 1px solid var(--brand-tint-2);
  border-radius: 20px;
  font-size: 13px; font-weight: 500;
}
[dir="rtl"] .filter-chip { padding: 5px 12px 5px 6px; }
.filter-chip button {
  border: 0; background: none; cursor: pointer; color: inherit;
  display: grid; place-items: center; padding: 0; opacity: .7;
}
.filter-chip button:hover { opacity: 1; }
.filter-chip .mi { font-size: 16px; }
.filter-chip-clear {
  background: none; border: 1px dashed var(--line);
  color: var(--ink-muted); cursor: pointer;
  padding: 5px 12px; border-radius: 20px; font: inherit; font-size: 13px;
}
.filter-chip-clear:hover { border-color: var(--brand); color: var(--brand); }

/* ============================================================================
   Results bar
   ========================================================================= */
.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-block-end: 16px;
}
.results-count { font-size: 14px; color: var(--ink-soft); }
.results-count strong { color: var(--ink); font-weight: 700; }
.results-bar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-size-selector { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.page-size-selector select { width: auto; padding-block: 7px; }

/* ============================================================================
   Cards
   ========================================================================= */
.cards-grid {
  display: grid;
  /* 320px rather than 300: at 300 a three-column layout forms on ~1000px-wide
     screens with cards so narrow that a handful of names need three lines,
     which would make those cards taller than the rest. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-block-end: 26px;
}
.cards-grid.is-loading { opacity: .45; pointer-events: none; transition: opacity .15s ease; }

.activity-card {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  text-align: start;
  font: inherit; color: inherit;
  cursor: pointer;
  animation: cardIn .22s ease both;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.activity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand-tint-2);
}
.activity-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.activity-card.is-retired { opacity: .62; border-style: dashed; }

/* Fade only. This used to slide each card up 8px with a staggered delay, which
   looked fine on a first load but made paging jitter: cards in the same row
   settled at different moments, so the grid was visibly ragged for about half
   a second and individual activities appeared to shift position. */
@keyframes cardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-card { animation: none; }
  .activity-card:hover { transform: none; }
}

.card-header { display: flex; align-items: flex-start; gap: 12px; }
.card-icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  color: var(--brand);
  display: grid; place-items: center;
}
.card-icon .mi { font-size: 24px; }
.card-titles {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  /* Fill the rest of the header row. As a flex item this defaults to
     flex: 0 1 auto, i.e. shrink-wrapped to the longest title, so the box
     itself was a different width on every card. In the English view the box
     starts right after the icon and that is invisible, but in the Arabic view
     the row packs to the right, so the box's left edge floated with the text
     length and each English name began at a different x. Aligning text inside
     the box cannot fix that - the box has to span the row. */
  flex: 1 1 auto;
}

/* Every card is the same height, so the pagination beneath the grid stays put
   when you move between pages. Two lines are reserved for the activity name
   whether or not it needs them, and clamped at two as a guard: at the column
   widths this grid produces, no name in the data set runs longer. */
.card-title-en,
.card-title-ar {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* Two lines are reserved for BOTH names, not just the one being read. The
   second name wraps too - an Arabic name at some column widths, and the longer
   English names whenever Arabic is the reading language - and reserving a
   single line for it let those cards grow by 20px, which was the remaining
   source of movement under the pagination. */
/* Each name is pinned to the direction of its own script, whichever language
   the page is in: the English name always starts at the left edge, the Arabic
   name always at the right. Left to inherit, the spans follow the page
   direction, so in the Arabic view every English name sat against the right
   edge and went ragged on the left when it wrapped to a second line. The dir
   attributes in the markup say the same thing and additionally isolate each
   name from its neighbour for bidi; these two rules are the backstop in case
   an attribute is ever dropped. */
.card-title-en { direction: ltr; text-align: left; }
.card-title-ar { direction: rtl; text-align: right; }

.card-title-en {
  font-size: 16.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35;
  min-height: 2.7em;            /* two lines - em, so it tracks the size */
}
.card-title-ar {
  font-family: var(--font-ar);
  font-size: 16px; color: var(--ink-muted); line-height: 1.5;
  min-height: 3em;              /* two lines */
}
/* The two swap roles, sizes and reserved heights in the Arabic view. */
body.lang-ar .card-title-en {
  font-size: 14.5px; color: var(--ink-muted); font-weight: 500; order: 2;
  line-height: 1.5; min-height: 3em;
}
body.lang-ar .card-title-ar {
  font-size: 18.5px; color: var(--ink); font-weight: 600; order: 1;
  line-height: 1.35; min-height: 2.7em;
}

.card-meta {
  /* Stacked, not side by side: the code reads as a label for the row below it,
     and long category names no longer decide whether the row wraps. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-block-start: auto;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line-soft);
}
.code-badge, .category-badge, .retired-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 13px; font-weight: 600;
  max-width: 100%;
}
.code-badge {
  background: var(--line-soft); color: var(--ink-soft);
  font-family: var(--font-mono); letter-spacing: .02em;
}
.category-badge {
  background: var(--brand-tint); color: var(--brand-dark);
  min-width: 0;
}
.category-badge > :not(.mi) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retired-badge { background: var(--warn-bg); color: var(--warn); }
.code-badge .mi, .category-badge .mi { font-size: 15px; }

/* ============================================================================
   Empty state
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
}
.empty-state .mi { font-size: 46px; color: var(--brand-tint-2); }
.empty-state h3 { margin-block: 10px 4px; font-size: 17px; color: var(--ink-soft); }

/* ============================================================================
   Pagination
   ========================================================================= */
.pagination-wrapper {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.pagination-wrapper:empty { display: none; }
.pag-btn {
  min-width: 38px; height: 38px;
  padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pag-btn .mi { font-size: 20px; }
.pag-btn:hover:not(:disabled):not(.active) {
  background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-dark);
}
.pag-btn.active {
  background: var(--brand); border-color: var(--brand); color: #fff; cursor: default;
}
.pag-btn:disabled { opacity: .42; cursor: not-allowed; }
[dir="rtl"] .pag-btn .mi { transform: scaleX(-1); }
.pag-ellipsis { color: var(--ink-muted); padding-inline: 4px; user-select: none; }

/* ============================================================================
   Detail dialog
   ========================================================================= */
.detail-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22, 33, 43, .55);
  display: grid; place-items: center;
  padding: 20px;
  animation: fadeIn .16s ease both;
}

/* Inside an iframe that the host has sized to the full content height there is
   no inner viewport for `position: fixed` to anchor to - the dialog would open
   in the middle of a very tall frame, often far off screen. When the host tells
   us which slice is visible (see docs/embedding.md) the dialog is placed there
   instead. Without that message the rule above still applies. */
body.has-host-viewport .detail-overlay {
  position: absolute;
  inset-inline: 0;
  inset-block: auto;
  top: var(--host-view-top, 0px);
  height: var(--host-view-height, 100vh);
}
.detail-overlay[hidden] { display: none; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.detail-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(86vh, 900px);
  overflow: hidden auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: 26px 28px 28px;
  animation: dialogIn .2s ease both;
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-overlay, .detail-dialog { animation: none; }
}
.detail-close {
  position: absolute;
  inset-inline-end: 14px; top: 14px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--line-soft); color: var(--ink-soft);
  cursor: pointer;
}
.detail-close:hover { background: var(--brand-tint); color: var(--brand-dark); }

.detail-head { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 34px; }
.detail-icon {
  flex: none; width: 48px; height: 48px;
  border-radius: var(--radius);
  background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
}
.detail-icon .mi { font-size: 26px; }
.detail-title-en {
  font-size: 19px; font-weight: 700; overflow-wrap: anywhere;
  direction: ltr; text-align: left;        /* see .card-title-en above */
}
.detail-title-ar {
  font-family: var(--font-ar); font-size: 18px; color: var(--ink-soft);
  margin-block-start: 2px; overflow-wrap: anywhere;
  direction: rtl; text-align: right;
}
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px 20px; }

.detail-section { margin-block-start: 18px; }
.detail-section-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-block-end: 7px;
}
.detail-section-label .mi { font-size: 16px; color: var(--brand); }
.detail-text {
  font-size: 14.5px; line-height: 1.75; color: var(--ink-soft);
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--brand-tint-2);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  overflow-wrap: anywhere;
}
/* Each description block states the direction of the language it contains, so
   the English text stays left-aligned even while the page itself is right to
   left (and the Arabic text stays right-aligned in the English view). */
.detail-section[dir="ltr"] { direction: ltr; text-align: left; }
.detail-section[dir="rtl"] { direction: rtl; text-align: right; }
.detail-section[dir="rtl"] .detail-text,
.detail-text[dir="rtl"] { font-family: var(--font-ar); }
.detail-section[dir="rtl"] .detail-text { text-align: right; }
.detail-section[dir="ltr"] .detail-text { text-align: left; }
.detail-text.is-placeholder {
  color: var(--ink-muted); font-style: italic;
  border-inline-start-color: var(--line);
}
.detail-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-block-start: 24px; padding-block-start: 16px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-muted);
}
.detail-spinner { padding: 40px; text-align: center; color: var(--ink-muted); }

/* ============================================================================
   Buttons and forms (shared with the editor screens)
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn .mi { font-size: 18px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink-soft); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-quiet { background: none; border-color: var(--line); color: var(--ink-soft); }
.btn-quiet:hover { border-color: var(--brand); color: var(--brand); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: #f2c4c1; }
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 24px;
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-field.is-wide { grid-column: 1 / -1; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="file"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 10px 12px;
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.form-field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(73, 88, 110, .20);
}
.form-field .hint { font-size: 12.5px; color: var(--ink-muted); }
.form-field.has-error input, .form-field.has-error textarea, .form-field.has-error select {
  border-color: var(--danger);
}
.field-error { font-size: 12.5px; color: var(--danger); font-weight: 500; }
.form-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-block-start: 22px; padding-block-start: 18px;
  border-block-start: 1px solid var(--line-soft);
}
.form-actions .spacer { flex: 1; }
[dir="rtl"] textarea, [dir="rtl"] input { text-align: start; }
.rtl-field { direction: rtl; text-align: right; font-family: var(--font-ar); }

/* ============================================================================
   Editor screens
   ========================================================================= */
.admin-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-block-end: 22px; padding-block-end: 16px;
  border-block-end: 2px solid var(--brand-tint-2);
}
.admin-head h1 { font-size: clamp(20px, 2.2vw, 25px); }
.admin-head .subtitle { color: var(--ink-muted); font-size: 14px; margin-block-start: 4px; }
.admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-block-end: 24px;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-1);
}
.stat-card .value { font-size: 26px; font-weight: 700; color: var(--brand-dark); line-height: 1.2; }
.stat-card .label { font-size: 13px; color: var(--ink-muted); margin-block-start: 2px; }

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  margin-block-end: 20px; overflow: hidden;
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px; border-block-end: 1px solid var(--line);
  background: var(--canvas);
}
.panel-head h2 { font-size: 15px; }
.panel-body { padding: 18px; }
.panel-body.is-flush { padding: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td {
  padding: 11px 14px; text-align: start; vertical-align: top;
  border-block-end: 1px solid var(--line-soft);
}
.data-table th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); background: var(--canvas); font-weight: 700;
  position: sticky; top: 0;
}
.data-table tbody tr:hover { background: var(--canvas); }
.data-table tr.is-retired td { opacity: .6; }
.data-table .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.table-scroll { overflow-x: auto; }
.mono { font-family: var(--font-mono); font-size: 13px; }
.ar-text { font-family: var(--font-ar); direction: rtl; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.tag-new     { background: var(--ok-bg); color: var(--ok); }
.tag-changed { background: var(--warn-bg); color: var(--warn); }
.tag-missing { background: var(--danger-bg); color: var(--danger); }
.tag-neutral { background: var(--line-soft); color: var(--ink-muted); }
.tag-info    { background: var(--brand-tint); color: var(--brand-dark); }

.diff-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.diff-list li { margin-block-end: 3px; }
.diff-field { font-weight: 600; color: var(--ink-soft); }
.diff-from { color: var(--danger); text-decoration: line-through; }
.diff-to { color: var(--ok); }

.callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid var(--brand-tint-2); background: var(--brand-tint);
  color: var(--brand-dark); font-size: 14px;
  margin-block-end: 18px;
}
.callout.is-warning { background: var(--warn-bg); border-color: #ecd6a8; color: var(--warn); }
.callout.is-danger { background: var(--danger-bg); border-color: #f2c4c1; color: var(--danger); }
.callout .mi { font-size: 20px; flex: none; }
.callout h3 { font-size: 14px; margin-block-end: 3px; color: inherit; }

.report-view {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 26px; box-shadow: var(--shadow-1);
}
.report-view h1 { font-size: 22px; margin-block-end: 10px; }
.report-view h2 { font-size: 17px; margin-block: 26px 10px; padding-block-end: 6px; border-block-end: 1px solid var(--line); }
.report-view h3 { font-size: 14.5px; margin-block: 18px 8px; color: var(--brand-dark); }
.report-view p, .report-view li { font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.report-view ul { padding-inline-start: 20px; }
.report-view table { width: 100%; border-collapse: collapse; margin-block: 10px 18px; font-size: 13.5px; }
.report-view th, .report-view td { padding: 8px 12px; border: 1px solid var(--line); text-align: start; }
.report-view th { background: var(--canvas); font-weight: 700; }
.report-view code { font-family: var(--font-mono); font-size: 12.5px; background: var(--line-soft); padding: 1px 5px; border-radius: 4px; }
.report-view blockquote {
  margin: 14px 0; padding: 12px 16px;
  background: var(--warn-bg); border-inline-start: 3px solid var(--warn);
  border-radius: var(--radius-sm); color: var(--warn); font-size: 14px;
}

/* --- Icon picker ---------------------------------------------------------- */
.icon-field { display: flex; gap: 10px; align-items: center; }
.icon-preview {
  flex: none; width: 44px; height: 44px;
  border-radius: var(--radius); background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
}
.icon-preview .mi { font-size: 24px; font-variation-settings: "FILL" 1; }

.picker-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(22, 33, 43, .55);
  display: grid; place-items: center; padding: 20px;
}
.picker-overlay[hidden] { display: none; }
.picker-dialog {
  width: min(760px, 100%); max-height: min(84vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.picker-head { padding: 16px 20px; border-block-end: 1px solid var(--line); }
.picker-head h2 { font-size: 16px; margin-block-end: 10px; }
.picker-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.picker-controls .search-wrapper { flex: 1 1 220px; }
.picker-controls select { flex: 0 1 200px; }
.picker-grid {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
  align-content: start;
}
.picker-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; font: inherit;
  color: var(--ink-soft);
}
.picker-item .mi { font-size: 26px; font-variation-settings: "FILL" 1; }
.picker-item span:last-child {
  font-size: 10.5px; text-align: center; line-height: 1.25;
  overflow-wrap: anywhere; color: var(--ink-muted);
}
.picker-item:hover { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-dark); }
.picker-item.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; }
.picker-item.is-selected span:last-child { color: rgba(255,255,255,.85); }
.picker-pages {
  display: flex; align-items: center; justify-content: center;
  gap: 5px; flex-wrap: wrap;
  padding: 10px 14px;
  border-block-start: 1px solid var(--line);
  background: var(--canvas);
}
.picker-pages:empty { display: none; }
.picker-pages .pag-btn { min-width: 32px; height: 32px; font-size: 13px; }

.picker-foot {
  padding: 12px 20px; border-block-start: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--ink-muted);
}

/* --- Sign-in screens ----------------------------------------------------- */
.auth-shell { max-width: 520px; margin: 8vh auto; padding: 0 24px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 32px; text-align: center;
}
.auth-card .auth-mark {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--brand-tint); color: var(--brand);
  display: grid; place-items: center;
}
.auth-card .auth-mark .mi { font-size: 30px; font-variation-settings: "FILL" 1; }
.auth-card h1 { font-size: 21px; margin-block-end: 8px; }
.auth-card p { color: var(--ink-soft); font-size: 14.5px; margin-block-end: 8px; }
.auth-card .auth-email {
  display: inline-block; font-family: var(--font-mono); font-size: 13px;
  background: var(--line-soft); padding: 4px 10px; border-radius: 6px;
  margin-block: 6px 14px; overflow-wrap: anywhere;
}
.auth-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-block-start: 20px; }
.auth-card .form-field { text-align: start; margin-block-end: 14px; }
.auth-card.is-denied .auth-mark { background: var(--danger-bg); color: var(--danger); }

@media (max-width: 640px) {
  .page-body { padding: 20px 16px 44px; }
  .site-header-inner { padding: 10px 16px; }
  .flash-stack { padding-inline: 16px; }
  .filter-panel { padding: 16px; }
  .cards-grid { grid-template-columns: 1fr; }
  .detail-dialog { padding: 22px 18px; }
  .form-card { padding: 18px; }
}