/* Production-only parity fixes.
   Keep this file tiny and load it after the canonical Kiarash styles. */

/* The current canonical stylesheet dropped the shared mark rules while the
   HTML still renders the header brand as an empty .g-mark span. Restore the
   exact mask-based logo contract here so every page paints the checked-in
   Gravitas+ SVG again without changing Kiarash's page markup. */
.g-mark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.g-mark--logotype {
  /* The checked-in viewBox, not a remembered one: the two logo files were
     recut, and a stale ratio here leaves the mask short of its box, which
     with mask-size:contain shows up as a sliver of dead space after the
     wordmark rather than as a wrong drawing — invisible, and it pushes
     whatever sits next to it. */
  aspect-ratio: 658.7 / 118.45;
  -webkit-mask-image: url("logos/Logotype_Black.svg");
  mask-image: url("logos/Logotype_Black.svg");
}
.g-mark--logo {
  aspect-ratio: 118.44 / 118.45;
  -webkit-mask-image: url("logos/Logo_Black.svg");
  mask-image: url("logos/Logo_Black.svg");
}
.g-logo .g-mark--logotype { height: 1.75rem; }
.g-logo .g-mark--logo { height: 2rem; }

/* Homepage stats: the separators are literal middot characters in the DOM.
   They remain visible even if a stylesheet is delayed or replaced. */
.lp-hero__credit > .lp-hero__sep {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: var(--g-border-strong) !important;
  font-style: normal !important;
  font-size: 0.9em !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ---- Workspace brand size -------------------------------------------------
   The two heights above are the public header's, and they were also landing
   in the workspace topbar, where the wordmark came out at 1.75rem — 28px of a
   48px bar, about 156px wide — so it read as a page title rather than as the
   chrome around one, and it crowded the index toggle beside it.

   ws.css already states the right value, 16px, but it states it inside
   @layer ws-components while this file is unlayered, and unlayered rules beat
   layered ones whatever their specificity. So the fix cannot live there: the
   public default has to step aside for the workspace here, in the same
   unlayered cascade that was overriding it. Scoped to .ws, which only
   workspace.html carries, so no public page moves. */
.ws .g-logo .g-mark--logotype { height: 16px; }
.ws .g-logo .g-mark--logo { height: 18px; }

/* ==========================================================================
   THE READER'S LIBRARY
   Controls injected by the reader-library block in production-bridge.js.
   They live beside that script rather than in gravitas.css because they style
   nothing the design system draws: every selector here belongs to a node this
   deployment injects, and gravitas.css is the brand system, which should not
   carry rules for elements it does not know exist.

   THE ONE RULE THESE HAVE TO OBEY: DO NOT LOOK LIKE A TAG.

   The first version got this wrong. It was a pill with a hairline border,
   caption text and muted colour — which is, to the pixel, the description of
   `.g-tag`. On a topic page the save control landed directly beneath a row of
   subject tags and read as a fourth tag: something the page was telling you,
   rather than something you could press. Restraint was the right instinct
   and the wrong execution, because a control that recedes past the point of
   looking pressable has not been made quiet, it has been made invisible.

   So the separation is by shape and weight rather than by colour, and it is
   deliberately unambiguous:

     tags    pill, hairline, 13px, muted, transparent  — metadata
     control 10px corners, filled surface, 14px, full-strength text, an icon

   Nothing else on these pages has square-ish corners and a raised surface, so
   the shape alone carries it even in a screenshot with no hover. The pressed
   state then goes solid in the accent, because "you are holding this" is the
   one message here that has earned a filled button.
   ========================================================================== */

.rl-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2xs);
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-pill);
  background: transparent;
  color: var(--g-text-muted);
  font: inherit;
  font-size: var(--g-fs-caption);
  line-height: 1;
  cursor: pointer;
  transition: color var(--g-dur-fast) var(--g-ease-fall),
              border-color var(--g-dur-fast) var(--g-ease-fall),
              background-color var(--g-dur-fast) var(--g-ease-fall);
}
.rl-toggle > svg { width: 1rem; height: 1rem; flex: none; }
.rl-toggle:hover { color: var(--g-text); border-color: var(--g-border-strong); }
.rl-toggle[aria-pressed="true"] {
  color: var(--g-text);
  border-color: var(--g-border-strong);
  background: rgb(var(--g-tint) / 0.10);
}
/* Filled, not merely highlighted. Across a grid of cards the only state a
   reader can read at a glance is solid versus outline. */
