/* ==========================================================================
   Homepage — the threshold of the Mustansiriya
   Only index.html loads this file. Tokens come from theme.css.
   ========================================================================== */

.hx { display: block; }
.hx > section { margin: 0; }
.hx p { max-width: none; }
.hx-wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.hx [data-num] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */
.hx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block-start: clamp(44px, 7vw, 104px);
  background:
    radial-gradient(70% 90% at 22% 38%, rgba(18, 63, 120, 0.55) 0%, transparent 62%),
    radial-gradient(40% 50% at 30% 42%, rgba(212, 175, 55, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--primary-dark) 0%, var(--lapis-950) 100%);
}
html[dir="ltr"] .hx-hero {
  background:
    radial-gradient(70% 90% at 78% 38%, rgba(18, 63, 120, 0.55) 0%, transparent 62%),
    radial-gradient(40% 50% at 70% 42%, rgba(212, 175, 55, 0.10) 0%, transparent 70%),
    linear-gradient(180deg, var(--primary-dark) 0%, var(--lapis-950) 100%);
}

/* The lattice: one authored motion, drawn outward from the tablet. */
.hx-lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  fill: none;
  stroke: var(--accent-gold);
  stroke-width: 1;
  pointer-events: none;
}
.hx-star path {
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-opacity: 0.24;
  transition: stroke-dashoffset 1600ms var(--ease-out) var(--d, 0ms);
}
.hx-star path.hx-link { stroke-opacity: 0.14; }
.hx-star.is-near path { stroke-opacity: 0.5; }
.hx-star.is-near path.hx-link { stroke-opacity: 0.32; }
.hx-lattice.is-drawn .hx-star path { stroke-dashoffset: 0; }

.hx-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to left, rgba(0, 18, 41, 0.86) 0%, rgba(0, 18, 41, 0.55) 28%, transparent 52%);
}
html[dir="ltr"] .hx-hero-shade {
  background: linear-gradient(to right, rgba(0, 18, 41, 0.86) 0%, rgba(0, 18, 41, 0.55) 28%, transparent 52%);
}

.hx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-block-end: clamp(44px, 6vw, 88px);
}

.hx-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.1rem);
  line-height: 1.18;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.hx-title span { display: block; }
.hx-title-gilt { color: var(--accent-gold-bright); }

.hx-lede {
  margin: 22px 0 30px;
  max-width: 44ch !important;
  color: #c9d5e6;
  font-size: clamp(1.02rem, 0.94rem + 0.36vw, 1.24rem);
  line-height: 1.95;
}

.hx-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 640px;
  padding: 7px;
  padding-inline-start: 18px;
  background: #fbf9f4;
  border: 1px solid rgba(212, 175, 55, 0.7);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 30px -18px rgba(0, 0, 0, 0.7);
  transition: border-color 220ms var(--ease-out), outline-color 220ms var(--ease-out);
  outline: 6px solid transparent;
}
.hx-search:focus-within {
  border-color: var(--accent-gold);
  outline-color: rgba(212, 175, 55, 0.22);
}
.hx-search-icon { color: var(--primary-navy); font-size: 1.25rem; }
.hx-search #mainSearchInput {
  flex: 1;
  min-width: 0;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: #0d1b2e;
  font-size: 1.08rem;
  padding: 0 4px;
}
.hx-search #mainSearchInput::placeholder { color: #6b7385; }
.hx-search #mainSearchInput::-webkit-search-cancel-button { display: none; }
.hx-search-btn { min-height: 50px; padding-inline: 24px; font-size: 1rem; white-space: nowrap; }

