/* ═══ HELHEIMRS — shell chrome that only shell.js and core.js create ═══
   The header's quiet tools and its menu, the unread badge, the «به‌زودی» tag on
   a closed section, the footer lockup and credits list, and the parts of a toast
   core.js adds. Loaded after layout.css, so it can settle what layout.css says
   about the same header and footer. */

/* ── Header: one emerald thing at rest ──
   The account's primary button is the header's emerald (and the nav's current
   item, which is live information). Theme, language, bell and the menu are
   borderless tools in the muted ink; they take an edge only on focus. Every
   one is --ctl-h tall (44px under a coarse pointer), and with the cut dropped
   --facet goes to 0 so --facet-edges draws no stray corner. */
.hdr .hdr__tool {
  --btn-bg: transparent; --facet: 0px; border-color: transparent; box-shadow: none; clip-path: none;
  color: var(--fg-muted); min-height: var(--ctl-h);
}
.hdr .hdr__tool.btn--icon { width: var(--ctl-h); }
.hdr .hdr__tool:hover { background: rgba(237,239,234,.06); color: var(--fg-strong); box-shadow: none; border-color: transparent; }
.hdr .hdr__tool:focus-visible { border-color: var(--line-strong); color: var(--fg-strong); }
.hdr .hdr__tool[aria-expanded="true"] { background: rgba(237,239,234,.08); color: var(--fg-strong); }
:root[data-theme="light"] .hdr .hdr__tool:hover, :root[data-theme="light"] .hdr .hdr__tool[aria-expanded="true"] { background: rgba(14,16,15,.06); }
.hdr .hdr__lang { padding: 0 var(--s-2); min-width: var(--ctl-h); font-size: var(--fs-xs); letter-spacing: .04em; }

/* search: a field-shaped control, not a lit button */
.hdr .hdr__search {
  --btn-bg: var(--bg-elev); --facet: 0px; border: 1px solid var(--line-strong); box-shadow: none; clip-path: none;
  min-height: var(--ctl-h); padding: 0 var(--s-3); gap: var(--s-2); color: var(--fg-muted); font-weight: 500;
  justify-content: flex-start; min-width: 0;
}
.hdr .hdr__search:hover { border-color: rgba(237,239,234,.28); color: var(--fg); box-shadow: none; background: var(--bg-elev); }
.hdr .hdr__search .ico { --n: 16; }
.hdr__search-ph { font-size: var(--fs-xs); }
/* the shortcut reads Ctrl + K in either language (dir="ltr" in the markup) */
.hdr .hdr__search .kbd-hint { gap: 2px; margin-inline-start: var(--s-4); color: var(--fg-faint); }
.hdr .hdr__search kbd { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 0 5px; }
/* ── the bar gives way in steps, never by overlapping ──
   Everything at its full size needs a 1240px row (a 1340px window). Below
   that the search field folds to its glyph and «مدیریت» moves into the menu;
   below 1100 the theme and language switches (both in the menu too) and the
   name beside the face step aside. The nav keeps its width at every step, and
   each tool its own (flex: none); only the name is cut. */
.hdr__tools > * { flex: none; }
.hdr__tools > .hdr__user { flex: 0 1 auto; min-width: 0; }
@media (min-width: 1340px) { .hdr .hdr__search { min-width: 200px; } }
@media (max-width: 1339px) {
  .hdr__search-ph, .hdr .hdr__search .kbd-hint { display: none; }
  .hdr .hdr__search { width: var(--ctl-h); padding: 0; justify-content: center; border-color: transparent; --btn-bg: transparent; }
  .hdr .hdr__admin { display: none; }
}
@media (max-width: 1099px) { .hdr .hdr__theme, .hdr .hdr__lang, .hdr__user-name { display: none; } }

/* signed out: «ورود» is the primary; «ثبت‌نام» a quiet text link beside it */
.hdr__signup { display: inline-flex; align-items: center; min-height: var(--ctl-h); color: var(--fg-muted); font-size: var(--fs-sm); font-weight: 600; padding: 0 var(--s-1); white-space: nowrap; }
.hdr__signup:hover { color: var(--fg-strong); text-decoration: none; }
@media (max-width: 1099px) { .hdr__signup { display: none; } }

/* On a phone the top bar is logo · search · bell · menu. The face is the
   bottom bar's «من»: shown in both places it was one destination twice. */
@media (max-width: 900px) { .hdr .hdr__user { display: none; } }
/* the admin link is in the menu wherever the bar has no room for it */
@media (min-width: 1340px) { .hdr-menu__admin { display: none; } }

