/* ============================================================
   FLUVIAL OS — the menu-bar chrome (desktop / tablet).
   The site's whole navigation and control surface. One file,
   loaded on every page; os.js injects the bar.
   Each page sets window.OS_BASE (its relative path to the site
   root) and window.OS_KIND (app | data | read).
   On narrow widths — or at a large interface scale — the bar
   collapses into the drawer defined at the foot of this file.
   ============================================================ */
:root{
  --ui:1; --page-ui:1;
  --os-bar:rgba(10,18,25,.74);
  --os-menu:#101B24;
  --os-edge:#22323E;
  --os-hi:#0064C8;          /* the mark's blue, used as the selection colour */
  --os-ink:#E9EFF3;
  --os-soft:#BCCBD5;
  --os-muted:#7B8D9A;
  --os-accent:#C7A579;
  --os-face:"Carlito","Calibri","Segoe UI",system-ui,-apple-system,sans-serif;
}
html[data-theme="light"]{
  --os-bar:rgba(247,249,250,.85);
  --os-menu:#FFFFFF;
  --os-edge:#DCE3E8;
  --os-hi:#0064C8;
  --os-ink:#0C1820;
  --os-soft:#33454F;
  --os-muted:#5F7280;
  --os-accent:#8A6636;
}

/* interface scale grows the page on every kind — bar and content together.
   Reading pages then take a further adjustment from View > Text Size; the
   product of the two is capped in site.css. */
html{ font-size:calc(100% * var(--page-ui,1)); }
body.os-on{ padding-top:calc(52px * var(--ui)); }
body.os-on .hero{ min-height:calc(100svh - 52px * var(--ui)); }
/* the splash sizes its own hero — it shares the screen with the footer */
body.os-on.splash .hero{ min-height:0; }

.os-bar{
  position:fixed; top:0; left:0; right:0; height:calc(52px * var(--ui)); z-index:1000;
  display:flex; align-items:center; padding:0 10px; background:var(--os-bar);
  border-bottom:1px solid var(--os-edge); backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  font-family:var(--os-face); font-size:calc(15px * var(--ui)); color:var(--os-ink); user-select:none;
  transition:transform .28s ease;
}
.os-m{ position:relative; height:calc(52px * var(--ui)); display:flex; align-items:center;
  padding:0 11px; cursor:default; white-space:nowrap; border-radius:7px; }