.hx-suggest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.hx-suggest-label { color: #97a9c2; font-size: 0.86rem; font-weight: 500; }
.hx .hero-tag {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  color: #dbe4f0;
  font-weight: 500;
  padding: 6px 13px;
  min-height: 36px;
}
.hx .hero-tag:hover,
.hx .hero-tag:focus-visible {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: var(--primary-dark);
}

/* Search results open right under the field they answer. */
.hx-results { max-width: 640px; }
.hx-results:not(:empty) { margin-top: 18px; margin-bottom: 0; }
.hx-results-card {
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hx-results-status { padding: 16px 18px; color: var(--text-muted); }
.hx-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  background: var(--bg-sunk);
  border-bottom: 1px solid var(--border-color);
  color: var(--heading);
  font-weight: 500;
}
html[dir="rtl"] .hx-results-head { padding: 10px 18px 10px 12px; }
.hx-results-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hx-results-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--heading); }
.hx-results-list { max-height: min(380px, 52vh); overflow-y: auto; }
.hx-hit {
  display: block;
  width: 100%;
  text-align: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  padding: 13px 18px;
  cursor: pointer;
  color: inherit;
  transition: background-color 140ms var(--ease-out);
}
.hx-hit:last-child { border-bottom: 0; }
.hx-hit:hover, .hx-hit:focus-visible { background: rgba(212, 175, 55, 0.08); outline-offset: -2px; }
.hx-hit-title { display: block; font-weight: 600; color: var(--heading); }
.hx-hit-num { color: var(--gold-ink); font-weight: 600; margin-inline-start: 6px; }
.hx-hit-snippet { display: block; color: var(--text-muted); font-size: 0.9rem; line-height: 1.85; margin-top: 2px; }