/* a long name is cut at its own end, whichever script it is in: the name
   carries its own dir (HX.textAttrs), so in English a Persian name keeps its
   first word and loses its last, as in Persian */
.hdr__user { min-width: 0; }
.hdr__user-name { unicode-bidi: isolate; }

/* a link the gate has turned back into words (HX.gate.link / demote): it reads
   as the text around it, not as a link that does nothing */
a.is-gated, .is-gated { cursor: default; }
a.is-gated, a.is-gated:hover { color: inherit; text-decoration: none; }
:is(.prose, p, td, dd, .notice, .hint, .lede, .check, .empty, .tip, .toast) a.is-gated { text-decoration: none; }

/* a section that is not open yet: its name, quiet, with a small tag */
.nav-soon { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-faint); cursor: default; white-space: nowrap; }
.hdr__nav .nav-soon { padding: var(--s-2) var(--s-3); font-weight: 600; font-size: var(--fs-sm); }
.soon-tag {
  font-size: var(--fs-2xs); font-weight: 700; line-height: 1; padding: 3px 6px 4px; border-radius: var(--r-pill);
  background: var(--bg-elev-2); color: var(--fg-muted); border: 1px solid var(--line);
}

/* ── the unread badge: a pill on the bell's top end corner ──
   The raven faces the start of the line (its head and beak at the top start
   corner; English turns the bird round, as it turns the arrows), so the top
   end corner is the one with nothing in it. The pill is anchored by its INNER
   edge, just past the glyph's middle, and grows outward from there: «۲۷» and
   «۹۹+» reach into the bar, never back over the head. Anchored by its outer
   edge it grew inward, and at two digits it hid the beak and the eye. The
   glyph keeps its size and the button its width; the pill paints over the
   neighbour's empty margin, with a ring of the ground round it. */
