/* ============================================================
   ABAFT — User Guide / Help Center (/user-guide/)
   Ported from the design export's own inline styles: a centered
   Newsreader-serif "How can we help?" hero with a search bar and
   audience jump-chips, then white/airy audience sections each with
   a 3-column grid of category cards whose sub-topics expand in place
   via native <details> disclosure, then a purple "real person
   answers" CTA. Hand-written (NOT Tailwind); loaded after
   utilities.css + main.css only on templates/page-user-guide.php.
   Fonts are self-hosted (latin subset).
   ============================================================ */

/* --- Self-hosted display + body faces (variable, latin) --- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2-variations'),
       url('../fonts/newsreader-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2-variations'),
       url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
}

/* --- Local design tokens (scoped to .ug) --- */
.ug {
  --ug-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ug-sans: 'Hanken Grotesk', var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);

  --ug-cream: #FAF5EE;
  --ug-sand-1: #F3EADB;
  --ug-sand-2: #EFE6D6;
  --ug-card: #FFFFFF;

  --ug-ink: #241A3D;
  --ug-ink-2: #4A4360;
  --ug-ink-3: #3A3450;
  --ug-muted: #8B84A0;
  --ug-muted-2: #9089A2;

  --ug-purple: #5B3FD9;
  --ug-purple-deep: #220066;
  --ug-purple-soft: #E9E3FA;
  --ug-coral: #FF7A5C;
  --ug-line: rgba(34, 0, 102, 0.08);
  --ug-line-2: rgba(34, 0, 102, 0.16);

  /* audience accent (overridden per section) */
  --ug-a: var(--ug-purple);
  --ug-a-soft: var(--ug-purple-soft);

  background: var(--ug-cream);
  color: var(--ug-ink);
  font-family: var(--ug-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ug *,
.ug *::before,
.ug *::after { box-sizing: border-box; }

/* Audience accent mapping (chips + section + card num pull from here). */
.ug-a-neutral   { --ug-a: #5B3FD9; --ug-a-soft: #E9E3FA; --ug-a-line: rgba(91, 63, 217, 0.3); }
.ug-a-candidate { --ug-a: #5B3FD9; --ug-a-soft: #E9E3FA; --ug-a-line: rgba(91, 63, 217, 0.3); }
.ug-a-rbt       { --ug-a: #187B4E; --ug-a-soft: #DCF3E7; --ug-a-line: rgba(30, 158, 99, 0.35); }
.ug-a-supervisor{ --ug-a: #B54A2E; --ug-a-soft: #FBE7DA; --ug-a-line: rgba(181, 74, 46, 0.3); }

/* Audience section background bands (ported from the export). */
.ug-bg-cream { background: var(--ug-cream); }
.ug-bg-white { background: #FFFFFF; }
.ug-bg-sand  { background: linear-gradient(180deg, #F3EADB, #EFE6D6); }

/* =========================================================== hero */
.ug-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 24px 46px;
  background: var(--ug-cream);
  text-align: center;
}
.ug-hero-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(91, 63, 217, 0.10), transparent 60%),
    radial-gradient(760px 460px at 8% 108%, rgba(255, 122, 92, 0.08), transparent 62%);
  pointer-events: none;
}
.ug-hero-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

/* custom in-hero breadcrumb (this template only; NOT the site gray bar) */
.ug-breadcrumb {
  margin: 0 0 22px;
}
.ug-breadcrumb-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.005em;
}
.ug-breadcrumb-item { display: inline-flex; align-items: center; }
.ug-breadcrumb-item a {
  color: var(--ug-purple);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 0.15s ease;
}
.ug-breadcrumb-item a:hover { opacity: 1; text-decoration: underline; }
.ug-breadcrumb-item [aria-current="page"] {
  color: var(--ug-purple);
  font-weight: 500;
}
.ug-breadcrumb-sep {
  color: var(--ug-purple);
  opacity: 0.4;
  font-weight: 300;
  user-select: none;
}

.ug-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ug-purple);
}
.ug-eyebrow-rule {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ug-coral);
}

.ug-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 16px;
}
.ug-h1-kicker {
  order: 2;
  margin-top: 14px;
  font-family: var(--ug-serif);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.7vw, 1.12rem);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--ug-muted);
}
.ug-h1-display {
  order: 1;
  font-family: var(--ug-serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 6.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ug-ink);
  text-wrap: pretty;
}
.ug-h1-display em { font-style: italic; }

.ug-hero-lede {
  margin: 0 auto 20px;
  max-width: 600px;
  font-weight: 400;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  color: #5A5270;
  text-wrap: pretty;
}
.ug-hero-lede strong { color: var(--ug-ink); font-weight: 600; }
.ug sup { font-size: 0.58em; font-weight: 600; }