.hx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: 30px;
}
.hx-link-primary,
.hx-link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
}
.hx-link-primary {
  color: var(--accent-gold-bright);
  font-size: 1.06rem;
  box-shadow: inset 0 -1px 0 rgba(233, 196, 106, 0.5);
}
.hx-link-primary:hover { box-shadow: inset 0 -2px 0 var(--accent-gold-bright); }
.hx-link-quiet { color: #b9c6d9; font-weight: 500; }
.hx-link-quiet:hover { color: #fff; }
.hx-link-quiet i { color: var(--accent-gold); }
.hx-arrow { transition: transform 220ms var(--ease-out); }
.hx-link-primary:hover .hx-arrow { transform: translateX(-5px); }
html[dir="ltr"] .hx .fa-arrow-left { transform: scaleX(-1); }
html[dir="ltr"] .hx-link-primary:hover .hx-arrow { transform: scaleX(-1) translateX(-5px); }

/* --- the inscription tablet: an iwan-headed plate --- */
.hx-tablet {
  margin: 0;
  position: relative;
  filter: drop-shadow(0 38px 50px rgba(0, 0, 0, 0.55));
}
.hx-tablet-frame {
  --arch: 92px;
  position: relative;
  padding: calc(var(--arch) + 10px) clamp(22px, 3vw, 34px) 22px;
  background: #f8f2e4;
  color: #0d1b2e;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38C0 20 36 8 50 0C64 8 100 20 100 38V70Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38C0 20 36 8 50 0C64 8 100 20 100 38V70Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
}
/* inner gilt rule following the arch */
.hx-tablet-frame::before {
  content: '';
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M.5 70V38.5C.5 20.5 36.2 8.6 50 1.1C63.8 8.6 99.5 20.5 99.5 38.5V70' fill='none' stroke='%23b8952b' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% calc(var(--arch) - 10px) no-repeat,
    linear-gradient(#b8952b, #b8952b) left calc(var(--arch) - 10px) / 1.2px calc(100% - var(--arch) + 10px) no-repeat,
    linear-gradient(#b8952b, #b8952b) right calc(var(--arch) - 10px) / 1.2px calc(100% - var(--arch) + 10px) no-repeat,
    linear-gradient(#b8952b, #b8952b) bottom / 100% 1.2px no-repeat;
  opacity: 0.7;
}
/* keystone star at the apex */
.hx-tablet-frame::after {
  content: '';
  position: absolute;
  top: 32px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8841f' stroke-width='1.4'%3E%3Crect x='6' y='6' width='12' height='12'/%3E%3Crect x='6' y='6' width='12' height='12' transform='rotate(45 12 12)'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"] .hx-tablet-frame::after { translate: 50% 0; }

.hx-tablet-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(122, 92, 14, 0.24);
}
.hx-cells { display: inline-flex; gap: 3px; direction: ltr; flex: none; }
.hx-cell {
  display: grid;
  place-items: center;
  inline-size: 1.55rem;
  block-size: 2.1rem;
  background: var(--primary-dark);
  color: var(--accent-gold-bright);
  border-radius: 2px;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hx-cell.is-ghost { color: rgba(233, 196, 106, 0.1); }
.hx-tablet-meta { display: flex; flex-direction: column; min-width: 0; }
.hx-tablet-article { font-weight: 600; font-size: 1.08rem; color: var(--primary-dark); line-height: 1.4; }
.hx-tablet-law { font-size: 0.8rem; color: #5d5344; line-height: 1.5; }

.hx-tablet-text {
  position: relative;
  margin: 0;
  min-height: 8.2em;
  font-size: clamp(1.1rem, 0.98rem + 0.42vw, 1.36rem);
  line-height: 1.95;
  color: #0d1b2e;
  font-weight: 400;
}
.hx-tablet-head,
.hx-tablet-text {
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.hx-tablet.is-turning .hx-tablet-head,
.hx-tablet.is-turning .hx-tablet-text {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(3px);
}

.hx-tablet-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(122, 92, 14, 0.3);
}
.hx-tablet-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold-ink);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.hx-tablet-open:hover { color: var(--primary-dark); }
html[data-theme="dark"] .hx-tablet-open { color: #7a5c0e; }
.hx-tablet-pager { display: inline-flex; align-items: center; gap: 4px; }
.hx-pager-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(122, 92, 14, 0.3);
  background: transparent;
  color: var(--primary-dark);
  border-radius: 2px;
  cursor: pointer;
}
.hx-pager-btn:hover { background: var(--primary-dark); color: var(--accent-gold-bright); border-color: var(--primary-dark); }
.hx-pager-dots { display: inline-flex; gap: 2px; padding-inline: 4px; }
.hx-dot {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.hx-dot::before {
  content: '';
  position: absolute;
  inset: 8px;
  transform: rotate(45deg);
  border: 1px solid #a8841f;
  transition: background-color 200ms var(--ease-out);
}
.hx-dot[aria-current="true"]::before { background: #a8841f; }
.hx-tablet-note {
  margin: 20px 0 0;
  text-align: center;
  color: #8193ad;
  font-size: 0.8rem;
}

/* --- inscription band of stored laws: Kufic names between gilt hairlines --- */
.hx-codex {
  position: relative;
  background: rgba(0, 8, 20, 0.6);
  border-top: 1px solid var(--gilt-line);
}
.hx-codex::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 4px;
  height: 1px;
  background: rgba(212, 175, 55, 0.18);
}
.hx-codex-inner {
  display: flex;
  align-items: center;
  gap: 14px 32px;
  padding-block: 18px;
}
.hx-codex-sum { margin: 0; color: #c9d5e6; white-space: nowrap; font-size: 0.92rem; }
.hx-codex-sum strong { color: var(--accent-gold-bright); font-weight: 600; font-size: 1.05rem; }
.hx-codex-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 4px;
}
.hx-codex-list li { display: flex; align-items: center; }
.hx-codex-list li[hidden] { display: none; }
.hx-codex-list li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-inline: 12px;
  background: var(--accent-gold);
  transform: rotate(45deg);
  opacity: 0.7;
}
.hx-codex-list a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 36px;
  padding-block: 6px;
  color: #e6ecf4;
  font-family: var(--font-display);
  font-size: 1.02rem;
  white-space: nowrap;
  transition: color 160ms var(--ease-out);
}
.hx-codex-list a span { font-family: var(--font-ibm); color: var(--accent-gold); font-size: 0.76rem; }
.hx-codex-list a:hover { color: var(--accent-gold-bright); }

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */
.hx-section { padding-block: clamp(64px, 8vw, 116px); }
.hx-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 4vw, 56px);
  text-align: center;
}
.hx-head h2 {
  margin: 0;
  color: var(--heading);
  font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.85rem);
  line-height: 1.32;
}
.hx-head p { margin: 12px auto 0; color: var(--text-muted); font-size: 1.05rem; line-height: 1.9; max-width: 56ch; }
.hx-head-start { text-align: start; margin-inline: 0; }
.hx-head-start p { margin-inline: 0; }
.hx-head-row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  text-align: start;
}
.hx-head-row p { margin-inline: 0; }

/* --------------------------------------------------------------------------
   2. The path: three arches
   -------------------------------------------------------------------------- */
.hx-arches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.hx-arch {
  --arch: 118px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 116px clamp(22px, 2.4vw, 34px) 32px;
  background: var(--bg-card);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38C0 20 36 8 50 0C64 8 100 20 100 38V70Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M0 70V38C0 20 36 8 50 0C64 8 100 20 100 38V70Z'/%3E%3C/svg%3E") top / 100% var(--arch) no-repeat,
    linear-gradient(#000, #000) bottom / 100% calc(100% - var(--arch) + 1px) no-repeat;
  transition: transform 260ms var(--ease-out);
}
/* inner gilt rule following the pointed arch */
.hx-arch::before {
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M.5 70V38.5C.5 20.5 36.2 8.6 50 1.1C63.8 8.6 99.5 20.5 99.5 38.5V70' fill='none' stroke='%23c9a43a' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top / 100% calc(var(--arch) - 9px) no-repeat,
    linear-gradient(#c9a43a, #c9a43a) left calc(var(--arch) - 9px) / 1.2px calc(100% - var(--arch) + 9px) no-repeat,
    linear-gradient(#c9a43a, #c9a43a) right calc(var(--arch) - 9px) / 1.2px calc(100% - var(--arch) + 9px) no-repeat,
    linear-gradient(#c9a43a, #c9a43a) bottom / 100% 1.2px no-repeat;
  opacity: 0.6;
}
.hx-arch:hover { transform: translateY(-4px); }
.hx-arch-num {
  position: absolute;
  top: 46px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--gold-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23c9a43a' stroke-width='1.2'%3E%3Crect x='11' y='11' width='32' height='32'/%3E%3Crect x='11' y='11' width='32' height='32' transform='rotate(45 27 27)'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"] .hx-arch-num { translate: 50% 0; }
.hx-arch h3 { margin: 0 0 10px; font-size: 1.22rem; color: var(--heading); }
.hx-arch p { margin: 0; color: var(--text-muted); line-height: 1.9; font-size: 0.96rem; }
.hx-arch-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gold-ink);
  font-weight: 600;
}
.hx-arch-link i { transition: transform 220ms var(--ease-out); }
.hx-arch-link:hover i { transform: translateX(-4px); }

/* --------------------------------------------------------------------------
   3. Verification
   -------------------------------------------------------------------------- */
.hx-verify {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(64px, 8vw, 104px);
  background:
    var(--girih-gold) repeat center / 64px 64px,
    var(--primary-dark);
  background-blend-mode: soft-light, normal;
}
.hx-verify::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 18, 41, 0.86), rgba(0, 10, 26, 0.94));
}
.hx-verify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hx-verify-copy h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.85rem, 1.25rem + 2.1vw, 2.7rem);
  line-height: 1.35;
}
.hx-verify-copy p { margin: 16px 0 0; color: #c3cfdf; font-size: 1.05rem; line-height: 1.95; max-width: 50ch; }

.hx-uid {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--gilt-line);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}
.hx-uid-label { display: block; color: #dbe4f0; font-weight: 600; font-size: 0.92rem; margin-bottom: 12px; }
.hx-uid-field { position: relative; }
.hx-uid-field input {
  width: 100%;
  block-size: 3.4rem;
  padding-block: 0;
  padding-inline: 2.9rem 14px;
  font: inherit;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(0, 8, 20, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 2px;
  transition: border-color 160ms var(--ease-out);
}
.hx-uid-field input::placeholder { color: rgba(233, 196, 106, 0.38); }
.hx-uid-field input:focus { outline: 2px solid var(--accent-gold); outline-offset: 3px; border-color: var(--accent-gold-bright); }
.hx-uid-icon { position: absolute; inset-inline-start: 1rem; top: 50%; transform: translateY(-50%); color: var(--accent-gold); font-size: 1.1rem; pointer-events: none; }
.hx-uid-hint { margin: 12px 0 0; color: #97a9c2; font-size: 0.84rem; }
.hx-uid-btn { width: 100%; min-height: 50px; margin-top: 18px; font-size: 1rem; }

/* --------------------------------------------------------------------------
   4. Analyzer
   -------------------------------------------------------------------------- */
.hx-analyzer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.hx-analyzer .hx-head { margin-bottom: 28px; }
.hx-stages { list-style: none; margin: 0; padding: 0; }
.hx-stages li {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 12px;
}
.hx-stages li:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: 22.5px;
  top: 60px;
  bottom: -10px;
  width: 1px;
  background: linear-gradient(var(--border-strong), transparent);
}
.hx-stages li > i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--accent-gold-bright);
  background: var(--primary-dark);
  border-radius: var(--radius-sm);
  -webkit-mask: none;
  mask: none;
  position: relative;
}
/* the icon glyph itself rides a pseudo so the tile keeps its lapis fill */
.hx-stages li > i::after {
  content: '';
  position: absolute;
  inset: 12px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.hx-stages strong { display: block; color: var(--heading); font-weight: 600; font-size: 1.04rem; line-height: 1.6; }
.hx-stages span { display: block; color: var(--text-muted); font-size: 0.93rem; line-height: 1.8; }
.hx-analyzer-cta { margin-top: 26px; min-height: 48px; padding-inline: 22px; }

.hx-sheet {
  position: relative;
  padding: 40px clamp(22px, 3vw, 34px) 30px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 4px double var(--accent-gold);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.hx-sheet-tag {
  position: absolute;
  top: -14px;
  inset-inline-start: 24px;
  padding: 3px 11px;
  background: var(--primary-dark);
  color: var(--accent-gold-bright);
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 2px;
}
.hx-sheet dl { margin: 0; }
.hx-sheet dl > div { padding-block: 14px; border-bottom: 1px dashed var(--border-color); }
.hx-sheet dl > div:last-child { border-bottom: 0; }
.hx-sheet dt { color: var(--gold-ink); font-size: 0.8rem; font-weight: 600; }
.hx-sheet dd { margin: 4px 0 0; color: var(--text-main); line-height: 1.85; }
.hx-fact, .hx-spec {
  display: inline-block;
  margin: 4px 0 0;
  margin-inline-end: 6px;
  padding: 3px 10px;
  border-radius: 2px;
  font-size: 0.86rem;
  background: var(--bg-sunk);
  color: var(--text-main);
}
.hx-spec { background: var(--primary-dark); color: var(--accent-gold-bright); }
.hx-sheet-seal {
  position: absolute;
  inset-block-end: 18px;
  inset-inline-end: 22px;
  font-size: 3.4rem;
  color: rgba(212, 175, 55, 0.3);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   5. Library
   -------------------------------------------------------------------------- */
.hx-library { background: var(--bg-sunk); border-block: 1px solid var(--border-color); }
.hx .law-grid.hx-law-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  margin: 0;
  border-top: 1px solid var(--border-strong);
}
.hx .hx-law {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 6px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out);
}
.hx .hx-law:hover { background: rgba(212, 175, 55, 0.08); }
.hx-law-cat { color: var(--gold-ink); font-size: 0.8rem; font-weight: 600; }
.hx-law-title { color: var(--heading); font-weight: 600; line-height: 1.7; }
.hx-law-count { color: var(--text-muted); font-size: 0.84rem; white-space: nowrap; }
.hx-law-count strong { color: var(--heading); font-weight: 600; font-size: 1.02rem; margin-inline-end: 2px; }
.hx-law-go { color: var(--text-muted); transition: transform 200ms var(--ease-out), color 200ms var(--ease-out); }
.hx .hx-law:hover .hx-law-go { color: var(--gold-ink); transform: translateX(-4px); }
.hx-law-more { margin-top: 18px; width: 100%; }
.hx-law-more[hidden] { display: none; }
.hx #publicInterestGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 16px;
  margin: 0;
}
.hx .hx-post { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; height: 100%; }
.hx-law-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hx-law-year { color: var(--text-muted); font-size: 0.82rem; }
.hx .hx-post .law-card-title { font-size: 1.06rem; font-weight: 600; line-height: 1.7; color: var(--heading); margin: 4px 0 0; }
.hx .hx-post .law-card-summary { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.85; }