.rl-toggle[aria-pressed="true"] > svg { fill: currentColor; }
.rl-toggle:focus-visible { outline: 2px solid var(--g-focus); outline-offset: 2px; }

/* ---- On a card ----------------------------------------------------------
   Top right, inside the card's own anchor, and only fully opaque once it
   holds something: a row of six bright bookmarks on a topics index would read
   as decoration. Always visible on touch, where there is no hover to reveal
   it. */
.rl-card-tray {
  position: absolute;
  top: var(--g-space-2xs);
  right: var(--g-space-2xs);
  z-index: 2;
  display: flex;
  gap: 0.25rem;
}
.entry.rl-has-tray,
.path-card.rl-has-tray,
.game-card.rl-has-tray { position: relative; }
/* The eyebrow already occupies the top-right of an entry card, so make room
   rather than stacking the tray on top of it. */
.entry.rl-has-tray { padding-right: 4.25rem; }

.rl-toggle--card {
  width: 2rem;
  height: 2rem;
  padding: 0;
  justify-content: center;
  border-color: var(--g-hairline);
  background: rgb(var(--g-chrome) / 0.55);
  backdrop-filter: blur(6px);
  opacity: 0.55;
}
.rl-toggle--card[aria-pressed="true"],
.rl-toggle--card:hover,
.rl-toggle--card:focus-visible { opacity: 1; }
@media (hover: none) {
  .rl-toggle--card { opacity: 1; }
}

/* ---- Under a headline --------------------------------------------------
   Sat directly under the tag row at --g-space-md, which is the gap the tags
   use between themselves, so the eye grouped it with them. A full step up
   plus a hairline says "the heading block ended; this is the page offering
   you something". */
.rl-page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-space-2xs) var(--g-space-sm);
  margin-top: var(--g-space-lg);
  padding-top: var(--g-space-sm);
  border-top: 1px solid var(--g-hairline);
}

/* The size and shape that separate a control from a tag. Scoped to the bar
   and the step so the 32px round icon button on a card keeps its own. */
.rl-page-bar .rl-toggle {
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
  background: var(--g-surface-raised);
  color: var(--g-text);
  font-size: var(--g-fs-small);
  font-weight: var(--g-w-medium);
}
.rl-page-bar .rl-toggle > svg { width: 1.05rem; height: 1.05rem; }
.rl-page-bar .rl-toggle:hover {
  background: var(--g-surface-hover);
  border-color: var(--g-border-strong);
}
/* Solid, in the accent. Across a page of outlined chips this is the only
   filled thing, which is what makes "saved" readable at a glance. */
.rl-page-bar .rl-toggle[aria-pressed="true"] {
  background: var(--g-accent);
  border-color: transparent;
  /* The page ground, not a fixed navy — the same correction the header badge
     below carries. On dark the accent is Sisal and a navy label reads cleanly;
     on light the accent is that warmth at ink weight, where a navy label
     collapses to about 1.5:1. --g-bg inverts with the theme and clears 5:1 in
     both. */
  color: var(--g-bg);
  font-weight: var(--g-w-semibold);
}
.rl-page-bar .rl-toggle[aria-pressed="true"]:hover {
  background: var(--g-accent);
  filter: brightness(1.08);
}
.rl-page-bar__note {
  margin: 0;
  color: var(--g-text-subtle);
  font-size: var(--g-fs-caption);
  max-width: 42ch;
}

/* ---- A learning-path step ---------------------------------------------
   This one sits inside .step__links, which is literally a row of .g-tag
   chips ("Video · 14 min", "Essay"), so it had the same collision as the page
   bar and takes the same answer: square-ish corners, a raised surface, and
   full-strength text. */