.ug-updated {
  margin: 0 0 26px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ug-muted);
}

/* search */
.ug-search {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}
.ug-search-i {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--ug-muted-2);
  pointer-events: none;
}
.ug-search-input {
  width: 100%;
  padding: 18px 22px 18px 52px;
  font-family: var(--ug-sans);
  font-size: 16.5px;
  color: var(--ug-ink);
  background: #fff;
  border: 1.5px solid var(--ug-line-2);
  border-radius: 999px;
  outline: none;
  box-shadow: 0 20px 40px -22px rgba(34, 0, 102, 0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ug-search-input::placeholder { color: var(--ug-muted-2); }
.ug-search-input:focus {
  border-color: var(--ug-purple);
  box-shadow: 0 0 0 4px rgba(91, 63, 217, 0.12);
}

/* jump chips */
.ug-chips {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ug-chips-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--ug-muted);
  margin-right: 2px;
}
.ug-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border-radius: 999px;
  border: 1.5px solid var(--ug-a-line);
  background: #fff;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ug-a);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ug-chip:hover { background: var(--ug-a); color: #fff; transform: translateY(-1px); }
.ug-chip-i { width: 14px; height: 14px; }

/* no-results (progressive enhancement) */
.ug-noresults {
  max-width: 640px;
  margin: 8px auto -20px;
  padding: 22px 24px;
  text-align: center;
  font-weight: 500;
  color: var(--ug-ink-2);
  background: #fff;
  border: 1.5px dashed var(--ug-line-2);
  border-radius: 16px;
}
.ug-noresults a { color: var(--ug-purple); font-weight: 700; text-decoration: none; }
.ug-noresults a:hover { text-decoration: underline; }

/* =========================================================== audience sections */
.ug-aud {
  padding: 72px 24px 80px;
  border-top: 1px solid var(--ug-line);
  scroll-margin-top: 84px;
}
.ug-aud-inner { max-width: 1168px; margin: 0 auto; }

.ug-aud-head { max-width: 660px; margin-bottom: 38px; }
.ug-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 15px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ug-a);
}
.ug-kicker-rule { width: 20px; height: 2px; border-radius: 2px; background: var(--ug-coral); }
.ug-aud-h {
  margin: 0 0 14px;
  font-family: var(--ug-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ug-ink);
  text-wrap: pretty;
}
.ug-aud-intro {
  margin: 0;
  font-weight: 400;
  font-size: 1.09rem;
  line-height: 1.6;
  color: #5A5270;
  text-wrap: pretty;
}

/* 3-column category card grid */
.ug-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}
.ug-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ug-line);
  border-radius: 20px;
  padding: 26px 26px 12px;
  box-shadow: 0 1px 2px rgba(34, 0, 102, 0.03);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ug-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -22px rgba(34, 0, 102, 0.4);
}
.ug-card-num {
  font-family: var(--ug-serif);
  font-weight: 600;
  font-size: 13px;
  color: var(--ug-a);
}
.ug-card-h {
  margin: 8px 0 4px;
  font-family: var(--ug-serif);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ug-ink);
}
.ug-card-blurb {
  margin: 0 0 14px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ug-muted);
}

/* sub-topic list = native <details> disclosures */
.ug-topics {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(34, 0, 102, 0.07);
}
.ug-topic { border-bottom: 1px solid rgba(34, 0, 102, 0.05); }
.ug-topic:last-child { border-bottom: none; }
.ug-topic-sum {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s ease;
}
.ug-topic-sum::-webkit-details-marker { display: none; }
.ug-topic-sum:hover { background: rgba(91, 63, 217, 0.04); }
/* The question is an <h4> for the document outline (WO-2). Reset the UA heading
   margin/size so promoting it from a <span> changes nothing visually. */
.ug-topic-t {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ug-ink-3);
}
.ug-topic-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.ug-topic-read {
  font-weight: 500;
  font-size: 12px;
  color: var(--ug-muted-2);
  white-space: nowrap;
}
/* "Opens full screen" affordance (owner feedback 2026-07-28). The old down-caret
   read as an in-place accordion; this control actually opens a full-viewport
   overlay, so it uses the expand-to-full-screen corner brackets sitting in a
   soft chip that fills in on hover — a button, not a disclosure arrow. It never
   rotates. */