/* platform posts as a dateline list, not a card grid */
.hx-news-grid { border-top: 1px solid var(--border-strong); }
.hx-dispatch {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px 28px;
  align-items: baseline;
  padding: 20px 4px;
  border-bottom: 1px solid var(--border-color);
}
.hx-dispatch-meta { display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); font-size: 0.84rem; }
.hx-dispatch-cat { color: var(--gold-ink); font-weight: 600; }
.hx-dispatch-body h3 { margin: 0; font-size: 1.08rem; color: var(--heading); line-height: 1.6; }
.hx-dispatch-body p { margin: 4px 0 0; color: var(--text-muted); line-height: 1.85; max-width: 72ch; }
.hx-dispatch .hx-post-foot { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   6. Doors for professionals
   -------------------------------------------------------------------------- */
.hx-door-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--border-color);
}
.hx-door-list li { border-bottom: 1px solid var(--border-color); }
.hx-door {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px 6px;
  color: inherit;
  border-radius: var(--radius-sm);
  transition: background-color 200ms var(--ease-out);
}
.hx-door:hover { background: rgba(212, 175, 55, 0.07); }
.hx-door-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--primary-dark);
  color: var(--accent-gold-bright);
  border-radius: var(--radius-sm);
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.hx-door-body strong { display: block; color: var(--heading); font-weight: 600; font-size: 1.06rem; line-height: 1.6; }
.hx-door-body > span { display: block; color: var(--text-muted); font-size: 0.92rem; line-height: 1.8; margin-top: 2px; }
.hx-door-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-ink); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.hx-door-cta i { transition: transform 220ms var(--ease-out); }
.hx-door:hover .hx-door-cta i { transform: translateX(-5px); }
.hx-door-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 32px 0 0;
}
.hx-door-more a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text-muted); font-weight: 500; }
.hx-door-more a:hover { color: var(--heading); }
.hx-door-more i { color: var(--accent-gold-dark); }