.hdr :is(.hdr__bell, .hdr__msgs) { position: relative; overflow: visible; }
.hdr :is(.hdr__bell, .hdr__msgs) .ico { --n: 20; }
[dir="ltr"] .hdr .hdr__bell .ico { transform: scaleX(-1); }
.hdr__bell-count {
  position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: calc(50% + 3px); inset-inline-end: auto;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--emerald); color: var(--accent-fg);
  font: 800 var(--fs-2xs)/18px var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 0 0 0 2px var(--bg); pointer-events: none;
}
.hdr__bell-count[hidden] { display: none; }
:root[data-theme="light"] .hdr__bell-count { background: var(--jade); color: #fff; }
/* the pill reaches past the button: the next tool keeps a little more room,
   always — a count comes and goes with every message read and every notice
   opened, and the tools beside it never shift for it (MOTION-R1-10). */
.hdr :is(.hdr__bell, .hdr__msgs) { margin-inline-end: 10px; }
/* talk at a table that does not name the member: a dot, not a number */
.hdr__msgs-dot { position: absolute; z-index: 1; inset-block-start: 5px; inset-inline-start: calc(50% + 5px); width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.hdr__msgs-dot[hidden] { display: none; }
:root[data-theme="light"] .hdr__msgs-dot { background: var(--jade); }

/* ── the header menu: display settings, and on a phone the rest of the site ── */
/* --hm-w is the panel's width and --hm-max its tallest, set on the header so
   whatever is laid over the menu from there (the fade at its foot, below and in
   fx.css) lines up with it. 380px: the pointer's three chips, with the tick of
   the chosen one, fit one line each. A phone's --hm-max is fx.css's (down to
   the bottom bar). The foot keeps a little more room than the sides, so the
   last row scrolled into view ends on the panel's ground, not on its edge. */
.hdr { --hm-w: min(380px, calc(100vw - 2 * var(--gutter, 16px))); --hm-max: calc(100svh - var(--hdr-h) - 24px); }
.hdr-menu {
  position: absolute; inset-block-start: calc(100% + 6px);
  inset-inline-end: max(var(--gutter, 16px), calc((100% - var(--max, 1240px)) / 2));
  width: var(--hm-w);
  max-height: var(--hm-max); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: grid; gap: var(--s-4); padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.04) inset;
  z-index: var(--z-nav); animation: hm-in var(--t-fast) var(--ease-out) both;
}
.hdr-menu[hidden] { display: none; }
/* A row reached by Tab is drawn clear of the menu's own foot. The fade laid
   over it while more is below (40px, standing --hm-foot above the panel's
   edge: its border on a desktop, the corner tucked under the bottom bar on a
   phone; below and in fx.css) is part of the scrollport the browser counted as
   showing, so «تنظیمات» on a laptop and «تقویم جلسات» on a phone took the focus
   inside it: the label greyed by the fade, the ring's foot under the bar. The
   menu's scroll padding takes the fade out of what counts as shown, plus the
   ring's 5px with room to spare (--s-2), so a focused row scrolls up above it
   first; at the end of the list the fade is gone and the last row rests on the
   ground. The top keeps the ring's room the same way for Shift+Tab. A row in
   here keeps only the ring's room as its scroll margin, not the page's
   (base.css :focus: the header above, the bottom bar and the dice below, none
   of which stand over the menu), which lifted a row 140px past the fade. With
   that small margin each Tab moves the list on by one row and the focused one
   stays put above the fade; with none, the next row lay wholly in the padding,
   and Chrome, finding it hidden, centred it and flung the list to its end. */
.hdr-menu { scroll-padding-block: var(--s-2) calc(40px + var(--hm-foot, 1px) + var(--s-2)); }
.hdr-menu :focus { scroll-margin-block: var(--s-2); }
:root[data-theme="light"] .hdr-menu { box-shadow: 0 24px 48px -16px rgba(20,24,22,.28); }
@keyframes hm-in { from { opacity: 0; transform: translateY(-4px); } }
:root[data-motion="off"] .hdr-menu { animation: none; }
.hdr-menu__group { display: grid; gap: var(--s-1); }
.hdr-menu__group + .hdr-menu__group { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.hdr-menu__h { margin: 0 0 var(--s-1); font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-faint); letter-spacing: .02em; }
.hdr-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; }
.hdr-menu__label { display: grid; gap: 2px; font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.hdr-menu__label small { font-size: var(--fs-2xs); font-weight: 500; color: var(--fg-muted); }
.hdr-menu .switch { flex: none; }
/* the player opens under its switch while the sound is on; the switch is its
   on/off, so the panel's own play button is not repeated here (its compact
   layout, the restart at the end of the level's row, is fx.css's) */
.hdr-menu__sound { padding: var(--s-3); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-1); }
.hdr-menu__sound[hidden] { display: none; }
.hdr-menu__sound [data-play] { display: none; }
/* the pointer: the menu's row of three chips spans the panel, each as wide as its name allows */
.hdr-menu__cursor { margin: var(--s-1) 0; }
.hdr-menu__cursor .cursor-pick__opts { justify-content: stretch; }
/* who is signed in, and the way out, first: never below the panel's fold */
.hdr-menu__me { display: flex; align-items: center; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); min-width: 0; }
.hdr-menu__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: var(--fs-sm); color: var(--fg-strong); unicode-bidi: isolate; }
.hdr-menu__me .hdr-menu__out { flex: none; }
.hdr-menu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hdr-menu__links a, .hdr-menu__links .nav-soon {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-2);
  color: var(--fg); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--r-1);
}
.hdr-menu__links a:hover { background: rgba(237,239,234,.05); color: var(--fg-strong); text-decoration: none; }
.hdr-menu__links .ico { --n: 20; color: var(--fg-muted); }
.hdr-menu__links .nav-soon { color: var(--fg-faint); }
/* The four pages of the site's small print: one quiet line of words with a
   dot between them, not two rows of 44px links (a touch screen keeps its 44px
   reach). Every item carries its dot in front; the list starts one dot's width
   (--sep) before its frame, which clips, so the dot that would lead a line is
   cut away wherever the words wrap (a 320px phone, 200% text). */
/* (the frame stands 4px out on every side, so a focus ring is not clipped
   with the dot, which sits 6px further out still) */
.hdr-menu__fine { overflow: hidden; padding: 4px; margin: -4px; }
.hdr-menu__small { --sep: 15px; display: flex; flex-wrap: wrap; align-items: center; margin-inline-start: calc(-1 * var(--sep)); }
.hdr-menu__small li { display: flex; align-items: center; }
.hdr-menu__small li::before { content: ""; flex: none; width: 3px; height: 3px; margin-inline: 6px; border-radius: 50%; background: var(--fg-faint); }
.hdr-menu__links.hdr-menu__small a { min-height: 32px; padding: 0; font-size: var(--fs-xs); font-weight: 500; color: var(--fg-muted); white-space: nowrap; }
.hdr-menu__links.hdr-menu__small a:focus-visible { outline-offset: 1px; }
.hdr-menu__links.hdr-menu__small a:hover { background: none; color: var(--fg-strong); text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .hdr-menu__links.hdr-menu__small a { min-height: 44px; } }
.hdr-menu__out .ico { --n: 16; }
/* the realms are already in the desktop nav; on a phone, what the bottom bar
   and the header carry is not listed again (shell.js marks it .hm-dupe) */
