/* ============================================================================
   Doc editor — a Google-Docs replica window rendering the campaign copy.
   Content comes from the generated doc-editor-content.js (DOC_TABS, DOC_COMMENTS).
   Every selector is prefixed .doc- / #win-doc per components/DESIGN.md.

   Extracted from css/style.css on 2026-08-07 (it was ~500 of that file's 781
   lines). The old `tb-` toolbar namespace is now `doc-tb-`: `tb-` was short
   enough to collide with the platform top bar once already (see PROGRESS.md,
   2026-08-06), and a component prefix is what stops that recurring.
   ========================================================================== */

#win-doc {
  height: min(80vh, var(--desk-band));
  min-height: 340px;
  cursor: default;      /* only the header is a drag handle */
  touch-action: auto;   /* content must stay touch-scrollable */
}

.doc-chrome {
  --doc-line: #000000;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--doc-line);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Title bar: doc name, menus, presence, view-only --- */
.doc-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 12px 20px;
  background: #ffffff;
  border-bottom: 1px solid var(--doc-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.window.dragging .doc-titlebar { cursor: grabbing; }

/* flex:1 on both this and .doc-titlebar-right (below) is what centres
   .doc-menus in the middle regardless of the two sides' unequal content
   widths — a plain justify-content:space-between wouldn't truly centre it,
   only space it, since the title text and the presence/view-only cluster
   aren't the same width. */
.doc-titlebar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
}

.doc-icon { width: 22px; height: 26px; }

/* Dismiss control — the whole cluster acts as a single minimise button
   (unlike .win-lights, which wires close/minimise to separate dots). */
.doc-dismiss {
  display: flex;
  align-items: center;
  flex: none;
  border: none;
  background: none;
  padding: 0;
  margin-right: 2px;
  cursor: pointer;
}
.doc-dismiss svg { width: 42px; height: auto; display: block; }
.doc-dismiss:hover { opacity: 0.75; }

.doc-title {
  font-size: 17.25px;
  font-weight: 700;
  color: #16161f;
}

.doc-menus {
  display: flex;
  flex: 0 0 auto; /* stays at its own intrinsic width, centred by the two flex:1 siblings */
  gap: 16px;      /* was 26px */
  font-size: 15.525px;
  font-weight: 500;
  color: #16161f;
}

/* File/Edit/View/Tools/Help — real click-to-open dropdowns (2026-08-08).
   Same "one open at a time, closes on outside click" contract as the
   top-bar mega-menus and the pllm "+" menu; the individual items don't do
   anything when clicked (this is a View-only replica), a click on one just
   closes its menu. Menu content is a standard Docs item set — the supplied
   reference SVGs bake their menu text as vector letter outlines with no
   literal string content, so exact wording couldn't be extracted; the
   panel sizes below are chosen to roughly match the reference's box
   heights (File 163px/6 items, Edit 183px/7, View & Tools 120px/4, Help
   106px/3). Worth a glance against the source design. */
.doc-menu { position: relative; }

.doc-menu-trigger {
  background: none;
  border: 0;
  border-radius: 6px;
  padding: 4px 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.doc-menu-trigger:hover { opacity: 0.6; }
/* opacity:1 here matters — without it, hovering an already-open trigger
   (very likely, the cursor is usually still over what was just clicked)
   would combine with the :hover rule above and wash out the background. */
.doc-menu.is-open .doc-menu-trigger {
  opacity: 1;
  background: #D5DFFF;
}

/* Global convention: a trigger+panel pair always positions the panel
   `absolute; top: 100%; left: 0` relative to a `position: relative` wrapper
   around the trigger ALONE — so the panel hugs whichever trigger was
   actually clicked, never a fixed/centered spot. Every dropdown on this
   site (doc menus, doc-tb-dropdown, topbar-mm) follows this; deviate only
   when a specific menu calls for it. */
.doc-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  background: #E8F2FF;
  border: 1px solid var(--doc-line);
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.doc-menu.is-open .doc-menu-panel { display: flex; }

.doc-menu-panel button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 13.8px;
  font-weight: 500;
  color: #16161f;
  cursor: pointer;
}
.doc-menu-panel button:hover { background: #f0f2fc; }

.doc-titlebar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex: 1 1 0;
}

/* Supplied as one 180x29 unit (4 presence dots + the "View only" pill) —
   replaces the earlier separate .doc-presence/.doc-viewonly elements, which
   only had 3 dots and different colours/pill styling. */
.doc-presence-viewonly { display: block; }

/* --- Toolbar (decorative): left / centered / right groups --- */
.doc-toolbar {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 7px 18px;
  background: #F6F9FF;
  border-bottom: 1px solid var(--doc-line);
  color: #5b6076;
  user-select: none;
}

.doc-tb-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.doc-tb-left { flex: 1 1 0; }
.doc-tb-right { flex: 1 1 0; justify-content: flex-end; }

/* Decorative/inert (View only) — dimmed so they read as unavailable next
   to the real font/size pickers in the centre. */
.doc-tb-left .doc-tb-icon,
.doc-tb-right .doc-tb-icon {
  opacity: 0.3;
}
.doc-tb-center { flex: 0 0 auto; gap: 9px; }

.doc-tb-icon svg { width: 16px; height: 16px; display: block; }

.doc-tb-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 5px;
  background: #E5EBFF;
  font-size: 14.375px;
  font-weight: 500;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.doc-tb-plain { background: none; padding: 4px 0; }

.doc-tb-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #5b6076;
}