.os-m.logo{ padding:0 10px; color:var(--os-hi); }
.os-m.logo svg{ display:block; width:calc(19px * var(--ui)); height:calc(19px * var(--ui)); }
.os-m.name{ font-weight:700; letter-spacing:.02em; }
.os-m:hover, .os-m.open{ background:var(--os-hi); color:#fff; }
.os-m.logo:hover, .os-m.logo.open{ color:#fff; }
.os-spacer{ flex:1; }

.os-status{ display:flex; align-items:center; gap:2px; }
.os-si{ position:relative; height:calc(52px * var(--ui)); display:flex; align-items:center; gap:6px;
  padding:0 9px; cursor:default; color:var(--os-soft); font-size:calc(15px * var(--ui)); border-radius:7px; }
.os-si:hover, .os-si.open{ background:var(--os-hi); color:#fff; }
.os-si.launch{ color:var(--os-muted); padding:0 8px; }
.os-si.launch svg{ display:block; width:calc(17px * var(--ui)); height:calc(17px * var(--ui)); }
.os-si.launch:hover{ color:#fff; }
.os-si.uiscale{ gap:0; padding:0 6px; }
.os-si.uiscale:hover{ background:transparent; }
.os-ub{ background:transparent; border:0; color:var(--os-muted); cursor:pointer;
  font-family:inherit; font-weight:700; line-height:1; padding:0 3px; }
.os-ub:nth-child(1){ font-size:.72em; } .os-ub:nth-child(2){ font-size:.95em; }
.os-ub:nth-child(3){ font-size:1.2em; } .os-ub:nth-child(4){ font-size:1.52em; }
.os-ub:hover{ color:var(--os-ink); } .os-ub.on{ color:var(--os-hi); }
html[data-theme="light"] .os-ub.on{ color:var(--os-hi); }

/* ---------- dropdowns and fly-out submenus ---------- */
.os-dd{ position:fixed; min-width:250px; background:var(--os-menu); border:1px solid var(--os-edge);
  border-radius:9px; box-shadow:0 18px 48px rgba(0,0,0,.45); padding:6px; z-index:1100; display:none;
  font-size:calc(14px * var(--ui)); font-family:var(--os-face); }
html[data-theme="light"] .os-dd{ box-shadow:0 18px 44px rgba(12,24,32,.16); }
.os-dd.show{ display:block; }
.os-di{ position:relative; display:flex; align-items:center; gap:14px; padding:6px 12px 6px 22px;
  border-radius:6px; color:var(--os-ink); cursor:default; }
.os-di .k{ margin-left:auto; color:var(--os-muted); font-size:.85em; font-variant-numeric:tabular-nums; }
.os-di .arr{ margin-left:auto; color:var(--os-muted); }
.os-di:hover:not(.dim){ background:var(--os-hi); color:#fff; }
.os-di:hover:not(.dim) .k, .os-di:hover:not(.dim) .arr{ color:rgba(255,255,255,.85); }
.os-di.dim{ color:var(--os-muted); opacity:.62; font-size:.92em; }
.os-di.check::before{ content:"\2713"; position:absolute; left:6px; width:12px; text-align:center; }
.os-sep{ height:1px; background:var(--os-edge); margin:6px 8px; }

/* ---------- reader's footer: double-click a term ---------- */
.os-rfoot{ position:fixed; left:0; right:0; bottom:0; z-index:900; background:var(--os-menu);
  border-top:1px solid var(--os-edge); padding:.7rem 1.4rem; font-family:var(--os-face);
  color:var(--os-soft); transform:translateY(115%); transition:transform .22s; }
.os-rfoot.on{ transform:translateY(0); }
.os-rf-prompt{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--os-muted); }
.os-rf-word{ font-weight:700; color:var(--os-ink); font-size:1.02rem; margin-right:.5rem; }
.os-rf-pos{ font-style:italic; color:var(--os-muted); font-size:.85rem; margin-right:.5rem; }
.os-rf-def{ color:var(--os-ink); }
.os-rf-src{ color:var(--os-soft); border-left:2px solid var(--os-accent); padding-left:.6rem;
  margin-top:.25rem; font-size:.92rem; }
.os-rf-src .lbl{ font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--os-accent); margin-right:.45rem; font-weight:700; }
.os-rf-none{ color:var(--os-muted); font-style:italic; }
@keyframes os-rflit{ from{ background:rgba(94,175,235,.14); } to{ background:var(--os-menu); } }
.os-rfoot.lit{ animation:os-rflit .5s ease; }

.os-toast{ position:fixed; left:14px; z-index:1200; background:var(--os-menu); border:1px solid var(--os-edge);
  border-radius:8px; padding:8px 14px; color:var(--os-ink); font-family:var(--os-face); font-size:13px;
  box-shadow:0 12px 30px rgba(0,0,0,.4); display:none; }

/* ---------- hide toggle: the bar slides away, a tab brings it back ---------- */
body.os-hidden.os-on{ padding-top:0; }
body.os-hidden .os-bar{ transform:translateY(-100%); }
body.os-hidden .hero{ min-height:100svh; }
body.os-hidden.splash .hero{ min-height:0; }
.os-reveal{ position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:1001; display:none;
  align-items:center; gap:6px; height:17px; padding:0 14px; background:var(--os-menu);
  border:1px solid var(--os-edge); border-top:0; border-radius:0 0 9px 9px; color:var(--os-muted);
  font-family:var(--os-face); font-size:11px; letter-spacing:.14em; cursor:pointer; user-select:none; }
body.os-hidden .os-reveal{ display:inline-flex; }
.os-reveal:hover{ color:var(--os-ink); }

/* ============================================================
   NARROW: the bar collapses into a drawer.
   The switch is measured, not guessed at a fixed breakpoint —
   os.js compares the bar's content width against the space it
   has and sets body.os-narrow. That is what makes it correct at
   interface scale 1.6, where the bar needs roughly twice the
   room it needs at 1 and a media query would still call it wide.
   ============================================================ */
.os-bar{ overflow:hidden; }

.os-burger{ display:none; align-items:center; justify-content:center;
  width:calc(34px * var(--ui)); height:calc(34px * var(--ui)); margin-right:2px;
  padding:0; border:0; background:transparent; color:var(--os-ink);
  border-radius:7px; cursor:pointer; }
.os-burger svg{ display:block; width:calc(20px * var(--ui)); height:calc(20px * var(--ui)); }
.os-burger:hover{ background:var(--os-hi); color:#fff; }

body.os-narrow .os-burger{ display:flex; }
body.os-narrow .os-bar > .os-m:not(.logo):not(.name){ display:none; }
body.os-narrow .os-si.uiscale{ display:none; }   /* it moves into the drawer */

.os-scrim{ position:fixed; inset:0; z-index:1150; background:rgba(4,10,14,.55);
  opacity:0; pointer-events:none; transition:opacity .22s; }
body.os-drawer-open .os-scrim{ opacity:1; pointer-events:auto; }

.os-drawer{ position:fixed; top:0; left:0; bottom:0; z-index:1160;
  width:min(87vw, 23rem); display:flex; flex-direction:column;
  background:var(--os-menu); border-right:1px solid var(--os-edge);
  font-family:var(--os-face); color:var(--os-ink);
  transform:translateX(-102%); transition:transform .24s ease; }
body.os-drawer-open .os-drawer{ transform:translateX(0); }
@media (prefers-reduced-motion:reduce){
  .os-drawer, .os-scrim{ transition:none; }
}

/* the drawer follows the interface scale, as the bar does — someone who
   chose the largest setting needs it here most */
.os-dwr-head{ display:flex; align-items:center; gap:10px; padding:14px 12px 12px 16px;
  border-bottom:1px solid var(--os-edge); }
.os-dwr-head svg{ display:block; width:calc(20px * var(--ui)); height:calc(20px * var(--ui)); color:var(--os-hi); }
.os-dwr-name{ font-weight:700; letter-spacing:.02em; }
.os-dwr-x{ margin-left:auto; padding:2px 9px; border:0; background:transparent;
  color:var(--os-muted); font-size:calc(23px * var(--ui)); line-height:1; cursor:pointer; border-radius:6px; }
.os-dwr-x:hover{ color:var(--os-ink); }
.os-dwr-tag{ padding:11px 16px; border-bottom:1px solid var(--os-edge);
  color:var(--os-muted); font-size:calc(12.5px * var(--ui)); line-height:1.5; }

/* The wordmark's identity destinations, directly under the tagline.
   They sit at the section headers' indent, not the items' indent, because
   they are peers of File and Practice rather than children of anything. */
.os-dwr-id .os-dwr-i{ padding-left:16px; color:var(--os-ink);
  font-size:calc(15px * var(--ui)); border-bottom:1px solid var(--os-edge); }
.os-dwr-id .os-dwr-i:hover, .os-dwr-id .os-dwr-i:focus{ background:var(--os-hi); color:#fff; }

/* min-height:0 is what lets a flex child actually scroll instead of
   growing the drawer past the viewport */
.os-dwr-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2.5rem; }
.os-dwr-h{ display:flex; align-items:center; width:100%; padding:13px 16px;
  border:0; border-bottom:1px solid var(--os-edge); background:transparent;
  color:var(--os-ink); font-family:inherit; font-size:calc(15px * var(--ui)); text-align:left; cursor:pointer; }
.os-dwr-h .car{ margin-left:auto; color:var(--os-muted); transition:transform .18s; }
.os-dwr-sec.open > .os-dwr-h{ color:var(--os-hi); font-weight:700; }
.os-dwr-sec.open > .os-dwr-h .car{ transform:rotate(90deg); }
.os-dwr-list{ display:none; padding:4px 0 8px; border-bottom:1px solid var(--os-edge);
  background:rgba(0,0,0,.12); }
html[data-theme="light"] .os-dwr-list{ background:rgba(12,24,32,.03); }
.os-dwr-sec.open > .os-dwr-list{ display:block; }

.os-dwr-i{ position:relative; padding:11px 16px 11px 34px; color:var(--os-soft);
  font-size:calc(14.5px * var(--ui)); line-height:1.4; cursor:pointer; }
.os-dwr-i:hover, .os-dwr-i:focus{ background:var(--os-hi); color:#fff; outline:none; }
.os-dwr-i.check::before{ content:"\2713"; position:absolute; left:15px; }
.os-dwr-i.dim{ color:var(--os-muted); opacity:.72; font-size:calc(13.5px * var(--ui)); cursor:default; }
.os-dwr-i.dim:hover{ background:transparent; color:var(--os-muted); }
.os-dwr-sub{ padding:11px 16px 3px 34px; color:var(--os-muted);
  font-size:calc(10.5px * var(--ui)); letter-spacing:.17em; text-transform:uppercase; }
.os-dwr-rule{ height:1px; background:var(--os-edge); margin:6px 16px; }

.os-dwr-ui{ display:flex; align-items:center; gap:10px; padding:10px 16px 14px 34px; }
.os-dwr-ui .os-ub{ padding:7px 12px; border:1px solid var(--os-edge); border-radius:7px; }
.os-dwr-ui .os-ub.on{ border-color:var(--os-hi); }

body.os-drawer-open{ overflow:hidden; }

/* ---------- find on page ----------
   Painted with the CSS Custom Highlight API, so matches are highlighted
   without the document being rewritten. The portal and the lexicon
   rebuild their contents as you type; a find that wrapped matches in
   elements would be fighting them. */
::highlight(os-find){ background:var(--os-hi); color:#fff; }

.os-find{
  position:fixed; top:calc(52px * var(--ui) + 10px); right:14px; z-index:1300;
  display:none; align-items:center; gap:8px;
  background:var(--os-bg); border:1px solid var(--os-edge); border-radius:6px;
  padding:7px 8px 7px 12px; box-shadow:0 14px 40px rgba(0,0,0,.45);
  font-size:calc(13px * var(--ui));
}
.os-find.on{ display:flex; }
.os-find-in{
  font:inherit; color:var(--os-ink); background:transparent; border:0; outline:none;
  width:calc(15em); padding:2px 0;
}
.os-find-n{ color:var(--os-muted); font-size:.85em; white-space:nowrap; min-width:6.5em; }
.os-find-b, .os-find-x{
  appearance:none; cursor:pointer; font:inherit; line-height:1;
  background:transparent; border:0; color:var(--os-soft); padding:4px 7px; border-radius:3px;
}
.os-find-b:hover, .os-find-x:hover{ background:var(--os-hi); color:#fff; }
.os-find-x{ margin-left:2px; font-size:1.15em; }
@media (max-width:34rem){
  .os-find{ left:10px; right:10px; }
  .os-find-in{ width:auto; flex:1 1 auto; min-width:0; }
}

/* ---------- help search ----------
   The application pattern: a field you type an intention into, and the
   command that satisfies it, with the menu path so the answer teaches
   where the command lives. The index is built from the menu map. */
.os-hp{
  position:fixed; inset:0; z-index:1500; display:none;
  background:rgba(4,10,14,.5); backdrop-filter:blur(2px);
  align-items:flex-start; justify-content:center;
  padding:calc(52px * var(--ui) + 6vh) 16px 16px;
}
.os-hp.on{ display:flex; }
.os-hp-box{
  width:min(38rem,100%); background:var(--os-bg);
  border:1px solid var(--os-edge); border-radius:8px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  font-size:calc(14px * var(--ui));
}
.os-hp-in{
  width:100%; font:inherit; font-size:1.15em; color:var(--os-ink);
  background:transparent; border:0; border-bottom:1px solid var(--os-edge);
  outline:none; padding:.95em 1.05em;
}
.os-hp-in::placeholder{ color:var(--os-muted); }
.os-hp-list{ max-height:min(52vh,26em); overflow-y:auto; padding:.35em 0; }
.os-hp-i{
  display:flex; align-items:baseline; gap:1em; justify-content:space-between;
  padding:.6em 1.05em; cursor:pointer; color:var(--os-soft);
}
.os-hp-i.on, .os-hp-i:hover{ background:var(--os-hi); color:#fff; }
.os-hp-t{ font-weight:600; }
.os-hp-p{ font-size:.8em; color:var(--os-muted); white-space:nowrap; }
.os-hp-i.on .os-hp-p, .os-hp-i:hover .os-hp-p{ color:rgba(255,255,255,.82); }
.os-hp-none{ padding:1.2em 1.05em; color:var(--os-muted); font-size:.92em; line-height:1.6; }
.os-hp-foot{
  border-top:1px solid var(--os-edge); padding:.7em 1.05em;
  font-size:.78em; color:var(--os-muted);
}
.os-hp-foot a{ color:var(--os-hi); }
@media (max-width:34rem){
  .os-hp{ padding-top:calc(52px * var(--ui) + 2vh); }
  .os-hp-p{ display:none; }
}