.ug-topic-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--ug-muted-2);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.ug-topic-open-i { width: 15px; height: 15px; }
.ug-topic-sum:hover .ug-topic-open,
.ug-topic-sum:focus-visible .ug-topic-open {
  background: rgba(91, 63, 217, 0.1);
  color: var(--ug-a);
  transform: scale(1.06);
}
.ug-topic[open] > .ug-topic-sum .ug-topic-open { color: var(--ug-a); }
.ug-topic[open] > .ug-topic-sum .ug-topic-t { color: var(--ug-a); }

.ug-topic-body {
  padding: 4px 2px 16px;
  animation: ug-reveal 0.22s ease both;
}
@keyframes ug-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* -------- reading panel (shared by JS-off inline open + JS overlay) --------
   ORIENTATION LAYOUT PROTOCOL. The layout is driven purely by the shot's
   real orientation, computed server-side (landscape when width > height).

   - PORTRAIT (.ug-topic-panel--portrait): the classic two-column layout, copy
     on the left and the framed shot (a portrait form/modal, e.g. Log Hours) on
     the side (right). The figure sits first in source for the landscape case,
     so portrait reorders it to the right column.
   - LANDSCAPE (.ug-topic-panel--landscape): a single column with the framed
     shot FULL WIDTH on top and the answer-first copy BELOW it, so a wide
     dashboard/roster is large and clearly legible.

   In a narrow card (JS off, inline <details>) both collapse to one column.
   Inside the full-screen overlay (JS on) the same orientation rules apply at a
   larger scale (see .ug-overlay rules). All copy is server-rendered either way. */
.ug-topic-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
.ug-topic-copy { min-width: 0; }

/* Portrait: copy left, framed shot on the side (right). Figure is source-first,
   so pin it to column 2 and pull the copy into column 1. */
.ug-topic-panel--portrait {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 26px;
}
.ug-topic-panel--portrait > .ug-topic-copy { grid-column: 1; grid-row: 1; }
.ug-topic-panel--portrait > .ug-shot       { grid-column: 2; grid-row: 1; }
/* When the live demo replaces the static shot, it is the right-column graphic. */
.ug-topic-panel--portrait > .ug-demo-slot  { grid-column: 2; grid-row: 1; }

/* Landscape: single column, figure full width on top, copy below. */
.ug-topic-panel--landscape { grid-template-columns: 1fr; }
.ug-topic-panel--landscape > .ug-shot       { order: 1; }
.ug-topic-panel--landscape > .ug-topic-copy { order: 2; }

/* Screenshot slot / app-window frame. A real capture (.ug-shot--real) reads as
   a clean app window: rounded corners, a subtle 1px palette border, a soft drop
   shadow, and a light top chrome bar with three dots. The placeholder keeps the
   original soft frame.

   CORNER CLIP (owner-flagged on Log Hours, 2026-07-24): the frame rounds AND
   clips its contents into ONE rounded rectangle. `overflow: hidden` on the
   figure is the clip, but a 1px border + a paint-containing child (the chrome
   bar gradient, then a real <img>) can bleed a square corner over the rounded
   frame in Blink/WebKit. So we ALSO round the inner run to the frame's inner
   radius (16px outer minus the 1px border = 15px): the chrome bar's TOP corners
   and the image's BOTTOM corners are rounded to match, so the chrome + image
   read as a single clipped rounded rectangle with no square-corner overhang.
   `position: relative` keeps the clip stacked correctly. */
.ug-shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--ug-line-2);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20px 44px -24px rgba(34, 0, 102, 0.4);
}
.ug-shot img { display: block; width: 100%; height: auto; }

/* Portrait shot on the side: cap its width so it does not tower over the copy. */
.ug-topic-panel--portrait > .ug-shot--real { margin-top: 4px; }

/* ------------------------------------------------------ animated demo fit
   The animated app demo (.abaft-demo, from inc/app-demo.php + app-demo.css)
   replaces the static screenshot in a topic's media slot when JS + motion are
   on. Unlike the static <img> — which was `width:100%; height:auto` and so
   scaled to the slot — the demo has its own large intrinsic size (the real
   form is tall), so left alone it overflows the overlay and dwarfs the copy.

   FIT MODEL — two layers, so the demo reads at the SAME footprint the static
   screenshot did (portrait, on the side, comfortably within the overlay):

   1. DENSITY. The demo's own base sizing is generous (built for a full-width
      hero). In this side-column slot we tighten its paddings / margins / font
      sizes so its NATURAL aspect at column width approaches the real Log Hours
      modal (~1200x1620 = 0.74 w/h) instead of the spacious ~0.42 — i.e. much
      less tall — so at ~395px wide it lands near the screenshot's ~530px tall.

   2. SAFETY SCALE. Even so it must NEVER exceed the overlay's visible height on
      any viewport. user-guide.js measures the demo's natural height vs the
      available height and, only if it is still too tall, scales the whole demo
      DOWN with `transform: scale()` (<= 1, so text stays crisp — never up),
      reserving the scaled box so the copy lays out correctly beside it:
        --ug-demo-fit  the scale factor (default 1)
        --ug-demo-h    the reserved (scaled) height for the wrapper
   With JS off / reduced motion the demo never shows (the static screenshot is
   the fallback), so layer 2 is inert then; layer 1 is harmless. */