@media (min-width: 901px) { .hdr-menu__realms { display: none; } }
@media (max-width: 900px) { .hdr-menu .hm-dupe { display: none; } }
/* a phone gets a sheet under the bar */
@media (max-width: 600px) {
  .hdr-menu { inset-inline: var(--gutter, 16px); width: auto; }
}
/* above the bottom bar, never under it (fx.css takes it down to the bar's own
   line, now the player can make it taller than the screen) */
@media (max-width: 900px) { .hdr-menu { max-height: calc(100svh - var(--hdr-h) - 84px - env(safe-area-inset-bottom) - 12px); } }
/* A desktop's menu, taller than a laptop's screen (the player open, an admin's
   links), was cut through a row at its foot with nothing to say it scrolled.
   Its cut edge takes the same fade as a phone's (fx.css): the header's ::after,
   placed with the menu's own inset and width, standing 1px inside its border
   and rounded like its inner corner, on the line of --hm-max. The fade follows
   the menu's scroll timeline (fx.css names it), thinning over the last 40px;
   a menu that fits has no active timeline and keeps opacity 0. */
@supports (timeline-scope: --a) and (animation-timeline: scroll()) {
  @media (min-width: 56.3125em) {
    body.hdr-menu-open .hdr::after {
      content: ""; position: absolute; z-index: calc(var(--z-nav) + 1); pointer-events: none;
      top: calc(100% + 6px + var(--hm-max) - 1px - 40px); height: 40px;
      inset-inline-end: calc(max(var(--gutter, 16px), (100% - var(--max, 1240px)) / 2) + 1px);
      width: calc(var(--hm-w) - 2px);
      border-end-start-radius: calc(var(--r-2) - 1px); border-end-end-radius: calc(var(--r-2) - 1px);
      background: linear-gradient(to bottom, transparent, var(--bg-elev-2) 85%);
      opacity: 0; animation: hm-more linear both; animation-timeline: --hm-scroll; animation-range: calc(100% - 40px) 100%;
    }
  }
}
/* the floating sound and guide controls step back while the menu is open */
body.hdr-menu-open .sound-btn, body.hdr-menu-open .guide { visibility: hidden; }

/* ── Footer ──
   Five blocks — the brand and four lists — on one row where there is room. */
@media (min-width: 1100px) { .ftr .ftr__in { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1099px) { .ftr .ftr__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr .ftr__brand { grid-column: 1 / -1; } }
.ftr__lockup { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--fg-strong); text-decoration: none; margin-bottom: var(--s-3); }
.ftr__lockup:hover { text-decoration: none; color: var(--fg-strong); }
.ftr .ftr__brand .ftr__lockup svg { width: auto; margin: 0; }
.ftr .ftr__brand .ftr__lockup svg.hx-mark, .ftr .ftr__brand .ftr__lockup svg:first-child { height: 40px; }
.ftr .ftr__brand .ftr__lockup .wordmark { height: 16px; }
.ftr .ftr__brand p { margin: 0; max-width: 34ch; }
.ftr .nav-soon { font-size: inherit; }
/* a link is a 44px target on a touch screen, without spreading the lists on a desktop */
@media (pointer: coarse) { .ftr ul a, .ftr__out { display: inline-flex; align-items: center; min-height: 44px; } .ftr ul { gap: 0; } }
.ftr__out { padding: 0; border: 0; background: none; color: var(--fg-muted); font: inherit; cursor: pointer; text-align: start; }
.ftr__out:hover { color: var(--accent-text); }
/* the band is a line of ornament, not a paragraph: it fades out at both ends instead of being cut mid-word */
.ftr .rune-band { max-width: none; overflow: hidden; white-space: nowrap; text-align: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ftr__credits summary { cursor: pointer; color: var(--fg-muted); list-style-position: inside; }
.ftr__credits summary:hover { color: var(--fg-strong); }
.ftr__credits[open] summary { margin-bottom: var(--s-2); }
/* one work per line, its licence right after it: no separator ever sits
   between two Latin names, where it would join them into one run */
.ftr__credits[open] { flex: 1 1 100%; }
.credits { list-style: none; margin: 0; padding: 0 0 var(--s-2); display: grid; gap: 2px; line-height: 1.8; }

/* ── Toasts (core.js) ──
   The toast is a grid (components.css): the glyph or rune, the words, the
   close button each have a column, so nothing here floats or pads around them. */
.toasts .toast__close .ico { --n: 16; }
.toast--danger b { color: var(--danger); }