/* ============================================================
   شمس حلب - Shams Halab
   Base layer — icons, focus, motion, accessibility primitives.
   Loaded after tokens.css and before everything else.
   ============================================================ */

/* ── hidden wins ──────────────────────────────────────────
   The UA rule for [hidden] is display:none at the lowest possible
   specificity, so any component with `display: flex` un-hides itself
   the moment someone sets the attribute. Every hidden panel, sheet
   and empty state on this site depends on getting this right. */
[hidden] {
  display: none !important;
}

/* ── Icons ────────────────────────────────────────────────
   Phosphor Duotone, filled. They inherit colour from their parent, so an
   icon inside a button is always the right colour; the soft second layer
   is painted by --icon-duo / --icon-duo-o (see ui.css). */
.icon {
  fill: currentColor;
  stroke: none;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* WhatsApp's mark is a solid glyph, not a line drawing. */
.icon-filled,
.icon .icon-filled {
  fill: currentColor;
  stroke: none;
}

/* Interior detail lines that would look heavy at full weight. */
.icon-thin {
  stroke-width: 1.4;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ── Focus ────────────────────────────────────────────────
   :focus-visible only, so a mouse click never draws a ring
   but a keyboard user is never lost. Two-tone so it reads on
   both light and dark surfaces. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Older engines that lack :focus-visible still get a ring. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Skip link ────────────────────────────────────────────
   First tab stop on every page. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  z-index: 400;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-raised);
  color: var(--brand-ink);
  border: 2px solid var(--brand-ink);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  transition: inset-block-start var(--transition-fast);
}

.skip-link:focus {
  inset-block-start: var(--space-4);
}

/* ── Screen-reader only ───────────────────────────────────
   For labels and live-region text that must be announced but
   not shown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Numbers ──────────────────────────────────────────────
   Tabular figures so a recalculating value does not make the
   layout twitch under the reader's thumb. */
.num,
.mini-stat-value,
.stat-value,
.result-value,
.compare-tile-value,
.fairness-score,
.is-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ── Motion ───────────────────────────────────────────────
   Transform and opacity only: on the low-end Androids this
   audience carries, animating anything else drops frames.
   Entrance animation is a single shared keyframe. */
@keyframes sh-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes sh-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rise {
  animation: sh-rise var(--normal) var(--ease-out) both;
}

/* .stagger used to fade nineteen tool cards in one after another over
   280ms. It was choreography for its own sake: the person this site is
   for gains nothing from content arriving in sequence, and anyone
   reading slowly is made to wait for words that were already computed.
   The class is kept as a no-op so the markup does not have to change. */
.stagger > * { animation: none; opacity: 1; }

/* ── Reduced motion ───────────────────────────────────────
   Not a softening — a full stop. Vestibular disorders are
   common and this costs the user nothing. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ── Tap behaviour ────────────────────────────────────────
   Kills the grey flash and the 300ms delay on Android, and
   stops long-press selecting button labels. */
button,
a,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  -webkit-user-select: none;
  user-select: none;
}

/* Inputs must stay selectable. */
input,
textarea,
select {
  -webkit-user-select: auto;
  user-select: auto;
}

/* ── Selection ────────────────────────────────────────────*/
::selection {
  background: var(--brand-soft);
  color: var(--text);
}

/* ── Media defaults ───────────────────────────────────────*/
img,
svg,
canvas {
  max-width: 100%;
}

/* ── Print ────────────────────────────────────────────────*/
@media print {
  .skip-link,
  .icon-sprite {
    display: none !important;
  }

  .rise,
  .stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}