.ug-demo-slot {
  display: block;
  width: 100%;
}
.ug-demo-slot .abaft-demo {
  width: 100%;
  transform: scale(var(--ug-demo-fit, 1));
  transform-origin: top center;
  will-change: transform;
}
/* Once JS has measured and applied a fit scale, the wrapper reserves the SCALED
   height so the portrait two-column layout balances (copy beside a correctly-
   sized box) and nothing overflows. Before measurement height is auto. */
.ug-demo-slot.is-fit { height: var(--ug-demo-h, auto); overflow: hidden; }

/* --- layer 1: density overrides (scoped to the guide's demo slot only) ---
   Chained through `.abaft-demo` (0,3,0) so they win over app-demo.css's own
   `.abaft-demo .ad-*` base rules (0,2,0) regardless of stylesheet order. */
/* (Chrome + stage sizing now handled by the UNFRAME rules below — the outer
   window chrome is removed for the demo, so it no longer needs its own padding.) */
.ug-demo-slot .abaft-demo .ad-modal-header { padding: 0.6rem 0.8rem; }
.ug-demo-slot .abaft-demo .ad-modal-title { font-size: 0.9rem; }
.ug-demo-slot .abaft-demo .ad-modal-body { padding: 0.8rem; }
.ug-demo-slot .abaft-demo .ad-form-group { margin-bottom: 0.5rem; }
.ug-demo-slot .abaft-demo .ad-form-group.compact { margin-bottom: 0.15rem; }
.ug-demo-slot .abaft-demo .ad-label { margin-bottom: 0.2rem; font-size: 0.68rem; }
.ug-demo-slot .abaft-demo .ad-label.xs { font-size: 0.6rem; }
.ug-demo-slot .abaft-demo .ad-input,
.ug-demo-slot .abaft-demo .ad-select,
.ug-demo-slot .abaft-demo .ad-time-part,
.ug-demo-slot .abaft-demo .ad-time-sep { font-size: 0.76rem; }
.ug-demo-slot .abaft-demo .ad-input,
.ug-demo-slot .abaft-demo .ad-select { padding: 0.4rem 0.6rem; }
.ug-demo-slot .abaft-demo .ad-time-part { padding: 0.4rem 0; }
.ug-demo-slot .abaft-demo .ad-time-ampm { padding: 0.4rem 0.5rem; font-size: 0.64rem; }
.ug-demo-slot .abaft-demo .ad-row { gap: 0.55rem; }
.ug-demo-slot .abaft-demo .ad-add-btn { width: 34px; height: 33px; font-size: 0.95rem; }
.ug-demo-slot .abaft-demo .ad-allotment { padding: 0.65rem; margin-bottom: 0.5rem; }
.ug-demo-slot .abaft-demo .ad-allotment-head { margin-bottom: 0.4rem; }
.ug-demo-slot .abaft-demo .ad-alloc-section { padding: 0.35rem; margin-bottom: 0.3rem; }
.ug-demo-slot .abaft-demo .ad-alloc-title { font-size: 0.56rem; margin-bottom: 0.25rem; }
.ug-demo-slot .abaft-demo .ad-hm-box { padding: 0.35rem 0.2rem; font-size: 0.74rem; width: 2.1rem; }
.ug-demo-slot .abaft-demo .ad-remaining,
.ug-demo-slot .abaft-demo .ad-allotment-label { font-size: 0.68rem; }
.ug-demo-slot .abaft-demo .ad-toggles { gap: 0.4rem; margin-bottom: 0.5rem; }
.ug-demo-slot .abaft-demo .ad-toggle { padding: 0.45rem 0.4rem; font-size: 0.68rem; }
.ug-demo-slot .abaft-demo .ad-obs-row.is-shown { gap: 0.55rem; margin-bottom: 0.5rem; }
.ug-demo-slot .abaft-demo .ad-textarea { padding: 0.4rem 0.6rem; font-size: 0.76rem; min-height: 2.4rem; }
.ug-demo-slot .abaft-demo .ad-actions { gap: 0.5rem; }
.ug-demo-slot .abaft-demo .ad-btn { padding: 0.45rem 0.9rem; font-size: 0.74rem; }