.rl-step {
  display: inline-flex;
  align-items: center;
  gap: var(--g-space-2xs);
  margin-top: var(--g-space-2xs);
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--g-border);
  border-radius: 10px;
  background: var(--g-surface-raised);
  color: var(--g-text);
  font: inherit;
  font-size: var(--g-fs-small);
  font-weight: var(--g-w-medium);
  line-height: 1;
  cursor: pointer;
}
.rl-step > i {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  border: 1px solid var(--g-border-strong);
  border-radius: 4px;
}
.rl-step:hover { background: var(--g-surface-hover); border-color: var(--g-border-strong); }
.rl-step[aria-pressed="true"] {
  color: var(--g-text);
  border-color: var(--g-signal-positive);
  background: rgb(var(--g-tint) / 0.06);
}
.rl-step[aria-pressed="true"] > i {
  border-color: var(--g-signal-positive);
  background: var(--g-signal-positive);
}
.rl-step:focus-visible { outline: 2px solid var(--g-focus); outline-offset: 2px; }

.rl-path-summary {
  margin-top: var(--g-space-md);
  color: var(--g-text-subtle);
  font-size: var(--g-fs-caption);
}

/* ---- The header trigger ------------------------------------------------
   A count, not a dot. "3" is a reason to open the drawer; a dot only says
   something changed. Zero keeps the button — a control that appears the first
   time you save something is a control nobody discovers. */
/* Footprint and glyph come from the same two tokens the theme toggle and the
   menu button use. It stands next to the toggle, so anything of its own — the
   2.25rem box and the transparent border it used to carry — read as one of the
   pair being slightly wrong rather than as a deliberate difference. */
.rl-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gh-control, 2.5rem);
  height: var(--gh-control, 2.5rem);
  flex: none;
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-pill);
  background: transparent;
  color: var(--g-text-muted);
  cursor: pointer;
  transition: color var(--g-dur) var(--g-ease-orbit),
              border-color var(--g-dur) var(--g-ease-orbit),
              background-color var(--g-dur) var(--g-ease-orbit);
}
.rl-trigger > svg { width: var(--gh-control-icon, 1.125rem); height: var(--gh-control-icon, 1.125rem); display: block; }
.rl-trigger:hover {
  color: var(--g-text);
  border-color: var(--g-border-strong);
  background: rgb(var(--g-tint) / 0.08);
}
.rl-trigger:focus-visible { outline: 2px solid var(--g-focus); outline-offset: 2px; }
.rl-trigger > b {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1.05rem;
  padding: 0 0.22rem;
  border-radius: var(--g-radius-pill);
  background: var(--g-accent);
  /* The numeral is inked in the page ground, not a fixed navy. On dark the
     accent is Sisal and cosmos read cleanly on it; on light the accent is the
     same warmth at ink weight, where a navy numeral collapsed to roughly
     1.5:1. The ground inverts with the theme and clears 5:1 in both. */
  color: var(--g-bg);
  font-size: 0.6875rem;
  font-weight: var(--g-w-semibold);
  line-height: 1.05rem;
  text-align: center;
}
.rl-trigger[data-rl-empty="true"] > b { display: none; }

/* ---- The drawer ------------------------------------------------------- */
/* The lock goes on the root element, not on <body>. site.css sets
   "html { overflow-x: clip }", and a non-visible overflow on the root stops
   the body's own overflow from propagating to the viewport — so
   "body { overflow: hidden }" locked nothing (html kept scrolling) and, worse,
   made the body the scrollport for every position:sticky descendant.
   Opening the drawer inside the pinned topic rail therefore dropped its sticky
   stage back to its static position at the top of a viewport-tall track, and
   the page behind the veil went black. On the root the viewport keeps its
   scroll offset, sticky keeps resolving against it, and the page actually stops
   scrolling. overflow-y only, so the horizontal clip above survives.
   The gutter is reserved for as long as the lock holds, so taking the
   scrollbar away does not shift the page sideways under the drawer. Scoped to
   the locked state rather than declared on the root outright: workspace.html
   sets its own `html { overflow: hidden }`, where a standing gutter would be a
   permanent empty strip down the right of a shell that never scrolls. */
:root.rl-locked { overflow-y: hidden; scrollbar-gutter: stable; }

