/* copied from PRODUCTS/UnitGuideDemo_v2.0/shared/css/base.css (link 63); inline images moved to /shared/img/ */
/* ============================================================
   base.css — reset, typography, layout, page chrome.
   Written with CSS logical properties so one sheet serves
   both dir="rtl" (consumer screens) and dir="ltr" (firm screens).
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--porcelain);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.6;
  padding-block-end:3.5rem;      /* room for the fixed DEMO mark */
}
[dir="rtl"] body,[lang="ar"] body{font-family:var(--font-ar)}
img,svg{max-width:100%;height:auto}
a{color:var(--cobalt);text-underline-offset:.18em}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--cobalt);outline-offset:2px
}
hr{border:0;border-block-start:1px solid var(--rule);margin-block:var(--gap)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0 0 .4em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{font-family:var(--font-ar-display)}
h1{font-size:clamp(1.7rem,4.2vw,2.7rem);letter-spacing:.005em}
h2{font-size:clamp(1.3rem,2.6vw,1.75rem)}
h3{font-size:clamp(1.05rem,1.7vw,1.25rem)}
p{margin:0 0 .85em}
small,.small{font-size:.82rem}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;unicode-bidi:isolate;direction:ltr}
.muted{color:var(--muted)}
.en{font-family:var(--font-body);direction:ltr;unicode-bidi:isolate;display:inline-block}
.en-block{font-family:var(--font-body);direction:ltr;text-align:start;unicode-bidi:isolate}
.ar{font-family:var(--font-ar);direction:rtl;unicode-bidi:isolate}
.eyebrow{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cobalt-500);margin:0 0 .5em
}
.lede{font-size:1.06rem;color:#3A3E46}

/* ---------- layout ---------- */
.wrap{inline-size:100%;max-inline-size:74rem;margin-inline:auto;padding-inline:clamp(1rem,3.5vw,2rem)}
.wrap--narrow{max-inline-size:48rem}
.wrap--phone{max-inline-size:26rem}
/* Vertical rhythm. Named `sv-band` since Phase 0.7: the old name `.band`
   collided with the budget-band button in journeys.css, so `.band span`
   and `.band b` were sizing every bilingual span and every <b> inside
   <main> on every screen. The old utility is deleted, not aliased, so
   the collision cannot recur. See DECISIONS_PHASE0_7.md D7.30. */
.sv-band{padding-block:var(--band)}
.stack>*+*{margin-block-start:var(--gap)}
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.row{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:center}
.row--between{justify-content:space-between}
.spacer{flex:1 1 auto}

/* ---------- page chrome: top bar ---------- */
.topbar{
  background:var(--cobalt);color:var(--porcelain-2);
  border-block-end:3px solid var(--cobalt-700);
  position:sticky;inset-block-start:0;z-index:40
}
.topbar__in{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding-block:.55rem}
.topbar a{color:var(--porcelain-2)}
.mark{display:flex;align-items:baseline;gap:.5rem;text-decoration:none}
.mark__ar{font-family:var(--font-ar-display);font-size:1.32rem;line-height:1}
.mark__en{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.topbar__screen{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.topbar__nav{display:flex;gap:.4rem;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.chip-link{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  border:1px solid rgba(244,240,229,.45);padding:.28rem .55rem;border-radius:var(--r);
  text-decoration:none;white-space:nowrap
}
.chip-link:hover{background:rgba(244,240,229,.14)}
.chip-link--solid{background:var(--porcelain-2);color:var(--cobalt)!important;border-color:var(--porcelain-2);font-weight:600}

/* ---------- page chrome: DEMO mark (on every screen) ---------- */
.demomark{
  position:fixed;inset-block-end:0;inset-inline-start:0;inline-size:100%;
  background:var(--cobalt-700);color:var(--porcelain-2);
  font-family:var(--font-mono);font-size:.63rem;letter-spacing:.05em;
  padding:.4rem clamp(.6rem,3vw,1.4rem);z-index:50;
  display:flex;gap:.75rem;justify-content:space-between;align-items:center;flex-wrap:wrap
}
.demomark b{font-weight:700;letter-spacing:.12em}
.demomark span{opacity:.82}

/* ---------- page chrome: footer / prev-next ---------- */
.pagefoot{border-block-start:1px solid var(--rule);margin-block-start:var(--band);padding-block:1.25rem 2rem}
.pagefoot .row{gap:.6rem}
.specref{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.btn{
  display:inline-block;font-family:var(--font-body);font-size:.9rem;font-weight:600;
  background:var(--cobalt);color:var(--porcelain-2);text-decoration:none;
  border:1px solid var(--cobalt);border-radius:var(--r);padding:.6rem 1.1rem;cursor:pointer
}
.btn:hover{background:var(--cobalt-700)}
.btn--ghost{background:transparent;color:var(--cobalt)}
.btn--ghost:hover{background:var(--cobalt-050)}
.btn--lg{font-size:1.05rem;padding:.85rem 1.6rem}
.btn--block{display:block;inline-size:100%;text-align:center}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed}

/* Inert controls: everything in this artifact is non-functioning.
   .inert marks a control that deliberately does nothing. */
.inert{position:relative}
.inert::after{
  content:"";position:absolute;inset-block-end:-.35rem;inset-inline:0;
  border-block-end:1px dotted var(--cobalt-200)
}

@media print{.topbar,.demomark,.pagefoot{position:static}}