.doc-tb-sep {
  width: 1px;
  height: 18px;
  background: #c9cfe4;
}

.doc-tb-drop { display: flex; align-items: center; gap: 3px; }

/* Font + size pickers (2026-08-08) — real, functional, unlike the rest of
   the toolbar's decorative icons. Reuses .doc-tb-label for the trigger's
   pill look; the panel/item styling below borrows the same shape as
   .doc-menu-panel (component-scoped, not shared — this toolbar sits inside
   the doc chrome, not the titlebar). */
/* Width lives on the dropdown wrapper (not the trigger) and both trigger
   and panel inherit it at 100% — one source of truth, so the open panel is
   always exactly as wide as its trigger and the two read as a single
   connected shape (2026-08-08b), not a pill with a separate floating menu.
   Fixed to the widest option's label so picking a different font/size never
   reflows the toolbar — measured against "Times New Roman" / "Medium" at
   the trigger's own font-size (14.375px/500), not guessed. */
.doc-tb-dropdown { position: relative; }
.doc-tb-dropdown[data-tb-dropdown="font"] { width: 190px; }
.doc-tb-dropdown[data-tb-dropdown="size"] { width: 120px; }

.doc-tb-dropdown-trigger { width: 100%; justify-content: space-between; }

/* Open state: trigger becomes the panel's top edge — square bottom
   corners, no bottom border, so the two boxes fuse into one outline with
   a single divider (the panel's own top border) between the current value
   and the option list. */
.doc-tb-dropdown.is-open .doc-tb-dropdown-trigger {
  background: #E5EBFF;
  border: 1px solid var(--doc-line);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  /* .doc-tb-label has 4px vertical padding; the border eats into that
     space, so drop it 1px to keep the label's baseline where it was. */
  padding-top: 3px;
  padding-bottom: 3px;
}

.doc-tb-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  display: none;
  flex-direction: column;
  padding: 6px;
  background: #E5EBFF;
  border: 1px solid var(--doc-line);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}

.doc-tb-dropdown.is-open .doc-tb-dropdown-panel { display: flex; }

.doc-tb-dropdown-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px; /* floor on the label-to-checkmark space-between gap */
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 13.8px;
  font-weight: 500;
  color: #16161f;
  cursor: pointer;
}
.doc-tb-dropdown-panel button:hover { background: #d3ddff; }

/* Font picker: each option previews in its own typeface, not the trigger's
   current one — mirrors data-font on the same button in doc-editor.html. */
.doc-tb-dropdown[data-tb-dropdown="font"] .doc-tb-dropdown-panel button[data-font*="Times New Roman"] { font-family: "Times New Roman", Times, serif; }
.doc-tb-dropdown[data-tb-dropdown="font"] .doc-tb-dropdown-panel button[data-font*="Courier"] { font-family: "Courier New", Courier, monospace; }
.doc-tb-dropdown[data-tb-dropdown="font"] .doc-tb-dropdown-panel button[data-font*="Comic Sans"] { font-family: "Comic Sans MS", "Comic Sans", cursive; }

.doc-tb-dropdown-panel button.is-selected::after {
  content: url("../../assets/doc-tb-check.svg");
  flex: none;
}

/* 22-column grid: 10px margin, 10px gutters — sidebar 5 / page 12 / comments 5.
   No top padding so the ruler hugs the toolbar; the sidebar keeps its own margin. */
.doc-body {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  gap: 10px;
  padding: 0 10px; /* no top/bottom padding — ruler hugs the toolbar, pages bleed off the bottom */
  flex: 1 1 auto;
  min-height: 0; /* lets the scroll areas shrink inside the flex column */
  background: #E8F2FF;
}

/* --- Sidebar: document tabs panel with outline (5 columns) --- */
.doc-tabs {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 10px 0;
  border-radius: 10px;
  background: #FDFDFF;
  border: 1px solid var(--doc-line);
}

.doc-tabs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  padding: 12px 9px 14px;
  scrollbar-width: thin;
  scrollbar-color: #c9cfe8 transparent;
}

