/* =========================================================================
   guide.css — Wireframe review strip + stage
   iDev Digital Library Portal — Wireframe Pack v1

   THIS IS TOOLING, NOT PRODUCT. Everything here uses its own fixed --wf-*
   palette (a dark neutral that is deliberately NOT the product's dark
   theme and never takes the tenant hue) and its own px type ramp, so a
   client can never mistake the review chrome for part of the app being
   wireframed.

   The strip is scaffolding around someone's design review, so it is tuned
   to recede: 36px tall, 11px type, no filled accents, controls that are
   invisible until hovered. Nothing in this file draws on top of the
   product — there is no drawer, no scrim and no annotation overlay. The
   per-screen guidebook is a separate document (guidebook.html) and the
   strip only links to it.

   Contract this file publishes for other assets:
   - --wf-bar-h on :root — web.css / mobile.css offset their sticky chrome
     by it so nothing hides under the strip. It is re-published in §5 for
     the ≤720px strip, which wraps onto two rows: any rule that changes
     the strip's height MUST update the token in the same breakpoint.

   Only vertical/symmetric shadows and logical properties are used: the
   tool chrome mirrors correctly under dir="rtl" with zero overrides.
   ========================================================================= */

/* =========================================================================
   1. FIXED TOOL PALETTE
   ========================================================================= */

:root {
  --wf-bar-h: 36px;

  /* Fixed neutral palette — never themed, never tenanted. Contrast is kept
     deliberately low: this bar is read once and then ignored.
     --wf-bg sits BELOW the darkest product surface (dark --bg-sunken is
     #101419): a strip at that same value would melt into a dark-theme
     screen and the seam between tooling and product would disappear. */
  --wf-bg: #0a0b0e;              /* strip */
  --wf-line: #1c1e24;            /* the single hairline under the strip */
  --wf-text: #c6cbd3;            /* screen title — the one near-legible thing */
  --wf-muted: #7c828d;           /* every control at rest */
  --wf-faint: #626873;           /* counter, crumb, disabled */
  --wf-hover: rgba(255, 255, 255, .055);
  --wf-on: rgba(255, 255, 255, .10);   /* pressed/active control */
  --wf-focus: #7ba0cf;           /* focus ring only — the sole saturated hue */
  --wf-mobile: #b5895a;          /* mobile platform pill, muted amber */

  --wf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;   /* system stacks cover Arabic */
  --wf-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* =========================================================================
   2. THE STRIP
   ========================================================================= */

.wf-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: var(--wf-bar-h);
  padding-block: 4px;
  padding-inline: 12px;
  background: var(--wf-bg);
  color: var(--wf-muted);
  border-block-end: 1px solid var(--wf-line);
  font-family: var(--wf-font);
  font-size: 11px;             /* fixed px on purpose: tool ramp ≠ product ramp */
  line-height: 1.25;
  user-select: none;             /* double-clicking a control must not select */
}

/* …except the two things a reviewer actually quotes back in feedback. */
.wf-bar-id,
.wf-bar-title { user-select: text; }

/* base.css paints every <a> with the product --primary and underlines it on
   hover. The strip must never take the tenant hue, so it opts out here once
   for every anchor it owns rather than per component.

   The two rules carry different weights on purpose:
   - colour goes through :where(), which contributes nothing, so the rule
     lands at (0,1,0) and the components below (.wf-bar-back, .wf-btn,
     .wf-nav-btn — all (0,1,0), all later in source order) still win;
   - the underline reset must beat base.css `a:hover` (0,1,1), so it is
     written at that same weight and relies on guide.css loading last. */
.wf-bar :where(a) { color: inherit; }
.wf-bar a,
.wf-bar a:hover { text-decoration: none; }

/* Icons ride the tool ramp, not the 1em product ramp. */
.wf-bar .icon { inline-size: 14px; block-size: 14px; }

.wf-bar a:focus-visible,
.wf-bar button:focus-visible,
.wf-bar select:focus-visible {
  outline: 1px solid var(--wf-focus);
  outline-offset: 1px;
}

/* --- 2.1 Back link + counter -------------------------------------------- */

.wf-bar-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--wf-faint);
  padding: 3px 6px;
  margin-inline-start: -6px;      /* optically flush with the viewport edge */
  border-radius: 5px;
  white-space: nowrap;
  transition: color .12s ease, background-color .12s ease;
}
.wf-bar-back:hover { color: var(--wf-text); background: var(--wf-hover); }

/* Positional data, not prose. shell.js also sets dir="ltr" on it so the
   bidi algorithm cannot re-order "12 / 56" into "56 / 12" under RTL. */