.rl-drawer { position: fixed; inset: 0; z-index: var(--g-z-modal); }
.rl-drawer__veil {
  position: absolute;
  inset: 0;
  background: rgb(3 3 3 / 0.55);
  animation: rl-fade var(--g-dur) var(--g-ease-fall);
}
.rl-drawer__panel {
  position: absolute;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(26rem, 100%);
  background: var(--g-surface);
  border-left: 1px solid var(--g-border);
  box-shadow: var(--g-shadow);
  animation: rl-slide var(--g-dur) var(--g-ease-orbit);
}
@keyframes rl-fade { from { opacity: 0; } }
@keyframes rl-slide { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .rl-drawer__veil, .rl-drawer__panel { animation: none; }
}

.rl-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-space-sm);
  padding: var(--g-space-sm) var(--g-space-md);
  border-bottom: 1px solid var(--g-hairline);
}
.rl-drawer__head h2 {
  margin: 0;
  font-size: var(--g-fs-h4);
  letter-spacing: var(--g-track-head);
}
.rl-drawer__close {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--g-radius-pill);
  background: transparent;
  color: var(--g-text-muted);
  cursor: pointer;
}
.rl-drawer__close > svg { width: 1.05rem; height: 1.05rem; }
.rl-drawer__close:hover { color: var(--g-text); border-color: var(--g-border); }

.rl-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--g-space-md);
  display: grid;
  gap: var(--g-space-lg);
  align-content: start;
}
.rl-drawer__foot {
  padding: var(--g-space-md);
  border-top: 1px solid var(--g-hairline);
  background: var(--g-surface-sunken);
}
.rl-cta { width: 100%; justify-content: center; }
.rl-foot__note {
  margin: var(--g-space-2xs) 0 0;
  color: var(--g-text-subtle);
  font-size: var(--g-fs-caption);
  line-height: var(--g-lh-snug);
}

.rl-group { display: grid; gap: var(--g-space-2xs); }
.rl-group > h3 {
  margin: 0;
  font-size: var(--g-fs-eyebrow);
  font-weight: var(--g-w-semibold);
  letter-spacing: var(--g-track-eyebrow);
  text-transform: uppercase;
  color: var(--g-text-subtle);
}
.rl-group__hint {
  margin: 0 0 var(--g-space-2xs);
  color: var(--g-text-subtle);
  font-size: var(--g-fs-caption);
  line-height: var(--g-lh-snug);
}

.rl-row {
  display: flex;
  align-items: flex-start;
  gap: var(--g-space-2xs);
  padding: var(--g-space-2xs) 0;
  border-bottom: 1px solid var(--g-hairline);
}
.rl-row:last-child { border-bottom: 0; }
.rl-row__link {
  flex: 1;
  display: grid;
  gap: 0.2rem;
  text-decoration: none;
  color: inherit;
}
.rl-row__link > strong {
  font-size: var(--g-fs-small);
  font-weight: var(--g-w-medium);
  line-height: var(--g-lh-snug);
}
.rl-row__link > small { color: var(--g-text-subtle); font-size: var(--g-fs-caption); }
.rl-row__link:hover > strong { text-decoration: underline; }
.rl-row__drop {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--g-radius-pill);
  background: transparent;
  color: var(--g-text-subtle);
  cursor: pointer;
}
.rl-row__drop > svg { width: 0.85rem; height: 0.85rem; }
.rl-row__drop:hover { color: var(--g-signal-critical); }

.rl-meter {
  height: 3px;
  margin-top: 0.3rem;
  border-radius: var(--g-radius-pill);
  background: rgb(var(--g-tint) / 0.16);
  overflow: hidden;
}
.rl-meter > i { display: block; height: 100%; background: var(--g-accent); }

.rl-blank { color: var(--g-text-muted); font-size: var(--g-fs-small); line-height: var(--g-lh-body); }
.rl-blank p { margin: 0 0 var(--g-space-2xs); }
.rl-alert {
  margin: 0;
  padding: var(--g-space-2xs) var(--g-space-xs);
  border: 1px solid var(--g-signal-caution);
  border-radius: var(--g-radius-sm);
  color: var(--g-text-muted);
  font-size: var(--g-fs-caption);
  line-height: var(--g-lh-snug);
}