.doc-tabs-list::-webkit-scrollbar { width: 6px; }

/* Extra breathing room between top-level tab entries (F.A.Q, Landing page
   copy v1) — each is its own <li>, so this only lands between them, not
   before the first or after the last one's outline. */
.doc-tabs-list > li + li { margin-top: 16px; }
.doc-tabs-list::-webkit-scrollbar-thumb { background: #c9cfe8; border-radius: 3px; }

.doc-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 9px;
  margin: 2px 0;
  border: none;
  border-radius: 7px;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 14.375px;
  font-weight: 600;
  color: #3a4fb0;
  cursor: pointer;
}

.doc-tab:hover { background: #f0f2fc; }

.doc-tab.active {
  background: #D5DFFF;
  color: #223a8f;
  box-shadow: 0 0 0 1px var(--doc-line);
}

.doc-tab .doc-tab-glyph {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.doc-tab .doc-tab-badge {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: #EBF0FF;
  font-size: 12.075px;
  font-weight: 600;
  color: #3a4fb0;
}

.doc-tab.active .doc-tab-badge { background: #ffffff; }

/* Outline of the active tab's headings (styled like a Docs outline) */
/* Connector line runs the full height of the outline (2026-08-08 — was only
   drawn per nested group before). Reuses the same colour/weight the group
   rule below used to carry on its own. */
.doc-outline {
  margin: 10px 0 6px 8px;
  padding-left: 12px;
  border-left: 1.5px solid #d4d7e6;
  list-style: none;
}

.doc-outline button {
  display: block;
  width: 100%;
  padding: 7px 6px;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 14.95px;
  font-weight: 400;
  color: #71758c;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
}

.doc-outline button:hover { background: #f0f2fc; color: #3a4fb0; }

/* Section the reader is currently in (doc-editor.js's syncOutline). Same
   blue the hover state already uses, so the rail keeps one accent colour;
   weight and a filled ground carry the "you are here", which stays legible
   when the pointer is elsewhere on the page. */
.doc-outline button.is-active {
  background: #e8ecfd;
  color: #3a4fb0;
  font-weight: 600;
}

/* Consecutive sub-headings sit in an indented group with their own branch
   line, alongside (not instead of) .doc-outline's continuous line — the
   two together read as trunk + subdivision, like a file-tree indent guide. */
.doc-outline-group {
  list-style: none;
  margin: 2px 0 2px 22px;
  padding-left: 12px;
  border-left: 1.5px solid #d4d7e6;
}

/* --- Scroll area: spans page (12) + rail (5) + their gutter, so the scrollbar
       sits at the far right edge of the window --- */
.doc-scroll {
  /* ---------- Page geometry ----------
     These live here, not on .doc-page, because .doc-scroll is the nearest
     common ancestor of BOTH page-sized things: .doc-columns > .doc-page (the
     sheets) and .doc-rulerbar > .doc-ruler. Declared on .doc-page, the ruler
     could not see them — it is a sibling, not a descendant — so it silently
     fell back to its grid track and its indent markers drifted away from the
     page's margin guides. --doc-zoom is set by doc-editor.js on #win-doc for
     the same reason, since .doc-rail needs it too.

     Sheets lay out at a fixed A4 box and are scaled to whatever the 13-column
     track offers, via --doc-zoom. The sheet's height used to come from
     `width: 100%` plus the A4 aspect-ratio, so it grew and shrank with the
     window while the px type did not, and how much copy fitted a page moved
     with the viewport — the same content paginated to 8 sheets at 1920 and 9 at
     1440. It is now pure geometry, identical at every window size, and what a
     real editor does: a document at 70% zoom holds the same words as at 130%.

     --doc-sheet-w is the one knob for "fit more on a page": a bigger reference
     box against unchanged px type renders as smaller text once the zoom scales
     it back to the column. */
  --doc-sheet-w: 794px;   /* A4 at 96dpi; x1.414 => 1123px tall */
  /* One inch, at the 96dpi --doc-sheet-w is expressed in — the
     margin a real Google Doc opens with (2.54cm), and where the dashed guides
     and assets/doc-ruler.svg's indent markers therefore land. These were 56px
     and 44px against a 920px sheet, i.e. 6.1% side and 3.4% top/bottom
     margins, where the source document runs 12-13% on all four sides; the
     page read as text bleeding into its own edges. */
  --page-inset: 96px;  /* distance from sheet edge to the ruler markers & text edges */
  --sheet-vpad: 96px;  /* sheet bottom padding */
  /* Header margin, 30% off the one-inch bottom: a full inch of dead white
     above the title pushed the first line of every page uncomfortably low
     without adding anything. Separate token because only the TOP was cut. */
  --sheet-vpad-top: 67px;
  grid-column: span 17;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: #E8F2FF; /* shows through as the gap between pages */
  scrollbar-width: thin;
  scrollbar-color: #b9c2dc transparent;
}

.doc-scroll::-webkit-scrollbar { width: 9px; }
.doc-scroll::-webkit-scrollbar-thumb { background: #b9c2dc; border-radius: 5px; }

/* Inner grid keeps the page at 13 columns and the rail at 4 */
.doc-columns {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 10px;
  align-items: start;
  /* ---------- Why there is empty space after the last page ----------
     The outline in the sidebar scrolls a heading to the top of the viewport
     (doc-editor.js's makeLink). A scroller can only reach
     scrollHeight - clientHeight, so any heading sitting closer than one
     viewport-height to the end of the document simply cannot get there:
     scrollTo() clamps and the page does not move at all. That is what made
     the last two outline entries look dead — "Pick A Limit" needed
     scrollTop 2596 and "Innovation requires..." 2749, against a maxScroll
     of 2417.
     One scroller-height of trailing room is exactly what makes EVERY entry
     reachable, whatever the copy repaginates to — a constant tuned to today's
     last page would rot. --doc-trailing is the scroller's own clientHeight,
     measured in doc-editor.js; it cannot feed back, since a child's padding
     doesn't change the scroller's client box. The fallback covers the frame
     before the first measurement. It reads as ordinary trailing space under
     the final sheet. Mobile overrides this with its own bottom padding for
     the comment bar (see the media query at the end of this file). */
  padding-bottom: var(--doc-trailing, 90vh);
}

/* Sticky ruler bar: a direct child of the scroll container (not a grid item), so
   it stays pinned under the toolbar at every scroll position, initial included.
   Sits flush against the toolbar — no gap above the ruler. */
/* Transparent, not #E8F2FF — this sticky bar's own grid box spans the FULL
   17 columns (it's a block-level element, sized to its container) even
   though only .doc-ruler (columns 1–12) has anything in it. An opaque fill
   here painted over columns 13–17 too, i.e. over the comment rail, and
   being sticky/z-index:3 it clipped the top of whichever comment card had
   scrolled up underneath it. Transparent lets the rail scroll all the way
   up to the toolbar, fully visible. */
.doc-rulerbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 10px;
  pointer-events: none;
}

.doc-rulerbar .doc-ruler { pointer-events: auto; }

/* Tick ruler: spans the page columns as a bordered box. The tick artwork
   (assets/doc-ruler.svg) draws its own white fill + left/right/bottom
   border — no top edge on purpose, the toolbar above already draws that
   line.
   Rendered as an <img>, not a CSS background — a background-image only
   repaints when its OWN box resizes, which lags a live viewport resize on
   some engines. An <img> sized via width/height:100% is resolved during
   normal layout instead, same pass as .doc-page.
   ---------- Why this is sized like a sheet ----------
   The ruler shares the page's coordinate system: same fixed --doc-sheet-w,
   same --doc-zoom. That is what makes the blue indent markers line up with
   the dashed margin guides at EVERY viewport. The guides are painted inside
   .doc-sheet, which is zoomed, so they land at --page-inset x zoom on screen;
   the markers used to be positioned in unzoomed screen space at a flat
   --page-inset, so the two only ever agreed at zoom 1 and drifted further
   apart the wider or narrower the window got.
   It also retires the old inline-width sync in doc-editor.js. That existed
   because .doc-ruler and .doc-page sit in two separate CSS Grid instances
   (.doc-rulerbar vs .doc-columns) whose independent fractional-pixel rounding
   could disagree by a hair. Both now derive their width from the same two
   custom properties instead of from their own grid, so there is no second
   computation left to drift. */
.doc-ruler {
  grid-column: 1 / span 13;
  position: relative; /* anchors the indent markers */
  width: var(--doc-sheet-w);
  zoom: var(--doc-zoom, 1);
  height: 22px;
}

.doc-ruler-ticks {
  display: block;
  width: 100%;
  height: 100%;
}

.doc-ruler-marker {
  position: absolute;
  top: 2px;
  width: 12px;
  height: 10px;
}

.doc-ruler-marker-left { left: calc(var(--page-inset) - 6px); }
.doc-ruler-marker-right { left: calc(100% - var(--page-inset) - 6px); }

/* Stack of A4-ratio sheets with a 15px gap between pages */
.doc-page {
  /* 13 of 17, not 12: the extra column is the cheapest on-screen type size
     available, since --doc-zoom is just columnWidth / --doc-sheet-w. The
     comment rail gives it up (.doc-rail below) and still fits its cards.
     The page's size itself comes from --doc-sheet-w on .doc-scroll. */
  grid-column: 1 / span 13;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  padding: 0; /* flush against the ruler — the last page bleeds off the bottom edge too */
  /* 11pt body on 17pt leading, the source document's own setting. Was
     17px/1.7, which is comfortable web body copy but far too large relative to
     an A4 page — it is what pushed this tab to five sheets. */
  font-size: calc(14.7px * var(--doc-font-scale, 1));
  font-family: var(--doc-font-family, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  line-height: 1.55;
  color: #1c1c28;
}

/* One page: 1:1.414 (A4), black border, dashed margin guides */
/* Vertical dashed margin-guide lines, one at each page margin — removed
   2026-08-08 earlier the same day, restored per a new reference (Line 28.svg:
   black at 20% opacity, ~11px dash / ~11px gap) rather than the original
   solid-blue-grey pattern. */
.doc-sheet {
  /* Fixed layout width, then scaled to the column — see .doc-page above.
     `zoom` and not `transform: scale()`: zoom scales the used size, so the
     flex column still reserves the sheet's real on-screen height and the 15px
     page gaps stay put. A transform would leave every sheet's untransformed
     footprint behind and the pages would overlap. */
  width: var(--doc-sheet-w);
  zoom: var(--doc-zoom, 1);
  aspect-ratio: 1 / 1.414;
  overflow: hidden; /* the paginator keeps content within the box */
  /* text starts exactly at the dashed margin guide, no extra offset */
  padding: var(--sheet-vpad-top) var(--page-inset) var(--sheet-vpad);
  background: #ffffff;
  border: 1px solid var(--doc-line);
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 11px, transparent 11px 22px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 11px, transparent 11px 22px);
  background-size: 1px 100%, 1px 100%;
  background-position: var(--page-inset) 0, calc(100% - var(--page-inset)) 0;
  background-repeat: no-repeat;
}

/* Rare: one block taller than a page — grow instead of clipping it */
.doc-sheet-tall {
  aspect-ratio: auto;
  overflow: visible;
}

.doc-page a { color: #FF4052; }

/* --- Comments rail (5 columns): scrolls with the page, so cards stay beside
       their highlighted sentence --- */
.doc-rail {
  grid-column: 14 / span 4;
  position: relative;
  align-self: stretch;
}

/* --- Scroll-triggered highlight + comment --- */
mark.doc-mark {
  background: transparent;
  color: inherit;
  padding: 1px 0;
  transition: background-color 0.6s ease;
  cursor: pointer; /* clicking a citation jumps to its pllm prompt (js/main.js interlinks) */
}

mark.doc-mark.revealed { background-color: #FFF9BA; }

.doc-comment {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid var(--doc-line);
  box-shadow: 0 4px 14px rgba(80, 80, 140, 0.08);
  opacity: 0;
  visibility: hidden;
}

/* Every comment bounces in now, not just the two pinned title ones — this
   is the gentler version (smaller overshoot); .doc-comment-pinned.shown
   below overrides with a more pronounced bounce for those two specifically. */
.doc-comment.shown {
  animation: doc-comment-bounce-in-soft 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes doc-comment-bounce-in-soft {
  0% { opacity: 0; visibility: visible; transform: translateY(-10px) scale(0.96); }
  60% { opacity: 1; transform: translateY(2px) scale(1.008); }
  80% { transform: translateY(-1px) scale(0.999); }
  100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
}

/* Pinned comments (no anchor mark): normal document flow at the rail's top,
   stacking via margin instead of a computed `top`. The first one is pushed
   down to land level with the doc title, which means clearing the sheet's
   header margin — and doing so in the SAME scaled space as the page, since a
   flat pixel offset only lined up at one viewport width (the same class of
   drift the ruler markers had). */
.doc-comment-pinned {
  position: static;
  margin: 0 2px 12px;
  opacity: 0;
  visibility: hidden;
  transition: none; /* bounce-in animation replaces the base fade-in */
}

.doc-comment-pinned:first-of-type {
  /* The sheet's own header margin, scaled, plus the page's 1px border. */
  margin-top: calc(var(--sheet-vpad-top) * var(--doc-zoom, 1) + 1px);
  /* was: a flat 78px, measured against the rendered h1's top, not the raw
                        box-model sum — margin collapsing inside the grid
                        item ate ~9px of the theoretical 69px */
}

.doc-comment-pinned.shown {
  animation: doc-comment-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes doc-comment-bounce-in {
  0% { opacity: 0; visibility: visible; transform: translateY(-18px) scale(0.92); }
  60% { opacity: 1; transform: translateY(4px) scale(1.015); }
  80% { transform: translateY(-2px) scale(0.998); }
  100% { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
}

/* Pinned comments belong to the Landing page copy tab's title — hidden
   outright (not just faded) on every other tab, since they're revealed by a
   timer rather than gated by a scroll-position check against a mark. */
.doc-rail.pinned-hide .doc-comment-pinned {
  display: none;
}

.doc-comment-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}

.doc-comment-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.doc-comment-name {
  font-size: 13.8px;
  font-weight: 700;
  color: #16161f;
}

.doc-comment-role {
  font-size: 12.075px;
  color: #8a8fae;
}

.doc-comment-body {
  font-size: 13.8px;
  line-height: 1.5;
  color: #1c1c28;
}

/* ---------- Heading roles ----------
   The source document has exactly one h1 (the doc's own title), a subtitle
   under it, h2 per section and h3 per sub-section, and that hierarchy is what
   lets it hold three pages. Sizes below are its measured type scale, converted
   from points at the 96dpi --doc-sheet-w is expressed in (1pt = 4/3 px):

     26pt title      -> 34.7px    16pt subtitle -> 21.3px
     16pt section h2 -> 21.3px    14pt h3       -> 18.7px
     11pt body       -> 14.7px    17pt leading  -> line-height 1.55

   Until 2026-08-10 every section heading was an h1 as well, at 27px with 60px
   of air above it, and the body ran at 17px/1.7 — a stack of near-identical
   headings with nothing for a reader to skim by, spread over five pages. */
.doc-page h1 {
  font-size: calc(34.7px * var(--doc-font-scale, 1));
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 6px;
  color: #16161f;
  transition: background-color 0.6s ease;
}

/* Highlights the doc title in step with the two pinned title comments —
   set by doc-editor.js's pinned-reveal timer, re-applied on every openTab()
   while the tab is Landing page copy (title text is rebuilt per tab). */
.doc-page h1.doc-title-highlighted {
  background-color: #FFF9BA;
}

/* Subtitle: a <p>, not a heading — it is a sentence pair rather than a section
   marker, and the source sets it in the regular weight at the section size.
   Carries its own <br>, so the line break is content, not a width accident. */
.doc-page .doc-subtitle {
  font-size: calc(21.3px * var(--doc-font-scale, 1));
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 22px;
  color: #3d3d4a;
}

/* Section headings. The asymmetric margin is deliberate: generous above so
   each section gets visible air, tight below so the heading stays attached to
   its own copy rather than floating between the two. */
.doc-page h2 {
  font-size: calc(21.3px * var(--doc-font-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  margin: 34px 0 10px;
  color: #16161f;
}

.doc-page h3 {
  font-size: calc(18.7px * var(--doc-font-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  margin: 18px 0 4px;
  color: #16161f;
}

.doc-page h4 {
  font-size: calc(16px * var(--doc-font-scale, 1));
  font-weight: 600;
  margin: 14px 0 5px;
  color: #2b2b3d;
}

.doc-page p { margin: 0 0 11px; }

/* The closing "Innovation requires taking risks..." line. Body-size bold in
   the source document rather than a section heading, so it is a <p> carrying
   its own lead-in space — the section-heading treatment read as a new section
   starting and cost a third of the last page. */
.doc-page p.doc-closing { margin: 22px 0 12px; }

/* The two bracketed [Citation] lines and the closing regulator note run a step
   below body size in the source (10pt against 11pt) — they are asides, and
   sizing them as body made them compete with the copy they annotate. */
.doc-page ul.doc-cite,
.doc-page p.doc-footnote {
  font-size: calc(13.3px * var(--doc-font-scale, 1));
}

/* Lists sit a clear step in from the body text rather than nearly flush with
   it, roughly the first-line indent a real Google Doc uses. Nested lists
   inherit and compound, which is the behaviour you want. */
.doc-page ul,
.doc-page ol { margin: 0 0 11px 30px; }

.doc-page li { margin-bottom: 5px; }

/* The table runs smaller than body copy in the source (9pt cells under an 11pt
   header row), which is what keeps three columns of prose readable at this
   width. */
.doc-page table {
  width: 100%;
  margin: 0 0 14px;
  border-collapse: collapse;
  font-size: calc(12px * var(--doc-font-scale, 1));
}

.doc-page th,
.doc-page td {
  border: 1px solid var(--doc-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.doc-page th {
  font-size: calc(14.7px * var(--doc-font-scale, 1));
  font-weight: 700;
  background: #F6F9FF;
}

/* Mobile bottom comment bar — built by doc-editor.js, appended as the last
   child of .doc-chrome. No-op outside the mobile media query below: this
   base rule keeps desktop provably unaffected regardless of what the mobile
   block does to it. */
.doc-mcb { display: none; }

/* ---------- Menu-item notice ----------
   Every item under File / Edit / View / Tools / Help is inert — this is a
   view-only replica. Clicking one now says so, instead of the menu just
   closing with nothing to show for it. Deliberately the same card as the
   pllm window's send-attempt toast (see .pllm-toast in
   components/pllm/pllm.css): both are "that control doesn't do what you
   expect, and here is why" notices, so they should read as one device.
   Built by doc-editor.js and appended to .doc-chrome, like .doc-mcb above. */
.doc-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: min(330px, 84%);
  box-sizing: border-box;
  background: #ECECEC;
  border: 1px solid var(--doc-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  text-align: center;
  /* Inert shown or hidden: a notice, never a control, and it must not swallow
     a click meant for the page underneath. */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}

.doc-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.doc-toast-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--doc-line);
  font-size: 12.5px;
  font-weight: 500;
  color: #000;
}

.doc-toast-body { padding: 22px 26px 26px; }

.doc-toast-icon {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 18px;
}

.doc-toast-title {
  margin: 0 0 10px;
  font-family: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.doc-toast-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

/* ==========================================================================
   Mobile (<=767px) — see components/doc-editor/doc-editor.js for the JS half
   (bottom comment bar content + syncMobileComments(), tabs drawer wiring).
   Desktop (>=768px) is byte-identical: every rule below is scoped to this
   media query, appended after every desktop rule above.
   ========================================================================== */
@media (max-width: 767px) {
  /* ---------- Titlebar: compact, menus hidden, presence pill shrunk ---------- */
  .doc-titlebar {
    padding: 8px 12px;
  }

  .doc-menus { display: none; }

  .doc-title {
    font-size: 15px;
  }

  .doc-presence-viewonly {
    width: 130px;
    height: auto;
  }

  /* ---------- Toolbar: only the real font/size pickers survive ---------- */
  .doc-toolbar {
    padding: 6px 10px;
    justify-content: center;
  }

  .doc-tb-left,
  .doc-tb-right {
    display: none;
  }

  .doc-tb-center {
    flex: 0 1 auto;
  }

  /* ---------- Ruler: print metaphor, no room at 375px ---------- */
  .doc-rulerbar { display: none; }

  /* ---------- Grid restructure: sidebar becomes a drawer, rail becomes
     the bottom comment bar, page goes full width ---------- */
  .doc-body {
    display: block;
    padding: 0;
    position: relative; /* anchors the tabs drawer (MobileShell.createDrawer) */
  }

  .doc-tabs {
    margin: 0;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    border-left: none;
  }

  .doc-scroll {
    height: 100%; /* was a grid-stretch child; .doc-body is no longer a grid */
    --page-inset: 16px;
    --sheet-vpad: 20px;
    --sheet-vpad-top: 20px;
  }

  .doc-columns {
    display: block;
    /* Clears the bottom comment bar and then some, so the LAST mark can still
       be scrolled above it. --doc-mcb-h is written by doc-editor.js from the
       live bar; it replaces a hardcoded 160px that had fallen ~31px short of
       the bar's real height, which left the final comment's sentence stuck
       behind the bar with nowhere left to scroll. The fallback matches the
       two-card bar. */
    padding-bottom: calc(var(--doc-mcb-h, 240px) + 32px);
  }

  .doc-rail { display: none; } /* comments live in .doc-mcb instead */

  .doc-page {
    padding: 0 14px;
  }

  /* ---------- The continuous-page trick ----------
     aspect-ratio:auto + overflow:visible means a sheet's clientHeight grows
     to fit its content, so renderPage()'s own "does this sheet overflow"
     test (scrollHeight > clientHeight) never trips — every block lands on
     one continuous sheet. Pure CSS; renderPage() itself is untouched. */
  .doc-sheet {
    aspect-ratio: auto;
    overflow: visible;
    border-left: none;
    border-right: none;
    background-image: none; /* dashed margin guides implied a print page */
    /* Undo the desktop fixed-A4-box + zoom (see .doc-page): there are no page
       boxes here to keep consistent, and scaling a 880px sheet down to a
       390px phone would render the type at ~7px. The phone keeps a fluid,
       full-width column at its own type scale. renderPage() also skips the
       page-break markers on mobile, so this stays one continuous sheet. */
    width: auto;
    zoom: 1;
  }

  /* ---------- Type scale for 375px ---------- */
  .doc-page {
    font-size: calc(15px * var(--doc-font-scale, 1));
  }

  /* The phone is a continuous scroll rather than A4 sheets, so type is sized
     for reading on glass instead of scaled off the page — the same hierarchy
     as desktop, one step larger relative to the body. */
  .doc-page h1 {
    font-size: calc(27px * var(--doc-font-scale, 1));
    margin: 4px 0 8px;
  }

  .doc-page .doc-subtitle {
    font-size: calc(19px * var(--doc-font-scale, 1));
    margin: 0 0 18px;
  }

  .doc-page h2 {
    font-size: calc(20px * var(--doc-font-scale, 1));
    margin: 30px 0 9px;
  }

  .doc-page h3 {
    font-size: calc(17px * var(--doc-font-scale, 1));
    margin: 16px 0 4px;
  }

  .doc-page h4 {
    font-size: calc(14.5px * var(--doc-font-scale, 1));
  }

  /* Same step-in as desktop, scaled to the phone column — 40px of a ~343px
     page would eat an eighth of every wrapped line. */
  .doc-page ul,
  .doc-page ol { margin-left: 26px; }

  /* Table: shrunk first, horizontally scrollable as a fallback — 3 columns
     of prose (Product / Process / Protection) still need more than 375px
     to stay readable at any sane font size. display:block on the table
     itself (no wrapper element) lets it scroll as a unit while its rows/
     cells keep table layout internally. */
  .doc-page table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    font-size: calc(12px * var(--doc-font-scale, 1));
  }

  .doc-page table > * { min-width: 460px; }

  .doc-page th,
  .doc-page td {
    padding: 6px 8px;
  }

  /* ---------- Bottom comment bar ---------- */
  .doc-chrome {
    position: relative; /* anchors .doc-mcb */
    border-radius: 0;   /* edge-to-edge app, not a floating card */
  }

  .doc-mcb {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    /* Bottom padding is now just the bar's own inner breathing room. It used
       to add --m-bottom-inset on top, which existed to clear the dock — but
       the window itself stops above the dock now (--m-app-bottom), so that
       reserve was being counted twice and left a visible gap between the
       comment and the dock. */
    padding: 10px 14px 12px;
    background: rgba(232, 242, 255, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--doc-line, #000);
    transform: translateY(0);
    opacity: 1;
    /* Eases up rather than springing: the old cubic-bezier overshot by 56%,
       which on a bar that is also fading in read as a flinch. Opacity runs
       shorter than the slide so the bar is legible before it finishes
       settling. */
    transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.22s ease-out;
  }

  .doc-mcb.is-empty {
    transform: translateY(110%);
    opacity: 0;
  }

  .doc-mcb-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .doc-mcb-track::-webkit-scrollbar { display: none; }

  .doc-mcb-card {
    scroll-snap-align: center;
    flex: 0 0 100%;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid var(--doc-line, #000);
    box-shadow: 0 4px 14px rgba(80, 80, 140, 0.08);
  }

  /* The pager row is ALWAYS laid out, even with a single card — it used to
     flip display:none -> flex, and since the bar is bottom-anchored that
     added 14px to its height by growing the top edge upward, exactly when
     the second pinned comment landed. Reserving the row costs 14px of
     permanent height and buys a bar whose geometry never changes; the dots
     themselves fade in once there is more than one card. */
  .doc-mcb-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    min-height: 6px;      /* dot height — holds the row open when empty */
    opacity: 0;
    transition: opacity 0.22s ease-out;
  }

  .doc-mcb.has-pager .doc-mcb-pager { opacity: 1; }

  .doc-mcb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9cfe4;
  }

  .doc-mcb-dot.is-active { background: #3a4fb0; }

  @media (prefers-reduced-motion: reduce) {
    .doc-mcb,
    .doc-mcb-pager,
    .doc-mcb-card { transition: none; }
  }
}