.wf-bar-id {
  font-family: var(--wf-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--wf-faint);
  white-space: nowrap;
}

/* --- 2.2 Titles ---------------------------------------------------------- */

/* Title and crumb sit on ONE line: a stacked pair is what forced the old
   52px strip. The separator is a pseudo-element so shell.js emits no
   decorative markup. */
.wf-bar-titles {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-inline-size: 0;
  overflow: hidden;
}
.wf-bar-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--wf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-bar-crumb {
  color: var(--wf-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.wf-bar-crumb::before {
  content: "·";
  margin-inline-end: 7px;
}

.wf-bar-spacer { flex: 1; }

.wf-bar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- 2.3 Platform pill ---------------------------------------------------- */

/* Outline only — a filled chip read as product UI at the old contrast. */
.wf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: .7;
  white-space: nowrap;
  flex: none;
}
.wf-badge--web { color: var(--wf-faint); }
.wf-badge--mobile { color: var(--wf-mobile); }

/* --- 2.4 Segmented toggle (EN / عربي) ------------------------------------ */

.wf-seg {
  display: inline-flex;
  padding: 1px;
  border: 1px solid var(--wf-line);
  border-radius: 999px;
}
.wf-seg-btn {
  border: 0;
  background: transparent;
  color: var(--wf-faint);
  font: inherit;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.wf-seg-btn:hover { color: var(--wf-text); }
/* Active = a lift in the neutral, not a coloured fill. */
.wf-seg-btn.is-on {
  background: var(--wf-on);
  color: var(--wf-text);
}

/* --- 2.5 Buttons, select, prev/next -------------------------------------- */

/* Ghost by default: no border, no fill. The strip reads as text until you
   reach for it. */
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 24px;
  border: 0;
  background: transparent;
  color: var(--wf-muted);
  font: inherit;
  font-weight: 600;
  padding-block: 0;
  padding-inline: 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.wf-btn:hover { background: var(--wf-hover); color: var(--wf-text); }
.wf-btn.is-on { background: var(--wf-on); color: var(--wf-text); }
.wf-btn--icon { padding-inline: 5px; }

.wf-select {
  appearance: none;
  block-size: 24px;
  border: 0;
  background: transparent;
  color: var(--wf-muted);
  font: inherit;
  font-weight: 600;
  padding-block: 0;
  padding-inline: 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.wf-select:hover { background: var(--wf-hover); color: var(--wf-text); }
/* The dropdown itself is an OS surface — force readable ink on it. */
.wf-select option { color: #16181d; background: #f2f3f5; }

.wf-nav {
  display: inline-flex;
  border: 1px solid var(--wf-line);
  border-radius: 5px;
  overflow: hidden;
}
.wf-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 22px;
  border: 0;
  background: transparent;
  color: var(--wf-muted);
  font: inherit;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.wf-nav-btn + .wf-nav-btn { border-inline-start: 1px solid var(--wf-line); }
.wf-nav-btn:hover { background: var(--wf-hover); color: var(--wf-text); }
.wf-nav-btn.is-disabled {
  color: var(--wf-faint);
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* =========================================================================
   3. STAGE
   -------------------------------------------------------------------------
   The stage is the canvas the product renders on, so unlike the strip it
   follows the PRODUCT theme (--bg-sunken) — a fixed dark backdrop would
   falsify the light-theme screens it frames.
   ========================================================================= */

.wf-stage {
  min-height: calc(100vh - var(--wf-bar-h));
  background: var(--bg-sunken, #eceef2);
}

/* Mobile screens: centre the phone(s) with generous air.

   The stage holds TWO children — the .wf-bar review strip and #screen-root —
   so it must never itself be a flex row: that lays the strip out as a column
   beside the phone instead of above it, and pushes the page into horizontal
   overflow. Centring belongs on #screen-root, not on the stage. */
.wf-stage--mobile {
  display: block;
}

.wf-stage--mobile > #screen-root {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 56px 24px 80px;
  /* A phone frame is a fixed 390px screen plus bezel. Below roughly 470px of
     viewport it cannot fit, so let this box scroll on its own axis rather
     than letting the whole document scroll sideways. */
  overflow-x: auto;
}

@media (max-width: 700px) {
  .wf-stage--mobile > #screen-root { padding: 24px 12px 48px; }
}

/* =========================================================================
   4. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .wf-bar * { transition: none !important; }
}

/* =========================================================================
   5. RESPONSIVE + PRINT
   ========================================================================= */

/* Narrow screens: the strip wraps onto two rows.

   --wf-bar-h is a published contract — web.css / mobile.css offset every
   sticky product surface by it — so a strip that wraps MUST republish its
   real height, or the strip (z-index 900) sits on top of the product's own
   sticky header (.portal-topbar is z-index 60). Nothing measures the strip
   at runtime, so the height is made deterministic instead of estimated:
     - the actions keep to ONE scrollable line (never a third row);
     - .wf-bar-titles gets flex-basis 0, so its hypothetical main size is 0
       and a long screen title can never push row 1 into a wrap;
     - .wf-bar-spacer is dropped — the actions already claim their own line,
       so the spacer would only steal free space from the titles.
   Row 1 is 24px (the tallest row-1 child), row 2 is 24px of controls plus
   2px of padding either side, with a 4px row-gap and 4px block padding
   either side: 24 + 28 + 4 + 8 = 64px, which min-block-size then pins. */
@media (max-width: 720px) {
  :root { --wf-bar-h: 64px; }

  .wf-bar {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .wf-bar-titles { flex: 1 1 0; }
  .wf-bar-spacer { display: none; }
  /* Icon-only back link and guidebook link — their accessible names live on
     title/aria-label, and the width freed goes to the screen title. */
  .wf-bar-back-label,
  .wf-btn-label { display: none; }
  .wf-btn--guide { padding-inline: 5px; }
  .wf-bar-actions {
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px;          /* keeps focus rings off the scroll edge */
  }
  .wf-bar-actions::-webkit-scrollbar { display: none; }
}

/* Very narrow: the group crumb is the first thing worth losing. */
@media (max-width: 420px) {
  .wf-bar-crumb { display: none; }
}

/* Print: the tool chrome vanishes entirely; screens print clean. */
@media print {
  .wf-bar { display: none !important; }
  .wf-stage {
    min-height: auto;
    background: none;
    margin: 0 !important;
  }
}

/* =========================================================================
   6. SCREEN NAVIGATOR
   Prev/next alone means 41 clicks from screen 3 to screen 44. This is the
   jump list: every screen, grouped, filterable, current one marked.

   Same fixed tool palette as the strip — it must never read as product UI.
   Anchored to the inline-end edge under the strip and mirrored under RTL
   purely by logical properties.
   ========================================================================= */

.wf-jump {
  position: fixed;
  inset-block-start: var(--wf-bar-h);
  inset-inline-end: 8px;
  z-index: 900;                      /* above the strip's own stacking */
  inline-size: min(340px, calc(100vw - 16px));
  max-block-size: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .55);
  font-family: var(--wf-font);
  overflow: hidden;
}

.wf-jump[hidden] { display: none; }

.wf-jump-head {
  padding: 8px;
  border-block-end: 1px solid var(--wf-line);
  flex: none;
}

.wf-jump-input {
  inline-size: 100%;
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  color: var(--wf-text);
  background: rgba(255, 255, 255, .045);
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
}
.wf-jump-input::placeholder { color: var(--wf-faint); }
.wf-jump-input:focus-visible { border-color: var(--wf-focus); }

.wf-jump-body {
  overflow-y: auto;
  overscroll-behavior: contain;      /* don't scroll the screen behind it */
  padding: 6px;
}

.wf-jump-group[hidden] { display: none; }

.wf-jump-group-h {
  padding: 8px 8px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;             /* Latin-only label; Arabic resets below */
  color: var(--wf-faint);
}

/* Arabic is cursive: tracking on a group label breaks the joined baseline. */
:root[lang="ar"] .wf-jump-group-h,
:root[dir="rtl"] .wf-jump-group-h { letter-spacing: normal; }

.wf-jump-item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--wf-muted);
  text-decoration: none;
}
.wf-jump-item[hidden] { display: none; }
.wf-jump-item:hover { background: var(--wf-hover); color: var(--wf-text); }
.wf-jump-item:focus-visible { outline: 2px solid var(--wf-focus); outline-offset: -2px; }

.wf-jump-item.is-current {
  background: var(--wf-on);
  color: var(--wf-text);
  font-weight: 600;
}

.wf-jump-num {
  flex: none;
  min-inline-size: 1.9em;
  font-family: var(--wf-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--wf-faint);
  text-align: end;
}

.wf-jump-empty {
  padding: 22px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--wf-faint);
}
.wf-jump-empty[hidden] { display: none; }

/* The trigger's text label is a luxury the narrow strip cannot afford. */
@media (max-width: 720px) {
  .wf-btn--jump .wf-btn-label { display: none; }
  /* Pin both edges and let the width fall out of that. calc(100vw - 16px)
     overflows here because 100vw counts the scrollbar gutter but the
     available space does not. */
  .wf-jump {
    inset-inline: 8px;
    inline-size: auto;
    max-block-size: 60vh;
  }
}

@media print { .wf-jump { display: none; } }