/* --------------------------------------------------------------------------
   7. Posts
   -------------------------------------------------------------------------- */
.hx-news { padding-block-end: clamp(40px, 5vw, 72px); }
.hx-public { padding-block-start: 0; }
.hx-public[hidden] { display: none; }
.hx-post-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hx-post-foot a:not(.btn) { color: var(--gold-ink); font-size: 0.84rem; font-weight: 600; }
.hx-post-gov { margin: 0; color: var(--text-muted); font-size: 0.86rem; }
.hx-trust { font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 2px; }
.hx-trust.is-official { color: #166534; background: #dcfce7; }
.hx-trust.is-verified { color: #115e59; background: #ccfbf1; }
.hx-trust.is-lawyer { color: #854d0e; background: #fef3c7; }
.hx-trust.is-editorial { color: #44403c; background: #ece7dd; }
html[data-theme="dark"] .hx-trust.is-official { color: #86efac; background: rgba(34, 197, 94, 0.14); }
html[data-theme="dark"] .hx-trust.is-verified { color: #5eead4; background: rgba(20, 184, 166, 0.14); }
html[data-theme="dark"] .hx-trust.is-lawyer { color: #fcd34d; background: rgba(245, 158, 11, 0.14); }
html[data-theme="dark"] .hx-trust.is-editorial { color: #d6d3d1; background: rgba(214, 211, 209, 0.1); }

/* --------------------------------------------------------------------------
   8. Close
   -------------------------------------------------------------------------- */
.hx-close {
  position: relative;
  isolation: isolate;
  text-align: center;
  color: #fff;
  padding-block: clamp(72px, 9vw, 128px);
  background:
    var(--girih-gold) repeat center / 96px 96px,
    var(--primary-dark);
  background-blend-mode: soft-light, normal;
}
.hx-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 50% 50%, rgba(0, 18, 41, 0.72), rgba(0, 10, 26, 0.96));
}
.hx-close h2 {
  margin: 0 auto;
  max-width: 18ch;
  color: #fff;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.3;
}
.hx-close-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hx-close-actions .btn { min-height: 50px; padding-inline: 24px; font-size: 1rem; }
.hx-btn-line { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); }
.hx-btn-line:hover { border-color: var(--accent-gold); color: var(--accent-gold-bright); }

/* --------------------------------------------------------------------------
   Footer (homepage layout)
   -------------------------------------------------------------------------- */
.hx-footer {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
}
.hx-footer p { color: #9fb0c8; font-size: 0.9rem; line-height: 1.9; margin: 0 0 6px; }
.hx-footer a { color: #c3cfdf; display: inline-block; padding-block: 3px; }
.hx-footer h3 { margin: 0 0 14px; font-size: 1rem !important; font-family: var(--font-ibm); font-weight: 600; }
.hx-footer-name { color: #fff; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.08em; }
.hx-footer-domain { color: var(--accent-gold) !important; font-size: 0.84rem !important; margin-top: 10px !important; }

/* --------------------------------------------------------------------------
   Law reader (modal)
   -------------------------------------------------------------------------- */
.kb-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-color);
  padding-inline-end: 40px;
}
.kb-switch {
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  cursor: pointer;
}
.kb-switch:hover { border-color: var(--border-strong); }
.kb-switch.is-current { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--accent-gold-bright); }
.kb-head h2 { margin: 10px 0 4px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); color: var(--heading); line-height: 1.4; }
.kb-meta { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.kb-summary { margin: 8px 0 0; color: var(--text-main); line-height: 1.9; }
.kb-warn { margin: 8px 0 0; color: #b91c1c; font-size: 0.86rem; }
.kb-source { margin: 8px 0 0; font-size: 0.86rem; }
.kb-source a { color: var(--gold-ink); font-weight: 600; }
.kb-search { position: relative; margin: 18px 0; }
.kb-search > i { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--text-muted); }
.kb-search .form-control { padding-inline-start: 42px; min-height: 46px; width: 100%; }
.kb-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 1rem;
  color: var(--heading);
}
.kb-count { color: var(--text-muted); font-size: 0.84rem; font-weight: 400; }
.kb-list { display: flex; flex-direction: column; gap: 10px; }
.kb-article {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.kb-article h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-size: 0.98rem; color: var(--heading); }
.kb-num {
  min-width: 2.6em;
  padding: 2px 7px;
  text-align: center;
  background: var(--primary-dark);
  color: var(--accent-gold-bright);
  border-radius: 2px;
  font-size: 0.8rem;
  font-weight: 600;
}
.kb-copy {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}
.kb-copy:hover { color: var(--heading); border-color: var(--border-strong); }
.kb-article .law-article-body { color: var(--text-main); font-size: 0.97rem; line-height: 2; white-space: pre-wrap; }
.kb-empty, .hx-loading { padding: 28px; text-align: center; color: var(--text-muted); background: var(--bg-sunk); border-radius: var(--radius-sm); }

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */
html[data-theme="dark"] .hx-tablet-frame { background: #f1e9d6; }
html[data-theme="dark"] .hx-library { background: var(--bg-sunk); }
html[data-theme="dark"] .hx-arch { background: var(--bg-card); }
html[data-theme="dark"] .hx-results-close:hover { background: rgba(255, 255, 255, 0.06); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hx-codex-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 980px) {
  .hx-hero-grid,
  .hx-verify-grid,
  .hx-analyzer-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-tablet { max-width: 560px; width: 100%; justify-self: center; }
  .hx-hero-shade { background: linear-gradient(180deg, rgba(0, 18, 41, 0.9) 0%, rgba(0, 18, 41, 0.7) 45%, rgba(0, 18, 41, 0.35) 100%) !important; }
  .hx-door-list { grid-template-columns: minmax(0, 1fr); }
  .hx-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .hx-arches { grid-template-columns: minmax(0, 1fr); }
  .hx-arch { padding-top: 112px; }
  .hx .law-grid.hx-law-grid { grid-template-columns: minmax(0, 1fr); }
  .hx .law-grid.hx-law-grid:not(.is-open) .hx-law:nth-child(n+7) { display: none; }
  .hx-dispatch { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hx-dispatch-meta { flex-direction: row; gap: 10px; }
  .hx-codex-list { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding-bottom: 2px; padding-inline-end: 40px;
    -webkit-mask: linear-gradient(to left, #000 80%, transparent); mask: linear-gradient(to left, #000 80%, transparent); }
  .hx-codex-list::-webkit-scrollbar { display: none; }
  .hx-codex-inner { gap: 10px; }
  .hx-codex { overflow: hidden; }
  .hx-door { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; padding: 18px 2px; }
  .hx-door-icon { width: 46px; height: 46px; font-size: 1.15rem; }
  .hx-door-cta { grid-column: 2; }
  .hx-head-row .btn { width: 100%; }
}

@media (max-width: 520px) {
  .hx-hero { padding-block-start: 32px; }
  .hx-suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px 48px;
    -webkit-mask: linear-gradient(to left, #000 78%, transparent); mask: linear-gradient(to left, #000 78%, transparent); }
  .hx-suggest::-webkit-scrollbar { display: none; }
  .hx .hero-tag { flex: none; }
  .hx .hx-law { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 2px; }
  .hx-law-go { display: none; }
  .hx-search { flex-wrap: wrap; padding-inline-start: 14px; }
  .hx-search #mainSearchInput { flex-basis: calc(100% - 40px); }
  .hx-search-btn { flex: 1 1 100%; }
  .hx-tablet-frame { --arch: 48px; }
  .hx-tablet-text { min-height: 9.8em; }
  .hx-footer { grid-template-columns: minmax(0, 1fr); }
  .hx-close-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-star path { transition: none; stroke-dashoffset: 0; }
  .hx-tablet.is-turning .hx-tablet-head,
  .hx-tablet.is-turning .hx-tablet-text { opacity: 1; transform: none; filter: none; }
}

/* English: Latin runs in the text face, tighter and a size down from the Arabic. */
html[lang="en"] .hx-title { font-family: var(--font-ibm); font-size: clamp(2.3rem, 1.3rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -0.02em; }
html[dir="ltr"] .hx-suggest, html[dir="ltr"] .hx-codex-list { -webkit-mask: none; mask: none; }

/* The fold only exists on phones (see the 720px block); desktop lists every law. */
@media (min-width: 721px) { .hx-law-more { display: none !important; } }

.hx-codex-sum[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Platform services (المستفيدون من المنصة)
   -------------------------------------------------------------------------- */
.hx-svc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}
.hx-svc {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  height: 100%;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.hx-svc:hover, .hx-svc:focus-visible { border-color: var(--accent-gold); background: rgba(212, 175, 55, 0.06); }
.hx-svc-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--primary-dark);
  color: var(--accent-gold-bright);
  border-radius: var(--radius-sm);
  font-size: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);
}
.hx-svc-body strong { display: block; color: var(--heading); font-size: 1rem; }
.hx-svc-body span { display: block; color: var(--text-muted); font-size: .86rem; line-height: 1.7; margin-top: 2px; }
.hx-svc-tool { border-style: dashed; border-color: rgba(212, 175, 55, 0.55); }
.hx-services .hx-door-more { margin-top: 18px; }