/* In the overlay the demo sits in the portrait side column; keep it top-aligned
   so it reads beside the copy exactly like the static screenshot did. */
.ug-overlay-content .ug-demo-slot { align-self: start; }

/* --- UNFRAME THE DEMO (owner ruling 2026-07-24) -------------------------------
   The live app-demo carries its OWN app-window chrome frame (a top bar with the
   "ABA Fieldwork Tracker" title + traffic-light dots), which double-frames the
   modal that ALREADY has its own "Log Fieldwork Hours" header. In the user-guide
   media slot we drop that outer chrome/frame for the DEMO ONLY so the form fills
   the whole slot and renders as large and clear as possible. We KEEP the Replay
   control (moved to sit unobtrusively over the top-right of the form) and, of
   course, the modal's own header. The STATIC screenshot frame (.ug-shot--real /
   .ug-shot-chrome) is untouched — only .ug-demo-slot .abaft-demo loses its frame.
   Scoped under .ug-demo-slot so the reusable demo elsewhere is unaffected. */
.ug-demo-slot .abaft-demo {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Drop the redundant "second frame" chrome (dots + title). The Replay control is
   a centered row BELOW the whole form. This works because the form height is held
   CONSTANT through the animation (see the notes/obs rules below), so the height-fit
   reserves the full box and neither the bottom border nor Replay ever clip. */
.ug-demo-slot .abaft-demo .abaft-demo-chrome {
  order: 2;
  position: static;
  margin: 0;
  padding: 14px 0 0;
  background: transparent;
  border-bottom: none;
  display: flex;
  justify-content: center;
}
.ug-demo-slot .abaft-demo .abaft-demo-dot,
.ug-demo-slot .abaft-demo .abaft-demo-chrome-title { display: none; }
.ug-demo-slot .abaft-demo .abaft-demo-replay {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(34, 0, 102, 0.14);
}
/* With the outer frame gone, let the modal fill the slot: kill the stage padding
   that used to inset the modal inside the window chrome. The form card keeps a
   clean defined edge via a light BORDER only. NO shadow. */
.ug-demo-slot .abaft-demo .abaft-demo-stage { order: 1; padding: 0; }
.ug-demo-slot .abaft-demo .ad-modal {
  border: 1px solid rgba(34, 0, 102, 0.16);
  box-shadow: none;
}
/* The Notes textbox is sized for its final two lines from the start so its typing
   does not nudge the height. The Observation row DOES reveal and grow the form on
   toggle (intended) -- the height-fit (user-guide.js) measures the form with the
   obs row shown, so the reserved box already fits the fully-revealed form and the
   bottom border + Replay never clip when it expands. */
.ug-demo-slot .abaft-demo .ad-textarea { min-height: 4.35rem; }

/* --- SIGN demo in a LANDSCAPE slot (the reports topic) ------------------------
   The sign-verification-form demo is a PORTRAIT modal, but it replaces the
   landscape guide-reports.png so its media slot spans the full overlay width.
   Left unconstrained a portrait modal stretches to ~1000px and reads sparse. So
   for THIS demo we cap the form to a comfortable portrait-ish width and center
   it in the slot, so it reads like a real signing modal (parity with the
   portrait Log Hours demo). Scoped to the sign demo, so the Log Hours demo (a
   portrait shot, side column) is untouched. The fit measures the CAPPED box, so
   no clip. */
.ug-demo-slot .abaft-demo--sign-verification-form {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
/* Density: this demo has no allotment / h-m grids, so it only needs the modal
   shell + summary + pad tightened to sit comfortably in the reserved height. */
.ug-demo-slot .abaft-demo--sign-verification-form .ad-vf-summary { padding: 0.75rem 0.85rem; margin-bottom: 0.85rem; }
.ug-demo-slot .abaft-demo--sign-verification-form .ad-vf-stat-v { font-size: 0.95rem; }
.ug-demo-slot .abaft-demo--sign-verification-form .ad-sig-pad { height: 104px; }
.ug-demo-slot .abaft-demo--sign-verification-form .ad-sig-ink { font-size: 1.75rem; }
.ug-demo-slot .abaft-demo--sign-verification-form .ad-sig-attest { font-size: 0.66rem; }

/* --- IMPORT-MONTH demo (the import-hours topic) ------------------------------
   This is a PORTRAIT modal in a PORTRAIT side column (its fallback is the
   placeholder shot, so the slot is the same right column the Log Hours demo
   sits in). It inherits the shared .ad-* density above; the extras below just
   tighten this demo's own bits (the "When"/"Where" section labels, the added-
   confirmation banner) so the tall form sits comfortably in the reserved
   height. The confirmation lives in the SAME fixed action slot as Save/Cancel,
   so the form height is constant and the fit reserve stays exact (no clip). */
.ug-demo-slot .abaft-demo--import-month .ad-imp-body > .ad-label { margin-bottom: 0.25rem; }
.ug-demo-slot .abaft-demo--import-month .ad-imp-added { padding: 0.55rem 0.65rem; }
.ug-demo-slot .abaft-demo--import-month .ad-imp-added-text { font-size: 0.7rem; }
.ug-demo-slot .abaft-demo--import-month .ad-imp-added-check { width: 19px; height: 19px; }
.ug-demo-slot .abaft-demo--import-month .ad-imp-added-check svg { width: 11px; height: 11px; }

/* --- LOG-RBT-SESSION demo (the RBT "log a whole day" topic) -------------------
   This is a PORTRAIT modal in a PORTRAIT side column (its fallback is the
   placeholder shot, so the slot is the same right column the Log Hours demo
   sits in — no width cap). It inherits the shared .ad-* density above; the
   extras below tighten this demo's own bits (the session slot card, the format
   segment, the "Supervised" sub-row, and the saved-confirmation banner) so the
   tall day form sits comfortably in the reserved height. The confirmation lives
   in the SAME fixed action slot as Save Entry, and the Supervised sub-row is
   measured revealed by the height-fit, so the form height is accounted for and
   the fit reserve stays exact (no clip, no gap). */
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-body > .ad-label { margin-bottom: 0.25rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-slot-head { padding: 0.3rem 0.6rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-chip { font-size: 0.56rem; padding: 0.12rem 0.5rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-dur { font-size: 0.7rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-slot-body { padding: 0.6rem 0.6rem 0.65rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-slot-row { gap: 0.5rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-slot-row .ad-time { min-width: 6.6rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-sup-field { flex-basis: 100%; min-width: 0; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-extra { gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.5rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-suprow { gap: 0.4rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-seg-btn { padding: 0.4rem 0.7rem; font-size: 0.68rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-saved { padding: 0.55rem 0.65rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-saved-text { font-size: 0.7rem; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-saved-check { width: 19px; height: 19px; }
.ug-demo-slot .abaft-demo--log-rbt-session .ad-rbt-saved-check svg { width: 11px; height: 11px; }

/* Subtle app-window chrome bar (real captures only). Its TOP corners round to
   the frame's inner radius so its square corners never poke past the rounded
   frame (see the CORNER CLIP note on .ug-shot). */
.ug-shot-chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #F7F4FC, #F1ECF9);
  border-bottom: 1px solid var(--ug-line);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.ug-shot-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #D9D0EC;
}
.ug-shot-dot:nth-child(1) { background: #FF7A5C; }
.ug-shot-dot:nth-child(2) { background: #E9C46A; }
.ug-shot-dot:nth-child(3) { background: rgba(91, 63, 217, 0.45); }

/* Real per-topic app capture. Full-width inside its frame, never stretched. The
   figure rounds + clips (overflow: hidden); the image fills below the chrome bar
   and rounds its own BOTTOM corners to the frame's inner radius so its square
   corners never poke past the rounded frame (see CORNER CLIP on .ug-shot). */
.ug-shot-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  background: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* A topic with no capture and no demo renders no media element at all, so its
   copy simply runs the full width of the reading panel. (There is no faux
   screenshot placeholder: every topic with a screen behind it now carries a
   real capture, and a decorative stand-in would read as a broken image.) */
.ug-topic-panel--nomedia {
  display: block;
}
.ug-topic-panel--nomedia .ug-topic-copy {
  max-width: 72ch;
}

.ug-lead {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ug-ink);
}
.ug-para {
  margin: 0 0 12px;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.66;
  color: var(--ug-ink-2);
}
.ug-para:last-of-type { margin-bottom: 0; }

.ug-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px dashed rgba(34, 0, 102, 0.1);
}
.ug-links-label {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ug-muted);
  margin-right: 2px;
}
.ug-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ug-a);
  text-decoration: none;
  background: var(--ug-a-soft);
  padding: 5px 12px;
  border-radius: 999px;
  transition: filter 0.15s ease;
}
.ug-link:hover { filter: brightness(0.95); text-decoration: none; }

/* =========================================================== CTA */
.ug-cta {
  padding: 0 24px 92px;
  background: #fff;
}
.ug-cta-inner { max-width: 1168px; margin: 0 auto; }
.ug-cta-card {
  position: relative;
  overflow: hidden;
  background: var(--ug-purple-deep);
  border-radius: 24px;
  padding: 46px 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.ug-cta-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 300px at 90% -20%, rgba(255, 122, 92, 0.18), transparent 60%);
  pointer-events: none;
}
.ug-cta-text { position: relative; }
.ug-cta-h {
  margin: 0 0 10px;
  font-family: var(--ug-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.05rem);
  line-height: 1.12;
  color: #fff;
  text-wrap: pretty;
}
.ug-cta-p {
  margin: 0;
  max-width: 520px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #B9AEE0;
}
.ug-cta-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ug-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ug-sans);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.ug-cta-primary {
  background: #fff;
  color: var(--ug-purple-deep);
  padding: 15px 26px;
}
.ug-cta-primary:hover { transform: translateY(-3px); }
.ug-cta-btn-i { width: 17px; height: 17px; }
.ug-cta-ghost {
  color: #E9E3FA;
  padding: 14px 10px;
}
.ug-cta-ghost:hover { color: #fff; }

/* =========================================================== full-screen overlay
   The reading view. A topic's server-rendered .ug-topic-body is MOVED here by
   user-guide.js on open and restored on close (progressive enhancement; empty
   + hidden with JS off). position: fixed / inset: 0 covers the whole viewport
   including the site header. Exit is deliberately easy: a large close button
   top-right, ESC, backdrop click, and (mobile) swipe-down. */
.ug-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000; /* above the sticky site header + everything */
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.ug-overlay[hidden] { display: none; }

.ug-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 16, 46, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.ug-overlay.is-open .ug-overlay-backdrop { opacity: 1; }

.ug-overlay-dialog {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #fff;
  outline: none;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -10px 60px -10px rgba(24, 16, 46, 0.5);
}
.ug-overlay.is-open .ug-overlay-dialog { opacity: 1; transform: none; }

/* top bar: eyebrow + the prominent close button (large tap target) */
.ug-overlay-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--ug-line);
}
.ug-overlay-eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ug-muted);
}
.ug-overlay-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  font-family: var(--ug-sans);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--ug-purple);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ug-overlay-close:hover { background: var(--ug-purple-deep); transform: translateY(-1px); }
.ug-overlay-close:focus-visible { outline: 3px solid rgba(91, 63, 217, 0.4); outline-offset: 2px; }
.ug-overlay-close-i { width: 18px; height: 18px; }

/* scroll region + generous reading column */
.ug-overlay-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ug-overlay-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 40px 72px;
}
.ug-overlay-grip {
  display: none; /* mobile-only drag handle, shown in the media query */
}
.ug-overlay-title {
  margin: 0 0 24px;
  max-width: 800px;
  font-family: var(--ug-serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.4vw, 2.15rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ug-ink);
  text-wrap: pretty;
  outline: none;
}

/* The moved-in panel keeps its orientation layout, scaled up for the overlay. */
.ug-overlay-content .ug-topic-body {
  padding: 0;
  animation: none;
}
/* Portrait in the overlay: generous two columns, copy beside a sticky shot. */
.ug-overlay-content .ug-topic-panel--portrait {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 44px;
}
.ug-overlay-content .ug-topic-panel--portrait > .ug-shot {
  position: sticky;
  top: 8px;
}

/* --- TITLE ABOVE THE COPY for the PORTRAIT/side layout (owner ruling 2026-07-24)
   For portrait topics (the demo + any portrait shot) the topic TITLE is MOVED by
   user-guide.js from the top of the overlay into the LEFT/copy column, directly
   above the answer-first copy, so the GRAPHIC can anchor to the TOP of the
   content area and use the full available height (it sits higher, gets more room).
   Net: left column = [title][copy][links]; right column = [graphic, top-aligned].
   For LANDSCAPE the title STAYS on top (title, then full-width shot, then copy) —
   the overlay keeps its default markup there. The moved-in title keeps the same
   heading semantics (it is the SAME <h2 data-ug-overlay-title>, so still exactly
   one accessible heading per open topic). */

/* When the title lives in the top bar row (landscape / default), it keeps the
   original top spacing set on .ug-overlay-title. When JS relocates it into the
   copy column (portrait), the overlay gets .is-title-in-copy: hide the empty top
   slot's margin and let the in-column title lead the copy instead. */
.ug-overlay.is-title-in-copy .ug-overlay-title.is-relocated {
  margin: 0 0 18px;
  max-width: none;
}
/* The graphic anchors to the very top of the content area and takes the full
   height available beside the (now taller) left column, so it reads big + high.
   No sticky offset needed — it starts at the top and the copy flows past it. */
.ug-overlay.is-title-in-copy .ug-topic-panel--portrait { align-items: stretch; }
.ug-overlay.is-title-in-copy .ug-topic-panel--portrait > .ug-shot,
.ug-overlay.is-title-in-copy .ug-topic-panel--portrait > .ug-demo-slot {
  align-self: start;
  position: sticky;
  top: 0;
}
/* Landscape in the overlay: the full-width shot sits big on top, copy below. */
.ug-overlay-content .ug-topic-panel--landscape {
  gap: 32px;
}
.ug-overlay-content .ug-topic-copy { max-width: 820px; }
.ug-overlay-content .ug-lead { font-size: 16px; }
.ug-overlay-content .ug-para { font-size: 15.5px; }
.ug-overlay-content .ug-shot { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .ug-overlay-backdrop,
  .ug-overlay-dialog { transition: none; }
  .ug-overlay-dialog { transform: none; }
}

/* =========================================================== filter states */
.ug-topic[hidden],
.ug-card[hidden],
.ug-aud[hidden] { display: none !important; }

/* Body scroll lock while the overlay is open (JS adds this to <html>). */
.ug-scroll-locked { overflow: hidden; }
.ug-scroll-locked body { overflow: hidden; }

/* =========================================================== mobile */
@media (max-width: 900px) {
  .ug-grid { grid-template-columns: 1fr; }
  /* MOBILE: always single column, framed shot full width, image consistently
     above the copy for every orientation. Overrides both the portrait
     two-column and the desktop grid ordering. */
  .ug-topic-panel,
  .ug-topic-panel--portrait,
  .ug-topic-panel--landscape,
  .ug-overlay-content .ug-topic-panel--portrait,
  .ug-overlay-content .ug-topic-panel--landscape {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .ug-topic-panel > .ug-shot,
  .ug-topic-panel > .ug-topic-copy,
  .ug-topic-panel--portrait > .ug-shot,
  .ug-topic-panel--portrait > .ug-topic-copy {
    grid-column: 1;
    grid-row: auto;
  }
  .ug-topic-panel > .ug-shot,
  .ug-topic-panel--portrait > .ug-shot { order: 1; margin-top: 0; }
  .ug-topic-panel > .ug-topic-copy,
  .ug-topic-panel--portrait > .ug-topic-copy { order: 2; }
  .ug-overlay-content .ug-topic-panel--portrait > .ug-shot { position: static; top: auto; }
  /* MOBILE demo slot: stack it like the static shot — single column, on top, NOT
     sticky/positioned. Clears the desktop portrait col-2 pin and the title-in-copy
     sticky rule so the demo fills the column and the title+copy flow below it,
     with the relocated title leading the copy ("title above copy"). */
  .ug-topic-panel--portrait > .ug-demo-slot,
  .ug-overlay.is-title-in-copy .ug-topic-panel--portrait > .ug-demo-slot {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    position: static;
    top: auto;
  }
  .ug-overlay-inner { padding: 28px 24px 64px; }
}

/* Mobile overlay: full-screen sheet with an easy, obvious exit. The dialog
   fills the viewport, a drag-handle "grip" signals swipe-down-to-dismiss
   (wired in user-guide.js), and the close button keeps its 44px tap target. */
@media (max-width: 640px) {
  .ug-overlay-dialog { max-width: none; box-shadow: none; }
  .ug-overlay-bar { padding: 12px 16px; }
  .ug-overlay-inner { padding: 8px 20px 72px; }
  .ug-overlay-grip {
    display: block;
    width: 44px;
    height: 5px;
    margin: 10px auto 18px;
    border-radius: 999px;
    background: var(--ug-line-2);
  }
  .ug-overlay-title { margin-bottom: 18px; }
  /* Follow a swipe: JS sets --ug-drag while the finger is down. */
  .ug-overlay.is-dragging .ug-overlay-dialog {
    transition: none;
    transform: translateY(var(--ug-drag, 0px));
  }
}

@media (max-width: 640px) {
  .ug-hero { padding: 46px 20px 36px; }
  .ug-aud { padding: 52px 20px 58px; }
  .ug-search-input { padding: 16px 18px 16px 48px; font-size: 16px; }
  .ug-search-i { left: 18px; }
  .ug-chips { flex-direction: column; gap: 8px; }
  .ug-chips-label { margin-right: 0; margin-bottom: 2px; }
  .ug-chip { width: 100%; justify-content: center; }
  .ug-card { padding: 22px 20px 10px; }
  .ug-cta { padding: 0 20px 64px; }
  .ug-cta-card { padding: 34px 26px; }
  .ug-cta-actions { width: 100%; }
  .ug-cta-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ug-card, .ug-chip, .ug-cta-primary, .ug-topic-open, .ug-topic-body { transition: none; animation: none; }
  .ug-topic-sum:hover .ug-topic-open { transform: none; }
}